/************************************************************************ CSS Normalize */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
     ========================================================================== */

/**
   * Remove the margin in all browsers.
   */

body {
    margin: 0;
}

/**
   * Render the `main` element consistently in IE.
   */

main {
    display: block;
}

/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

h1 {
    font-size: 3rem;
    margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */

/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

pre {
    font-family: monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
     ========================================================================== */

/**
   * Remove the gray background on active links in IE 10.
   */

a {
    background-color: transparent;
}

/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

b,
strong {
    font-weight: bolder;
}

/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

code,
kbd,
samp {
    font-family: monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
   * Add the correct font size in all browsers.
   */

small {
    font-size: 80%;
}

/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
     ========================================================================== */

/**
   * Remove the border on images inside links in IE 10.
   */

img {
    border-style: none;
}

/* Forms
     ========================================================================== */

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
   * Correct the inability to style clickable types in iOS and Safari.
   */

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

    /**
   * Remove the inner border and padding in Firefox.
   */

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

    /**
   * Restore the focus styles unset by the previous rule.
   */

    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

/**
   * Correct the padding in Firefox.
   */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

progress {
    vertical-align: baseline;
}

/**
   * Remove the default vertical scrollbar in IE 10+.
   */

textarea {
    overflow: auto;
}

/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

    /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
     ========================================================================== */

/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */

details {
    display: block;
}

/*
   * Add the correct display in all browsers.
   */

summary {
    display: list-item;
}

/* Misc
     ========================================================================== */

/**
   * Add the correct display in IE 10+.
   */

template {
    display: none;
}

/**
   * Add the correct display in IE 10.
   */

/************************************************************************ Fonts */

/************************************************************************ Variables */

:root {
    --color-base: #000000;
    --color-main: #008ABD;
    --color-main-dark: #05759E;
    --color-black: #000000;
    --color-dark-gray: #6c7786;
    --color-medium-gray: #c5c9ce;
    --color-light-gray: #f5f5f5;
    --color-blue-gray: #f6f8fa;
    --color-gray-200: #e7e7e7;
    --color-white: #ffffff;
    --font-main: "Ubuntu", sans-serif;
    --root-font-size: 62.5%;
    --base-font-size: 1.6rem;
    --base-line-height: 1.25;
}

/************************************************************************ Base */

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

::-webkit-file-upload-button {
    cursor: pointer;
}

html {
    height: 100%;
    font-size: var(--root-font-size);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    height: 100%;
    font-family: var(--font-main);
    background: var(--color-white);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    color: var(--color-base);
}

img {
    max-width: 100%;
}

hr {
    margin-block: 1rem;
    margin-inline: 0;
    border: none;
    width: 100%;
    height: 1px;
    background-color: var(--color-white);
}

[hidden] {
    display: none;
}

/************************************************************************ Typography */

h1,
h2,
h3 {
    margin-block: 0 2rem;
    font-weight: 700;
    text-align: center;
}

h1 {
   font-size: 4.5rem;
    margin-block-end: 6rem;
    max-width: 380px;
    text-align: center;
    margin-inline: auto;
}

h1.mb-20 {
    margin-block-end: 2rem;
}

h2 {
    font-size: 2.2rem;
}

a {
    color: var(--color-main);
    text-decoration: underline;
    cursor: pointer;
}

    a:hover,
    a:active {
        color: var(--color-main-dark);
    }

p {
    color: var(--color-base);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
    margin-block: 0 2rem;
}

.text-center {
    text-align: center;
}

/************************************************************************ Layout */

.section-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: 100%;
}

@media only screen and (max-width: 992px) {
    .section-main {
        display: block;
    }
}

/* Left section */

.section-left {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-block: clamp( 2rem, 1.129vw + 1.458rem, 3rem ); /* 1366 - 30px, 480 - 20px */
    padding-inline: 3rem;
}

.section-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position:relative;

 
}

.section-content:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 160px;
    height: 51px;
    background: url(/img/q-signer-logo.svg) bottom right no-repeat;
    background-size: contain;
}

.content-wrapper {
    width: 100%;
    max-width: 45rem;
    margin-inline: auto;
}

/* Right section */

