@charset "utf-8";
/* CSS Document  #f8f8f8 */


body, html{
   background-color: #f8f8f8;
   height: 100%;
   scroll-behavior: smooth;
}

#container{
    min-height: 100%;
}

#main{
    overflow: auto;
    padding-bottom: 100px;
}

#footer{
    position: relative;
    clear: both;
    
}

#signupForm{
    display: none;
}

#memberChart{
    display: none;
    
}

#btn_spacer{
    height: 200px;
    transition: height .5s linear 0s;
}


.starter-template{
    padding: 40px 15px;
}

.max_height_limit{
    
   
    overflow-y: auto;
    
    height: 1500px;
    
}


h1{

    font-size: 30px;
    color: black;
    font-family: 'Teko', sans-serif;
}

h2{

    font-size: 25px;
    color: black;
    font-family: 'Teko', sans-serif;
}

h3{

    font-size: 20px;
    color: black;
    font-family: 'Teko', sans-serif;
    
}


h4{

    font-size: 16px;
    color: black;
    font-family: 'Teko', sans-serif;
}

h5{

    font-size: 15px;
    color: black;
    font-family: 'Teko', sans-serif;
   
    
}



.smText{
    
  font-size: 13px;
  color: gray;
    
}

.primary-color{
    
    background-color: black;
    color: white;
}


.alert{

    width: 400px;
    max-width: 400px;
    

}

.widthbox{
    border: gray 1px solid;
    width: 230px;
    padding: 3px 5px;
    border-radius: 3px;
}


.border-line{

    border: green dashed 1px;
}

.align-r{
    
    text-align: right !important;
}

.align-l{
    
    text-align: left !important;
}

img.width_100{
    
    object-fit: cover;
    width: 100% !important;
    height: 290px !important;
    
}

.storeDiv{
    
    height: 150px; 
   
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    
}


img.store_100{
    
    height: 30px;
    max-width: 150px;
    transition: all .5s linear;
    
}

img.storeIcon{
    
   width: 100%;
   transition: all .5s linear;
    
}

.whiteFont{
    
    color: white;
}

.blackFont{
    
    color: black;
}

img.width_icons_100{

    width: 100%;
    
}

img.height_290{
    
    object-fit: cover;
    height: 290px;
    
}

.brandlogo{
   height: 50px;
   max-width: 390px;
}

.brandlogo_item{
   max-height: 50px;
   max-width: 200px;
}

.catNaviBg{
    
    background-color: lightgray; 
    padding: 5px;
    overflow-x: auto;
    
    
}

.dropDowmImg{
   
    width: 250px;
    max-height: 500px;
    
    
}

.catNavi{
    font-size: 20px;
    color: gray;
    font-family: 'teko', sans-serif;
    
    text-align: center;
    
}

.catNavi:hover{
    color: black;
}


/* The heart of the matter */
.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > .col-xs-2 {
  display: inline-block;
  float: none;
}





.searchBox{
    
   width: 100%; 
   border: gray 1px solid; 
   background-color: white; 
   height: 35px; 
   border-radius: 5px; 
   padding: 5px 10px; 
   outline: none;
    
}


.payment_box{
    border: 1px lightgray solid;
    border-radius: 3px;
    padding: 8px;
    margin: 0px auto 5px auto;
    overflow-y: auto;
    
    height: 200px;
    background: white;
    width: 100%;
}

img.payment_paypal_width{
        margin-top: 3px;
        width: 100% !important;
        cursor: pointer;
    }
    
.p_margin{
    margin: 5px 0 5px 0;
    display: block;
    width: 230px;
    height: 36px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
} 


.brandLogo_btn{
    border: 1px gray solid;
    background-color: transparent;
    border-radius: 3px;
    padding: 5px;
    
}


.qty_btn{
    
    border-radius: 3px;
    outline: none;
    text-align: center;
    border: 1px gray solid;
    width: 45px;
    height: 25px;
}

