*{
    font-family: 'Nunito', sans-serif;
}

html{
    margin:0;
    padding:0;
}

body{
    margin:0px 0px 50px 0px !important;
    padding:0;
    background-color: #fff;
}

img{ border:none; }




/* ======================================== */




.logo-header{
    padding:15px;
    margin-bottom: 25px;
    border-bottom: 1px solid #ebebeb;
    background-color: #162c55;
}


.img-max{
    max-width: 85px;
    width:100%;
}


.img-max-venmo{
    max-width: 175px;
    width:100%;
}


.product-total-wrapper{
    display: none;
}






/* ======================================== */




.divider{
    margin:40px auto 0px auto;
    padding:0px 0px 45px 0px;
    border-top:1px solid #ccc;
    width:85%;
}



.wrapper-box{
    padding: 35px;
    margin: 0px auto 0px auto;
    border-radius: 10px;
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0,3,5,0.25);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,3,5,0.25);
    box-shadow: 0px 3px 8px 0px rgba(0,3,5,0.15);
    background-color: #fff;
}



/* ======================================== */



.wrapper-content a:link          {  font-size:15px; font-weight: 700; text-decoration:none; color:#162c55; }      
.wrapper-content a:visited       {  font-size:15px; font-weight: 700; text-decoration:none; color:#162c55; }  
.wrapper-content a:active        {  font-size:15px; font-weight: 700; text-decoration:none; color:#162c55; }  
.wrapper-content a:hover         {  font-size:15px; font-weight: 700; text-decoration:none; color:#767676; }  


.button-click a:link {    font-size:12px; text-decoration: none; background-color:#162c55; color:#fff; padding:10px 20px 10px 20px; }
.button-click a:visited { font-size:12px; text-decoration: none; background-color:#162c55; color:#fff; padding:10px 20px 10px 20px; }
.button-click a:active {  font-size:12px; text-decoration: none; background-color:#162c55; color:#fff; padding:10px 20px 10px 20px; } 
.button-click a:hover {   font-size:12px; text-decoration: none; background-color:#767676; color:#fff; padding:10px 20px 10px 20px; } 




/* ========================================= */



.text-header{
    color: ##162c55;
    font-weight: 400;
    font-size: 24px;
    margin: 0px auto 15px auto;
    padding: 0;
}

.text-sub-header{
    color: #666;
    font-weight: 400;
    font-size: 16px;
    margin: 0px auto 5px auto;
    padding: 0;
}


.text-important{
    color: #666;
    font-weight: 400;
    font-size: 14px;
    margin: 0;
    padding: 20px;
    font-style: italic;
}

.asterisk{
    display: inline-block;
    color: #162c55;
    font-weight: 700;
}



.msg-box-wrapper{
    display: none;
}

.msg-box{
    color: #162c55;
    padding:20px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}



.product-item{
    padding-bottom:40px !important;
}


.product-details{
    font-size: 16px !important;
}

.current-total{
    color: #999;
    font-weight: 400;
    font-size: 24px;
    margin: 0px auto 0px auto;
    padding: 0;
}


.total-number{
    color: #162c55;
}



/* ========================================= */




input::placeholder {
  color: #ccc; /* Set the desired color */
}



#form-main .form-input-block{
    padding:0px 0px 15px 0px !important;
}



#form-main #form-submit {
    width: 100%;
    border:none;
    background-color: #162c55;
    color:#fff;
    padding:15px;
    font-size: 13px;
    font-weight: 700;
    cursor:pointer;
    background: #162c55 !important;
    -webkit-transition: background-color .25s ease-out;
    -moz-transition: background-color .25s ease-out;
    -o-transition: background-color .25s ease-out;
    transition: background-color .25s ease-out;
}


#form-main #form-submit:hover {
    background: #767676 !important;
}


#form-main label{
    font-size: 14px;
    color:#666;
}

#form-main .form-item{
    margin-top: 5px;
    width:100%;
    border: none;
    background-color: #f0f0f0;
}


#form-main input, 
#form-main select,
#form-main textarea{
    padding:10px;
}

.form-item-header{
    font-weight: 600;
    color:#666;
    font-size: 14px;
    margin-bottom: 0px !important;
}



/* ======================================= */




.table-output-results{
    margin:15px auto 15px auto;
}


.table-output-results th{
    font-size: 11px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    background-color:#333;
    color: #fff;
}

.table-output-results td{
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    color: #666;
}


.table-output-results td.last-column{
    border-bottom: 1px solid #ddd;
}

/*.table-output-results tr:nth-child(even) { background: #f9f9f9; }*/

tr:nth-child(4n+0),
tr:nth-child(4n+1) {
    background: #f9f9f9; /* Set the alternating background color */
}


/* ======================================= */




/* Extra small devices (phones, 575px and down) */
@media (max-width: 575px) {     

    .total-wrapper{ margin-bottom:30px !important; }


    .img-max-bottle{
        max-width: 450px;
        width:100%;
    }

} 


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .total-wrapper{ margin-bottom:30px !important; }


    .img-max-bottle{
        max-width: 350px;
        width:100%;
    }

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    .total-wrapper{ margin-bottom:30px !important; }


    .img-max-bottle{
        max-width: 350px;
        width:100%;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .total-wrapper{ margin-bottom:30px !important; }


    .img-max-bottle{
        max-width: 400px;
        width:100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    .total-wrapper{ margin-bottom:0px !important; }


    .img-max-bottle{
        max-width: 450px;
        width:100%;
    }

}




/* ======================================== */




/* 
======================================= 
scroll to top
=======================================
*/

.scrollToTop{
    width:35px; 
    height:35px;
    padding:0px; 
    text-align:center; 
    text-decoration: none;
    position:fixed;
    bottom:30px;
    right:30px;
    display:none;
    z-index: 5000 !important;
    background: url('/tools/field_hockey/waterbottleform/images/back_to_top.png') no-repeat 0px 0px;
}

.scrollToTop:hover{
    text-decoration:none;
}



/* ======================================= */




/* 
======================================= 
spinner
=======================================
*/

.spinner {
   position: relative;
   left: 0px;
   top: 0px;
   height:30px;
   width:30px;
   margin:0px auto;
   -webkit-animation: rotation .6s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border-left:2px solid rgba(22, 44, 85, .10) !important;
   border-right:2px solid rgba(22, 44, 85, .10) !important;
   border-bottom:2px solid rgba(22, 44, 85, .10) !important;
   border-top:2px solid rgba(22, 44, 85, .8) !important;
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}