/* Demicpro Template by Sovan Sarkar */
/* Website: Demicpro.com */

body {
font-family: 'Jost', sans-serif;
background: #181818;
margin: 0px;
font-size: 14px;
color: #ffffff;
font-weight: 400;

}

b {
font-weight: 600;
}

* {
outline: none;
font-family: 'Jost', sans-serif;

/*color:#ffffff*/
;
/*font-weight:400;*/
}

.adminbody, .adminbody .page_header {
background: #eeeeee;
}
.adminbody .page_header h1, .adminbody .page_header h2,.adminbody .page_header h3,.adminbody .page_header h4,.adminbody .page_header {font-weight: 600;
line-height: 50px;}
.adminbody {
color: #555;
font-weight:400;
font-size:14px;
}
.adminbody a {
color: #555;
font-weight:400;
font-size:14px;
}
.adminbody a:hover {
color: #009688;
}
.adminbody adminfooter,.adminbody adminfooter a{color:#999;}
.adminbody adminfooter a:hover{color:#009688;}
.adminbody h1 {
color: #555;
font-weight:600;
font-size:30px;
}
.adminbody h2 {
color: #555;
font-weight:600;
font-size:25px;
}
.adminbody h3 {
color: #555;
font-weight:600;
font-size:20px;
}
.adminbody h4 {
color: #555;
font-weight:600;
font-size:16px;
}

.container {
min-height:80vh;
margin-left: 0px;
transition: margin-left 300ms;
}

/* Start Animation */

.overlay {
animation-name: mobileScreenMenu;
animation-duration: 1s;
}

@keyframes mobileScreenMenu {
0% {
transform: translateX(-100%);
}

100% {
transform: translateX(0%);
}
}

/* End Animation */

a {
color: #ffffff;
font-weight: 400;
font-size: 14px;
text-decoration: none;
}

a:hover {
color: #ebebeb;
}


h1 {
font-size: 30px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #fec22b;

}

h2 {
font-size: 25px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #fec22b;

}

h3 {
font-size: 20px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #fec22b;

}

h4 {
font-size: 16px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #fec22b;

}



.clearfix::after {
display: block;
clear: both;
content: "";
}

/* Media queries for mobile screens */

@media only screen and (max-width: 599px) {
.container {
max-width: 100%;
box-sizing: border-box;
}

header {
font-size: 14px;
background-color: #181818;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 600;
}


footer {

background-color: #000000;
color: #ebebeb;
text-align: center;
padding: 20px 10px 20px 10px;
font-size: 14px;
font-weight: 400;
}
}


/* Media queries for tablet screens */

@media only screen and (min-width: 600px) and (max-width: 899px) {
.container {
margin: 0px;
max-width: 100%;
padding: 0px;
box-sizing: border-box;
}

header {
line-height: 40px;
font-size: 14px;
background-color: #181818;
color: #ffffff;
padding: 0px 5% 0px 5%;
font-weight: 600;
}


footer {
background-color: #000000;
color: #ebebeb;
text-align: center;
padding: 20px;
font-size: 14px;
font-weight: 400;
}
}

/* Media queries for desktop screens */

@media only screen and (min-width: 900px) {
.container {
margin: 0px;
max-width: 100%;
padding: 0px;
box-sizing: border-box;
}

header {
line-height: 40px;
font-size: 14px;
background-color: #181818;
color: #ffffff;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5%;
padding-right: 5%;
font-weight: 600;
}


footer {
padding-left: 5%;
padding-right: 5%;
background-color: #000000;
color: #ebebeb;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-size: 14px;
font-weight: 400;
}
}

footer a {

color: #b8b8b8;
font-size: 14px;
font-weight: 400;
}

footer a:hover {
color: #e3e3e3;
}


/* Start Menu Codes */



nav {
display: flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
font-size: 14px;
font-weight: 600;

}

.navmenu li a {
font-size: 14px;
color: #ffffff;
display: inline-block;
position: relative;
font-weight: 600;
/*text-transform: uppercase;*/
}

.navmenu li a:hover {
color: #e8e8e8;
}






@media (min-width: 600px) {
.navmenu {
z-index: 999;
}

.navmenu ul {
display: flex;
list-style: none;
padding: 0;
margin: 0px;
}

.navmenu li {
color: #ffffff;
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
font-weight: 600;
}


.content {
display: none;
}

.open-btn {
display: block;
border: 0px;
}

.close-btn {
display: none;
}
nav {
min-height: 70px;
}
.logo {
height: 120px;
padding-left: 10px;
padding-right: 10px;
}

.shownavoverlay {
display: none;
}

.hidenavoverlay {
display: none;
}

}

@media (max-width: 599px) {
.navmenu {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100vh;
background-color: #2a2a2a;
transition: left 0.3s ease-in-out;
z-index: 999;
}

.navmenu ul {
list-style: none;
padding: 0;
}

.navmenu li {
color: #ffffff;
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 600;
}


.content {
padding: 6px;
}

.open-btn {
display: block;
border: 0px;
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #fff;
text-decoration: none;
cursor: pointer;
}
nav {
height: 40px;
}
.logo {
height: 80px;
}

.shownavoverlay {
top: 0;
z-index: 99;
height: 100vh;
background: #000;
width: 100%;
position: fixed;
opacity: 0.5;
}

.hidenavoverlay {
display: none;
}
}



/*End Front Menu*/

/*Start Admin Menu*/

.container_close_panel {
min-height: 100vh;
margin-left: 0px;
transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
}

.container_open_panel {
min-height: 100vh;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;

}

.adminmenuicon {
width: 20px;
height: 1px;
background-color: black;
margin: 6px 0;

}

.adminmenucursor {
cursor: pointer;
padding: 9px;
}

.adminnavmenuopen {
position: fixed;
width: 250px;
height: 100vh;
top: 0;
left: 0;
background-color: #343a40;
transition: left 0.3s ease-in-out;
z-index: 999;
}

.adminnavmenuclose {
position: absolute;
width: 250px;
height: 100vh;
top: 0;
left: -250px;
background-color: #343a40;
transition: left 0.3s ease-in-out;
z-index: 999;
}



.adminnavmenu ul {
list-style: none;
padding: 0;
}

.adminnavmenu li {
padding-top: 8px;
padding-bottom: 8px;
}

.adminnavmenu li a {
padding-left: 20px;
padding-right: 20px;
display: inline-block;
position: relative;
font-weight: 400;
text-decoration: none;
color: #c2c7d0;
}

.adminnavmenu li:hover {
background: #0000001c;
}


@media only screen and (min-width: 600px) {
adminnav {
display: flex;
justify-content: space-between;
background: #fff;
padding: 5px 20px 5px 20px;
box-shadow: 1px 1px 5px #ccc;
}

.adminlogo {}

adminfooter {
display: block;
color: #959595;
text-align: center;
padding: 20px;

}

adminfooter a {

color: #959595;


}

adminfooter a:hover {
color: #000;

}

}

@media only screen and (max-width: 599px) {
adminnav {
display: flex;
justify-content: space-between;
background: #fff;
padding: 5px 10px 5px 10px;
box-shadow: 1px 1px 5px #ccc;


}

.container_open_panel {

margin-right: -250px;

}

.adminlogo {}

adminfooter {
display: block;
color: #959595;
text-align: center;
padding: 10px;

}

adminfooter a {
color: #959595;
}

adminfooter a:hover {
color: #000;
}
}



/*End Admin Menu*/



@media only screen and (min-width: 600px) {

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
padding-top: 0px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}

.col-1 {
width: 8.33%;
float: left;
}

.col-2 {
width: 16.66%;
float: left;
}

.col-3 {
width: 25%;
float: left;
}

.col-4 {
width: 33.33%;
float: left;
}

.col-5 {
width: 41.66%;
float: left;
}

.col-6 {
width: 50%;
float: left;
}

.col-7 {
width: 58.33%;
float: left;
}

.col-8 {
width: 66.66%;
float: left;
}

.col-9 {
width: 75%;
float: left;
}

.col-10 {
width: 83.33%;
float: left;
}

.col-11 {
width: 91.66%;
float: left;
}

.col-12 {
width: 100%;
float: left;
}

.row {
padding-top: 0px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
margin: 0px;
position: relative;


}

.row::after {
content: "";
clear: both;
display: table;
}

.box {
background: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;



}
}

@media only screen and (max-width: 599px) {

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}

.row {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
position: relative;
height: auto !important;


}

.row::after {
content: "";
clear: both;
display: table;
}

.box {
background: #ffffff;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;



}

}