.adj_btn{
    
    border-radius: 3px;
    outline: none;
    text-align: center;
    height: 25px;
    background-color: transparent;
    border: 1px solid gray;
    margin: 3px;
}

.freeShip{
    
    color: red; 
    font-weight: bold; 
    text-align: center;
    border-radius: 3px;
    background-color: white;
    padding: 5px;
    margin: 5px;
    border: 1px solid lightgray;
}


.to_right{
    text-align: right;
}


.adj_btn:hover{
    
    color: white;
    background-color: black;
    
}

.promo_btn{
    
    margin-top: 5px;
    
}

.btn_more_items{
    
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: white;
    cursor: pointer;
    padding: 5px;
    border: 1px black solid;
    color: black;
    font-size: 11px !important;
    outline: none;
    margin-top:  20px;
    
}



.btn_recomm{
    
    border: 1px lightgray solid;
    border-radius: 3px;
    margin: 3px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: white;
    
}

.img_recomm{
    
    object-fit: cover;
    width: 100%;
    height: 100px;
    
}




.checkoutBtn{
    
    color: white;
    background-color: black;
    width: 100%;
    padding: 5px;
    border-radius: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    border: none;
}

.checkoutBtn2{
    color: white;
    background-color: black;
    width: 280px;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 5px;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    border: none;
    
}

.checkoutBtn3{
    
    color: white;
    background-color: gray;
    width: 100px;
    padding: 1px;
    border-radius: 3px;
    font-family: 'Teko', sans-serif;
    font-size: 19px;
    border: black;
    margin: 3px;
   
    
   
    
}


.checkoutBtn3:hover{
    color: lightgray;
    
}


.readyShip{
    
   width: 50px;
   border: lightgray 1px solid;
   border-radius: 3px;
   padding: 2px;
   margin: 2px;
}


.div_notify{
    
    transition: height .25s linear 0s;
    overflow: hidden;
    
}

.div_storeType{
    
    transition: height .25s linear 0s;
    overflow: hidden;
    height: 65px;
    
    
}


.btn_float{
    float: right;
}   


.slide_hidden{
        
     font-family: teko, arial;
     font-size: 25px;
        
 }




img.img_overflow_300{
    
    max-width: 300px;
}

@-webkit-keyframes blink {
    from {
        opacity: 1.0;
    }
    to {
        opacity: 0.1;
    }
}
.blink {
    color: darkred;
    -webkit-animation-name: blink;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
    -webkit-animation-duration: 2s;
}

.cs_overflow{
    
    height: 200px;
    overflow: auto;
    
}

.testTrack{
    
    height: 50px !important;
    overflow: auto; 
    
}

.table_font_12{
    
    font-size: 13px;
}

.modal-title-style{

    background-color: gray; color: white;

}
.test-style{

    width: 50%;
}

.uploaded_file{


    width: 0px;
    height: 0px;
    transition: width 1s, height 1s linear 0s;

}

.font_btn{

    width: 113px;
    height: 30px;
    border: lightgray 1px solid;
    opacity: 1;
    outline: none;
    transition: opacity .25s linear 0s;
    background-color: transparent;
    font-size: 17px;

}

.font_btn:hover{

    border: red 1px solid !important;
    opacity: 1 !important;


}

.font_tb{
    font-size: 12px;
    
}


.color_btn{
    width: 25px;
    height: 25px;
    border: none;
    border-radius: 25px;
    opacity: 1;
    outline: none;
    transition: opacity .25s linear 0s;
    background-color: transparent;

}

.color_btn:hover{
    border: 1px solid black !important;
    padding-bottom: 0px !important;
}


.black{ background-color: black;}
.black_font_color{color: black;}

