:root {
  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;

  --container-width: min(95%, var(--max-width));
  --max-width: min(100vw, 98rem);

  /* FONT SIZES */
  --9: 0.6rem;
  --10: 0.625rem;
  --11: 0.688rem;
  --12: 0.75rem;
  --13: 0.813rem;
  --14: 0.875rem;
  --15: 0.938rem;
  --16: 1rem;
  --17: 1.063rem;
  --18: 1.125rem;
  --20: 1.25rem;
  --22: 1.35rem;
  --24: 1.43rem;
  --25: 1.563rem;
  --26: 1.625rem;
  --28: 1.75rem;
  --30: 1.875rem;
  --35: 2.1rem;
  --40: 2.4rem;
  --45: 2.675rem;
  --50: 3.125rem;
  --55: 3.438rem;
  --60: 3.75rem;
  --70: 4.375rem;

  --p1: 0.5rem;
  --p2: calc(var(--p1) * 2);
  --p3: calc(var(--p1) * 3);
  --p4: calc(var(--p1) * 4);
  --p5: calc(var(--p1) * 5);
  --p6: calc(var(--p1) * 6);
  --p7: calc(var(--p1) * 7);
  --p8: calc(var(--p1) * 8);
  --p9: calc(var(--p1) * 9);
  --p10: calc(var(--p1) * 10);
  --p20: calc(var(--p1) * 20);
}

@media screen and (min-width:64em){

:root{
  --max-width: min(calc(100vw - 6rem), 98rem);
}

}

/* RESET */
@layer reset {
*,
*::before,
*::after {
  box-sizing: border-box;
  font: inherit;
  font-size: inherit;
}
* {
  margin: 0;
}

html {

  font-size: clamp(1rem, 0.7397rem + 0.4478vw, 1.1875rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg-body);

}

@media (pointer:fine){ html{ scrollbar-gutter: stable;}}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
}
p {max-width:75ch}

p, ul, ol, li, blockquote, pre, code, table, th, td, caption {
  font-size: inherit;
  line-height: inherit;
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}



button {
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  line-height: 1;
  font-family: var(--body-font);
}

a, a:visited, a img, button:visited, button {
  -webkit-tap-highlight-color: transparent; /* rimuove il colore blu */
}

a:active img {
  outline: 1px solid var(--primary-100);
  outline-offset: 1px;
}

}


 /* OFFCANVAS */ 
 [data-offcanvas-content] { width: 100%; position: fixed;inset:0;height: 100vh; z-index: 9999;  display: none;background: rgb(from var(--black) r g b / 0.7);  isolation:isolate}


 [data-offcanvas-content] > .offcanvas-content{position:absolute; background: white;max-width: 30rem; width:100%;height: 100dvh;box-shadow: var(--box-shadow); border-top-right-radius: var(--p3); padding-block: var(--p2); overflow:clip}

 [data-offcanvas-content].position-right > .offcanvas-content{  right: 0; border-top-right-radius: 0; border-top-left-radius: var(--p3); }
 
.step-container{display: grid;      grid-template-columns: 1fr 1fr;      width: 200%;}

 @media (pointer: fine) {
 [data-offcanvas-content].position-right > .offcanvas-content{ padding-right:15px}
 }

 @media screen and (max-width:39.9375em){ 
  [data-offcanvas-content] > .offcanvas-content {max-width:100vw} 
} 
/* DROPDOWN */

[data-open-dropdown][open] {
  background: white;
  box-shadow: 0 0 0 12px white;
   border-radius:var(--p2) var(--p2) 0  0
}

[data-dropdown-content] {
  position: absolute;
  top: 0;
 inset:0;
  opacity: 0;
  display: none;
  max-height:calc(100svh - max(var(--upperHeader-height),4.2rem));
    height: fit-content;
    overflow-y: auto;
   
   
}
[data-dropdown-wrapper]:has([open]){ position:relative;  z-index:9999;  isolation:isolate}
[data-dropdown-wrapper]:has([open]) > *{z-index:1;  position:relative; }
[data-dropdown-wrapper]:has([open]):after{content:""; position:fixed; width:100vw; height:100vh; background: rgb(from var(--black) r g b / 0.7); inset:0; z-index:-1}



/* ACCORDION */
[data-accordion] {
  border-radius: 1rem;
  border: 1px solid var(--grey-100);
  overflow: clip;
  grid-template-columns:1fr;
}
[data-accordion] details {
  border-bottom: 1px solid var(--grey-100);
}
[data-accordion] details:last-child {
  border: none;
}

[data-accordion] summary {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--14);
  color: var(--primary-500);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s linear;
}
[data-accordion] summary:after {
  --size: var(--16);
  content: "";
  display: inline-block;
  width: var(--size);
  height: var(--size);
  background: url(../images/icons/icon-arrow-down.svg) center center no-repeat;
  background-size: contain;
  transition: 0.15s linear;
}

[data-accordion] details[open] summary:after {
  rotate: 180deg;
}

[data-accordion] details[open] summary {
  background: var(--primary-100);
}

[data-accordion] details summary:hover {
  background: var(--white);
}
[data-accordion].bg-white details summary:hover {
  background: #fafafa;
}

details[open] > *:not(summary) {
  color: var(--grey-700);
  padding-inline: 1rem;
  margin-block: 1rem;
}

[fixed-on-top]{z-index:3333}
[fixed-on-top].stucked-offset{top:var(--mainHeader-height) !Important}
 /* TABS */ 
 .cart-lists-wrapper  [data-tabs-content]{height:0}
 [data-tabs]{    display: grid; grid-template-areas: "nav" "content"; gap:var(--p2)}


[data-tabs] ul li a { font-size: var(--13); font-weight: 600; padding: 1rem 0.5rem; display: block; position: relative; color: var(--primary-500) !important; }
[data-tabs-content] {grid-area:content; visibility: hidden;transform-origin:top} 
[data-tabs-content].active { visibility: visible; height:auto;  }
[data-tabs-content] > * {opacity:0; transition:all linear .2s; }
[data-tabs-content].active > *{opacity:1}
[data-tabs] nav { position: relative; grid-area:nav; display:grid} 
[data-tabs] .slider { width: 100px; height: 3px; border-radius: 3px; background: var(--primary-500); position: absolute; bottom: 0; }
[data-tabs] [slider-menu-container]{--gradient-from: var(--white);}

@media screen and (width<63.9375em){
  [data-tabs-content]{height:0;transition:height ease .3s; interpolate-size: allow-keywords; }
}



/* FILTER TABS */
[data-filter-tabs] ul > li > a { font-size: var(--13); font-weight: 600; padding: 1rem 0.5rem; display: block; position: relative; color: var(--primary-500) !important; }
[data-filter-tabs] nav { position: relative; grid-area:nav} 
[data-filter-tabs] .slider { width: 100px; height: 3px; border-radius: 3px; background: var(--primary-500); position: absolute; bottom: 0; }

/* SLIDER MENU */
[slider-menu-container]{isolation:isolate; overflow:clip;  position:relative;   width: 100%;  max-width: calc(100vw - 15px);--gradient-from:var(--bg-body);    padding-block: 5px;}

[slider-menu-container] .arrow-container{position:absolute; z-index:2; height:100%; width:3rem; display:flex; align-items:center; top:0 }
[slider-menu-container] .arrow-container button{display:none}
[slider-menu-container] .arrow-container.left{  --gradient-stops: var(--gradient-from) 30%,  transparent 100%; justify-content:start;  left:0;   background-image: linear-gradient(to right, var(--gradient-stops)); padding-left:1px}
[slider-menu-container] .arrow-container.right{  --gradient-stops: var(--gradient-from) 30%,  transparent 100%;justify-content:end; right:-1px;   background-image: linear-gradient(to left, var(--gradient-stops)); padding-right:2px}

[slider-menu-container] ul{overflow-x:auto; list-style:none; padding-inline:0; margin-inline:0; flex-wrap:nowrap;scroll-behavior: smooth;     -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */}
[slider-menu-container] ul::-webkit-scrollbar {    display: none}
[slider-menu-container] ul li > * { text-wrap: nowrap;}
[slider-menu-container] ul li a > * span{    text-wrap:wrap;}
[slider-menu-container] ul.drag{scroll-behavior:auto; cursor:grab}
[slider-menu-container] ul.drag li, [slider-menu-container] ul.drag li a {pointer-events:none; user-select:none; -webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;}

@media (pointer:fine){
  [slider-menu-container] .arrow-container button{display:flex}
}

/* TOOLTIP */
[data-tooltip]{ position:relative; cursor:pointer}
.tooltip[popover]{
  position: fixed;
  background-color: var(--grey-800);
  box-shadow:var(--box-shadow);
  border:none;
  color: #fff;
  padding: var(--p1) var(--p2);
  font-size: var(--12);
  z-index: 1000;
  line-height: 1.4;
  text-align:center;
  border-radius: .4rem;
  width:max-content;
  inset:initial;
}



/* DIV MAX HEIGHT */
[data-maxheight-toggle]{display:none}
[data-maxheight-content]{height:var(--maxHeight, auto); overflow-y:clip; /*transition:all .2s linear; interpolate-size: allow-keywords;*/}


.aspect-auto {
  aspect-ratio: auto;
}
.aspect-square {
  aspect-ratio: 1;
}
.aspect-video {
  aspect-ratio: 1.67;
}
.aspect-video-square {
  aspect-ratio: 1.33;
}


