/* Demicpro Template by Sovan Sarkar */
/* Website: Demicpro.com */

body {
font-family: Calibri, "Helvetica Neue", Arial, sans-serif;
background: #ffffff;
margin: 0px;
font-size: 15px;
color: #474747;
font-weight: 400;

}

b {
font-weight: 600;
}

* {
outline: none;
font-family: Calibri, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
/*color:#474747*/
;
/*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 {font-weight: 600;
}
.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: #009688;

}

h2 {
font-size: 25px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #009688;

}

h3 {
font-size: 20px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #009688;

}

h4 {
font-size: 16px;
padding: 0px;
margin: 0px;
font-weight: 600;
color: #009688;

}



.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: #ffffff;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-weight: 600;
}


footer {

background-color: #252530;
color: #9b9b9b;
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;
}
.row {
padding-top: 0px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
margin: 0px;
position: relative;


}

.row::after {
content: "";
clear: both;
display: table;
}

header {
line-height: 40px;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding: 0px 5% 0px 5%;
font-weight: 600;
}


footer {
background-color: #252530;
color: #9b9b9b;
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;
}
.logo {
height: 70px !important;
padding-left: 10px;
padding-right: 10px;
}

nav{
    height: 80px !important;
}


.row {
padding-top: 0px;
padding-bottom: 10px;
padding-left: 10%;
padding-right: 10%;
margin: 0px;
position: relative;


}
.row::after {
content: "";
clear: both;
display: table;
}
header {
line-height: 40px;
font-size: 14px;
background-color: #ffffff;
color: #ffffff;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10%;
padding-right: 10%;
font-weight: 600;
}


footer {
padding-left:10%;
padding-right: 10%;
background-color: #252530;
color: #9b9b9b;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
font-size: 14px;
font-weight: 400;
}
}

footer a {

color: #9b9b9b;
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: 16px;
color: #144668;
display: inline-block;
position: relative;
font-weight: 400;
}

.navmenu li a:hover {
color: #000;
}

.navmenu li a:after {
content: '';
width: 0px;
height: 2px;
position: absolute;
top: 100%;
left: 0;
background: #e8e8e8;
transition: 300ms;
}

.navmenu li a:hover:after {
width: 100%;
}

.navmenu li a:not(:hover):after {
right: 0;
left: auto;
}




@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 {
height: 50px;
}
.logo {
height: 50px;
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: #fff;
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;
color:#000;
}

.open-btn {
display: block;
border: 0px;
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #333;
text-decoration: none;
cursor: pointer;
}
nav {
height: 40px;
}
.logo {
height: 40px;
}

.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: #fff;
margin: 6px 0;

}

.adminmenucursor {
cursor: pointer;
padding: 9px;
}

.adminnavmenuopen {
position: fixed;
width: 250px;
height: 100vh;
top: 0;
left: 0;
background-color: #e8e8e8;
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: 10px;
padding-bottom: 10px;
background: linear-gradient(38deg, #1d6d9633, #fff);

border-bottom: solid 2px #1d6d9633;
}

.adminnavmenu li a {
padding-left: 20px;
padding-right: 20px;
display: inline-block;
position: relative;
font-weight: 400;
text-decoration: none;
color: #000;
}
.adminnavmenu li a:hover {color:#000;}

.adminnavmenu li:hover {
background: #fff;
}


@media only screen and (min-width: 600px) {
adminnav {
display: flex;
justify-content: space-between;
background: #1d6d95;
padding: 5px 20px 5px 20px;

}

.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: #1d6d95;
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: 10px;
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;
}


.box {
backdrop-filter: blur(10px);
/* background: #ffffff; */
background: #ffffffcc !important;
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: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
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 {
backdrop-filter: blur(10px);
/* background: #ffffff; */
background: #ffffffcc !important;
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 #dddddd;
border-radius: 4px;
cursor: pointer;
}

input[type="text"],input[type="time"],input[type="search"],input[type="datetime-local"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
select,textarea {
width: 100%;
height: 40px;
padding: 10px;
background: #eff5f8;
display: block;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
box-sizing: border-box;
border-color: rgb(180, 207, 220) !important;
}

input[type="text"]:disabled,input[type="time"]:disabled,input[type="search"]:disabled,input[type="datetime-local"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="date"]:disabled,
select:disabled,textarea:disabled {background:#fffbe9;color: #000;
border-color: #ccc !important;}

input[type="text"]:focus,input[type="time"]:focus,input[type="search"]:focus,input[type="datetime-local"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus,textarea:focus {background:#fff;}
select{text-transform: capitalize;}

textarea {
width: 100%;
height: 100px;
/*
padding: 10px;
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: 4px;
}

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: 4px;


}

button {

padding: 10px;
border-radius: 4px;
background: #1e6d96 !important;
border: solid 0px #ccc !important;
color: #fff !important;
cursor:pointer;
margin-left: 2px;
margin-right: 2px;

}


.success-btn {
background: #1d6d95 !important;
color: #fff !important;
border: 0px !important;
font-weight:400;
}

.danger-btn {
background: #ddd !important;
color: #000 !important;
border: 0px !important;
font-weight:400;
}

.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: 4px !important;
font-weight:600;
}

a.normal-btn {
color: #000;
display: inline;
border: 1px solid #000;
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: #fff;
line-height: 28px;
border-radius: 4px !important;
font-weight:600;
}

@media only screen and (min-width: 600px) {

input[type="text"],input[type="time"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="email"],input[type="search"],input[type="datetime-local"],
select,
textarea {

border: solid 1px #dddddd;
border-radius: 4px;

}

}

@media only screen and (max-width: 599px) {

input[type="text"],input[type="time"],input[type="search"],input[type="datetime-local"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="number"],
select,
textarea {

border-bottom: solid 1px #dddddd;
border-top: solid 0px #dddddd;
border-left: solid 0px #dddddd;
border-right: solid 0px #dddddd;

}

}

.notification-success {

background: #4caf50;
color: #fff;
padding: 20px;
border: solid 0px #dddddd;
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: 20px;
font-weight:400;
border: solid 0px #dddddd;
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 #dddddd;
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 ;
text-transform: capitalize;
color:#000;
}

thead {
background: #93dce56b;
color: #005e66;
font-weight: 600;
}

.td {
background: #009688;
color: #fff;
font-weight: 600;

}

.bordertable .td {
border: 0px;
}

.bordertable td {
border-bottom: 1px solid #dddddd;
}
.allbordertable td {
border: 1px solid #dddddd;
}
.allbordertable td{
background: #fff;}
.allbordertable th,.bordertable th{
background: #e8e8e8 !important;
color: #000;
font-weight: 400;
padding:5px;
text-align:left;}



table,
tr,
td,
th {
text-transform: ;
border: 0px solid #dddddd;
padding: 5px 10px;
background: #ffffff0a;

}

table table tr td {
padding: 5px;
}

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: 0px;
padding-bottom: 0px;
padding-left: 20px;
padding-right: 20px;
/* background: #eee; */
border-bottom: solid 1px #ddd;

}

.page_header h1,
.page_header h2,
.page_header h3,
.page_header h4 {
font-weight: 400;
line-height: 50px;
color:#1d4165 !important;
}

.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: #fff;
}

.adminnavmenu .active ul a {
color: #5a5a5a;

}

.adminnavmenu ul ul li {
padding-left: 20px;
border-left: solid 1px #fff;
border-bottom: solid 1px #ddd;
background:#fff;
}

.adminnavmenu .active ul li a:hover {
color: #000;

}

.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;
}

nav ul li .active {
min-width: 200px;
display: flex;
flex-direction: column;
margin-top: 5px;
position: absolute;
background: #ffffffe3;
cursor: pointer;
box-shadow: 1px 1px 5px #686868;
visibility: hidden;
overflow: hidden;
max-height: 0;
transition: max-height 3s, visibility 3s, overflow 3s;
}

nav ul li ul li:hover {
background: #e1e1e1;
}

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;
transform: rotate(0deg);
transition: transform 0.5s ease;
padding: 5px;
}

nav ul li:hover .right {
transform: rotate(-90deg);
transition: transform 0.5s ease;
}
}

@media(min-width:600px) {
nav ul li .right {
display: none;
}
}



@media(max-width:599px) {
.adminbody .row {
padding: 10px;
margin: 0px;


}

.adminbody .row::after {
content: "";
clear: both;
display: table;

}

.adminbody .box {
background: #ffffffcc !important;
backdrop-filter: blur(10px);
padding: 10px !important;
margin-bottom: 5px;
border-radius:10px;


}

.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: 5px;

}

.adminbody .row::after {
content: "";
clear: both;
display: table;

}

.adminbody .box {
/*padding: 20px !important;
margin: 5px 15px 15px 15px;*/
border-radius:10px;


}

.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: #1e6d96;
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: 33.33%;
float: left;
aspect-ratio: 3/2;
position: relative;
}
}