.section-right {
    position: fixed;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 50%;
    background: url(/img/login-big.jpg) bottom right no-repeat;
    background-size: cover;
    background-position: center;
}

.section-right:after {
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    background: linear-gradient(0deg, rgb(37 81 97) 10%, rgba(0, 138, 189, 0) 60%);
}

@media only screen and (min-width: 1921px) {
    .section-right {
        background-size: 80%;
    }
}

@media only screen and (min-width: 2400px) {
    .section-right {
        background-size: 70%;
    }
}

@media only screen and (max-width: 992px) {
    .section-right {
        display: none;
    }
}

.welcome-msg {
    position: absolute;
    inset-block-start: 11%;
    inset-inline-end: 15%;
    max-width: 46rem;
    padding-inline: 2rem;
    text-align: end;
}

@media only screen and (max-width: 1080px) {
    .welcome-msg {
        inset-inline-end: 10%;
    }
}

@media only screen and (max-height: 720px) {
    .welcome-msg {
        inset-block-start: 7%;
    }
}

@media only screen and (max-height: 630px) {
    .welcome-msg {
        inset-block-start: 3rem;
    }
}

@media only screen and (max-height: 610px) {
    .welcome-msg {
        inset-block-start: 2rem;
    }
}

@media (min-aspect-ratio: 26/9) {
    .section-right {
        background-size: 60%;
    }

    .welcome-msg {
        inset-block-start: 3rem;
    }
}

.welcome-msg h2 {
    margin-block-end: 2rem;
    font-size: 3.6rem;
    text-align: end;
}

.welcome-msg div {
    font-size: 2.1rem;
    line-height: 2.6rem;
}

/************************************************************************ Footer */

footer {
    display: flex;
    justify-content: center;
    padding-block-start: 3rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

@media only screen and (max-width: 480px) {
    footer {
        padding-inline: 4.6rem;
        font-size: 1.6rem;
        line-height: 125%;
    }
}

footer > ul {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
}

@media only screen and (max-width: 480px) {
    footer > ul {
        gap: 1rem;
    }
}

footer > ul > li {
    padding: 0;
    margin: 0;
    margin-block-end: 0.5rem;
}

.footer-language {
    margin-inline-end: 1rem;
}

@media only screen and (max-width: 480px) {
    .footer-language {
        width: 100%;
        margin-inline-end: 0;
        margin-block-end: 2rem;
        text-align: center;
    }
}

.footer-link {
    display: inline-flex;
    vertical-align: top;
    align-items: center;
}

    .footer-link:after {
        content: "|";
        padding-inline: 0.5rem;
    }

@media only screen and (max-width: 480px) {
    .footer-link:after {
        display: none;
    }
}

.footer-link:last-child:after {
    display: none;
}

footer a {
    color: var(--color-base);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

    footer a:hover,
    footer a:active {
        color: var(--color-base);
        text-decoration: underline;
    }

@media only screen and (max-width: 480px) {
    .footer-link a {
        text-decoration: underline;
        white-space: unset;
        overflow-wrap: break-word;
        word-break: break-word;
    }
}

/* Language slector */

.language-selector {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    font-size: 1.4rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
}

@media only screen and (max-width: 480px) {
    .language-selector {
        font-size: 1.6rem;
        line-height: 125%;
    }
}

.language-selector:before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin-inline-end: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cg clip-path='url(%23clip0_2952_37769)'%3E%3Cpath d='M7.49944 14.2508C11.2276 14.2508 14.2499 11.2286 14.2499 7.50042C14.2499 3.77227 11.2276 0.75 7.49944 0.75C3.77129 0.75 0.749023 3.77227 0.749023 7.50042C0.749023 11.2286 3.77129 14.2508 7.49944 14.2508Z' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.26758 10.0978H3.085C3.56701 10.0978 4.02928 9.90629 4.37011 9.56546C4.71095 9.22463 4.90242 8.76235 4.90242 8.28035V6.72256C4.90242 6.24055 5.09389 5.77828 5.43473 5.43745C5.77556 5.09661 6.23783 4.90514 6.71984 4.90514C7.20185 4.90514 7.66412 4.71366 8.00495 4.37282C8.34579 4.03199 8.53726 3.56973 8.53726 3.08772V0.82373' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.25 7.39588C13.73 7.12608 13.1534 6.9837 12.5676 6.98047H10.3555C9.87349 6.98047 9.41123 7.17194 9.07039 7.51278C8.72956 7.85361 8.53809 8.31588 8.53809 8.79789C8.53809 9.2799 8.72956 9.74217 9.07039 10.083C9.41123 10.4238 9.87349 10.6153 10.3555 10.6153C10.6998 10.6153 11.03 10.7521 11.2735 10.9955C11.5169 11.2389 11.6537 11.5692 11.6537 11.9135V12.817' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2952_37769'%3E%3Crect width='15' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
}

.language-selector:after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin-inline-start: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M4.50031 6.30023C4.23781 6.30023 3.97531 6.19898 3.77656 6.00023L1.33156 3.55523C1.22281 3.44648 1.22281 3.26648 1.33156 3.15773C1.44031 3.04898 1.62031 3.04898 1.72906 3.15773L4.17406 5.60273C4.35406 5.78273 4.64656 5.78273 4.82656 5.60273L7.27156 3.15773C7.38031 3.04898 7.56031 3.04898 7.66906 3.15773C7.77781 3.26648 7.77781 3.44648 7.66906 3.55523L5.22406 6.00023C5.02531 6.19898 4.76281 6.30023 4.50031 6.30023Z' fill='black' stroke='black' stroke-width='0.5'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
}

