:root { 
   
   --boxShadow_z4L:-2px 0px 4px -1px rgba(0,0,0, 0.2), -4px 0px 5px 0px rgba(0,0,0, 0.14), -1px 0px 10px 0px rgba(0,0,0, 0.12);
   --boxShadow_z4R:2px 0px 4px -1px rgba(0,0,0, 0.2), 4px 0px 5px 0px rgba(0,0,0, 0.14), 1px 0px 10px 0px rgba(0,0,0, 0.12);
   --boxShadowInset_z4:inset 0px 0px 4px 2px rgba(0,0,0, 0.2), inset 0px 0px 5px 4px rgba(0,0,0, 0.14), inset 0px 0px 10px 1px rgba(0,0,0, 0.12);

   --boxShadow:0px 5px 6px -3px rgba(0,0,0, 0.2), 0px 9px 12px 1px rgba(0,0,0, 0.14), 0px 3px 16px 2px rgba(0,0,0, 0.12);
   --boxShadow_z0:0px 0px 0px 0px rgba(0,0,0, 0.2), 0px 0px 0px 0px rgba(0,0,0, 0.14), 0px 0px 0px 0px rgba(0,0,0, 0.12);
   --boxShadow_z1:0px 2px 1px -1px rgba(0,0,0, 0.2), 0px 1px 1px 0px rgba(0,0,0, 0.14), 0px 1px 3px 0px rgba(0,0,0, 0.12);
   --boxShadow_z2:0px 3px 1px -2px rgba(0,0,0, 0.2), 0px 2px 2px 0px rgba(0,0,0, 0.14), 0px 1px 5px 0px rgba(0,0,0, 0.12);
   --boxShadow_z3:0px 3px 3px -2px rgba(0,0,0, 0.2), 0px 3px 4px 0px rgba(0,0,0, 0.14), 0px 1px 8px 0px rgba(0,0,0, 0.12);
   --boxShadow_z4:0px 2px 4px -1px rgba(0,0,0, 0.2), 0px 4px 5px 0px rgba(0,0,0, 0.14), 0px 1px 10px 0px rgba(0,0,0, 0.12);
   --boxShadow_z5:0px 3px 5px -1px rgba(0,0,0, 0.2), 0px 5px 8px 0px rgba(0,0,0, 0.14), 0px 1px 14px 0px rgba(0,0,0, 0.12);
   --boxShadow_z6:0px 3px 5px -1px rgba(0,0,0, 0.2), 0px 6px 10px 0px rgba(0,0,0, 0.14), 0px 1px 18px 0px rgba(0,0,0, 0.12);
   --boxShadow_z7:0px 4px 5px -2px rgba(0,0,0, 0.2), 0px 7px 10px 1px rgba(0,0,0, 0.14), 0px 2px 16px 1px rgba(0,0,0, 0.12);
   --boxShadow_z8:0px 5px 5px -3px rgba(0,0,0, 0.2), 0px 8px 10px 1px rgba(0,0,0, 0.14), 0px 3px 14px 2px rgba(0,0,0, 0.12);
   --boxShadow_z9:0px 5px 5px -3px rgba(0,0,0, 0.2), 0px 8px 10px 1px rgba(0,0,0, 0.14), 0px 3px 14px 2px rgba(0,0,0, 0.12);
   --boxShadow_z10:0px 6px 6px -3px rgba(0,0,0, 0.2), 0px 10px 14px 1px rgba(0,0,0, 0.14), 0px 4px 18px 3px rgba(0,0,0, 0.12);
   --boxShadow_z11:0px 6px 7px -4px rgba(0,0,0, 0.2), 0px 11px 15px 1px rgba(0,0,0, 0.14), 0px 4px 20px 3px rgba(0,0,0, 0.12);
   --boxShadow_z12:0px 7px 8px -4px rgba(0,0,0, 0.2), 0px 12px 17px 2px rgba(0,0,0, 0.14), 0px 5px 22px 4px rgba(0,0,0, 0.12);
   --boxShadow_z13:0px 7px 8px -4px rgba(0,0,0, 0.2), 0px 13px 19px 2px rgba(0,0,0, 0.14), 0px 5px 24px 4px rgba(0,0,0, 0.12);
   --boxShadow_z14:0px 7px 9px -4px rgba(0,0,0, 0.2), 0px 14px 21px 2px rgba(0,0,0, 0.14), 0px 5px 26px 4px rgba(0,0,0, 0.12);
   --boxShadow_z15:0px 8px 9px -5px rgba(0,0,0, 0.2), 0px 15px 22px 2px rgba(0,0,0, 0.14), 0px 6px 28px 5px rgba(0,0,0, 0.12);
   --boxShadow_z16:0px 8px 10px -5px rgba(0,0,0, 0.2), 0px 16px 24px 2px rgba(0,0,0, 0.14), 0px 6px 30px 5px rgba(0,0,0, 0.12);
   --boxShadow_z17:0px 8px 11px -5px rgba(0,0,0, 0.2), 0px 17px 26px 2px rgba(0,0,0, 0.14), 0px 6px 32px 5px rgba(0,0,0, 0.12);
   --boxShadow_z18:0px 9px 11px -5px rgba(0,0,0, 0.2), 0px 18px 28px 2px rgba(0,0,0, 0.14), 0px 7px 34px 6px rgba(0,0,0, 0.12);
   --boxShadow_z19:0px 9px 12px -6px rgba(0,0,0, 0.2), 0px 19px 29px 2px rgba(0,0,0, 0.14), 0px 7px 36px 6px rgba(0,0,0, 0.12);
   --boxShadow_z20:0px 10px 13px -6px rgba(0,0,0, 0.2), 0px 20px 31px 3px rgba(0,0,0, 0.14), 0px 8px 38px 7px rgba(0,0,0, 0.12);
   --boxShadow_z21:0px 10px 13px -6px rgba(0,0,0, 0.2), 0px 21px 33px 3px rgba(0,0,0, 0.14), 0px 8px 40px 7px rgba(0,0,0, 0.12);
   --boxShadow_z22:0px 10px 14px -6px rgba(0,0,0, 0.2), 0px 22px 35px 3px rgba(0,0,0, 0.14), 0px 8px 42px 7px rgba(0,0,0, 0.12);
   --boxShadow_z23:0px 11px 14px -7px rgba(0,0,0, 0.2), 0px 23px 36px 3px rgba(0,0,0, 0.14), 0px 9px 44px 8px rgba(0,0,0, 0.12);
   --boxShadow_z24:0px 11px 15px -7px rgba(0,0,0, 0.2), 0px 24px 38px 3px rgba(0,0,0, 0.14), 0px 9px 46px 8px rgba(0,0,0, 0.12);


   /*Elements quickly accelerate and slowly decelerate between on-screen locations. It applies to growing and shrinking material, among other property changes.*/
   --standardEasing: cubic-bezier(0.4, 0, 0.2, 1); /*FastOutSlowIn Interpolator - Outgoing Velocity: 40% / Incoming Velocity: 80%*/
   /*Using the deceleration curve (also referred to as “ease out”) elements enter the screen at full velocity and slowly decelerate to a resting point.*/
   --decelerateEasing: cubic-bezier(0.0, 0.0, 0.2, 1); /*LinearOutSlowIn Interpolator - Outgoing Velocity: 0% - Incoming Velocity: 80%*/
   /*Using the acceleration curve (also referred to as “ease in”) elements leave the screen at full velocity. They do not decelerate when off-screen.*/
   --accelerateEasing: cubic-bezier(0.4, 0.0, 1, 1); /*FastOutLinearIn Interpolator - Outgoing Velocity: 40% - Incoming Velocity: 0%*/
   /*Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.*/
   --sharpEasing: cubic-bezier(0.4, 0.0, 0.6, 1); /*FastOutFastIn Interpolator - Outgoing Velocity: 40% / Incoming Velocity: 40%*/

   --boxShadowTransition:box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
   --opacityTransition:opacity 150ms cubic-bezier(0.4, 0, 0.6, 1);

   --iconOverlay:inset 20px 20px 0 10px rgba(var(--blackRGB-std), 0.42);

   --hover4White:inset 0 100px rgba(0,0,0, 0.04);
   --hover4Color:inset 0 100px rgba(255,255,255, 0.08);
   --hover4Img:inset 0 100px rgba(0,0,0, 0.12);

   --focus4White:inset 0 100px rgba(0,0,0, 0.12);
   --focus4Color:inset 0 100px rgba(255,255,255, 0.24);
   --focus4Img:inset 0 100px rgba(0,0,0, 0.36);

   --selected4White:inset 0 100px rgba(var(--primaryColor),0.08);
   --selected4Color:inset 0 100px rgba(255,255,255, 0.16);
   --selected4Img:inset 0 100px rgba(0,0,0, 0.24);

   --activated4White:inset 0 100px rgba(var(--primaryColor),0.12);
   --activated4Color:inset 0 100px rgba(255,255,255, 0.24);
   --activated4Img:inset 0 100px rgba(0,0,0, 0.36);

   --pressed4White:inset 0 100px rgba(var(--primaryColor), 0.16);
   --pressed4Color:inset 0 100px rgba(255,255,255, 0.32);
   --pressed4Img:inset 0 100px rgba(0,0,0, 0.48);

   --dragged4White:inset 0 100px rgba(var(--primaryColor),0.08);
   --dragged4Color:inset 0 100px rgba(255,255,255, 0.16);
   --dragged4Img:inset 0 100px rgba(0,0,0, 0.32);

   --focusRedOnWhite:1000px 1000px rgba(var(--redRGB),0.12) inset;
   --hoverRedOnWhite:1000px 1000px rgba(var(--redRGB),0.04) inset;
   --activateRedOnWhite:1000px 1000px rgba(var(--redRGB),0.12) inset;

   background-color:rgba(var(--whiteRGB-std), 1);
   font-family:var(--stdFont); font-weight:400; font-size:15px; letter-spacing:0.25px;
   color:rgb(var(--blackRGB)); fill:rgba(var(--blackRGB), 0.76);
}