.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.object-none {
  object-fit: none;
}

.object-position-top {
  object-position: top;
}
.object-position-bottom {
  object-position: bottom;
}

.object-position-left {
  object-position: left;
}
.object-position-right {
  object-position: right;
}
.object-position-center {
  object-position: center;
}


.isolate{isolation:isolate}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
  overflow: clip;
}
.sticky{position:sticky; z-index:1}

@media screen and (width>40em){
  .sticky-on-medium{position:sticky; z-index:1}
}
@media screen and (width>64em){
  .sticky-on-large{position:sticky; z-index:1}
}


.right-0 {
  right: 0;
}
.left-0 {
  left: 0;
}
.top-0 {
  top: 0;
}
.top-50 {
  top: 50%;
}
.bottom-0 {
  bottom: 0;
}
.inset-0 {
  inset: 0;
}

.right-1 {
  right: var(--p1);
}
.left-1 {
  left: var(--p1);
}
.top-1 {
  top: var(--p1);
}
.bottom-1 {
  bottom: var(--p1);
}
.inset-1 {
  inset: var(--p1);
}

.right-2 {
  right: var(--p2);
}
.left-2 {
  left: var(--p2);
}
.top-2 {
  top: var(--p2);
}
.bottom-2 {
  bottom: var(--p2);
}
.inset-2 {
  inset: var(--p2);
}

.overflow-clip{overflow:clip}
.overflow-x-auto{overflow-x:auto;padding-bottom: 15px; }
div:has(.overflow-x-auto) [scroll-button]{opacity:0}
@media (pointer: fine) {
.overflow-x-auto{visibility: hidden;}
.overflow-x-auto:hover, .overflow-x-auto:focus, .overflow-x-auto>*{visibility:visible}
div:has(.overflow-x-auto):hover > *{visibility:visible}
div:hover .overflow-x-auto[data-scroll] + button, div:hover .overflow-x-auto[data-scroll] + button + button{ opacity:1 }
.overflow-x-auto[data-scroll]:focus + button, .overflow-x-auto[data-scroll]:focus + button + button{ opacity:1 }

}

@media screen and (min-width:40em) and (pointer:coarse){
  .overflow-x-auto[data-scroll] + button, .overflow-x-auto[data-scroll] + button + button{ opacity:1 }

}

.overflow-y-auto{overflow-y:auto; max-height:var(--maxHeight) }


@media screen and (max-width:39.9375rem){
.overflow-small-clip{overflow:clip}
.overflow-small-x-auto{overflow-x:auto;  }
.overflow-small-y-auto{overflow-y:auto;  max-height:var(--maxHeight); }
}

@layer button{
a,
button {
  transition: background linear 0.2s, border linear 0.2s;
  text-decoration: none;
  color: var(--text-color);
}

button:focus-visible {
  outline: var(--primary-500) 1px solid;
}
}



.pointer-none{pointer-events:none;user-select:none}

/* TABLE RESET */
table,
tbody,
thead,
tr,
td {
  background: none;
  border: none;
}
table {
  border-spacing: var(--p1);
  border-collapse: collapse;
  color: var(--text-color);
  width: 100%;
}
th {
  font-weight: 700;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding-block: var(--p1);
  padding-inline:var(--p1)
}
tr:not(:last-child) {
  --borderColor: var(--grey-100);
  border-bottom: 1px solid var(--borderColor);
}
tr:first-child td {
  padding-top: 0;

}
tr:last-child td {
  padding-bottom: 0;

}

tr th:first-child{  padding-left:0}
tr th:last-child{  padding-right:0}

tr td:first-child{  padding-left:0}
tr td:last-child{  padding-right:0}

table.fixed-layout {
  table-layout: fixed;
}

table.align-middle td {
  vertical-align: middle;
}

table td.auto {
  width: 100%;
}
table td.shrink {
  width: 0.1%;
}

/* LISTS */
:where(ul,
ol) {
  margin-left: 0;
  padding-left: 1rem;
}

:where(ul.reset-style){
  margin:0;
  padding:0;
  padding-inline-start:0;
  padding-left:0;
  list-style:none;
 
}
:where(ul.reset-style) > li{list-style:none}
ul.reset-line-height > li{ line-height: 0;}

ul li::marker {
  font-size: var(--15);
  color: var(--primary-800);
}

.text-white ul li::marker{color:white}

ol li::marker {
  font-size: var(--15);
  font-weight: 600;
  color: var(--primary-800);
}
ul:not([class]) li, ol:not([class])  li{margin-block:.5rem}
.checklist {
  padding-left: 0;
}
.checklist li {
  list-style: none;
  margin-bottom: var(--p1);
  display:flex;
}
.checklist li:last-child{margin-bottom:0}
.checklist li:before {
  content: "";
  display: inline-block;
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
  min-width:1rem;
  min-height:1rem;
  background: url(../images/icons/checklist.svg) center center no-repeat;
  background-size: contain;
  translate: 0 0.4ex;
}

dl {
  display: grid;
  font-size: var(--13);
  grid-template-columns: auto 1fr;
}
dt {
  padding-block: 0.35rem;
  padding-right: 1rem;
  color: var(--grey-600);

  text-align:left;
}
dd {
  padding-block: 0.35rem;
  grid-column-start: 2;
  font-weight: 500;

}

dl.small-padd :is(dt,dd){padding-block:2px}


/* MODAL */
:where(dialog[data-modal]) {
  top: 50%;
  left: 1rem;
  right: 1rem;
  translate: 0 -50%;
  border-radius: var(--p3);
  border: 0;
  padding: var(--p4);
  max-width: 30rem;
  text-align:center;
  margin-inline:auto;
}
dialog[data-modal]::backdrop {
  background: rgb(from var(--grey-800) r g b / 0.9);
}

dialog[data-modal].size-full{
  max-width:calc(var(--max-width) - 2rem)
}

dialog[data-modal].large{
  max-width:60em
}


/* TEXT */

body {
  color: var(--text-color);
  font-family: var(--body-font);
  line-height: 1.5;
  font-weight: var(--regular);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--title-font);
  font-weight: var(--semibold);
  line-height: 1.3;
}

h1 {
  font-size: var(--40);
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 0.9rem;
}
h2 {
  font-size: var(--35);
  font-weight: 700;
  margin-bottom: 0.9rem;
}
h3 {
  font-size: var(--28);
  font-weight: 700;
  line-height: 1.3;
}
h4 {
  font-size: var(--25);
  font-weight: 500;
}
h5 {
  font-size: var(--25);
  font-weight: 500;
}
h6 {
  font-size: var(--18);
  font-weight: 500;
}


.font-9, .font-10, .font-11, .font-12 {
  font-size: var(--13);
}
@media screen and (width> 40em){
.font-9 {
  font-size: var(--9);
}

.font-10 {
  font-size: var(--10);
}
.font-11 {
  font-size: var(--11);
}
.font-12 {
  font-size: var(--12);
}
}
.font-13 {
  font-size: var(--13);
}
.font-14 {
  font-size: var(--14);
}
.font-15 {
  font-size: var(--15);
}
.font-16 {
  font-size: var(--16);
}
.font-17 {
  font-size: var(--17);
}
.font-18 {
  font-size: var(--18);
}
.font-20 {
  font-size: var(--20);
}
.font-22 {
  font-size: var(--22);
}
.font-24 {
  font-size: var(--24);

}
.font-25 {
  font-size: var(--25);

}
.font-26 {
  font-size: var(--26);

}
.font-28 {
  font-size: var(--28);
  line-height: 1.2;
  letter-spacing: -.01ch;
}
.font-30 {
  font-size: var(--30);
  line-height: 1.2;
  letter-spacing: -.01ch;
}
.font-35 {
  font-size: var(--35);
  line-height: 1.2;
  letter-spacing: -.01ch;
}
.font-40 {
  font-size: var(--40);
  line-height: 1.2;
  letter-spacing: -.01ch;
}
.font-45 {
  font-size: var(--45);
  line-height: 1.2;
  letter-spacing: -.02ch;
}
.font-50 {
  font-size: var(--50);
  line-height: 1.1;
  letter-spacing: -.02ch;
}
.font-55 {
  font-size: var(--55);
  line-height: 1;
  letter-spacing: -.02ch;
}

.font-60 {
  font-size: var(--60);
  line-height: 1;
  letter-spacing: -.03ch;
}
.font-70 {
  font-size: var(--70);
  line-height: 1;
  letter-spacing: -.03ch;
}

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


.line-height-1{line-height:1}
.line-height-12{line-height:1.2}
.line-height-14{line-height:1.4}
.line-height-16{line-height:1.6}
.line-height-18{line-height:1.8}
.line-height-2{line-height:2}
.line-height-25{line-height:2.5}


.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.none{ text-transform:none}
.capitalize{ text-transform:capitalize}
.lowercase{text-transform:lowercase}
.uppercase{text-transform:uppercase}

.underline{text-decoration:underline; text-underline-offset: .4ch;}
.line-through{text-decoration:line-through}


.column-1{column-count:1; column-gap:var(--xgap, 2rem)}
.column-2{column-count:2;  column-gap:var(--xgap, 2rem)}
.column-4{column-count:4;  column-gap:var(--xgap, 2rem)}
.column-3{column-count:3;  column-gap:var(--xgap, 2rem)}
.column-5{column-count:5;  column-gap:var(--xgap, 2rem)}
.column-6{column-count:6;  column-gap:var(--xgap, 2rem)}