.language-selector[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

.tippy-box[data-theme="language-selector"] .tippy-content {
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    font-size: 1.4rem;
}

@media only screen and (max-width: 480px) {
    .tippy-box[data-theme="language-selector"] .tippy-content {
        font-size: 1.6rem;
    }
}

.language-selector:hover span {
    text-decoration: underline;
}

.tippy-content ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.tippy-content li {
    padding: 0;
    margin: 0;
}

.tippy-content a {
    display: block;
    padding: 0.5rem;
    padding-block: 0.5rem;
    padding-inline: 1.5rem;
    color: var(--color-base);
    text-decoration: none;
    user-select: none;
}

    .tippy-content a:hover,
    .tippy-content a:active {
        color: var(--color-base);
        text-decoration: underline;
    }

/************************************************************************ Forms */

.form-group {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    margin-block-end: 2rem;
}

    .form-group label {
        margin-block-end: 0.3rem;
        font-size: 1.6rem;
        line-height: 2rem;
        font-weight: 400;
    }

.form-control {
    display: block;
    width: 100%;
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
    background-color: var(--color-white);
    background-clip: padding-box;
    border: 1px solid #e8e8e8;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2rem;
    color: var(--color-base);
    border-radius: 40px;
    transition: border-color 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .form-control:focus {
        border: 1px solid #76797c;
        outline: none;
    }

    .form-control.input-validation-error,
    .form-control.input-validation-error:focus {
        border: 1px solid #ff5978;
    }

.form-group .text-danger {
    font-size: 1.3rem;
    line-height: 1.8rem;
    font-weight: 400;
    color: var(--color-main);
}

@media only screen and (max-width: 480px) {
    .form-control {
        padding-block: 1.6rem;
    }
}

.form-control:disabled {
    border: 1px solid var(--color-medium-gray);
    background: var(--color-blue-gray);
}

/* Checkboxes */

.form-check {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
}

.form-check-input {
    flex-grow: 0;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-block-start: 0.3rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--color-medium-gray);
    background-color: var(--color-white);
    border-radius: 3px;
    cursor: pointer;
}

@media only screen and (max-width: 480px) {
    .form-check-input {
        width: 26px;
        height: 26px;
    }
}

.form-check-input:not(:checked):hover {
    border: 1px solid #9ca4af;
}

.form-check-input:checked {
    border-color: var(--color-main);
    color: var(--color-white);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23fff" stroke-linecap="square" stroke-linejoin="square" stroke-width="2" d="m3 8 3 3 7-7"/></svg>');
    background-color: var(--color-main);
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center center;
}

@media only screen and (max-width: 480px) {
    .form-check-input:checked {
        background-size: 16px 16px;
    }
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 2px rgba(255, 99, 88, 0.3);
}

.form-check-label {
    font-size: 1.4rem;
    line-height: 1.9rem;
}

    .form-check-label a {
        color: var(--color-base);
    }

        .form-check-label a:hover,
        .form-check-label a:active {
            color: var(--color-main);
        }

/* Buttons */

.btn {
    display: inline-flex;
    width: 100%;
    vertical-align: top;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding-block: 1.7rem;
    padding-inline: 3rem;
    margin-block-end: 1.5rem;
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--color-base);
    font-size: 1.6rem;
    line-height: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border-radius: 40px;
    cursor: pointer;
    user-select: none;
}

    .btn:hover,
    .btn:focus {
        background-color: var(--color-blue-gray);
        text-decoration: none;
        outline: none;
    }

