@font-face {
    font-family: Inter;
    font-display: swap;
    src: url(/assets/Inter-Bold-ad7b103fc853a37cf8a0653d14792509c1a23cee049e8829a6b7fc7dffb17f1d.woff2);
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    font-display: swap;
    src: url(/assets/Inter-Light-5a4c84ca09275da59f82d216da2d538f2856e4cae594d4451933c8ff8d9ee36a.woff2);
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    font-display: swap;
    src: url(/assets/Inter-SemiBold-e03905f356ca14c0c424cf83cc8ae8eeae36f185c0ea109c4cb9c4b375238d99.woff2);
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    font-display: swap;
    src: url(/assets/Inter-Regular-3d1284299a6a308fb0d6a14ef4d0ec3b865e3c3b3f2b244f820ed3ba5797f64d.woff2);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: Inter;
    font-display: swap;
    src: url(/assets/Inter-Medium-c765d77555555ecf3a7168f8b73ca2098ed69ab5643a25172a2daeb3ceaa2d85.woff2);
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: Roboto;
    font-display: swap;
    src: url(/assets/Roboto-Medium-e4363ebf24163bcb9ce452fedbe2f22493c89004229222ed28fe4981bfc23075.woff2);
    font-weight: 400;
    font-style: normal;
}

:root {
    --primary: #020024;
    --secondary: #4F4D71;
    --red: #D65359;
    --yellow: #F2D662;
    --blue: #3982F7;
    --green: #66D19E;
    --azure-blue: #13276F;
    --bg-primary: #F8F8F8;
    --bg-secondary: #030038;
    --bg-accent: #4cc9f0;
    --bg-inverse: #2d00f7;
    --text-primary: #020024;
    --text-secondary: #4F4D71;
    --text-dark-blue: rgb(129, 128, 154);
    --text-dark-blue-90: rgba(129, 128, 154, 0.9);
    --text-inverse: #e8eddf;
    --text-white: #ffffff;

    --application-container-width: 1152px;
    --application-header-height: 90px;
}

* {
    padding: 0;
    margin: 0;
    border: 0;
}

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

html,
body {
    height: 100%;
    min-width: 320px;
}