/* -------------------------------------------------------------------------------------------------------- */
/*                         >>>>  Application des nouveaux styles TYPOGRAPHIE  <<<<                          */
/* -------------------------------------------------------------------------------------------------------- */
.h4 { font-family:var(--titleFont); font-weight:400; font-size:33px; letter-spacing:0.25px; }
.h5 { font-family:var(--titleFont); font-weight:400; font-size:23px; letter-spacing:0; }
.h6 { font-family:var(--titleFont); font-weight:500; font-size:19px; letter-spacing:0.15px; }
.h7, header .pageTitle { font-family:var(--titleFont); font-weight:400; font-size:18px; letter-spacing:0.1px; }
.subtitle1, input, label, .wrapperText > div:first-child { font-family:var(--titleFont); font-weight:400; font-size:15px; letter-spacing:0.15px; }
.subtitle2 { font-family:var(--titleFont); font-weight:500; font-size:13px; letter-spacing:0.1px; }
.body1 { font-family:var(--stdFont); font-weight:400; font-size:17px; letter-spacing:0.5px; }
.action_ext { font-family:var(--titleFont); font-weight:500; font-size:17px; letter-spacing:0.5px; }
.body2 { font-family:var(--stdFont); font-weight:400; font-size:15px; letter-spacing:0.25px; }
.BUTTON, button { font-family:var(--stdFont); font-weight:500; font-size:15px; letter-spacing:0.75px; text-transform:uppercase; }
.OVERLINE { font-family:var(--stdFont); font-weight:400; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.caption, form.checked *:placeholder-shown + label, form.checked *:invalid + label, .wrapperText > div:last-child, input:not(:disabled):not(:read-only):is(:focus,:active) + label, 
   input:not([type=date]):not(:placeholder-shown):not(:focus) + label, input[type=date]:valid + label, *[data-tooltip]::after, *[data-tooltip-left]::after 
   { font-family:var(--stdFont); font-weight:400; font-size:13px; letter-spacing:0.4px; text-transform:none; }
.strong { font-weight:600; }
.red, .red > svg, .error, .error > svg, .errorAll, .errorAll > * { color:rgb(var(--error))!important; fill:rgb(var(--error))!important; }

.action_ext { font-family:var(--titleFont); font-weight:500; font-size:17px; letter-spacing:0.5px; }
sup { color:rgb(var(--error)); line-height:0; }

/* -------------------------------------------------------------------------------------------------------- */
/*                          >>>>  Application des nouveaux styles :: GLOBAL  <<<<                           */
/* -------------------------------------------------------------------------------------------------------- */
body, header, main, footer { will-change:color, background-color; transition:color 250ms var(--standardEasing), background-color 500ms var(--standardEasing); }

* { box-sizing: border-box; -webkit-tap-highlight-color:transparent; }
[aria-expanded=false][aria-hidden=true] { pointer-events:none; }
[onclick] { cursor:pointer; }
[role=none] { width:100%; height:4px; flex:none; }
:disabled, [disabled=true], [disabled], .disabled { pointer-events:none!important; opacity:0.38; cursor:default; color:rgb(var(--blackRGB))!important; }
:any-link, a { text-decoration:none; color:inherit; font:inherit; }
::placeholder { opacity:0.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; font:inherit; will-change:opacity; transition:opacity 200ms var(--standardEasing); }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:rgb(var(--whiteRGB-std)); width:50%; }
::-webkit-scrollbar-corner { background:rgb(var(--whiteRGB-std)); }
::-webkit-scrollbar-thumb { background:rgba(var(--blackRGB), 0.42); border-radius:8px; border:2px solid rgba(var(--blackRGB), 0.12); width:50px; }

.heightShrink { overflow-y:clip; min-height:unset!important; height:0!important; padding:0!important; margin:0!important; border:0 none!important; margin-inline:0!important; padding-inline:0!important; outline:0; will-change:opacity, height; transition:height 150ms var(--standardEasing), opacity 75ms linear!important; }
.widthShrink { overflow-x:clip; min-width:unset!important; width:0!important; padding:0!important; margin:0!important; border:0 none!important; margin-block:0!important; padding-block:0!important; outline:0; will-change:opacity, width; transition:width 150ms var(--standardEasing), opacity 75ms linear!important; }
.widthShrink > [role="button"], .heightShrink > [role="button"] { opacity:0; }
.shrinkable { position:unset; transform:scale(1); will-change:opacity, transform; transition:transform 150ms var(--standardEasing) 30ms, opacity 75ms linear 30ms; }
.shrinkable.shrinkAll { position:fixed!important; transform:scale(0)!important; will-change:opacity, transform; transition:transform 150ms var(--standardEasing), opacity 100ms linear!important; }