.btn-primary {
    background-color: #008ABD;
    border-color: #008ABD;
    color: var(--color-white);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #07445a;
        border-color: #07445a;
        color: var(--color-white);
    }

.btn-primary:disabled {
    background-color: #07445a;
    border-color: #07445a;
    color: var(--color-dark-gray);
    cursor: not-allowed;
}

.btn-link {
    position: relative;
    display: inline-flex;
    justify-content: center;
    vertical-align: top;
    width: unset;
    gap: 0.7rem;
    justify-content: center;
    align-items: center;
    padding-block: 0.3rem;
    padding-inline: 0.3rem;
    background-color: transparent;
    border: none;
    color: var(--color-base);
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

@media only screen and (max-width: 480px) {
    .btn-link {
        font-size: 1.5rem;
    }
}

.btn-link .btn-icon {
    flex-grow: 0;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg clip-path='url(%23clip0_14829_84797)'%3E%3Cpath d='M11 6L1 6' stroke='%23FF220D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 0.999999L1 6L6 11' stroke='%23FF220D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_14829_84797'%3E%3Crect width='12' height='12' fill='white' transform='translate(0 12) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 480px) {
    .btn-link .btn-icon {
        width: 14px;
        height: 14px;
        margin-inline-end: 0.2rem;
        background-size: 14px 14px;
    }
}

.btn-link .btn-text {
    position: relative;
    inset-inline-start: 0;
    transition: left 0.3s ease-in-out;
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: none;
    color: var(--color-base);
}

    .btn-link:hover .btn-text,
    .btn-link:focus .btn-text {
        inset-inline-start: 1rem;
    }

/************************************************************************ Errors box */

.validation-summary-errors {
    background-color: #ffeff3;
    border: 1px solid #ffd0c9;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    margin-block-end: 2rem;
    padding-block: 1rem;
    padding-inline: 2rem;
}

    .validation-summary-errors:before {
        content: "";
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--color-white);
        background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_10184_65175)"><path d="M11.2333 1.75398C11.117 1.52697 10.9403 1.33646 10.7227 1.20342C10.5051 1.07039 10.255 1 9.9999 1C9.74483 1 9.49471 1.07039 9.27708 1.20342C9.05946 1.33646 8.88276 1.52697 8.76647 1.75398L1.1441 16.9987C1.03779 17.2096 0.987177 17.4443 0.997064 17.6804C1.00695 17.9164 1.07701 18.1459 1.2006 18.3473C1.32418 18.5487 1.49718 18.7151 1.70317 18.8307C1.90916 18.9464 2.14129 19.0075 2.37755 19.0082H17.6222C17.8585 19.0075 18.0907 18.9464 18.2966 18.8307C18.5027 18.7151 18.6756 18.5487 18.7993 18.3473C18.9227 18.1459 18.9929 17.9164 19.0027 17.6804C19.0127 17.4443 18.962 17.2096 18.8557 16.9987L11.2333 1.75398Z" stroke="%23BD0D00" stroke-width="1.94024" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 7.22855V11.7327" stroke="%23BD0D00" stroke-width="1.94024" stroke-linecap="round" stroke-linejoin="round"></path><path d="M9.99979 15.5436C9.80844 15.5436 9.65332 15.3886 9.65332 15.1972C9.65332 15.0058 9.80844 14.8507 9.99979 14.8507" stroke="%23BD0D00" stroke-width="1.94024" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 15.5438C10.1913 15.5438 10.3465 15.3887 10.3465 15.1973C10.3465 15.0059 10.1913 14.8508 10 14.8508" stroke="%23BD0D00" stroke-width="1.94024" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_10184_65175"><rect width="20" height="20" fill="white"></rect></clipPath></defs></svg>');
        background-position: center center;
        background-repeat: no-repeat;
        border-radius: 8px;
        height: 36px;
        width: 36px;
    }

    .validation-summary-errors ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.3rem;
        padding: 0;
        padding-inline-start: 1rem;
        margin: 0;
        list-style: none;
    }

    .validation-summary-errors li {
        padding: 0;
        margin: 0;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.8rem;
        overflow-wrap: break-word;
        word-break: break-word;
    }