@media screen and (min-width:40em){
  .medium-column-1{column-count:1;  column-gap:var(--xgap, 2rem)}
.medium-column-2{column-count:2;  column-gap:var(--xgap, 2rem)}
.medium-column-3{column-count:3;  column-gap:var(--xgap, 2rem)}
.medium-column-4{column-count:4;  column-gap:var(--xgap, 2rem)}
.medium-column-5{column-count:5;  column-gap:var(--xgap, 2rem)}
.medium-column-6{column-count:6;  column-gap:var(--xgap, 2rem)}
}

@media screen and (min-width:64em){
  .large-column-1{column-count:1;  column-gap:var(--xgap, 2rem)}
.large-column-2{column-count:2;  column-gap:var(--xgap, 2rem)}
.large-column-3{column-count:3;  column-gap:var(--xgap, 2rem)}
.large-column-4{column-count:4;  column-gap:var(--xgap, 2rem)}
.large-column-5{column-count:5;  column-gap:var(--xgap, 2rem)}
.large-column-6{column-count:6;  column-gap:var(--xgap, 2rem)}
}

@media screen and (min-width:85em){
  .x-large-column-1{column-count:1;  column-gap:var(--xgap, 2rem)}
.x-large-column-2{column-count:2;  column-gap:var(--xgap, 2rem)}
.x-large-column-3{column-count:3;  column-gap:var(--xgap, 2rem)}
.x-large-column-4{column-count:4;  column-gap:var(--xgap, 2rem)}
.x-large-column-5{column-count:5;  column-gap:var(--xgap, 2rem)}
.x-large-column-6{column-count:6;  column-gap:var(--xgap, 2rem)}
}



