/* @import "../lib/pwashop/input-plus-minus/input-plus-minus.css"; */




/* ------------------ MOBILE ------------------ */
@media (max-width: 768px)
{
:root
{
--header-height: 2.9rem!important; /* ADMIN HEADER HEIGHT */
--header-height-user: 4.8rem!important; /* USER HEADER HEIGHT */
}
}
/* ------------------ MOBILE ------------------ */


:root
{
--scrollbar-1-text-size: 1.4rem;
--scrollbar-1-scrollbar-bg: var(--pwashop-color-2); 
--scrollbar-1-scrollbar-color: var(--pwashop-color-1); 
--scrollbar-1-scrollbar-color-hover: var(--pwashop-color-1);
--scrollbar-1-scrollbar-border-radius: 0.2rem;

--header-height: 0; /* ADMIN HEADER HEIGHT */
--header-height-user: 5.6rem; /* USER HEADER HEIGHT */
}


/* ------------------ PLACEHOLDER ------------------ */
::placeholder
{
text-transform: capitalize;
}
/* ------------------ PLACEHOLDER ------------------ */


/* ===================== SCROLL-BAR ===================== */
.scrollbar-1
{
height: calc(var(--scrollbar-1-text-size) * 1.7);
width: 120px;
resize: none;
border: none;
cursor: pointer;
outline: none;
font-size: var(--scrollbar-1-text-size);
}
/* ---------------------- SCROLL-BAR ---------------------- */

/* Firefox */
html
{
scrollbar-color: var(--pwashop-color-1)!important;
scrollbar-width: calc(var(--scrollbar-1-text-size) * 0.5);
}

/* WebKit and Chromiums */
::-webkit-scrollbar
{
width: calc(var(--scrollbar-1-text-size) * 0.5);
height: calc(var(--scrollbar-1-text-size) * 0.5);
background-color: transparent;
}

::-webkit-scrollbar-thumb
{
background: var(--scrollbar-1-scrollbar-color);
border-radius: var(--scrollbar-1-scrollbar-border-radius);
/* outline: 2px solid var(--pwashop-color-2); */
}

::-webkit-scrollbar-thumb:hover
{
background: var(--scrollbar-1-scrollbar-color-hover);
border-radius: var(--scrollbar-1-scrollbar-border-radius);
cursor: pointer;
}

::-webkit-scrollbar-track
{
background: var(--scrollbar-1-scrollbar-bg);
/* outline: 2px solid var(--pwashop-color-2); */
/* border-radius: var(--scrollbar-1-scrollbar-border-radius); */
}
/* ===================== SCROLL-BAR ===================== */





/* ========================== HEADER ========================== */
/* ================== HEADER-H-SEPARATOR ================== */
/* ------------------ MOBILE ------------------ */
@media (max-width: 768px)
{
.header-h-separator-admin
{
height: var(--header-height)!important;
}
.header-h-separator-user
{
height: var(--header-height-user)!important;
}
}
/* ------------------ MOBILE ------------------ */

.header-h-separator-admin
{
height: var(--header-height);
background: transparent!important;
}
.header-h-separator-user
{
height: var(--header-height-user);
background: transparent!important;
}
/* ================== HEADER-H-SEPARATOR ================== */


.header-block
{
position: fixed;
width:100%;
height: var(--header-height);
background: #fff!important; /* header background */
/* border-bottom: solid var(--pwashop-color-2) 1px; */
overflow: hidden;
z-index: 997;
}




/* ========================== CAPTCHA ========================== */
.captcha-container
{
display: block;
width: 100%;
padding: 0;
font-size: 1.1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #bbb;
border-radius: 10rem;
outline: none;
}
.captcha-img-square
{
float: left;
height:38px;
/*
border-top-left-radius: 19px;
border-bottom-left-radius: 19px;
*/
}

.captcha-img
{
float: left;
height:38px;
border-top-left-radius: 19px;
border-bottom-left-radius: 19px;
}
.captcha-text
{
width: calc(100% - 100px);
height:38px;
padding-left: 0.4rem;
border:none;
outline:none;
}
/* ========================== CAPTCHA ========================== */