/*=========================================================================================*/
/* ----------------------------------- ANIMATIONS -----------------------------------------*/
[role="tabpanel"][aria-hidden="false"] { z-index:2!important; opacity:1; transform:scale(1); transform-origin:center; transition:transform 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms, opacity 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms; }
[role="tabpanel"][aria-hidden="true"] /*state by default*/ { opacity:0; transform:scale(0.92); transform-origin:center; will-change:opacity,transform; transition:opacity 90ms cubic-bezier(0.4, 0.0, 1, 1), transform 1ms linear 100ms; }

#backdrop { display:flex; position:fixed; top:0; left:0; height:0; width:0; z-index:0; cursor:default; opacity:0; background-color:rgba(var(--blackRGB-std), 0.32); flex-flow:column nowrap; justify-content:center; align-items:center; will-change:opacity; transition:opacity 75ms linear, width 10ms linear 100ms, height 10ms linear 100ms; }
#backdrop.white { background-color:rgba(var(--whiteRGB-std), 0.32); }
#backdrop.fadeIn { z-index:23; right:0; bottom:0; height:100%; width:100%; opacity:1; backdrop-filter:saturate(0.5) blur(0.2px); will-change:opacity, backdrop-filter; transition:opacity 150ms linear, backdrop-filter 150ms linear; }

[role="dialog"] { transform:scale(0.8); opacity:0; will-change:opacity, transform; transition:opacity 75ms linear, transform 5ms linear 75ms; }
[role="dialog"][aria-expanded=true] { transform:scale(1); opacity:1; will-change:opacity, transform; transition:transform 150ms cubic-bezier(0.0, 0.0, 0.2, 1) 10ms, opacity 45ms linear 10ms, var(--boxShadowTransition)!important; }

ul[role="menu"][aria-expanded] { transform:scale(0.8); transform-origin:top right; z-index:0; position:fixed; right:20px; top:48px; width:fit-content; min-width:112px; max-width:320px; padding:8px 0; margin:0; color:rgba(var(--blackRGB),0.87); background-color:rgb(var(--whiteRGB-std)); border:1px solid rgba(var(--blackRGB), 0.12); opacity:0; will-change:opacity,transform,box-shadow; transition:opacity 75ms linear, transform 5ms linear 75ms; }
ul[role="menu"][aria-expanded=true] { z-index:24; transform:scale(1); opacity:1; box-shadow:var(--boxShadow_z8); will-change:opacity, transform, box-shadow; transition:transform 150ms cubic-bezier(0.0, 0.0, 0.2, 1) 10ms, opacity 45ms linear 10ms, var(--boxShadowTransition)!important; }


/* ---- Transformation container FadeThrough variant ---- */   
.expanding_trans { width:100%!important; height:100%!important; top:0!important; right:0; bottom:0; left:0!important; transform:translateX(0)!important; border-radius:0!important; background-color:rgb(var(--whiteRGB-std))!important; will-change:top, right, bottom, left, width, height, background-color, border-radius!important; transition:all 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 100ms linear 200ms!important; }
.outgoing_trans { opacity:0!important; position:absolute; will-change:opacity; transition:opacity 90ms cubic-bezier(0.4, 0.0, 1, 1), position 1ms linear 90ms; }
.incoming_trans { opacity:1!important; will-change:opacity; transition:opacity 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms; }
.expanding_callBack { will-change:top, right, bottom, left, width, height, border-radius!important; transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1)!important; }
.outgoing_callBack { will-change:opacity; transition:opacity 250ms cubic-bezier(0.4, 0, 0.2, 1)!important; }
.incoming_callBack { will-change:opacity; transition:opacity 67ms linear 50ms!important; }

/* ---- Transformation container Elevation variant 4 list ---- */   
.elevation_trans { flex-flow:column nowrap; width:100%!important; height:100%!important; top:0!important; right:0; bottom:0; left:0!important; background-color:rgb(var(--whiteRGB-std))!important;  will-change:top, right, bottom, left, background-color, height; transition:all 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 100ms linear 200ms!important; }
.incoming_fadein_trans { opacity:1!important; will-change:opacity; transition:opacity 60ms linear 60ms; }
.background_trans { transform:scale(0.85); transform-origin:center;  transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)!important; }
.elevation_callBack { will-change:top, right, bottom, left, width, height; transition:all 250ms cubic-bezier(0.4, 0, 0.2, 1)!important; }
.background_callBack { transform:scale(1); transform-origin:center; will-change:transform; transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1)!important; }
.incoming_fadein_callBack { will-change:opacity; transition:opacity 67ms linear 67ms!important; }

#btnMapPoint.expanding_trans, #btnMapArea.expanding_trans { transform:translateX(calc(-100% + 56px + 16px))!important; z-index:24!important; }
#backdrop.fadeIn.elemTrans { will-change:opacity; transition:opacity 90ms cubic-bezier(0, 0, 1, 1); }
#backdrop.elemTrans { will-change:opacity; transition:opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 150ms linear 200ms; }
/* ----------------------------------- ANIMATIONS -----------------------------------------*/
/*=========================================================================================*/



section.bottomSheet { z-index:24; position:fixed; flex:none; bottom:0; left:0; right:0; width:max(100%,100vw,380px); height:fit-content; overflow:hidden; padding:8px 8px 16px 8px; border-radius:16px 16px 0 0; background-color:rgb(var(--whiteRGB-std)); color:rgb(var(--blackRGB)); fill:rgba(var(--blackRGB), 0.76); display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; will-change:height, transform; transform:translateY(calc(100% + 16px)); transition:transform 200ms var(--sharpEasing); }
section.bottomSheet[aria-expanded=true] {  transform:translateY(0); transition:transform 250ms var(--sharpEasing); }

ul[role="menu"] > li, ul.floatingMenu > li, ul.dropDown > li { white-space:nowrap; position:relative; height:48px; margin:0; padding:0 16px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }	
ul[role="menu"] > li > .label, ul.floatingMenu > li > .label, ul.dropDown > li .label { flex:none; width:100px; }	
ul[role="menu"] > li > input:not([type=radio]):not([type=checkbox]), ul.floatingMenu > li > input:not([type=radio]):not([type=checkbox]), ul.dropDown > li input:not([type=radio]):not([type=checkbox]) { flex:1; height:32px; border-width:0 0 1px 0; border-radius:0; }	