body {
    background: var(--bg-secondary);
    color: var(--text-inverse);
    line-height: 1.2;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

section {
    max-width: 100%;
}

input,
button,
textarea {
    font-family: "Inter", sans-serif;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0;
}

button {
    cursor: pointer;
    color: inherit;
    background-color: transparent;
}

a {
    cursor: pointer;
    color: var(--blue);
}

ul li {
    list-style: none;
}

img {
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

input {
    height: 40px;
}

button, input[type="submit"], .btn {
    display: inline-flex;
    min-height: 40px;
    height: auto;
    gap: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 3px 24px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.3s cubic-bezier(0.5, 0.02, 0.13, 0.5);
    white-space: normal;
}

.btn-primary {
    background: #0084FF;
    color: var(--text-white);

    &[disabled] {
        filter: brightness(1.3);
        cursor: wait;
        background: var(--text-dark-blue-90);
    }
}

.btn-secondary {
    background: #080D48;
    color: #74A8FA;
}

.button-container {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    justify-self: flex-end;
    gap: 16px;
    margin: 16px 0;
    flex: 1;
    width: 100%;

    @media (min-width: 768px) {
        justify-content: end;
        align-items: end;
        flex-direction: row;
        flex: 1;
        width: initial;
    }
}

.button-container > * {
    flex-grow: 1;

    @media (min-width: 768px) {
        flex-grow: 0;
    }
}

.verification {
    @media (min-width: 768px) {
        flex: 1;
    }
}

.simple_form {
    flex-grow: 1;
    max-width: 640px;
}

.simple_form .input {
    margin: 16px 0;
    border-radius: 0;
}

.simple_form .input input:not(.radio_buttons):not(.boolean) {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    margin: 8px 0;
}

.simple_form .input select {
    height: 40px;
    padding: 0 8px;
    margin: 8px 0;
    border-radius: 0;
    background: var(--text-white);
}

.simple_form .input label, .simple_form label {
    display: block;
    font-size: 14px;
    color: var(--text-dark-blue);
}

.simple_form .radio label, .simple_form label.boolean {
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin: 0;
}

.simple_form .input.boolean {
    .hint {
        padding-left: 20px;
    }
}

.simple_form .hint {
    display: block;
    font-size: 14px;
    color: var(--text-dark-blue);
}

.simple_form .error {
    margin: 8px 0;
    display: block;
    font-size: 14px;
    color: var(--red);
}

.simple_form input.disabled {
    opacity: 1;
    color: var(--text-white);
    background: var(--text-dark-blue-90);
}

.hidden {
    display: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.policy-link {
    font-weight: bold;
    font-size: 1.05rem;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--secondary);
    min-width: 160px;
    z-index: 1;
    text-align: left;
}

.dropdown-item {
    display: block;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--text-inverse);
    border-bottom: 1px var(--bg-secondary) solid;
}

.dropdown-item:hover {
    color: var(--blue);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.application-container {
    background: var(--bg-secondary);
    max-width: var(--application-container-width);
    margin: 0 auto;
    padding: 32px;
    min-height: calc(100% - var(--application-header-height));
}

.application-navigation {
    background: var(--bg-secondary);
    max-width: var(--application-container-width);
    margin: 0 auto;
    height: var(--application-header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px var(--secondary) solid;
    padding: 8px 24px;

    @media (min-width: 768px) {
        padding: 24px;
    }
}

.navigation-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: end;
    gap: 10px;

    @media (min-width: 768px) {
        align-items: initial;
        flex: 1;
        justify-content: space-between;
        flex-direction: row;
    }
}

.left-navigation {
    display: flex;
    justify-self: left;
    flex: 1;
    justify-content: center;
    color: var(--text-dark-blue);
}

.application-navigation-item {
    color: var(--text-inverse);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    gap: 5px;
    align-items: center;

    svg {
        width: 16px;
        height: 16px;
        fill: var(--text-inverse);
    }
}

.right-navigation {
    display: flex;
    justify-self: right;
    color: var(--text-dark-blue);
}

.application-language {
    text-transform: uppercase;
    color: var(--text-dark-blue);
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
}

.application-language svg {
    width: 16px;
    height: 16px;
    fill: var(--text-dark-blue);
}

.application-flash {
    background: var(--bg-accent);
    color: var(--text-inverse);
    font-weight: 600;
    padding: 16px;
    margin: 16px 0;
    white-space: normal;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

.application-flash.alert {
    background: var(--red);
}

.application-flash.html_alert {
    background: var(--red);
}

.application-flash.html_alert a {
  color: var(--azure-blue);
}

.application-title {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 16px;
}

.page-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 100vw;
    gap: 24px;
}

.page-info {
    margin-top: 16px;

    @media (min-width: 768px) {
        flex: 1;
    }
}

.page-info h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 16px 0;
}

.page-info p {
    font-size: 16px;
    margin-bottom: 16px;
}

.page-info .page-info-image {
    width: 100%;
    height: auto;
    margin: 8px 0;
    display: block;
    border-radius: 8px;
}

.page-verifications-phone {
    display: grid;
    grid-template-areas: "phone-label phone-label phone-label"
                         "phone-code phone-number phone-type"
                         "phone-error phone-error phone-error";
    gap: 8px;
    grid-template-columns: min-content auto min-content;
    align-items: center;
}

.page-verifications-phone label.string {
    grid-area: phone-label;
}

.page-verifications-phone .select {
    grid-area: phone-code;
    font-size: 16px;
    margin: 0;
}

.page-verifications-phone .tel {
    grid-area: phone-number;
    margin: 0;
}

.page-verifications-phone .radio_buttons {
    grid-area: phone-type;
    margin: 0;
}

.page-verifications-phone .error {
    grid-area: phone-error;
}

.page-success {
    padding: 30px 20px;
    background-color: var(--azure-blue);
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
    text-align: center;

    @media (min-width: 768px) {
        padding: 64px;
    }
}

.page-success svg {
    fill: #04B27A;
    width: 64px;
    height: 64px;
}

.page-success-message {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-inverse);
    white-space: normal;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.page-employees-filters {
    display: flex;
    gap: 16px;
    margin-left: auto;
    justify-content: space-between;
    flex: 1;

    @media (min-width: 768px) {
        justify-content: end;
    }
}

.page-employees-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;

    .dropdown-item {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 0 16px;
        white-space: nowrap;
        cursor: pointer;
    }

    &[for="filter"] {
        .dropdown-content {
            width: max-content;
            left: 0;
            right: auto;

            @media (min-width: 768px) {
                right: 0;
                left: auto;
            }
        }
    }

    svg {
        width: 16px;
        height: 16px;
        fill: var(--text-dark-blue);
    }


}