/* ======================== TRANSITIONS ======================== */
.transition-0-1
{
transition: 0.1s;
}
.transition-0-2
{
transition: 0.2s;
}
.transition-0-3
{
transition: 0.3s;
}
.transition-0-4
{
transition: 0.4s;
}
.transition-0-5
{
transition: 0.5s;
}
.transition-0-6
{
transition: 0.6s;
}
.transition-0-7
{
transition: 0.7s;
}
.transition-0-8
{
transition: 0.8s;
}
.transition-0-9
{
transition: 0.9s;
}
.transition-1-0
{
transition: 1s;
}

.transition-1-5
{
transition: 1.5s;
}

.transition-2-0
{
transition: 2s;
}
/* ======================== TRANSITIONS ======================== */

/* ======================== NAVBAR-1111 ======================== */
#navbar-container-1111
{
position: fixed;
top: 0;
left: 0;
background-color: var(--pwashop-color-1);
z-index: 991;
text-align: left!important;
width: 100%;
overflow-y: hidden;
}
.navbar-open-1111
{
padding-top: 60px;
height:100%; 
}
.navbar-close-1111
{
padding-top: 0;
height:0;
}
.navbar-open-icon-1111
{
font-size: 26px;
color: var(--pwashop-color-1);
}
.navbar-close-icon-1111
{
font-size: 28px;
color: var(--pwashop-color-1);
}
.navbar-open-transition-1111
{
transition: 0.5s; 
}
.navbar-close-transition-1111
{
transition: 0.2s; 
}
/* ======================== NAVBAR-1111 ======================== */






/* ======================== NAVBAR ======================== */
/* ------------------ MOBILE ------------------ */
@media (max-width: 768px)
{
.main
{
float: left!important;
width: 100%!important;
}
.navbar-open-close-icon-container
{
display: inline-block!important;
}
.navbar-open
{
width: 90%!important;
}
}
/* ------------------ MOBILE ------------------ */

/* ------------------ PC ------------------ */
@media (min-width: 769px)
{
.navbar-open
{
width: 25%!important;
}
}
/* ------------------ PC ------------------ */



.main
{
float: right;
width: 75%;
}

.navbar-open-close-icon-container
{
display: none;
}

#navbar-container
{
position: fixed;
top: 0;
left: 0;
width: 0;
background-color: var(--pwashop-color-1);
z-index: 991;
text-align: left;
padding: var(--header-height) 0 0 0;
height: 100%;
overflow-x: hidden;
}
.navbar-open
{
margin: 0;
padding: 0;
/* width: 25%!important; */
}
.navbar-close
{
margin: 0;
padding: 0;
width: 0;
}
.navbar-open-icon
{
font-size: 26px;
color: var(--pwashop-color-2);
}
.navbar-close-icon
{
font-size: 28px;
color: var(--pwashop-color-2);
}
.navbar-open-transition
{
transition: 0.5s; 
}
.navbar-close-transition
{
transition: 0.2s; 
}
/* ======================== NAVBAR ======================== */



.navbar
{
padding: 1px 10px 1px 10px!important;
}

.lang-bar,
.lang-bar:hover
{
height: auto;
padding: 0.35rem 0.65rem;
background: var(--pwashop-color-1)!important;
color: var(--pwashop-color-2)!important;
font-size: 19px;
font-weight: bold;
outline: none;
border: none;
}

.logo-icon
{
position: relative;
margin-top: auto;
font-size: calc(var(--header-height) - 0.4rem);
color: var(--pwashop-color-1);
}

.logo-img
{
position: relative;
margin-top: auto;
width: calc(var(--header-height) - 1.5rem);
color: var(--pwashop-color-1);
}
/* ========================== HEADER ========================== */






/* ================================ PRODUCT-IMAGE-BLOCK ================================ */
/* -------------- MOBILE -------------- */
@media (max-width: 768px)
{
.product-image-container
{
max-width: 100%!important;
max-height: 90vw!important;
}
}
/* -------------- MOBILE -------------- */
.product-image-container
{
max-width: 100%;
max-height: 23vw;

position: relative; 
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}