/************************************************************************ Tippy */

.erb .tippy-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent var(--color-blue-gray) transparent;
    -webkit-filter: drop-shadow(0px -1.5px 0px var(--color-medium-gray));
    filter: drop-shadow(0px -1.5px 0px var(--color-medium-gray));
    z-index: 1;
}

    .erb .tippy-arrow:before {
        display: none;
    }

.erb [data-placement^="top"] > .tippy-arrow {
    bottom: -6px;
    border-width: 8px 8px 0 8px;
    border-color: var(--color-blue-gray) transparent transparent transparent;
    filter: drop-shadow(0px 1.5px 0px var(--color-medium-gray));
}

.erb [data-placement^="bottom"] > .tippy-arrow {
    top: -6px;
}

.erb [data-placement^="left"] > .tippy-arrow {
    right: -6px;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent var(--color-blue-gray);
    filter: drop-shadow(1.5px 0px 0px var(--color-medium-gray));
}

.erb [data-placement^="right"] > .tippy-arrow {
    inset-inline-start: -6px;
    border-width: 8px 8px 8px 0;
    border-color: transparent var(--color-blue-gray) transparent transparent;
    filter: drop-shadow(-1.5px 0px 0px var(--color-medium-gray));
}

.erb .tippy-box {
    background-color: unset;
    color: var(--color-base);
    border-radius: 0;
    font-size: 1.4rem;
    line-height: 1.4;
}

.erb .tippy-content {
    position: relative;
    background-color: var(--color-blue-gray);
    border: 1px solid var(--color-medium-gray);
    border-radius: 5px;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.15);
    padding-block: 1.5rem;
    padding-inline: 2rem;
}

/* Tippy shift-away */

.tippy-box[data-animation="shift-away"][data-state="hidden"] {
    opacity: 0;
}

    .tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="top"] {
        transform: translateY(10px);
    }

    .tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="bottom"] {
        transform: translateY(-10px);
    }

    .tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="left"] {
        transform: translateX(10px);
    }

    .tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="right"] {
        transform: translateX(-10px);
    }

/************************************************************************ Login content */

.center-link {
    display: flex;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.8rem;
}

@media only screen and (max-width: 480px) {
    .center-link {
        font-size: 1.4rem;
    }
}

.center-link a {
    color: var(--color-main);
    text-decoration-line: underline;
}

    .center-link a:hover,
    .center-link a:active {
        color: var(--color-main-dark);
    }

.login-page .center-link {
    justify-content: center;
}

.center-section {
    text-align: center;
}

.info-text {
    text-align: center;
    line-height: 2.6rem;
}

/* Resend */

.resend-container {
    margin-block-end: 2rem;
    text-align: center;
    line-height: 2.6rem;
    transition: all 0.2s ease-in-out;
}

.btn-resend {
    display: inline-flex;
    width: unset;
    vertical-align: top;
    justify-content: center;
    align-items: center;
    padding-block: 0;
    padding-inline: 0;
    background-color: transparent;
    border: none;
    color: var(--color-main);
    font-size: 1.6rem;
    line-height: 2.6rem;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
}

    .btn-resend:hover,
    .btn-resend:focus {
        color: var(--color-main-dark);
    }

    .btn-resend:disabled {
        color: var(--color-dark-gray);
        cursor: default;
    }

.resent-counter {
    transition: all 0.2s ease-in-out;
}

    .resent-counter.hidden {
        display: none;
    }

.hidden {
    display: none;
}