.page-employees-list {
    flex-grow: 1;
    min-width: 100%;
}

.page-employees-list .page-employees-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    grid-auto-rows: auto;
    gap: 8px;
    overflow-y: scroll;
    height: 50vh;
}

.page-employees-list .employee-info {
    align-self: stretch;
    padding: 16px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.employee-info .employee-info-basics {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 15px;
}

.page-employees-list .employee-details {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-employees-list .employee-details i {
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;

    &.unverified {
        background: var(--red)
    }

    &.verified {
        background: var(--green)
    }

    &.pending {
        background: var(--text-dark-blue)
    }

    svg {
        width: 60%;
        height: 60%;
        display: initial;
        fill: var(--text-inverse);
    }
}

.employee-info .employee-phone-number {
    display: flex;
    gap: 8px;
    align-items: center;
}

.employee-info .employee-phone-number,
.employee-info .employee-info-indent {
    margin: 8px 0 8px 2px;
}

.employee-info .employee-phone-number * {
    margin: 0 !important;
}

.employee-info .employee-phone-number .tel {
    flex-grow: 1;
}

.employee-info .employee-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1;
    font-weight: 600;
}

.employee-info .employee-request-checkbox {
    display: flex;
    gap: 16px;
    align-items: center;
    margin: 0;
}

.employee-info .employee-request-checkbox label {
    color: var(--text-primary);
    font-size: 15px;
}

.employee-info .employee-request-checkbox input {
    width: 16px;
    margin-right: 8px;
    border-radius: 0;
}

.employee-info .employee-request-sent-at {
    font-size: 12px;
    margin-left: 32px;
}

.page-employees-list .employee-info svg {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

:where([autocomplete="one-time-code"]) {
    --otp-digit-count: 6;
    --otp-letter-spacing: 2.1ch;
    --otp-gap-multiplier: 1.3;
    --otp-background-color: var(--bg-primary);
    --otp-font-size: 24px;
    --otp-padding-block: 1ch;
    --otp-background-size: calc(var(--otp-letter-spacing) + 1ch);

    width: unset !important;
    all: unset !important;
    background: linear-gradient(90deg, var(--otp-background-color) calc(var(--otp-gap-multiplier) * var(--otp-letter-spacing)), transparent 0) 0 0 / var(--otp-background-size) 100% !important;
    clip-path: inset(0% calc(var(--otp-letter-spacing) / 2) 0% 0%) !important;
    font-family: ui-monospace, monospace !important;
    font-size: var(--otp-font-size) !important;
    inline-size: calc(var(--otp-digit-count) * var(--otp-background-size)) !important;
    letter-spacing: var(--otp-letter-spacing) !important;
    padding-block: var(--otp-padding-block) !important;
    padding-inline-start: calc(((var(--otp-letter-spacing) - 1ch) / 2) * var(--otp-gap-multiplier)) !important;
    margin: 16px auto !important;
    color: var(--text-primary) !important;

    -moz-appearance: textfield;
}

:where([autocomplete="one-time-code"])::-webkit-outer-spin-button,
:where([autocomplete="one-time-code"])::-webkit-inner-spin-button {
    display: none;
}