u {
  text-decoration-color: var(--accent-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
b,
strong {
  font-weight: var(--bold);
  letter-spacing: 0;
}

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: var(--lineN, 2);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis.line-1 {
  --lineN: 1;
}
.ellipsis.line-2 {
  --lineN: 2;
}
.ellipsis.line-3 {
  --lineN: 3;
}
.ellipsis.line-4 {
  --lineN: 4;
}

.ellispis.hide-dots{text-overflow: clip;}

/* color */
.bg-body {
  --background-color: var(--bg-body);
  background-color: var(--background-color);
}
.bg-white {
  --background-color: var(--white);
  background-color: var(--background-color);
}

.bg-primary-100 {
  --background-color: var(--primary-100);
  background-color: var(--background-color);
}
.bg-primary-200 {
  --background-color: var(--primary-200);
  background-color: var(--background-color);
}
.bg-primary-300 {
  --background-color: var(--primary-300);
  background-color: var(--background-color);
}
.bg-primary-400 {
  --background-color: var(--primary-400);
  background-color: var(--background-color);
}
.bg-primary-500 {
  --background-color: var(--primary-500);
  background-color: var(--background-color);
}



.bg-green {
  --background-color: var(--green);
  background-color: var(--background-color);
}
.bg-orange {
  --background-color: var(--orange);
  background-color: var(--background-color);
}
.bg-red {
  --background-color: var(--red);
  background-color: var(--background-color);
}
.bg-purple {
  --background-color: var(--purple);
  background-color: var(--background-color);
}
.bg-blue {
  --background-color: var(--blue);
  background-color: var(--background-color);
}
.bg-darkblue {
  --background-color: var(--darkblue);
  background-color: var(--background-color);
}




.hover-bg-white:hover {
  --background-color: var(--white);
  background-color: var(--background-color);
}

.hover-bg-primary-100:hover {
  --background-color: var(--primary-100);
  background-color: var(--background-color);
}
.hover-bg-primary-200:hover {
  --background-color: var(--primary-200);
  background-color: var(--background-color);
}
.hover-bg-primary-300:hover {
  --background-color: var(--primary-300);
  background-color: var(--background-color);
}
.hover-bg-primary-400:hover {
  --background-color: var(--primary-400);
  background-color: var(--background-color);
}
.hover-bg-primary-500:hover {
  --background-color: var(--primary-500);
  background-color: var(--background-color);
}


.bg-grey-100 {
  --background-color: var(--grey-100);
  background-color: var(--background-color);
}
.bg-grey-200 {
  --background-color: var(--grey-200);
  background-color: var(--background-color);
}
.bg-grey-300 {
  --background-color: var(--grey-300);
  background-color: var(--background-color);
}
.bg-grey-400 {
  --background-color: var(--grey-400);
  background-color: var(--background-color);
}
.bg-grey-500 {
  --background-color: var(--grey-500);
  background-color: var(--background-color);
}
.bg-grey-600 {
  --background-color: var(--grey-600);
  background-color: var(--background-color);
}
.bg-grey-700 {
  --background-color: var(--grey-700);
  background-color: var(--background-color);
}
.bg-grey-800 {
  --background-color: var(--grey-800);
  background-color: var(--background-color);
}

.hover-bg-grey-100:hover {
  --background-color: var(--grey-100);
  background-color: var(--background-color);
}
.hover-bg-grey-200:hover {
  --background-color: var(--grey-200);
  background-color: var(--background-color);
}
.hover-bg-grey-300:hover {
  --background-color: var(--grey-300);
  background-color: var(--background-color);
}
.hover-bg-grey-400:hover {
  --background-color: var(--grey-400);
  background-color: var(--background-color);
}
.hover-bg-grey-500:hover {
  --background-color: var(--grey-500);
  background-color: var(--background-color);
}
.hover-bg-grey-600:hover {
  --background-color: var(--grey-600);
  background-color: var(--background-color);
}
.hover-bg-grey-700:hover {
  --background-color: var(--grey-700);
  background-color: var(--background-color);
}
.hover-bg-grey-800:hover {
  --background-color: var(--grey-800);
  background-color: var(--background-color);
}


.bg-error {
  --background-color: var(--error);
  background-color: var(--background-color);
}
.bg-error-light {
  --background-color: var(--error-light);
  background-color: var(--background-color);
}
.bg-success {
  --background-color: var(--success);
  background-color: var(--background-color);
}
.bg-success-light {
  --background-color: var(--success-light);
  background-color: var(--background-color);
}
.bg-warning {
  --background-color: var(--warning);
  background-color: var(--background-color);
}
.bg-warning-light {
  --background-color: var(--warning-light);
  background-color: var(--background-color);
}



.hover-bg-body:hover {
  --background-color: var(--bg-body);
  background-color: var(--background-color);
}

.hover-bg-error:hover {
  --background-color: var(--error);
  background-color: var(--background-color);
}
.hover-bg-error-light:hover {
  --background-color: var(--error-light);
  background-color: var(--background-color);
}
.hover-bg-success:hover {
  --background-color: var(--success);
  background-color: var(--background-color);
}
.hover-bg-success-light:hover {
  --background-color: var(--success-light);
  background-color: var(--background-color);
}
.hover-bg-warning:hover {
  --background-color: var(--warning);
  background-color: var(--background-color);
}
.hover-bg-warning-light:hover {
  --background-color: var(--warning-light);
  background-color: var(--background-color);
}




.hover-bg-orange:hover {
  --background-color: var(--orange);
  background-color: var(--background-color);
}
.hover-bg-green:hover {
  --background-color: var(--green);
  background-color: var(--background-color);
}

.hover-bg-red:hover {
  --background-color: var(--red);
  background-color: var(--background-color);
}

.hover-bg-purple:hover {
  --background-color: var(--purple);
  background-color: var(--background-color);
}

.hover-bg-blue:hover {
  --background-color: var(--blue);
  background-color: var(--background-color);
}
.hover-bg-darkblue:hover {
  --background-color: var(--darkblue);
  background-color: var(--background-color);
}


.bg-opacity-10 {
  background-color: rgb(from var(--background-color) r g b / 0.1);
}
.bg-opacity-20 {
  background-color: rgb(from var(--background-color) r g b / 0.2);
}
.bg-opacity-30 {
  background-color: rgb(from var(--background-color) r g b / 0.3);
}
.bg-opacity-40 {
  background-color: rgb(from var(--background-color) r g b / 0.4);
}
.bg-opacity-50 {
  background-color: rgb(from var(--background-color) r g b / 0.5);
}
.bg-opacity-60 {
  background-color: rgb(from var(--background-color) r g b / 0.6);
}
.bg-opacity-70 {
  background-color: rgb(from var(--background-color) r g b / 0.7);
}
.bg-opacity-80 {
  background-color: rgb(from var(--background-color) r g b / 0.8);
}
.bg-opacity-90 {
  background-color: rgb(from var(--background-color) r g b / 0.9);
}


.opacity-10 {
  opacity:.1;
}
.opacity-20 {
  opacity:.2;
}
.opacity-30 {
  opacity:.3;
}
.opacity-40 {
  opacity:.4;
}
.opacity-50 {
  opacity:.5;
}
.opacity-60 {
  opacity:.6;
}
.opacity-70 {
  opacity:.7;
}
.opacity-80 {
  opacity:.8;
}
.opacity-90 {
  opacity:.9;
}

.text-primary-100 {
  color: var(--primary-100);
}
.text-primary-200 {
  color: var(--primary-200);
}
.text-primary-300 {
  color: var(--primary-300);
}
.text-primary-400 {
  color: var(--primary-400);
}
.text-primary-500 {
  color: var(--primary-500);
}

 .hover-text-primary-100:hover { color: var(--primary-100); } .hover-text-primary-200:hover { color: var(--primary-200); } .hover-text-primary-300:hover { color: var(--primary-300); } .hover-text-primary-400:hover { color: var(--primary-400); } .hover-text-primary-500:hover { color: var(--primary-500); }


.text-grey-100 {
  color: var(--grey-100);
}
.text-grey-200 {
  color: var(--grey-200);
}
.text-grey-300 {
  color: var(--grey-300);
}
.text-grey-400 {
  color: var(--grey-400);
}
.text-grey-500 {
  color: var(--grey-500);
}
.text-grey-600 {
  color: var(--grey-600);
}
.text-grey-700 {
  color: var(--grey-700);
}
.text-grey-800 {
  color: var(--grey-800);
}

.hover-text-grey-100:hover { color: var(--grey-100); } .hover-text-grey-200:hover { color: var(--grey-200); } .hover-text-grey-300:hover { color: var(--grey-300); } .hover-text-grey-400:hover { color: var(--grey-400); } .hover-text-grey-500:hover { color: var(--grey-500); } .hover-text-grey-600:hover { color: var(--grey-600); } .hover-text-grey-700:hover { color: var(--grey-700); } .hover-text-grey-800:hover { color: var(--grey-800); }

.text-shadow{text-shadow:0 0 20px rgba(0,0,0,0.3)}

.text-white {
  --text-color:var(--white);
  color: var( --text-color);
}
.text-black {
  --text-color: var(--black);
  color: var( --text-color);
}
.text-error {
  --text-color: var(--error);
  color: var( --text-color);
}
.text-success {
  --text-color: var(--success);
  color: var( --text-color);
}
.text-warning {
  --text-color:var(--warning);
  color: var( --text-color);
}

.text-green {
  --text-color:var(--green);
  color: var( --text-color);
}
.text-orange {
  --text-color:var(--orange);
  color: var( --text-color);
}
.text-red {
  --text-color:var(--red);
  color: var( --text-color);
}
.text-purple{
  --text-color:var(--purple);
  color: var( --text-color);
}
.text-blue {
  --text-color:var(--blue);
  color: var( --text-color);
}
.text-darkblue {
  --text-color:var(--darkblue);
  color: var( --text-color);
}

.hover-text-white:hover { --text-color:var(--white); color: var( --text-color); } .hover-text-black:hover { --text-color: var(--black); color: var( --text-color); } .hover-text-error:hover { --text-color: var(--error); color: var( --text-color); } .hover-text-success:hover { --text-color: var(--success); color: var( --text-color); } .hover-text-warning:hover { --text-color:var(--warning); color: var( --text-color); }

.hover-text-green:hover { --text-color:var(--green); color: var( --text-color); } 
.hover-text-orange:hover { --text-color:var(--orange); color: var( --text-color); } 
.hover-text-red:hover { --text-color:var(--red); color: var( --text-color); } 
.hover-text-purple:hover { --text-color:var(--purple); color: var( --text-color); } 
.hover-text-blue:hover { --text-color:var(--blue); color: var( --text-color); } 
.hover-text-darkblue:hover { --text-color:var(--darkblue); color: var( --text-color); } 
.hover-text-darkblue:hover { --text-color:var(--darkblue); color: var( --text-color); } 

/* visibility*/


body :is(.hide) {
  display: none !important
}
@media print, screen and (max-width: 39.9375em) {
body :is(.show-for-large, .show-for-medium) {
  display: none;
}
body :is(.hide-for-small-only, .hide-for-small) {
  display: none;
}
}

@media print, screen and (min-width: 40em) {

  body :is(.hide-for-medium) {
    display: none;
  }

}
@media print, screen and (min-width: 40em) and (max-width: 63.9375em){

  body :is(.show-for-large) {
    display: none;
  }
}


@media print, screen and (min-width: 64em) {

  body :is(.hide-for-large) {
    display: none;
  }

}

@media print, screen and (max-width: 26em) {
  .hide-for-xs {
    display: none;
  }
}
 @media print, screen and (max-width: 24em) { 
   .show-for-xs {
    display: block !important;
  }
}

.inline {
  display: inline;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.flow-root {
  display: flow-root;
}
.table {
  display: table;
}
.inline-table {
  display: inline-table;
}
.contents{display:contents}
.inline-flex{display:inline-flex}

/* MARGIN AND PADDING */

/* 0px*/
.px-0 {
  padding-inline: 0;
}
.py-0 {
  padding-block: 0;
}
.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.pr-0 {
  padding-right: 0;
}
.pl-0 {
  padding-left: 0;
}
.px-05{padding-inline:.25rem}
.py-05{padding-block:.25rem}

/* 8px*/
.px-1 {
  padding-inline: var(--p1);
}
.py-1 {
  padding-block: var(--p1);
}
.pt-1 {
  padding-top: var(--p1);
}
.pb-1 {
  padding-bottom: var(--p1);
}
.pr-1 {
  padding-right: var(--p1);
}
.pl-1 {
  padding-left: var(--p1);
}

/* 16px*/
.px-2 {
  padding-inline: var(--p2);
}
.py-2 {
  padding-block: var(--p2);
}
.pt-2 {
  padding-top: var(--p2);
}
.pb-2 {
  padding-bottom: var(--p2);
}
.pr-2 {
  padding-right: var(--p2);
}
.pl-2 {
  padding-left: var(--p2);
}

/* 24px*/
.px-3 {
  padding-inline: var(--p3);
}
.py-3 {
  padding-block: var(--p3);
}
.pt-3 {
  padding-top: var(--p3);
}
.pb-3 {
  padding-bottom: var(--p3);
}
.pr-3 {
  padding-right: var(--p3);
}
.pl-3 {
  padding-left: var(--p3);
}

/* 32px*/
.px-4 {
  padding-inline: var(--p4);
}
.py-4 {
  padding-block: var(--p4);
}
.pt-4 {
  padding-top: var(--p4);
}
.pb-4 {
  padding-bottom: var(--p4);
}
.pr-4 {
  padding-right: var(--p4);
}
.pl-4 {
  padding-left: var(--p4);
}

/* 40px*/
.px-5 {
  padding-inline: var(--p5);
}
.py-5 {
  padding-block: var(--p5);
}
.pt-5 {
  padding-top: var(--p5);
}
.pb-5 {
  padding-bottom: var(--p5);
}
.pr-5 {
  padding-right: var(--p5);
}
.pl-5 {
  padding-left: var(--p5);
}

/* 48px*/
.px-6 {
  padding-inline: var(--p6);
}
.py-6 {
  padding-block: var(--p6);
}
.pt-6 {
  padding-top: var(--p6);
}
.pb-6 {
  padding-bottom: var(--p6);
}
.pr-6 {
  padding-right: var(--p6);
}
.pl-6 {
  padding-left: var(--p6);
}

/* 56px*/
.px-7 {
  padding-inline: var(--p7);
}
.py-7 {
  padding-block: var(--p7);
}
.pt-7 {
  padding-top: var(--p7);
}
.pb-7 {
  padding-bottom: var(--p7);
}
.pr-7 {
  padding-right: var(--p7);
}
.pl-7 {
  padding-left: var(--p7);
}

/* 64px*/
.px-8 {
  padding-inline: var(--p8);
}
.py-8 {
  padding-block: var(--p8);
}
.pt-8 {
  padding-top: var(--p8);
}
.pb-8 {
  padding-bottom: var(--p8);
}
.pr-8 {
  padding-right: var(--p8);
}
.pl-8 {
  padding-left: var(--p8);
}

/* 72px*/
.px-9 {
  padding-inline: var(--p9);
}
.py-9 {
  padding-block: var(--p9);
}
.pt-9 {
  padding-top: var(--p9);
}
.pb-9 {
  padding-bottom: var(--p9);
}
.pr-9 {
  padding-right: var(--p9);
}
.pl-9 {
  padding-left: var(--p9);
}

/* 80px*/
.px-10 {
  padding-inline: var(--p10);
}
.py-10 {
  padding-block: var(--p10);
}
.pt-10 {
  padding-top: var(--p10);
}
.pb-10 {
  padding-bottom: var(--p10);
}
.pr-10 {
  padding-right: var(--p10);
}
.pl-10 {
  padding-left: var(--p10);
}

.mx-auto {
  margin-inline: auto;
}
.mx-05{margin-inline:.25rem}
.my-05{margin-block:.25rem}

/* 0px*/
.mx-0 {
  margin-inline: 0;
}
.my-0 {
  margin-block: 0;
}
.mt-0 {
  margin-top: 0;
}
.mb-0 {
  margin-bottom: 0;
}
.mr-0 {
  margin-right: 0;
}
.ml-0 {
  margin-left: 0;
}

/* 8px*/
.mx-1 {
  margin-inline: var(--p1);
}
.my-1 {
  margin-block: var(--p1);
}
.mt-1 {
  margin-top: var(--p1);
}
.mb-1 {
  margin-bottom: var(--p1);
}
.mr-1 {
  margin-right: var(--p1);
}
.ml-1 {
  margin-left: var(--p1);
}

/* 16px*/
.mx-2 {
  margin-inline: var(--p2);
}
.my-2 {
  margin-block: var(--p2);
}
.mt-2 {
  margin-top: var(--p2);
}
.mb-2 {
  margin-bottom: var(--p2);
}
.mr-2 {
  margin-right: var(--p2);
}
.ml-2 {
  margin-left: var(--p2);
}

/* 24px*/
.mx-3 {
  margin-inline: var(--p3);
}
.my-3 {
  margin-block: var(--p3);
}
.mt-3 {
  margin-top: var(--p3);
}
.mb-3 {
  margin-bottom: var(--p3);
}
.mr-3 {
  margin-right: var(--p3);
}
.ml-3 {
  margin-left: var(--p3);
}

/* 32px*/
.mx-4 {
  margin-inline: var(--p4);
}
.my-4 {
  margin-block: var(--p4);
}
.mt-4 {
  margin-top: var(--p4);
}
.mb-4 {
  margin-bottom: var(--p4);
}
.mr-4 {
  margin-right: var(--p4);
}
.ml-4 {
  margin-left: var(--p4);
}

/* 40px*/
.mx-5 {
  margin-inline: var(--p5);
}
.my-5 {
  margin-block: var(--p5);
}
.mt-5 {
  margin-top: var(--p5);
}
.mb-5 {
  margin-bottom: var(--p5);
}
.mr-5 {
  margin-right: var(--p5);
}
.ml-5 {
  margin-left: var(--p5);
}

/* 48px*/
.mx-6 {
  margin-inline: var(--p6);
}
.my-6 {
  margin-block: var(--p6);
}
.mt-6 {
  margin-top: var(--p6);
}
.mb-6 {
  margin-bottom: var(--p6);
}
.mr-6 {
  margin-right: var(--p6);
}
.ml-6 {
  margin-left: var(--p6);
}

/* 56px*/
.mx-7 {
  margin-inline: var(--p7);
}
.my-7 {
  margin-block: var(--p7);
}
.mt-7 {
  margin-top: var(--p7);
}
.mb-7 {
  margin-bottom: var(--p7);
}
.mr-7 {
  margin-right: var(--p7);
}
.ml-7 {
  margin-left: var(--p7);
}

/* 64px*/
.mx-8 {
  margin-inline: var(--p8);
}
.my-8 {
  margin-block: var(--p8);
}
.mt-8 {
  margin-top: var(--p8);
}
.mb-8 {
  margin-bottom: var(--p8);
}
.mr-8 {
  margin-right: var(--p8);
}
.ml-8 {
  margin-left: var(--p8);
}

/* 72px*/
.mx-9 {
  margin-inline: var(--p9);
}
.my-9 {
  margin-block: var(--p9);
}
.mt-9 {
  margin-top: var(--p9);
}
.mb-9 {
  margin-bottom: var(--p9);
}
.mr-9 {
  margin-right: var(--p9);
}
.ml-9 {
  margin-left: var(--p9);
}

/* 80px*/
.mx-10 {
  margin-inline: var(--p10);
}
.my-10 {
  margin-block: var(--p10);
}
.mt-10 {
  margin-top: var(--p10);
}
.mb-10 {
  margin-bottom: var(--p10);
}
.mr-10 {
  margin-right: var(--p10);
}
.ml-10 {
  margin-left: var(--p10);
}

/* 160px*/
.mx-20 {
  margin-inline: var(--p20);
}
.my-20 {
  margin-block: var(--p20);
}
.mt-20 {
  margin-top: var(--p20);
}
.mb-20 {
  margin-bottom: var(--p20);
}
.mr-20 {
  margin-right: var(--p20);
}
.ml-20 {
  margin-left: var(--p20);
}

.size-full{width:100%; height:100%}
.size-x-full{width:100%;}
.size-y-full{ height:100%}
.size-4 {
  width: 0.25rem;
  height: 0.25rem;
}
.size-6 {
  width: 0.375rem;
  height: 0.375rem;
}
.size-8 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-12 {
  width: 12px;
  height: 12px;
}
.size-16 {
  width: 1rem;
  height: 1rem;
}
.size-20 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-22 {
  width: 1.35rem;
  height: 1.35rem;
}

.size-24 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-28 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-32 {
  width: 2rem;
  height: 2rem;
}
.size-36 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-40 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-44 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-48 {
  width: 3rem;
  height: 3rem;
}
.size-50 {
  width: 3.125rem;
  height:3.125rem;
}

.size-52 {
  width: 3.25rem;
  height: 3.25rem;
}
.size-56 {
  width: 3.5rem;
  height: 3.5rem;
}
.size-60 {
  width: 3.75rem;
  height: 3.75rem;
}
.size-64 {
  width: 4rem;
  height: 4rem;
}
.size-68 {
  width: 4.25rem;
  height: 4.25rem;
}
.size-72 {
  width: 4.5rem;
  height: 4.5rem;
}
.size-76 {
  width: 4.75rem;
  height: 4.75rem;
}
.size-80 {
  width: 5rem;
  height: 5rem;
}


.width-1 {
  width: var(--p1);
}
.width-2 {
  width: var(--p2);
}
.width-3 {
  width: var(--p3);
}
.width-4 {
  width: var(--p4);
}
.width-5 {
  width: var(--p4);
}
.width-6 {
  width: var(--p6);
}
.width-7 {
  width: var(--p7);
}
.width-8 {
  width: var(--p8);
}
.width-9 {
  width: var(--p9);
}
.width-10 {
  width: var(--p10);
}

.height-1 {
  height: var(--p1);
}
.height-2 {
  height: var(--p2);
}
.height-3 {
  height: var(--p3);
}
.height-4 {
  height: var(--p4);
}
.height-5 {
  height: var(--p4);
}
.height-6 {
  height: var(--p6);
}
.height-7 {
  height: var(--p7);
}
.height-8 {
  height: var(--p8);
}
.height-9 {
  height: var(--p9);
}
.height-10 {
  height: var(--p10);
}

/* borders */
.border-weight-0 {
  border: 0;
}
.border-weight-top-0 {
  border-top: 0;
}
.border-weight-bottom-0 {
  border-bottom: 0;
}
.border-weight-right-0 {
  border-right: 0;
}
.border-weight-left-0 {
  border-left: 0;
}

.border-weight-1 {
  border: 1px solid var(--borderColor, transparent);
}
.border-weight-top-1 {
  border-top: 1px solid var(--borderColor, transparent);
}
.border-weight-bottom-1 {
  border-bottom: 1px solid var(--borderColor, transparent);
}
.border-weight-right-1 {
  border-right: 1px solid var(--borderColor, transparent);
}
.border-weight-left-1 {
  border-left: 1px solid var(--borderColor, transparent);
}

.border-weight-2 {
  border: 2px solid var(--borderColor, transparent);
}
.border-weight-top-2 {
  border-top: 2px solid var(--borderColor, transparent);
}
.border-weight-bottom-2 {
  border-bottom: 2px solid var(--borderColor, transparent);
}
.border-weight-right-2 {
  border-right: 2px solid var(--borderColor, transparent);
}
.border-weight-left-2 {
  border-left: 2px solid var(--borderColor, transparent);
}

.border-weight-3 {
  border: 3px solid var(--borderColor, transparent);
}
.border-weight-top-3 {
  border-top: 3px solid var(--borderColor, transparent);
}
.border-weight-bottom-3 {
  border-bottom: 3px solid var(--borderColor, transparent);
}
.border-weight-right-3 {
  border-right: 3px solid var(--borderColor, transparent);
}
.border-weight-left-3 {
  border-left: 3px solid var(--borderColor, transparent);
}

.border-primary-100 {
  --borderColor: var(--primary-100);
}
.border-primary-200 {
  --borderColor: var(--primary-200);
}
.border-primary-300 {
  --borderColor: var(--primary-300);
}
.border-primary-400 {
  --borderColor: var(--primary-400);
}
.border-primary-500 {
  --borderColor: var(--primary-500);
}

.border-grey-100 {
  --borderColor: var(--grey-100);
}
.border-grey-200 {
  --borderColor: var(--grey-200);
}
.border-grey-300 {
  --borderColor: var(--grey-300);
}
.border-grey-400 {
  --borderColor: var(--grey-400);
}
.border-grey-500 {
  --borderColor: var(--grey-500);
}
.border-grey-600 {
  --borderColor: var(--grey-600);
}
.border-grey-700 {
  --borderColor: var(--grey-700);
}
.border-grey-800 {
  --borderColor: var(--grey-800);
}


.hover-border-primary-100:hover {
  --borderColor: var(--primary-100);
}
.hover-border-primary-200:hover {
  --borderColor: var(--primary-200);
}
.hover-border-primary-300:hover {
  --borderColor: var(--primary-300);
}
.hover-border-primary-400:hover {
  --borderColor: var(--primary-400);
}
.hover-border-primary-500:hover{
  --borderColor: var(--primary-500);
}

.hover-border-grey-100:hover {
  --borderColor: var(--grey-100);
}
.hover-border-grey-200:hover {
  --borderColor: var(--grey-200);
}
.hover-border-grey-300:hover {
  --borderColor: var(--grey-300);
}
.hover-border-grey-400:hover {
  --borderColor: var(--grey-400);
}
.hover-border-grey-500:hover {
  --borderColor: var(--grey-500);
}
.hover-border-grey-600:hover {
  --borderColor: var(--grey-600);
}
.hover-border-grey-700:hover {
  --borderColor: var(--grey-700);
}
.hover-border-grey-800:hover {
  --borderColor: var(--grey-800);
}


.border-error {
  --borderColor: var(--error);
}
.border-success {
  --borderColor: var(--success);
}
.border-warning {
  --borderColor: var(--warning);
}

.border-black {
  --borderColor: var(--black);
}
.border-white {
  --borderColor: var(--white);
}


.hover-border-error:hover {
  --borderColor: var(--error);
}
.hover-border-success:hover {
  --borderColor: var(--success);
}
.hover-border-warning:hover {
  --borderColor: var(--warning);
}

.hover-border-black:hover {
  --borderColor: var(--black);
}
.hover-border-white:hover {
  --borderColor: var(--white);
}

.hover-border-red:hover {
  --borderColor: var(--red);
}
.hover-border-blue:hover {
  --borderColor: var(--blue);
}
.hover-border-darkblue:hover {
  --borderColor: var(--darkblue);
}
.hover-border-orange:hover {
  --borderColor: var(--orange);
}

.hover-border-green:hover {
  --borderColor: var(--green);
}
.hover-border-purple:hover {
  --borderColor: var(--purple);
}



.border-radius-05 {
  border-radius: var(--borderRadiusTL) var(--borderRadiusTR) var(--borderRadiusBR) var(--borderRadiusBL);
  --borderRadiusTL: calc(var(--p1) * .5);
  --borderRadiusTR: calc(var(--p1) * .5);
  --borderRadiusBL: calc(var(--p1) * .5);
  --borderRadiusBR: calc(var(--p1) * .5);
  --borderRadius:  calc(var(--p1) * .5) !important;
}
.border-radius-1 {
  border-radius: var(--borderRadiusTL) var(--borderRadiusTR) var(--borderRadiusBR) var(--borderRadiusBL);
  --borderRadiusTL:  var(--p1);
  --borderRadiusTR:  var(--p1);
  --borderRadiusBL:  var(--p1);
  --borderRadiusBR:  var(--p1);
  --borderRadius: var(--p1) !important;
}
.border-radius-2 {
  border-radius: var(--borderRadiusTL) var(--borderRadiusTR) var(--borderRadiusBR) var(--borderRadiusBL);
  --borderRadiusTL:  var(--p2);
  --borderRadiusTR:  var(--p2);
  --borderRadiusBL:  var(--p2);
  --borderRadiusBR:  var(--p2);
  --borderRadius: var(--p2) !important;
}
.border-radius-3 {
  border-radius: var(--borderRadiusTL) var(--borderRadiusTR) var(--borderRadiusBR) var(--borderRadiusBL);
  --borderRadiusTL:  var(--p3);
  --borderRadiusTR:  var(--p3);
  --borderRadiusBL:  var(--p3);
  --borderRadiusBR:  var(--p3);
  --borderRadius: var(--p3) !important;
}
.border-radius-4 {
  border-radius: var(--borderRadiusTL) var(--borderRadiusTR) var(--borderRadiusBR) var(--borderRadiusBL);
  --borderRadiusTL:  var(--p4);
  --borderRadiusTR:  var(--p4);
  --borderRadiusBL:  var(--p4);
  --borderRadiusBR:  var(--p4);
  --borderRadius: var(--p4) !important;
}
.border-radius-5 {
  border-radius: var(--borderRadiusTL) var(--borderRadiusTR) var(--borderRadiusBR) var(--borderRadiusBL);
  --borderRadiusTL:  var(--p5);
  --borderRadiusTR:  var(--p5);
  --borderRadiusBL:  var(--p5);
  --borderRadiusBR:  var(--p5);
  --borderRadius: var(--p5) !important;
}
.border-radius-100 {
  border-radius: 100%;
  --borderRadius: 100% !important;
}
.border-radius-50 {
  border-radius: 50%;
  --borderRadius: 50% !important;
}


.border-radius-tl-0{--borderRadiusTL: 0}
.border-radius-tr-0{--borderRadiusTR: 0}
.border-radius-bl-0{--borderRadiusBL:0}
.border-radius-br-0{--borderRadiusBR: 0}

.border-radius-tl-05{--borderRadiusTL: calc(var(--p1) * .75)}
.border-radius-tr-05{--borderRadiusTR: calc(var(--p1) * .75)}
.border-radius-bl-05{--borderRadiusBL: calc(var(--p1) * .75)}
.border-radius-br-05{--borderRadiusBR: calc(var(--p1) * .75)}

.border-radius-tl-1{--borderRadiusTL:  var(--p1)}
.border-radius-tr-1{--borderRadiusTR:  var(--p1)}
.border-radius-bl-1{--borderRadiusBL:  var(--p1)}
.border-radius-br-1{--borderRadiusBR:  var(--p1)}

.border-radius-tl-2{--borderRadiusTL:  var(--p2)}
.border-radius-tr-2{--borderRadiusTR:  var(--p2)}
.border-radius-bl-2{--borderRadiusBL:  var(--p2)}
.border-radius-br-2{--borderRadiusBR:  var(--p2)}

.border-radius-tl-3{--borderRadiusTL:  var(--p3)}
.border-radius-tr-3{--borderRadiusTR:  var(--p3)}
.border-radius-bl-3{--borderRadiusBL:  var(--p3)}
.border-radius-br-3{--borderRadiusBR:  var(--p3)}

.border-radius-tl-4{--borderRadiusTL:  var(--p4)}
.border-radius-tr-4{--borderRadiusTR:  var(--p4)}
.border-radius-bl-4{--borderRadiusBL:  var(--p4)}
.border-radius-br-4{--borderRadiusBR:  var(--p4)}

.border-radius-tl-5{--borderRadiusTL:  var(--p5)}
.border-radius-tr-5{--borderRadiusTR:  var(--p5)}
.border-radius-bl-5{--borderRadiusBL:  var(--p5)}
.border-radius-br-5{--borderRadiusBR:  var(--p5)}


/* outlines */

.outline-weight-1 {
  outline: 1px solid var(--outline-color);
}
.outline-weight-2 {
  outline: 2px solid var(--outline-color);
}
.outline-weight-3 {
  outline: 3px solid var(--outline-color);
}
.outline-weight-4 {
  outline: 4px solid var(--outline-color);
}
.outline-weight-5 {
  outline: 5px solid var(--outline-color);
}
.outline-primary-100 {
  --outline-color: var(--primary-100);
}
.outline-primary-200 {
  --outline-color: var(--primary-200);
}
.outline-primary-300 {
  --outline-color: var(--primary-300);
}
.outline-primary-400 {
  --outline-color: var(--primary-400);
}
.outline-primary-500 {
  --outline-color: var(--primary-500);
}
.outline-grey-100 {
  --outline-color: var(--grey-100);
}
.outline-grey-200 {
  --outline-color: var(--grey-200);
}
.outline-grey-300 {
  --outline-color: var(--grey-300);
}
.outline-grey-400 {
  --outline-color: var(--grey-400);
}
.outline-grey-500 {
  --outline-color: var(--grey-500);
}
.outline-grey-600 {
  --outline-color: var(--grey-600);
}
.outline-grey-700 {
  --outline-color: var(--grey-700);
}
.outline-grey-800 {
  --outline-color: var(--grey-800);
}
.outline-error {
  --outline-color: var(--error);
}
.outline-success {
  --outline-color: var(--success);
}
.outline-waring {
  --outline-color: var(--warning);
}
.outline-black {
  --outline-color: var(--black);
}
.outline-white {
  --outline-color: var(--white);
}

/* BACKGROUND */
.bg-gradient-to-r {
  --gradient-from-pos: 0;
  --gradient-to-pos: 100%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to right, var(--gradient-stops));
}

.bg-gradient-to-r-50 {
  --gradient-from-pos: 10%;
  --gradient-to-pos: 60%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to right, var(--gradient-stops));
}

.bg-gradient-to-r-80 {
  --gradient-from-pos: 10%;
  --gradient-to-pos: 90%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to right, var(--gradient-stops));
}