.confirmation-success {
    display: flex;
    justify-content: center;
    margin-block-end: 2rem;
}

    .confirmation-success div {
        flex-grow: 0;
        flex-shrink: 0;
        width: 85px;
        height: 84px;
        background-image: url('data:image/svg+xml,<svg width="85" height="84" viewBox="0 0 85 84" fill="none" xmlns="http://www.w3.org/2000/svg" class="b-illustration b-illustration-success"><g clip-path="url(%23clip0_1424_31938)"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.25 0C15.6142 0 10.2091 2.21249 6.22398 6.15076C2.23883 10.089 0 15.4305 0 21L0 63C0 68.5695 2.23883 73.911 6.22398 77.8492C10.2091 81.7875 15.6142 84 21.25 84H63.75C69.3858 84 74.7909 81.7875 78.776 77.8492C82.7612 73.911 85 68.5695 85 63V21C85 15.4305 82.7612 10.089 78.776 6.15076C74.7909 2.21249 69.3858 0 63.75 0H21.25ZM63.7682 31.314C64.5242 30.3807 64.8741 29.1888 64.7409 28.0006C64.6077 26.8124 64.0023 25.7251 63.0579 24.978C62.1134 24.2309 60.9074 23.8851 59.705 24.0168C58.5027 24.1484 57.4024 24.7467 56.6464 25.68L35.1293 52.284L26.5139 45.9C26.0355 45.5454 25.4912 45.2874 24.9119 45.1408C24.3326 44.9941 23.7298 44.9617 23.1378 45.0452C22.5458 45.1288 21.9763 45.3268 21.4618 45.6279C20.9472 45.929 20.4977 46.3272 20.1389 46.8C19.7801 47.2728 19.5191 47.8107 19.3707 48.3832C19.2223 48.9556 19.1894 49.5514 19.274 50.1364C19.3585 50.7214 19.5589 51.2842 19.8636 51.7927C20.1682 52.3012 20.5713 52.7454 21.0496 53.1L33.1925 62.1C34.1387 62.8024 35.3245 63.1132 36.4987 62.9665C37.6728 62.8198 38.743 62.2271 39.4825 61.314L63.7682 31.314Z" fill="url(%23paint0_linear_1424_31938)"></path></g><defs><linearGradient id="paint0_linear_1424_31938" x1="42.5" y1="0" x2="42.5" y2="84" gradientUnits="userSpaceOnUse"><stop stop-color="%23FF220D"></stop><stop offset="1" stop-color="%23F02959"></stop></linearGradient><clipPath id="clip0_1424_31938"><rect width="85" height="84" fill="white"></rect></clipPath></defs></svg>');
        background-position: center center;
        background-repeat: no-repeat;
    }

/* Password rules list */

.password-rules {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-block-end: 2rem;
    list-style: none;
}

    .password-rules li {
        display: flex;
        gap: 1rem;
        width: 100%;
        padding: 0;
        margin: 0;
    }

        .password-rules li:before {
            content: "";
            flex-grow: 0;
            flex-shrink: 0;
            display: block;
            width: 24px;
            height: 24px;
            background-color: #f0f7ff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg clip-path='url(%23clip0_14818_77249)'%3E%3Cpath d='M1.49921 5.99805L10.4992 5.99805' stroke='%23F21A09' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.99921 10.5L10.4992 6L5.99921 1.5' stroke='%23F21A09' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_14818_77249'%3E%3Crect width='10.8' height='10.8' fill='white' transform='translate(11.3945 0.599609) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
            background-size: 12px 12px;
            background-position: center center;
            background-repeat: no-repeat;
        }

        .password-rules li.passed:before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cg clip-path='url(%23clip0_14818_77243)'%3E%3Cpath d='M1.49921 5.99609L10.4992 5.99609' stroke='%2331B39C' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.99921 10.498L10.4992 5.99805L5.99921 1.49805' stroke='%2331B39C' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_14818_77243'%3E%3Crect width='10.8' height='10.8' fill='white' transform='translate(11.3945 0.599609) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
        }

/* Password show/hide button */

.password-container {
    position: relative;
}

