* {
  box-sizing: border-box;
}


body {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  margin: 0;
 /* background-color: #FDFDFD;*/
  /*background-color: rgb(255,255,248);*/
 /* background-color: rgb(255,254,253);*/
 background-color: rgb(251,250,240);
}

hr {
   height: 1px;
   background-color: rgb(211,211,211);
   border: none;
      }


.header {
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-column-gap: 10px;
  border-radius: 8px;
  margin: 0px 50px 5px 50px;
}

.column {
  font-family: 'Output Sans', -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  justify-content: center;
  display: flex;
  height:120px;
  position: relative;
}


.navbar {
  
  width:auto;
  display: flex; justify-content:center;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 5px 0px;
  margin: 0px 50px 0px 50px;
  background: rgb(49,55,69);
}

.top_navbar {
  height:30px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  padding: 5px 0px;
  margin: 0px 0px;
  background: white;
}


.row_flex_container{
 flex: 20%;
 display: flex;
 flex-direction: row;
 height: 35px;
}


/* Column container */
.row {  
 display: flex;
 gap: 20px;
 justify-content:center;
 margin: 20px 50px 20px 50px;
}


.side {
  width: 30%;
  background-color: rgb(252,252,255);
  
  border-radius: 8px;
}
.side_r {
  width: 20%;
  /*background-color: rgb(252,252,255);
  padding: 10px;*/
  padding: 0px 20px;
  border-radius: 8px;
}
.side_r .grid_elem {
max-width: 100%;
background-color: rgb(250,250,200);
}

.side ul {
 margin: 0;
 padding: 0;

}

.side li {
 margin-bottom: 8px;

}


.main {
  width: 70%;
  position: relative;
  padding: 0px 10px;
  margin: 0px 0px 0px 0px;
  border-radius: 8px;
  background: rgb(255,255,255);
}

.panel_w_r {
 
  position: relative;
  background-color: white;
  padding: 20px;
  margin: 0px 0px 0px 0px;
  border-radius: 8px;
}
.fakeimg_container {
position:relative;
width:100%;
display: flex;
flex-direction:column;
  min-height:240px;
  max-height:360px;
  padding:10px;
}
.fakeimg {
  position:relative;
  display: flex;
  background-color: rgb(255,255,255);
  width: 100%; 
  max-height: 280px;
  padding: 4px;
  margin: 0px 0px;
}
.lb_compair {
  display:flex;height:20%;min-height:50px;align-items:center;
}
.fakeimg img { 
  object-fit: cover;
  aspect-ratio:1/1;
  background:white;
  width:auto;
  height:auto;
  padding:4px;
  
}
.e_selector {
color: rgb(88,88,88);
}
.grid_elem{
 position:relative;
  display: flex; 
  flex-direction:column;
  justify-content: space-between;
  background-color: rgb(250,250,200);
  min-width: 180px;
  max-width: 30%;
  min-height:220px;
  padding: 10px;
  margin: 10px 10px;
}
.grid_elem:hover { cursor: pointer; }
.grid_elem img{
 max-width: 100%;
  background:green;
}

.grid_a_con a {
text-decoration: none; 
}
.grid_elem a {
 text-decoration: none; 
}
.grid_elem a:hover{
 text-decoration: underline; 
}

.btn_group1  {
margin: 25px 0px;
min-width: 20%;
}
.def_blue_btn {
padding: 6px;
border: solid rgb(144,144,255);
border-radius: 10px;
text-decoration: none;
color: white;
background: rgb(144,144,255);
}

.sq_blue_btn {
padding: 6px;
border: solid rgb(144,144,255);
border-radius: 4px;
text-decoration: none;
color: white;
background: rgb(144,144,255);
}
.sq_green_btn {
padding: 6px;
border: solid 1px rgb(144,255,144);
border-radius: 4px;
text-decoration: none;
color: white;
background: rgb(84,235,84);
}
.d1Btn {
padding: 6px;
text-align:center;
border: solid rgb(144,144,255);
border-radius: 10px 0px 0px 10px;
color: white;
background: rgb(144,144,255);
}
.i1Btn {
padding: 6px;
text-align:center;
border: solid rgb(240,240,240);
border-radius: 0px 10px 10px 0px;
text-decoration: none;
color: rgb(130,130,130);
background:#FEFEFE;
}

.fakeimg .a_right {
position: absolute;
right: 10px;
}
.fakeimg .a_left {
/*position: absolute;*/
left: 10px;
}
.marginl180 {
margin-left: 180px;
}