.bg-gradient-to-l {
  --gradient-from-pos: 0;
  --gradient-to-pos: 100%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to left, var(--gradient-stops));
}

.bg-gradient-to-l-50 {
  --gradient-from-pos: 10%;
  --gradient-to-pos: 60%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to left, var(--gradient-stops));
}

.bg-gradient-to-l-80 {
  --gradient-from-pos: 10%;
  --gradient-to-pos:90%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to left, var(--gradient-stops));
}


.bg-gradient-to-t {
  --gradient-from-pos: 0;
  --gradient-to-pos: 100%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to top, var(--gradient-stops));
}

.bg-gradient-to-t-50 {
  --gradient-from-pos: 10%;
  --gradient-to-pos: 50%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to top, var(--gradient-stops));
}


.bg-gradient-to-b {
  --gradient-from-pos: 0;
  --gradient-to-pos: 100%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to bottom, var(--gradient-stops));
}

.bg-gradient-to-b-50 {
  --gradient-from-pos: 10%;
  --gradient-to-pos: 40%;
  --gradient-stops: var(--gradient-from) var(--gradient-from-pos),
    var(--gradient-to) var(--gradient-to-pos);
  background-image: linear-gradient(to bottom, var(--gradient-stops));
}


.from-primary-100 {
  --gradient-from: var(--primary-100);
  --gradient-to: transparent;
}
.from-primary-200 {
  --gradient-from: var(--primary-200);
  --gradient-to: transparent;
}
.from-primary-300 {
  --gradient-from: var(--primary-300);
  --gradient-to: transparent;
}
.from-primary-400 {
  --gradient-from: var(--primary-400);
  --gradient-to: transparent;
}
.from-primary-500 {
  --gradient-from: var(--primary-500);
  --gradient-to: transparent;
}
.from-white {
  --gradient-from: var(--white);
  --gradient-to: transparent;
}