.icon-password-button {
    position: absolute;
    inset-inline-end: 0.2rem;
    inset-block-start: 3.7rem;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.icon-show {
    background-image: url(/img/show-password-icon.svg);
    background-repeat: no-repeat;
}

.icon-hide {
    background-image: url(/img/hide-password-icon.svg);
    background-repeat: no-repeat;
}


/************************************************************************ Create account content */

.register-info {
    display: flex;
    justify-content: center;
    margin-block-end: 3rem;
}

    .register-info ul {
        display: inline-flex;
        flex-direction: column;
        vertical-align: top;
        gap: 1.5rem;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .register-info li {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        padding: 0;
        margin: 0;
    }

.register-info-icon {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    background: linear-gradient(39deg, #f01a72 25.25%, #f5261c 84.26%);
    border-radius: 50%;
}

    .register-info-icon:before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-position: center center;
        background-repeat: no-repeat;
    }

.contact-info .register-info-icon:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg clip-path='url(%23clip0_6708_68645)'%3E%3Cpath d='M23.1421 18V21.4286C23.1421 21.8832 22.9614 22.3193 22.64 22.6407C22.3186 22.9622 21.8825 23.1429 21.4278 23.1429H17.9993' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.9993 0.857422H21.4278C21.8825 0.857422 22.3186 1.03803 22.64 1.35952C22.9614 1.68102 23.1421 2.11704 23.1421 2.57171V6.00028' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.856445 6.00028V2.57171C0.856445 2.11704 1.03706 1.68102 1.35855 1.35952C1.68004 1.03803 2.11607 0.857422 2.57073 0.857422H5.9993' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.9993 23.1429H2.57073C2.11607 23.1429 1.68004 22.9622 1.35855 22.6407C1.03706 22.3193 0.856445 21.8832 0.856445 21.4286V18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9986 11.1423C13.8922 11.1423 15.4272 9.60724 15.4272 7.71371C15.4272 5.82018 13.8922 4.28516 11.9986 4.28516C10.1051 4.28516 8.57007 5.82018 8.57007 7.71371C8.57007 9.60724 10.1051 11.1423 11.9986 11.1423Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.5195 18.8575C18.0766 17.4763 17.2066 16.2716 16.0349 15.4169C14.8632 14.5621 13.4503 14.1016 12 14.1016C10.5496 14.1016 9.13678 14.5621 7.96507 15.4169C6.79335 16.2716 5.92335 17.4763 5.48047 18.8575H18.5195Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6708_68645'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.id-info .register-info-icon:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='21' viewBox='0 0 24 21' fill='none'%3E%3Cpath d='M9.73608 11.0983L19.3849 1.85156L22.6668 4.99672' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.6924 5.39062L18.564 8.14264' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.25684 19.1503C8.97565 19.1503 11.1797 17.0382 11.1797 14.4326C11.1797 11.8271 8.97565 9.71484 6.25684 9.71484C3.53803 9.71484 1.33398 11.8271 1.33398 14.4326C1.33398 17.0382 3.53803 19.1503 6.25684 19.1503Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Confirm account */

.f-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
}

.f-col {
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(50% - 2rem / 2);
}

@media only screen and (max-width: 480px) {
    .f-col {
        width: 100%;
    }
}

.confirm-account-section h2 {
    margin-block-end: 1.5rem;
    font-family: "Gill Sans", sans-serif;
    font-size: 2rem;
    line-height: 2.3rem;
    font-weight: 700;
    text-align: start;
}

.confirm-account-section .resend-container,
.confirm-account-section .btn-resend {
    font-size: 1.3rem;
    line-height: 1.8rem;
    text-align: start;
}

@media only screen and (max-width: 480px) {
    .confirm-account-section .resend-container,
    .confirm-account-section .btn-resend {
        font-size: 1.4rem;
    }
}

.confirm-account-section .resend-container p {
    margin-block: -0.5rem 0.5rem;
    font-size: 1.3rem;
    line-height: 1.8rem;
    text-align: start;
}

@media only screen and (max-width: 480px) {
    .confirm-account-section .resend-container p {
        font-size: 1.4rem;
    }
}

.register-confirmation-page h1 {
    margin-block-end: 1rem;
}

.register-confirmation-page .info-text {
    margin-block-end: 4rem;
}

/* Loading circle */

.loading-circle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-circle {
    width: 8rem;
    height: 8rem;
    animation: rotation 2s infinite linear;
}

    .loading-circle svg {
        display: block;
        width: 8rem;
        height: 8rem;
    }

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

/************************************************************************ Errors */

/* 404 page */

.not-found-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block-start: 3rem;
}

    .not-found-page h3 {
        margin-block-end: 2rem;
        font-size: 2.5rem;
        line-height: 3rem;
        font-weight: 700;
        text-align: center;
    }

    .not-found-page p {
        font-size: 1.4rem;
        line-height: 1.8rem;
        margin-block-end: 2rem;
        text-align: center;
    }

    .not-found-page .es-image {
        margin-block-end: 1rem;
    }

        .not-found-page .es-image img {
            display: block;
            margin: auto;
            max-width: 100%;
        }

    .not-found-page .es-cta .btn:hover,
    .not-found-page .es-cta .btn:focus {
        color: var(--color-white);
    }

