.container-fluid{
    min-height: 80vh;
    width: 75vw;
}

h1,h2,h3,p{
    text-align: center;
}

.wait{
    cursor: wait;
}

.nav{
    display: block !important;
    border-bottom: 1px solid black;
    height: 41px;
    scroll-behavior: smooth;
}

.nav i{
    padding:10px;
    color:#921D28;
    font-size: 1.5em;
}

.nav i:hover{
    color: grey;
    cursor: pointer;
}


.fa-arrow-left{
    padding:20px;
    color:#921D28;
}
.fa-arrow-left:hover{
    color:grey;
    cursor:pointer;
}



.fa-file-excel{
    padding:20px;
    color:#921D28;
}
.fa-file-excel:hover{
    color:grey;
    cursor:pointer;
}

.nav a {
    float:right;
    padding: 8px 15px;
    background-color: white;
    font-weight: bold;
    text-decoration: none;
    color:black;
}

.nav a:hover{
    background-color: grey;
    color:black;
}

.menu{
    display:block;
    position:absolute;
    width:100%;
    top:40px;
    z-index: 2000;
}

.hidemenu{
    display:none;
}

.row h2{
    margin:0;
    padding:0;
}
.row p{
    margin:0;
    padding:0;
}

p a{
    margin:0;
    padding:0;
}

/* 
ul {
    list-style-type: none;
    text-align: center;
} */


footer{
    min-height: 150px;
    background-color: black;
    color:white;
    margin:0;
    padding:0;
    padding-top:40px;
    padding-bottom:40px;
    text-align: center;
}

footer ul {
    list-style:none;
    padding:0;
    margin:0;
    text-align: center;
}

footer small{
    display: block;
    width: 100%;
    text-align: center;
}

.count-card {
    width: 70vw;
}

.card{
    max-width: 33vw;
    margin:10px auto;
}

i{
    text-align: center;
}

.join-card{
    /* background-image: url("./images/topandbottomtree.jpg"); */
    background-size: contain;
}

.join-card h2{
    width:auto;
}

.rolbanner-counters{
    background-color: red;
}
.rolbanner-counters p{
    margin-bottom: .1em;
}

.fundraiser-scroller{
    background-image: url("./images/alone\ trees.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255,255,255,0.6);
    background-blend-mode: lighten;
    height: 30vh;
}

.location-list{
    min-height: 80vh;
}

.location-map{
    /* background-image: url("./images/map.jpg"); */
    background-size:cover;
    color:white;
    min-height: 100%;
    
}
.header-link{
    font-size: 16px;
}
.header-link a:hover, .header-link p:hover{
    cursor:pointer;
}

.tree-host-link{
    font-size: 24px;
}


.join-button{
    background-color: #921D28;
    color:white;
    border-radius: 5px;
    margin:0;
    padding:0 35px;
    font-size: 22px;
    border:none;
    text-transform: uppercase;
    font-weight: bold;
}

.join-button:hover{
    color: grey;
    background-color: rgb(200, 200, 200);
}

.donate-button{
    background-color: #921D28;
    color:white;
    border-radius: 5px;
    margin:0;
    padding:0 35px;
    font-size: 22px;
    border:none;
    text-transform: uppercase;
    font-weight: bold;
}

.donate-button:hover{
    color: grey;
    background-color: rgb(200, 200, 200);
}

.attend-button{
    background-color: #921D28;
    color:white;
    border-radius: 5px;
    margin:0;
    padding:0 35px;
    font-size: 22px;
    border:none;
    text-transform: uppercase;
    font-weight: bold;
}

.attend-button:hover{
    color: grey;
    background-color: rgb(200, 200, 200);
}

.spacer{
    width:0;
    margin-top:40px;
    margin-bottom:40px;
    height: 0;
}

.title-hr{
    width:55%;
    margin:10px auto;
    height:3px !important;
}

.hr-spacer{
    width:65%;
    margin:40px auto;
    height: 2px;
}

.help-number{
    font-weight: bold;
}

.form-styles input,.form-styles textarea{
    width: 75vw;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.form-styles input.child-width{
    width:auto;
}

#drop-off-locations-phone{
    display:none;
}

#button-field-phone{
    display: none;
}

#button-field-phone button{
    margin: 5px auto;
    width: 100%;
}


.topbranch{
    background-image: url('./images/branchtop.jpg');
    background-size: contain;
    height: 75px;
}