.from-bg-body {
  --gradient-from: var(--bg-body);
  --gradient-to: transparent;
}
.from-black {
  --gradient-from: var(--black);
  --gradient-to: transparent;
}

.from-grey-100 {
  --gradient-from: var(--grey-100);
  --gradient-to: transparent;
}
.from-grey-200 {
  --gradient-from: var(--grey-200);
  --gradient-to: transparent;
}
.from-grey-300 {
  --gradient-from: var(--grey-300);
  --gradient-to: transparent;
}
.from-grey-400 {
  --gradient-from: var(--grey-400);
  --gradient-to: transparent;
}
.from-grey-500 {
  --gradient-from: var(--grey-500);
  --gradient-to: transparent;
}
.from-grey-600 {
  --gradient-from: var(--grey-600);
  --gradient-to: transparent;
}
.from-grey-700 {
  --gradient-from: var(--grey-700);
  --gradient-to: transparent;
}
.from-grey-800 {
  --gradient-from: var(--grey-800);
  --gradient-to: transparent;
}

i {
  --iconSize: var(--p2);
  --rotation:0;
  width: var(--iconSize);
  height: var(--iconSize);
  display: inline-table;
  aspect-ratio: 1;
    max-width: var(--iconSize);
  max-height: var(--iconSize);
}
table i {
  display: table-cell;
  max-width:revert;
  max-height:revert;
}
i.small {
  --iconSize: var(--p2);
}
i.medium {
  --iconSize: var(--p3);
}
i.large {
  --iconSize: var(--p4);
}