[role="dialog"] { position:fixed; flex:none; top:0; right:0; bottom:0; left:0; min-width:280px; width:calc(100% - 16px); max-width:560px; min-height:182px; max-height:fit-content; margin:auto; background-color:rgb(var(--whiteRGB-std)); padding:0; z-index:24; opacity:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:16px; box-shadow:var(--boxShadow_z24); }
[role="dialog"] div.h6 { flex:none; padding:calc(40px - 19px) 0 0 24px; margin-bottom:28px; color:rgba(var(--blackRGB), 0.87); text-align:left; /*H6*/ }
[role="dialog"] div.body1 { flex:1; color:rgba(var(--blackRGB), 0.60); padding:24px 24px 8px 24px; text-align:left; }
[role="dialog"] div.body1 > div { padding-bottom:16px; }
[role="dialog"] > div:last-child { flex:none; padding:8px 0; display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; min-height:52px; height:fit-content; text-align:right; }
[role="dialog"] > div:last-child > button { margin:0 8px 0 0; }


[data-tooltip], [data-badge] { position:relative; }
[data-tooltip]:hover { z-index:10; }
[data-badge]::before { content:attr(data-badge); z-index:1; box-sizing:content-box; width:16px; height:16px; position:absolute; overflow:hidden; line-height:16px; font-size:12px; letter-spacing:-0.02em; font-weight:700; text-align:center; top:-1px; right:-2px; border-radius:50%; background-color:rgb(var(--redRGB)); border:2px solid rgb(var(--whiteRGB-std)); color:rgb(var(--whiteRGB-std)); }
[data-tooltip]::after { opacity:0; width:0; height:0; z-index:0; position:absolute; white-space:nowrap; line-height:24px; text-align:center; color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--blackRGB)); padding:3px 8px; border-radius:2px; will-change:opacity; transition:opacity 150ms var(--standardEasing); }
[data-tooltip]:hover::after { content:attr(data-tooltip); z-index:10; opacity:1; width:fit-content; height:24px;  top:calc(100% + 4px); left:50%; transform:translateX(-50%); }

[data-tooltip-left] { position:relative; will-change:opacity, visibility; transition:opacity 150ms var(--standardEasing); }
[data-tooltip-left]::after { opacity:0; width:fit-content; height:24px; line-height:24px; position:absolute; white-space:nowrap; text-align:center; color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--blackRGB)); padding:3px 8px; border-radius:2px; will-change:opacity, visibility; transition:opacity 250ms var(--standardEasing); }
[data-tooltip-left]:hover::after { content:attr(data-tooltip-left); opacity:1; top:calc(100% + 4px); left:-20px; }
#back[data-tooltip-left]:hover::after { left:-4px; }

#svgQRCode[data-tooltip]:hover::after, #btnQRCode[data-tooltip]:hover::after { left:-10%; top:90%; }

 .visible { opacity:1; will-change:opacity, visibility; transition:opacity 250ms var(--standardEasing); }
.hidden { opacity:1; will-change:opacity, visibility; transition:opacity 200ms var(--standardEasing); }
.close { flex:none; font-size:1em; line-height:1em; font-weight:600; padding:8px; text-align:center; position:absolute; right:8px; }
.divider { height:1px!important; margin:6px 0 8px 0; border-bottom:1px solid rgba(var(--blackRGB), 0.12); }
.sideSheet { height:100%; /*overflow-y:hidden;*/ position:absolute; top:0; left:0; transform:translateX(-100%); opacity:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; box-shadow:var(--boxShadow_z16); background-color:rgb(var(--whiteRGB-std)); will-change:opacity, transform, box-shadow; transition:transform 250ms var(--decelerateEasing), opacity 250ms var(--standardEasing), var(--boxShadowTransition); }
.modal, .wrapperModal { z-index:24; max-height:80vh; overflow-y:auto; padding:16px 16px 8px 16px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); opacity:0; visibility:0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; box-shadow:var(--boxShadow_z16); background-color:rgb(var(--whiteRGB-std)); will-change:opacity, transform, box-shadow, background; transition:transform 150ms var(--decelerateEasing), opacity 150ms var(--standardEasing), var(--boxShadowTransition), background 500ms var(--standardEasing)!important; }
.overlay, .overlayMenu { z-index:23; position:fixed; top:0; left:0; right:100%; bottom:100%; cursor:default; opacity:0; background-color:rgba(var(--blackRGB-std), 0.32); will-change:opacity; transition:opacity 250ms var(--standardEasing); }
.overlay.expanded, .overlayMenu.expanded { opacity:1; right:0; bottom:0; }
.overlay.collapsed, .overlayMenu.collapsed { opacity:0; }
.overlay.invisible, #overlayFloatingMenu { background-color:transparent; }
/*div[data-svg], div[data-svg] > svg { user-select:none; width:24px; height:24px; }*/
.icon { user-select:none; will-change:transform, opacity, box-shadow; transition:transform 150ms var(--decelerateEasing), opacity 100ms var(--standardEasing), box-shadow 150ms var(--standardEasing); }

[data-svg] { flex:none; width:24px; height:24px; border-radius:50%; fill:inherit; user-select:none; will-change:opacity, box-shadow; transition:var(--opacityTransition), var(--boxShadowTransition); }
[data-svg].icon { flex:none; width:40px; height:40px; padding:calc((40px - 24px)/2); }
[data-svg].icon:hover { box-shadow:var(--hover4White); }  [data-svg].icon:focus { box-shadow:var(--focus4White); }  [data-svg].icon:active { box-shadow:var(--activate4White); }
[data-svg].small { flex:none; width:18px; height:18px; }
[data-svg].large { flex:none; width:80px; height:80px; padding:calc((80px - 36px)/2); }
[data-svg].xLarge { flex:none; width:80px; height:80px; padding:calc((80px - 48px)/2); }

[data-svg] > svg { flex:none; width:100%; height:100%; fill:inherit; will-change:opacity, stroke, fill; transition:stroke 100ms var(--sharpEasing), fill 100ms var(--sharpEasing); } 
[data-svg].icon:is(:focus,:hover,:active) > svg { fill:rgb(var(--blackRGB)); } 
[data-svg].white:is(:focus,:hover,:active) > svg { fill:rgb(var(--whiteRGB-std)); } 

[data-svg]:is([aria-selected="false"], [aria-checked="false"], [aria-selected="undefined"], [aria-checked="undefined"]) > svg { fill:none!important; stroke:rgba(var(--blackRGB), 0.76); stroke-width:2.2px; stroke-linecap:round; } 
[data-svg]:is([aria-selected="false"], [aria-checked="false"], [aria-selected="undefined"], [aria-checked="undefined"]):is(:focus,:hover,:active) > svg { fill:none!important; stroke:rgb(var(--blackRGB)); } 
[data-svg].white:is([aria-selected="false"], [aria-checked="false"], [aria-selected="undefined"], [aria-checked="undefined"]) > svg { fill:none!important; stroke:rgba(var(--whiteRGB-std), 0.76); stroke-width:2.2px; stroke-linecap:round; } 
[data-svg].white:is([aria-selected="false"], [aria-checked="false"], [aria-selected="undefined"], [aria-checked="undefined"]):is(:focus,:hover,:active) > svg { fill:none!important; stroke:rgb(var(--whiteRGB-std)); } 
[data-svg]:is([aria-selected="true"], [aria-checked="true"])[data-badge]::before { display:none; }