.bottombranch{
    background-image: url('./images/branchbottom.jpg');
    background-size: contain;
    height: 75px;
}


.wide-buttons{
    display: block;
}
.phone-buttons{
    display: none;
}

.scroller-h1{
    color:#921D28;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: bold;
    margin-top: 12vh !important;
}


.fa-house-user{
    color: #921D28;
}

.btn.btn-primary{
    background-color: #921D28;
    border-color: #921D28;
}

.btn.btn-primary:hover{
    background-color: #AA3939;
    border-color: #AA3939;
}

.btn.btn-primary:focus-visible,
.btn.btn-primary:active,.btn.btn-primary:focus{
    background-color: #921D28;
    border-color: #921D28;
}

/*********************************************/


.box{
    display: flex;
    justify-content: center;
    align-items: center;    
    max-width: 100px;
    max-height: 100px;
    width: calc(100vw/4 - 20px);
    height: calc(100vw/4 - 20px);
    margin: 5px;
    border: solid red;
    border-radius: 5px;
    float:left;
    text-align: center;
}

.box h2{
    margin:0;
    padding:0;
}

.box:hover h2{
    font-weight: bold !important;
}

.box:hover{
    cursor: pointer;
    border-width: 5px;
}

.box-green{
    border: solid green !important;
    border-width: 10px !important;
}
.box-green:hover h2{
    font-weight: bold !important;
}
.box-green:hover{
    cursor: pointer;
    border-width: 5px !important;
    font-weight: bold !important;
}

.box-filled-green{
    background-color: green;
    border: none;
    color:white;
}
.box-filled-green:hover h2{
    font-weight: bold !important;
}
.box-filled-green:hover{
    background-color: green;
    border-width: 5px !important;
    color:white;
    cursor: pointer;
    border: solid green !important;
    font-weight: bold !important;
}

.boxfield{
    display: inline-block;
}

.checks input{
    width:auto !important;
}


/**********************************************/


.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .stats{
    display: block;
    position: sticky;
    top:0px;
    width: 50%;
    padding: 10px;
    margin-left: 50%;
    border: solid red;
    border-radius: 5px;
  }

  .stats p{
    font-size: 12px;
    text-align: left;
    margin:0 auto;
    color: green;
  }
  
  .stats-shopping{
    display: block;
    /* position: sticky;
    top:0px; */
    width: 80%;
    padding: 10px;
    margin:5px auto;
    border: solid red;
    border-radius: 5px;
  }

  .stats-shopping p{
    font-size: 12px;
    text-align: left;
    margin:0 auto;
    color: green;
  }

  #shoesize{
    display: block;
  }

  #pantsize{
    display: block;
  }

  #shirtsize{
    display: block;
  }

  #jacketsize{
    display: block;
  }

  .size-hide{
    display:none !important;
  }

  .dashboard-list{
    text-align: center;
    margin-top: 50px;
  }

  .dashboard-list .hr-spacer{
    margin:7.5px auto;
  }

  .dashboard-list a{
    font-size: 20px;
    padding:5px;
    text-decoration: none;
    color:#921D28;
  }
  .dashboard-list a:hover{
    font-weight: bold;
  }

  .dashboard-list a:hover,
  .dashboard-list a:focus,
  .dashboard-list a:visited{
    color:#921D28;
  }

  .hiddencol{
    display: none;
  }

  .hiddenrow{
    display:none !important;
  }


.activity-indication {
    /* Basic styling for the icon */
    display: inline-block; /* Essential for transform to work correctly on inline elements */
}

/* Define the animation */
@keyframes clockwise-spin {
    0% {
        transform: rotate(0deg); /* Start at no rotation */
    }
    100% {
        transform: rotate(360deg); /* End with a full 360-degree clockwise rotation */
    }
}

/* Apply the animation to the icon on a specific event, e.g., hover or a class change */
.icon-to-rotate:hover {
    animation: clockwise-spin 2s linear infinite; /* Apply the animation */
    /* animation-name: clockwise-spin; */ /* Name of the @keyframes rule */
    /* animation-duration: 2s; */ /* How long the animation takes */
    /* animation-timing-function: linear; */ /* Constant speed */
    /* animation-iteration-count: infinite; */ /* Repeat indefinitely */
    /* animation-direction: normal; */ /* Default for clockwise rotation */
}

/* Alternatively, you could trigger it with a class added via JavaScript on click */
/* .icon-to-rotate.active {
  animation: clockwise-spin 2s linear infinite;
} */