i:after {
  content: "";
  display: block;
  width: inherit;
  height:inherit;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(0) brightness(1.8);
  max-width:inherit;
  max-height: inherit;
}


.ic-black:after { filter:brightness(0) saturate(0) !important}

.ic-white:after {  filter: saturate(0) brightness(10);}
.text-white:after{filter: saturate(0) brightness(10);}
.ic-success:after{filter:saturate(30) hue-rotate(95deg) brightness(1.6)}
.ic-error:after{filter:saturate(16) hue-rotate(0) brightness(1.5)}
.ic-warning:after{filter:saturate(50) hue-rotate(59deg) brightness(1.9)}

.ic-orange:after{filter:invert(61%) sepia(81%) saturate(684%) hue-rotate(356deg) brightness(98%) contrast(88%)}
.ic-green:after{filter:invert(59%) sepia(28%) saturate(561%) hue-rotate(49deg) brightness(96%) contrast(92%)}
.ic-red:after{filter: invert(54%) sepia(40%) saturate(876%) hue-rotate(309deg) brightness(84%) contrast(108%);}
.ic-purple:after{filter: invert(69%) sepia(8%) saturate(2865%) hue-rotate(283deg) brightness(84%) contrast(77%)}
.ic-blue:after{filter:invert(62%) sepia(21%) saturate(721%) hue-rotate(164deg) brightness(92%) contrast(89%)}

.hover-ic-white:hover:after, .hover-ic-white:hover i:after{filter:brightness(9)}
.hover-ic-black:hover:after, .hover-ic-black:hover i:after{filter:brightness(0) saturate(0) !important}

.hover-ic-success:hover:after{filter:saturate(30) hue-rotate(95deg) brightness(1.6)}
.hover-ic-error:hover:after{filter:saturate(16) hue-rotate(0) brightness(1.5)}
.hover-ic-warning:hover:after{filter:saturate(50) hue-rotate(59deg) brightness(1.9)}

.hover-ic-orange:hover:after{filter:invert(61%) sepia(81%) saturate(684%) hue-rotate(356deg) brightness(98%) contrast(88%)}
.hover-ic-green:hover:after{filter:invert(59%) sepia(28%) saturate(561%) hue-rotate(49deg) brightness(96%) contrast(92%)}
.hover-ic-red:hover:after{filter: invert(54%) sepia(40%) saturate(876%) hue-rotate(309deg) brightness(84%) contrast(108%);}
.hover-ic-purple:hover:after{filter: invert(69%) sepia(8%) saturate(2865%) hue-rotate(283deg) brightness(84%) contrast(77%)}
.hover-ic-blue:hover:after{filter:invert(62%) sepia(21%) saturate(721%) hue-rotate(164deg) brightness(92%) contrast(89%)}


.ic-alert:after {
  background-image: url(../images/icons/icon-alert.svg);
}
.ic-alert-2:after {
  background-image: url(../images/icons/icon-alert-2.svg);
}
.ic-alert-circle:after {
  background-image: url(../images/icons/icon-alert-circle.svg);
}
.ic-arrow-left:after {
  background-image: url(../images/icons/icon-arrow-left.svg);
}
.ic-arrow-right:after {
  background-image: url(../images/icons/icon-arrow-right.svg);
}
.ic-arrow-up:after {
  background-image: url(../images/icons/icon-top-left.svg);
}
.ic-arrow-down:after {
  background-image: url(../images/icons/icon-arrow-down.svg);
}
.ic-arrow-up:after {
  background-image: url(../images/icons/icon-arrow-up.svg);
}
.ic-arrow-double:after {
  background-image: url(../images/icons/icon-arrow-double.svg);
}
.ic-barcode:after {
  background-image: url(../images/icons/icon-barcode.svg);
}
.ic-bell:after {
  background-image: url(../images/icons/icon-bell.svg);
}
.ic-best:after {
  background-image: url(../images/icons/icon-best.svg);
}
.ic-box:after {
  background-image: url(../images/icons/icon-box.svg);
}
.ic-calendar:after {
  background-image: url(../images/icons/icon-calendar.svg);
}
.ic-bundle-sale:after {
  background-image: url(../images/icons/icon-bundle-sale.svg);
}
.ic-burger:after {
  background-image: url(../images/icons/icon-burger.svg);
}
.ic-buy-again:after {
  background-image: url(../images/icons/icon-buy-again.svg);
}
.ic-card:after {
  background-image: url(../images/icons/icon-card.svg);
}
.ic-cart:after {
  background-image: url(../images/icons/icon-cart.svg);
}
.ic-cart-plus:after {
  background-image: url(../images/icons/icon-cart-plus.svg);
}
.ic-check:after {
  background-image: url(../images/icons/icon-check.svg);
}
.ic-check-circle:after {
  background-image: url(../images/icons/icon-check-circle.svg);
}
.ic-clock:after {
  background-image: url(../images/icons/icon-clock.svg);
}
.ic-close:after {
  background-image: url(../images/icons/icon-close.svg);
}
.ic-close-circle:after {
  background-image: url(../images/icons/icon-close-circle.svg);
}
.ic-copy:after {
  background-image: url(../images/icons/icon-copy.svg);
}
.ic-coupon:after {
  background-image: url(../images/icons/icon-coupon.svg);
}
.ic-document:after {
  background-image: url(../images/icons/icon-document.svg);
}
.ic-document-download:after {
  background-image: url(../images/icons/icon-document-download.svg);
}
.ic-edit:after {
  background-image: url(../images/icons/icon-edit.svg);
}
.ic-email:after {
  background-image: url(../images/icons/icon-email.svg);
}
.ic-events:after {
  background-image: url(../images/icons/icon-events.svg);
}
.ic-filters:after {
  background-image: url(../images/icons/icon-filters.svg);
}
.ic-fresh:after {
  background-image: url(../images/icons/icon-fresh.svg);
  filter: invert(51%) sepia(69%) saturate(425%) hue-rotate(150deg) brightness(94%) contrast(102%)
}

.ic-lactose:after {
  background-image: url(../images/icons/icon-lactose.svg);
  filter: invert(83%) sepia(9%) saturate(1714%) hue-rotate(162deg) brightness(91%) contrast(90%)
}

.ic-gluten:after {
  background-image: url(../images/icons/icon-gluten.svg);
  filter:invert(73%) sepia(27%) saturate(210%) hue-rotate(350deg) brightness(82%) contrast(87%)
}
.ic-grid:after {
  background-image: url(../images/icons/icon-grid.svg);
}
.ic-label-star:after {
  background-image: url(../images/icons/icon-label-star.svg);
}
.ic-list:after {
  background-image: url(../images/icons/icon-list.svg);
}
.ic-heart:after {
  background-image: url(../images/icons/icon-heart.svg);
}
.ic-heart-o:after {
  background-image: url(../images/icons/icon-heart-o.svg);
}
.ic-hide:after {
  background-image: url(../images/icons/icon-hide.svg);
}
.ic-home:after {
  background-image: url(../images/icons/icon-home.svg);
}
.ic-info:after {
  background-image: url(../images/icons/icon-info.svg);
}
.ic-location:after {
  background-image: url(../images/icons/icon-location.svg);
}
.ic-login:after {
  background-image: url(../images/icons/icon-login.svg);
}
.ic-logout:after {
  background-image: url(../images/icons/icon-logout.svg);
}
.ic-message:after {
  background-image: url(../images/icons/icon-message.svg);
}
.ic-minus:after {
  background-image: url(../images/icons/icon-minus.svg);
}
.ic-new:after {
  background-image: url(../images/icons/icon-new.svg);
}
.ic-order:after {
  background-image: url(../images/icons/icon-order.svg);
}
.ic-order-no:after {
  background-image: url(../images/icons/icon-order-no.svg);
}
.ic-order-ok:after {
  background-image: url(../images/icons/icon-order-ok.svg);
}
.ic-order-processing:after {
  background-image: url(../images/icons/icon-order-processing.svg);
}
.ic-password:after {
  background-image: url(../images/icons/icon-password.svg);
}
.ic-password-no:after {
  background-image: url(../images/icons/icon-password-no.svg);
}