[data-svg][aria-label] { flex-flow:column nowrap; align-items:center; }
button.iconLabeled svg, div[role=button].iconLabeled svg { stroke:rgb(var(--primaryColor))!important; stroke-width:0.4px; fill:rgb(var(--primaryColor))!important; width:36px!important; height:36px!important; }
button.iconLabeled > [data-svg], div[role=button].iconLabeled > [data-svg] { width:72px; height:72px; padding:16px; border-radius:50%; border:2px solid rgb(var(--primaryColor)); background-color:rgb(var(--whiteRGB-std)); }
button.iconLabeled, div[role=button].iconLabeled { min-width:96px; height:92px; width:fit-content; padding:0; margin:8px; border:0 none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; background-color:transparent!important; box-shadow:none!important; }
button.iconLabeled::after, div[role=button].iconLabeled::after { content:attr(aria-label); color:rgb(var(--primaryColor)); font-family:var(--stdFont); font-weight:600; font-size:13px; height:16px; letter-spacing:normal; text-transform:uppercase; line-height:1.1; margin-top:4px; will-change:opacity, color; transition:all 100ms var(--standardEasing); }


button { --regularColor:var(--blackRGB); --borderColor:var(--blackRGB); --regularBg:var(--whiteRGB-std),1; }
button.filled { --regularColor:var(--whiteRGB-std); --borderColor:var(--primaryColor); --regularBg:var(--primaryColor),1; }

