@charset "UTF-8";

/* :: reset/00.css */
:root{
    --white: #fff;
    --black: #000;
    --bold: 700;
    --semi-bold: 600;
}

html{
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html *{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,*::before,*::after{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	
	vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

ul{
	list-style: none;
}

a, a:is(:hover, :focus) {text-decoration:none;}

blockquote::before, blockquote::after,
q::before, q::after {
	content: "";
}
blockquote, q{
	quotes: "" "";
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    width: auto;
    border: 0;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled){
    cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
    padding: 0;
    border-style: none;
}

input{
    vertical-align: middle;
}
input:is([type="email"], [type="number"], [type="file"]){
    direction: ltr;
}
textarea{
    overflow: auto;
    resize: vertical;
}

picture{
    display: inline-block;
}
img, picture, video, iframe{
    max-width: 100%;
    border-style: none;
    vertical-align: middle;
}
svg{
    overflow: hidden;
    vertical-align: middle; 
}
caption{
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    color: #6c757d;
    text-align: left;
    caption-side: bottom;
}


pre,
code,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;

    direction: ltr;
    text-align: left;
    text-shadow: none !important;
}

progress{ vertical-align: baseline; }
template { display: none; }

small{ 
    display: block;
    font-size: .85rem;
}
hr{
    border: 0;
    border-bottom: var(--border);
}

/* Scroll bar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{width:5px;background:#ddd; box-shadow: inset 0 0 2px rgb(0 0 0 / 7%);border-radius:1rem;}
::-webkit-scrollbar-thumb{width:1em;background:#777;border-radius:1rem; opacity: .5;}

.dark-mode ::-webkit-scrollbar-track{background: #101010;}
.dark-mode ::-webkit-scrollbar-thumb{background: #555;}

/* Remove Dotted Outline */
:focus,
a:is(:hover, :active),
input, button,
input::-moz-focus-inner{
    outline: 0 !important;
}

[tabindex="-1"]:focus { outline: 0 !important; }

/* Remove Input(number) arrows in: Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove Input(number) arrows in: Firefox */
input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Make direction always=ltr */
input[type="date"], 
input[type="time"]{
    direction: ltr !important;
}

/* date & time inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: listbox;
}

/* search input */
input[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none; 
}
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; 
}

/* selection */
::selection{
    background-color: var(--selection-bg, var(--dark, #333));
    color:var(--selection-color,#fff);
    text-shadow: none;
}

/* input placeholder direction */
::-webkit-input-placeholder{ /* Edge */
    text-align: start;
    /* direction: rtl; */
}
::placeholder{
    text-align: start;
    /* direction: rtl; */
}
[dir="ltr"]::placeholder{
    text-align: left;
    /* direction: ltr; */
}

[data-placeholder-align="right"]::placeholder{
    text-align: right;
}
[data-placeholder-dir="rtl"]::placeholder{
    direction: rtl;
}

[data-placeholder-align="left"]::placeholder{
    text-align: left;
}
[data-placeholder-dir="ltr"]::placeholder{
    direction: ltr;
}





/** Main */
:host,
html,
body{
    font: var(--font-size, 16px) / 1.5 var(--font-main), system-ui, Tahoma, Arial, sans-serif;
    font-weight: 400;
    width: 100%;
    min-height: 100%;
    overflow-x: clip;

    color: var(--txt-color, #333);
    background: var(--body-bg, #fff);
    scrollbar-width: thin;

    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
}

a{color: var(--a, #1890ff);}
a:is(:hover, :focus, :active){color: var(--a-hover, #0069cc);}


/* Defined CSS Styles */
.dir-rtl{ direction: rtl; text-align: right; }
.dir-ltr{ direction: ltr; text-align: left; }

.pointer{ cursor: pointer; }

.italic {font-style:italic;}
.underline{text-decoration: underline;}
.underline-hover:is(:hover, :focus){
    text-decoration: underline;
}
.overflow-hidden { overflow: hidden !important;}



.relative{ position: relative; z-index: 1; }
.sticky{ position: sticky; z-index: 1; }
.inl-blk{ display: inline-block; }
.d-block{ display: block; }
.vertical-middle{ vertical-align: middle; }


/** config
h1 i, .h1 i,
h2 i, .h2 i,
h3 i, .h3 i,
h4 i, .h4 i{
    position: relative;
    top: 2px;
    --mask: var(--i-color);
} **/

/* wrap container */
.wrap{
    width: calc(100% - 2rem);
    max-width: var(--wrap, 100%);
    margin-inline: auto;
}


/* 404 page & loged-out page */
.err404 img,
.signedOut img{
    max-width: 600px;
    height: 160px;
    margin-bottom: 15px;
}
.signedOut img{
    height: 250px;
}

/* external pages */
#xt-page :is(h2, .h2){
    margin-top: 3rem;
}
#xt-page p{
    margin-bottom: 2rem;
}



/* :: reset/00.external.css */
/** air-datepicker */
[dir="rtl"] .air-datepicker-nav{
    flex-direction: row-reverse;
}


/** selectize */
.selectize-dropdown .optgroup-header{
    font-weight: 700;
}
.selectize-input {
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 1;
   
    min-height: var(--input-height, 40px);

    padding: var(--input-padding, 10px);
    color: var(--input-color, var(--txt-color, #6c757d));
    background-color: var(--input-bg, #fff);
    
    font-family: Tahoma;
    font-size: 16px;
    border: var(--input-border, var(--border));
    box-shadow: var(--input-shadow, initial);
    border-radius: var(--input-radius);
    outline: 0;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
    background: var(--input-bg, #fff);
}

.selectize-dropdown, .selectize-input, .selectize-input input{
    line-height: inherit;
}

.selectize-dropdown, 
.selectize-input, 
.selectize-input input,
.selectize-input input:focus{
    height: auto !important;
    box-shadow: none !important;
}

.selectize-control.multi .selectize-input>div{
    background: var(--primary, #f2f2f2);
    color: #fff;
    font-size: .95rem;
    border-radius: var(--input-radius, 3px);
}



/** ck-editor */
.ck.ck-editor__main>.ck-editor__editable{
    min-height: 100px;
}
/* :: reset/01.colors.css */
:host, :root{
    --blue: #066fd1; /* #188ae2 */
    --blue-rgb: 6, 111, 209;
    --blue-hover: rgba(var(--blue-rgb), .8);

    --azure: #4299e1;
    --azure-rgb: 66, 153, 225;
    --azure-hover: rgba(var(--azure-rgb), .8);

    --indigo: #6610f2;
    --indigo-rgb: 102, 16, 242;
    --indigo-hover: rgba(var(--indigo-rgb), .8);

    --purple: #ae3ec9; /* #6f42c1 #6b5eae */
    --purple-rgb: 174, 62, 201;
    --purple-hover: rgba(var(--purple-rgb), .8);

    --pink: #d6336c; /* #ff3479 */
    --pink-rgb: 214, 51, 108;
    --pink-hover: rgba(var(--pink-rgb), .8);

    --red: #d63939; /* #f34943 */
    --red-rgb: 214, 57, 57;
    --red-hover: rgba(var(--red-rgb), .8);

    --orange: #f76707; /* #fd7e14 */
    --orange-rgb: 247, 103, 7;
    --orange-hover: rgba(var(--orange-rgb), .8);

    --yellow: #f59f00; /* #ffc107 #fabc2a */
    --yellow-rgb: 245, 159, 0;
    --yellow-hover: rgba(var(--yellow-rgb), .8);

    --lime: #74b816; /* #01ff70 */
    --lime-rgb: 116, 184, 22;
    --lime-hover: rgba(var(--lime-rgb), .8);

    --green: #2fb344; /* #28a745 #31ce77 */
    --green-rgb: 47, 179, 68;
    --green-hover: rgba(var(--green-rgb), .8);

    --teal: #0ca678; /* #20c997 */
    --teal-rgb: 12, 166, 120;
    --teal-hover: rgba(var(--teal-rgb), .8);

    --cyan: #17a2b8; /* #17a2b8 */
    --cyan-rgb: 23, 162, 184;
    --cyan-hover: rgba(var(--cyan-rgb), .8);

    --dark: #1f2937; /* #2c3441 */
    --dark-rgb: 31, 41, 55;
    --dark-hover: rgba(var(--dark-rgb), .8);

    --light: #f9fafb; /* #f1f5f7 */
    --light-rgb: 249, 250, 251;
    --light-hover: rgba(var(--light-rgb), .8);
}


.primary{
    --color: var(--primary);
    --color-rgb: var(--primary-rgb);
    --color-hover: var(--primary-hover, rgba(var(--primary-rgb), .8));
}

.secondary{
    --color: var(--secondary);
    --color-rgb: var(--secondary-rgb);
    --color-hover: var(--secondary-hover, rgba(var(--secondary-rgb), .8));
}

.success{
    --color: var(--success);
    --color-rgb: var(--success-rgb);
    --color-hover: var(--success-hover, rgba(var(--success-rgb), .8));
}

.info{
    --color: var(--info);
    --color-rgb: var(--info-rgb);
    --color-hover: var(--info-hover, rgba(var(--info-rgb), .8));
}

.warning{
    --color: var(--warning);
    --color-rgb: var(--warning-rgb);
    --color-hover: var(--warning-hover, rgba(var(--warning-rgb), .8));
}

.danger{
    --color: var(--danger);
    --color-rgb: var(--danger-rgb);
    --color-hover: var(--danger-hover, rgba(var(--danger-rgb), .8));
}

.light{
    --color: var(--light);
    --color-rgb: var(--light-rgb);
    --color-hover: var(--light-hover, rgba(var(--light-rgb), .8));
}

.dark{
    --color: var(--dark);
    --color-rgb: var(--dark-rgb);
    --color-hover: var(--dark-hover, rgba(var(--dark-rgb), .8));
}

.blue{
    --color: var(--blue);
    --color-rgb: var(--blue-rgb);
    --color-hover: var(--blue-hover, rgba(var(--blue-rgb), .8));
}

.azure{
    --color: var(--azure);
    --color-rgb: var(--azure-rgb);
    --color-hover: var(--azure-hover, rgba(var(--azure-rgb), .8));
}

.indigo{
    --color: var(--indigo);
    --color-rgb: var(--indigo-rgb);
    --color-hover: var(--indigo-hover, rgba(var(--indigo-rgb), .8));
}

.purple{
    --color: var(--purple);
    --color-rgb: var(--purple-rgb);
    --color-hover: var(--purple-hover, rgba(var(--purple-rgb), .8));
}

.pink{
    --color: var(--pink);
    --color-rgb: var(--pink-rgb);
    --color-hover: var(--pink-hover, rgba(var(--pink-rgb), .8));
}

.red{
    --color: var(--red);
    --color-rgb: var(--red-rgb);
    --color-hover: var(--red-hover, rgba(var(--red-rgb), .8));
}

.orange{
    --color: var(--orange);
    --color-rgb: var(--orange-rgb);
    --color-hover: var(--orange-hover, rgba(var(--orange-rgb), .8));
}

.yellow{
    --color: var(--yellow);
    --color-rgb: var(--yellow-rgb);
    --color-hover: var(--yellow-hover, rgba(var(--yellow-rgb), .8));
}

.lime{
    --color: var(--lime);
    --color-rgb: var(--lime-rgb);
    --color-hover: var(--lime-hover, rgba(var(--lime-rgb), .8));
}

.green{
    --color: var(--green);
    --color-rgb: var(--green-rgb);
    --color-hover: var(--green-hover, rgba(var(--green-rgb), .8));
}

.teal{
    --color: var(--teal);
    --color-rgb: var(--teal-rgb);
    --color-hover: var(--teal-hover, rgba(var(--teal-rgb), .8));
}

.cyan{
    --color: var(--cyan);
    --color-rgb: var(--cyan-rgb);
    --color-hover: var(--cyan-hover, rgba(var(--cyan-rgb), .8));
}
/* :: reset/02.bg-colors.css */
[class*="bg-"]{
  background-color: var(--bg-color) !important;
}

[class*="bg-"]:is(a, button):is(:hover, :focus, :active){
  background-color: color-mix(in oklab, var(--bg-color) 80%, white) !important;
}

[class*="bg-"]:is(a, button):is([disabled], .disabled){
  background-color: color-mix(in oklab, var(--bg-color) 60%, white) !important;
}

.bg-white{ 
  --bg-color: #fff !important;
}
.bg-transparent{ 
  --bg-color: transparent !important; 
}

.bg-primary{
  --bg-color: var(--primary) !important;
}
.bg-secondary{
  --bg-color: var(--secondary) !important;
}
.bg-success {
  --bg-color: var(--success) !important;
}
.bg-warning {
  --bg-color: var(--warning) !important;
}
.bg-danger {
  --bg-color: var(--danger) !important;
}
.bg-info {
  --bg-color: var(--info) !important;
}
.bg-light {
  --bg-color: var(--light) !important;
}
.bg-dark {
  --bg-color: var(--dark) !important;
}

.bg-blue {
  --bg-color: var(--blue) !important;
}
.bg-azure {
  --bg-color: var(--azure) !important;
}
.bg-indigo {
  --bg-color: var(--indigo) !important;
}
.bg-purple {
  --bg-color: var(--purple) !important;
}
.bg-pink {
  --bg-color: var(--pink) !important;
}
.bg-red {
  --bg-color: var(--red) !important;
}
.bg-orange {
  --bg-color: var(--orange) !important;
}
.bg-yellow {
  --bg-color: var(--yellow) !important;
}
.bg-lime {
  --bg-color: var(--lime) !important;
}
.bg-green {
  --bg-color: var(--green) !important;
}
.bg-teal {
  --bg-color: var(--teal) !important;
}
.bg-cyan {
  --bg-color: var(--cyan) !important;
}


/* Soft Background */
.bg-soft{
  --bg-soft: color-mix(in oklab, var(--bg-color) 10%, transparent);
  background-color: color-mix(in srgb, var(--bg-soft) 100%, transparent) !important;
}


/* Striped/Animated Background */
.bg-striped{
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 0.625rem 0.625rem;
}
.bg-striped.animated{
    -webkit-animation: animated-stripes 0.5s linear infinite;
    animation: animated-stripes 0.5s linear infinite;
}

@-webkit-keyframes animated-stripes{
    from{ background-position: 0.625rem 0; }
    to{ background-position: 0 0; }
}
@keyframes animated-stripes{
    from { background-position: 0.625rem 0; }
    to { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce){
    .bg-striped.animated{
        -webkit-animation: none;
        animation: none;
    }
}
/* :: reset/03.classes.css */
/* Box shadow */
.box-shadow-0{
    box-shadow: none !important;
}

/* Rotations */
.rotate-45{
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

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

.rotate-180, .rotate-vertically{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.rotate-horizontally{
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
}

.flip-x{
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}
.flip-y{
    transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
}
/* :: reset/03.font-size-weight.css */
/* font */
.font-xs{ font-size: .75rem !important; }
.font-sm{ font-size: .875rem !important; }
.font-lg{ font-size: 1.125rem !important; }
.font-xl{ font-size: 1.5rem !important; }
.font-xxl{ font-size: 2rem !important; }

.font-300{ font-weight: 300 !important; }
.font-400{ font-weight: 400 !important;}
.font-500{ font-weight: 600 !important; }
.font-600{ font-weight: 600 !important; }
.font-700{ font-weight: 700 !important; }
.font-800{ font-weight: 800 !important; }
.font-900{ font-weight: 900 !important; }

.font-13{ font-size: 13px !important; }
.font-14{ font-size: 14px !important; }
.font-15{ font-size: 15px !important; }
.font-16{ font-size: 16px !important; }
.font-17{ font-size: 17px !important; }
.font-18{ font-size: 18px !important; }
.font-19{ font-size: 19px !important; }
.font-20{ font-size: 20px !important; }
.font-22{ font-size: 22px !important; }
.font-24{ font-size: 24px !important; }

.font-normal{ font-size: 1rem !important; font-weight: 400 !important; }
/* :: reset/04.heading.css */
/*
--font-weight-h1: 700;

--font-size-h1: 1.5rem;
--font-size-h2: 1.25rem;
--font-size-h3: 1rem;
--font-size-h4: 0.875rem;
--font-size-h5: 0.75rem;
--font-size-h6: 0.625rem;

--line-height-h1: 2rem;
--line-height-h2: 1.75rem;
--line-height-h3: 1.5rem;
--line-height-h4: 1.25rem;
--line-height-h5: 1rem;
--line-height-h6: 1rem;
*/


/* Heading */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    display: block;
    margin-top: 0;
    margin-bottom: .75rem;

    font-size: calc(1.35rem + 1.2vw);
    font-family: var(--font-h1, var(--font-main));
    font-weight: var(--font-bold, 700);
    line-height: 1.4;

    color: var(--h1-color, var(--txt-color));
}
h1{ margin-bottom: 1.25rem; }
h2, .h2{ font-size: calc(1.325rem + 0.9vw); margin-bottom: 1rem; }
h3, .h3{ font-size: calc(1.3rem + 0.6vw); }
h4, .h4{ font-size: calc(1.275rem + 0.3vw); }
h5, .h5 { font-size: 1.25rem; margin-bottom: .5rem; }  
h6, .h6 { font-size: 1rem; margin-bottom: .5rem; }

@media (width >= 1200px) {
    h1, .h1 { font-size: 2.25rem; }
    h2, .h2 { font-size: 1.85rem; }
    h3, .h3 { font-size: 1.5rem; }
    h4, .h4 { font-size: 1.35rem; }
}



/* :: reset/05.padding-margin.css */
.p-0{ padding: 0 !important; }
.p-1{padding: 0.25rem !important;}
.p-2{padding: 0.5rem !important;}
.p-3{padding: 1rem !important;}
.p-4{padding: 1.5rem !important;}
.p-5{padding: 3rem !important;}
.p-6{padding: 5rem !important;}

.px-0{padding-right: 0 !important;padding-left: 0 !important;}
.px-1{padding-right: 0.25rem !important;padding-left: 0.25rem !important;}
.px-2{padding-right: 0.5rem !important;padding-left: 0.5rem !important;}
.px-3{padding-right: 1rem !important;padding-left: 1rem !important;}
.px-4{padding-right: 1.5rem !important;padding-left: 1.5rem !important;}
.px-5{padding-right: 3rem !important;padding-left: 3rem !important;}
.px-6{padding-inline: 5rem !important;}

.py-0{padding-top: 0 !important;padding-bottom: 0 !important;}
.py-1{padding-top: 0.25rem !important;padding-bottom: 0.25rem !important;}
.py-2{padding-top: 0.5rem !important;padding-bottom: 0.5rem !important;}
.py-3{padding-top: 1rem !important;padding-bottom: 1rem !important;}
.py-4{padding-top: 1.5rem !important;padding-bottom: 1.5rem !important;}
.py-5{padding-top: 3rem !important;padding-bottom: 3rem !important;}
.py-6{padding-block: 5rem !important;}

.pr-0{padding-right: 0 !important;}
.pr-1{padding-right: 0.25rem !important;}
.pr-2{padding-right: 0.5rem !important;}
.pr-3{padding-right: 1rem !important;}
.pr-4{padding-right: 1.5rem !important;}
.pr-5{padding-right: 3rem !important;}

.pl-0{padding-left: 0 !important;}
.pl-1{padding-left: 0.25rem !important;}
.pl-2{padding-left: 0.5rem !important;}
.pl-3{padding-left: 1rem !important;}
.pl-4{padding-left: 1.5rem !important;}
.pl-5{padding-left: 3rem !important;}

.pt-0{padding-top: 0 !important;}
.pt-1{padding-top: 0.25rem !important;}
.pt-2{padding-top: 0.5rem !important;}
.pt-3{padding-top: 1rem !important;}
.pt-4{padding-top: 1.5rem !important;}
.pt-5{padding-top: 3rem !important;}
.pt-6{padding-top: 5rem !important;}

.pb-0{padding-bottom: 0 !important;}
.pb-1{padding-bottom: 0.25rem !important;}
.pb-2{padding-bottom: 0.5rem !important;}
.pb-3{padding-bottom: 1rem !important;}
.pb-4{padding-bottom: 1.5rem !important;}
.pb-5{padding-bottom: 3rem !important;}
.pb-6{padding-bottom: 5rem !important;}

.ps-0{padding-inline-start: 0 !important;}
.ps-1{padding-inline-start: 0.25rem !important;}
.ps-2{padding-inline-start: 0.5rem !important;}
.ps-3{padding-inline-start: 1rem !important;}
.ps-4{padding-inline-start: 1.5rem !important;}
.ps-5{padding-inline-start: 3rem !important;}
.ps-6{padding-inline-start: 5rem !important;}

.pe-0{padding-inline-end: 0 !important;}
.pe-1{padding-inline-end: 0.25rem !important;}
.pe-2{padding-inline-end: 0.5rem !important;}
.pe-3{padding-inline-end: 1rem !important;}
.pe-4{padding-inline-end: 1.5rem !important;}
.pe-5{padding-inline-end: 3rem !important;}
.pe-6{padding-inline-end: 5rem !important;}


/** Margin */
.m-0{margin: 0 !important;}
.m-1{margin: 0.25rem !important;}
.m-2{margin: 0.5rem !important;}
.m-3{margin: 1rem !important;}
.m-4{margin: 1.5rem !important;}
.m-5{margin: 3rem !important;}
.m-6{margin: 5rem !important;}
.m-auto{margin: auto !important;}

.mx-0{margin-right: 0 !important;margin-left: 0 !important;}
.mx-1{margin-right: 0.25rem !important;margin-left: 0.25rem !important;}
.mx-2{margin-right: 0.5rem !important;margin-left: 0.5rem !important;}
.mx-3{margin-right: 1rem !important;margin-left: 1rem !important;}
.mx-4{margin-right: 1.5rem !important;margin-left: 1.5rem !important;}
.mx-5{margin-right: 3rem !important;margin-left: 3rem !important;}
.mx-6{margin-right: 5rem !important;margin-left: 5rem !important;}
.mx-auto{margin-right: auto !important;margin-left: auto !important;}

.my-0{margin-top: 0 !important;margin-bottom: 0 !important;}
.my-1{margin-top: 0.25rem !important;margin-bottom: 0.25rem !important;}
.my-2{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important;}
.my-3{margin-top: 1rem !important;margin-bottom: 1rem !important;}
.my-4{margin-top: 1.5rem !important;margin-bottom: 1.5rem !important;}
.my-5{margin-top: 3rem !important;margin-bottom: 3rem !important;}
.my-6{margin-top: 5rem !important;margin-bottom: 5rem !important;}
.my-auto{margin-top: auto !important;margin-bottom: auto !important;}

.mt-0{margin-top: 0 !important;}
.mt-1{margin-top: 0.25rem !important;}
.mt-2{margin-top: 0.5rem !important;}
.mt-3{margin-top: 1rem !important;}
.mt-4{margin-top: 1.5rem !important;}
.mt-5{margin-top: 3rem !important;}
.mt-6{margin-top: 5rem !important;}
.mt-auto{margin-top: auto !important;}

.mb-0{margin-bottom: 0 !important;}
.mb-1{margin-bottom: 0.25rem !important;}
.mb-2{margin-bottom: 0.5rem !important;}
.mb-3{margin-bottom: 1rem !important;}
.mb-4{margin-bottom: 1.5rem !important;}
.mb-5{margin-bottom: 3rem !important;}
.mb-6{margin-bottom: 5rem !important;}
.mb-auto{margin-bottom: auto !important;}

.ms-0{margin-inline-start: 0 !important;}
.ms-1{margin-inline-start: 0.25rem !important;}
.ms-2{margin-inline-start: 0.5rem !important;}
.ms-3{margin-inline-start: 1rem !important;}
.ms-4{margin-inline-start: 1.5rem !important;}
.ms-5{margin-inline-start: 3rem !important;}
.ms-6{margin-inline-start: 5rem !important;}
.ms-auto{margin-inline-start: auto !important;}

.me-0{margin-inline-end: 0 !important;}
.me-1{margin-inline-end: 0.25rem !important;}
.me-2{margin-inline-end: 0.5rem !important;}
.me-3{margin-inline-end: 1rem !important;}
.me-4{margin-inline-end: 1.5rem !important;}
.me-5{margin-inline-end: 3rem !important;}
.me-6{margin-inline-end: 5rem !important;}
.me-auto{margin-inline-end: auto !important;}
/* :: reset/06.text-align.css */
.text-monospace{
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
  
.text-justify{ text-align: justify !important; }  
.text-wrap{ white-space: normal !important; }  
  
.text-balance{ text-wrap: balance; }
ul.text-balance li{ text-wrap: balance; }

/* text align */
.text-left{ text-align: left !important; }
.text-right{ text-align: right !important; }

.text-start{ text-align: start !important; }
.text-end{ text-align: end !important; }
.text-center, 
.center{ text-align: center !important; }
.center::-webkit-input-placeholder{ text-align: center; }
.center::placeholder{ text-align: center; }

@media (max-width: 767px) {
  .text-sm-start { text-align: start !important; }
  .text-sm-end { text-align: end !important; }
  .text-sm-center { text-align: center !important; } 
}

@media (max-width: 991px) {
  .text-md-start { text-align: start !important; }
  .text-md-end { text-align: end !important; }
  .text-md-center { text-align: center !important; } 
}






/* :: reset/06.text-colors.css */
/* text colors */
.text-primary{ color: var(--primary) !important; }
.text-secondary{ color: var(--secondary) !important; }
.text-third{ color: var(--third) !important; }
.text-success{ color: var(--success) !important; }
.text-warning{ color: var(--warning) !important; }
.text-danger{ color: var(--danger) !important; }
.text-info{ color: var(--info) !important; }
.text-dark{ color: var(--dark) !important; }
.text-gray{ color: var(--gray, #ccc) !important; }
.text-white{ color: var(--white, #fff) !important; }

.text-blue{ color: var(--blue) !important; }
.text-indigo{ color: var(--indigo) !important; }
.text-purple{ color: var(--purple) !important; }
.text-pink{ color: var(--pink) !important; }
.text-red{ color: var(--red) !important; }
.text-orange{ color: var(--orange) !important; }
.text-yellow{ color: var(--yellow) !important; }
.text-lime{ color: var(--lime) !important; }
.text-green{ color: var(--green) !important; }
.text-teal{ color: var(--teal) !important; }
.text-cyan{ color: var(--cyan) !important; }

.text-text{ 
    color: var(--txt-color, #212529) !important; 
}

.text-yellow{ color: var(--yellow, #ffa432) !important; }

.text-gradient,
.text-gradient2{
    --mask: var(--primary-grade);

    background: var(--primary-grade);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
.text-gradient2{
    background-image: var(--primary-grade-h);
}

.text-muted{ 
    color: var(--text-muted, #6c757d) !important;
    opacity: var(--text-muted-opacity, 1) !important;
}

.text-reset{ color: inherit !important; }


/* On hover */
.hover-link:is(:hover, :focus, :active){
    color: var(--a-hover, #188ae2) !important; 
}

.hover-primary:is(:hover, :focus, :active){
    color: var(--primary) !important; 
}
.hover-secondary:is(:hover, :focus, :active){
    color: var(--secondary) !important; 
}
.hover-info:is(:hover, :focus, :active){
    color: var(--info) !important; 
}
.hover-success:is(:hover, :focus, :active){
    color: var(--success) !important; 
}
.hover-warning:is(:hover, :focus, :active){
    color: var(--warning) !important; 
}
.hover-danger:is(:hover, :focus, :active){
    color: var(--danger) !important; 
}

/* :: reset/06.text-overflow.css */
/* text truncate */
.text-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-overflow{
    display: inline-block; /* usually set on spans or inline elements so we correct display and vertical alignment */
    vertical-align: middle;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-nowrap{
    white-space: nowrap;
}
/* :: reset/07.hidden.css */
.hidden{ 
    display: none !important; 
}

/** 
On small and medium screens may hide elements
sm-hidden
md-hidden
*/

@media (max-width: 576px) {
    .sm-hidden {
      display: none !important;
    }
}
  
@media (max-width: 768px) {
    .md-hidden {
      display: none !important;
    }
}
/* :: reset/08.float.css */
/* Float */
.float-right{ float: right !important; }
.float-left{ float: left !important; }
.float-start{ float: var(--align, right); }
.float-end{ float: var(--align2, left); }
.float-none{ float: none !important; }

@media (min-width: 576px) {
    .float-sm-right{ float: right !important; }
    .float-sm-left{ float: left !important; }
    .float-sm-start{ float: var(--align, right); }
    .float-sm-end{ float: var(--align2, left); }
    .float-sm-none{ float: none !important; }
}
@media (min-width: 768px) {
    .float-md-right{ float: right !important; }
    .float-md-left{ float: left !important; }
    .float-md-start{ float: var(--align, right); }
    .float-md-end{ float: var(--align2, left); }
    .float-md-none{ float: none !important; }
}
@media (min-width: 992px) {
    .float-lg-right{ float: right !important; }
    .float-lg-left{ float: left !important; }
    .float-lg-start{ float: var(--align, right); }
    .float-lg-end{ float: var(--align2, left); }
    .float-lg-none{ float: none !important; }
}
@media (min-width: 1200px) {
    .float-xl-right{ float: right !important; }
    .float-xl-left{ float: left !important; }
    .float-xl-start{ float: var(--align, right); }
    .float-xl-end{ float: var(--align2, left); }
    .float-xl-none{ float: none !important; }
}

.clear::after, 
.clearfix::after{
    display: block;
    content: "";
    clear: both;
}
/* :: reset/09.flex.css */
/** 
 * On small and medium screens
 ********************************
 * >> may reverse flex direction (row or column)
 * 
 * .flex-sm-row-reverse, .flex-md-column-reverse
 *
 * >> may hide elements
 * .sm-hidden
*/


/**
List of contents 
********************************
> .flex, .center-content, .center-items

> flex options
.flex-inline(.inline-flex), 
.flex.column, .flex.column-reverse, 
.flex-row, .flex.row-reverse
.space-evenly
.flex-center, .flex-end, .flex-start, .flex-strech


> gap options
.gap-1px, .gap-1, .gap-15, .gap-2, .gap-25, .gap-3
.gap-5, .gap-10, .gap-20, .gap-30
.row-gap-1, .row-gap-2, .row-gap-3
.column-gap-1, .column-gap-2, .column-gap-3

> grow options
.grow-1, .grow-2

> .justify-content-(start|end|center|between|around|evenly)

> .align-items-(start|end|center|baseline|stretch)

> .align-content-(start|end|center|between|around|stretch)

> .align-self-(auto|start|end|center|baseline|stretch)

> order-(1-6|first|last)


/** Flex */
.flex,
.center-content,
.center-items {
  display: flex !important;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
}
.flex-inline,
.inline-flex{
  display: inline-flex !important;
}
.flex.column,
.center-content {
  flex-flow: column !important;
}
.flex.column-reverse {
  flex-flow: column-reverse;
}
.flex-row{
  flex-direction: row !important;
}
.flex.row-reverse {
  flex-flow: row-reverse;
}

.flex.hidden{
  display: none !important;
}


.space-evenly {
  justify-content: space-evenly !important;
}
.flex-center,
.center-content {
  justify-content: center !important;
}
.flex-end {
  justify-content: flex-end !important;
}
.flex-start {
  justify-content: flex-start !important;
}
.flex-strech {
  align-items: stretch !important;
}

.center-content,
.center-items {
  align-items: center !important;
}

.flex-last {
  margin-inline-start: auto;
}



.gap-1px { --gap: 1px; }

.gap-1 { --gap: 1rem; }
.gap-15 { --gap: 1.5rem; }
.gap-2 { --gap: 2rem; }
.gap-25 { --gap: 2.5rem; }
.gap-3 { --gap: 3rem; }

.gap-5 { --gap: 5px; }
.gap-10 { --gap: 10px; }
.gap-20 { --gap: 20px; }
.gap-30 { --gap: 30px; }

.row-gap-1{ --row-gap: 1rem; }
.row-gap-2{ --row-gap: 2rem; }
.row-gap-3{ --row-gap: 3rem; }

.column-gap-1 { --column-gap: 1rem; }
.column-gap-2 { --column-gap: 2rem; }
.column-gap-3 { --column-gap: 3rem; }

[class*="gap-"]:not([class*="row-gap-"], [class*="column-gap-"], .row) { 
  gap: var(--gap) !important;
}
[class*="row-gap-"] { row-gap: var(--row-gap); }
[class*="column-gap-"] { column-gap: var(--column-gap); }

.grow-1 { flex-grow: 1; }
.grow-2 { flex-grow: 2; }


/*.justify-content-*/
.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

/* .align-items- */
.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

/* .align-content- */
.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

/* .align-self- */
.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

/* .order- */
.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}
/* :: reset/10.row.css */
/** Row & Cloumns */
.row {
  --gutter-x: var(--row-gap, var(--gap, 1.5rem));
  --gutter-y: var(--column-gap, var(--gap, 0));

  display: flex !important;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-left: calc(-0.5 * var(--gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * 0.5);
  padding-left: calc(var(--gutter-x) * 0.5);
  margin-top: var(--gutter-y);
}

.col {
  flex: 1 0 0%;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .flex-sm-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (max-width: 991px) {
  .flex-md-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse;
  }
}
/* :: reset/11.width.css */
/* Width */
.width25{
    width: 24.25%;
    width: -webkit-calc(25% - .75rem);
    width: calc(25% - .75rem);
}
.width33{
    width: 33%;
    width: -webkit-calc(33.3% - .75rem);
    width: calc(33.3% - .75rem);
}
.width50{
    width: 49.5%;
    width: -webkit-calc(50% - .75rem);
    width: calc(50% - .75rem);
}
.width66{
    width: 66%;
    width: -webkit-calc(66.7% - .75rem);
    width: calc(66.7% - .75rem);
}
.width67{
    width: 67%;
    width: -webkit-calc(67% - .75rem);
    width: calc(67% - .75rem);
}
.width75{
    width: 74%;
    width: -webkit-calc(75% - .75rem);
    width: calc(75% - .75rem);
}
.width100{
    width: 100% !important;
}
.width-auto{
    width: auto !important;
}

.height100{ height: 100%; }
.height100vh{ height: 100vh; }

/* Minimum Width */
.mnw-200{ min-width: min(200px, 100%); }
.mnw-250{ min-width: min(250px, 100%); }
.mnw-300{ min-width: min(300px, 100%); }
.mnw-400{ min-width: min(400px, 100%); }
.mnw-500{ min-width: min(500px, 100%); }
.mnw-600{ min-width: min(600px, 100%); }
.mnw-700{ min-width: min(700px, 100%); }
.mnw-800{ min-width: min(800px, 100%); }
.mnw-900{ min-width: min(900px, 100%); }
.mnw-1000{ min-width: min(1000px, 100%); }

/* Maximum Width */
.mxw-200{ max-width: min(200px, 100%); }
.mxw-250{ max-width: min(250px, 100%); }
.mxw-300{ max-width: min(300px, 100%); }
.mxw-400{ max-width: min(400px, 100%); }
.mxw-500{ max-width: min(500px, 100%); }
.mxw-600{ max-width: min(600px, 100%); }
.mxw-700{ max-width: min(700px, 100%); }
.mxw-800{ max-width: min(800px, 100%); }
.mxw-900{ max-width: min(900px, 100%); }
.mxw-1000{ max-width: min(1000px, 100%); }
.mxw-1100{ max-width: min(1100px, 100%); }

@media (width < 450px) {
    .mxw-200, .mxw-250, .mxw-300, .mxw-400{
        max-width: unset;
    }
}
@media (width < 550px) {
    .mxw-500{
        max-width: unset;
    }
}
@media (width < 650px) {
    .mxw-600{
        max-width: unset;
    }
}

/* small */
@media (width < 768px) {
    .mxw-700,
    .mxw-sm-unset{
        max-width: unset;
    }
}
/* medium */
@media (width < 992) {
    .mxw-800,
    .mxw-md-unset{
        max-width: unset;
    }
}
/* large */
@media (width < 1200) {
    .mxw-lg-unset{
        max-width: unset;
    }
}

.mxh200, .mxh300, .mxh400, .mxh500, .mxh600{
    max-height: 200px;
    overflow-y: auto;
}
.mxh300{ max-height: 300px; }
.mxh400{ max-height: 400px; }
.mxh500{ max-height: 500px; }
.mxh600{ max-height: 600px; }
/* :: reset/99.print.css */
/**
    @media print

    we have items that is usually shown on screen, but should be hidden on print
    these will have a data-print-hide attribute

    and items that is usually hidden on screen, but should be shown on print
    these will have a data-print-show attribute
*/

@media screen{
    [data-print-show]{
        display: none;
    }
}

@media print{
    .wrap{
        width: 100%;
        max-width: 100%;
    }
    [data-print-hide]{
        display: none !important;
    }
    [data-print-show]{
        display: block !important;
    }

    *,*::before,*::after{
        box-shadow: none !important;
        text-shadow: none !important;
    }
}
/* :: zajil/asideMenu.css */
/*
<aside class="aside-menu" data-position="right|left|top|bottom" data-width="350">
    <section class="container">
        <!-- optional -->
        <header></header>
        <div class="content"></div>
        <footer></footer>
    </section>
</aside>
*/

.app-menu{
    display: none;
}
.aside-menu.open{
    /* display: none; */
    position: fixed;
    inset: 0;
    background-color: var(--aside-menu-overlay, rgb(0 0 0 / 50%));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 1000;
    overflow-y: auto;
}
.aside-menu.open .container{
    position: absolute;
    left: 0;
    margin-left: -300px;

    width: 90%;
    max-width: 300px;
    height: 100vh;
    background-color: var(--aside-menu-bg, #fff);

    overflow-y: auto;
    overflow-x: hidden;
    transition: all .15s ease-in-out;
}
.aside-menu:not(.open) .container{
    margin: 0 !important;
}

.aside-menu[data-position="right"] .container{
    right: 0;
    margin-right: -300px;

    left: auto;
    margin-left: 0;
}

.aside-menu[data-position="bottom"] .container,
.aside-menu[data-position="top"] .container{
    width: 100%;
    max-width: unset;

    height: 90%;
    max-height: 300px;

    bottom: 0;
    margin-bottom: -300px;

    left: auto;
    margin-left: 0;
}

.aside-menu[data-position="top"] .container{
    bottom: auto;
    margin-bottom: 0;

    top: 0;
    margin-top: -300px;
}

.aside-menu.open{
    display: block;
}
/* :: zajil/avatar.css */
/** 
 * Avatar Variables 
 * ------------------------

 --av-width: 36px;
 --av-radius: 50%;
 --av-background: var(--light, #ccc);

 --av-group-margin: 13px;
 --av-group-border: 2px solid var(--body-bg, #fff);
 --av-shadow-1: 0 3px 6px 3px rgb(0 0 0 / 11%);
 --av-group-shadow: 0 3px 6px 3px rgb(0 0 0 / 11%);


*/
:is(a, div)[class*="av-"]{
    display: inline-flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    align-items: center;
    align-content: flex-start;
}
:is(a, div)[class*="av-"] .avatar{
    margin-inline-end: .5em;
}

img.avatar{
    object-fit: cover;
    object-position: center;
}
.avatar:not(.bubble){
    position: relative;
    display: inline-block;
    width: var(--av-width, 36px);
    height: var(--av-width, 36px);
    text-align: center;
    vertical-align: middle;

    background-color: var(--av-background, var(--light, #ccc));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-clip: border-box;

    border-radius: var(--av-radius, 50%);
    cursor: pointer;

    /* icons inside avatar or update avatar icon */
    --icon-size: 36px;
}
.avatar:not(.bubble) i{
    margin: 0;
}

small .avatar{
    --av-width: 24px;
}

.avatar-xs{
    --av-width: 24px;
    --icon-size: 16px !important;

    --online-shift: -1px;
    --online-size: 6px;
}
.avatar-sm{
    --av-width: 32px;
    --icon-size: 20px !important;
}
.avatar-lg{
    --av-width: 48px;
    --online-shift: 3px; /* Online Indicator Position Shift */
}
.avatar-xl{
    --av-width: 80px;
    --icon-size: 48px !important;
    --online-shift: 6px;
    --online-size: 11px;
}
.avatar-xxl{
    --av-width: 120px;
    --icon-size: 64px !important;
    --online-shift: 11px;
    --online-size: 14px;
}


/* Border Radius */
.avatar-no-radius{
    --av-radius: 0;
}
.avatar-sm-radius{
    --av-radius: .3rem;
}


/* Update Avatar Span */
.avatar:not(.bubble) span{
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
    border-radius: var(--av-radius, 50%);
    background-color: rgb(0 0 0 / 50%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;

    opacity: 0;
    transition: all 0.2s ease-out;
}
.avatar:not(.bubble):is(:hover, :focus, .loading) span{
    opacity: 1;
}

.avatar:not(.bubble) i{
    margin: 0;
}
.avatar.loading i,
.avatar:not(.loading) [data-loading]{
    display: none;
}
.avatar.loading [data-loading]{
    display: block;
}

.avatar:not(.bubble).err{
    box-shadow: 0 0 0 0.2rem rgba(var(--danger-rgb, 220, 53, 69), .5);
}



/* Online Indicator */
.usr-online::before,
.usr-offline::before{
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #999;
    content: "";
    border-radius: 50%;
    margin-inline-end: 5px;    
    vertical-align: middle;
}
.usr-online::before{
    background-color: var(--green, #03dd03);
}
.avatar.usr-online::before,
.avatar.usr-offline::before{
    position: absolute;
    bottom: var(--online-shift, 1px);
    right: var(--online-shift, 1px);
    width: var(--online-size, 8px);
    height: var(--online-size, 8px);
    border: 1px solid #fff;
    z-index: 2;
}

.avatar:is(.avatar-xl, .avatar-xxl):is(.usr-online, .usr-offline)::before{
    border: 2px solid #fff;
}


/** Avatars Group **/
.avatar-group{
    display: inline-block;
    text-align: var(--align, right);
    padding-inline-end: var(--av-group-margin, 13px);
    /* vertical-align: super; */
}
.avatar-group .avatar{
    margin-inline-end: calc(var(--av-group-margin, 13px) * -1) !important;
    border: var(--av-group-border, 2px solid var(--body-bg, #fff));
    position: relative;
    z-index: 1;
    -webkit-transition: all .2s;
    transition: all .2s;
    box-shadow: var(--av-group-shadow, 0 3px 6px 3px rgb(0 0 0 / 11%));
}
.avatar-group .avatar:is(:hover, :focus, .active){
    z-index: 100;
    transform: scale(1.1) translateY(-3px);
}
.avatar-group .count{
    background-color: var(--primary, #333);
    color: #fff;
    font-weight: 700;
}

/* :: zajil/badge.css */
/*.badge{
    display: inline-block;
    padding: .35em .65em;
    font-size: .8em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}*/
.badge:empty {
    display: none;
}

.badge{
    --badge-padding-x: 0.45em;
    --badge-padding-y: 0.25em;

    /* --badge-bg: var(--_badge-bg-color, var(--primary)); */
    --badge-color: var(--_badge-text-color, #fff);
    --badge-border-radius: var(--_badge-border-radius, 4px);

    --bg-color: var(--primary);

    display: inline-flex;
    font-weight: 600;
    font-size: 0.85714285em;

    color: var(--badge-color);
    background: var(--badge-bg);

    text-align: center;
    justify-content: center;
    align-items: center;
    user-select: none;
    
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1;

    padding: var(--badge-padding-y) var(--badge-padding-x);
    min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
    
    gap: 0.25rem;    
    
    border: 1px solid transparent;
    border-radius: var(--badge-border-radius);
}

/* Options */
.badge:is(.outline, .bg-soft){    
    color: var(--bg-color);
}
/* .badge.bg-soft{
    --_badge-bg-color: var(--bg-color);
} */
.badge.outline{
    border-color: var(--bg-color);
    background: transparent;
}

/* Colors (bg-color)
.badge.bg-secondary{
    --_badge-bg-color: var(--secondary);
}
.badge.bg-danger{
    --_badge-bg-color: var(--secondary);
} */
/* :: zajil/border.css */
.border{
    border: var(--border, var(--border, 1px solid #dee2e6));
}
.border-bottom{
    border-bottom: var(--border, 1px solid #dee2e6);
}
.border-left{
    border-left: var(--border, 1px solid #dee2e6);
}
.border-right{
    border-right: var(--border, 1px solid #dee2e6);
}
.border-top{
    border-top: var(--border, 1px solid #dee2e6);
}
/* :: zajil/breadcrumb.css */
.breadcrumb{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    padding: 8px 0;
    z-index: 800;
}
.breadcrumb ul{
    display: block;
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
}
.breadcrumb li{
    display: inline-block;
    padding-bottom: 0 !important;
}
.breadcrumb a{
    color: var(--txt-color);
}
.breadcrumb a:is(:hover, :focus){
    color: var(--a-hover);
}
.breadcrumb li:first-child a{
    font-weight: 700;
}
.breadcrumb li:last-child a{
    color: var(--gray);
}


.breadcrumb li:first-child:not(:has(i))::before{
    margin-inline-end: 6px;

    --size: 1.2em;
    --icon: url(../img/house.svg);
    --mask: var(--primary);

    display: inline-block;
    width: var(--size);
    height: var(--size);
    content: "";
    vertical-align: middle;

    background: var(--icon) center;
    background-size: 100%;
}
@supports (mask-image: none) {
    .breadcrumb li:first-child::before{
        background: var(--mask);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        -webkit-mask-image: var(--icon);
        mask-image: var(--icon);
    }
}

.breadcrumb li:not(:last-child)::after{
    display: inline-block;
    margin: 0 11px;
    color: var(--secondary);
    content: "/";
    vertical-align: middle;
}
/* :: zajil/btnCopy.css */
.btn-copy::after{
    content: attr(data-copy);
    display: inline;
}
/* :: zajil/card.css */
/* ==========================================================================
FLEXIBLE CARD COMPONENT
----------------------------------------------------------------------------
        Author: Firstname Lastname
  Last Updated: 2023-07-25


<article class="card (horizontal | outline | loading | card-sm | card-lg | no-image | padding)"> 
  <div class="card__badge badge success">On Sale</div>

  <div class="card__image">
    <img src="candy.jpg" alt="Product">    
  </div>

  <header class="card__header">
    <h3 class="card__title">Product Name</h3>
    <small class="text-muted">$29.99</small>
  </header>

  <div class="card__body">
    <p>Product description here...</p>
  </div>

  <footer class="card__footer">
    <div class="card__buttons">
      <button class="btn">Add to Cart</button>
    </div>
  </footer>
</article>
========================================================================== */





/* Base Card Structure */
.card {
  --badge-shift: 12px;
  --card-radius: var(--_card-radius, var(--radius-lg, var(--radius, 10px)));

  background: #ffffff;
  border-radius: var(--card-radius);
  box-shadow: var(--box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* overflow: hidden; */
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Card Image */
.card__image {
  position: relative;
  overflow: hidden;
  background: #f8f9fa;

  border-top-right-radius: var(--card-radius);
  border-top-left-radius: var(--card-radius);  
}

.card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.card:hover .card__image img {
  transform: scale(1.05);
}

/* Image Overlay
.card__image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.91) 100%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}
.card:hover .card__image::before {
  opacity: 1;
} */

/* Card Header */
.card__header {
  padding: 20px 24px 16px;  
}
.card:has(.card__body) .card__header{
  border-bottom: var(--border, 1px solid #f0f0f0);
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--h1-color, #1a1a1a);
  line-height: 1.3;
}
.card__title:not(:last-child) {
  margin-bottom: 8px;
}

/* Card Body */
.card__body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__body p {
  margin: 0;
}

/* Card Footer */
.card__footer {
  padding: 16px 24px 20px;
  border-top: var(--border, 1px solid #f0f0f0);
  background: #fafafa;
  margin-top: auto;
  overflow: hidden;

  border-bottom-right-radius: var(--card-radius);
  border-bottom-left-radius: var(--card-radius);
}


.card__buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}

/* Card Sub-title */
.card__subtitle {
  font-weight: 600;
  background: var(--light, #f9fafb); 
  border-block: var(--border, 1px solid #f0f0f0);
  padding: 8px 20px;
}

/* Card Variants */
.card.outline {
  box-shadow: none;
  border: var(--border, 1px solid #e0e0e0);
}

.card.padding{
  --badge-shift: 28px;
}
.card.padding .card__image{
  margin: 20px;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}
.card.padding .card__header{
  padding-top: 0 !important;
}

.card.no-borders :is(.card__header, .card__footer) {
  border: 0;
}
.card.no-borders .card__header{
  padding-bottom: 0 !important;
}
.card.no-borders .card__footer{
  background: transparent;
  padding-top: 0 !important;
}

/* Horizontal Card Layout */
.card.horizontal {
  flex-direction: row;
  /* max-width: 600px; */
}

.card.horizontal .card__image {
  width: 40%;
  min-height: 200px;

  border-radius: 0;
  border-top-right-radius: var(--card-radius);
  border-bottom-right-radius: var(--card-radius);
}

[dir="ltr"] .card.horizontal .card__image,
.card[dir="ltr"].horizontal .card__image {
  border-top-left-radius: var(--card-radius);
  border-bottom-left-radius: var(--card-radius);
}

.card.horizontal .card__content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card.horizontal .card__image img {
  height: 100%;
  object-fit: cover;
}


/* Card Sizes */
.card-sm .card__image img {
  height: 160px;
}

.card-sm .card__header,
.card-sm .card__body,
.card-sm .card__footer {
  padding: 16px 20px;
}

.card-lg {
  max-width: 500px;
}

.card-lg .card__image img {
  height: 250px;
}

.card-lg .card__header,
.card-lg .card__body,
.card-lg .card__footer {
  padding: 24px 28px;
}


/* Card without Image */
.card:not(:has(.card__image)) .card__header,
.card.no-image .card__header {
  padding-top: 24px;
}




/* Badge/Tag Support */
.card__badge {
  position: absolute;
  top: var(--badge-shift);
  left: var(--badge-shift);
  z-index: 2;
}
[dir="ltr"] .card__badge {
  left: unset;
  right: var(--badge-shift);
}

/* Loading State */
.card.loading {
  pointer-events: none;
}

.card.loading :is(.card__body p, .card__title, .card__footer) {
  background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: cardLoading 1.5s ease-in-out infinite;
  border-radius: 4px;
  height: 1.5em;
  margin-bottom: 8px;
}

@keyframes cardLoading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -100% 50%;
  }
}



/* Grid Layout Support */
.card-grid,
.card-grid-300,
.card-grid-400,
.card-grid-500,
.card-grid-600 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  /* padding: 20px; */
}
.card-grid-300{
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card-grid-400{
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.card-grid-500{
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}
.card-grid-600{
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}

.card-grid .card {
  max-width: none;
  margin: 0;
}


/* Responsive Design */
@media (max-width: 768px) {
  .card {
    max-width: 100%;
    margin: 0;
  }

  .card.horizontal {
    flex-direction: column;
    max-width: 100%;
  }

  .card.horizontal .card__image {
    width: 100%;
    border-radius:var(--card-radius) var(--card-radius) 0 0 ;
    min-height: 180px;
  }

  .card__header,
  .card__body,
  .card__footer {
    padding: 16px 20px;
  }

  .card__buttons {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
}


/* Card Footer Button */
.card-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: inherit;
  font-weight: 600;
  padding: 1rem 1.25rem;
  transition: background 0.3s;  
  flex: 1 1 0%;
  gap: .25rem;
}
.card-btn:not(:last-child){
  border-inline-end: var(--border);
}
.card-btn:is(:hover, :focus, .active) {
    background: var(--light, #f5f9fd);
    color: var(--primary);
}
/* :: zajil/dropdown.css */
/**
Examples::after

<div class="dropdown">
    <button type="button" class="drop-toggle" aria-expanded="false"></button>

    <div class="drop-menu">
        <a href="?p=quiz-question&id='.$results[$a]['id'].'" class="dropdown-item btn-reArrange">
            '.$lang['reArrange'].'
        </a>
        <a href="?p=quiz-question&id='.$results[$a]['id'].'" class="dropdown-item btn-edit">
            '.$lang['edit'].'
        </a>
        <a href="#" class="dropdown-item btn-del|btn-admin-del" data-obj="question" data-id="'.$results[$a]['id'].'" data-id2="'.strn::chars($results[$a]['question'], 66).'">
            '.$lang['delete'].'
        </a>
    </div>
</div>

<!-- another example -->
<a href="#" class="drop-toggle" aria-expanded="false"></a>

<div class="drop-menu">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>


1) .dropdown > main container (optional)
- if not found you will need to add data-target to button (.drop-toggle)
- could have class .space-between to add space between icon and text in .dropdown-item

2) .drop-toggle (button or anchor tag)
- could have data-target as a selector for required menu to open
- if empty (doesnt have icon) it's content is ... dots
- could have .arrow-after class to add an arrow icon after content 
- could have [aria-expanded="true"] to .drop-menu to open

3) .drop-menu (menu container) required
- could have class .space-between to add space between icon and text in .dropdown-item

4) .dropdown-item
- could have class .space-between to add space between icon and text in .dropdown-item
- could also have class .active or .disabled to add active or disabled style

5) .dropdown-divider (optional inside .drop-menu)
- <div class="dropdown-divider"></div>
- just like <hr />
*/

.dropdown{
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
}

/* to force open menu to be displayed above other elements */
.dropdown:has(.drop-toggle[aria-expanded="true"]){
  z-index: 100;
}

.drop-toggle:empty{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 30px;
  color: inherit;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  text-align: center;
  margin-top: -6px;
  
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
}
.drop-toggle:empty:is(:hover, :focus, [aria-expanded="true"]) {
  background-color: var(--light, #f7f7f7);
}

.drop-toggle:empty::before,
.drop-toggle.arrow-after::after {
  --icon: url(../img/chevron-down.svg);

  display: inline-block;
  width: 18px;
  height: 18px;
  content: "";
  vertical-align: middle;
  
  background: var(--a);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);

  opacity: .7;
}
.drop-toggle.arrow-after::after{
  --icon: url(../img/chevron-down.svg);
}
.drop-toggle:is(:hover, :focus, [aria-expanded="true"])::before,
.drop-toggle.arrow-after:is(:hover, :focus, [aria-expanded="true"])::after{
  opacity: 1;
}
.drop-toggle.arrow-after:is(:hover, :focus, [aria-expanded="true"])::after{
  background: var(--a-hover);
}
.drop-toggle.arrow-after[aria-expanded="true"]::after{
  transform: rotate(180deg);
}

.drop-menu{
  position: absolute;
  top: 100%;
  right: -15px;
  z-index: 900;
  
  /* transform: translateX(15px); */
  
  display: none;
  min-width: 180px;
  padding: 0.25rem 0;
  margin: 0.125rem 0 0;
  font-size: .9rem;
  color: var(--txt-color, #212529);
  list-style: none;
  background-color: var(--_drop-menu-bg, var(--section-bg, #fff));
  background-clip: padding-box;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 0.25rem; 

  -webkit-box-shadow: 0 3px 8px 0 rgba(154, 161, 171, 0.2);
          box-shadow: 0 3px 8px 0 rgba(154, 161, 171, 0.2);

  /* will-change: transform; */
  
  /*
  -webkit-animation-name: DropDownSlide;
          animation-name: DropDownSlide;
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  */
  -webkit-animation-name: DropDownSlideUp;
  animation-name: DropDownSlideUp;
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;    
}
[dir="ltr"] .drop-menu,
.drop-menu.left,
[dir="rtl"] .dropdown.float-end .drop-menu,
.dropdown.float-left .drop-menu{
  right: auto;
  left: -15px;
}

.dark-mode .drop-menu{
  -webkit-box-shadow: none;
          box-shadow: none;
}

.drop-menu.small{
  min-width: 140px;
}




.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item{
  display: block;

  width: 100%;
  padding: .4rem 1rem !important;
  clear: both;
  font-weight: 400;
  color: var(--txt-color, #6c757d);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.dropdown.space-between .dropdown-item,
.drop-down.space-between .dropdown-item,
.dropdown-item.space-between{
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-between;
  align-items: center;
}
.dropdown-item:is(:hover, :focus, :active, .active){
    color: var(--a-hover);
    text-decoration: none;
    background-color: var(--_drop-menu-hover-bg, var(--light, #f8f9fa)); 
}
.dropdown-item:is(:disabled, .disabled){
    opacity: .7;
    pointer-events: none;
    background-color: transparent; 
}


.dropdown.space-between .dropdown-item[class*="btn-"]::before,
.drop-down.space-between .dropdown-item[class*="btn-"]::before,
.dropdown-item.space-between[class*="btn-"]::before,

.dropdown.space-between .dropdown-item i,
.drop-down.space-between .dropdown-item i,
.dropdown-item.space-between i{
  margin: 0 !important;
}
.dropdown-item[class*="btn-"]:is(:hover, :focus){
  --txt-hover: var(--a-hover);
}

.dropdown-item:is(.btn-del, .btn-admin-del){
  margin-top: 5px;
  border-top: 1px solid rgb(0 0 0 / 15%);
  padding-top: 11px;
}
.dropdown-item:is(.btn-del, .btn-admin-del):is(:hover, :focus){
  --txt-hover: var(--danger);
  color: var(--danger) !important;
}


@-webkit-keyframes DropDownSlideUp {
  0% {
      margin-top: 15px;
  }
  100% {
    margin-top: -1px;
  }
}
@keyframes DropDownSlideUp {
  0% {
      margin-top: 15px;
  }
  100% {
    margin-top: -1px;
  }
}

/*
@-webkit-keyframes DropDownSlide {
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0); }
    0% {
      -webkit-transform: translateY(40px);
      transform: translateY(40px); } }
  
  @keyframes DropDownSlide {
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0); }
    0% {
      -webkit-transform: translateY(40px);
      transform: translateY(40px); } 
  }
*/
/* :: zajil/isApprovedRejectedDeleted.css */
/* when approving, rejecting, deleting things */
/*.is-waiting,
.is-waiting td{
    color: #836a30 !important;
    background-color: #fef5de !important;
    border-color: #836a30 !important;
}*/

.is-new,
.is-new td,
.is-pending,
.is-pending td{
    color: #8d821b !important;
    background-color: #f5f3d6 !important;
    border-color: #a3a510 !important;
    box-shadow: 0 0 0px 1px #a3a510;
}

.is-approved,
.is-approved td{
    color: #196b3e !important;
    background-color: #d6f5e4 !important;
    border-color: #19a156 !important;
    box-shadow: 0 0 0px 1px #19a156;
}

.is-deleted,
.is-deleted td,
.is-rejected,
.is-rejected td{
    color: #7e2623 !important;
    background-color: #fddbd9 !important;
    border-color: #dc1811 !important;
    box-shadow: 0 0 0px 1px #dc1811;
}
  
.is-new :is(.card), 
.is-pending :is(.card), 
.is-approved :is(.card), 
.is-deleted :is(.card), 
.is-rejected :is(.card){
    background: transparent;
}

tr:is(.is-deleted, .is-rejected, .is-approved, .is-new, .is-pending),
tr:is(.is-deleted, .is-rejected, .is-approved, .is-new, .is-pending) td{
    box-shadow: none;
}

:is(.is-deleted, .is-rejected, .is-approved) .btn{
    opacity: .5;
}

/* :is(.is-deleted, .is-rejected, .is-approved) .control-buttons-container{
    display: none;
} */


/* :: zajil/lineClamp.css */
[class*="line-clamp"] {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.line-clamp-2{
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.line-clamp-4{
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
.line-clamp-5{
    -webkit-line-clamp: 5;
    line-clamp: 5;
}
.line-clamp-6{
    -webkit-line-clamp: 6;
    line-clamp: 6;
}
/* :: zajil/mIcons.css */
/* 
 * SVG Icons 
 *
 * all data optional
 * data-f filter must be specified other wise won't work
 * data-m mask color, any func but if in hexacode without #, if no value will get from stylesheet --mask property
 * data-mnh mask color only when not hover nor focus
 * data-mh mask color when hover or focus
 * data-oh opacity and remove when hover of focus, if no value will get from stylesheet --opacity property
 * data-w means webp icon from webp/ dir

 <i class="mi-bell" data-s="24" data-f="grayscale(40%)" data-m="222" data-oh=".7"></i>
*************************/
i[class*="mi-"]{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

    font-size: 1.2em;
    line-height: 1;

    --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48bGluZWFyR3JhZGllbnQgaWQ9InBsLTAuODYiIHgxPSIwIiB4Mj0iMSIgeTE9IjAiIHkyPSIwIj48c3RvcCBzdG9wLWNvbG9yPSIjZWVlIiBvZmZzZXQ9IjAiPjwvc3RvcD48c3RvcCBzdG9wLWNvbG9yPSIjYWFhIiBvZmZzZXQ9IjEiPjwvc3RvcD48L2xpbmVhckdyYWRpZW50PjxjaXJjbGUgY3g9IjMyIiBjeT0iMzIiIHI9IjMwIiBmaWxsPSJ1cmwoI3BsLTAuODYpIi8+PC9zdmc+");
    --size: var(--icon-size, 1em);
}
i[class*="mi-"]:first-child:not(:last-child),
i[class*="mi-"]:last-child:not(:first-child),
i[class*="mi-"]:not(:first-child, :last-child)
{
    margin-inline-end: .2em;
}

i.micon-xs{
    --size: var(--icon-size, .75em);
}
i.micon-sm{
    --size: var(--icon-size, .875em);
}
i.micon-md{
    --size: var(--icon-size, 1em);
}
i.micon-lg{
    --size: var(--icon-size, 1.45em);
}
i.micon-xl{
    --size: var(--icon-size, 1.75em);
}
i.micon-xxl{
    --size: var(--icon-size, 2em);
}

i[class*="mi-"]::before{
    display: inline-block;
    width: var(--size);
    height: var(--icon-height, var(--size));
    content: "";
    vertical-align: middle;

    background: var(--icon) center;
    background-size: 100% 100%;
}
@supports (mask-image: none) {
    i[class*="mi-"][data-m]::before,
    a:not(:hover, :focus, .active) i[class*="mi-"][data-mnh]:not(:hover, :focus, :active)::before,
    :not(a) > i[class*="mi-"][data-mnh]:not(:hover, :focus, :active)::before{
        background: var(--mask, currentColor);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-image: var(--icon);
        mask-image: var(--icon);
    }

    i[class*="mi-"]:is([data-m], [data-mh]):is(:hover, :focus)::before,
    a:is(:hover, :focus, .active) i[class*="mi-"][data-mh]::before,
    .circle-bg-icon:is(:hover, :focus) > i[class*="mi-"][data-mh]::before{
        background: var(--mask-hover, var(--mask, currentColor));
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-image: var(--icon);
        mask-image: var(--icon);
    }
}

i[class*="mi-"][data-oh]:not(:hover, :focus, :active){
    opacity: var(--opacity);
}

i[class*="mi-"][data-hv]:is(:hover, :focus)::before,
a:is(:hover, :focus, .active) i[class*="mi-"][data-hv]::before{
    --icon: var(--icon2);
}


/* :: zajil/newCatForm.css */
form[name="new-cat"] .uploads[data-btnupload]:empty{
    height: 110px;
}
form[name="new-cat"] .uploads.avatar{
    --av-width: 80px;

    margin: 0 !important;
    margin-inline-start: 2rem !important;
    margin-top: -62px !important;    
    border: 3px solid #fff;
}

form[name="new-cat"] .uploads .images{
    padding: 0;
    border: 0;
}
form[name="new-cat"] .uploads .images .imgPreview{
    width: 100%;
}
form[name="new-cat"] .uploads .images img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--uploads-radius, 3px);
}

.ttl-line-through{
    position: relative;
    line-height: 1;
    margin: .75rem 0;
}
.ttl-line-through::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 1rem;
    width: 100%;
    height: 1px;
    background: var(--txt-color);
    opacity: .5;
}
.ttl-line-through span{
    position: relative;
    z-index: 1;
    background: var(--section-bg, #fff);
    color: var(--primary);
    padding: .5rem 2rem;
    display: block;
    width: fit-content;
    margin-inline: auto;
    font-size: 1.1rem;
    font-weight: 700;
    border: 1px solid var(--txt-color);
    border-radius: 100px;
}
/* :: zajil/notifications.css */
[class^="counter-"]{
	position: absolute;
	display: flex;
    justify-content: center;
    align-items: center;
    
    font-family: Arial;
    font-size: 12px;
    font-weight: var(--semi-bold, 600);

    min-width: var(--width, 20px);
    height: var(--width, 20px);
    line-height: var(--width, 20px);
    padding-inline: 5px;
    
	color:#fff !important;
	background-color: var(--danger, red);
    border-radius: 50px;
    z-index: 10;
}

[class^="counter-"]:not([data-count="0"]) + i{
    -webkit-animation: tada 1.5s ease infinite;
    animation: tada 1.5s ease infinite;
}

[class^="counter-"]:is([class*="float-"], [class*="static"]){
    position: static;
    display: inline-flex;
}

[class^="counter-"][data-count="0"]{
    display: none !important;
}

/* span[data-count] */
[data-count]::before{
    display: inline;
    content: attr(data-count);
    font-style: normal;
}






/** 
* Side Notifications
* Notifications Page
*
* (.notifications) is general class in all three places
***/

/* Side Container */
#aside-notifications{
    position: fixed;
    bottom: 25px;
    left: 25px;
    width: 300px;
    z-index: 1000;
}
#aside-notifications:empty{
    display: none;
}

/* Side notifications only will have radius & border & margin-bottom */
#aside-notifications .notification{ 
    display: block;
    border-radius: var(--radius, 5px);
    margin-bottom: 10px;
    background-color: #f7f7f7;
    box-shadow: inset var(--box-shadow);
    border: 1px solid #fff;
}
#aside-notifications a:is(:hover, :focus){
    background-color: #f5f5f5;
    border: 1px solid rgba(0,0,0, .1);
}


/* notifications list */
.notifications ul{
    margin-inline-start: 25px;
    border-inline-start: 2px solid var(--primary);
}
.notifications li{
    position: relative;
    padding-inline-start: 15px;
}
.notifications li::before{
    position: absolute;
    right: -10px;
    top: 38px;
    content: "";
    width: 18px;
    height: 18px;
    background-color: var(--primary);
    border-radius: 50%;
    border: 5px solid var(--body-bg);
    z-index: 2;
}
.notifications li:last-child::after{
    position: absolute;
    right: -2px;
    bottom: 0;
    content: "";
    width: 2px;
    height: 54px;
    background-color: var(--body-bg);
    z-index: 1;
}


/* notification container (a|div) */
.notification{
    --img-width: 100px;
    --gap: 1rem;

    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: start;
    justify-content: start;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--gap);

    padding: var(--padding, 6px 15px);
    word-break: keep-all;
    box-shadow: var(--box-shadow, 0px 0px 2px 0px rgb(0 0 0 / 25%));
    background: var(--section-bg, #fff);
    border-radius: var(--radius, 5px);

    margin-bottom: 10px;
}
.notification::before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: transparent #fff;
    border-width: 8px 0 8px 8px;
    top: 59px;
    right: -8px;
    margin-top: -20px;
}
.notification.new{
    background-color: #ffecb3;
}
.notification.new::before{
    border-color: transparent #ffecb3;
}
.notification :is(strong, b){
    color: var(--primary);
}

.notification:has(img:not(.avatar)) p{
    max-width: min(600px, (100% - var(--img-width) - var(--gap)));
}


.notification img:not(.avatar){ /* notification image */
    width: var(--img-width);
    height: auto;
    max-height: 60px;
    border-radius: 3px;
}

.notification time{
    display: block;
    width: 100%;
    font-size: .875rem;
    opacity: .75;
    margin-top: 12px;
}
.notification time:empty::after{ /* notification time */
    content: attr(datetime);
    display: inline-block;
    width: auto;

    font-size: 15px;
    opacity: .7;
}


/** nofication icon */
.notification small{ 
    --icon: url(../img/notify/bell.svg);

    display: block;    
    margin-top: 5px;
    padding-inline-start: 24px;   
    
    background-image: var(--icon);
    background-position: center var(--align, right);
    background-repeat: no-repeat;
    background-size: 16px 16px;

    font-size: .9rem;
    color: #777;
    line-height: 16px;
}

/* system messages */
.notification:is(.msg, .mail) small{ --icon: url(../img/notify/mail.svg); }
.notification.announce small{ --icon: url(../img/notify/announce.svg); }

.notification:is(.success, .check, .done) small{ --icon: url(../img/notify/success.svg); }
.notification:is(.warning, .alert) small{ --icon: url(../img/notify/warning.svg); }
.notification:is(.danger, .error) small{ --icon: url(../img/notify/danger.svg); }
.notification.info small{ --icon: url(../img/notify/info.svg); }

.notification:is(.pending, .waiting) small{ --icon: url(../img/notify/pending.svg); } */
.notification.approved small{ --icon: url(../img/notify/check.svg); }
.notification:is(.rejected, .declined) small{ --icon: url(../img/notify/rejected.svg); }
.notification.deleted small{ --icon: url(../img/notify/deleted.svg); }
.notification.canceled small{ --icon: url(../img/notify/canceled.svg); }
.notification:is(.notfound, .error404) small{ --icon: url(../img/notify/404.svg); }

.notification.invoice small{ --icon: url(../img/notify/invoice.svg); }

/* user actions */
.notification.commented small{ --icon: url(../img/notify/comment.svg); }
.notification.reviewed small{ --icon: url(../img/notify/favorite.svg); }
.notification.followed small{ --icon: url(../img/notify/follow.svg); }
.notification:is(.saved, .favorited) small{ --icon: url(../img/notify/save.svg); }
.notification:is(.saved, .favorited) small{ --icon: url(../img/notify/save.svg); }
.notification:is(.saved, .favorited) small{ --icon: url(../img/notify/save.svg); }

/* reactions */
.notification.like small{ --icon: url(../img/notify/like.svg); }
.notification.dislike small{ --icon: url(../img/notify/dislike.svg); }
.notification.love small{ --icon: url(../img/notify/love.svg); }
.notification.haha small{ --icon: url(../img/notify/haha.svg); }
.notification.wow small{ --icon: url(../img/notify/wow.svg); }
.notification.sad small{ --icon: url(../img/notify/sad.svg); }
.notification.angry small{ --icon: url(../img/notify/angry.svg); }
.notification.fire small{ --icon: url(../img/notify/fire.svg); }


/* rewards */
.notification.medal small{ --icon: url(../img/notify/medal.svg); }


/* money and payments */
.notification.moneyCheck small{ --icon: url(../img/notify/money-check.svg); }
.notification.moneyError small{ --icon: url(../img/notify/money-error.svg); }
.notification.moneyRefund small{ --icon: url(../img/notify/refund.svg); }
.notification.moneyWithdraw small{ --icon: url(../img/notify/withdraw.svg); }



/* shipping
.notification.packing small{ --icon: url(../img/notify/packing.svg); }
.notification.shipping small{ --icon: url(../img/notify/shipping.svg); }
.notification.delivered small{ --icon: url(../img/notify/approved.svg); }
*/

/* :: zajil/onlineOfflineInstallApp.css */
#install-app-prompt{
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--primary);
    --mask: #fff;
    color: #fff;
    text-align: center;
    font-weight: 700;
    line-height: 2.5;
    box-shadow: inset 0 -5px 5px rgb(0 0 0 / 10%);
    text-shadow: 1px 1px rgb(0 0 0 / 15%);
}
/* :: zajil/openBox.css */
:root{
	--ob-overlay-bg: rgb(0 0 0 / 60%);
    --ob-radius: var(--radius-lg, 10px);
    --ob-bg: #fff;
    --ob-footer-bg: var(--light, #fff);
	--ob-padding: 17px;	
	--ob-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.openbox{
	position: fixed;
	inset: 0;
	z-index: 1000;

	display: none;	
	background: transparent;
	transition: background 0.3s;
}
.openbox.open{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ob-overlay-bg);
}
.openbox.close{
	background: transparent;
}
.openbox_content{
	width: 100%;
	max-width: 600px;
	min-width: min(300px, calc(100% - 40px));
	z-index: 5;
	opacity: 0;
	background: var(--ob-bg);
	border-radius: var(--ob-radius);
	box-shadow: var(--ob-shadow);
	overflow: hidden;
}


/* Header */
.openbox_content > header{
	font-size: 1.3rem;
	font-weight: 600;

	padding: 11px 15px;
	padding-inline-end: 36px;
	border-bottom: var(--border, 1px solid rgb(0 0 0 / 10%));
}
.openbox_content > header:empty{
	display: none;
}

.openbox i.btn-obc{
	position: absolute;
    left: 12px;
    top: 12px;
	z-index: 5;

	display: inline-block;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNGNDQzMzYiIGQ9Ik0yMS41IDQuNUgyNi41MDFWNDMuNUgyMS41eiIgdHJhbnNmb3JtPSJyb3RhdGUoNDUuMDAxIDI0IDI0KSIvPjxwYXRoIGZpbGw9IiNGNDQzMzYiIGQ9Ik0yMS41IDQuNUgyNi41VjQzLjUwMUgyMS41eiIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1LjAwOCAyNCAyNCkiLz48L3N2Zz4=");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: .7;
	filter: grayscale(0.9);
	cursor: pointer;
}
[dir="ltr"] .openbox i.btn-obc{
	right: 12px;
	left: auto;
}
.openbox i.btn-obc:is(:hover, :focus){
	opacity: 1;
	filter: none;
    animation: animate-spin .5s 1;
}



/* Body */
.openbox_content .bodyContainer{
	display: block;
	width: 100%;
	/* min-height: 120px; */

	padding: var(--ob-padding);
	background: var(--ob-bg);
	max-height: calc(100vh - 80px);
	overflow: auto;
}

/* display on mobile phones
@media () {
	.openbox_content .bodyContainer{
		max-height: 100vh;
	}
} */

/* Footer */
.openbox_content > footer{
	border-top: 1px solid rgb(0 0 0 / 10%);
	background-color: var(--ob-footer-bg);
	padding: .75rem var(--ob-padding);
	border-radius: 0 0 var(--ob-radius) var(--ob-radius);
}
.openbox_content > footer button{
	margin-block: 0 !important;
}


/** Default Animation (dropping2.css) **/
.openbox:is(.open, .close) .openbox_content{
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.7,0,0.3,1);
	animation-fill-mode: forwards;
	transform-origin: -150% 50%;
}
.openbox.open .openbox_content{
	animation-name: anim-open;
}
.openbox.close .openbox_content{
	animation-name: anim-close;
}

@keyframes anim-open{
	0% { opacity: 0; transform: rotate3d(0, 0, 1, -45deg); }
	100% { opacity: 1; transform: rotate3d(0, 0, 1, 0deg); }
}
@keyframes anim-close{
	0% { opacity: 1; }
	100% { opacity: 0; transform: rotate3d(0, 0, 1, 45deg); }
}

.openbox .confirmMSG{
	max-width: calc(100% - 120px);
	text-wrap: balance;
}

/* :: zajil/pagination.css */
/*
<nav class="pagination">
    <ul>
        <li class="page-item active">
            <a class="page-link" href="https://zajil.dev/?pageN=1" aria-label="Page #1">1</a>    
        </li>
        <li class="page-item">
            <a class="page-link" href="https://zajil.dev/?pageN=2" aria-label="Page #2">2</a>    
        </li>
        <li class="page-item">
            <a class="page-link" href="https://zajil.dev/?pageN=3" aria-label="Page #3">3</a>    
        </li>
        <li class="page-item">
            <a class="page-link" href="https://zajil.dev/?pageN=4" aria-label="Page #4">4</a>    
        </li>
        <li class="page-item">
            <a class="page-link" href="https://zajil.dev/?pageN=5" aria-label="Page #5">5</a>    
        </li>
        <li class="page-item">
            <a class="page-link" href="https://zajil.dev/?pageN=5" aria-label="Last Page">
                <span aria-hidden="true" class="dir-rtl">»</span>
            </a>    
        </li>
    </ul>
</nav>
*/

.pagination{
    display: inline-block;
    
    --pg-color: var(--_pg-color, var(--txt-color, #414d5f));
    --pg-color-hover: var(--_pg-color-hover, var(--a-hover, #414d5f));

    --pg-bg: var(--_pg-bg, var(--section-bg, #fff));
    --pg-bg-hover: var(--_pg-bg-hover, var(--light, #fff));

    --pg-radius: var(--_pg-radius, var(--radius, 0.25rem));
    --pg-border: var(--_pg-border, var(--border, 1px solid #dee2e6));
}

.pagination ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
    margin: 0;
}
.pagination a{
    position: relative;
    display: block;
    padding: 0.5rem 1rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--pg-color);
    background: var(--pg-bg);
    border: var(--pg-border);
}
.pagination a:is(:hover, :focus){
    z-index: 2;
    color: var(--pg-color-hover);    
    background: var(--pg-bg-hover);
    border-color: rgb(0 0 0 / 10%);
    text-decoration: none;
}
.pagination a:focus{    
    -webkit-box-shadow: 0 0 0 0.15rem rgba(24, 138, 226, 0.25);
    box-shadow: 0 0 0 0.15rem rgba(24, 138, 226, 0.25);
}

.pagination li{
    margin-bottom: 0;
}
.pagination li:first-child a{    
    border-top-right-radius: var(--pg-radius);
    border-bottom-right-radius: var(--pg-radius);
}
[dir="ltr"] .pagination li:first-child a{
    border-radius: 0;
    border-top-left-radius: var(--pg-radius);
    border-bottom-left-radius: var(--pg-radius);
}

.pagination li:last-child a{
    margin-left: 0;
    border-top-left-radius: var(--pg-radius);
    border-bottom-left-radius: var(--pg-radius);
}
[dir="ltr"] .pagination li:last-child a{
    border-radius: 0;
    border-top-right-radius: var(--pg-radius);
    border-bottom-right-radius: var(--pg-radius);
}

.pagination li.active a{
    z-index: 1;
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.pagination li.disabled a{
    color: #6c757d;
    pointer-events: none;
    cursor: auto;
    background-color: #fff;
    border-color: #dee2e6;
}

/*.pagination-lg{
    --pg-radius: .3rem;
    font-size: 1.125rem;
    line-height: 1.5;
}
.pagination-lg .pagination a{
    padding: 0.75rem 1.5rem;
}

.pagination-sm{
    --pg-radius: .2rem;
    font-size: 0.7875rem;
    line-height: 1.5;
}
.pagination-sm .pagination a{
    padding: 0.25rem 0.5rem;    
}
*/
/* :: zajil/reveal.css */
/** Reveal **/
[data-reveal] {
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: 1s;
    transition-timing-function: ease;
}

span[data-reveal]{
    display: inline-block;
}

[data-reveal="top"] { transform: translateY(-100px); }
[data-reveal="bottom"] { transform: translateY(100px); }
[data-reveal="left"] { transform: translateX(-100px); }
[data-reveal="right"] { transform: translateX(100px); }
[data-reveal="center"] { transform: scale(.25); }

[data-reveal].revealed {
    transform: translate(0) scale(1);
    opacity: 1;
}

/* :: zajil/rounded.css */
.rounded{
    border-radius: 100px !important;
}
.rounded-circle{
    border-radius: 50% !important;
}

.radius-lg{
    border-radius: var(--radius-lg, 10px);
}
.radius-sm{
    border-radius: var(--radius-sm, 4px);
}
.radius-none{
    border-radius: 0 !important;
}


.rounded-top {
    border-top-left-radius: var(--radius, 0.25rem);
    border-top-right-radius: var(--radius, 0.25rem); 
}

.rounded-right {
    border-top-right-radius: var(--radius, 0.25rem);
    border-bottom-right-radius: var(--radius, 0.25rem); 
}

.rounded-bottom {
    border-bottom-right-radius: var(--radius, 0.25rem);
    border-bottom-left-radius: var(--radius, 0.25rem); 
}

.rounded-left {
    border-top-left-radius: var(--radius, 0.25rem);
    border-bottom-left-radius: var(--radius, 0.25rem); 
}

/* :: zajil/section.css */
/* to be deleted */
.section{
    --card-radius: var(--_card-radius, var(--radius-lg, var(--radius, 10px)));

    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    justify-content: stretch;
    word-wrap: break-word;
    background: var(--section-bg, #fff);
    background-clip: border-box;    
    border-radius: var(--card-radius);
    box-shadow: var(--box-shadow, 0px 5px 13px 5px rgb(52 72 84 / 9%));
}


/*
.card{
    --card-radius: var(--_card-radius, var(--radius-lg, var(--radius, 10px)));

    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    justify-content: stretch;
    word-wrap: break-word;
    background: var(--section-bg, #fff);
    background-clip: border-box;    
    border-radius: var(--card-radius);
    box-shadow: var(--box-shadow, 0px 5px 13px 5px rgb(52 72 84 / 9%));
}
.card-img{
    width: 100%;
    height: 160px;
    border-radius: var(--card-radius); 
    object-fit: cover;
    object-position: top;
    overflow: hidden;
}
.card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: all .15s ease-in-out;
}

.card-img.top, .card-img.top img {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0; 
}
.card-img.bottom, .card-img.bottom img {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}


.card-header{
    padding: 1rem 1.5rem;
    border-bottom: var(--border);
}

.card-body {
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: 1rem 1.5rem;     
}

.card-title {
    font-weight: 700;
    line-height: 1.8;
    height: calc(3.6rem);
  
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    padding: .75rem 1.5rem;
    background-color: transparent;
    border-top: 1px solid #eee;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

.card-body .dropdown{
    position: absolute;
    top: .5rem;
    left: .5rem;
}
[dir="ltr"] .card-body .dropdown{
    right: .5rem;
    left: auto;
}*/
/* :: zajil/table.css */
/*
--table-color: #212529;
--table-bg: transparent;
--table-head-bg: var(--dark);
--table-border-color: #dee2e6;
--table-radius: 5px;

.table-sm

table.bordered
table.borderless

table.striped
    --table-striped-bg: rgb(0 0 0 / 5%);
    --table-striped-color: #212529;

table.hover
    --table-hover-bg: rgb(0 0 0 / 7%);
    --table-hover-color: #212529;
*/


table{
    caption-side: bottom;
    border-collapse: collapse;
	border-spacing: 0;

    width: 100%;
    /* margin-bottom: 1.5rem; */
    vertical-align: top;

    color: var(--table-color, #212529);
    background-color: var(--table-bg, transparent);
}
caption, th, td{
	text-align: start;
}

thead, tfoot{
    --table-border-color: var(--table-head-bg, var(--dark, #212529));
    background-color: var(--table-head-bg, var(--dark, #212529));
    color: #fff;
}
tbody {
    vertical-align: inherit;
}
thead {
    vertical-align: bottom;
    font-weight: 700;
}

th, td{
    padding: .5rem .75rem;    
    border-bottom-width: 1px;
}


table > :not(:first-child) {
    border-top: 2px solid currentColor;
}

table.radius{
    border-radius: var(--table-radius, var(--radius, 5px));
    overflow: hidden;
}

.table-sm{
    font-size: .85rem;
}
.table-sm :is(th, td){
    padding: 0.275rem 0.5rem;
}

table:not(.bordered, .borderless){
    border: 1px solid var(--table-border-color, #dee2e6);
}
table.bordered :is(th, td) {
    border: 1px solid var(--table-border-color, #dee2e6);
}

table.striped.bordered :is(th, td){
    border-right: 0;
    border-left: 0;
}
table.striped.bordered :is(th, td):first-child{
    border-inline-start: 1px solid var(--table-border-color, #dee2e6);
}
table.striped.bordered :is(th, td):last-child{
    border-inline-end: 1px solid var(--table-border-color, #dee2e6);
}

table.borderless :is(th, td) {
    border-bottom-width: 0;
}
table.borderless > :not(:first-child) {
    border-top-width: 0;
}

table.striped tbody tr:nth-of-type(even) > * {
    background-color: var(--table-striped-bg, #f5f5f5);
}
table.striped tbody tr:not([class*="text-"]):nth-of-type(even) > * {
    color: var(--table-striped-color, #212529);
}

table.hover tbody tr:hover > * {
    background-color: var(--table-hover-bg, #f5f5f5);
}
table.hover tbody tr:not([class*="text-"]):hover > * {
    color: var(--table-hover-color, #212529);
}

table .avatar{
    --av-width: 30px;
}
.table-sm .avatar{
    --av-width: 24px;
}
/* :: zajil/ulCustom.css */
ul.p-1 li:not(:last-child){
    padding-bottom: .25rem;
}
ul.p-2 li:not(:last-child){
    padding-bottom: .5rem;
}
ul.p-3 li:not(:last-child){
    padding-bottom: .75rem;
}
ul.p-4 li:not(:last-child){
    padding-bottom: 1rem;
}
ul.p-5 li:not(:last-child){
    padding-bottom: 1.5rem;
}
ul:is(.p-1, .p-2, .p-3, .p-4, .p-5){
    padding: 0 !important;
}

/* ul:is(.square, .circle, .dash) */
ul:is(.square, .circle, .dash, .check, .check-circle, .icon){
    line-height: 1.4;
}
ul:is(.square, .circle, .dash, .check, .check-circle, .icon) li{
    --ul-bullet-width: var(--_ul-bullet-width, 10px);

    --ul-timeline-width: var(--_ul-timeline-width, 1px);
    --ul-timeline-color: var(--_ul-timeline-color, #ddd);

    --ul-timeline-bullet-bg: var(--_ul-timeline-bullet-bg, #fff);
    --ul-timeline-bullet-color: var(--_ul-timeline-bullet-color, var(--ul-timeline-color));

    position: relative;
    display: block;    
    padding-inline-start: calc(var(--ul-bullet-width) + 1rem);
    padding-bottom: var(--_ul-li-padding, 1rem);
}
ul:is(.square, .circle, .dash, .check, .check-circle, .icon) li:last-child{
    padding-bottom: 0;
}
ul:is(.square, .circle, .dash, .check, .check-circle, .icon) li::before{
    display: inline-block;
    position: absolute;
    /* top: calc(1rem - (var(--ul-bullet-width) / 2)); */
    top: calc(((1rem * 1.4) - var(--ul-bullet-width))  / 2);
    right: 0;
    z-index: 2;

    width: var(--ul-bullet-width);
    height: var(--ul-bullet-width);
    background: var(--secondary-grade, var(--secondary));
    content: "";    
}

[dir="ltr"] ul:is(.square, .circle, .dash, .check, .check-circle, .icon) li::before,
[dir="ltr"] ul[dir="ltr"]:is(.square, .circle, .dash, .check, .check-circle, .icon) li::before{
    right: auto;
    left: 0;
}

ul.circle li::before{
    border-radius: 50%;
}
ul.dash li{
    padding-inline-start: calc(14px + 1rem);
}
ul.dash li::before{
    top: 12px;
    width: 14px;
    height: 4px;
    border-radius: 2px;
}


ul.timeline li:not(:last-child){
    padding-bottom: 1.5rem;
}
ul.timeline li::before{
    right: calc((var(--ul-bullet-width) / 2) * -1);
}
[dir="ltr"] ul.timeline li::before{
    right: auto;
    left: calc((var(--ul-bullet-width) / 2) * -1);
}

ul.timeline li::after{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    border-right: var(--ul-timeline-width) solid var(--ul-timeline-color);
    content: "";
}
[dir="ltr"] ul.timeline li::after,
ul[dir="ltr"].timeline li::after{
    right: auto;
    left: 0;
}


ul.timeline:is(.circle, .square) li::before{
    background: var(--ul-timeline-bullet-bg);
    border: var(--ul-timeline-width) solid var(--ul-timeline-bullet-color);
}

ul.check{
    --ul-icon: url(../img/check-white.svg);
    --ul-icon-color: var(--txt-color, #333);
}
ul.check li,
ul.icon li{
    padding-inline-start: 24px;
}
ul.check li::before,
ul.icon li::before{
    top: 2px;
    z-index: 2;

    display: flex;
    justify-content: start;
    align-items: center;

    width: 16px;
    height: 16px;

    background: var(--ul-icon-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: var(--ul-icon);
    mask-image: var(--ul-icon);
}


ul.check-circle li{
    padding-inline-start: 32px;
}
ul.check-circle li::before{
    top: 0;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 24px;
    height: 24px;
    border-radius: 50%;

    background: transparent url(../img/check-white.svg) center no-repeat;
    background-size: 14px 14px;
    border: var(--border, rgb(0 0 0 / 9%));    
}
ul.check-circle li::after{
    position: absolute;
    top: 0;
    right: -4px;
    display: block;
    width: 24px;
    height: 24px;
    background: var(--primary-grade, var(--primary, rgb(0 0 0 / 15%)));
    border-radius: 50%;
    content: "";
    z-index: 1;
    opacity: 0;
    transform: scale(0);
    transition: all .15s ease-in-out;
}
[dir="ltr"] ul.check-circle li::after,
ul[dir="ltr"].check-circle li::after{
    right: auto;
    left: -4px;
}

ul.check-circle li:is(:hover, :focus)::after{
    opacity: 1;
    transform: scale(1);
}
ul.check-circle li:is(:hover, :focus)::before{
    background: #fff;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 14px 14px;
    mask-size: 14px 14px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(../img/check-white.svg);
    mask-image: url(../img/check-white.svg);
}


ul.icons i{
    --icon-size: 1.1rem;
    width: 1.1rem;
    margin: 0;
    text-align: center;
    margin-inline-end: 15px;
}

ul.striped li{
    padding-block: .5rem;
}
ul.striped li:not(:last-child) {
    border-bottom: var(--border);
}
ul.striped > a{
    border-radius: 0;
}

ul.links li{
    padding: 0;
}
ul.links a{
    display: block;
    padding: .35rem .75rem;
    border-radius: 0;
}

ul.hover li:hover{
    background-color: var(--ul-hover-bg, var(--light, #f5f5f5));
}

ul.icon.x li::before{
    --ul-icon: url(../img/x.svg);
    --ul-icon-color: var(--danger, #ff0000);
}

/* Icon Colors */
ul.icon-color-success{ --ul-icon-color: var(--success) }
ul.icon-color-danger{ --ul-icon-color: var(--danger) }
ul.icon-color-warning{ --ul-icon-color: var(--warning) }
ul.icon-color-info{ --ul-icon-color: var(--info) }
ul.icon-color-primary{ --ul-icon-color: var(--primary) }
ul.icon-color-secondary{ --ul-icon-color: var(--secondary) }
ul.icon-color-dark{ --ul-icon-color: var(--dark) }
ul.icon-color-light{ --ul-icon-color: var(--light) }


/* :: zajil/zAlert.css */
.zAlert:is(.success, .danger, .info, .warning) > div{
    width: 80px;
    height: 80px;
    border: 4px solid var(--color, #333);
    border-radius: 50%;
    padding: 0;
    position: relative;
    box-sizing: content-box;
    margin: 25px auto 20px;
    overflow: hidden;

    -webkit-animation: pulseWarning 0.75s infinite alternate;
    animation: pulseWarning 0.75s infinite alternate;
}

.zAlert + div.modal-action-msg{
  display: flex;
  justify-content: space-between;
  flex-flow: column wrap;
  align-items: center;
  align-content: center;
  text-align: center;
  gap: 1rem;

  font-size: 1.1rem;
}
.zAlert + div:not([class]){
  text-align: center;
  font-size: 1.1rem;
}

/* Success */
.zAlert-s {
  --color: var(--success, #a5dc86);
  --color-hover: var(--success-hover, #c2e7ac);
}
.zAlert-s::before, 
.zAlert-s::after {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 60px;
    height: 120px;
    /* background: var(--section-bg, #fff); */
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.zAlert-s::before {
    border-radius: 120px 0 0 120px;
    top: -7px;
    left: -33px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 60px 60px;
    transform-origin: 60px 60px;
}
.zAlert-s::after {
    border-radius: 0 120px 120px 0;
    top: -11px;
    left: 30px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 60px;
    transform-origin: 0 60px;
    -webkit-animation: rotatePlaceholder 4.25s ease-in;
    animation: rotatePlaceholder 4.25s ease-in;
}

.zAlert-s_line {
    height: 5px;
    background-color: var(--color);
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 2;
}
.zAlert-s_line--long {
    width: 47px;
    right: 8px;
    top: 38px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: animateSuccessLong .75s;
    animation: animateSuccessLong .75s;
}
.zAlert-s_line--tip {
    width: 25px;
    left: 14px;
    top: 46px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-animation: animateSuccessTip .75s;
    animation: animateSuccessTip .75s;
}
.zAlert-s__hide-corners {
    width: 5px;
    height: 90px;
    /* background-color: #fff; */
    padding: 1px;
    position: absolute;
    left: 28px;
    top: 8px;
    z-index: 1;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Danger/Error */
.zAlert-e {
  --color: var(--danger, #f27474);
  --color-hover: var(--danger-hover, #f6a2a2);
  border: 2px solid var(--color);
  width: fit-content;
  border-radius: 50%;
  margin-inline: auto;
}
.zAlert-e__x-mark {
    position: relative;
    display: block;
    width: 80px;
    height: 80px;

    -webkit-animation: animateXMark .5s;
    animation: animateXMark .5s;
}
.zAlert-e_line {
    position: absolute;
    height: 5px;
    width: 47px;
    background-color: var(--color);
    display: block;
    top: 37px;
    border-radius: 2px;
}
.zAlert-e_line-r {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 16px;
}
.zAlert-e_line-l {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 17px;
}

/* Warning */
.zAlert-w,
.zAlert-i{
  --color: var(--warning, #f8bb86);
  --color-hover: var(--warning-hover, #f8bb86);
}
.zAlert-i{
  --color: var(--info, #0dcaf0);
  --color-hover: var(--info-hover, #3dd6f5);
}

.zAlert-w__body,
.zAlert-i__body {
    width: 5px;
    height: 47px;
    top: 10px;
    border-radius: 2px;
    margin-left: -2px;
}
.zAlert-w__body,
.zAlert-w__dot,
.zAlert-i__body,
.zAlert-i__dot {
    position: absolute;
    left: 50%;
    background-color: var(--color);
}
.zAlert-w__dot,
.zAlert-i__dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: -4px;
    bottom: -11px;
}

/* Success */
@keyframes rotatePlaceholder {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  to {
    transform: rotate(-405deg);
  }
}
@keyframes animateSuccessTip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  to {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animateSuccessLong {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }
  to {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

/* Danger */
@keyframes animateDangerIcon {
  0% {
    -webkit-transform: rotateX(100deg);
    transform: rotateX(100deg);
    opacity: 0;
  }
  to {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes animateXMark {
  0% {
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  50% {
    transform: scale(0.4);
    margin-top: 26px;
    opacity: 0;
  }
  80% {
    transform: scale(1.15);
    margin-top: -6px;
  }
  to {
    transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}

/* Warning */
@keyframes pulseWarning {
  0% {
    border-color: var(--color-hover, #f8d486);
  }
  to {
    border-color: var(--color, #f8bb86);
  }
}


/** mailSent **/
.zAlert:is(.mailOpen, .mailClose){
  position: relative;
  height: 260px;
  --animation-direction: normal;
}
.zAlert.mailClose{
  height: 220px;
  --animation-direction: reverse;
}

.letter-image{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  
}
.animated-mail {
  position: absolute;
  height: 150px;
  width: 200px;
  transition: 0.4s;
  animation: insert-mail .4s ease-in-out .2s forwards;
  animation-direction: var(--animation-direction);
}
.mailClose .animated-mail{
  transform: translateY(50px);
}

.animated-mail .body {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 200px;
  border-color: transparent transparent #e95f55 transparent;
  z-index: 2;
}
.animated-mail .top-fold {
  position: absolute;
  top: 50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100px 0 100px;
  transform-origin: 50% 0%;
  border-color: #cf4a43 transparent transparent transparent;

  transition: transform 0.4s, z-index 0.2s 0.4s;
  z-index: 2;
  animation: insert-mail-top-fold .4s ease-in-out .1s forwards;
  animation-direction: var(--animation-direction);
}
.mailClose .top-fold{  
  animation: insert-mail-top-fold .4s ease-in-out .6s forwards;
  animation-direction: var(--animation-direction);
  transform: rotateX(180deg);
  z-index: 0;
}

.animated-mail .back-fold {
  position: absolute;
  bottom: 0;
  width: 200px;
  height: 100px;
  background: #cf4a43;
  z-index: 0;
}
.animated-mail .left-fold {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent #e15349;
}
.animated-mail .letter {
  left: 20px;
  bottom: 0px;
  position: absolute;
  width: 160px;
  height: 60px;
  background: #f2f2f2;
  z-index: 1;
  overflow: hidden;
  transition: 0.4s 0.2s;
  animation: insert-mail-letter .4s ease-in-out .6s forwards;
  animation-direction: var(--animation-direction);
}
.mailClose .letter{
  height: 180px;
  animation: insert-mail-letter .4s ease-in-out .1s forwards;
  animation-direction: var(--animation-direction);
}

.animated-mail .letter .letter-border {
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
}
.animated-mail .letter .letter-title {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 40%;
  background: #cb5a5e;
}
.animated-mail .letter .letter-context {
  margin-top: 10px;
  margin-left: 5px;
  height: 10px;
  width: 20%;
  background: #cb5a5e;
}
.animated-mail .letter .letter-stamp {
  margin-top: 30px;
  margin-left: 120px;
  border-radius: 100%;
  height: 30px;
  width: 30px;
  background: #cb5a5e;
  opacity: 0.3;
}

.letter-image .shadow {
  position: absolute;
  left: 50%;
  top: 170px;  
  width: 400px;
  height: 30px;
  transition: 0.4s;
  transform: translateX(-50%);
  border-radius: 100%;
  background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

  animation: insert-mail-shadow 0.4s ease-in-out forwards;
  animation-direction: var(--animation-direction);
}
.mailClose .shadow{
  top: 200px;
  width: 250px;
}

@keyframes insert-mail{
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50px);
  }
}
@keyframes insert-mail-top-fold{
  0% {
    transform: rotateX(0);
    z-index: 2;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 0;
  }
}
@keyframes insert-mail-letter{
  0% {
    height: 60px;
  }
  100% {
    height: 180px;
  }
}
@keyframes insert-mail-shadow{
  0% {
    top: 170px;
    width: 400px;
  }
  100% {
    top: 200px;
    width: 250px;
  }
}
/* 
.letter-image:hover .animated-mail {
  transform: translateY(50px);
}
.letter-image:hover .animated-mail .top-fold {
  transition: transform 0.4s, z-index 0.2s;
  transform: rotateX(180deg);
  z-index: 0;
}
.letter-image:hover .animated-mail .letter {
  height: 180px;
}
.letter-image:hover .shadow{
  top: 200px;
  width: 250px;
} */




/* Trash */
.zAlert-del .fill-danger{
  fill: var(--danger, red) !important;
}

.zAlert-del svg #Lid {
  animation-duration: 1.5s;
  animation-iteration-count: 2;
  animation-name: openLid;
  transform-origin: 0% 100%;
  animation-delay: 1s;
}

.zAlert-del svg #Trash {
  animation-duration: 1.5s;
  animation-iteration-count: 2;
  animation-name: throwTrash;
  animation-delay: 1s;
}

@keyframes openLid {
  0% {
    transform: rotate(0deg) translateX(0px) translateY(0px);
  }
  50% {
    transform: rotate(-18deg) translateX(-2px);
  }
  100% {
    transform: rotate(0deg) translateX(0px) translateY(0px);
  }
}

@keyframes throwTrash {
  from {
    transform: translateX(0px) translateY(0px);
  }
  to {
    transform: translateX(-40px) translateY(25px);
  }
}
/* :: header/0.css */
#r-header{
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;    
    background: var(--header-bg, #fff);
    box-shadow: var(--box-shadow-xlg, var(--box-shadow));
    z-index: 900;
}
.header-content{
    line-height: var(--h-logo-height, 40px);
    padding-block: 1rem;
}

#r-header .top-bar{
    text-align: center;
    color: #fff;
    background: var(--dark);
    padding: .5rem 0;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#r-header .top-bar:empty{
    display: none;
}

/* Fixed Header */
#r-header.f-header{
    position: fixed;
    animation: slideIn 0.5s ease forwards;
    /* animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; */
}
#r-header.f-header .header-content{
    padding-block: .75rem;
}
@media print{
    #r-header.f-header{
        position: static;
        border-bottom: var(--border);
    }
}
@keyframes slideIn {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
@keyframes fadeInDown {
    /* from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    } */

    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/* #r-header:not(.f-header) [data-reveal]{
    display: none;
} */

/** header items **/
#btn-app-menu{
    display: none;
    font-size: 2rem;
    margin-inline-start: var(--h-menu-margin, 20px);
    cursor: pointer;
}
#btn-app-menu::before{
    --size: 1em;
    --icon: url(../img/menu.svg);
    --mask: var(--txt-color);

    display: inline-block;
    width: var(--size);
    height: var(--size);
    content: "";
    vertical-align: middle;

    background: var(--icon) center;
    background-size: 100%;
}
@supports (mask-image: none) {
    #btn-app-menu::before{
        background: var(--mask);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        -webkit-mask-image: var(--icon);
        mask-image: var(--icon);
    }
}

a.site-logo{
    display: inline-block;
    height: var(--h-logo-height, 40px);
    width: var(--h-logo-width, 160px);
    background-position: center var(--align);
    background-size: contain;
    background-repeat: no-repeat;
}
img.site-logo,
.site-logo img{
    display: inline-block;
    height: var(--h-logo-height, 40px);
    width: var(--h-logo-width, 160px);
    object-fit: contain;
    object-position: var(--align, right);
}


/** header menu (main links in header) **/
.h-menu{
    
}
.h-menu > li{
    position: relative;
    display: inline-block;
    margin: 0;
}
/* .h-menu a{
    color: var(--txt-color);
} */
.h-menu > li > a{
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all .15s ease-in-out;
}


.h-menu > li a[data-menu]::after{
    margin-inline-start: 10px;
    transition: transform .3s ease-in-out;

    --size: .6rem;
    --icon: url(../img/chevron-down.svg);
    --mask: var(--primary, blue);

    display: inline-block;
    width: var(--size);
    height: var(--size);
    content: "";
    vertical-align: middle;

    background: var(--icon) center;
    background-size: 100%;
}
@supports (mask-image: none) {
    .h-menu > li a[data-menu]::after{
        background: var(--mask);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        -webkit-mask-image: var(--icon);
        mask-image: var(--icon);
    }
}

.h-menu > li a[data-menu]:is(:hover, :focus)::after,
.h-menu .openedMenu[data-menu]::after{
    --mask: var(--third);
}
.h-menu .openedMenu[data-menu]::after{
    transform: rotate(180deg);
}

/* sub menu 
.h-menu ul{
    display: none;
    width: 250px;

    position: absolute;
    top: 35px;
    background-color: var(--glassyBg);
    box-shadow: var(--box-shadow);
    border-radius: var(--radius, 10px);
    padding: 15px;

    backdrop-filter: blur(9px);
    z-index: 100;
    margin-right: -20px;
}
.f-header .h-menu ul{
    background-color: var(--headerBg);
}
.h-menu ul a{
    display: block;
    padding: 10px 0;
    border-radius: 5px;
    color: var(--txt-color);
    border: 1px solid transparent;
    transition: all .1s ease-in-out;
}
.h-menu ul a:is(:hover, :focus){
    color: var(--a);
}

.h-menu ul a{
    padding: 7px 10px;
    border-radius: 0;
}
.h-menu ul li:not(:last-child) a{
    border-bottom: var(--border);
}
.h-menu ul a:is(:hover, :focus){
    font-weight: 700;
}


/* header aside ( account buttons || account icons (avatar, notifications, mail ...) ) */
.h-aside{
    position: relative;
}

/* account signin/up */
#r-header .account-btns{
    line-height: 1;
}
#r-header .btn.transparent{
    /* width: 100px; */
    color: var(--txt-color);
    text-shadow: none;
}
#r-header .btn.transparent:is(:hover, :focus){
    color: var(--a);
    /* font-weight: 700; */
}
#r-header .btn.transparent:is(:hover, :focus) i{
    color: var(--primary);
}




/* user avatar in header */
.av-h{
    --width: 40px;
    vertical-align: bottom;
}
/* .openedMenu .av-h{
    border-color: var(--a);
} */


/* user panel 
#r-header ul span[class^="counter-"]{
    left: -9px;
    top: 5px;
    line-height: 1;
    padding: 3px 6px 2px;
    border: 2px solid #fff;
}
body[dir="ltr"] #r-header span[class^="counter-"]{
    left: auto;
    right: -9px;
}
*/








/* :: header/panel.css */
/** 
 * Header Panels Common 
 * (sub-links, u-panel, notifications, quick-search-suggestions, cart-items) 
 * *************************************************************************
 * .h-panel can take these classes:
 * .no-scroll
 * .sm , .lg , .width100
 * .just-links
 * .striped

 
 ***/
.h-panel{
    --h-panel-bg: var(--_h-panel-bg, #fff);
    --h-panel-radius: var(--_h-panel-radius, 0);
    --h-panel-a: var(--_h-panel-a, var(--txt-color));
    --h-panel-a-hover: var(--_h-panel-a-hover, var(--a));
    --h-panel-bg-hover: var(--_h-panel-bg-hover, #f9f9f9);
    --h-panel-hr: var(--_h-panel-hr, var(--border));


    position: absolute;
    top: 35px;
    left: 0;
    transform: translateX(-25px);

    min-width: 220px;
    min-height: 54px;
    background-color: var(--h-panel-bg);
    background-image: url(../img/loading.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 46px;
    box-shadow: var(--box-shadow);
    border-radius: var(--h-panel-radius, 5px);
    display: none;
    z-index: 800;
    line-height: 1.5;

    font-size: .8rem;
    /* font-weight: var(--semi-bold, 500); */
    overflow: hidden;
}
[dir="ltr"] .h-panel{
    right: 0;
    left: auto;
    transform: translateX(25px);
}
.dark-mode .h-panel{
    box-shadow: none;
}

/* Sizes */
.h-panel.sm{
    min-width: 130px;
    transform: translateX(10px);
}
.h-panel.lg{
    width: 100vw;
    max-width: 750px;
    font-size: 1rem;
}
.h-panel.width100{
    max-width: unset;
    transform: translateX(0);
    font-size: 1rem;
}


/* Container & no-scroll */
.h-panel .container{
    background: var(--h-panel-bg);
    border-radius: var(--h-panel-radius);
    padding: 10px;
    /* padding-inline-end: 5px; */
}
.h-panel.lg .container{
    padding: 20px;
    padding-inline-end: 10px;
}
.h-panel .container > *{
    max-height: calc(100vh - 95px);
    overflow: auto;
    /* padding-inline-end: 5px; */
}

.h-panel.no-scroll .container{
    --radius-sm: 0; /* to remove radius from links */
    padding: 0;    
}
.h-panel.no-scroll .container > *{
    max-height: unset;
    padding-inline-end: 0;
}

.h-panel li.line{
    border-bottom: var(--h-panel-hr);
    padding-bottom: 7px;
    margin-bottom: 7px;
}


/* Striped */
/* .h-panel.striped li:not(:last-child){
    border-bottom: var(--h-panel-hr);
    padding: 0;
} */


/* Links 
.h-panel a:not(.btn) {
    color: var(--h-panel-a);
}

.h-panel.just-links a:not(.btn){
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 4px;

    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    transition: all .2s ease;
}

.h-panel.just-links a:not(.btn):is(:hover, :focus){
    color: var(--h-panel-a-hover);
    background: var(--h-panel-bg-hover, var(--light));
    text-decoration: none;
}

.h-panel a.see-all{
    text-align: center;
    font-size: var(--h4);
    font-weight: 700;
    padding: 10px 0;
    background-color: var(--header-bg);
    color: var(--secondary);
}
.h-panel a.see-all:is(:hover, :focus){
    font-weight: var(--bold, 700);
    padding: 10px 0;
    color: var(--primary);
}
*/


/* Quick Search Suggestions 
.h-panel .img, 
.qs_results img{
    float: left;
    width: 65px;
    height: auto;
    max-height: 65px;
    border-radius: 3px;
}
.qs_results .t{
    display: block;
    width: calc(100% - 70px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.qs_results .p{
    display: block;
    font-size: .9rem;
    color: var(--success);
}
*/




.h-panel .no-results{
    text-align: center;
    font-size: 1.2rem;
}
.h-panel .no-results::before{
    display: inline-block;
    margin-inline-end: 8px;

    --size: 1em;
    --icon: url(../img/triangle-alert.svg);
    --mask: var(--warning);

    display: inline-block;
    width: var(--size);
    height: var(--size);
    content: "";
    vertical-align: middle;

    background: var(--icon) center;
    background-size: 100%;
}
@supports (mask-image: none) {
    .h-panel .no-results::before{
        background: var(--mask);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100%;
        mask-size: 100%;
        -webkit-mask-image: var(--icon);
        mask-image: var(--icon);
    }
}


/** qSearch > Quick Search 
.qSearch.loading:not([data-show0rmsg="false"]) .h-panel{
    display: block;
}

.qs_results{
    width: 100%;
    max-width: 400px;
}
.qs_results::before{
    right: 35px;
    left: auto;
}
.qs_results a:first-child{
    border-top-right-radius: var(--radius);
    border-top-left-radius: var(--radius);
}
.qs_results a:last-child{
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}
*/


/* User Links Panel */
.u-panel{
    background: var(--h-panel-bg);
}
.u-panel li:last-child a:is(:hover, :focus) i{
    color: var(--danger);
    --mask: var(--danger);
}
.u-panel a:not(.btn) i{
    width: 34px;
    --icon-size: 20px;
    margin-inline-end: 0;
    text-align: center;
    --mask: var(--gray, var(--txt-color));
}
.u-panel a:not(.btn):is(:hover, :focus) i{
    --mask: var(--h-panel-a-hover);
}
.dark-mode .u-panel a:not(.btn):is(:hover, :focus),
.dark-mode .u-panel a:not(.btn):is(:hover, :focus) i{
    color: #fff;
    --mask: #fff;
}

.u-panel span[class^="counter-"]{
    position: static;
    margin-inline-start: auto;
}

/* :: xt/darkModeBtn.css */
/* 
toggle button 

<input type="checkbox" name="dark-mode" class="dm-tgl" aria-label="Dark Mode" role="switch" title="Toggle Dark Mode">
*/
.dm-tgl,
.dm-tgl:focus,
.dm-tgl:read-only{
    --size: var(--dm-icon-size, 20px);
    --ray-size: calc(var(--size) * -0.4);
    --offset-orthogonal: calc(var(--size) * 0.65);
    --offset-diagonal: calc(var(--size) * 0.45);


    /* transform: scale(.75); */
    color: var(--dm-icon-color, var(--txt-color, #999));
    box-shadow: inset calc(var(--size) * .33) calc(var(--size) * -.25) 0 !important;

    background-color: transparent !important;    
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    cursor: pointer;
    width: var(--size);
    height: var(--size);
    border-radius: 999px;
    transition: all .5s, opacity .15s ease-in-out;
    opacity: .8;
}
.dm-tgl:checked,
.dm-tgl:checked:focus-visible{
    color: var(--warning, #fa0);
    box-shadow: inset 0 0 0 var(--size),calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),var(--offset-orthogonal) 0 0 var(--ray-size),0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),0 var(--offset-orthogonal) 0 var(--ray-size),calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size) !important;
}
.dm-tgl:is(:hover ,:focus-visible){
    opacity: 1 !important;
}


/* :: xt/linkLineUnder.css */
/* line-under: background border */
.line-under{
    position: relative;
    display: inline-block;
}
.line-under::before{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(45deg, var(--secondary), var(--secondary-hover));
    content: "";
    transition: all .15s ease-in-out;
}
:is(:hover, :focus) > .line-under::before,
.line-under:is(:hover, :focus)::before{
    width: 100%;
    left: 0;
}
/* :: xt/lineunder.css */
.lineunder::after{
    display: block;
    width: 100%;
    height: 30px;
    content: "";

    background: var(--secondary);
    mask-image: url(../img/underline.svg);
    mask-position: bottom right;
    mask-repeat: no-repeat;
    mask-size: contain;
}
.lineunder.dir-ltr::after,
.lineunder[dir="ltr"]::after,
[dir="ltr"] .lineunder::after{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);

    -ms-filter: "FlipH";
    filter: FlipH;    
}
.lineunder.center::after{
    background-position: bottom center;
    mask-position: bottom center;
}
/* :: forms/0.css */
/* selectInput
<div class="selectInput small-select">
    <select name="by">
        <?php
        echo str_replace('"'.$by.'"', '"'.$by.'" selected', '<option value="email" selected>Email</option>
        <option value="phone">Phone</option>
        <option value="whatsapp">Whatsapp</option>');
        ?>                       
    </select>

    <input type="text" name="contact" id="contact" aria-required="true" value="<?php if (isset($contact['phone'])) { echo $contact['phone']; }elseif (isset($contact['email'])) { echo $contact['email']; } ?>" maxlength="75" dir="ltr" required />
</div>

<div class="by contact bubble danger"></div>
*/

/** Form **/
label{
    display: block;
    font-weight: 600;
    margin: 5px 0;
    cursor: pointer;
}

/* .form-row:not([class^="col-"]){
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
} */

input:not([type="radio"], [type="checkbox"]), 
select, textarea, .textarea, button{
    display: block;
    width: 100%;
    max-width: 100%;
    height: var(--input-height, 40px);

    padding: var(--input-padding, 10px);
    color: var(--input-color, var(--txt-color, #6c757d));
    background-color: var(--input-bg, #fff);
    
    font-family: var(--input-font-family, var(--font-main, Arial, sans-serif));
    font-size: var(--input-font-size, var(--font-size, 16px));
    line-height: 1.6;
    
    border: var(--input-border, var(--border));
    box-shadow: var(--input-shadow, initial);
    border-radius: var(--input-radius);
    outline: 0;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 8px 10px;
    background-position: center right 10px;    
    padding-inline-start: 28px;
    cursor: pointer;
}
:is([dir="ltr"], .dir-ltr) select{
    background-position: center left 10px;
}
select:is(:hover, :focus){
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%232b65f8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
.darkMode select{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
}
textarea, 
.textarea{
    min-height: 119px;
}


input:is(:read-only, :disabled),
textarea:is(:read-only, :disabled),
select:disabled{
    background-color: var(--input-disabled-bg, #f5f5f5) !important;
}

input:not([type="radio"], [type="checkbox"]):focus, textarea:focus{
    border: var(--input-focus-border) !important;
    box-shadow: var(--input-focus-shadow) !important;
}
input:not([type="radio"], [type="checkbox"])[readonly]:focus{
    border-color: var(--gray) !important;
}



























/* selectInput */
.selectInput{
    --select-width: 150px;
}
.selectInput::after{
    display: block;
    content: "";
    clear: both;
}
.selectInput select{
    float: var(--align);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: var(--select-width);
    background-color: #e5e5e5;
}
.selectInput input{
    float: var(--align2);
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    width: calc(100% - var(--select-width)) !important;
    border-right: 0 !important;
}

.selectInput.small-select{
    --select-width: 110px;
}




/** validate form **/
input.danger, select.danger, textarea.danger{
    /* background-color: #ffecec !important; */
    border-color: var(--danger) !important;
}
input.danger:focus, select.danger:focus, textarea.danger:focus{
    box-shadow: 0 0 0 3px rgba(245 195 195 / 45%) !important;
}
input.danger + i, select.danger + i, textarea.danger + i{
    --mask: var(--danger) !important;
    opacity: 1 !important;
}
input.success, select.success, textarea.success{
    /* background-color: #e3f8e3 !important; */
    border-color: var(--success) !important;
}
input.success:focus, select.success:focus, textarea.success:focus{
    box-shadow: 0 0 0 3px #b7f1ba !important;
}
input.success + i, select.success + i, textarea.success + i{
    --mask: var(--success) !important;
    opacity: 1 !important;
}

.selectInput:has(input.danger) select{
    /* background-color: #ffecec !important; */
    border-color: var(--danger) !important;
}
.selectInput:has(input.success) select{
    /* background-color: #e3f8e3 !important; */
    border-color: var(--success) !important;
}




/** DatePicker 
If css page direction = rtl, then we use display for hide/show instead of opacity
because when using opacity, page overflow to left will appear

.datepicker {
    display: none;
}
.datepicker.active {
    display: block;
}
**/



/* :: forms/1-input.css */
/** input container (with icon) **/
.input{ position: relative; }

/* for icon or other i tag */
.input i{
    position: absolute;
    top: 0;
    
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    
    height: var(--input-height, 40px);
    transition: all 0.1s ease-in-out;
    margin: 0;

    font-family: var(--input-font-family, Tahoma);
    font-size: var(--input-font-size, 1rem);
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}
.input .ico{
    flex-flow: column wrap;
    right: 0px;
    width: 40px;

    --size: 18px;
    --mask: var(--_mask, #999);
    opacity: .7;
}
[dir="ltr"] .input .ico,
.input[dir="ltr"] .ico{
    right: auto;
    left: 0px;
}

.input input{
    padding-right: 40px;
}
[dir="ltr"] .input input,
.input[dir="ltr"] input{
    direction: ltr;
    text-align: left;
    padding-right: 11px;
    padding-left: 40px;
}

.input input:focus ~ .ico{
    --mask: var(--primary);
    opacity: 1;
}

/* hidden input
.input input.hidden ~ i{
    display: none !important;
} */
/* :: forms/2-pwd.css */
/* 
 * password
 
<div class="input pwd">
    <input type="password" name="pwd" placeholder="<?php echo $lang['pwd']; ?>" autocomplete="new-password" required />
    <i class="mi-fa--r--lock-alt" data-m></i>
    <i class="mi-far-eye" data-pwd-visible="false" data-m></i>
    <i class="mi-far-eye-slash" data-pwd-visible="true" data-m></i>

    <div class="pwd_score"><b></b><b></b><b></b><b></b><b></b></div>
</div>
*/
.input.pwd input{
    padding-inline: 40px;
    margin-bottom: 5px;
}

.input i[data-pwd-visible]{    
    right: auto !important;
    left: 16px !important;
    cursor: pointer;
}
[dir="ltr"] .input i[data-pwd-visible]{    
    right: 16px !important;
    left: auto !important;    
}

.input i[data-pwd-visible]:is(:hover, :focus){
    opacity: 1;
}

.input.pwd input[type="password"] ~ i[data-pwd-visible="true"],
.input.pwd input[type="text"] ~ i[data-pwd-visible="false"]{
    display: none;
}

.pwd_score{
    display: flex;
    gap: 5px;
    /* margin-bottom: .5rem; */
}
.pwd_score > *{
    flex-grow: 1;
    height: 5px;
    background: var(--light, #eee);
    border-radius: var(--radius);
}
.pwd_score[data-score="1"] :first-child{
    background-color: var(--danger);
}
.pwd_score[data-score="2"] :first-child,
.pwd_score[data-score="2"] :nth-child(2){
    background-color: var(--warning);
}
.pwd_score[data-score="3"] :first-child,
.pwd_score[data-score="3"] :nth-child(2),
.pwd_score[data-score="3"] :nth-child(3){
    background-color: var(--success);
}
.pwd_score[data-score="4"] > *,
.pwd_score[data-score="5"] > *{
    background-color: var(--success);
}
.pwd_score[data-score="4"] :last-child{
    background-color: var(--light, #eee);
}
/* :: forms/3-phone-codes.css */
/*
 * phone (country code) ...
 
<div class="input phone">
    <input type="text" name="phone" autocomplete="off" placeholder="<?php echo $lang['urPhone']; ?>" data-placeholder-align="<?php echo $lang['align']; ?>" maxlength="20" dir="ltr">
    <i class="mi-fa--mobile-alt" data-m></i>

    <?php echo '<i><img class="updateCountryFlag" src="templates/img/flags/'.$user['country'].'.svg" alt="'.$user['country'].'"><span class="updateCountryPhone">'.$user['phone_prefix'].'</span></i>
    <input type="hidden" name="country" class="updateCountry" value="'.$user['country'].'">
    <input type="hidden" name="phone_prefix" class="updateCountry" value="'.$user['phone_prefix'].'">'; ?>
</div>
<div class="phone bubble danger"></div>
 
*/

.input.phone input{
    direction: ltr;
    padding-right: 40px !important;
    padding-left: 76px !important;
}

.input.phone > i:not(.ico){
    justify-content: flex-start;
    gap: 5px;
    right: auto;
    left: 16px;
    
    width: 60px;
    direction: ltr;
    text-align: left;

    cursor: pointer;

    --size: 18px;
}

.input.phone:has(input[readonly], input[disabled], i[data-disabled]) > i:not(.ico){
    cursor: unset;
}

.input.phone:not(:has(input[readonly], input[disabled], i[data-disabled])):hover > i:not(.ico),
.input.phone input:not([readonly], [disabled]):is(:hover, :focus) ~ i:not(.ico, [data-disabled]){
    color: var(--a);
}
.input.phone i span{
    direction: ltr !important;
}
.input.phone i span:not(:empty)::before{
    content: "+";
}

[dir="ltr"] .input.phone > i.ico{
    display: none;
}



/* countries phones codes */
.phone-codes{
    --input-bg: var(--light-light, var(--light));
    --input-border: 1px solid rgb(0 0 0 / 10%);
    --input-shadow: none;
}

.phone-codes a{
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    padding: 3px 0;
    font-size: 14px;
}
.phone-codes a::after{
    display: inline-block;
    content: "+" attr(data-phone);
    margin-right: auto;
    direction: ltr;
    opacity: .85;
}
.phone-codes a:not(:last-child) {
    border-bottom: var(--border);
}
.phone-codes a:is(:hover, :focus){
    background-color: var(--light-light, var(--light));
    font-weight: 600;
}
.phone-codes a:is(:hover, :focus)::after{
    color: var(--primary);
    opacity: 1;
}
/* :: forms/4-color.css */
.input.color{
    cursor: pointer;
}
.input.color input[type="color"]{
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 1;
}
.input.color i{
    width: calc(var(--input-height) - 10px);
    height: calc(var(--input-height) - 10px);
    background: black;
    margin: 5px;
    border-radius: 50%;
    border: 1px solid rgb(0 0 0 / 20%);
}

/* :: forms/5-copy.css */
/* 
 * input.copy
 
<div class="input copy">
    <input type="text" name="text" value="الحمد لله" readonly>
    <i class="mi-file-copy" data-copy="انسخ" data-copied="تم النسخ"></i>
</div> 
 */

 .input.copy i{
    flex-direction: row;
    align-content: center;
    gap: 5px;

    right: auto;
    left: 0;

    width: 80px;
    font-style: normal;
    font-size: .94em;
    color: var(--gray);
    margin: 0;

    cursor: pointer;
}
.input.copy i::after{
    display: inline-block;
    content: attr(data-copy);
}
[dir="ltr"] .input.copy i,
.input[dir="ltr"].copy i{
    right: 0;
    left: auto;
}
.input.copy input{
    padding-right: 11px;
    padding-left: 90px;
}
[dir="ltr"] .input.copy input,
.input.copy[dir="ltr"] input{
    padding-right: 90px;
    padding-left: 11px; 
}
/* :: forms/6-price.css */
/* 
 * item price
 * 
 
<div class="input price" data-currency="جنيه مصري">
    <input type="text" name="price" placeholder="price" maxlength="10" dir="ltr">
    <i class="mi-fa--dollar-sign" data-m></i>
</div>
*/

.input.price[data-currency]::after{
    position: absolute;
    top: 0;
    left: 11px;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    
    height: var(--input-height, 40px);
    transition: all 0.1s ease-in-out;

    color: var(--gray, #ccc);
    font-size: .94em;
    opacity: .7;

    content: attr(data-currency);
}

[dir="ltr"] .input.price[data-currency]::after,
.input[dir="ltr"].price[data-currency]::after{
    right: 11px;
    left: auto;
}

.input.price input{
    padding-right: 40px !important;
    padding-left: 90px !important;    
}

[dir="ltr"] .input.price input,
.input[dir="ltr"].price input{
    padding-right: 90px !important;
    padding-left: 40px !important;    
}
/* :: forms/9-radio-checkbox.css */
/* checkbox & radio */
.radio, 
.checkbox{
    position: relative;
    display: block;

    --size: 18px;
}
.radio {
    display: inline-block;
    margin-inline-end: var(--margin);
}
.radio label, 
.checkbox label{
    display: inline-block;
    max-width: 100%;
    min-height: var(--size);
    padding-inline-start: calc(var(--size) + 10px);
    margin: 0;
    margin-inline-end: 2rem;
    font-weight: 400;
    cursor: pointer;
}
.radio input, 
.checkbox input{
    position: absolute;
    top: 7px;
    right: 2px;
    box-shadow: none !important;
    opacity: 0;
}
[dir="ltr"] .radio input, 
[dir="ltr"] .checkbox input{
    right: auto;
    left: 2px;
}
.radio .label::before, .checkbox .label::before,
.radio .label::after, .checkbox .label::after{
    content: "";
    position: absolute;
    top: calc(1rem - (var(--size) / 2) - 3px);
    right: 0;
    width: var(--size);
    height: var(--size);
    border: 1px solid #ced4da;
    border-radius: 2px;
    background-color: #fff;
    transition: all .2s;
    text-align: center;
    line-height: 16px;
}
[dir="ltr"] .radio .label::before, [dir="ltr"] .checkbox .label::before,
[dir="ltr"] .radio .label::after, [dir="ltr"] .checkbox .label::after{
    right: auto;
    left: 0;
}
.radio .label::before,
.radio .label::after{
    border-radius: 50% !important;
}
.radio .label::after, 
.checkbox .label::after{
    opacity: 0;
    transform: scale(0);

    /* check-white */
    --icon: url(../img/check-white.svg);
    width: var(--size);
    height: var(--size);
    content: "";

    background: var(--icon) center no-repeat;
    background-color: var(--success);
    border-color: var(--success);
    
    background-size: calc(var(--size) - 4px);
}
.checkbox input:checked+.label::after,
.radio input:checked+.label::after{
    opacity: 1;
    transform: scale(1);
}
.radio .label::after{
    /* circle-white */
    --icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48Y2lyY2xlIGN4PSIzMiIgY3k9IjMyIiByPSIzMCIgZmlsbD0iIzQzZDQ5MCIvPjwvc3ZnPg==");
    background-color: #fff;
    background-size: calc(var(--size) - 4px);
    border-color: #ced4da;
}
/* :: forms/99.selectize.css */
.selectize-control.single .selectize-input, 
.selectize-control.single .selectize-input input,
.selectize-input.full{
    height: var(--input-height, 40px);

    padding: var(--input-padding, 10px);
    color: var(--input-color, var(--txt-color, #6c757d));
    background-color: var(--input-bg, #fff);
    
    font-family: var(--input-font-family, var(--font-main, Arial, sans-serif));
    font-size: var(--input-font-size, var(--font-size, 16px));
    line-height: 1.6;
    
    border: var(--input-border, var(--border));
    box-shadow: var(--input-shadow, initial);
    border-radius: var(--input-radius);
}
/* :: forms/alert.css */
/* Example
<div class="alert danger dismissable">
    <button type="button" class="close">x</button>
    <p>Hello World!</p>
</div>
*/

.alert{
    --txt-color: #fff;
    --mask: var(--txt-color);

    position: relative;
    padding: 0.75rem 1.25rem;
    /* margin-bottom: 1rem; */
    color: var(--txt-color);
    border-radius: var(--radius);
}
.alert:empty{
    display: none;
}
.alert a:not(.btn){
    font-weight: 700;
    color: var(--txt-color);
    text-decoration: underline;
}
.alert hr{
    border-top: 1px solid rgba(0,0,0, .25);
    border-bottom: 1px solid rgba(255,255,255, .75);
}
.alert.dismissible{
    padding-left: 3.90625rem;
}
.alert .close{
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem 1.25rem;
    color: inherit;
    opacity: .4;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    font-size: 1.40625rem;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
}
.alert .close:hover{
    opacity: 1;
}

.alert.primary{
    background-color: var(--primary);
}
.alert.secondary{
    background-color: var(--secondary);
}
.alert.success{
    background-color: var(--success);
}
.alert.info{
    background-color: var(--info);
}
.alert.warning{
    --txt-color: var(--dark);
    background: var(--warning);
    text-shadow: 0 1px 3px rgb(255 255 255 / 50%);
}


.alert.danger{
    --mask: #f44336;
    --txt-color: #611a15;
    background-color: rgb(253, 236, 234);
    /* background: var(--danger); */
}
.alert.light{
    --txt-color: var(--dark);
    background: var(--light);
}
/* .alert.light a{
    --txt-color: var(--dark);
} */
.alert.dark{
    background: var(--dark);
}
.alert.no-results {
    font-size: 1.2rem;
    text-align: center;
    --txt-color: var(--dark);
    background: #fff;
    text-shadow: 0 1px 3px rgb(255 255 255 / 50%);
    border: 1px solid rgb(0 0 0 / 5%);
    padding-block: 1.75rem;
}
.dark-mode .alert.no-results{
    --txt-color: #fff;
    background: var(--dark);
}

.alert.fixed{
    position: fixed;
    bottom: 0;
    z-index: 100;
}

/* RTL */
[dir="ltr"] .alert.dismissible{
    padding: 0.75rem 1.25rem;
    padding-right: 3.90625rem;
}
[dir="ltr"] .alert .close {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}


/** autosubmit form */
/* form[data-callback="autoSubmit"]{
    position: relative;
} */
form[data-callback="autoSubmit"] .alert{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    z-index: 1000;
}
[dir="ltr"] form[data-callback="autoSubmit"] .alert{
    right: auto;
    left: 1rem;
}
/* :: forms/bubble.css */
/** 
Bubble 

<div class="bubble">
    <i class="icon"></i>
    <div></div>
</div>

<small class="bubble">
    <i class="icon"></i>
    <div></div>
</small>

<div class="bubble x-large outline secondary">
    <div></div>
</div>
**/
.bubble{
    --icon-size: 1.6em;
    --txt-color: #fff;
    --mask: var(--txt-color);
    --bg-color: var(--dark, #333);
    --size: var(--icon-size);
    --gap: .5rem;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap);
    
    padding: 9px 11px;
    background-color: var(--bg-color);
    color: var(--txt-color);
    line-height: 1.5;
    border-radius: var(--input-radius);
    box-shadow: inset 0 -1px 3px -1px rgb(0 0 0 / 10%);
    margin-bottom: .5rem;
}
.bubble:empty,
.bubble:has(> div:empty){
    display: none;
}


.bubble > div{
    width: calc(100% - var(--icon-size) - var(--gap) - 6px);
}
.bubble > i{
    margin-inline-end: 0 !important;
}

.bubble a{
    display: inline-block;
    color: var(--txt-color);
    font-weight: 600;
    border-bottom: 1px solid var(--txt-color);
}


/* Sizes */
.bubble.small,
small.bubble{
    /* --icon-size: .8em; */
    --gap: .33rem;
    font-size: .85rem;
    padding-block: 5px;
}
.bubble.large{
    --icon-size: 2em;
    --gap: .75rem;
    font-size: 1.23rem;
}
.bubble.x-large{
    --icon-size: 3em;
    --gap: .75rem;
    font-size: 1.33rem;
}



/* Colors */
.bubble.primary{ --bg-color: var(--primary); }
.bubble.secondary{ --bg-color: var(--secondary); }
.bubble.success{ --bg-color: var(--success); }
.bubble.info{ --bg-color: var(--info); }
.bubble.warning{
    --mask: var(--warning);
    --txt-color: #6e460c;
    --bg-color: #fdf9ea;
}
.bubble.danger{
    --mask: var(--danger);
    --txt-color: #611a15;
    --bg-color: #fdecea;
}
.bubble.light{ --bg-color: var(--light); }
.bubble.dark{ --bg-color: var(--dark); }


/* Outline */
.bubble.outline{
    --bg-color: var(--bubble-transparent, transparent);
    /* --mask: var(--primary);
    --txt-color: var(--mask); */

    border: 1px solid var(--mask);
    box-shadow: none;
}
.bubble.outline.primary{ --mask: var(--primary); }
.bubble.outline.secondary{ --mask: var(--secondary); }
.bubble.outline.success{ --mask: var(--success); }
.bubble.outline.info{ --mask: var(--info); }
.bubble.outline.warning{ --mask: var(--warning); }
.bubble.outline.danger{ --mask: var(--danger); }
.bubble.outline.light{ --mask: var(--light); }
.bubble.outline.dark{ --mask: var(--dark); }

/* default icons */
.bubble:not(:has(i))::before{
    --icon: url(../img/check.svg);
    --mask: var(--txt-color);

    display: inline-block;
    width: var(--size);
    height: var(--size);
    content: "";
    vertical-align: middle;

    background: var(--mask, #ccc);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);
}

.bubble.info:not(:has(i))::before{
    --icon: url(../img/info.svg);
}
.bubble.danger:not(:has(i))::before{
    --icon: url(../img/x.svg);
}
.bubble.warning:not(:has(i))::before{
    --icon: url(../img/triangle-alert.svg);
}

input ~ .bubble,
.input ~ .bubble{
    margin-top: .25rem;
}
/* :: forms/maxlenmsg.css */
/* Textarea Maximum Chars Message */
.maxlenmsg{
    position: absolute;
    top: -10px;
    left: 30px;
    z-index: 2;
    
    display: inline-block;
    font-size: .85rem;
    line-height: 20px;
    
    background-color: var(--success);
    color: #fff;
    padding-inline: 9px;
    border-radius: 20px;

    opacity: 0;
    /* transform: translateY(calc(var(--input-margin, 9px) * -1 - 10px));
    margin-inline-start: 2rem; */
}
.maxlenmsg em{
    font-style: normal;
}
.maxlen:focus + .maxlenmsg{
    opacity: 1;
}
/* :: forms/small.css */
input.small:not([type="radio"], [type="checkbox"]), 
select.small, 
textarea.small, 
.textarea.small, 
button.small{
    height: auto;
    padding-block: 0;
    font-size: .9rem;
    line-height: 2;
}
/* :: forms/switch.css */
/*
<label class="switch">    
    <input type="checkbox" name="nnn" value="1" checked="" class="dir-rtl">
    <span class="togglemark"></span>

    [[ OPTIONAL: <span class="on">ON</span>
    <span class="off">OFF</span>]]
</label>
*/

/** label switch (on/off) **/
label.switch{
    display: inline-flex;
    flex-flow: row wrap;
    gap: 6px;
    align-items: center;

    width: fit-content;
    margin-bottom: var(--input-margin);
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
label.switch input{
    display: none;
}

label.switch .togglemark{
    direction: ltr;
    position: relative;
    display: inline-block;
    width: 36px;
    height: 18px;
    background: var(--gray, #ddd);
    border-radius: 30px;
    vertical-align: middle;
    overflow: hidden;
}
label.switch:has(input:checked) .togglemark{
    background: linear-gradient(90deg, #3d94d6, #4bc597);
}

label.switch .togglemark::before{
    position: absolute;
    top: 2px;
    left: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #fff;
    border-radius: 50%;
    transition: all .25s ease;
    content: "";
}
label.switch input:checked + .togglemark::before{
    left: 20px;
}

label.switch .on{
    display: none;
}
label.switch:has(input:checked) .on{
    display: inline-block;
}
label.switch:has(input:checked) .off{
    display: none;
}



/* :: forms/uploads.css */
/*
<div class="uploads-container">
    <input type="file" name="file" 
    data-filescontainer=".uploads-container"
    data-btnupload="" 
    data-btnwait=".btn[type='submit']"
    data-allowed="img" 
    data-maxuploads="50" 
    data-imgvidcontainer="1"
    data-callback=""
    class="hidden">

    <div class="uploads"><div class="images" data-upload-msg="إضافة صورة / صور للألبوم" data-upload-btn="#add-property .btn-upload"><?php if (isset($property['images'])) {
        echo ''.$property['images'].'';
    }
    ?></div></div>

    <div class="progress mt-2 hidden">
        <div class="progress-bar bg-striped animated" role="progressbar" style="width: 60px" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"><div class="progress-ratio"></div></div>
    </div>

    <button type="button" class="btn btn-sm inline btn-upload">
        إضافة صورة / صور للألبوم
    </button>
</div>
*/

.uploads:not(.avatar, .cover){
    margin-bottom: var(--input-margin, 10px);
}
.uploads:not(.avatar, .cover):empty{
    display: none;
}
.uploads[data-btnupload]:empty{
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.uploads:not([data-btnupload]):has(.images:empty):has(.files:empty):has(.videos:empty):has(.sounds:empty){
    display: none;
}

.uploads .images{
    border: 1px solid rgb(0 0 0 / 5%);
    background-color: rgb(0 0 0 / 3%);
    border-radius: var(--uploads-radius, 3px);

    /* flex */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;

    gap: 10px;
    padding: 10px;
}
.uploads .images:not([data-upload-msg]):empty{
    display: none;
}

.uploads[data-btnupload]:empty{
    text-align: center;
    border-width: 1px;
    border-style: dashed;
    padding: 10px;
    opacity: .6;
    border-radius: var(--input-radius);
    background-color: rgb(0 0 0 / 5%);
    cursor: pointer;
}
.uploads[data-btnupload]:empty::before{
    display: block;
    content: attr(data-label);
    font-size: 1.25em;

    padding-top: 34px;

    background: url(../img/upload.svg) top center no-repeat;
    background-size: 30px;
}
.uploads[data-btnupload]:empty::after{
    display: block;
    content: attr(data-info);
    font-size: .8em;
    opacity: .85;
}
.uploads:empty:is(:hover, :focus){
    opacity: 1;
}

.uploads .images .imgPreview{
    position: relative;
    width: 107px;
    min-height: 100px;
}
.uploads.cover .images .imgPreview{
    width: 100%;
    min-height: 200px;
}

.uploads .images img{
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: center;
}
.uploads.cover .images img{
    height: 200px;
}

.uploads .imgPreview.vid,
.uploads .imgPreview.gif{
    cursor: pointer;
}

/* Remove X */
.uploads :is(.imgPreview, .file, .snd) i{
    position: absolute;
    top: -7px;
    right: -7px;    
    cursor: pointer;
    line-height: 1;
}
.uploads .file i{
    top: 3px;
    right: 5px;
}

/* check icon */
.uploads :is(.imgPreview, .file, .snd) i::before{
    --size: 24px;
    --icon: url(../img/check-circle.svg);

    display: inline-block;
    width: var(--size);
    height: var(--size);
    content: "";    

    background: var(--icon) center;
    background-size: 100%;
}
.uploads :is(.imgPreview, .file, .snd) i:hover::before,
.uploads :is(.imgPreview, .file, .snd) i:focus::before{
    --icon: url(../img/x-circle.svg);
}



/* :: xt/progressBar.css */
/* Examples
<div class="progress (progress-sm|-lg|-xl|-xxl)" (dir="rtl")>
    <div class="progress-bar-container">
        <div class="progress-bar (bg-info|bg-success|bg-warning...) (bg-striped) (animated)" (style="width: '.$percent.'%;") role="progressbar" aria-valuenow="'.$percent.'" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress-ratio">'.$percent.'</div>
</div>
*/

.progress{
    --progress-height: var(--_progress-height, 8px);

    direction: ltr;

    /*display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;*/

    margin-block: 0.75rem;
}

/* RTL */
.progress[dir="rtl"]{
    direction: rtl;
}

/* Sizes */
.progress-sm{ --progress-height: 5px; }  
.progress-lg{ --progress-height: 11px; }
.progress-xl{ --progress-height: 15px; }
.progress-xxl{ --progress-height: 25px; }

/* Progress bar */
.progress-bar-container{    
    background-color: var(--light, #ddd);
    border-radius: 0.25em;
    overflow: hidden;
    margin-bottom: 5px;
}
.progress-bar{
    height: var(--progress-height);

    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}
.progress-ratio{
    font-size: .875rem;
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar{
        -webkit-transition: none;
        transition: none;
    }
}
/* :: buttons/0.css */
/*
Sizes:
    .btn-sm, .btn-lg, .btn-xlg

Optionps:
    .btn-block, .rounded
*/

:root{
    --btn-icon-size: 22px;
    --btn-upload-icon: url(../img/upload.svg); /* upload-square */
    --btn-del-icon: url(../img/delete.svg);
    --btn-trash-icon: url(../img/trash.svg);
    --btn-approve-icon: url(../img/check-white.svg);
    --btn-edit-icon: url(../img/edit.svg);
    --btn-reArrange-icon: url(../img/arrow-up-down.svg);
    --btn-download-icon: url(../img/arrow-down-to-line.svg);
    --btn-print-icon: url(../img/printer.svg);
}

.btn{
    --color: var(--primary, #0078d4); /* button color > background */
    --color-rgb: var(--primary-rgb, (0, 120, 212));    
    --color-hover: var(--primary-hover, var(--primary));

    --txt-color: #fff;
    --txt-hover: #fff;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5em;
    width: fit-content;

    font-family: var(--input-font);
    font-size: .9375rem;
    line-height: 1.5;

    color: var(--txt-color);
    text-shadow: 1px 1px 3px rgb(0 0 0 / 10%);
    box-shadow: inset 0px 0px 5px 0px rgb(0 0 0 / 10%);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--color);
    background-color: var(--color);
    padding: 0 .95rem;
    height: var(--input-height);
    
    border-radius: var(--input-radius);

    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;    
    text-decoration: none;
    cursor: pointer;
}
a.btn{
    color: var(--txt-color);
}

.btn i,
.btn i::before{
    --icon-size: 1.1em;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;  
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn i,
    .btn i::before{
        -webkit-transition: none;
        transition: none;
    }
}

/* sizes */
.btn-lg,
.btn-xlg{
    height: auto;
    min-height: var(--input-height);

    font-size: 1rem;
    line-height: 2;
}
.btn-xlg{    
    padding: 0.5rem 1rem;
    font-size: 1.15rem;
}
.btn-sm{
    height: auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: inset 0px 0px 3px 0px rgb(0 0 0 / 5%);

    --btn-icon-size: 16px;
}
.btn-block{
    width: 100% !important;
}
.btn-block + .btn-block{
    margin-top: 0.5rem;
}


/* icon & image */
.btn i{
    --mask: var(--txt-color);
    vertical-align: middle;
    margin-inline-end: 0 !important;
}
.btn i[data-m]{
    opacity: .8;
}
.btn:is(:disabled, .disabled) i{
    opacity: .5;
}
.btn:not(:disabled, .disabled):is(:hover, :focus, .active) i{
    --mask: var(--txt-hover);
    opacity: 1;
}










/* outline */
.btn.outline{
    /* --color-hover: #fff; */
    --txt-color: var(--color);
    --txt-hover: #fff;

    background: transparent;
    text-shadow: none;
    box-shadow: none;

    border: 1px solid var(--color);
}
.btn.outline:not(:disabled, .disabled):is(:hover, :focus, .active){
    text-shadow: 0 0 2px rgb(0 0 0 / 33%);
    background: var(--color);
}
.btn.outline:is(:disabled, .disabled){
    background-color: transparent;
}


/* inline
.btn.inline{
    --txt-color: var(--color);
    --txt-hover: var(--color);

    position: relative;

    padding-inline: 0;
    background: transparent;
    text-shadow: none;
    border: 0;
    border-bottom: 1px dashed var(--color-hover, var(--color));
    box-shadow: none;
    border-radius: 0;
    font-weight: 600;
}
.btn.inline:not(:disabled, .disabled):is(:hover, :focus, .active) {
    border-style: solid;
    border-color: var(--color);
} */


/* colors */
.btn.gradient{ border: 0; background: var(--primary-grade); }
.btn.gradient:not(:disabled, .disabled):is(:hover, :focus, .active){
    border: 0;
    background: var(--primary-grade-h);
}

.btn.secondary.gradient{ background: var(--secondary-grade); }
.btn.secondary.gradient:not(:disabled, .disabled):is(:hover, :focus, .active){
    background: var(--secondary-grade-h);
}

.btn.secondary{ 
    --color: var(--secondary);
    --color-rgb: var(--secondary-rgb, (0, 120, 212));
    --color-hover: var(--secondary-hover, var(--secondary));
}

.btn.danger,
.btn-del,
.btn-admin-del,
.btn-reject{ 
    --color: var(--danger); 
    --color-rgb: var(--danger-rgb, (0, 120, 212));
    --color-hover: var(--danger-hover, var(--danger));
}

.btn.warning{ 
    --color: var(--warning); 
    --color-rgb: var(--warning-rgb, (0, 120, 212));
    --color-hover: var(--warning-hover, var(--warning));
}

.btn.success,
.btn-approve{ 
    --color: var(--success); 
    --color-rgb: var(--success-rgb, (0, 120, 212));
    --color-hover: var(--success-hover, var(--success));
}
.btn.info{ 
    --color: var(--info); 
    --color-rgb: var(--info-rgb, (0, 120, 212));
    --color-hover: var(--info-hover, var(--info));
}
.btn.dark{ 
    --color: var(--dark); 
    --color-rgb: var(--dark-rgb, (0, 120, 212));
    --color-hover: var(--dark-hover, var(--dark));
}
.btn.light{ 
    --color: var(--light, (rgb(0 0 0 / 25%))); 
    --color-rgb: var(--light-rgb, (0, 120, 212));
    --color-hover: rgb(0 0 0 / 33%);

    color: #333;
}
.btn.muted{ 
    --color: var(--dark); 
    --color-rgb: var(--light-rgb, (0, 120, 212));
    --color-hover: var(--light-hover, var(--dark));

    color: #333;
}
.btn.muted:not(:hover, :focus){
    opacity: .75;
}


.btn.white{ 
    --color: var(--white, #fff);
    --color-rgb: var(--white-rgb, (255, 255, 255));    
    --color-hover: var(--white-hover, var(--white, #fff));

    --txt-color: var(--primary, #333); 
    --txt-hover: var(--primary-hover, #222); 

    text-shadow: none; 
    /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .04), 0 4px 6px -2px rgba(0, 0, 0, .02);  */
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
    border: var(--input-border, 1px solid #e5e7eb);
}
.btn.white.inline{
    --color: transparent;
    --color-rgb: var(--white-rgb, (255, 255, 255));    
    --color-hover: transparent;
}
/* .btn.white:is(.outline, .inline){
    --txt-color: var(--white);
} */
.btn.white:not(:disabled, .disabled):is(:hover, :focus, .active){
    box-shadow: none !important;
    text-shadow: none !important;
}

/*.btn.white.inline:not(:disabled, .disabled):is(:hover, :focus, .active){
    --txt-hover: var(--white) !important;
}
.btn.white.inline:not(:disabled, .disabled):is(:hover, :focus, .active){
    --mask: var(--white) !important;
}*/


/* pseudo hover & focus */
.btn:hover{
    --color: var(--color-hover);
    color: var(--txt-hover);
}
.btn:is(:focus, .active){
    outline: 0;
    color: var(--txt-hover);
    -webkit-box-shadow: 0 0 0 0.2rem rgba(var(--color-rgb), .25);
    box-shadow: 0 0 0 0.2rem rgba(var(--color-rgb), .25);
}
.btn:is(:disabled, .disabled){
    opacity: 0.65;
    pointer-events: none;
}
.btn.warning:is(:disabled, .disabled) {
    --txt-color: var(--txt-color, #222);
    font-weight: 700;
    text-shadow: none;
}


/* :: buttons/actionButtons.css */
.btn-del,
.btn-del.outline,
.btn-admin-del,
.btn-admin-del.outline{
    --txt-hover: #fff;
}


.btn-upload:not(.avatar, :has(i, svg))::before,
.btn-del:not(:has(i, svg))::before,
.btn-admin-del:not(:has(i, svg))::before,
.btn-edit:not(:has(i, svg))::before,
.btn-reject:not(:has(i, svg))::before,
.btn-approve:not(:has(i, svg))::before,
.btn-reArrange:not(:has(i, svg))::before,
.btn-download:not(:has(i, svg))::before,
.btn-print:not(:has(i, svg))::before{
    --icon: var(--btn-upload-icon);

    display: inline-block;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    content: "";
    vertical-align: middle;
    
    background: var(--txt-color);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: var(--icon);
    mask-image: var(--icon);

    margin-inline-end: 6px;
}
:is(.btn-upload, .btn-del, .btn-admin-del, .btn-edit, .btn-reject, .btn-approve, .btn-reArrange, .btn-download):is(:hover, :focus)::before{
    background: var(--txt-hover, #fff);
}

:is(.btn-del, .btn-admin-del)::before{    
    --icon: var(--btn-trash-icon) !important;
}
:is(.btn-reject)::before{    
    --icon: var(--btn-del-icon) !important;
}
:is(.btn-approve)::before{    
    --icon: var(--btn-approve-icon) !important;
}
:is(.btn-edit)::before{    
    --icon: var(--btn-edit-icon) !important;
}
:is(.btn-reArrange)::before{    
    --icon: var(--btn-reArrange-icon) !important;
}
:is(.btn-download)::before{    
    --icon: var(--btn-download-icon) !important;
}
:is(.btn-print)::before{    
    --icon: var(--btn-print-icon) !important;
}
/* :: buttons/appStore.css */
.btn-appstore-apple,
.btn-appstore-play{
    --mask: #fff;
    --icon-size: 30px;

    direction: ltr;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;

    background-color: rgb(255 255 255 / 4%);
    border-radius: 12px;
    padding: 10px 20px;
    width: 210px;

    transition: all 0.4s ease;
}
.btn-appstore-apple i,
.btn-appstore-play i{
    margin: 0;
}
.btn-appstore-apple span,
.btn-appstore-play span{
    direction: ltr;
    text-align: left;
    margin-left: 20px;
}
.btn-appstore-apple span::before,
.btn-appstore-play span::before{
    display: block;
    color: #BEBDBD;
    font-size: 13px;
    margin-bottom: 5px;
    content: "Download on the";
}
.btn-appstore-play span::before{
    content: "Get it on";
}
.btn-appstore-apple span::after,
.btn-appstore-play span::after{
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    content: "Apple Store";
}
.btn-appstore-play span::after{
    content: "Google Play";
}

[class^="btn-appstore-"].btn-sm{
    padding: 10px;
    width: 175px;
}
[class^="btn-appstore-"].btn-sm span{
    margin-left: 10px;
}

[class^="btn-appstore-"]:is(:hover, :focus){
    background: var(--primary);
}
/* :: buttons/btn-phone.css */
.btn-phone{
    direction: ltr;
    text-align: left;
    
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
}
/* :: buttons/btn-record-voice.css */
/** Audio & Voice Record Button **/
.btn-record-voice{
    border-radius: 100px;
}
.btn-record-voice i{
    font-size: 1rem;
}
.btn-record-voice.loading,
.btn-record-voice.loading:hover,
.btn-record-voice.loading:focus{
    background-color: var(--danger);
    border-color: var(--danger);
    box-shadow: none;
}
.btn-record-voice.loading i{
    color: #fff;
    animation: none !important;
}
.btn-record-voice.loading i::before{
    content: "\f28d" !important;
}
/* :: buttons/favorite.css */
.btn-favorite :is(.add, .remove){
    display: none;    
}
.btn-favorite[data-action="add"] .add{
    display: inline-block;
}
.btn-favorite[data-action="remove"] .remove{
    display: inline-block;
}
/* :: buttons/inline.css */
.btn.inline{
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    --txt-color: var(--a, var(--primary));
    --txt-hover: var(--a-hover, var(--primary-hover));
    text-shadow: none;
    font-weight: 500;
    text-decoration: none;
    height: auto;
}
/* :: buttons/loading.css */
.btn.loading i::before,
.btn.loading:not(:has(i, svg))::before {
    display: inline-block;
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    content: "";
    vertical-align: middle;

    background: var(--txt-color, #333);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: url(../img/loading.svg);
    mask-image: url(../img/loading.svg);
}
.btn.loading:is(:hover, :focus, .active) i::before,
.btn.loading:not(:has(i)):is(:hover, :focus, .active)::before {
    background: var(--txt-hover, #222);
}
/* :: buttons/socials.css */
/* 
Buttons - Socials 

Examples:
<a class="btn-social colored btn-fb" title="بواسطة الفيسبوك" href="signIn.php?social=fb">
    <i class="mi-fab-facebook-f"></i>
</a>

<a class="btn-social btn-gl" title="بواسطة جوجل" href="signIn.php?social=gl">
    <i class="mi-fab-google" data-m></i>
</a>
*/
.btn-fb{ --color: 66, 103, 178; }
.btn-gl{ --color: 221, 75, 57; }
.btn-x{ --color: 17, 17, 17; }
.btn-wa{ --color: 49, 198, 49; direction: ltr; }

.btn-social,
.btn-social:is(:hover, :focus, .active){
    --icon-size: 1.5rem;

    display: inline-flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    /* flex-grow: 1; */

    padding: .5rem 1rem;
    font-size: 1rem;

    color: rgb(var(--input-color, 14, 35, 50));
    background: #fff;
    border: 1px solid #cfd3d6;
    border-radius: 100px;
    box-shadow: none;
    transition: all .1s ease-in-out;
}
.btn-social:is(:hover, :focus, .active){
    color: rgb(var(--color, 14, 35, 50));
    background-color: rgba(var(--color), .1);
}

.btn-social i{
    margin: 0;
}
.btn-social[title]::after{
    display: inline-block;
    /* text-align: center; */
    width: calc(100% - var(--icon-size) - 22px);
    content: attr(title);
}


.colored.btn-social,
.colored.btn-social:is(:hover, :focus, .active){
    --mask: #fff;
    --icon-size: 24px;

    --input-border: 0;
    --input-shadow: 0 3px 15px rgba(var(--color), .1);
    --input-radius: 100px;
    border: 0;

    /* color: rgb(var(--color, 14, 35, 50)); */
    
    padding: 6px;    
}
.colored.btn-social i{
    background-color: rgb(var(--color));
    padding: 4px;
    border-radius: 50%;
}
.btn-social.colored::after{
    text-align: center;
}
.colored.btn-social:is(:hover, :focus, .active){
    background-color: rgba(var(--color), .15);
}

/* :: xt/file.css */
/* files (Files) */
.file{
    --icon: url(../img/file/file.svg);

    display: flex;
    justify-content: space-between;
    align-items: center;

    position: relative;
    direction: ltr;
    text-align: left;
    padding: 2px 34px;
    border-radius: var(--uploads-radius, 3px);
    background-image: var(--icon);
    background-color: rgb(0 0 0 / 3%);
    background-position: center left 7px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    margin: 5px 0;
    border: 1px solid rgb(0 0 0 / 6%);
    font-size: .9rem;
}
a.file,
h2.file{
    padding-right: 10px;
}

h2.file,
.files-lg .file{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-size: 44px 44px;
    padding-left: 60px;
    line-height: 1.6;
    font-weight: 400;
    font-size: 1.25rem;
}

.file b{
    font-weight: 700;
    display: inline-block;
    max-width: calc(100% - 100px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
h2.file b,
.files-lg .file b{
    max-width: 100%;
}

.file::after{
    display: inline-block;
    content: attr(data-size);
    font-size: .9rem;
    opacity: .8;
}

.file[data-ext="rar"]{ --icon: url(../img/file/rar.svg); }
.file[data-ext="pdf"]{ --icon: url(../img/file/pdf.svg); }
.file[data-ext="zip"]{ --icon: url(../img/file/zip.svg); }
.file:is([data-ext="7z"], [data-ext="7zip"]){ 
    --icon: url(../img/file/7z.svg); 
}

.file:is([data-ext="img"], [data-ext="jpg"], [data-ext="jpeg"], [data-ext="gif"], [data-ext="bmp"], [data-ext="png"], [data-ext="webp"]){ 
    --icon: url(../img/file/img.svg); 
}

.file:is(
    [data-ext="mp4"], 
    [data-ext="m4v"], 
    [data-ext="webm"], 
    [data-ext="ovg"]
    ){ 
    --icon: url(../img/file/vid.svg); 
}

.file[data-ext="mp3"]{ --icon:url(../img/file/mp3.svg); }
.file[data-ext="wav"]{ --icon:url(../img/file/wav.svg); }

.file:is(
    [data-ext="doc"], 
    [data-ext="docm"], 
    [data-ext="dot"],
    [data-ext="docx"],
    [data-ext="docb"],
    [data-ext="odt"],
    [data-ext="dotx"]
    ){ 
    --icon: url(../img/file/doc.svg); 
}

.file:is(
    [data-ext="xlsm"], 
    [data-ext="xlsb"], 
    [data-ext="xls"],
    [data-ext="xlsx"],
    [data-ext="xltx"],
    [data-ext="xltm"],
    [data-ext="xlt"]
    ){
    --icon: url(../img/file/xls.svg);
}

.file:is(
    [data-ext="ppt"], 
    [data-ext="pptx"], 
    [data-ext="pptm"],
    [data-ext="potx"],
    [data-ext="ppsx"]
    ){ 
    --icon: url(../img/file/ppt.svg); 
}

.file[data-ext="html"]{ --icon: url(../img/file/html.svg); }
/* :: xt/accordion.css */
.accordion{
    --arrow-width: 8px;
    --padding-inline: 1rem;
    --padding-block: 1.25rem;    
    --margin-btm: 10px;
    
    border-radius: var(--radius, 6px);
    box-shadow: var(--box-shadow);

    overflow: hidden;
}
.accordion:not(:last-child) {
    margin-bottom: var(--margin-btm);
}

.accordion summary{
    position: relative;
    display: block;
    width: 100%;

    font-family: var(--font-h1, var(--font-main));
    /* font-size: 1.2rem; */
    font-weight: var(--bold, 700);
    line-height: 1;

    color: var(--h1-color);
    background: var(--section-bg, #f9fafa);

    padding-block: var(--padding-block);
    padding-inline-start: var(--padding-inline);    
    padding-inline-end: calc(var(--padding-inline) * 2);

    border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
    cursor: pointer;

    transition: height 0.8s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.accordion:not([open]) summary{
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.accordion[open] summary,
.accordion summary:is(:hover, :focus-visible){
    color: var(--a-hover);
}


/** FAQ Arrow **/
.accordion summary i{
    position: absolute;
    top: var(--padding-block);
    left: var(--padding-inline);

    width: var(--arrow-width);
    height: var(--arrow-width);
    transition: transform 0.8s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-top: 2px solid;
    border-right: 2px solid;
    float: var(--align2);

    transform: rotate(135deg);
}
.accordion summary:not(:hover, :focus-visible) i{
    opacity: .8;
}
.accordion:is(:hover, :focus) i,
.accordion[open] summary i{
    border-color: var(--secondary);
}

/* LTR FAQ Arrow */
html[dir="ltr"] .accordion summary i,
[dir="ltr"] > .accordion summary i{
    left: auto;
    right: var(--padding-inline);
}

/* Opened FAQ Arrow */
.accordion[open] summary i{
    transform: rotate(315deg);
}

/* details */
.accordion .collapse{
    background: var(--section-bg, #f9fafa);
    transition: all .8s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.accordion:not([open]) .collapse{
    height: 0px;
}
.accordion p{
    padding: 0 var(--padding-inline) var(--padding-block);
    /* font-size: 1.1rem;
    line-height: 2rem; */
}
/* :: xt/statusSpan.css */
/* status */
:is(span, a).status{
    display: inline-block;
    font-size: .8rem;
    background-color: #555;
    color: #fff;
    padding: 2px 11px;
    border-radius: 20px;
    line-height: 1.5;
    vertical-align: middle;
}
:is(span.status, a.status)::before{
    display: inline-block;
    width: 7px;
    height: 7px;
    content: "";
    border-radius: 5px;
    background-color: rgba(0,0,0, .25);
    margin-inline-end: 6px;
}
:is(span, a).status:empty::before{
    margin: 0;
}

:is(span, a).status:is(.pending, .waiting, .waitingRev, .waitingApproval, .warning){
    background-color: #fdf5dd;
    color: #b68d08;
}
:is(span, a).status:is(.pending, .waiting, .waitingRev, .waitingApproval, .warning)::before{
    background-color: #b68d08;
}

:is(span, a).status:is(.rejected, .failed, .canceled, .declined, .danger, .failedShipping, .canceledByUser, .refusedToRecieve){
    background-color: #f8d9da;
    color: #9e0707;
}
:is(span, a).status:is(.rejected, .failed, .canceled, .declined, .danger, .failedShipping, .canceledByUser, .refusedToRecieve)::before{
    background-color: #9e0707;
}

:is(span, a).status:is(.done, .approved, .verified, .completed, .success, .open, .delivered){
    background-color: #cff6dd;
    color: #1fa750;
}
:is(span, a).status:is(.done, .approved, .verified, .completed, .success, .open, .delivered)::before{
    background-color: #1fa750;
}

:is(span, a).status:is(.underProcessing, .ready, .readyToPickup, .readyToShip, .underShipping){
    background-color: hsl(221, 93%, 91%);
    color: #0746ce;
}
:is(span, a).status:is(.underProcessing, .ready, .readyToPickup, .readyToShip, .underShipping)::before{
    background-color: #0746ce;
}

:is(span, a).status:is(.closed, .old){
    background-color: #c5c5c5;
    color: #555;
}
:is(span, a).status:is(.closed, .old)::before{
    background-color: #555;
}
/* :: xt/forms/inputMultilang.css */
.input-multilang{
    position: relative;
    --width: calc(var(--input-height, 40px) - 6px);
}

.input-multilang .buttons{
    position: absolute;
    top: 3px;
    left: 3px;
    /* z-index: 2; */
    width: 64px;
    background: #eee;
    border-radius: var(--input-radius, 4px);
}
[dir="ltr"] .input-multilang .buttons,
.input-multilang[dir="ltr"] .buttons{
    right: 3px;
    left: auto;
}

.input-multilang button{
    width: 100%;
    height: var(--width);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    background: #eee;
    border-radius: var(--input-radius, 4px);

    display: none;
}
.input-multilang[data-lang="ar"] button[data-lang="ar"]{ display: block; }
.input-multilang[data-lang="en"] button[data-lang="en"]{ display: block; }
.input-multilang[data-lang="fr"] button[data-lang="fr"]{ display: block; }

.input-multilang :is(input, textarea){
    display: none;
}
.input-multilang :is(input, textarea){
    padding-left: 74px;
}
[dir="ltr"] .input-multilang :is(input, textarea),
.input-multilang[dir="ltr"] :is(input, textarea){
    padding: var(--input-padding, 10px);
    padding-right: 74px;
}

.input-multilang[data-lang="ar"] :is(input, textarea)[data-lang="ar"]{ display: block; }
.input-multilang[data-lang="en"] :is(input, textarea)[data-lang="en"]{ display: block; }
.input-multilang[data-lang="fr"] :is(input, textarea)[data-lang="fr"]{ display: block; }

.input-multilang .drop-toggle.arrow-after::after {
    margin-inline-start: 3px;
}
.input-multilang .drop-menu{
    transform: translate(-10px, -6px);
}
[dir="ltr"] .input-multilang .drop-menu{
    transform: translate(10px, -6px);
}

.input-multilang .drop-menu li{
    padding: 0;
}
.input-multilang .drop-menu a{
    display: block;
    padding: .2rem 1rem;
}
.input-multilang .drop-menu a:is(:hover, :focus){
    background: var(--a-hover);
    color: #fff;
}
/* :: xt/forms/inputQuantity.css */
.input-quantity-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.input-quantity-container label{
    margin-inline-end: 1rem;
}

.input-quantity {
    display: flex;
    align-items: center;
    
    border: var(--input-border, var(--border));
    box-shadow: var(--input-shadow, initial);
    border-radius: var(--input-radius);

    padding-inline: 3px;
}

.input-quantity button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 50px;
    height: calc(var(--input-height, 40px) - 6px);

    background-color: #eee;
    border: none;
    font-size: 18px;
    transition: background 0.15s;    
}
.input-quantity button:disabled {
    background-color: #ccc;
}

.input-quantity button:not(:disabled):is(:hover, :focus-visible) {
    background-color: #ddd;
}

.input-quantity input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    flex-grow: 1;
}
.input-quantity input:focus {
    border: none !important;
    box-shadow: none !important;
}
/* :: animations/tada.css */
.animate-tada,
.animate-hover-tada:is(:hover, :focus),
a:is(:hover, :focus) .animate-hover-tada,
.btn:is(:hover, :focus) .animate-hover-tada{
    -webkit-animation: tada 1.5s ease infinite;
    animation: tada 1.5s ease infinite;
}

.animate-hover-tada:is(:hover, :focus){
  animation-iteration-count: 1;
}

@-webkit-keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1); }
    10%, 20% {
      -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); }
    30%, 50%, 70%, 90% {
      -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); }
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1); } 
}
@keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1); }
    10%,
    20% {
      -webkit-transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg);
      transform: scale3d(0.95, 0.95, 0.95) rotate3d(0, 0, 1, -10deg); }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
      transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); }
    40%,
    60%,
    80% {
      -webkit-transform: rotate3d(0, 0, 1, -10deg);
      transform: rotate3d(0, 0, 1, -10deg); }
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1); } 
}