.darkgray{ background-color: #262626;}
.darkgray_font_color{color: #262626;}

.gray{ background-color: gray;}
.gray_font_color{ color: gray;}

.lightgray{ background-color: lightgray;}
.lightgray_font_color{ color: lightgray;}

.white{ background-color: #f2f2f2;}
.white_font_color{ color: #f2f2f2;}

.navy{ background-color: navy;}
.navy_font_color{ color: navy;}

.blue{ background-color: blue;}
.blue_font_color{ color: blue;}

.colbalt{ background-color: #006699;}
.colbalt_font_color{ color: #006699;}

.lightblue{ background-color: lightblue;}
.lightblue_font_color{ color: lightblue;}

.lightcyan{ background-color: lightcyan;}
.lightcyan_font_color{ color: lightcyan;}

.lightgreen{ background-color: #b3ffb3;}
.lightgreen_font_color{ color: #b3ffb3;}

.greenyellow{ background-color: greenyellow;}
.greenyellow_font_color{ color: greenyellow;}

.green{ background-color: green;}
.green_font_color{ color: green;}

.darkgreen{ background-color: darkgreen;}
.darkgreen_font_color{ color: darkgreen;}

.olivegreen{ background-color: #408000;}
.olivegreen_font_color{ color: #408000;}

.lightyellow{ background-color: #ffff99;}
.lightyellow_font_color{ color: #ffff99;}

.yellow{ background-color: yellow;}
.yellow_font_color{ color: yellow;}

.gold{ background-color: gold;}
.gold_font_color{ color: gold;}

.orange{ background-color: orange;}
.orange_font_color{ color: orange;}

.redorange{ background-color: #ff3300;}
.redorange_font_color{ color: #ff3300;}

.maroon{ background-color: maroon;}
.maroon_font_color{ color: maroon;}

.brown{ background-color: #4d0000;}
.brown_font_color{ color: #4d0000;}

.darkred{ background-color: #b30000;}
.darkred_font_color{ color: #b30000;}              

.red{ background-color: red;}
.red_font_color{ color: red;}

.pink{ background-color: pink;}
.pink_font_color{ color: pink;}

.purple{ background-color: purple;}
.purple_font_color{ color: purple;}

.darkpurple{ background-color: #660066;}
.darkpurple_font_color{ color: #660066;}

.jade{ background-color: #006666;}
.jade_font_color{ color: #006666;}

.edit_form_wide{
    width: 68%;
    border-radius: 3px;
    padding: 4px;
    border: 1px gray solid;
}



.btn_save_wide{
    width: 30%;
    border-radius: 3px;
    padding-top: 4px;
    border: none;
    background-color: black;
    color: white;
    font-family: teko, arial;
    font-size: 18px;
    float: right;
    
}

.btn_save_wide:hover{
    background-color: lightgray;
    
}

.border_reg22, .border_rush22{
    border: red 1px solid !important;
}

.box_shadow_css{
    box-shadow: 0px 1px 2px lightgray;
    padding: 10px;
}






@font-face {
    font-family: block;
    src: url(/fonts/arial.ttf);
}

@font-face {
    font-family: schoolbook;
    src: url(/fonts/LucidaBrightRegular.ttf);
}

@font-face {
    font-family: script;
    src: url(/fonts/BrushScriptStd.otf);
}

@font-face {
    font-family: FrederickatheGreat;
    src: url(/fonts/FrederickatheGreat.ttf);
}

@font-face {
    font-family: AreYouSerious-Regular;
    src: url(/fonts/AreYouSerious-Regular.ttf);
}
/*
@font-face {
    font-family: teko;
    src: url(/fonts/Teko-Medium.ttf);
}


@font-face {
    font-family: pattaya;
    src: url(/fonts/Pattaya-Regular.ttf);
}
*/


.block_font {
    font-family: block;
    font-weight: bold;
}

.schoolbook_font {
    font-family: schoolbook;
    font-weight: bold;
    padding-bottom: 5px;
}

.script_font {
    font-family: script;
}

.pattaya_font {
    font-family: 'Pattaya', sans-serif;
}



.teko_font {
    font-family: 'Teko', sans-serif;
}


.nav_menu {
    
    font-family: 'Teko', sans-serif;
    font-size: 19px;
   
}

.aisleBox{
    
    font-family: 'Teko', sans-serif;
    font-size: 25px;  
    color: black;
    
    
}

.nav_font{
   font-family: 'Teko', sans-serif;
   font-size: 20px;  
   color: black; 
}

.sellerNaviBtn{
    
    border: none;
    background-color: transparent;
    outline: none;
    
}
.sellerNaviBox{
    
    
    border-radius: 2px; 
    box-shadow: 0 0 1px gray;
    margin-top: 5px;
    
}


#valiate_ship_addr{

    width: 100%; 
    height: 50px;
    opacity: 1;
    z-index: 5;
    cursor: pointer;
    position: absolute;
    

}

.detail_box{

    width: 100%;
    border: lightgrey 1px solid;
    border-radius: 4px;
    height: 399px;
}

.padding_chevron{

    margin-top: 30px;

}

.full_width{

    width: 100% !important;
    border: 1px red dashed;


}

#qty{
    width: 53px; 
    border: 1px lightgray solid;
}

.size_css, .color_css{

    background-color: transparent;
    border: lightgray 1px solid;
    margin: 3px;
    outline: none;
    border-radius: 2px;
    transition: opacity .35s linear 0s;
    position: relative;
}

.size_css:hover, .color_css:hover{

    border: red 1px solid !important;
    opacity: 1 !important;

}

.btnItemElem{
    
    background-color: transparent;
    border: lightgray 1px solid;
    margin: 3px;
    outline: none;
    border-radius: 2px;
    transition: opacity .35s linear 0s;
    
    
}

.btnItemElem:hover{

    border: red 1px solid !important;
    
    
}    


.btnSubEle_0,.btnSubEle_1,.btnSubEle_2,.btnSubEle_3,.btnSubEle_4,.btnSubEle_5,.btnSubEle_6,.btnSubEle_7,.btnSubEle_8,.btnSubEle_9{
    background-color: transparent;
    border: lightgray 1px solid;
    margin: 3px;
    outline: none;
    border-radius: 2px;
    transition: opacity .35s linear 0s;
    
}


.btnSubEle_0:hover,.btnSubEle_1:hover,.btnSubEle_2:hover,.btnSubEle_3:hover,.btnSubEle_4:hover,.btnSubEle_5:hover,.btnSubEle_6:hover,.btnSubEle_7:hover,.btnSubEle_8:hover,.btnSubEle_9:hover{

    border: red 1px solid;
    
    
}  

.carousel_warp{

    background-color: white;
    border: none;
    outline: none;
    border-radius: 3px;
    transition: border .5s linear 0s;
    padding: 5px;
    box-shadow: 0px 2px 2px lightgray;
   
    margin: 0 auto 10px auto;
    text-align: center;
    
    
}

.item_frame_warp{

    background-color: white;
    border: none;

    outline: none;
    border-radius: 3px;
    transition: border .5s linear 0s;
    padding: 3px;
    box-shadow: 0px 2px 8px lightgray;
    overflow: hidden;
    height: 239px;
    margin-bottom: 10px;
    text-align: center;
}

a:hover{
  text-decoration: none;
  
}

.fontBlack{
    
    color: black;
}

.fontBlack:hover{
    
    color: gray;
    
}

#display_form{
    
    
    width: 0px;
    height: 0px;
    overflow: hidden;
}



.carousel_title{

    
    text-align: center;
    padding-bottom: 3px;
    text-decoration: none;

}


.main_color{

    background-color: gray;
    border: 1px solid #000033;

}

.second_color{

    background-color: gray;
    border: 1px solid gray;

}

.bg_color_green{
    background-color: #b3ffb3;
}


.divide_line{


    border-bottom: 1px lightgray solid;
    margin-bottom: 5px;
    padding-bottom: 3px;

}

.btn_edge{

    border-radius: 3px;
    margin: 3px;
}

.align_right{
    text-align: right;


}

.glyphicon.glyphicon-trash {
    font-size: 18px;
    color: #cc0000;
    cursor: pointer;
}

.glyphicon-size {
    font-size: 21px;

    cursor: pointer;
    border: transparent;
    background-color: transparent;

}

.btn_item_remove{

    background-color: #cc0000;
    border: none;

}


.del_box_x{
    width: 100%;

}

.width_170{
    width: 170px;


}


.carousel-fade .carousel-inner .item {
    opacity: 0;

    transition: opacity 1s linear 0s;

}
.carousel-fade .carousel-inner .active {
    opacity: 1;
    transition: opacity 1s linear 0s;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s linear 0s;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    transition: opacity 1s linear 0s;
}
.carousel-fade .carousel-control {
    z-index: 2;

}


.btn_width_100{
    width: 100% !important;
    
    
}



/*
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
*/

.color-red{

    background: #cc0000;
}

#specific_instruction{

    width: 100%;
}

#progress_bar{

    width: 100%;
    height: 5px;
    border: none;
    background-color: transparent;


}

.display_panel{
    
    width: 320px;
    margin: auto;
    position: relative;
}

img.temp_shirt{
    width: 100%;
    
}



img.comp_logo{

    width: 100%;


}

 .store_ph{
        text-align: right;
        font-size: 30px;
        
    }

.modal-width{

    width: 70%;
    margin: auto;

}

.input_dec_name{

    margin-bottom: 8px;

}

.block_font_size{
    font-family: block;
    /* font-size: 25px;*/
    
} 

.schoolbook_font_size{

    font-family: schoolbook;
    /* font-size: 25px;*/
    
}

.script_font_size{
    
    font-family: script;
    /* font-size: 25px;
    line-height: 22px;*/

}

.slider_filter {
    -webkit-appearance: none;
    width: 100% !important;
    height: 1px;
    background: gray;
    outline: none;
    opacity: 1;
    -webkit-transition: .2s;
    transition: opacity .2s;

    margin-bottom: 5px;
}

.slider_filter:hover {
    opacity: 1;
}

.slider_filter::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: gray;


}

.float_right{
    
    float: right;
}


.slider_filter::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: gray;

}

.icon-padding{
    float: left;
    width: 75px;
    padding: 0px 0px !important;
    margin-right: 10px;
    
}
.checkbox-padding{
    float: left;
    width: 400px;


}

/* The container   radio buttons */
.container_filter {
   
    position: relative;
    padding-left: 18px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container_filter input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark_filter {
    position: absolute;
    top: 3px;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: transparent;
    border: 1px black solid;
    border-radius: 10px;
}

/* On mouse-over, add a grey background color */
.container_filter:hover input ~ .checkmark_filter {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container_filter input:checked ~ .checkmark_filter {
    background-color: gray;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark_filter:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container_filter input:checked ~ .checkmark_filter:after {
    display: block;
}

/* Style the checkmark/indicator */
.container_filter .checkmark_filter:after {
    left: 5px;
    top: 0px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#fix_header{

    box-shadow: 0px 2px 2px lightgray; 
    padding-bottom: 5px; 
    background-color: white;

}



.sidenav {


    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 0px;
    width: 0px;
    position: fixed;
    z-index: 1;
    top: 135px;
    left: 0;
    background: rgba(250, 250, 250, 0.8);
    transition: 0.5s;
    border-radius: 2px;

}


/* width */
.sidenav::-webkit-scrollbar {
    width: 5px;

}

/* Track */
.sidenav::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 3px grey; */
    border-radius: 10px; 
}

/* Handle */
.sidenav::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: 10px;
}

/* Handle on hover */
.sidenav::-webkit-scrollbar-thumb:hover {
    background: lightgray; 
    cursor: pointer;
}


.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 15px;
    color: red;
    display: block;
    transition: 0.3s;

}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

.login_box{
    
   width: 100%;
   margin: auto;
    
}

.footer{
    
    background-color: black;
    padding: 10px 0px;
    text-decoration: none;
    
}


    
.footer_link{
    
    color: gray;
    text-decoration: none;
    cursor: pointer;
}

.footer_link:hover{
    color: white;
}

.promo_item{
    
    background-color: #000033; 
    color: white; 
    font-size: 25px; 
    padding: 8px 0px;
    font-family: teko, arial;
    text-align: center;
}


.catBtn{
    
    border: 1px gray solid;
    border-radius: 3px;
    background-color: transparent;
    padding: 5px 10px 0px 10px;
    text-align: center;
    margin: 5px;
    transition: background-color .5s linear 0s;
    
}


.catBtn:hover{
    
    border: 1px black solid;
    background-color: white;
   
    
}


.catBtnDrop{
    
        display: none;

    }

 .welcomeSign{
        
  font-family: teko, sans-serif; 
  background-color: black; 
  color: white; 
  text-align: center; 
  padding: 6px; 
  font-size: 70px; 
  opacity: .05;      
  transition: all 1s ease-in 0s;
        
 }
/*-----------------------------------------------------*/



@media screen and (max-height: 460px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}




/*-----------------below 1200------------------------------------*/
@media (max-width:1400px){
    .modal-width{

        width: 95%;
        margin: auto;

    }



}

/*-----------------below 900------------------------------------*/
@media (max-width:768px){

    
    
  .welcomeSign{
        
    padding: 3px; 
    font-size: 30px; 
        
 }
    
    
    
    .Collapse_760{
        display: none;
    }
    
    .catBtnDrop{
    
        font-family: "teko", arial;
        font-size: 20px;
        color: black;
        border: none;
        background-color: transparent;
        display: block;
        
    }
    
    
    .store_ph{
        text-align: center;
        
    }
    
    
    .promo_item{
    
    font-size: 15px; 
    padding: 2px 0px;
    
    }

    
    .width_170{
        width: 100%;
    }

    
    #valiate_ship_addr{
        
        height: 100px;
    }
    
    img.paypal_width{
       
        width: 100%;
        cursor: pointer;
    }

    
    .paypal_width{
        
        width: 100%;
        cursor: pointer;
    }

    

    .modal-width{
        width: 95%;

    }

    /*
    .block_font_size{
        font-family: block;
        font-size: 15px;
        line-height: 10px;
    } 

    .schoolbook_font_size{

        font-family: schoolbook;
        font-size: 15px;
        line-height: 10px;
    }

    .script_font_size{
        font-family: script;
        font-size: 15px;
        line-height: 10px;

    }
  */


    .sidenav{
        max-height: 339px;
        width: 100% !important;
    }

    .icon-padding{
        width: 20%;
        
    }
    .checkbox-padding{
        
        width: 75%;
        
    }
    
    .slide_hidden{
        
        display: none;
        
    }
    
    
    .storeDiv{
        height: 160px; 
    }


    img.store_100{

        height: 30px;
        max-width: 100px;

    }
    
    
    
    
}




/*-----------------starter5 decor css----------------------------*/

/*
l {
  margin:0;
  padding:0
}
li {
  cursor:move;
  display:block;
  padding:20px 10px;
  background:white;
  border-bottom:solid 1px gray;
}
*/


.testtest{
    
    width: 100%;
    
}

.border_red{
    border: 1px red solid;
    height: 100px;
}

.del_btn{
    
    border: 1px blue solid;
    cursor: pointer;
}

.replace_btn_pos{
    border: 2px black solid;
    border-radius: 20px;
    z-index: 2;
    top: 39px;
    position: absolute;
    right:-5px;
    background-color: black;
    color: white;
}



.del_btn_pos{
    border: 2px black solid;
    border-radius: 20px;
    z-index: 2;
    top: -5px;
    position: absolute;
    right:-5px;
    background-color: black;
    color: white;
}

.del_btn_pos2, .del_btn_pos3{
    
    border: 2px black solid;
    border-radius: 35px;
    z-index: 2;
    top: -5px;
    position: absolute;
    right:-5px;
    background-color: black;
    color: white;
    height: 28px;
    display: none;
    transition: display 1s linear 0s;
   
}

.del_btn_pos4{
    
    
    border-radius: 25px;
    border: 1px black solid;
    background-color: black;
    color: white;
    height: 20px;
    width: 20px;
    padding: 3px;
   
}


.field_div, .sub_field_div{
    
   border: lightgray 1px solid;
   padding: 23px 10px 10px 10px;
   margin-bottom: 20px;
   position: relative;
   cursor: pointer;
   transition: border .5s linear 0s;
   border-radius: 5px;
}

.field_div:hover{
    
    border: black 1px solid !important;
    
    
}


.titleName{
    border: 1px black solid;
    border-radius: 3px;
    z-index: 2;
    position: absolute;
    top: -12px;
    padding: 5px;
    width: 125px;
    height: 25px;
}

.titlePrice{
    border: 1px gray solid;
    border-radius: 3px;
    z-index: 2;
    position: absolute;
    top: -12px;
    left: 138px;
    padding: 5px;
    height: 25px;
    width: 107px;
}

.titleQty{
    border: 1px gray solid;
    border-radius: 3px;
    z-index: 2;
    position: absolute;
    top: -12px;
    left: 248px;
    padding: 5px;
    height: 25px;
    width: 50px;
    
}

.subTitleName{
    border: 1px gray solid;
    border-radius: 3px;
    z-index: 2;
    position: absolute;
    top: -13px;
    padding: 5px;
    width: 113px;
    height: 25px;
}

.subCatName{
    border: 1px gray solid;
    border-radius: 3px;
    padding: 5px;
    width: 115px;
    height: 25px;
}

.subCatCharge{
    border: 1px gray solid;
    border-radius: 3px;
    padding: 5px;
    width: 107px;
    height: 25px;
}

.subCatQty{
    border: 1px gray solid;
    border-radius: 3px;
    padding: 5px;
    width: 50px;
    height: 25px;
}

.btn_copy{
    
    z-index: 3;
    position: absolute;
    top: -13px;
    left: 303px;
    background-color: transparent;
    color: #269abc;
    border: none;
    width: 30px;
    height: 30px;
    font-size: 25px;
    
}

.toolIcon{
    
   width: 35px;
   height: 35px;
   
   
}

#fieldCat_id, #subCat_id, #uploadImg_id, #duplicate_id{
    
    opacity: .25;
    
}


.toolsPanel{
    
    text-align: center;
    z-index: 10;
    width: 50px;
    height: 230px;
    position: fixed;
    left: 3px;
    bottom: 350px;
    background-color: black;
    border-radius: 3px;
    color: white;
    padding: 5px;
    font-size: 38px;
    
}

/*
@media (max-width:768px){
    .toolsPanel{
      width: 100%;
      height: 50px;
      left: 0px;
      bottom: 0px;
    }
}

*/
@media (max-width:3000px){
    .toolsPanel{
      width: 100%;
      height: 50px;
      left: 0px;
      bottom: 0px;
    }
}


.wysiwyg{
   
    font-size: 16px;
    border: 1px gray solid;
    margin: 0px 3px;
    padding: 3px;
    border-radius: 3px;
    background-color: transparent;
    
}

.btn_small{
    
    font-size: 16px;
    border: transparent;
    background-color: transparent;
    outline: none;
    color: black;
}



.btn_big{
    border: transparent;
    font-size: 35px;
    border: none;
    background-color: transparent;
    outline: none;
    
}

.btn_med{
    border: transparent;
    font-size: 20px;
    border: none;
    background-color: transparent;
    outline: none;
   
}



.btn_autofill{
    border: 1px black solid;
    
    color: white;
    border-radius: 3px;
    background-color: gray;
    padding: 5px;
    margin: 1px;
    
}

.btn_autofill:hover{
    
    font-weight: bold;
    color: black;
    background-color: white;
    
    
}



input[type="file"] {
   background-color: black;
    color: white;
    border: black;
}



.rowColl{
    
    color: black;
}

.heroImg{
    
    width: 100%;
    object-fit: cover;
    max-height: 700px !important;
    
}

.heroImgWarp{
    
    background-color: transparent;
    border: lightgray 1px solid;
    margin: 3px;
    outline: none;
    border-radius: 5px;
    transition: opacity .35s linear 0s;
    z-index: 1;
    
}



.imgBtnWarp{

    background-color: transparent;
    border: lightgray 1px solid;
    margin: 3px;
    outline: none;
    border-radius: 2px;
    transition: opacity .35s linear 0s;
    width: 50px;
    
}

.imgBtnWarp:hover{

    border: red 1px solid !important;
    opacity: 1 !important;

}

.imgBtn{
    
    object-fit: cover;
    width: 100% !important;
    height: 50px !important;
    
}




/* fix
object-fit: cover;
    width: 100% !important;
    height: 500px !important;
*/

.tb_right{
    text-align: right;
    margin: 0px;
    padding: 0px;
}

.tb_left{
    text-align: left;
    margin: 0px;
    padding: 0px;
}

.qtyBox{
    
    border: lightgray 1px solid;
    border-radius: 3px;
    width: 50px;
    height: 25px;
    
}

.btnQty{
    
    border: lightgray 1px solid;
    border-radius: 3px;
    width: 25px;
    height: 25px;
    background-color: transparent;
}

.imgVideoBox{
    
    position: relative;
    
    
}

.vidBtn{
    
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
}

.boxShadow{
    padding: 10px;
    background-color: transparent; 
    box-shadow: 0px 0px 3px lightgray; 
    border-radius: 3px;
    transition: all .25s linear;
}

.boxShadow:hover{
    box-shadow: 0px 0px 5px gray; 
}

.display_none{
    display: none !important;
}


.btn_storeTraffic{
    border: 1px grey solid;
    
    border-radius: 3px;
    background-color: white;
    transition: background-color .25s linear 0s; 
    padding: 3px;
    margin: 3px;
    font-weight: bold;
    overflow: hidden;
    
}

.btn_storeTraffic:hover{
    
    background-color: gray;
    color: white;
    
}

.btn_app{
    color: gray;
    margin: 5px;
    border: 1px gray solid;
    border-radius: 3px;
    background-color: transparent;
    width: 100px;
    height: 90px;
    
}

.btn_app:hover{
    color: black;
}

.checkoutBox{
    
   
   position: relative;
}

#blockCart{
    top: 0px;
    left: 0px;
    opacity: 1;
    z-index: 5;
    position: absolute;
    font-family: 'Teko', sans-serif;
    font-size: 20px;
    text-align: center;
    background-color: black;
    color: white;
    padding: 10px;
    
}

.displayStoreItem{
    
    border-radius: 8px;
    border: 8px gray solid;
    text-align: center;
    font-family: 'teko', sans-serif;
    font-size: 25px;
    padding: 10px;
    width: 230px;
    height: 100px;
    background-color: black;
    color: white;
    box-shadow: 3px 3px 6px black;
    
}

.blackboard{
    
    
    text-align: center;
    font-family: FrederickatheGreat, sans-serif;
    font-size: 29px;
    padding: 10px;
    width: 390px;
    background-color: #f8f8f8;
    color: black;
    
}

.memberTb{
    
    border: 1px gray solid; 
    text-align: center;
    font-size: 20px;
    
}

.chartTitle{
    width: 70px;
    display: inline-block;
}

.vistorList{
    
    height: 230px;
    overflow-x: hidden;
   
}

.pw_box{
    
    position: relative;
    
        
}

.eyeIcon{
    
    position: absolute;
    z-index: 2;
    right: 10px;
    top: 9px;
}