button { user-select:none; flex:none; height:36px; padding:0 16px; color:rgba(var(--regularColor), 0.87); background-color:rgba(var(--regularBg)); border:1px solid rgba(var(--borderColor), 0.87); border-radius:4px; cursor:pointer; outline:unset!important; user-select:none; -webkit-appearance:unset; will-change:opacity, box-shadow; transition:opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
button:hover { color:rgb(var(--regularColor)); box-shadow:var(--boxShadow_z4), var(--hover4White); }
button:focus { color:rgb(var(--regularColor)); box-shadow:var(--boxShadow_z4), var(--focus4White); }
button:active { color:rgb(var(--regularColor)); box-shadow:var(--boxShadow_z8), var(--activateOnWhite); }
button:disabled, button[aria-disabled=true], button.disabled { pointer-events:none; color:rgb(var(--regularColor)); border-color:rgb(var(--regularColor)); background-color:rgba(var(--regularColor), 0.42); } 
button div[data-svg] { flex:none; display:flex; width:24px; height:24px; margin:0; fill:rgba(var(--regularColor), 0.76); /*background-color:rgba(var(--regularBg));*/ }

button.text { font-weight:600; border:0 none!important; background-color:transparent; }
button.text:hover { box-shadow:var(--hover4White); }
button.text:focus { box-shadow:var(--focus4White); }
button.text:active { box-shadow:var(--activate4White); }

button:is(.filled, .text) > div[data-svg] { flex:none; display:flex; width:18px; height:18px; margin:0; }
button:is(.filled, .text) > div > svg { flex:none; width:18px; height:18px; fill:rgba(var(--regularColor), 0.87)!important; }

button.action, button.action_ext, div[role=button].fab_trans, div[role=button].FAB, div[role=button].action { --regularColor:var(--whiteRGB-std); --disabledColor:var(--blackRGB); --regularBg:var(--yellowRGB); --regularBorder:var(--yellowRGB); }
button.action.defaultColor, button.fab.defaultColor, button.action_ext.defaultColor, div[role=button].action.defaultColor { --regularColor:var(--blackRGB); --disabledColor:var(--blackRGB); --regularBg:var(--whiteRGB-std); --regularBorder:rgba(var(--blackRGB),.12); --focus4Color:var(--focus4White); --activateOnColor:var(--activateOnWhite); }


button.action, div[role=button].action { z-index:6; position:absolute; right:24px; top:-24px; width:56px; height:56px; border:1px solid var(--regularBorder); border-radius:50%; padding:16px; background-color:rgba(var(--regularBg)); box-shadow:var(--boxShadow_z6); will-change:opacity, box-shadow; transition:opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
button.action div[data-svg], div[role=button].action div[data-svg] { margin:0; }
button.action div[data-svg] > svg, div[role=button].action div[data-svg] > svg { fill:rgb(var(--regularColor)); }
button.action:hover, div[role=button].action:hover { box-shadow:var(--boxShadow_z9), var(--hover4White); }
button.action:focus, div[role=button].action:focus { box-shadow:var(--boxShadow_z9), var(--focus4Color); }
button.action:active, div[role=button].action:active { box-shadow:var(--boxShadow_z12), var(--activateOnColor); }

/*div[role=button].FAB svg { fill:rgb(var(--regularColor)); width:24px; height:24px; }*/
.FAB { position:absolute; width:56px; height:56px; padding:calc((100% - 24px)/2); margin:0; border-radius:28px; color:rgb(var(--regularColor)); fill:rgb(var(--regularColor)); background-color:rgb(var(--regularBg)); box-shadow:var(--boxShadow_z4); will-change:opacity,background-color,transform,box-shadow; transition:transform 250ms var(--standardEasing), opacity 100ms var(--standardEasing), background-color 100ms var(--standardEasing), var(--boxShadowTransition); }
.FAB.medium { width:48px; height:48px; margin:4px; border-radius:24px; }
.FAB.trans { overflow:hidden; padding:0!important; }
.FAB:hover { box-shadow:var(--boxShadow_z4), var(--hover4Color); }  .FAB:focus { box-shadow:var(--boxShadow_z8), var(--focus4Color); }  .FAB:active { box-shadow:var(--boxShadow_z8), var(--activate4Color); }

.FAB .regularContent { position:absolute; display:block; padding:calc((100% - 24px)/2); margin:0; fill:inherit; }
.FAB .fullPageContent { position:relative; top:0; margin:0 auto; width:100%; height:100%; overflow:hidden; opacity:0; background-color:rgb(var(--whiteRGB-std)); }

footer .navFABCont { position:relative; z-index:0; display:block; align-self:flex-start; flex:none; margin:0 auto 20px auto; opacity:1; aspect-ratio:2 / 1; border-radius:0 0 36px 36px; box-shadow:0 50px 0 50px rgb(var(--primaryColor)), inset 0 -12px 10px 0px rgba(var(--whiteRGB-std), 0.8); will-change:width, box-shadow; }
footer .navFABCont[aria-disabled="false"] { width:72px; transition:width 150ms linear; }
footer .navFABCont[aria-disabled="true"] { width:0; background-color:rgb(var(--whiteRGB)); transition:width 150ms linear; }
footer .navFABCont > .FAB { position:unset!important; box-shadow:var(--boxShadow_z6); overflow:hidden; width:calc((100% * 56)/72)!important; height:auto!important; aspect-ratio:1 / 1!important; margin:calc((-100% * 28)/72) auto!important; }
footer .navFABCont > .FAB.medium { position:absolute!important; box-shadow:var(--boxShadow_z6); width:calc((100% * 48)/72)!important; height:auto!important; aspect-ratio:1 / 1!important; margin:auto auto calc((100% * 12)/72) calc((100% * 12)/72)!important; }
footer .navFABCont > .FAB.holder { z-index:8; position:absolute; display:block; padding:0; margin:8px; bottom:0; background-color:rgb(var(--whiteRGB-std)); fill:rgba(var(--blackRGB-std), 0.76); border-color:1px solid rgba(var(--blackRGB), 0.12); }
footer .navFABCont > .FAB.medium { opacity:0; will-change:opacity,transform; background-color:rgb(var(--whiteRGB-std)); fill:rgba(var(--blackRGB-std), 0.76); border-color:1px solid rgba(var(--blackRGB), 0.12); }

footer .navFABCont > .FAB.medium[aria-selected="true"] { background-color:rgb(var(--yellowRGB)); border-color:0 none; }
footer .navFABCont > .FAB.medium[aria-selected="true"] svg { fill:rgb(var(--whiteRGB-std)); }
footer .navFABCont > .FAB.holder + .FAB.medium { z-index:7; pointer-events:none; transition:transform 100ms var(--standardEasing), opacity 75ms linear; }
footer .navFABCont > .FAB.holder + .FAB.medium + .FAB.medium { z-index:6; pointer-events:none; transition:transform 200ms var(--standardEasing), opacity 75ms linear; }
footer .navFABCont > .FAB.holder svg { fill:rgba(var(--blackRGB-std), 0.76); transform:rotate(0deg); will-change:transform; transition:transform 150ms var(--standardEasing); }
footer .navFABCont > .FAB.holder[aria-expanded="true"] svg { transform:rotate(225deg); }
footer .navFABCont > .FAB.holder[aria-expanded="true"] + .FAB.medium { pointer-events:all; transform: translateY(calc(-100% - 12px)); opacity:1; transition:transform 120ms var(--standardEasing), opacity 75ms linear; }
footer .navFABCont > .FAB.holder[aria-expanded="true"] + .FAB.medium  + .FAB.medium { pointer-events:all; transform: translateY(calc(-200% - 20px)); opacity:1; transition:transform 240ms var(--standardEasing), opacity 75ms linear; }

footer .navFABCont > .FAB.trans { margin:8px; bottom:0; }
footer .navFABCont.outgoing { transform:scale(0); opacity:0; width:0; }
footer .navFABCont.incoming { transform:scale(1); opacity:1; width:72px; }

button.action_ext { position:relative; min-width:64px; max-width:calc(100% - 32px); width:fit-content; height:48px; padding:0 20px 0 12px; margin:0 auto; border-radius:24px; color:rgb(var(--regularColor)); background-color:rgba(var(--regularBg)); display:inline-flex; flex-flow:row nowrap; justify-content:center; align-items:center; border:unset; overflow:hidden; box-shadow:var(--boxShadow_z4); will-change:opacity, box-shadow; transition:opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
button.action_ext div[data-svg] > svg { fill:rgb(var(--regularColor)); }
button.action_ext:hover { box-shadow:var(--boxShadow_z6), var(--hover4Color); }
button.action_ext:focus { box-shadow:var(--boxShadow_z6), var(--focus4Color); }
button.action_ext:active { box-shadow:var(--boxShadow_z9), var(--activate4Color); }
button.action_ext:disabled, button.action_ext[aria-disabled=true], button.action_ext.disabled { border-width:1px solid rgb(var(--disabledColor)); color:rgb(var(--disabledColor)); background-color:rgb(var(--whiteRGB-std)); } 
button.action_ext:disabled svg, button.action_ext.disabled svg, button.action_ext[aria-disabled=true] svg { fill:rgb(var(--disabledColor)); } 
button.action_ext > .text { display:flex; width:fit-content; margin-left:12px; }


button.choiceChips, select.choiceChips { height:32px; width:fit-content; padding:0 12px; margin:0 4px; color:rgb(var(--regularColor)); background-color:rgba(var(--regularColor), 0.12); border-radius:16px; border:0 none; box-shadow:0 0!important; text-transform:none; }
button.choiceChips.outlined, select.choiceChips.outlined { color:rgba(var(--regularColor), 0.87); border:1px solid rgba(var(--regularColor), 0.12); background-color:rgb(var(--whiteRGB-std)); box-shadow:0 0!important; }
button.choiceChips.selected { color:rgb(var(--whiteRGB-std)); background-color:rgba(var(--regularColor), 0.87); }
button.choiceChips:is(:focus,:active) { color:rgb(var(--whiteRGB-std)); background-color:rgba(var(--blackRGB), 0.87); }

button.filterChips { height:34px; min-width:48px; width:fit-content; padding:0 12px; margin-right:8px; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; color:rgba(var(--regularColor), 0.87); border:0 none; border-radius:16px; background-color:rgba(var(--regularColor), 0.12); box-shadow:0 0; text-transform:none; will-change:opacity, width; transition:opacity 200ms var(--standardEasing), width 250ms var(--standardEasing); }
button.filterChips:hover { box-shadow:var(--hover4White); }
button.filterChips:focus { box-shadow:var(--focus4White); }
button.filterChips:active { box-shadow:var(--activateOnWhite); }
button.filterChips.selected, button.filterChips[aria-selected=true] { justify-content:flex-start; color:rgb(var(--primaryColor)); background-color:rgba(var(--regularColor), 0); box-shadow:var(--selected4White); }
button.filterChips > div[data-svg] { height:24px; width:24px; padding:3px; margin:0 8px 0 -8px; border-radius:50%; display:none; }
button.filterChips.selected > div[data-svg], button.filterChips[aria-selected=true] > div[data-svg] { display:flex; }
button.filterChips > div[data-svg] > svg { height:18px; width:18px; padding:0; fill:rgba(var(--regularColor), 0.76); }
button.filterChips.outlined { color:rgba(var(--regularColor), 0.87); border:1px solid rgba(var(--regularColor), 0.12); background-color:rgba(var(--regularColor), 0.04); }
button.filterChips.outlined.selected, button.filterChips.outlined[aria-selected=true] { font-weight:600; color:rgb(var(--primaryColor)); background-color:rgba(var(--regularColor), 0); border:1px solid rgba(var(--primaryColor), 0.42); box-shadow:var(--selected4White); }
button.filterChips.outlined.selected > div[data-svg] > svg , button.filterChips.outlined[aria-selected=true] > div[data-svg] > svg { fill:rgb(var(--primaryColor)); }

button.filterChips.hidden, button.choiceChips.hidden { overflow:hidden; min-width:0; width:0; padding:0; margin:0; border:0 none; }

button.actionChips.add { border:0 none; border-radius:50%; background-color:rgb(var(--yellowRGB)); transition:transform 200ms var(--accelerateEasing); }
button.actionChips.add svg { fill:rgb(var(--whiteRGB)); transform:rotate(0deg); }
button.actionChips.reset svg { fill:rgb(var(--blackRGB), 0.87); transform:rotate(135deg); }

input, select, div[contenteditable], label, label + div, .trailingIcon > svg { --regularColor:var(--blackRGB); --activeColor:var(--primaryColor); --errorColor:var(--redRGB); --regularBg:var(--whiteRGB-std),1; }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]):is(:disabled,:read-only) { border:1px solid rgba(var(--regularColor), 0.42)!important; color:rgba(var(--regularColor), 0.87)!important; opacity:0.38!important; pointer-events:none; cursor:default!important; }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]):is(:disabled,:read-only):placeholder-shown + label { position:absolute!important; top:0!important; left:0!important; width:100%!important; height:48px!important; line-height:32px!important; padding:8px 12px 8px 16px!important; z-index:1!important; color:rgba(var(--regularColor), 0.42)!important; opacity:0.38!important; }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]):is(:disabled,:read-only) + label > sup { display:none; }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]):is(:disabled,:read-only):not(:placeholder-shown), input:not([type=date]):not([type=radio]):not([type=checkbox]):is(:disabled,:read-only):not(:placeholder-shown) + label { color:rgba(var(--regularColor), 0.42)!important; opacity:0.76!important; }

