/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    box-sizing: border-box;
}

:root {
    --modal-z-index: 500;
}

/* Fonts */
@font-face {
    font-family: 'Trebuchet MS';
    src: url(/assets/9ed6879ccb7e39a86be3-a492ddcedf18aea8f891949187b2d036caa6901a676f21cad923ef4f6b04fecd.eot);
    src: local('Trebuchet MS Bold Italic'), local('Trebuchet-BoldItalic'),
    url(/assets/9ed6879ccb7e39a86be3-a492ddcedf18aea8f891949187b2d036caa6901a676f21cad923ef4f6b04fecd.eot?#iefix) format('embedded-opentype'),
    url(/assets/52d1cf8ce54762700334-5c7b8b15b4e62cc3307e40ba16a2439883476f430f21fb3d84fddefa14644fd8.woff) format('woff'),
    url(/assets/adcd9b520c91a77e1df6-d45238c70269fac5dc80d71bfda2944bd6dcb167ff5b3754b1e3aae1d379e126.ttf) format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Trebuchet MS';
    src: url(/assets/cf07b813e87a6896b44b-6e1e572887af0d0b4a3581476aef6f5e463115a2c985573e3e6f222f735fea6d.eot);
    src: local('Trebuchet MS Bold'), local('TrebuchetMS-Bold'),
    url(/assets/cf07b813e87a6896b44b-6e1e572887af0d0b4a3581476aef6f5e463115a2c985573e3e6f222f735fea6d.eot?#iefix) format('embedded-opentype'),
    url(/assets/ed76e98b5ec0933d740e-8f45ac1bb76c2e8b3a64a8f258c317a7ae8f2ad1686fc3531c93c3ca1b252f03.woff) format('woff'),
    url(/assets/b69cd0cd0562310312d7-bbf7f54a484a0a689180405f07f8990caa86ec8171e8a14e1fa53dcaf5a2b484.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Trebuchet MS';
    src: url(/assets/04f4970d774f85ad2f73-03cbf44091ccadcc3ad078bd646b60a5c6f60ba270a24da6599a42a6921c936a.eot);
    src: local('Trebuchet MS Italic'), local('TrebuchetMS-Italic'),
    url(/assets/04f4970d774f85ad2f73-03cbf44091ccadcc3ad078bd646b60a5c6f60ba270a24da6599a42a6921c936a.eot?#iefix) format('embedded-opentype'),
    url(/assets/6fafbb390cbb20149b65-57554f2c5e28cbc7eab64a592e2b4600620f3bd6749ddbf91ec52968c0c757e4.woff) format('woff'),
    url(/assets/b7f90862b5077a4c0986-db9cbc688c8046ba5710bc02a1dd20a0573b8378071d07c0a677a8408f98d99e.ttf) format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Trebuchet MS';
    src: url(/assets/a39cca2d6c78afd39d8f-ab1b6cc8789f1507da6ad315bb4a328c58b0c939b9b6e29afe500054d9aec564.eot);
    src: local('Trebuchet MS'), local('TrebuchetMS'),
    url(/assets/a39cca2d6c78afd39d8f-ab1b6cc8789f1507da6ad315bb4a328c58b0c939b9b6e29afe500054d9aec564.eot?#iefix) format('embedded-opentype'),
    url(/assets/af3cbb0e7a5aaa5aad48-2b5f2a59e5dd535f974325a077f6238d6ace5fa7955a08dee7af62a31bfba3e7.woff) format('woff'),
    url(/assets/d69a72044b0a638fd1a5-8b7495d496d6b95af73fa0e3bd7e4a1555a57e27de147cea832480d95038791f.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "Trebuchet MS", "Tahoma", "sans-serif";
    background-color: var(--bg-color);
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text-color);
    font-weight: 600;
    width: 100%;
}

h1 {
    font-size: 38px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

input[type='submit'],
button,
.btn.primary {
    padding: 8px 16px;
    background-color: var(--brand-color);
    color: var(--text-for-brand-color);
    border-radius: 4px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}

input[type='submit']:hover, button:hover, .btn.primary:hover {
    background-color: var(--brand-hover-color);
}

button.default {
    background-color: transparent;
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
}

button.default:hover {
    border-color: var(--brand-hover-color);
    color: var(--brand-hover-color);
}

button:disabled {
    background-color: var(--brand-disabled-color);
    cursor: not-allowed;
}

button.danger {
    background-color: var(--danger-color);
}

select,
input,
textarea {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--color-primary);
    padding: 0 8px;
    color: var(--text-color);
}

select, input {
    height: 32px;
}

input:focus {
    border: 1px solid var(--brand-hover-color);
}

select {
    /* appearance: none; */
}

/* Checkbox */
.checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
}

input[type="checkbox"]:not(.PrivateSwitchBase-input) {
    position: relative;
    width: 40px;
    height: 20px;
    appearance: none;
    background: var(--border-color);
    outline: none;
    border-radius: 20px;
    transition: 0.7s;
    margin: 0;
    border: none;
    cursor: pointer;
}

input:checked[type="checkbox"] {
    background: var(--brand-hover-color);
}

input[type="checkbox"]:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: .5s;
}

input:checked[type="checkbox"]:before {
    left: 20px;
}

/* Radio */
.radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio input[type="radio"] + label:before {
     content: '';
     background: var(--card-color);
     border-radius: 100%;
     border: 1px solid var(--border-color);
     display: inline-block;
     width: 1em;
     height: 1em;
     position: relative;
     margin-right: 1em;
     vertical-align: top;
     cursor: pointer;
     text-align: center;
     transition: all 250ms ease;
}

.radio input[type="radio"]:checked + label:before {
    background-color: var(--brand-color);
    box-shadow: inset 0 0 0 4px var(--card-color);
}

.radio input[type="radio"]:focus + label:before {
    outline: none;
    border-color: var(--brand-color);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.5;
}

.radio input[type="radio"]:disabled + label:before {
    box-shadow: inset 0 0 0 4px var(--card-color);
    /*border-color: var(--border-co);*/
    background: var(--card-disabled-color);
}

.radio input[type="radio"] + label:empty:before {
    margin-right: 0;
}
/* Sub text */

.subText {
    color: var(--sub-text-color);
}

/* Modal */

.modalOverlay {
    position: fixed;
    inset: 0;
    z-index: var(--modal-z-index);
    background-color: rgba(0, 0, 0, 0.8);
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%);
    padding: 0;
    border: none;
    border-radius: 6px;
    box-shadow: 0 0 42px -12px var(--shadow-color);
    overflow-x: hidden;
    overflow-y: auto;
    /* height: 100%; */
    max-height: 95vh;
    width: 100%;
    max-width: 600px;
    white-space: pre-line;
}

.applicationWrapper {
    width: 100vw;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.card {
    background-color: var(--card-color);
    border-radius: 6px;
    padding: 16px 12px;
}

.cart-sidebar-drawer > div.MuiPaper-root {
    background-color: transparent;
}

.applicationWrapper ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.applicationWrapper ::-webkit-scrollbar-track {
    background: transparent;
}

.applicationWrapper ::-webkit-scrollbar-thumb {
    background: #5d7f8e;
    border-radius: 2px;
}

.applicationWrapper ::-webkit-scrollbar-thumb:hover {
    background: #658a9a;
}
:root {

    --input-border-width: 1px;

    /* Light */
    --text-color-light: #17395E;
    --brand-color-light: #17395E;
    --brand-hover-color-light: #818541;
    --brand-disabled-color-light: #5d7f8e;
    --link-color-light: #17395E;
    --link-hover-color-light: #818541;
    --link-disabled-color-light: #5a7cba;
    --card-color-light: #d9d3c0;
    --card-hover-color-light: #818541;
    --card-disabled-color-light: #E6E7EA;
    --primary-color-light: #e0ddd5;
    --primary-hover-color-light: #c8d7ef;
    --primary-disabled-color-light: #dce2ef;
    --bg-color-light: #ECE9E0;
    --border-color-light: #a8b4c2;
    --shadow-color-light: #DADADC;
    --text-for-card-color-light: #17395E;
    --sub-text-color-light: #6e839a;
    --text-for-brand-color-light: white;
    --text-for-brand-disabled-color-light: #C4C7D4;
    --icon-color-light: #9CA9C6;
    --card-box-shadow-light: 0 0 2px 0 rgba(51, 51, 51, 0.25), 0 1px 4px 0 rgba(51, 51, 51, 0.15);

    --info-color-light: #17a2b8;
    --info-hover-color-light: #00b5d1;
    --warning-color-light: #FFB51A;
    --warning-hover-color-light: #ffc547;
    --danger-color-light: #F64666;
    --danger-hover-color-light: #f20b36;
    --success-color-light: #29BC68;
    --success-hover-color-light: #0dd965;

    --transparent-color-light: rgba(255,255,255,.5);
    --google-button-background-color-light: #000000;
    --text-for-google-button-color-light: #FFFFFF;

    /* Dark */
    --text-color-dark: #B2B2B2;
    --brand-color-dark: #818541;
    --brand-hover-color-dark: #B7BF4E;
    --brand-disabled-color-dark: #5d7f8e;
    --link-color-dark: #D1E231;
    --link-hover-color-dark: #c1d201;
    --link-disabled-color-dark: #5C6076;
    --card-color-dark: #222430;
    --card-hover-color-dark: #292D42;
    --card-disabled-color-dark: #090A0B;
    --primary-color-dark: #2D3146;
    --primary-hover-color-dark: #2D3146;
    --primary-disabled-color-dark: #1C1E2B;
    --bg-color-dark: #14151E;
    --border-color-dark: #383b55;
    --shadow-color-dark: #000000;
    --text-for-card-color-dark: #B2B2B2;
    --sub-text-color-dark: #868C98;
    --text-for-brand-color-dark: #FFFFFF;
    --text-for-brand-disabled-color-dark: #898989;
    --icon-color-dark: #CCCCCC;
    --card-box-shadow-dark: 0 0 2px 0 rgba(0,0,0,0.05),0 1px 4px 0 rgba(0,0,0,0.15);

    --info-color-dark: #17a2b8;
    --info-hover-color-dark: #00b5d1;
    --warning-color-dark: #FFB51A;
    --warning-hover-color-dark: #ffc547;
    --danger-color-dark: #F64666;
    --danger-hover-color-dark: #f20b36;
    --success-color-dark: #29BC68;
    --success-hover-color-dark: #0dd965;

    --transparent-color-dark: rgba(0,0,0,.5);
    --google-button-background-color-dark: #FFFFFF;
    --text-for-google-button-color-dark: #000000;
}

:root,
:root[theme=light] {
    --text-color: var(--text-color-light);
    --brand-color: var(--brand-color-light);
    --brand-hover-color: var(--brand-hover-color-light);
    --brand-disabled-color: var(--brand-disabled-color-light);
    --link-color: var(--link-color-light);
    --link-hover-color: var(--link-hover-color-light);
    --link-disabled-color: var(--link-disabled-color-light);
    --card-color: var(--card-color-light);
    --card-hover-color: var(--card-hover-color-light);
    --card-disabled-color: var(--card-disabled-color-light);
    --color-primary: var(--primary-color-light);
    --primary-hover-color: var(--primary-hover-color-light);
    --primary-disabled-color: var(--primary-disabled-color-light);
    --bg-color: var(--bg-color-light);
    --border-color: var(--border-color-light);
    --shadow-color: var(--shadow-color-light);
    --text-for-card-color: var(--text-for-card-color-light);
    --sub-text-color: var(--sub-text-color-light);
    --text-for-brand-color: var(--text-for-brand-color-light);
    --text-for-brand-disabled-color: var(--text-for-brand-disabled-color-light);
    --icon-color: var(--icon-color-light);
    --card-box-shadow: var(--card-box-shadow-light);

    --info-color: var(--info-color-light);
    --info-hover-color: var(--info-hover-color-light);
    --warning-color: var(--warning-color-light);
    --warning-hover-color: var(--warning-hover-color-light);
    --danger-color: var(--danger-color-light);
    --danger-hover-color: var(--danger-hover-color-light);
    --success-color: var(--success-color-light);
    --success-hover-color: var(--success-hover-color-light);
    --transparent-color: var(--transparent-color-light);
    --google-button-background-color: var(--google-button-background-color-light);
    --text-for-google-button-color: var(--text-for-google-button-color-light);
}

:root[theme=dark] {
    --text-color: var(--text-color-dark);
    --brand-color: var(--brand-color-dark);
    --brand-hover-color: var(--brand-hover-color-dark);
    --brand-disabled-color: var(--brand-disabled-color-dark);
    --link-color: var(--link-color-dark);
    --link-hover-color: var(--link-hover-color-dark);
    --link-disabled-color: var(--link-disabled-color-dark);
    --card-color: var(--card-color-dark);
    --card-hover-color: var(--card-hover-color-dark);
    --card-disabled-color: var(--card-disabled-color-dark);
    --color-primary: var(--primary-color-dark);
    --primary-hover-color: var(--primary-hover-color-dark);
    --primary-disabled-color: var(--primary-disabled-color-dark);
    --bg-color: var(--bg-color-dark);
    --border-color: var(--border-color-dark);
    --shadow-color: var(--shadow-color-dark);
    --text-for-card-color: var(--text-for-card-color-dark);
    --sub-text-color: var(--sub-text-color-dark);
    --text-for-brand-color: var(--text-for-brand-color-dark);
    --text-for-brand-disabled-color: var(--text-for-brand-disabled-color-dark);
    --icon-color: var(--icon-color-dark);
    --card-box-shadow: var(--card-box-shadow-dark);

    --info-color: var(--info-color-dark);
    --info-hover-color: var(--info-hover-color-dark);
    --warning-color: var(--warning-color-dark);
    --warning-hover-color: var(--warning-hover-color-dark);
    --danger-color: var(--danger-color-dark);
    --danger-hover-color: var(--danger-hover-color-dark);
    --success-color: var(--success-color-dark);
    --success-hover-color: var(--success-hover-color-dark);
    --transparent-color: var(--transparent-color-dark);
    --google-button-background-color: var(--google-button-background-color-dark);
    --text-for-google-button-color: var(--text-for-google-button-color-dark);
}

@font-face {
    font-family: 'Roboto';
    src: url(/assets/fc2b5060f7accec5cf74-f42dc8b75b5d15c66cecee3fb6c8aca87f1f8fbc5dc7152dab4e4f3e2caf77c6.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --site-content-vertical-margin: 24px;
    --site-content-horizontal-margin: 16px;
}

.authPageContainer {
    position: relative;
    max-width: 1024px;
    width: calc(100% - var(--site-content-horizontal-margin) * 2);
    height: 100vh;
    padding: 24px 16px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.authLogo {
    width: 180px;
    height: 80px;
    object-fit: contain;
    /*background-image: url(/assets/images/holiday-winua-logo.svg);*/
    background-image: url(/assets/6e9fba2c2857d20f37e0-c75e7247135fc6f3f105ffc021c9043cbd1ac07451090960d72f1aa15af23c1b.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 24px;
}

.alert {
    margin-top: 16px;
    background: linear-gradient(to right, var(--danger-color), var(--danger-hover-color));
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-for-brand-color);
}

.alert:empty {
    display: none;
}

:root[theme=dark] .authLogo {
    background-image: url(/assets/8ee3492502b0eb17f34b-e4e25f5bf409dbed28e295b436d77e85d4645e0b86c1d1ae17b5e887d8686bc0.svg);
    /*background-image: url(/assets/images/holiday-winua-logo-dark.svg);*/
}

.authTitle {
    margin-top: 24px;
    font-size: 20px;
}

.authPageContainer form,
.authPageContainer .welcome-text
 {
    max-width: 350px;
    width: 100%;
    margin: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.authPageContainer .field {
    display: flex;
    flex-wrap: wrap;
}

.authPageContainer label, .authPageContainer .field em {
    font-size: 12px;
}

.authPageContainer input:not([type='checkbox']),
.authPageContainer select {
    width: 100%;
}

.field_with_errors input,
.field_with_errors select {
    padding: 3px 2px;
    border: 2px solid #F64666;
}

.authPageContainer .field_with_errors {
    width: 100%;
}

.signInButton,
.googleButton {
    --button-height: 40px;
    height: 40px;
    font-size: 14px;
}

.googleButton {
    --border-width: 1px;
    --logo-width: calc(var(--button-height) - var(--border-width) * 2);
    display: flex;
    border: var(--border-width) solid var(--border-color);
    background-color: #FFFFFF;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    align-items: center;
    color: var(--text-for-card-color);
    text-transform: none;
    justify-content: center;
}

.googleButton:hover {
    background-color: #ffffff;
    box-shadow: 0 0 6px var(--shadow-color);
}

:root[theme=dark] .googleButton {
    background-color: #4285F4;
    border-color: #4285F4;
    color: #fff;
}

:root[theme=dark] .googleButton:hover {
    background-color: #4285F4;
    box-shadow: 0 0 6px #4285F4;
}

.googleButtonLogo {
    background-color: #FFFFFF;
    width: var(--logo-width);
    height: var(--logo-width);
    background-image: url(/assets/454460135a3f1b37b507-5d49e4c914a16eb11d750181eb3866a4d9add34905bf9ac4e9dd076126c31812.svg);
    background-position: center;
}

.googleButtonText {
    padding: 0 8px;
}

.authPageContainer .links {
    gap: 16px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    text-align: center;
}

.selectors{
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.i18nContainer {
    display: flex;
}

.i18nContainer a {
    display: inline-flex;
    height: 30px;
    width: 42px;
    padding: 3px 4px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 150ms ease-in-out;
}

.i18nContainer a.selected,
.i18nContainer a:hover{
    opacity: 1;
    padding: 0
}


.i18nContainer a img {
    max-height: 80%;
    color: transparent;
}

.links {
    width: 100%;
    max-width: 350px;
}

h2 {
    text-align: center;
}

.authPageContainer form .actions {
    margin-top: 32px;
}

.signInLink {
    font-weight: bolder;
    font-size: 20px;
}

/* Style for the social buttons container */
.social-buttons {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between buttons */
    align-items: center; /* Align buttons vertically */
    gap: 16px; /* Smaller gap between the buttons */
    margin-bottom: 16px; /* Space below the social buttons */
}

/* Buttons retain their original styles */
.social-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Smaller text size */
    font-weight: bold;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    flex: 1; /* Equal width for both buttons */
}

.googleBtn {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: var(--google-button-background-color);
    font-family: 'Roboto', arial, sans-serif;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
  }
  
  .googleBtn .googleBtn-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
  }
  
  .googleBtn .googleBtn-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }
  
  .googleBtn .googleBtn-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    color: var(--text-for-google-button-color);
  }

.switch_efGYY9 {
    --switch-width: 62px;
    --swithch-height: 32px;

    position: relative;
    width: 62px;
    height: 32px;
    display: inline-block;
    border-radius: 50px;
    cursor: pointer;
    background-color: var(--color-primary);
    transition: background-color ease 0.3s;
}

.thumb_NsM6Bo {
    --offset: 2px;
    --size: calc(var(--swithch-height) - var(--offset) * 2);
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: var(--offset);
    left: var(--offset);
    border-radius: 100%;
    background-color: var(--bg-color);
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 6px var(--shadow-color);
}

.switch_efGYY9.dark_tFjaEO .thumb_NsM6Bo {
    left: calc(var(--switch-width) - var(--size) - var(--offset));
}

.thumb_NsM6Bo svg {
    --icon-size: calc(var(--size) - var(--offset) * 2);
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
}

.switch_ohGiMH {
    --switch-width: 62px;
    --swithch-height: 32px;

    position: relative;
    width: 62px;
    height: 32px;
    display: inline-block;
    border-radius: 50px;
    cursor: pointer;
    border: var(--input-border-width) solid var(--border-color);
    background-color: var(--color-primary);
    transition: background-color ease 0.3s;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.thumb_HSNejX {
    --offset: 2px;
    --size: calc(var(--swithch-height) - var(--offset) * 2);
    --toggleSize: calc(var(--size) - 2 * var(--input-border-width));
    position: absolute;
    width: var(--toggleSize);
    height: var(--toggleSize);
    top: var(--offset);
    left: var(--offset);
    border-radius: 100%;
    background-color: var(--bg-color);
    transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 6px var(--shadow-color);
}

.switch_ohGiMH.selected_Lc1DrU .thumb_HSNejX {
    left: calc(var(--switch-width) - var(--size) - var(--offset));
}

.switch_ohGiMH.disabled_fBTpNm {
    opacity: 75%;
}

.thumb_HSNejX svg {
    --icon-size: calc(var(--size) - var(--offset) * 2);
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
}


/*# sourceMappingURL=authentication.css.map*/