.ic-premium:after {
  background-image: url(../images/icons/icon-premium.svg);
}
.ic-phone:after {
  background-image: url(../images/icons/icon-phone.svg);
}
.ic-plus:after {
  background-image: url(../images/icons/icon-plus.svg);
}
.ic-preorder:after {
  background-image: url(../images/icons/icon-preorder.svg);
}
.ic-price-down:after {
  background-image: url(../images/icons/icon-price-down.svg);
}
.ic-price-up:after {
  background-image: url(../images/icons/icon-price-up.svg);
}
.ic-question:after {
  background-image: url(../images/icons/icon-question.svg);
}
.ic-refound:after {
  background-image: url(../images/icons/icon-refound.svg);
}
.ic-restaurant:after {
  background-image: url(../images/icons/icon-restaurant.svg);
}
.ic-sale:after {
  background-image: url(../images/icons/icon-sale.svg);
}
.ic-saved:after {
  background-image: url(../images/icons/icon-saved.svg);
}
.ic-saved-search:after {
  background-image: url(../images/icons/icon-saved-search.svg);
}
.ic-search:after {
  background-image: url(../images/icons/icon-search.svg);
}
.ic-search-error:after {
  background-image: url(../images/icons/icon-search-error.svg);
}
.ic-season:after {
  background-image: url(../images/icons/icon-season.svg);
}

.ic-settings:after {
  background-image: url(../images/icons/icon-settings.svg);
}
.ic-shipping:after {
  background-image: url(../images/icons/icon-shipping.svg);
}
.ic-shop:after {
  background-image: url(../images/icons/icon-shop.svg);
}
.ic-sku:after {
  background-image: url(../images/icons/icon-sku.svg);
}
.ic-show:after {
  background-image: url(../images/icons/icon-show.svg);
}
.ic-star:after {
  background-image: url(../images/icons/icon-star.svg);
}
.ic-star-o:after {
  background-image: url(../images/icons/icon-star-o.svg);
}
.ic-spinner:after {
  background-image: url(../images/icons/icon-spinner.svg);
}
.ic-switch:after {
  background-image: url(../images/icons/icon-switch.svg);
}
.ic-trash:after {
  background-image: url(../images/icons/icon-trash.svg);
}
.ic-trend:after {
  background-image: url(../images/icons/icon-trend.svg);
}
.ic-user:after {
  background-image: url(../images/icons/icon-user.svg);
}

.ic-facebook:after {
  background-image: url(../images/icons/icon-facebook.svg); filter:none
}
.ic-instagram:after {
  background-image: url(../images/icons/icon-instagram.svg);filter:none
}
.ic-youtube:after {
  background-image: url(../images/icons/icon-youtube.svg);filter:none
}
.ic-whatsapp:after {
  background-image: url(../images/icons/icon-whatsapp.svg);filter:none
}




/* FORMS */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--primary-100) inset;
  --borderColor:var(--primary-400)
}
input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

[type="text"],
[type="email"],
[type="tel"],
[type="password"],
[type="number"],
select,
optgroup,
textarea,
::file-selector-button {
  --borderColor: var(--grey-200);
  border-radius: var(--p3);
  font: inherit;
  font-size:var(--14);
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border: 1px solid var(--borderColor);
  background-color: transparent;
  opacity: 1;
  width: 100%;
  padding: 0.5rem .8rem;
  background: white;
}

textarea{border-radius:var(--p2); padding-block:.8rem}
:is(input, select, optgroup, textarea, button):focus-visible,
:is(input, select, optgroup, textarea, button):focus {
  outline-color: var(--grey-200);
}
label {
  font-size: var(--14);
  font-weight: 500;
  color: var(--primary-500);
  display: inline-block;
  cursor: pointer;
}
label + input , label + select , label + textarea{
  margin-top: var(--p1);
}
:is(input, select, optgroup, textarea, button)[aria-invalid="true"] {
  --borderColor: var(--error);
  outline-color: var(--error);
}
:is(input, select, optgroup, textarea, button)[aria-valid="true"] {
  --borderColor: var(--success);
  outline-color: var(--success);
}
.field-error{font-size:var(--14); margin-top:var(--p1); color:var(--error); text-align:left}

input[type="checkbox"] {
  -webkit-appearance: none;
  position: relative;
  border: 1px solid var(--grey-200);
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 2px;
}
input[type="checkbox"]:checked {
  background: var(--primary-300);
  border-color: var(--primary-300);
}
input[type="checkbox"]:checked:before {
  content: "";
  position: absolute;
  inset: 3px;
  width: 8px;
  height: 8px;
  background: url(../images/icons/ic-check.svg) center center no-repeat;
  background-size: contain;
  filter: saturate(0) brightness(4);
}

input[type="checkbox"] + div > label {
  translate: 0 -0.4ch;
}

input[type="radio"] {
  -webkit-appearance: none;
  position: relative;
  border: 1px solid var(--grey-200);
  width: 16px;
  height: 16px;
  border-radius: calc(infinity * 1px);
  background: white;
}
input[type="radio"]:checked {
  background: var(--primary-300);
  border-color: var(--primary-300);
}
input[type="radio"]:checked:before {
  content: "";
  position: absolute;
  inset: 3px;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: calc(infinity * 1px);
}

fieldset {
  border: 0;
  padding: 0;
}
fieldset legend {
  margin-bottom: var(--p1);
  font-size: var(--14);
  font-weight: 600;
  color: var(--primary-500);
  display: inline-block;
}



select {
  -webkit-appearance: none;
  padding-right: var(--p4);
  background:var(--white) url(../images/icons/icon-arrow-down.svg) calc(100% - var(--p2))
    center no-repeat;
  background-size: var(--p1);
}

.select-width-dropdown {
  position: relative;
  display: inline-block;

  max-width: 100%;
}

.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  border: 1px solid var(--primary-100);
  border-radius: var(--p1);
  background-color: var(--white);
  list-style: none;
  padding: 0;
  margin: var(--p1) 0 0;
  max-height: 300px;
  overflow-y: auto;
  font-size: var(--14);
z-index:9999
}

.select-dropdown.hidden {
  display: none;
}
.select-dropdown::-webkit-scrollbar {
  width: 7px;
}
.select-dropdown::-webkit-scrollbar-track {
  background: var(--grey-100);
  border-radius: 25px;
}
.select-dropdown::-webkit-scrollbar-thumb {
  background: var(--grey-800);
  border-radius: 25px;
}
.select-dropdown li {
  padding: var(--p1);
  cursor: pointer;
}
/* Highlight the selected option */
.select-dropdown li.selected {
  background-color: #f2f2f2;

  font-weight: bold;
}
.select-dropdown li:hover,
.select-dropdown li:focus {
  background-color: #f2f2f2;
}

/*
.select-width-dropdown button:focus + .select-dropdown {
  opacity: 1;
  pointer-events: auto;
}
*/


/* PROGRESS BAR */
progress {
  -webkit-appearance: none;
  block-size:4px;
  vertical-align: middle;
  inline-size: -webkit-fill-available;
  width:100%;
  display:block;
  border-radius:4px;
}


::-webkit-progress-bar {
  background-color: var(--background-color, #dadada);
}
::-webkit-progress-value {
  background-color:var(--text-color, green)
}

::-moz-progress-bar { 
  background-color: var(--text-color, green)
}


@media screen and (min-width:64em){
  progress {max-width: 30rem;}
}


/* CIRCULAR PROGRESS */
[data-circular-progress]{
  --size: min(140px, 10rem);
  --half-size: calc(var(--size) / 2);
  --stroke-width: 1rem;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 150);

  width:var(--size);
  height:calc(var(--size)*0.8);
  position:relative;
  animation: progress-animation 1s ease-out 0s 1 forwards;
  pointer-events:none

}
[data-circular-progress] circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}
[data-circular-progress] circle.bg {
  stroke: #ddd;
  transform: rotate(150deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray:calc((100 * var(--circumference)) / 150) calc(var(--circumference) - calc((100 * var(--circumference)) / 150));
  stroke-linecap: round;
 
}
[data-circular-progress] circle.fg {
  transform: rotate(150deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s ease-out 0s;
  stroke: var(--success);
}

@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@keyframes progress-animation {
  from {
    --progress: 0;
  }
  to {
    --progress: var(--percent);
  }
}



/* SWITCH BUTTON */
.switch {
  position: relative;
  display: inline-block;
  width: var(--p6);
  height: var(--p3);
  
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius:var(--p4);
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: calc(var(--p3) - 8px);
  width: calc(var(--p3) - 8px);
  left: 4px;
  bottom: 4px;
  background: white center center no-repeat;
  background-size:12px;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .switch-slider {
  background-color: var(--primary-300);
}

input:focus + .switch-slider {
  box-shadow: 0 0 1px  var(--primary-300);
}

input:checked + .switch-slider:before {
  -webkit-transform: translateX(calc(var(--p3) - 2px));
  -ms-transform: translateX(calc(var(--p3) - 2px));
  transform: translateX(calc(var(--p3) - 2px));
  background-image:url(../images/icons/icon-check.svg)
}