input, select, div[contenteditable] { flex:none; height:48px; border:1px solid rgba(var(--regularColor), 0.42); background-color:transparent; color:rgba(var(--regularColor), 0.87); padding:0 12px 0 16px; outline:unset!important; text-align:left; border-radius:4px; will-change:border-color, opacity, box-shadow; transition:border-color 200ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
select { background-color:rgb(var(--whiteRGB-std))!important; }
input:hover, div[contenteditable]:hover { border-color:rgba(var(--regularColor), 0.87); }
input:not(:disabled):not(:read-only):focus, div[contenteditable]:not(:disabled):not(:read-only):focus { border-width:2px; border-color:rgb(var(--activeColor)); caret-color:rgb(var(--activeColor)); }
input:focus::placeholder { opacity:0; }
input:-webkit-autofill, input:-webkit-autofill:hover { color:rgba(var(--regularColor), 0.87); border-color:rgba(var(--regularColor), 0.87); -webkit-text-fill-color:rgba(var(--regularColor), 0.87); -webkit-box-shadow:200px 200px 200px 200px rgb(var(--whiteRGB-std)) inset!important; box-shadow:200px 200px 200px 200px rgb(var(--whiteRGB-std)) inset!important; }
input:-webkit-autofill:focus { border-color:rgb(var(--activeColor)); caret-color:rgb(var(--activeColor)); }
label { width:fit-content; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; will-change:color, opacity, top; transition:opacity 200ms var(--standardEasing), top 150ms var(--standardEasing), var(--boxShadowTransition), color 150ms var(--standardEasing); user-select:none; }

.wrapperInput { position:relative; height:fit-content; margin:16px 0 24px 0; border-radius:4px; background-color:rgb(var(--whiteRGB-std)); }
.wrapperInput > input { position:relative; height:48px; top:0; left:0; z-index:1; width:100%; }
.wrapperInput > input + label { position:absolute; top:0; left:0; height:48px; line-height:32px; padding:8px 12px 8px 16px; z-index:0; color:rgba(var(--regularColor), 0.42); }
.wrapperInput > input + label > sup { color:rgb(var(--error)); line-height:0; }
.wrapperInput > input:not([type=file]):hover + label { color:rgba(var(--regularColor), 0.87); }
.wrapperInput > input:not([type=file]):not(:disabled):not(:read-only):is(:focus,:active) + label { height:fit-content; z-index:1; top:-8px; line-height:16px; left:14px; padding:0 4px; color:rgba(var(--activeColor),.6); background-image:linear-gradient(rgba(var(--regularBg)), rgba(var(--regularBg))); background-color:transparent; background-size:auto 2px; background-position:0 8px; background-repeat:no-repeat; background-attachment:local; }
.wrapperInput > input:not([type=file]):not(:disabled):not(:read-only):is(:focus,:active) + label > sup { display:none; }
.wrapperInput > .helpTxt { position:absolute; top:calc(48px + 4px); right:8px; height:16px; color:rgba(var(--regularColor), 0.6); }
.wrapperInput > ::placeholder { opacity:0; }
.wrapperInput > input:not([type=file]):not([type=date]):not(:placeholder-shown):not(:focus) + label { height:fit-content; z-index:1; top:-8px; line-height:16px; left:14px; padding:0 4px; background-image:linear-gradient(rgba(var(--regularBg)), rgba(var(--regularBg))); background-color:transparent; background-size:auto 2px; background-position:0 8px; background-repeat:no-repeat; background-attachment:local; }
.wrapperInput > input:not([type=file]):not([type=date]):not(:placeholder-shown):not(:focus) + label > sup { display:none; }
.wrapperInput > .trailingText { position:absolute; z-index:1; right:0; width:fit-content; height:40px; padding:8px; margin:4px 0; }
.wrapperInput > .trailingIcon { position:absolute; z-index:2; right:0; width:40px; height:40px; padding:8px; margin:4px 0; }
.wrapperInput > .trailingIcon > svg { width:24px; height:24px; fill:rgba(var(--regularColor), 0.42); } 
.wrapperInput:hover > .trailingIcon > svg { fill:rgba(var(--regularColor), 0.87); } 

input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]).invalid { color:rgb(var(--errorColor)); border-color:rgb(var(--errorColor)); }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]).invalid + label { color:rgb(var(--errorColor)); overflow:visible; }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]).invalid + label[data-error-msg] + div { display:none; }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]).invalid + label[data-error-msg]::after { content:attr(data-error-msg); position:absolute; left:0; top:calc(48px + 4px + 8px); color:rgb(var(--errorColor)); width:fit-content; height:16px; margin:0; }

input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]):not(:-webkit-autofill):not(:placeholder-shown):not(:focus):invalid { color:rgb(var(--errorColor)); border-color:rgb(var(--errorColor)); }
input:not([type=file]):not([type=date]):not([type=radio]):not([type=checkbox]):not(:-webkit-autofill):not(:placeholder-shown):not(:focus):invalid + label { color:rgb(var(--errorColor)); overflow:visible; }
input:not([type=file]):not(:-webkit-autofill):not(:placeholder-shown):not(:focus):invalid + label[data-error-msg] + div { display:none; }
input:not([type=file]):not(:-webkit-autofill):not(:placeholder-shown):not(:focus):invalid + label[data-error-msg]::after { content:attr(data-error-msg); position:absolute; left:0; top:calc(48px + 4px + 8px); color:rgb(var(--errorColor)); width:fit-content; height:16px; margin:0; }

.wrapperInputsList { width:100%; margin:16px auto; display:flex; flex-flow:row wrap; justify-content:space-around; align-items:center; }
.wrapperCustomRadio, .wrapperCustomCheckBox { flex:none; position:relative; height:40px; width:fit-content; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; }
input[role=switch] { appearance:none; inline-size:36px; block-size:16px; padding:0; margin:4px; background-color:rgba(62,62,61,0.42); border-radius:10px; border:0 none; will-change:transform, opacity, box-shadow; transition:transform 350ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
input[role=switch]:checked { background-color:rgba(var(--primaryColor),0.42); border:0 none; }
input[role=switch]::before { content:''; display:block; position:relative; top:-2px; inline-size:20px; block-size:20px; margin:0; padding:0; border:0 none; border-radius:50%; box-sizing:border-box; background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z1); outline:unset!important; }
input[role=switch]:checked::before { transform:translateX(calc(100% - 4px)); background-color:rgb(var(--primaryColor)); }