input[type="color"] {
display: block;
width: 100%;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
border: solid 1px #181818;
border-radius: 0px;
cursor: pointer;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
select {
width: 100%;
height: 40px;
padding: 10px;
background: #ffffff;
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
}

textarea {
width: 100%;
height: 100px;
padding: 10px;
background: #ffffff;
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
}


input[type="submit"] {
color: #fff;
display: inline;
border: 0px;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
background: #585858;
border-radius: 0px;
}

input[type="submit"]:hover {
color: #fff;
opacity: 0.9;
transition: opacity 300ms;
}

.btn {

color: #6c6a6a;
display: inline;
border: 1px solid #d3d3d3;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
background: #fff;
border-radius: 0px;


}

button {
color: #6c6a6a;
display: inline;
border: 1px solid #d3d3d3;
cursor: pointer;
margin-top: 5px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
background: #fff;
border-radius: 3px;
}


.success-btn {
background: #fec22b !important;
color: #000 !important;
border: 0px !important;
font-weight:400;
}

.danger-btn {
background: #e91e63 !important;
color: #fff !important;
border: 0px !important;
font-weight:600;
}

.normal-btn {
color: #6c6a6a;
display: inline;
border: 1px solid #d3d3d3;
margin-top: 5px !important;
margin-bottom: 5px !important;
margin-left: 1px !important;
margin-right: 1px !important;
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
background: #fff;
border-radius: 0px !important;
font-weight:600;
}

a.normal-btn {
color: #000;
display: inline;
border: 1px solid #dbdbdb;
margin-top: 5px !important;
margin-bottom: 5px !important;
margin-left: 1px !important;
margin-right: 1px !important;
padding-left: 10px !important;
padding-right: 10px !important;
/*padding-top:0px !important;*/
/*padding-bottom:0px !important;*/
background: #eee;
line-height: 28px;
border-radius: 5px !important;
font-weight:600;
}

@media only screen and (min-width: 600px) {

input[type="text"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {

border: solid 1px #181818;
border-radius: 2px;

}

}

@media only screen and (max-width: 599px) {

input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="number"],
select,
textarea {

border-bottom: solid 1px #181818;
border-top: solid 0px #181818;
border-left: solid 0px #181818;
border-right: solid 0px #181818;

}

}

.notification-success {

background: #4caf50;
color: #fff;
padding: 20px;
border: solid 0px #181818;
display: block;
position: fixed;
top: 0;
right: 0;
/*box-shadow: 1px 1px 15px #4e4e4e;*/
border-radius: 15px;
margin: 10px;
font-weight: 500;

}
.notification-addedToCart{
background: #4caf50f5;
z-index:9999;
color: #fff;
padding: 10px 20px;
font-weight:400;
border: solid 0px #181818;
display: block;
position: fixed;
bottom: 0;
right: 0;
/*box-shadow: 1px 1px 15px #4e4e4e;*/
border-radius: 15px;
margin: 10px;
font-weight: 500;
}

.notification-danger {

background: #e91e63;
color: #fff;
padding: 20px;
border: solid 0px #181818;
display: block;
position: fixed;
top: 0;
right: 0;
/*box-shadow: 1px 1px 15px #4e4e4e;*/
border-radius: 15px;
margin: 10px;
font-weight: 500;

}

.notification-danger,
.notification-success,
.notification-addedToCart {

animation: hide_notification 7s forwards;
}

@keyframes hide_notification {
0% {
opacity: 1;
z-index: 9999;
transition: opacity;
}

50% {
opacity: .9;
z-index: 9999;
transition: opacity;
}

99% {
opacity: 0;
z-index: 9999;
transition: opacity;
}

100% {
opacity: 0;
z-index: -1;
transition: opacity;
}
}

label {
display: block;
font-weight: 400;
padding: 10px 0px 0px 0px;
text-transform: capitalize;
}

thead {
background: linear-gradient(45deg, #eeeeee, transparent);
color: #000;
font-weight: 400;
}

.td {
background: #009688;
color: #fff;
font-weight: 600;

}

.bordertable .td {
border: 0px;
}
.adminbody .bordertable td {
border-bottom: 1px solid #eee;
}
.adminbody .allbordertable td,.adminbody .allbordertable th {
border: 1px solid #eee;
}

.bordertable td {
border-bottom: 1px solid #181818;
}
.allbordertable td,.allbordertable th {
border: 1px solid #181818;
}
.allbordertable td{
background: #00000012;}
.allbordertable th{
background: #00000021;}



table,
tr,
td,
th {
text-transform: ;
border: 0px solid #181818;
padding: 5px;
background: #ffffff0a;

}

table table tr td {
padding: 1px;
}

table tr td span {
font-weight: 600;
z-index: auto;
position: relative;
z-index: auto;
text-transform: ;
}

table {
border-collapse: collapse;

}

.page_header {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
border-bottom: solid 0px #ddd;

}

.page_header h1,
.page_header h2,
.page_header h3,
.page_header h4 {
font-weight: 400;
line-height: 50px;
}

.adminnavmenu ul ul {
margin-top: 5px;
visibility: hidden;
overflow: hidden;
max-height: 0;
transition: max-height .5s ease, visibility .5s ease, overflow .5s ease;
}

.adminnavmenu ul ul a {
color: #94989f;
}

.adminnavmenu .active ul {

margin-top: 5px;
visibility: visible;
max-height: 1000px;
overflow: hidden;
transition: max-height .5s ease, visibility .5s ease, overflow .5s ease;
}

.adminnavmenu .active {
background: #0000001c;
}

.adminnavmenu .active ul a {
color: #94989f;

}

.adminnavmenu ul ul li {
padding-left: 20px;
border-left: solid 1px #fff;
}

.adminnavmenu .active ul li a:hover {
color: #fff;

}

.adminnavmenu li a {
display: block;

}

.adminnavmenu .right {
float: right;
color: #c2c7d0;
transform: rotate(0deg);
transition: transform 0.5s ease;
padding: 5px;
}

.adminnavmenu .left {
float: left;

}

.adminnavmenu .active .right {
transform: rotate(-90deg);
transition: transform 0.5s ease;
}


@media(min-width:600px) {

nav ul li .active {
min-width: 200px;
display: flex;
flex-direction: column;
/*margin-top: 5px;*/
position: absolute;
background: #3e3e3e;
cursor: pointer;
visibility: hidden;
overflow: hidden;
max-height: 0;
/*transition: max-height 3s, visibility 3s, overflow 3s;*/
}

nav ul li ul li:hover {
background: transparent;
}

nav ul li:hover .active {
/*margin-top: 5px;*/
border-left: solid 0px #3f464c;
visibility: visible;
max-height: 1000px;
overflow: hidden;
/*transition: max-height 3s, visibility 3s, overflow 3s;*/
}


}
@media(max-width:599px) {
.emailLetter {
display: none !important;
}

nav ul li .active {
width: 100% !important;

display: block;
position: relative !important;
box-shadow: 0px 0px 0px #ccc !important;
border-left: solid 1px #d3d3d3 !important;

}

nav ul li .right {
float: right;
color: #c2c7d0;

padding: 5px;
}


}

@media(min-width:600px) {
nav ul li .right {
display: none;
}
}



@media(max-width:599px) {
.adminbody .row {
padding: 10px;
margin: auto;


}

.adminbody .row::after {
content: "";
clear: both;
display: table;

}

.adminbody .box {
background: #fff;
padding: 10px !important;
margin: 0px;
border-radius:15px;
/*box-shadow: 1px 5px 10px #ccc;*/

}

.adminbody .col-1,
.adminbody .col-2,
.adminbody .col-3,
.adminbody .col-4,
.adminbody .col-5,
.adminbody .col-6,
.adminbody .col-7,
.adminbody .col-8,
.adminbody .col-9,
.adminbody .col-10,
.adminbody .col-11,
.adminbody .col-12 {
padding: 0px;
width: 100%;
box-sizing: border-box;
}
}

@media(min-width:600px) {
.adminbody .row {
padding: 0px 20px 20px 20px;
/*margin: 0px 10px 20px 10px;*/
margin: auto;

}

.adminbody .row::after {
content: "";
clear: both;
display: table;

}

.adminbody .box {
padding: 20px !important;
margin: 5px 15px 15px 15px;
border-radius:15px;
/*box-shadow: 1px 5px 10px #ccc;*/

}

.adminbody .col-1,
.adminbody .col-2,
.adminbody .col-3,
.adminbody .col-4,
.adminbody .col-5,
.adminbody .col-6,
.adminbody .col-7,
.adminbody .col-8,
.adminbody .col-9,
.adminbody .col-10,
.adminbody .col-11,
.adminbody .col-12 {
padding: 10px;
box-sizing: border-box;
}

.adminbody .col-1 {
width: 8.33%;
float: left;
}

.adminbody .col-2 {
width: 16.66%;
float: left;
}

.adminbody .col-3 {
width: 25%;
float: left;
}

.adminbody .col-4 {
width: 33.33%;
float: left;
}

.adminbody .col-5 {
width: 41.66%;
float: left;
}

.adminbody .col-6 {
width: 50%;
float: left;
}

.adminbody .col-7 {
width: 58.33%;
float: left;
}

.adminbody .col-8 {
width: 66.66%;
float: left;
}

.adminbody .col-9 {
width: 75%;
float: left;
}

.adminbody .col-10 {
width: 83.33%;
float: left;
}

.adminbody .col-11 {
width: 91.66%;
float: left;
}

.adminbody .col-12 {
width: 100%;
float: left;
}
}

.menu-icon {
padding-right: 10px;
width: 20px;
}

.pagination {
text-transform: capitalize;
display: flex;
flex-direction: row;
padding: 0px;
margin: 0px;
justify-content: center;
}

.pagination li:first-child {
border: 0px;
padding: 5px 10px 5px 10px;
background: #0000;
}

.pagination ul {
padding: 0px;
margin: 0px;
}

.pagination li {
list-style: none;
cursor: pointer;
}

.pagination li a {
display: block;
padding: 5px 10px 5px 10px;
}

.pagination li {
border: solid 1px #ffffff1c;
margin: 1px;
background: #0000;
}

.pagination .active {
background: #ffffff1c;
border: 0px;
}

.pagination .active a {
color: #fff;
}

.modal {
padding-top: 30px;
padding-bottom: 30px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
min-height: 100vh;
width: 100%;
background: #000000a1;
}


@media(min-width:600px) {

.modal .small {
width: 50%;
margin: auto;
padding: 0px;
background: #fff;
overflow-y: scroll;
height: 99vh;
}

.modal .large {
width: 80%;
margin: auto;
padding: 0px;
background: #fff;
overflow-y: scroll;
height: 99vh;
}

.modal .actionButton {
color: #fff;
top: 0;
position: absolute;
font-size: 20px;
font-weight: 600;
cursor: pointer;

}

.modal .actionButton:hover {
color: #ccc;


}

}

@media(max-width:599px) {

.modal .small {
width: 100%;
margin: auto;
padding: 0px;
background: #fff;
overflow-y: scroll;
height: 99vh;
}

.modal .large {
width: 100%;
margin: auto;
padding: 0px;
background: #fff;
overflow-y: scroll;
height: 99vh;
}

.modal .actionButton {
color: #fff;
top: 0;
position: absolute;
font-size: 20px;
font-weight: 600;
cursor: pointer;

}

.modal .actionButton:hover {
color: #ccc;


}

}

.blog {
background: #fff;
padding: 5px;
box-sizing: border-box;
aspect-ratio: 3/2;

}



.blog img {
object-fit: cover;
height: 100%;
width: 100%;
}

.blog .blog-head {
font-weight: 600;
font-size: 25px;
}

.blog .blog-text {
height: 50px;
font-weight: 400;
}

@media(max-width:599px) {
.displayFlex {
display: flex;
flex-direction: column;
}
}

@media(min-width:600px) {
.displayFlex {
display: flex;
flex-direction: row;
}
}

.loading-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
}

.loading-screen img {
animation: pageLoading 5s linear infinite;
width: 50px;
height: auto;
}

@keyframes pageLoading {
0% {
transform: rotate(0deg);
}

25% {
transform: rotate(90deg);
}

50% {
transform: rotate(180deg);
}

75% {
transform: rotate(270deg);
}

100% {
transform: rotate(360deg);
}
}

.setheight {
padding: 2px;
object-fit: contain;
max-height: 100%;
max-width: 100%;
}

.deleteui {
z-index: 999;
position: absolute;
margin-left: 9px;
color: #ffffff;
margin-top: 10px;
background: #00000070;
padding: 6px;
}

.deleteui:hover {
z-index: 999;
position: absolute;
margin-left: 9px;
color: #ffffff;
margin-top: 10px;
background: #ff020270;
padding: 6px;
}

@media only screen and (max-width: 500px) {
.gimage {
width: 50%;
float: left;
aspect-ratio: 3/2;
position: relative;
width: 50%;
}
}

@media only screen and (max-width: 950px) and (min-width: 500px) {
.gimage {
width: 25%;
float: left;
aspect-ratio: 3/2;
position: relative;
}
}

@media only screen and (min-width: 950px) {
.gimage {
width: 10%;
float: left;
aspect-ratio: 3/2;
position: relative;
}
}

.setheight {
height: 100%;
width: 100%;
padding: 5px;
border: solid 1px #ddd;
box-sizing: border-box;
background: #fff;
}

.setheight:hover {
box-shadow: #bbb 1px 1px 15px;
border: solid 1px #ccc;
}

.gimage {
padding: 5px;
box-sizing: border-box;
}

.gimage .showDetails {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
background: #000000ad;
color: #fff;
width: 100%;
box-sizing: border-box;
display: none;
}

.gimage:hover .showDetails {
display: block;
}
::-webkit-scrollbar {
width: 5px;
height:5px;
}
@media only screen and (min-width: 580px) {
.mobileNone{}
.desktopNone{display:none !important;}
}
@media only screen and (max-width: 580px) {
.mobileNone{display:none !important;}
.desktopNone{}
}
/* Track */
::-webkit-scrollbar-track {
/*box-shadow: inset 0 0 5px grey; */
border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #E0BD0B;
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #F0CA0C;
}
@media only screen and (min-width: 1200px) {
.product-container{float:left;width:20%;}
}
@media only screen and (min-width: 990px) and (max-width: 1200px) {
.product-container{float:left;width:25%;}
}
@media only screen and (min-width: 580px) and (max-width: 990px) {
.product-container{float:left;width:33.33%;}
}
@media only screen and (max-width: 580px) {
.product-container{float:left;width:50%;}
}


.product-item {
position: relative;
margin: 0px;
border: solid 0px #fff;
background: #9b9b9b24;
margin: 4px;
cursor: pointer;
}

.product-item img {
aspect-ratio: 4/4;
object-fit: cover;
}

.product-title {
font-weight: 600;
height: 35px;
padding: 5px 10px 5px 10px;
text-align:center;
overflow: hidden;
}

.product-details {
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px 0 10px;
}

.product-details button {
border: solid 1px #555;
border-radius: 0px;
height: 40px;
color: #555;

}


#showTopCart::after{
content:attr(data-count);
position:absolute;
background: #009688;
color: #fff;
border-radius: 50%;
font-size: 10px;
top: -2px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
height: 15px;
width: 15px;
right: -10px;
}
.decrease {
font-weight: 400;
border: #ddd 1px solid !important;
color:#000 !important;
background:#ddd !important;
margin-left:0px !important;
margin-right:0px !important;
border-radius:0px !important;
}

.increase {
font-weight: 400;
border: #ddd 0px solid !important;
color:#000 !important;
background:#ddd !important;
margin-left:0px !important;
margin-right:0px !important;
border-radius:0px !important;

}

.quantity-input {
border: #ddd 1px solid !important;
height: 40px !important;
background:#fff !important;
}
.product-item button{
background: #fec22b;
display: block;
width: 100%;
border:#fec22b solid 0px;
color:#000;
text-transform:uppercase;
height: 40px;
font-weight: 500;

}
#passwordShowHide{cursor:pointer;}
.adminbody .pagination .active{background:#eee;color:#ccc;}
.adminbody .pagination .active a{color:#000;}

@media only screen and (min-width: 1380px) {
.row {
padding-top: 0px;
padding-bottom: 10px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
position: relative;
width:1380px;
}
header {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0%;
padding-right: 0%;
margin: auto;
position: relative;
width:1380px;
}
}

/*Custom CSS Starts*/