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




/* ===================== SCROLL-BAR ===================== */
:root
{
--scrollbar-1-text-size: 1.4rem;
--scrollbar-1-scrollbar-bg: var(--jumpo-color-2); 
--scrollbar-1-scrollbar-color: var(--jumpo-color-1); 
--scrollbar-1-scrollbar-color-hover: var(--jumpo-color-1);
--scrollbar-1-scrollbar-border-radius: 0.2rem;

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

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

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


.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(--jumpo-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(--jumpo-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(--jumpo-color-2); */
/* border-radius: var(--scrollbar-1-scrollbar-border-radius); */
}
/* ===================== SCROLL-BAR ===================== */








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

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


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





/* ======================== NAVBAR-1111 ======================== */
#navbar-container-1111
{
position: fixed;
top: 0;
left: 0;
background-color: var(--jumpo-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(--jumpo-color-1);
}
.navbar-close-icon-1111
{
font-size: 28px;
color: var(--jumpo-color-1);
}
.navbar-open-transition-1111
{
transition: 0.5s; 
}
.navbar-close-transition-1111
{
transition: 0.2s; 
}
/* ======================== NAVBAR-1111 ======================== */


/* ======================== NAVBAR ======================== */
#navbar-container
{
position: fixed;
top: 0;
left: 0;
width: 0;
background-color: var(--jumpo-color-1);
z-index: 991;
text-align: left!important;
padding: 60px 0 0 0;
height: 100%;
overflow-x: hidden;
}
.navbar-open
{
margin: 0;
padding: 0;
width: 80%!important;
}
.navbar-close
{
margin: 0;
padding: 0;
width: 0;
}
.navbar-open-icon
{
font-size: 26px;
color: var(--jumpo-color-1);
}
.navbar-close-icon
{
font-size: 28px;
color: var(--jumpo-color-1);
}
.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(--jumpo-color-1)!important;
color: var(--jumpo-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(--jumpo-color-1);
}

.logo-img
{
position: relative;
margin-top: auto;
width: calc(var(--header-height) - 1.5rem);
color: var(--jumpo-color-1);
}
/* ========================== 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: 10rem;
outline: none;
}
.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 ----------------- */




/* =========================================================== */
.btn-1-1
{
background: var(--jumpo-color-1);
color: #fff;
border-radius: 100rem;
}

.btn-1-0
{
background: transparent!important;
color: var(--jumpo-color-1);
border: solod var(--jumpo-color-1) 2px;
border-radius: 100rem;
}
/* =========================================================== */



/* ============================ RATING-STAR ============================ */
.star
{
font-size: 21px;
color: #eee;
}
.star-active
{
color: var(--jumpo-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(--jumpo-color-1);
width: var(--checkbox-out-size);
height: var(--checkbox-out-size);
border: var(--checkbox-border-thickness) solid var(--jumpo-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(--jumpo-color-1);
clip-path: var(--check-icon);
}

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