/* 401 page */

.unauthorized-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block-start: 3rem;
}

    .unauthorized-page h3 {
        margin-block-end: 2rem;
        font-size: 2.5rem;
        line-height: 3rem;
        font-weight: 700;
        text-align: center;
    }

    .unauthorized-page p {
        font-size: 1.4rem;
        line-height: 1.8rem;
        margin-block-end: 2rem;
        text-align: center;
    }

    .unauthorized-page .es-image {
        margin-block-end: 1rem;
    }

        .unauthorized-page .es-image img {
            display: block;
            margin: auto;
            max-width: 100%;
        }

    .unauthorized-page .es-cta .btn:hover,
    .unauthorized-page .es-cta .btn:focus {
        color: var(--color-white);
    }

/* Internal Error page (500) */

.error-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error-section-image {
    margin-block-end: 1rem;
}

.error-section img {
    width: 100%;
    max-width: 15rem;
    margin: 0 auto;
}

.error-section h3 {
    margin-block-end: 1rem;
    font-family: "Gill Sans", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.25;
}

.error-section p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
}

/************************************************************************ Chat */

.we-chat-wrapper {
    position: fixed;
    inset-block-end: clamp( 2rem, 1.129vw + 1.458rem, 3rem ); /* 1366 - 30px, 480 - 20px */
    inset-inline-end: 3rem;
    background-color: var(--color-white);
    border-radius: 1.2rem;
    box-shadow: 0px 10px 16px 0px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    color: var(--color-base);
    text-decoration: none;
    z-index: 100;
}

@media only screen and (max-width: 480px) {
    .we-chat-wrapper {
        inset-inline-end: 1rem;
    }
}

.we-chat-wrapper > span {
    display: grid;
    grid-template-columns: 56px 0fr;
    height: 56px;
    transition: grid-template-columns 0.2s ease-in-out;
}

.we-chat-wrapper .chat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.we-chat-wrapper .chat-text {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.chat-text span {
    padding-inline-end: 1.4rem;
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 500;
    color: var(--color-base);
}

.we-chat-wrapper svg {
    display: block;
}

.we-chat-wrapper:hover,
.we-chat-wrapper:active,
.we-chat-wrapper:focus {
    color: var(--color-base);
    text-decoration: none;
}

    .we-chat-wrapper:hover > span,
    .we-chat-wrapper:active > span,
    .we-chat-wrapper:focus > span {
        grid-template-columns: 56px 1fr;
    }

/************************************************************************ Layout Info */
.layout-info .section-center {
    margin-inline: auto;
    padding-block: 40px 30px;
    padding-inline: 30px;
    max-width: 1366px;
}

.section-center .logo {
    display: block;
}

.iframe-wrapper {
    position: relative;
    padding-block-end: 80%;
}

    .iframe-wrapper iframe {
        position: absolute;
        display: block;
        inset-block-start: 0;
        inset-block-end: 0;
        inset-inline-start: 0;
        inset-inline-end: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

/***** Google login button ****/

.gsi-material-button {
    display: flex;
    justify-content:center;
    align-items:center;
    text-decoration: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-image: none;
    background-color: #f2f2f2;
    border: none;
    -webkit-border-radius: 20px;
    border-radius: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 54px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    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: 100%;
    min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
    display: inline-block;
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-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: center;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    background-color: #ebedef;
    color: initial;
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
}