:root {
  --default-color: #1688cf;
  --default-hover-color: #0c77ba;

  --bg-font-color:#FFF;
  --header-color:#FFFFFF;
  --showtable-header:#1688CF;
  --tr0-color:#E4F2FA;
  --tr1-color:#CFE9FA;
  --tr-hover-color:#A5DAFB;

}



.btn-app-default{
  margin-left: 5px;
  height: 30px;
  line-height: 20px;
}

.default-text{
  color: var(--default-color);
}

.default-hr-app{
  border-bottom: 1px solid var(--default-color);
}

a.default-text:hover, button.default-text:hover{
  color: var(--default-hover-color);
}

/*Header and Nav*/
a{
  color: var(--default-color);
}
a:hover{
  color: var(--default-hover-color);
}

.bg-default-app {
    background-color: #e3e3e3!important;
}

.bg-default-primary{
    background-color: var(--default-hover-color);
}

.text-default-app{
  color: var(--default-color) !important;
  font-size: 14px;
}

a.text-default-app:hover{
  color: var(--default-hover-color) !important;
  text-decoration: none;
}


.bg-default-anchor:hover{
  color: #333;
}

.btn-default-app, .btn-primary{
  background-color: var(--default-color) !important;
  color: #fff !important;
  margin-left: 5px;
  border-color: var(--default-color) !important;
}
.btn-default-app:hover, .btn-primary:hover{
  background-color:var(--default-hover-color) !important;
  border-color: var(--default-color);
}

.default-bg{
  background: var(--default-color);
}

.default-bg-hover{
  background: var(--default-hover-color);
}
a.default-bg:hover{
   background: var(--default-hover-color); 
}