@media only screen and (min-width: 950px) {
.gimage {
width: 20%;
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: #1d6d95;
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #1d6d95e0;
}
@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 1px #fff;
background: #fff;
margin: 4px;
cursor: pointer;
}

.product-item img {
aspect-ratio: 4/3;
object-fit: cover;
}

.product-title {
font-weight: 600;
height: 35px;
padding: 5px 10px 5px 10px;
}

.product-details {
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
justify-content: space-between;
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: #009688;
display: block;
width: 100%;
border:#009688 solid 1px;
color:#fff;
height: 40px;
font-weight: 500;

}
#passwordShowHide{cursor:pointer;}

.alltableborder button ,.tableborder button {
padding: 9px;
border-radius: 0px;
background: #fff !important;
border: solid 1px #ccc !important;
color: #000 !important;
cursor: pointer;
margin-left: 2px;
margin-right: 2px;
}


.fancy-button{
    padding: 10px 20px;
    border: solid 2px #fff;
    transition: all .5s ;
}
.fancy-button:hover{
    padding: 10px 20px;
    border: solid 2px #91d523;
    color:#91d523;
}
.fancy-button2{
    padding: 10px 20px;
    border: solid 2px #144668;
    transition: all .5s ;
    color:#144668;
    background:#fff;
}
.fancy-button2:hover{
    padding: 10px 20px;
    border: solid 2px #91d523;
    color:#91d523;
}
/*Custom CSS Starts*/