.product-image
{
max-width: 100%;
max-height: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* ================================ PRODUCT-IMAGE-BLOCK ================================ */




/* ============================ RATING-STAR ============================ */
.star
{
font-size: 21px;
color: #eee;
}
.star-active
{
color: var(--pwashop-color-1);
}
/* ============================ RATING-STAR ============================ */




/* ============================ CHECKBOX-1 ============================ */
:root
{
--checkbox-out-size: 1.7rem;
--checkbox-in-size:calc(var(--checkbox-out-size) / 2.2);
--checkbox-border-thickness: 0.19em;
--checkbox-out-border-radius: 0.4em;
--checkbox-in-border-radius: calc(var(--checkbox-out-border-radius) / 2.8);
/* --check-icon: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); */
--check-icon: "none";
}

.checkbox-1
{
display: grid;
place-content: center;
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: var(--pwashop-color-1);
width: var(--checkbox-out-size);
height: var(--checkbox-out-size);
border: var(--checkbox-border-thickness) solid var(--pwashop-color-1);
border-radius: var(--checkbox-out-border-radius);
cursor: pointer;
}

.checkbox-1::before
{
content: "";
width: var(--checkbox-in-size);
height: var(--checkbox-in-size);
border-radius: var(--checkbox-in-border-radius);
transform: scale(0);
transition: 70ms transform ease-in-out;
box-shadow: inset 1em 1em var(--pwashop-color-1);
clip-path: var(--check-icon);
}

.checkbox-1:checked::before
{
transform: scale(1);
}
/* ============================ CHECKBOX-1 ============================ */
































































.body-div
{
width: 100%;
overflow: auto;
min-height: 100dvh;
padding: 0;
margin: 0;
background: #fff;
}

/* ========================== BODY ========================== */
body,
input,
select,
button
{
-webkit-tap-highlight-color: transparent!important;
-webkit-touch-callout: none!important;
-webkit-user-select: none!important;
-khtml-user-select: none!important;
-moz-user-select: none!important;
-ms-user-select: none!important;
user-select: none!important;
outline: none!important;
box-shadow: none!important;
}

body:link,
body:hover,
body:focus,
body:visited,
input:link,
input:hover,
input:focus,
input:visited,
select:link,
select:hover,
select:focus,
select:visited,
button:link,
button:hover,
button:focus,
button:visited
{
outline: none!important;
box-shadow: none!important;
}
/* ========================== BODY ========================== */




/* ======================== SIDEBAR ======================== */
#sidebar-block
{
position: fixed;
top: 0;
left: 0;
background-color: var(--pwashop-color-1);
transition: 0.4s;
z-index: 991;
text-align: left!important; /* align menu texts left or right */
}

/* ------------- settings top-to-bottom ------------- */
#sidebar-block
{
width: 100%;
overflow-y: hidden;
}
.sidebar-open
{
padding-top: 60px;
height:100%;
}
.sidebar-close
{
padding-top: 0;
height:0;
}
/* ------------- settings top-to-bottom ------------- */

/* ------------- settings left-to-right ------------- */
/*
#sidebar-block
{
padding-top: 60px;
height: 100%;
overflow-x: hidden;
}
.sidebar-open
{
margin-left: 0;
width:100%;
}
.sidebar-close
{
margin-left: -14px;
width:0;
}
*/
/* ------------- settings left-to-right ------------- */
/* ======================== SIDEBAR ======================== */


.navbar
{
padding: 1px 10px 1px 10px!important;
}

.menu-open-close-btn-div,
.lang-bar
{
cursor: pointer;
}

.btn-menu-open,
.btn-menu-close
{
font-size: 26px;
color: var(--pwashop-color-1);
}

.lang-bar,
.lang-bar:hover
{
height: auto;
padding: 0.35rem 0.65rem;
background: var(--pwashop-color-1)!important;
color: var(--pwashop-color-2)!important;
font-size: 19px;
font-weight: bold;
outline: none;
border: none;
}

.logo-icon-div
{
margin-top: -9px;
}

.logo-icon
{
font-size: 40px;
}
/* ========================== HEADER ========================== */




/* ========================== CAPTCHA ========================== */
.captcha-container
{
display: block;
width: 100%;
padding: 0;
font-size: 1.1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #bbb;
border-radius: 0.25rem;
outline: none;
}
.captcha-img
{
float: left;
height:38px;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.captcha-text
{
width: calc(100% - 100px);
height:38px;
padding-left: 0.4rem;
border:none;
outline:none;
}
/* ========================== CAPTCHA ========================== */