.showtable{border:1px solid #999; width:100%; font-size: 12px;   position: relative;}
.showtable td{padding:5px;  border-right:1px solid #999; border-bottom:1px solid #999;}
.showtable th{text-align:center; padding:5px; background-color:var(--showtable-header);color:var(--header-color); border:1px solid #999;}
.showtable td input{width:50px;text-align:right;}
.showtable .cm{text-align:center;}
.showtable .tr{text-align:right;}

.tr1{background-color:var(--tr1-color);}
.tr1:hover{background-color:var(--tr-hover-color);cursor: pointer;}
.tr0{background-color:var(--tr0-color);}
.tr0:hover{background-color:var(--tr-hover-color);cursor: pointer;}

@media print{
    /*
    body{
        display:none;
    }*/
    
    .noprint{
        display:none !important;
    }
}

.show-small-device{
  display: none;
}

@media only screen and (max-width: 766px) {
  .hidden-small-device{
    display: none;
  }
  .show-small-device{
    display: block;
  }
}

.popular-image{
  width: 100%;
  transition: transform 5s;
}

.popular-image:hover{
  -ms-transform: scale(1.02); /* IE 9 */
  -webkit-transform: scale(1.02); /* Safari 3-8 */
  transform: scale(1.02); 
  transform: rotate(3deg);
}

html {
    scroll-behavior: smooth;
}

body{
    margin:0;
    padding:0;
    font-family: 'Poppins', sans-serif;

}

*{
    box-sizing: border-box;
}
.coming-soon{
    font-size: 24px;
    font-weight: bold;
}
.footer{
    height: 50px; 
    background-color: #CBCBCB;
}

/************************************/
/************ Media Break Points  **************/
@media (max-width: 442px) { 
    .product {
        padding-top: 10!important;
    }

    .page {
        /*height: 50vh!important;
        padding-top: 30px!important;*/
    }



    .contactus{
        padding-top: 50px;
        height: 2500px;
    }

    .contactus .row{
        padding-top: 12px;
    }

    .social ul {
        padding: 0;
        margin:0;
        font-size: 24px;
        justify-content: center;
    }

    .social h4{
        text-align: center;
    }
    .contactus .address{
        text-align: center;
    }
    .contactus ..social i{
        color: #fff!important;
    }

    .contactus .implinks{
        text-align: center;
    }

    .contactus .exright {
        padding-top: 18px;
    }

    .contactus .copyright {
        padding-top: 8px!important;
    }

    .news btn{
        padding-bottom: 3px;
    }
    
    .card-cat {
        overflow: hidden;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 100%;
    }
}

@media (min-width: 443px)and (max-width: 575.98px) { 
    .product {
        padding-top: 15!important;
    }

    .page {
        /*height: 70vh!important;
        padding-top: 50px!important;*/
    }



    .contactus{
        padding-top: 50px;
        height: 2500px;
    }
    .contactus .row{
        padding-top: 14px;
    }

    .contactus .exright {
        padding-top: 18px;
    }

    .contactus .copyright {
        padding-top: 8px!important;
    }
    .news btn{
        padding-bottom: 3px!important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) { 
    .product {
        padding-top: 40!important;
    }

    .page {
        /*height: 80vh!important;
        padding-top: 50px!important;*/
    }
    
    .card-cat {
        overflow: hidden;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) { 
    .page {
        /*height: 90vh!important;
        padding-top: 50px!important;*/
    }
    input .add-cart{
        display: flex;
        flex-direction: column;
    }


    .cart{
        display: flex;
        flex-direction: column;
    }
    .cart .add-cart {

        margin-left: 0px!important;
        padding: 0!important;
        width:120px!important;
        height:10%;
    }

    .cart .input {
        margin-left: 0;
        padding: 0!important;
        margin-bottom: 3px;
        width:120px!important;
        height:10%;
    }

    .card .add-cart .sp-cart{
        display: none;
    }
    .card .add-cart i{
        font-size: 28px!important;
    }

    .card-cat {
        overflow: hidden;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) { 
    .page {
        /*height: 90vh!important;
        padding-top: 60px!important;*/
    }

    .cart{
        display: flex;
        flex-direction: column;
    }
    .cart .add-cart {

        margin-left: 0px!important;
        padding: 0!important;
        width:120px!important;
        height:10%;
    }

    .cart .input {
        margin-left: 0;
        padding: 0!important;
        margin-bottom: 3px;
        width:120px!important;
        height:10%;
    }

    .card .add-cart .sp-cart{
        display: none;
    }
    .card .add-cart i{
        font-size: 28px!important;
    }
}

@media (min-width: 1200px) { 
    .page {
        /*height: 100vh!important;
        padding-top: 70px!important;*/
    }
}

/*******Universal Css********/
/*
CSS FOR TAB CONT
*/
  
/*
CSS For Implementation
*/
.news-title a{
    color: #333;
}


.news-title a:hover{
    color: #999;
}
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 

      background:url(../img/menu_icon.png) no-repeat 0 0;
      border:1px solid #cac6c6;
      }
    
    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { 
      text-decoration: none; 
      }
      
    .ui-state-hover a, .ui-state-hover a:hover { 
      text-decoration: none; 
      }
    
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { 
      background:url(../img/menu_icon.png) no-repeat 0 bottom;
      }
      
    .ui-state-active a, .ui-widget-content a  .ui-state-active a, .ui-widget-header a .ui-state-active a { 
      color:#F7A432;
      }
  div.tab-cont div.tab-right{
    width:670px;
    margin:0 0 10px 0;
    padding:10px;
    border:1px solid #dfdfdf;
    }
  
/*



*/
table.tableAboutUs{
  clear:both;
  margin:0 0 10px 0;
  }
  table.tableAboutUs th,td{
    padding:5px;
    margin:0;
    font-size:16px;
    }
  
  
  



/* FOr News.php */
h3.nick-name{
  clear:both;
  margin:0 0 5px 0;
  padding:0;
  font-size:1em;
  }
  
h3.nick-name span{
  font-size:0.85em;
  color:#333333;
  }


h3.news-title{
  clear:both;
  margin:0;
  padding:10px 15px;
  font-size: 18px;
  color:#545454;
  font-weight:normal;
  }
div.news-box{
  margin:0 0 10px 0;
  clear:both;
  border:1px solid #dfdfdf;
  padding:10px;
  margin-bottom:0;
  }
  
ul.active_menu{
  margin:20px auto 0 auto;
  padding:10px;
  width:466px;
  list-style:none;
  }
ul.active_menu:after{
  clear:both;
  content:"";
  height:1px;
  overflow:hidden;
  display:block;
  }
* html ul.active_menu{
  height:1em;
  overflow:visible;
  }
ul.active_menu li{
  float:left;
  margin:0 5px;
  text-align:center;
  font-family:tahoma;
  font-size:12px;
  font-weight:bold;
  padding:5px 10px;
  color:#999999;
  border:1px solid #c4c4c4;
  background-color:#efefef;
  }
  
ul.active_menu li a{
  text-decoration:none;
  display:block;
  outline:none;
  color:#0066CC;
  font-size:12px;
  font-family:tahoma;
  font-weight:bold;
  }
  
ul.active_menu li a:hover{
  color:#FF6600;
  outline:none;
  }

#check_username_availability{
  background: #225384;
  border:1px solid black;
  color:white;
  }

.is_available{
  color:green;
  }
.is_not_available{
  color:red;
  }

table.shop_table td span.coupponDesc{
  color: #CC0000;
  font-weight:bold;
  }
  .news-box ul{
    list-style: none;
    margin:0;
    padding: 0;
  }
  .news-box ul li a{
    color:#F7A432;
  }
  .news-box ul li a:hover{
    color:#956421;
    text-decoration: none;
  }
  .category-title{
    background-color: #0F7D40;
    margin-bottom:0;
    padding:5px 10px;
    color : #fff;
  }

  .product-heading{
    border-bottom: 3px solid #F7A432
  }

  footer{
    padding: 10px 0px 1px;
  }

  footer p{
    color: #fff !important;
  }


/*PRODUCTS*/
.input-cart{
  width: 80px; 
  height : 31px;
  display: inline;
  margin-bottom: -5px;
}

/*GLOBAL CSS*/


/*Header and Nav*/
a{
  color: var(--default-color);
}
a:hover{
  color: var(--default-hover-color);
}

.bg-default-app {
    background-color: #e3e3e3!important;
}

.bg-default-primary{
    background-color: var(--default-hover-color);
}

.text-default-app{
  color: var(--default-color) !important;
}

a.text-default-app:hover{
  color: var(--default-hover-color) !important;
}

.btn-default-app, .btn-primary{
  background-color: var(--default-color) !important;
  color: #fff !important;
  margin-left: 5px;
  border-color: var(--default-color) !important;
}
.btn-default-app:hover, .btn-primary:hover{
  background-color:var(--default-hover-color) !important;
  border-color: var(--default-color);
}

.default-bg{
  background: var(--default-color);
}
a.default-bg:hover{
   background: var(--default-hover-color); 
}

/*
CSS FOR DETAIL
**/
.product-detail-cotainer{
  border:1px solid var(--default-color);
}
.btn-active-product-detail{
  background-color: #333;
  color: #fff;
  border:0;
}
.btn-product-detail{
  background-color: #fff;
  border: 1px solid #333;
}
.btn-detail-add-to-cart{
  color: #fff;
  border:0;
}

.pr-box{
  margin: 15px;
/*  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;*/
  transition: 0.5s ease-in-out;
}
.pr-box:hover{
/*  box-shadow: 0px 0px 6px 15px #ccc;*/
box-shadow: 0px 10px 15px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;

}

.pr-box p{
/*    padding:0px!important;*/
    
}
/*
CSS FOR TAB CONT
*/
  
/*
CSS For Implementation
*/
.news-title a{
  color: #333;
}


.news-title a:hover{
  color: #999;
}
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { 

      background:url(../img/menu_icon.png) no-repeat 0 0;
      border:1px solid #cac6c6;
      }
    
    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { 
      text-decoration: none; 
      }
      
    .ui-state-hover a, .ui-state-hover a:hover { 
      text-decoration: none; 
      }
    
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { 
      background:url(../img/menu_icon.png) no-repeat 0 bottom;
      }
      
    .ui-state-active a, .ui-widget-content a  .ui-state-active a, .ui-widget-header a .ui-state-active a { 
      color:#F7A432;
      }
  div.tab-cont div.tab-right{
    width:670px;
    margin:0 0 10px 0;
    padding:10px;
    border:1px solid #dfdfdf;
    }
  
/*



*/
table.tableAboutUs{
  clear:both;
  margin:0 0 10px 0;
  }
  table.tableAboutUs th,td{
    padding:5px;
    margin:0;
    font-size:16px;
    }
  
  
  



/* FOr News.php */
h3.nick-name{
  clear:both;
  margin:0 0 5px 0;
  padding:0;
  font-size:1em;
  }
  
h3.nick-name span{
  font-size:0.85em;
  color:#333333;
  }


h3.news-title{
  clear:both;
  margin:0;
  padding:10px 15px;
  font-size: 18px;
  color:#545454;
  font-weight:normal;
  }
div.news-box{
  margin:0 0 10px 0;
  clear:both;
  border:1px solid #dfdfdf;
  padding:10px;
  margin-bottom:0;
  }
  
ul.active_menu{
  margin:20px auto 0 auto;
  padding:10px;
  width:466px;
  list-style:none;
  }
ul.active_menu:after{
  clear:both;
  content:"";
  height:1px;
  overflow:hidden;
  display:block;
  }
* html ul.active_menu{
  height:1em;
  overflow:visible;
  }
ul.active_menu li{
  float:left;
  margin:0 5px;
  text-align:center;
  font-family:tahoma;
  font-size:12px;
  font-weight:bold;
  padding:5px 10px;
  color:#999999;
  border:1px solid #c4c4c4;
  background-color:#efefef;
  }
  
ul.active_menu li a{
  text-decoration:none;
  display:block;
  outline:none;
  color:#0066CC;
  font-size:12px;
  font-family:tahoma;
  font-weight:bold;
  }
  
ul.active_menu li a:hover{
  color:#FF6600;
  outline:none;
  }

#check_username_availability{
  background: #225384;
  border:1px solid black;
  color:white;
  }

.is_available{
  color:green;
  }
.is_not_available{
  color:red;
  }

table.shop_table td span.coupponDesc{
  color: #CC0000;
  font-weight:bold;
  }
  .news-box ul{
    list-style: none;
    margin:0;
    padding: 0;
  }
  .news-box ul li a{
    color:#F7A432;
  }
  .news-box ul li a:hover{
    color:#956421;
    text-decoration: none;
  }
  .category-title{
    background-color: #0F7D40;
    margin-bottom:0;
    padding:5px 10px;
    color : #fff;
  }

  .product-heading{
    border-bottom: 3px solid #F7A432
  }

  /*Product Detail*/

ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: var(--default-color) !important;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  /*color: #01447e;*/
  text-decoration: none;
}

/////////
.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}

/* Display list items side by side */
.breadcrumb li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
.breadcrumb li+li:before {
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
.breadcrumb li a {
  color: var(--default-color) !important;
  text-decoration: none;
  font-size: 20px;
  line-height: 25px;
}

/* Add a color on mouse-over */
.breadcrumb li a:hover {
  /*color: #01447e;*/
  text-decoration: none;
}

.input-cart{
  width: 80px; 
  height : 31px;
  display: inline;
  margin-bottom: -5px;
}

.input-cart-detail{
  width: 80px; 
  height : 31px;
  border: 1px solid #ced4da;
  border-radius: .25rem
}
.btn-add-cart-detail{
  background-color: #c2501a;
  color: #fff;
  margin-left: 10px;
}
.btn-add-cart-detail:hover{
  background-color: #a2440b;
}
.btn-add-cart-detail-link{
  background-color:#bdbdbd;
  color: #fff !important;
  margin-top: 10px;
  margin-right: 10px;
}
.btn-add-cart-detail-link:hover{
  background-color: #959595;
  color: #fff;
}

.similar-products{
  color: #c25009;
  text-align: center;
  border-top: 2px solid #c25009;
  border-bottom: 2px solid #c25009;
  margin-top: 30px;
  text-transform: uppercase;
}

/*Cart Detail*/
.cart-detail-heading{
  background-color: var(--default-color);
  font-size: 25px;
  text-align: center;
  color: #fff;
  padding: 15px 0;
}
.cart-detail-info{
  margin-bottom: 10px;
}
.cart-detail-container{
  border: 2px solid var(--default-color);
  padding: 10px;
  
}
.cart-detail-info h2{
  background-color: var(--default-color);
  font-size: 20px;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  color: #fff;
}
.invalid-input{
  border:1px solid red;
}


.valid-input{
  border:1px solid green;
}


/*My Account*/
.info-tab-nav a.active{
  padding-left: 15px; 
  padding-right: 15px; 
  font-weight: normal;
}
.info-tab-nav .nav-item{
  font-weight: normal;
  background-color: transparent;
  color: var(--default-color);
  padding: .5rem 1rem !important;
}

.info-tab-nav .nav-item:hover{
  color :var(--default-hover-color);
}
.tab-pane{
  background-color: #fff;
  border : 1px solid #dee2e6;
}

/*Login Page*/
.login-container{
  margin-top: -30px;
  margin-bottom: 0;
}
.login-form-container{
  background: #e3e3e3;
}
.login-header {
    background-color: var(--default-hover-color);
    color: #fff;
    margin-left: 0px;
    margin-right: 0px;
    padding: 10px 10px;
    text-align: center;
    font-size: 15px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom: 0;
}
.login-form-container div{
  padding: 10px 30px;
}

/*user-nav*/
.user-nav{
  margin-left: -15px;
  background-color: #e3e3e3;
}
.user-info-name{
    margin-top: 15px;
    font-size: 20px;
    color: #b1581e;
}
.user-nav ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin-top: 10px;
  margin-bottom: 0px;
}

.user-nav ul li a{
  display: block;
  background-color: var(--default-color);
  color: #fff; 
  padding: 10px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid #fff;
}

.user-nav ul li a:hover{
  background-color: var(--default-hover-color);
  text-decoration: none;
}