input:focus {
   outline: 0;
}

img {
/*max-width:100%;*/
}

ul {
    list-style-type: none;
}
i {
/*color:rgb(166,166,166);*/
}
.icon_negal{
color: transparent !important;
border: 5px solid #000000;
}
.menu_ico {
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
min-width:80px;
gap: 8px;
padding:6px;
border-radius: 6px;
color: rgb(255,255,255);

}
.menu_ico>i {font-size:22px;  }
.menu_ico:hover { cursor: pointer; background:rgb(84,91,118); }
.mini_ico {
display: flex;
align-items: center;
justify-content: center;
min-width:80px;
height:40px;
padding:6px;
border-radius: 6px;
color: rgb(255,255,255);
background: rgb(150,150,255);
}
.nodecow {
text-decoration: none;
color: rgb(255,255,255);
}
.nodecob {
text-decoration: none;
color: rgb(46,46,46);
}
.thumbnail {
position:relative;

}
ul.checkmark-list {
            list-style-type: none; /* Remove default bullets */
            padding: 0;
        }
        ul.checkmark-list li {
            position: relative;
            padding-left: 25px; /* Space for the check mark */
            margin-bottom: 10px;
			font-weight:bold;
        }
        ul.checkmark-list li::before {
            content: '\2713'; /* Unicode for check mark */
            position: absolute;
            left: 0;
            color: green; /* Color of the check mark */
        }

.rotate-text-90{
transform-origin: right;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);   
    
}

a.zoom_tool {position: absolute;top: 50%;display:none;padding:6px;text-decoration: none;color: rgb(46,46,46);background-color: #dedede;} 
@-webkit-keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNoneIE {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
.thumbnail:hover a.zoom_tool {display: block;animation-duration: 0.5s;
    animation-name: fadeInFromNone;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-duration: 0.5s;
    -ms-animation-name: fadeInFromNoneIE;
    -ms-animation-fill-mode: forwards;}
div.clickable:hover { cursor: pointer; }
button.clickable:hover { cursor: pointer; }	
a.clickable:hover { cursor: pointer; }
i.clickable:hover { cursor: pointer; }
span.clickable:hover { cursor: pointer; }
input.clickable:hover { cursor: pointer; }
.bold_string{
font-weight: bold;
}
.clearBoth{
clear:both;
}
.badge {
  /*padding-left: 9px;
  padding-right: 9px;*/
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.label-warning[href],
.badge-warning[href] {
  /*background-color: #c67605;*/
}
#scale_icon {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px; 
}
#warning_cart_icon {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px; 
}

.span_1{
width: 80px;
}
.span_2 {
width: 140px;
}
.span_4{
width: 300px;
}
.span_6 {
width: 460px;
}
.span_8{
width: 600px;
}
.span_10{
width: 900px;
}
.pull_right{
float: right;
}
.row_flex{
display: flex;
flex-direction: row;
gap: 50px;
}
.column_flex{
display: flex;
flex-direction: column;
gap: 50px;
}

.promo_list li{
padding: 10px;
margin: 10px 0px; 
background: #FAFAFA;
}
.footer {

position: relative;display:flex;justify-content:center;
width:100%;
height: 340px;
bottom: 0px;
  padding: 40px;
  margin: 0px 0px 0px 0px;
 /* text-align: center;*/
  color: rgb(222,222,222);
  background: rgb(33,49,68);
  gap: 50px;
}
.footer .row_gap {
display:flex;
flex-direction:column;
row-gap: 10px;
}
.footer a {

text-decoration: none;
 color: rgb(222,222,222);
}
.copyright {
position:absolute;
display:flex;justify-content:center;
bottom:40px;

 
  width: auto;
padding: 15px;
border-radius: 8px;
color: white;
background: rgb(66,66,66);

}
.copyright div {
text-align: center;
}
.gotop {opacity: 0.8;display: block;position: fixed;bottom: 60px;right: 30px;padding: 0px 10px 5px;}
.gotop:hover {-moz-opacity: 1;-webkit-opacity: 1;opacity: 1;}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {
.navbar {background:none;margin: 20px 10px 20px 10px;}
.grid_elem {max-width: 100%;}
.side, .main {width: 100%;}
.row  {flex-direction: column-reverse;margin: 20px 10px 20px 10px;} 
.navbar {flex-direction: column;}
}