input[role=checkbox] { appearance:none; inline-size:24px; block-size:24px; padding:0; margin:0 16px 0 0; border:2px solid rgba(var(--regularColor), 0.42); border-radius:4px; box-sizing:border-box; will-change:border-color, transform, opacity, box-shadow; transition:border-color 200ms var(--standardEasing), transform 250ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
input[role=checkbox]:not(:checked):not(:indeterminate):hover { border-color:rgba(var(--regularColor), 0.87); }
input[role=checkbox]:is(:checked,:indeterminate) { border-color:rgb(var(--primaryColor)); background-color:rgb(var(--primaryColor)); } 
input[role=checkbox]:checked:disabled { border-color:rgba(var(--regularColor), 0.32); background-color:rgba(var(--regularColor), 0.32); } 
input[role=checkbox]:indeterminate:disabled { border-color:rgb(var(--primaryColor)); background-color:rgb(var(--primaryColor)); } 
input[role=checkbox]:checked::before  { content:''; display:block; inline-size:8px; block-size:16px; margin-left:6px; border:3px solid rgb(var(--whiteRGB-std)); border-width:0 3px 3px 0; border-radius:2px; box-sizing:border-box; transform:rotate(40deg); } 
input[role=checkbox]:indeterminate::before  { content:''; display:block; inline-size:16px; margin:9px auto auto auto; border:1px solid rgb(var(--whiteRGB-std)); border-radius:2px; height:3px; background-color:rgb(var(--whiteRGB-std)); box-sizing:border-box; } 

input[role=radio] { appearance:none; inline-size:22px; block-size:22px; padding:0; margin:0; border:2px solid rgba(var(--regularColor), 0.42); border-radius:50%; box-sizing:border-box; will-change:transform, opacity, box-shadow; transition:transform 250ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); }
input[role=radio]:not(:checked):hover { border-color:rgba(var(--regularColor), 0.87); }
input[role=radio]:checked { border-color:rgb(var(--primaryColor)); } 
input[role=radio]:checked::before  { content:''; display:block; position:relative; top:4px; left:4px; inline-size:10px; block-size:10px; margin:0; background-color:rgb(var(--primaryColor)); border-radius:50%; box-sizing:border-box; } 

input[type=date]:invalid { color:transparent; }
input[type=date]:focus, input[type=date]:active { color:rgba(var(--regularColor), 0.87); }
input[type=date]:valid + label { width:fit-content; height:fit-content; z-index:1; top:-8px; line-height:16px; left:14px; padding:0 4px; background-image:linear-gradient(rgba(var(--regularBg)), rgba(var(--regularBg))); background-color:transparent; background-size:auto 2px; background-position:0 8px; background-repeat:no-repeat; background-attachment:local; }
input[type=date]:valid + label > sup { display:none; }

input[type=file]:is(:hover,:active,:focus,:read-only:placeholder-shown:not(:placeholder-shown)) { border:0 none!important; color:unset!important; opacity:0!important; pointer-events:all!important; cursor:pointer!important; padding:0!important; }

form.checked input:not([type=file]):is([type=radio],[type=checkbox]):invalid + label::before { color:rgb(var(--errorColor)); border-color:rgb(var(--errorColor)); }
form.checked input:not([type=file]):is([type=radio],[type=checkbox]):invalid + label + div { color:rgb(var(--errorColor)); }
form.checked input:not([type=file]):not([type=radio]):not([type=checkbox]):required:placeholder-shown, form.checked input:not([type=radio]):not([type=checkbox]):invalid { color:rgb(var(--errorColor)); border-color:rgb(var(--errorColor)); border-width:2px; }
form.checked input:not([type=file]):not([type=radio]):not([type=checkbox]):required:placeholder-shown + label, form.checked input:not([type=radio]):not([type=checkbox]):invalid + label { color:rgb(var(--errorColor)); overflow:visible; width:fit-content; height:fit-content; z-index:1; top:-8px; line-height:16px; left:14px; padding:0 4px; background-image:linear-gradient(rgba(var(--regularBg)), rgba(var(--regularBg))); background-color:transparent; background-size:auto 2px; background-position:0 8px; background-repeat:no-repeat; background-attachment:local; }
form.checked input:not([type=file]):not([type=radio]):not([type=checkbox]):required:placeholder-shown + label[data-error-msg] + div, form.checked input:not([type=radio]):not([type=checkbox]):invalid + label[data-error-msg] + div { display:none; }
form.checked input:not([type=file]):not([type=radio]):not([type=checkbox]):required:placeholder-shown + label[data-error-msg]::after, form.checked input:not([type=radio]):not([type=checkbox]):invalid + label[data-error-msg]::after { content:attr(data-error-msg); position:absolute; left:0; top:calc(48px + 4px + 4px); color:rgb(var(--errorColor)); width:fit-content; height:16px; margin:0; }

main > details { max-width:calc(100% - 16px); width:620px; min-width:calc(var(--minWidth) - 8px); align-self:center; margin-top:24px; }
details[open] > summary > .icon { transform:rotate(90deg); will-change:transform; transition:transform 150ms var(--standardEasing); }
details[open] > ul, details[open] > ol { margin:0 0 4px 16px; padding-bottom:16px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); }
summary { user-select:none; margin-bottom:4px; background-color:transparent!important; border-bottom:1px solid rgba(var(--blackRGB), 0.12); }
summary.twoLines { height:56px; padding:0 8px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
fieldset { user-select:none; border:1px solid; }
fieldset > details:last-child > summary { border-bottom:0 none; }

ul, ol, li, details, summary { user-select:none; list-style:none; transition:opacity 100ms var(--standardEasing), width 150ms var(--standardEasing), height 150ms var(--standardEasing), var(--boxShadowTransition); }
ul, ol { padding:0; margin:0; display:block; flex:none; }
li { position:relative; user-select:none; will-change:box-shadow; transition:var(--boxShadowTransition); }
ul > li { /*max-height:72px; min-height:56px;*/ display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; }
/*li:hover { box-shadow:var(--hover4White); }  li:focus { box-shadow:var(--focus4White); }  li:active { box-shadow:var(--activate4White); }*/
li.red:hover { box-shadow:var(--hoverRedOnWhite)!important; }
li.red:focus { box-shadow:var(--focusRedOnWhite)!important; }
li.red:active { box-shadow:var(--activateRedOnWhite)!important; }

.snackBars { flex:none; align-self:center; position:absolute; z-index:8; bottom:72px; min-width:344px; width:fit-content; min-height:48px; max-height:68px; transform:translateY(150%); opacity:0; text-align:left; margin:0 auto; padding:0 8px 0 16px; background-color:rgba(var(--blackRGB), 0.87); color:rgb(var(--whiteRGB-std)); display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-radius:4px; will-change:opacity, transform; transition:transform 500ms var(--accelerateEasing) 300ms, opacity 250ms var(--standardEasing) 300ms 300ms; }
.snackBars.open { transform:translateY(-24px)!important; opacity:1!important; will-change:opacity, transform; transition:transform 400ms var(--decelerateEasing) 250ms, opacity 500ms var(--standardEasing) 300ms; }
.snackBars > div:first-child { flex:1; text-align:left; padding:0 8px 0 0; /*display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center;*/ }
.snackBars > .close { position:relative; right:0; color:rgb(var(--whiteRGB-std))!important; }




.iconLabeled > .svg404 { width:12px!important; height:12px!important; padding:0!important; }