/* *************************************************************************************
****************************************************************************************
****************************************************************************************
***************************** Global RESETS ********************************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
*:focus, *:-webkit-direct-focus {
outline-color: none;
outline-style: none;
outline-width: 0px;
outline: none;
border: 1px orange solid;
}
input:focus, textarea:focus, button:focus, select:focus {
outline-color: none;
outline-style: none;
outline-width: 0px;
outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 600000s 0s, color 600000s 0s;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=date]::-webkit-calendar-picker-indicator {
filter: invert(1);
}
input[type=number] {
-moz-appearance: textfield;
}
input[data-autocompleted] {
background-color: transparent !important;
}
/* *************************************************************************************
****************************************************************************************
****************************************************************************************
************************************* GLOBAL VARS **************************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
:root {
/* System Colors (all in hsl) */
--col_sys_red: 5,80%,48%;
--col_sys_orange: 23,84%,60%;
--col_sys_yellow: 42,90%,64%;
--col_sys_green: 129,93%,73%;
--col_sys_turquoise: 156,94%,73%;
--col_sys_blue: 207,92%,66%;
--col_sys_navy: 224,91%,60%;
--col_sys_purple: 258,90%,60%;
--col_sys_pink: 323,80%,60%;
--col_sys_rose: 346,80%,68%;
/* Grayscales (all in hsl) */
--col_gs_black: 0,0%,4%;
--col_gs_gray6: 190,20%,10%;
--col_gs_gray5: 190,20%,22%;
--col_gs_gray4: 190,20%,34%;
--col_gs_gray3: 190,20%,46%;
--col_gs_gray2: 190,20%,58%;
--col_gs_gray1: 190,20%,70%;
--col_gs_white: 190,20%,96%;
/* Primary (all in hsl) */
--col_pr_1: 5,80%,80%;
--col_pr_2: 5,80%,70%;
--col_pr_3: 5,80%,55%;
--col_pr_4: 5,80%,50%;
--col_pr_5: 5,80%,40%;
/* Secondary (all in hsl) */
--col_se_1: 188,98%,34%;
--col_se_2: 188,98%,28%;
--col_se_3: 188,98%,22%;
--col_se_4: 188,98%,16%;
--col_se_5: 188,98%,10%;
/* System Sizings */
--gap_0_25: calc(1rem * 0.25);
--gap_0_5: calc(1rem * 0.5);
--gap_0_75: calc(1rem * 0.75);
--gap_1: 1rem;
--gap_1_25: calc(1rem * 1.25);
--gap_1_5: calc(1rem * 1.5);
--gap_1_75: calc(1rem * 1.75);
--gap_2: 2rem;
--gap_2_25: calc(1rem * 2.25);
--gap_2_5: calc(1rem * 2.5);
--gap_2_75: calc(1rem * 2.75);
--gap_3: 3rem;
--gap_3_25: calc(1rem * 3.25);
--gap_3_5: calc(1rem * 3.5);
--gap_3_75: calc(1rem * 3.75);
--gap_4: 4rem;
--gap_4_25: calc(1rem * 4.25);
--gap_4_5: calc(1rem * 4.5);
--gap_4_75: calc(1rem * 4.75);
--gap_5: 5rem;
--gap_5_25: calc(1rem * 5.25);
--gap_5_5: calc(1rem * 5.5);
--gap_5_75: calc(1rem * 5.75);
--gap_6: 6rem;
--gap_6_25: calc(1rem * 6.25);
--gap_6_5: calc(1rem * 6.5);
--gap_6_75: calc(1rem * 6.75);
--gap_7: 7rem;
--gap_7_25: calc(1rem * 7.25);
--gap_7_5: calc(1rem * 7.5);
--gap_7_75: calc(1rem * 7.75);
--gap_8: 8rem;
--gap_8_25: calc(1rem * 8.25);
--gap_8_5: calc(1rem * 8.5);
--gap_8_75: calc(1rem * 8.75);
--gap_9: 9rem;
--gap_9_25: calc(1rem * 9.25);
--gap_9_5: calc(1rem * 9.5);
--gap_9_75: calc(1rem * 9.75);
--gap_10: 10rem;
/* Text (XS) */
--txt_xs_title1: calc(1rem * 1.75);
--txt_xs_title2: calc(1rem * 1.5);
--txt_xs_title3: calc(1rem * 1.25);
--txt_xs_title4: 1rem;
--txt_xs_hl: calc(1rem * 0.875);
--txt_xs_bdy: calc(1rem * 0.75);
--txt_xs_lbl: calc(1rem * 0.75);
--txt_xs_int: calc(1rem * 0.75);
--txt_xs_fno: calc(1rem * 0.5);
/* Text (S) */
--txt_s_title1: calc(1rem * 1.875);
--txt_s_title2: calc(1rem * 1.625);
--txt_s_title3: calc(1rem * 1.375);
--txt_s_title4: calc(1rem * 1.125);
--txt_s_hl: 1rem;
--txt_s_bdy: calc(1rem * 0.875);
--txt_s_lbl: calc(1rem * 0.875);
--txt_s_int: calc(1rem * 0.875);
--txt_s_fno: calc(1rem * 0.625);
}
/* *************************************************************************************
****************************************************************************************
****************************************************************************************
************************************* ICONS ********************************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
.icon {
width: 1.125rem;
height: 1.125rem;
-webkit-mask-size: cover;
mask-size: cover;
background-color: inherit;
}
.icon.add {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>') no-repeat center center;
}
.icon.add_circle {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>') no-repeat center center;
}
.icon.add_location {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M440-400h80v-120h120v-80H520v-120h-80v120H320v80h120v120Zm40 214q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M440-400h80v-120h120v-80H520v-120h-80v120H320v80h120v120Zm40 214q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>') no-repeat center center;
}
.icon.arrow_forward {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>') no-repeat center center;
}
.icon.blender {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M320-80q-33 0-56.5-23.5T240-160v-40q0-47 20.5-87t53.5-67l-25-166h-89q-33 0-56.5-23.5T120-600v-160q0-33 23.5-56.5T200-840h200v-40h160v40h159l-73 486q33 27 53.5 67t20.5 87v40q0 33-23.5 56.5T640-80H320Zm-43-520-24-160h-53v160h77Zm203 400q17 0 28.5-11.5T520-240q0-17-11.5-28.5T480-280q-17 0-28.5 11.5T440-240q0 17 11.5 28.5T480-200Zm-92-200h184l54-360H334l54 360Zm-68 240h320v-40q0-50-35-85t-85-35h-80q-50 0-85 35t-35 85v40Zm160-80Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M320-80q-33 0-56.5-23.5T240-160v-40q0-47 20.5-87t53.5-67l-25-166h-89q-33 0-56.5-23.5T120-600v-160q0-33 23.5-56.5T200-840h200v-40h160v40h159l-73 486q33 27 53.5 67t20.5 87v40q0 33-23.5 56.5T640-80H320Zm-43-520-24-160h-53v160h77Zm203 400q17 0 28.5-11.5T520-240q0-17-11.5-28.5T480-280q-17 0-28.5 11.5T440-240q0 17 11.5 28.5T480-200Zm-92-200h184l54-360H334l54 360Zm-68 240h320v-40q0-50-35-85t-85-35h-80q-50 0-85 35t-35 85v40Zm160-80Z"/></svg>') no-repeat center center;
}
.icon.chevron_left {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z"/></svg>') no-repeat center center;
}
.icon.chevron_left_circle {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M440-480 550-370l-30 30-140-140 140-140 30 30-110 110Z"/><circle cx="480" cy="-480" r="380" fill="none" stroke="currentColor" stroke-width="10"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M440-480 550-370l-30 30-140-140 140-140 30 30-110 110Z"/><circle cx="480" cy="-480" r="380" fill="none" stroke="currentColor" stroke-width="10"/></svg>') no-repeat center center;
}
.icon.cancel_filled {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>') no-repeat center center;
}
.icon.chevron_right {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"/></svg>') no-repeat center center;
}
.icon.chevron_right_circle {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M520-480 410-370l30 30 140-140-140-140-30 30 110 110Z"/><circle cx="480" cy="-480" r="380" fill="none" stroke="currentColor" stroke-width="10"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M520-480 410-370l30 30 140-140-140-140-30 30 110 110Z"/><circle cx="480" cy="-480" r="380" fill="none" stroke="currentColor" stroke-width="10"/></svg>') no-repeat center center;
}
.icon.copyContent {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23e8eaed"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') no-repeat center center;
}
.icon.cross {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>') no-repeat center center;
}
.icon.edit {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>') no-repeat center center;
}
.icon.edit_node {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M160-400v-80h280v80H160Zm0-160v-80h440v80H160Zm0-160v-80h440v80H160Zm360 560v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"/></svg>') no-repeat center center;
}
.icon.deceased {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M426-160q-9-26-23-48t-33-41q-19-19-41-33.5T281-306q2 29 14 54t32 45q20 20 45 32.5t54 14.5Zm108 0q29-3 54-15t45-32q20-20 32-45t15-54q-26 9-48.5 23T590-250q-19 19-33 41.5T534-160Zm-54-360q66 0 113-47t47-113v-48l-70 59-90-109-90 109-70-59v48q0 66 47 113t113 47ZM440-80q-100 0-170-70t-70-170v-80q71-1 134 29t106 81v-153q-86-14-143-80.5T240-680v-136q0-26 23-36.5t43 6.5l74 64 69-84q12-14 31-14t31 14l69 84 74-64q20-17 43-6.5t23 36.5v136q0 90-57 156.5T520-443v153q43-51 106-81t134-29v80q0 100-70 170T520-80h-80Zm40-569Zm127 416Zm-253 0Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M426-160q-9-26-23-48t-33-41q-19-19-41-33.5T281-306q2 29 14 54t32 45q20 20 45 32.5t54 14.5Zm108 0q29-3 54-15t45-32q20-20 32-45t15-54q-26 9-48.5 23T590-250q-19 19-33 41.5T534-160Zm-54-360q66 0 113-47t47-113v-48l-70 59-90-109-90 109-70-59v48q0 66 47 113t113 47ZM440-80q-100 0-170-70t-70-170v-80q71-1 134 29t106 81v-153q-86-14-143-80.5T240-680v-136q0-26 23-36.5t43 6.5l74 64 69-84q12-14 31-14t31 14l69 84 74-64q20-17 43-6.5t23 36.5v136q0 90-57 156.5T520-443v153q43-51 106-81t134-29v80q0 100-70 170T520-80h-80Zm40-569Zm127 416Zm-253 0Z"/></svg>') no-repeat center center;
}
.icon.expand_less {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>') no-repeat center center;
}
.icon.expand_more {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>') no-repeat center center;
}
.icon.flatware {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M200-120v-400q-33 0-56.5-23.5T120-600v-212q0-12 8-20t20-8q12 0 20 8t8 20v132h36v-132q0-12 8-20t20-8q12 0 20 8t8 20v132h36v-132q0-12 8-20t20-8q12 0 20 8t8 20v212q0 33-23.5 56.5T280-520v400h-80Zm280 0v-404q-42-20-61-62.5T400-676q0-63 31.5-113.5T520-840q57 0 88.5 50.5T640-676q0 47-19 89.5T560-524v404h-80Zm200 0v-720q66 0 113 47t47 113v240h-80v320h-80Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M200-120v-400q-33 0-56.5-23.5T120-600v-212q0-12 8-20t20-8q12 0 20 8t8 20v132h36v-132q0-12 8-20t20-8q12 0 20 8t8 20v132h36v-132q0-12 8-20t20-8q12 0 20 8t8 20v212q0 33-23.5 56.5T280-520v400h-80Zm280 0v-404q-42-20-61-62.5T400-676q0-63 31.5-113.5T520-840q57 0 88.5 50.5T640-676q0 47-19 89.5T560-524v404h-80Zm200 0v-720q66 0 113 47t47 113v240h-80v320h-80Z"/></svg>') no-repeat center center;
}
.icon.filter_list {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>') no-repeat center center;
}
.icon.gps_fixed {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>') no-repeat center center;
}
.icon.home_pin {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M360-440h80v-110h80v110h80v-190l-120-80-120 80v190Zm120 254q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M360-440h80v-110h80v110h80v-190l-120-80-120 80v190Zm120 254q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>') no-repeat center center;
}
.icon.imagesmode {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Zm140-360q25 0 42.5-17.5T400-620q0-25-17.5-42.5T340-680q-25 0-42.5 17.5T280-620q0 25 17.5 42.5T340-560Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Zm140-360q25 0 42.5-17.5T400-620q0-25-17.5-42.5T340-680q-25 0-42.5 17.5T280-620q0 25 17.5 42.5T340-560Z"/></svg>') no-repeat center center;
}
.icon.invisible {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>') no-repeat center center;
}
.icon.mic {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/></svg>') no-repeat center center;
}
.icon.more_vert {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z"/></svg>') no-repeat center center;
}
.icon.nest_multi_room {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M160-120v-480l320-240 320 240v480H160Zm80-80h280v-120H240v120Zm360 0h120v-120H600v120ZM240-400h120v-119H240v119Zm200 0h280v-119H440v119ZM292-599h376L480-740 292-599Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M160-120v-480l320-240 320 240v480H160Zm80-80h280v-120H240v120Zm360 0h120v-120H600v120ZM240-400h120v-119H240v119Zm200 0h280v-119H440v119ZM292-599h376L480-740 292-599Z"/></svg>') no-repeat center center;
}
.icon.payments {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M560-440q-50 0-85-35t-35-85q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35ZM280-320q-33 0-56.5-23.5T200-400v-320q0-33 23.5-56.5T280-800h560q33 0 56.5 23.5T920-720v320q0 33-23.5 56.5T840-320H280Zm80-80h400q0-33 23.5-56.5T840-480v-160q-33 0-56.5-23.5T760-720H360q0 33-23.5 56.5T280-640v160q33 0 56.5 23.5T360-400Zm440 240H120q-33 0-56.5-23.5T40-240v-440h80v440h680v80ZM280-400v-320 320Z"/></svg>') no-repeat center center;
}
.icon.pets {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M180-475q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180-160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm240 0q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180 160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM266-75q-45 0-75.5-34.5T160-191q0-52 35.5-91t70.5-77q29-31 50-67.5t50-68.5q22-26 51-43t63-17q34 0 63 16t51 42q28 32 49.5 69t50.5 69q35 38 70.5 77t35.5 91q0 47-30.5 81.5T694-75q-54 0-107-9t-107-9q-54 0-107 9t-107 9Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M180-475q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180-160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm240 0q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29Zm180 160q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM266-75q-45 0-75.5-34.5T160-191q0-52 35.5-91t70.5-77q29-31 50-67.5t50-68.5q22-26 51-43t63-17q34 0 63 16t51 42q28 32 49.5 69t50.5 69q35 38 70.5 77t35.5 91q0 47-30.5 81.5T694-75q-54 0-107-9t-107-9q-54 0-107 9t-107 9Z"/></svg>') no-repeat center center;
}
.icon.share {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23e8eaed"><path d="M680-80q-50 0-85-35t-35-85q0-6 3-28L282-392q-16 15-37 23.5t-45 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q24 0 45 8.5t37 23.5l281-164q-2-7-2.5-13.5T560-760q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-24 0-45-8.5T598-672L317-508q2 7 2.5 13.5t.5 14.5q0 8-.5 14.5T317-452l281 164q16-15 37-23.5t45-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T720-200q0-17-11.5-28.5T680-240q-17 0-28.5 11.5T640-200q0 17 11.5 28.5T680-160ZM200-440q17 0 28.5-11.5T240-480q0-17-11.5-28.5T200-520q-17 0-28.5 11.5T160-480q0 17 11.5 28.5T200-440Zm480-280q17 0 28.5-11.5T720-760q0-17-11.5-28.5T680-800q-17 0-28.5 11.5T640-760q0 17 11.5 28.5T680-720Zm0 520ZM200-480Zm480-280Z"/></svg>') no-repeat center center;
}
.icon.search {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center center;
}
.icon.star {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><path d="M0 0h24v24H0V0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/></g><g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></g></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><path d="M0 0h24v24H0V0z" fill="none"/><path d="M0 0h24v24H0V0z" fill="none"/></g><g><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z"/></g></svg>') no-repeat center center;
}
.icon.star_rate {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><rect fill="none" height="24" width="24" x="0"/><path d="M12,8.89L12.94,12h2.82l-2.27,1.62l0.93,3.01L12,14.79l-2.42,1.84l0.93-3.01L8.24,12h2.82L12,8.89 M12,2l-2.42,8H2 l6.17,4.41L5.83,22L12,17.31L18.18,22l-2.35-7.59L22,10h-7.58L12,2L12,2z"/></g></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="currentColor"><g><rect fill="none" height="24" width="24" x="0"/><path d="M12,8.89L12.94,12h2.82l-2.27,1.62l0.93,3.01L12,14.79l-2.42,1.84l0.93-3.01L8.24,12h2.82L12,8.89 M12,2l-2.42,8H2 l6.17,4.41L5.83,22L12,17.31L18.18,22l-2.35-7.59L22,10h-7.58L12,2L12,2z"/></g></svg>') no-repeat center center;
}
.icon.swap_vert {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/></svg>') no-repeat center center;
}
.icon.visible {
-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>') no-repeat center center;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"/></svg>') no-repeat center center;
}
/* *************************************************************************************
****************************************************************************************
****************************************************************************************
************************************ GEES ELEMENTS *************************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
/*
:: HEADLINES
:: CSS CONSTRUCTOR
<h1 data-gees="h1"></h1>
*/
[data-gees="h1"] {
font-size: 2.5rem;
line-height: 1.125em;
margin: 0px;
}
[data-gees="h2"] {
font-size: 2.25rem;
margin: 0px;
}
[data-gees="h3"] {
font-size: 2.0rem;
margin: 0px;
}
[data-gees="h4"] {
font-size: 1.75rem;
margin: 0px;
}
[data-gees="h5"] {
font-size: 1.5rem;
line-height: 1.3em;
margin: 0px;
}
[data-gees="h6"] {
font-size: 1rem;
margin: 0px;
}
/*
:: CARD(S)
:: CSS CONSTRUCTOR
<div data-gees="card"></div>
*/
[data-gees="card"] {
padding: 0.5em;
border-radius: 0.625em;
background: hsl(var(--col_se_5));
}
[data-gees="card"][data-display="inline"] {
display: inline;
}
[data-gees="card"][data-display="block"] {
display: block;
}
[data-gees="card"][data-aspectratio="1:1"] {
aspect-ratio: 1 / 1;
}
/*
:: BUTTON
:: CSS CONSTRUCTOR
<button data-gees="button" data-style="ghost|link" data-size="sm" data-iconleft="star" data-iconright="arrow_forward" data-display="block" data-justify="center|space-between|space-around|start|end|stretch">Click Me!</button>
*/
[data-gees="button"] {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: none;
background: hsl(var(--col_pr_3));
color: hsl(var(--col_gs_white));
gap: 0.5rem;
padding: 1rem;
border-radius: 1rem;
font-weight: 500;
font-size: 1rem;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background 250ms;
}
[data-gees="button"] * {
cursor: pointer;
}
[data-gees="button"]:hover {
background: hsl(var(--col_pr_4));
}
[data-gees="button"][disabled] {
}
/* sizing */
[data-gees="button"][data-size="xs"] {
padding: 0.1878rem;
border-radius: 0.55rem;
}
[data-gees="button"][data-size="sm"] {
padding: 0.55rem;
border-radius: 0.55rem;
}
/* justify content */
[data-gees="button"][data-justify="center"] {
justify-content: center;
}
[data-gees="button"][data-justify="space-between"] {
justify-content: space-between;
}
[data-gees="button"][data-justify="space-around"] {
justify-content: space-around;
}
[data-gees="button"][data-justify="start"] {
justify-content: start;
}
[data-gees="button"][data-justify="end"] {
justify-content: end;
}
[data-gees="button"][data-justify="stretch"] {
justify-content: stretch;
}
/* style */
[data-gees="button"][data-style="ghost"] {
background-color: transparent;
color: hsl(var(--col_se_3));
border-color: hsl(var(--col_se_3));
border-style: solid;
border-width: 1px;
}
[data-gees="button"][data-style="link"] {
color: hsl(var(--col_se_3));
background-color: transparent;
}
/* icon */
[data-gees="button"][data-iconleft] .icon,
[data-gees="button"][data-iconright] .icon {
background-color: hsl(var(--col_gs_white));
}
[data-gees="button"][data-style="ghost"] .icon,
[data-gees="button"][data-style="link"] .icon {
background-color: hsl(var(--col_se_3));
}
/* display */
[data-gees="button"][data-display="block"] {
width: 100%;
}
/*
:: LINK
:: CSS CONSTRUCTOR
<a href="#" data-gees="link">Testlink</a>
*/
[data-gees="link"] {
cursor: pointer;
color: hsl(var(--col_pr_4));
text-decoration: none;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.25em;
}
[data-gees="link"] * {
cursor: pointer;
}
[data-gees="link"]:hover {
cursor: pointer;
color: hsl(var(--col_pr_5));
text-decoration: none;
}
/* icon */
[data-gees="link"][data-icon] .icon {
margin-right: 0.15rem;
background-color: hsl(var(--col_pr_4));
}
[data-gees="link"]:hover[data-icon] .icon {
background-color: hsl(var(--col_pr_5));
}
[data-gees="link"][data-icon][data-iconpos="right"] .icon {
margin-right: 0px;
margin-left: 0.15rem;
}
/*
:: INPUT_TEXT
:: CSS CONSTRUCTOR
<input type="text|email|password|search|tel|url" data-gees="input_text" data-size="sm" data-icon="star" data-text-align="left|right|center" placeholder="Suche">
*/
[data-gees="input_text"]:not(input) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0.5em;
position: relative;
border-radius: 0.75em;
z-index: 2;
height: 2.75em;
width: 100%;
font-size: 1rem;
text-align: left;
padding-left: 1em;
padding-right: 1em;
border: 1px hsl(var(--col_se_5)) solid;
color: hsl(var(--col_gs_gray1));
background-color: hsl(var(--col_gs_black));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-sizing: border-box;
}
/* levels */
[data-gees="input_text"]:not(input)[data-level] {
border-width: 0.156em;
border-style: solid;
}
[data-gees="input_text"]:not(input)[data-level="danger"] {
border-color: hsl(var(--col_sys_red));
}
[data-gees="input_text"]:not(input)[data-level="warning"] {
border-color: hsl(var(--col_sys_yellow));
}
[data-gees="input_text"]:not(input)[data-level="success"] {
border-color: hsl(var(--col_sys_green));
}
/* sizing */
[data-gees="input_text"][data-size="sm"]:not(input) {
height: 2.25em;
}
[data-gees="input_text"] input {
z-index: 1;
width: 100%;
height: 100%;
border: none;
padding: 0px;
color: hsl(var(--col_gs_white));
font-size: 1em;
font-weight: normal;
font-family: inherit;
background: transparent;
border-radius: 0px;
z-index: 2;
}
[data-gees="input_text"] input:-webkit-autofill{
-webkit-text-fill-color: hsl(var(--col_gs_white)) !important;
}
[data-gees="input_text"] .icon {
min-width: 1.5em;
min-height: 1.5em;
background-color: hsl(var(--col_gs_gray4));
}
[data-gees="input_text"] + .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background-color: hsl(var(--col_gs_gray4));
}
/* Prefix */
.prefix {
color: hsl(var(--col_gs_white));
white-space: nowrap;
}
/* Suffix */
.suffix {
color: hsl(var(--col_gs_white));
white-space: nowrap;
}
/* placeholder */
[data-gees="input_text"] .placeholder {
position: absolute;
color: hsl(var(--col_gs_white));
opacity: 0.5;
left: 1em;
top: 50%;
transform: translateY(-50%);
font-size: 1em;
font-weight: normal;
background: transparent;
z-index: 1;
}
/* When No Placeholder Settet no Padding and 100% Height */
[data-gees="input_text"] input:not([placeholder]) {
padding-top: 0px !important;
height: 100% !important;
}
/* Dont show placeholder for SM inputs */
[data-gees="input_text"][data-size="sm"] .placeholder {
display: none;
}
[data-gees="input_text"] > .icon + input + .placeholder {
left: 3em;
}
[data-gees="input_text"]:not([data-size="sm"]) input[placeholder]:focus,
[data-gees="input_text"]:not([data-size="sm"]) input[placeholder]:not(:placeholder-shown) {
margin-top: 1em;
height: calc(100% - 1em);
}
[data-gees="input_text"] input:focus + .placeholder,
[data-gees="input_text"] input:not(:placeholder-shown) + .placeholder {
font-size: 0.75em;
top: 1em;
left: 1.4em;
}
[data-gees="input_text"] > .icon + input:focus + .placeholder,
[data-gees="input_text"] > .icon + input:not(:placeholder-shown) + .placeholder {
left: 4em;
}
[data-gees="input_text"] input:-webkit-autofill,
[data-gees="input_text"] input:-webkit-autofill:hover,
[data-gees="input_text"] input:-webkit-autofill:focus {
-webkit-text-fill-color: hsl(var(--col_gs_black));
}
[data-gees="input_text"]:not([data-size="sm"]) input::-webkit-input-placeholder { opacity: 0; !important; }
[data-gees="input_text"]:not([data-size="sm"]) input::-moz-placeholder { opacity: 0; !important; }
[data-gees="input_text"]:not([data-size="sm"]) input::-ms-input-placeholder { opacity: 0; !important; }
[data-gees="input_text"]:not([data-size="sm"]) input::placeholder { opacity: 0; !important; }
/* coloring */
[data-gees="input_text"] input::-webkit-input-placeholder { color: hsla(var(--col_gs_black), 0.5); }
[data-gees="input_text"] input::-moz-placeholder { color: hsla(var(--col_gs_black), 0.5); }
[data-gees="input_text"] input::-ms-input-placeholder { color: hsla(var(--col_gs_black), 0.5); }
[data-gees="input_text"] input::placeholder { color: hsla(var(--col_gs_black), 0.5); }
[data-gees="input_text"].danger .placeholder {
color: hsl(var(--col_sys_red));
}
/* Other Textfield types */
[data-gees="input_text"] input[type="number"][data-text-align="left"] {
text-align: left;
}
[data-gees="input_text"] input[type="number"][data-text-align="center"] {
text-align: center;
}
[data-gees="input_text"] input[type="number"][data-text-align="right"] {
text-align: right;
}
[data-gees="input_text"] input[type="date"]::-webkit-date-and-time-value {
text-align: left;
}
/*
:: DROPDOWN
:: CSS CONSTRUCTOR
<select data-gees="dropdown" placeholder="Bundesligaverein" data-icon="search" data-maxheight="5">
<option value="1">Bayern München</option>
<option value="2">SC Freiburg</option>
<option value="3">Eintracht Frankfurt</option>
<option value="4">VFW Stuttgart</option>
<option value="5">Bayer Leverkusen</option>
<option value="6">RB Leipzig</option>
</select>
*/
[data-gees="dropdown"]:not(select) {
font-size: 1rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5em;
min-width: 100%;
white-space: nowrap;
position: relative;
border-radius: 0.75em;
z-index: 3;
font-family: inherit;
text-align: left;
padding: 0.625em 0.75em;
color: hsl(var(--col_gs_gray1));
background-color: hsl(var(--col_gs_black));
color: hsl(var(--col_gs_white));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
box-sizing: border-box;
}
[data-gees="dropdown"],
[data-gees="dropdown"] * {
cursor: pointer;
}
[data-gees="dropdown"] .optionsBox {
position: absolute;
left: 0px;
top: calc(100% + 0.75em);
border-radius: 0.75em;
overflow: hidden;
width: 100%;
height: 20px;
height: auto;
display: none;
background-color: inherit;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
white-space: nowrap;
}
[data-gees="dropdown"] .optionsBox > div[data-value=""] {
display: none;
}
[data-gees="dropdown"] .optionsBox > div {
padding: 0.625em 0.75em;
}
[data-gees="dropdown"] .optionsBox > div:hover {
background-color: hsl(var(--col_gs_gray6));
}
[data-gees="dropdown"] .optionsBox > div:not(:last-child) {
border-bottom: 1px hsl(var(--col_gs_gray3)) solid;
}
[data-gees="dropdown"] select {
display: none;
}
/* Icon(s) */
[data-gees="dropdown"] .icon {
background-color: hsl(var(--col_gs_white));
}
/* display */
[data-gees="dropdown"][data-display="block"] {
width: 100%;
}
/*
:: MULTILIST
:: CSS CONSTRUCTOR
<div data-gees="multilist" data-searchoption="1|0" data-selectall="1|0" data-placeholder="Bundesligaverein" data-maxheight="3" data-notfoundmsg="Nichts gefunden" data-icon="search">
<div>
<input type="checkbox" value="1" data-gees="checkbox" data-label="Bayern München">
</div>
<div>
<input type="checkbox" value="1" data-gees="checkbox" data-label="SC Freiburg">
</div>
<div>
<input type="checkbox" value="1" data-gees="checkbox" data-label="Eintracht Frankfurt">
</div>
<div>
<input type="checkbox" value="1" data-gees="checkbox" data-label="VFB Stuttgart">
</div>
<div>
<input type="checkbox" value="1" data-gees="checkbox" data-label="Bayer Leverkusen">
</div>
</div>
*/
[data-gees="multilist"] {
border: 1px hsl(var(--col_se_3)) solid;
font-size: 1rem;
color: hsl(var(--col_gs_white));
background-color: hsl(var(--col_se_5));
border-radius: 0.75em;
overflow: hidden;
text-align: left;
display: flex;
flex-direction: column;
}
[data-gees="multilist"] .searchArea {
border-bottom: 1px hsl(var(--col_se_3)) solid;
}
[data-gees="multilist"] .searchArea input {
border: none;
padding: 1rem;
width: 100%;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
background: hsl(var(--col_se_4));
color: inherit;
font-size: inherit;
}
[data-gees="multilist"] .searchArea input:-webkit-input-placeholder { color: hsl(var(--col_gs_gray2)); !important; }
[data-gees="multilist"] .searchArea input::-moz-placeholder { color: hsl(var(--col_gs_gray2)); !important; }
[data-gees="multilist"] .searchArea input::-ms-input-placeholder { color: hsl(var(--col_gs_gray2)); !important; }
[data-gees="multilist"] .searchArea input::placeholder { color: hsl(var(--col_gs_gray2)); !important; }
[data-gees="multilist"] .options {
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
height: 100%;
}
[data-gees="multilist"] .options::-webkit-scrollbar {
display: none;
}
[data-gees="multilist"] .options > div {
padding: 1em;
}
[data-gees="multilist"] .options > div:not(:last-child) {
border-bottom: 1px hsl(var(--col_se_3)) solid;
}
/*
:: SWITCH
:: CSS CONSTRUCTOR
<input type="checkbox" name="hostEvents" value="1" data-gees="switch" data-label="Switch 1">
*/
[data-gees="switch"] {
width: 54px;
min-width: 54px;
height: 30px;
min-height: 30px;
text-align: left;
position: relative;
}
[data-gees="switch"] input {
display: none;
}
[data-gees="switch"] input + label {
display: inline-block;
width: 100%;
height: 100%;
padding: 3px;
border-radius: 20px;
background: hsl(var(--col_gs_gray2));
box-sizing: border-box;
cursor: pointer;
transition: all 0.5s;
}
[data-gees="switch"] input + label + label {
position: absolute;
white-space: nowrap;
top: 50%;
cursor: pointer;
transform: translate(0.5em, -50%);
}
[data-gees="switch"] .thumb {
width: 24px;
height: 24px;
display: inline-block;
border-radius: inherit;
background: hsl(var(--col_gs_white));
transition: all 0.5s;
}
[data-gees="switch"] input:checked ~label:first-of-type .thumb {
transform: translateX(24px);
}
[data-gees="switch"] input:checked ~label:first-of-type {
background: hsl(var(--col_sys_green));
}
/*
:: BREADCRUMB
:: CSS CONSTRUCTOR
<div data-gees="breadcrumb" data-gap="1em" data-separator="/">
<div>Position 1</div>
<div>Position 2</div>
<div>Position 3</div>
<div>Position 4</div>
<div>Position 5</div>
</div>
*/
[data-gees="breadcrumb"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
gap: 1em;
}
[data-gees="breadcrumb"][data-direction="vertical"] {
flex-direction: column;
align-items: flex-start;
}
[data-gees="breadcrumb"][data-direction="vertical"] > div {
float: left;
}
[data-gees="breadcrumb"] > div {
opacity: 0.33;
}
[data-gees="breadcrumb"] > div.active {
opacity: 1;
}
/*
:: GROUP
:: CSS CONSTRUCTOR
<div data-gees="group" data-contains="buttons|switches">
*/
[data-gees="group"] {
width: 100%;
}
[data-gees="group"][data-display="block"] {
width: 100%;
}
/* for buttons */
[data-gees="group"][data-contains="buttons"] > [data-gees="button"]:not(:first-child):not(:last-child) {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
[data-gees="group"][data-contains="buttons"] > [data-gees="button"]:first-child {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
[data-gees="group"][data-contains="buttons"] > [data-gees="button"]:last-child {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
/* for switches */
[data-gees="group"][data-contains="switches"] {
width: 100%;
border-radius: 1em;
padding: 0.5em;
color: hsl(var(--col_gs_black));
/*background-color: hsl(var(--col_pr_1));*/
}
[data-gees="group"][data-contains="switches"] > *:not(:last-child) {
margin-bottom: 0.5em;
}
/* for radios */
[data-gees="group"][data-contains="radios"] {
border-radius: 1em;
width: auto;
padding: 0em;
overflow: hidden;
height: 2.75em;
background-color: hsl(var(--col_gs_black));
color: hsl(var(--col_gs_white));
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
[data-gees="group"][data-contains="radios"] [data-gees="radio"]:not(input) {
padding: 1rem 1rem;
position: relative;
flex: 1;
justify-content: center;
height: 100%;
}
[data-gees="group"][data-contains="radios"] [data-gees="radio"]:not(input) .thmb {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
border: none;
border-radius: 0px;
}
[data-gees="group"][data-contains="radios"] [data-gees="radio"] input:checked + .thmb {
background-color: hsl(var(--col_pr_3));
border-radius: 1em;
}
[data-gees="group"][data-contains="radios"] [data-gees="radio"] input:checked + .thmb .thumb {
display: none;
}
/* display */
[data-gees="group"][data-contains="radios"][data-display="block"] {
width: 100%;
}
/*
:: GROUP
:: CSS CONSTRUCTOR
<div data-gees="group" data-contains="buttons|switches">
*/
/*
:: INPUT_RANGE
*/
[data-gees="input_range"] {
display: block;
position: relative;
width: 100%;
}
[data-gees="input_range"] * {
user-select: none;
}
[data-gees="input_range"]:before {
content:'';
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: var(--gap_0_25);
background-color: hsl(var(--col_gs_white));
opacity: 0.5;
}
[data-gees="input_range"] .thumb {
width: var(--gap_2_75);
height: var(--gap_2_75);
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
[data-gees="input_range"] .thumb:after {
content: '';
width: var(--gap_1_75);
height: var(--gap_1_75);
border-radius: 50%;
background: hsl(var(--col_gs_white));
-webkit-box-shadow: 0px 6px 21px 5px hsla(var(--col_gs_black),0.5);
box-shadow: 0px 6px 21px 5px rgba(0,0,0,0.46);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[data-gees="input_range"] .track {
height: 5px;
width: 100%;
color: hsl(var(--col_se_3));
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 0;
}
[data-gees="input_range"] .thumb:nth-child(2) {
/*transform: translate(-100%, -50%);*/
}
[data-gees="input_range"] input[type="range"] {
margin: 0px;
visibility: hidden;
}
/*
:: INPUT_CODE
*/
[data-gees="input_code"] {
position: relative;
z-index: 2;
height: var(--gap_2_75);
width: 100%;
font-size: 2rem;
background-color: hsl(var(--col_gs_white));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
[data-gees="input_code"] input {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
border: none;
text-transform: uppercase;
padding: 0px;
color: hsl(var(--col_gs_black));
font-size: 1em;
font-weight: normal;
background: transparent;
}
[data-gees="input_code"] .codeLines {
width: 100%;
border: 1px red dashed;
}
[data-gees="input_code"] .codeLines > div {
width: 13%;
border: 2px green solid;
display: inline-block;
}
/*
:: STEPINDICATOR
:: CSS CONSTRUCTOR
<div data-gees="stepIndicator">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
</div>
*/
[data-gees="stepIndicator"] {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
[data-gees="stepIndicator"] > div {
width: var(--gap_0_5);
height: var(--gap_0_5);
border-radius: 50%;
background-color: hsl(var(--col_pr_3));
opacity: 0.3;
}
[data-gees="stepIndicator"] > div.active {
opacity: 1;
}
[data-gees="stepIndicator"] > div:not(:last-child) {
margin-right: 0.4375rem;
}
/*
:: CHECKBOX
*/
[data-gees="checkbox"]:not(input) {
display: flex;
border-radius: 0.6875rem;
gap: 0.5rem;
text-align: left;
background: transparent;
cursor: pointer;
position: relative;
}
[data-gees="checkbox"] * {
cursor: pointer;
}
[data-gees="checkbox"] .thmb {
width: 1.375rem;
min-width: 1.375rem;
height: 1.375rem;
min-height: 1.375rem;
border: 0.0625rem hsl(var(--col_gs_gray1)) solid;
border-radius: 50%;
background-color: transparent;
}
[data-gees="checkbox"] .thmb .thumb {
display: none;
width: 100%;
height: 100%;
margin-top: 0%;
margin-left: 0%;
border-radius: 50%;
background-color: hsl(var(--col_pr_1));
position: relative;
appearance: none;
opacity: 1;
transform: scale(0.8);
transform-origin: 25% 25%;
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');
background-color: hsl(var(--col_gs_white));
}
[data-gees="checkbox"] input[type="checkbox"] {
display: none;
}
[data-gees="checkbox"] input:checked + .thmb {
background-color: hsl(var(--col_se_3));
border: 0.0625rem hsl(var(--col_se_3)) solid;
}
[data-gees="checkbox"] input:checked + .thmb .thumb {
display: block;
}
[data-gees="checkbox"] label {
line-height: 1.2em;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
}
/*
:: RADIO
*/
[data-gees="radio"]:not(input) {
display: flex;
border-radius: 0.6875rem;
gap: 0.5rem;
text-align: left;
background: transparent;
cursor: pointer;
position: relative;
}
[data-gees="radio"] * {
cursor: pointer;
}
[data-gees="radio"] .thmb {
width: 1.375rem;
min-width: 1.375rem;
height: 1.375rem;
min-height: 1.375rem;
border: 0.0625rem hsl(var(--col_gs_gray1)) solid;
border-radius: 50%;
background-color: transparent;
}
[data-gees="radio"] .thmb .thumb {
display: none;
width: 100%;
height: 100%;
margin-top: 0%;
margin-left: 0%;
border-radius: 50%;
background-color: hsl(var(--col_pr_1));
position: relative;
appearance: none;
opacity: 1;
transform: scale(0.45);
transform-origin: 50% 50%;
background-color: hsl(var(--col_gs_white));
}
[data-gees="radio"] input[type="radio"] {
display: none;
}
[data-gees="radio"] input:checked + .thmb {
background-color: hsl(var(--col_se_3));
border: 0.0625rem hsl(var(--col_se_3)) solid;
}
[data-gees="radio"] input:checked + .thmb .thumb {
display: block;
}
[data-gees="radio"] label {
line-height: 1em;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
z-index: 1;
}
/*
:: TEXTAREA
*/
[data-gees="textarea"] {
position: relative;
border-radius: 16px;
z-index: 2;
min-height: var(--gap_6);
height: var(--gap_6);
width: 100%;
font-size: 1rem;
border: 1px hsl(var(--col_se_5)) solid;
color: hsl(var(--col_gs_white));
background-color: hsl(var(--col_gs_black));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
[data-gees="textarea"] textarea {
z-index: 1;
width: 100%;
height: calc(var(--gap_4) - 1.5em);
min-height: var(--gap_4);
border: none;
margin-top: 1.5em;
padding: 0em 1em 0em 1em;
color: hsl(var(--col_gs_white));
font-size: 1em;
font-weight: normal;
background: transparent;
resize: none;
}
[data-gees="textarea"] .placeholder {
position: absolute;
color: hsl(var(--col_gs_gray1));
opacity: 0.5;
left: 1.25em;
top: 1.1em;
font-size: 1em;
font-weight: normal;
background: transparent;
z-index: 1;
}
[data-gees="textarea"].danger .placeholder {
color: hsl(var(--col_sys_red));
}
[data-gees="textarea"] textarea:focus + .placeholder,
[data-gees="textarea"] textarea:not(:placeholder-shown) + .placeholder {
font-size: 0.75em;
top: 0.5em;
}
[data-gees="textarea"] textarea:focus + .placeholder {
top: 0.5em;
left: 1.25em;
}
[data-gees="textarea"] textarea:-webkit-autofill,
[data-gees="textarea"] textarea:-webkit-autofill:hover,
[data-gees="textarea"] textarea:-webkit-autofill:focus {
-webkit-text-fill-color: var(--white);
}
[data-gees="textarea"] textarea::-webkit-input-placeholder { opacity: 0; !important; }
[data-gees="textarea"] textarea::-moz-placeholder { opacity: 0; !important; }
[data-gees="textarea"] textarea::-ms-input-placeholder { opacity: 0; !important; }
[data-gees="textarea"] textarea::placeholder { opacity: 0; !important; }
/*
:: INPUT-BLOCK
*/
[data-gees="input_block"] {
position: relative;
border-radius: 0.75em;
width: 100%;
height: 2.75rem;
font-size: 0.875rem;
line-height: 1rem;
border: 1px hsl(var(--col_se_5)) solid;
color: hsl(var(--col_gs_white));
background-color: hsl(var(--col_gs_black));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
padding: 0px 1rem;
display: flex;
gap: 0.25rem;
align-items: center;
justify-content: space-between;
flex-direction: row;
flex-wrap: nowrap;
}
[data-gees="input_block"] label {
white-space: nowrap;
text-align: left;
}
[data-gees="input_block"] label:nth-child(2) {
flex-grow: 1;
}
[data-gees="input_block"] .value {
flex-grow: 1;
text-align: right;
}
[data-gees="input_block"] .suffix {
padding-left: 0.25em;
}
[data-gees="input_block"] .value,
[data-gees="input_block"] .suffix {
position: relative;
opacity: 0.5;
}
[data-gees="input_block"] [data-gees="input_text"],
[data-gees="input_block"] [data-gees="input_mail"],
[data-gees="input_block"] [data-gees="input_password"],
[data-gees="input_block"] [data-gees="input_code"] {
background: none;
padding: 0px;
color: hsl(var(--col_gs_black));
}
[data-gees="input_block"] [data-gees="input_text"] {
height: 100%;
}
[data-gees="input_block"] [data-gees="input_text"] input,
[data-gees="input_block"] [data-gees="input_mail"] input,
[data-gees="input_block"] [data-gees="input_password"] input,
[data-gees="input_block"] [data-gees="input_code"] input {
color: inherit;
padding: 0px 0px 0px var(--gap_1);
}
/*
:: INPUT-GROUP
*/
[data-gees="input_group"] {
background: none;
border-color: hsl(var(--col_gs_white));
color: hsl(var(--col_gs_white));
border-radius: 16px;
font-size: 19px;
cursor: pointer;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
}
[data-gees="input_group"] > div .inputArea,
[data-gees="input_group"] [data-gees="input_block"] {
border-radius: 0px;
}
[data-gees="input_group"] > div:first-child .inputArea,
[data-gees="input_group"] > [data-gees="input_block"]:first-child {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
[data-gees="input_group"] > div:last-child .inputArea,
[data-gees="input_group"] > [data-gees="input_block"]:last-child {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
[data-gees="input_group"] > div:not(:last-child) .inputArea,
[data-gees="input_group"] > [data-gees="input_block"]:not(:last-child) {
/*border-bottom: 1px hsl(var(--col_pr_1)) solid;*/
}
/*
:: PILL
:: CSS CONSTRUCTOR
<div data-gees="pill" data-icon="<svg...></svg>">Text</div>
*/
[data-gees="pill"] {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 1.5rem;
font-size: 0.875rem;
gap: 0.25em;
color: hsl(var(--col_gs_black));
background-color: hsl(var(--col_gs_gray2));
border-radius: 0.75rem;
padding: 0.25em 0.5em;
white-space: nowrap;
}
[data-gees="pill"] .icon {
width: 1em;
height: 1em;
background: hsl(var(--col_gs_black));
}
/*
:: POPOVER
:: CSS CONSTRUCTOR
*/
[data-gees="popover"][id^="popOver_"] {
position: fixed;
left: 0px;
top: 0px;
display: none;
border: 1px hsl(var(--col_se_5)) solid;
padding: 0.5rem;
background-color: hsl(var(--col_gs_black));
color: hsl(var(--col_gs_white));
border-radius: 0.75rem;
z-index: 100;
}
/*
:: SLIDER
:: CSS CONSTRUCTOR
<div data-gees="slider">
<div class="elm">A</div>
<div class="elm">B</div>
<div class="elm">C</div>
<div class="elm">D</div>
<div class="elm">E</div>
<div class="elm">F</div>
<div class="elm">G</div>
</div>
:: Note:
Funktioniert durch manipulation von margin-left des ersten slider elements. Deshalb darf den elm kein margin zugewiesen werden!
Elemente müssen auf stoß aneinander liegen inhalte darin mit padding abgrenzen.
Nicht vergessen den Elementen eine Breite zuzuwiesen. Min-width muss zugewiesen werden damit aus dem parent container ausgebrochen wird.
Auch keine transitions auf die elemente legen.
*/
div[data-gees="slider"] {
width: 100%;
font-size: 1rem;
}
div[data-gees="slider"] .slides {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
overflow-x: hidden;
}
div[data-gees="slider"] .slides .elm {
;
}
div[data-gees="slider"] .slides .elm.trans {
transition: margin 0.5s ease-in-out;
}
div[data-gees="slider"] .chevronsBox {
padding: 2rem;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 2em;
}
div[data-gees="slider"] .chevronsBox .left,
div[data-gees="slider"] .chevronsBox .right {
background-color: hsl(var(--col_gs_white));
width: 4em;
height: 4em;
position: relative;
cursor: pointer;
}
div[data-gees="slider"] .chevronsBox .left:after,
div[data-gees="slider"] .chevronsBox .right:after {
content: 'xx';
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
border: 1px red solid;
}
/*
:: ACCORDION
:: CSS CONSTRUCTOR
<div data-gees="accordion" data-slideSpeed="250" data-onlyOneOpen="1|0">
<div class="group" data-label="Räumlichkeiten" data-expandIcon="expand_less">
Inhalt text oder sonstiger content...
</div>
<div class="group opened" data-label="Grundaustattung" data-expandIcon="expand_less">
Inhalt text oder sonstiger content...
</div>
<div class="group" data-label="Technische Ausstattung" data-expandIcon="expand_less">
Inhalt text oder sonstiger content...
</div>
</div>
*/
div[data-gees="accordion"] {
width: 100%;
font-size: 1em;
border-radius: 1em;
color: hsl(var(--col_gs_white));
overflow: hidden;
}
div[data-gees="accordion"] > .group .label {
padding: 0.75em 0em;
cursor: pointer;
border-bottom: 0.25px hsl(var(--col_gs_gray4)) solid;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
div[data-gees="accordion"] > .group .label .icon {
width: 1.25em;
height: 1.25em;
background-color: hsl(var(--col_pr_3));
transform: rotate(-180deg);
}
div[data-gees="accordion"] > .group .body {
padding-left: 1em;
display: none;
font-weight: normal;
}
/*
:: IMAGEGALLERY
*/
div[data-gees="imageGallery"] {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.93);
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
flex-direction: column;
gap: 1em;
z-index: 10000;
}
div[data-gees="imageGallery"] .middleBox {
margin: 0px auto;
width: 100vw;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
div[data-gees="imageGallery"] .middleBox .leftPart,
div[data-gees="imageGallery"] .middleBox .rightPart {
width: 10vw;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 10100;
}
div[data-gees="imageGallery"] .middleBox .leftPart {
left: 10px;
}
div[data-gees="imageGallery"] .middleBox .rightPart {
right: 10px;
}
div[data-gees="imageGallery"] .middleBox .arrLeft,
div[data-gees="imageGallery"] .middleBox .arrRight {
border-radius: 1.25rem;
background-color: white;
cursor: pointer;
transition: all 150ms ease-in-out;
}
div[data-gees="imageGallery"] .middleBox .arrLeft:hover,
div[data-gees="imageGallery"] .middleBox .arrRight:hover {
transform: scale(1.1);
}
div[data-gees="imageGallery"] .middleBox .arrLeft .icon,
div[data-gees="imageGallery"] .middleBox .arrRight .icon {
background: black;
width: 2rem;
height: 2rem;
}
div[data-gees="imageGallery"] .bigImgBox {
flex-grow: 1;
height: 60vh;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
div[data-gees="imageGallery"] .bigImgBox .elm {
height: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: relative;
}
div[data-gees="imageGallery"] .thumbsBox {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 1em;
padding: 1em;
max-width: 100%;
margin: 0px auto;
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
div[data-gees="imageGallery"] .thumbsBox::-webkit-scrollbar {
display: none;
}
div[data-gees="imageGallery"] .thumbsBox .elm {
width: 100px;
min-width: 100px;
max-width: 100px;
height: 75px;
min-height: 75px;
max-height: 75px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 0.5em;
cursor: pointer;
transition: all 150ms ease-in-out;
position: relative;
}
div[data-gees="imageGallery"] .thumbsBox .elm:hover:not(.active) {
transform: scale(1.1);
transform-origin: center;
}
div[data-gees="imageGallery"] .thumbsBox .elm.active:after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -20%;
background-color: white;
}
div[data-gees="imageGallery"] .closeCross {
width: 3rem;
height: 3rem;
right: 0px;
top: 0px;
position: absolute;
color: #fff;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
/* *************************************************************************************
****************************************************************************************
****************************************************************************************
************************************* GLOBAL CLASSES ***********************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
.col_pr_1 { color: hsl(var(--col_pr_1)); }
.col_pr_3 { color: hsl(var(--col_pr_3)); }
.mt_0_5 { margin-top: var(--gap_0_5); }
.mt_0_75 { margin-top: var(--gap_0_75); }
.mt_1 { margin-top: var(--gap_1); }
.mt_1_5 { margin-top: var(--gap_1_5); }
.mt_2 { margin-top: var(--gap_2); }
.mt_3 { margin-top: var(--gap_3); }
.mt_4 { margin-top: var(--gap_4); }
.mt_5 { margin-top: var(--gap_5); }
.mt_10vh { margin-top: 10vh; }
.mt_25vh { margin-top: 25vh; }
.mb_0_5 { margin-bottom: var(--gap_0_5); }
.mb_0_75 { margin-bottom: var(--gap_0_75); }
.mb_1 { margin-bottom: var(--gap_1); }
.mb_2 { margin-bottom: var(--gap_2); }
.mb_3 { margin-bottom: var(--gap_3); }
.mb_4 { margin-bottom: var(--gap_4); }
.mb_10vh { margin-bottom: 10vh; }
.mb_25vh { margin-bottom: 25vh; }
.mb_50vh { margin-bottom: 50vh; }
.mb_80vh { margin-bottom: 80vh; }
.ml_1 { margin-left: var(--gap_1); }
.ml_2 { margin-left: var(--gap_2); }
.pt_1 { padding-top: var(--gap_1); }
.pt_1_5 { padding-top: var(--gap_1_5); }
.pt_2 { padding-top: var(--gap_2); }
.pt_3 { padding-top: var(--gap_3); }
.pt_4 { padding-top: var(--gap_4); }
.pt_5 { padding-top: var(--gap_5); }
.w100 { width: 100%; }
.dNone { display: none !important; }
.text_warning { color: hsl(var(--col_sys_yellow)); }
.text_left { text-align: left; }
.text_center { text-align: center; }
.font_bold { font-weight: bold; }
.clearB { clear: both; }
.fz_0_75 { font-size: 0.75rem; }
/* *************************************************************************************
****************************************************************************************
****************************************************************************************
*************************************** ANIMATIONS *************************************
****************************************************************************************
****************************************************************************************
****************************************************************************************
************************************************************************************* */
[data-ani="fadeIn"] {
opacity: 0;
}
[data-ani="fadeIn"].ani {
animation-delay: 0.5s;
animation-name: fadeIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
[data-ani="fadeInFromLeft"] {
opacity: 0;
}
[data-ani="fadeInFromLeft"].ani {
animation-name: fadeInFromLeft;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeInFromLeft {
0% {opacity: 0; transform: translateX(-100%);}
100% {opacity: 1; transform: translateX(0);}
}
[data-ani="fadeInFromRight"] {
opacity: 0;
}
[data-ani="fadeInFromRight"].ani {
animation-name: fadeInFromRight;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeInFromRight {
0% {opacity: 0; transform: translateX(100%);}
100% {opacity: 1; transform: translateX(0);}
}
[data-ani="fadeInFromBottom"] {
opacity: 0;
}
[data-ani="fadeInFromBottom"].ani {
opacity: 0;
animation-name: fadeInFromBottom;
animation-duration: 0.5s;
animation-delay: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
@keyframes fadeInFromBottom {
0% {opacity: 0; transform: translateY(100%);}
100% {opacity: 1; transform: translateY(0);}
}
[data-ani="fadeInStandard"] {
opacity: 0;
transform: translateY(12rem);
transition: opacity .6s linear, transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
}
[data-ani="fadeInStandard"].ani {
opacity: 1;
transform: translateY(0);
}