@import"./PilatWide.css";

:root {
    --gray-0: #F5F5F5;
    --gray-1: #D1D9E0;
    --gray-2: #A1A6AA;
    --gray-3: #757C82;
    --gray-4: #585F67;
    --gray-5: #383D42;
    --gray-6: #303437;
    --gray-7: #222426;
    --gray-8: #161717;
    --gray-9: #101010;
    --primary: #F5F5F5;
    --primary-dark: #A1A6AA;
    --primary-background: #303437;
    --accent-lighter: #A8EDFD;
    --accent-light: #74E3FC;
    --accent: #51DCFB;
    --accent-dark: #296E7E;
    --accent-background: #122327;
    --warning-lighter: #FBE1A7;
    --warning-light: #F9CF72;
    --warning: #F8C24F;
    --warning-dark: #7C6128;
    --warning-background: #2B2416;
    --error-lighter: #FBA9A9;
    --error-light: #F97676;
    --error: #F85454;
    --error-dark: #7C2A2A;
    --error-background: #2A1515;
    --success-lighter: #AAFBBB;
    --success-light: #77F893;
    --success: #55F678;
    --success-dark: #2B7B3C;
    --success-background: #172A1B;
    --pink-lighter: #FBA9E7;
    --pink-light: #FA87DD;
    --pink: #F854CF;
    --pink-dark: #7C2A67;
    --pink-background: #261623;
    --purple-lighter: #BFA6FD;
    --purple-light: #9C74FB;
    --purple: #8351FA;
    --purple-dark: #4D2E96;
    --purple-background: #1F1632;
    --blue-lighter: #A9ACFB;
    --blue-light: #767AF9;
    --blue: #5459F8;
    --blue-dark: #323595;
    --blue-background: #171832;
    --orange-lighter: #FDC5A8;
    --orange-light: #FCA274;
    --orange: #FB8B51;
    --orange-dark: #7E4629;
    --orange-background: #2B1D16
}

.initia-check-icon.dark {
    fill: var(--gray-9)
}

.initia-check-icon.white {
    fill: var(--gray-0)
}

.initia-check-icon.xs {
    width: 12.8px;
    height: 12.8px
}

.initia-check-icon.sm {
    width: 16px;
    height: 16px
}

.initia-check-icon.md {
    width: 20px;
    height: 20px
}

.initia-app-menu {
    width: 100%;
    height: 100%
}

.initia-app-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.initia-app-menu-trigger-icon-container {
    cursor: pointer;
    background: var(--gray-9);
    padding: 10px;
    width: 100%;
    height: 100%;
    color: var(--gray-4);
    transition: all .2s ease;
    display: grid;
    place-items: center
}

.initia-app-menu-trigger:hover .initia-app-menu-trigger-icon-container {
    color: var(--gray-0)
}

.initia-app-menu-trigger-icon {
    width: 24px;
    height: 24px
}

.initia-app-menu-popover {
    position: fixed;
    top: 90%;
    left: 10%;
    width: 256px;
    background: var(--gray-7);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 20px 30px 5px #00000080;
    z-index: 1000;
    transition-property: opacity, scale;
    transition-duration: .2s;
    transition-timing-function: ease;
    transform-origin: top left;
    opacity: 0;
    scale: .9
}

.initia-app-menu-popover.show-app-menu {
    opacity: 1;
    scale: 1
}

.initia-app-menu-drawer {
    position: fixed;
    z-index: calc(infinity);
    inset: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: end;
    transition-property: opacity, scale;
    transition-duration: .2s;
    transition-timing-function: ease;
    transform-origin: bottom center;
    opacity: 0;
    scale: .99
}

.initia-app-menu-drawer.show-app-menu {
    opacity: 1;
    scale: 1
}

body:has(.initia-app-menu-drawer.show-app-menu) {
    overflow: hidden
}

.initia-app-menu-drawer-content {
    width: 100%;
    background: var(--gray-7);
    padding: 24px 16px 14px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px
}

.initia-app-menu-list {
    display: flex;
    flex-direction: column
}

.initia-app-menu-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px
}

.initia-app-menu-list-item.sm {
    padding: 12px 16px
}

.initia-app-menu-list-item.sm:not(:last-child) {
    margin-bottom: 4px
}

.initia-app-menu-list-item.md {
    padding: 22px 16px
}

.initia-app-menu-list-item.current {
    background: var(--gray-9)
}

.initia-app-menu-list-item.link:hover {
    background: var(--gray-5);
    cursor: pointer
}

.initia-app-menu-list-item-logo {
    height: 20px;
    min-height: 20px
}

body:has(.initia-terms) {
    overflow: hidden
}

.initia-terms {
    position: fixed;
    inset: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: Pilat Wide;
    display: grid;
    place-items: center
}

.initia-terms[data-screen-size=sm] {
    place-items: end
}

.initia-terms.accepted {
    scale: .9;
    opacity: 0;
    transition-property: opacity, scale;
    transition-duration: .2s;
    transition-timing-function: ease
}

.initia-terms-container {
    background: var(--gray-8);
    border: 1px solid var(--gray-6);
    border-radius: 20px;
    font-weight: 500;
    color: var(--gray-3);
    overflow-y: auto;
    padding: 24px;
    font-size: 12px;
    height: 80vh
}

.initia-terms[data-screen-size=sm] .initia-terms-container {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.initia-terms[data-screen-size=md] .initia-terms-container {
    max-height: 580px;
    max-width: 620px
}

.initia-terms[data-screen-size=lg] .initia-terms-container {
    max-width: 960px;
    max-height: 830px;
    padding: 32px;
    font-size: 14px
}

.initia-terms-header {
    font-weight: 600;
    color: var(--gray-1);
    margin: 0
}

.initia-terms[data-screen-size=sm] .initia-terms-header {
    font-size: 14px
}

.initia-terms[data-screen-size=md] .initia-terms-header {
    font-size: 18px
}

.initia-terms[data-screen-size=lg] .initia-terms-header {
    font-size: 24px
}

.initia-terms-description-info-icon {
    width: 12px;
    height: 12px
}

.initia-terms[data-screen-size=lg] .initia-terms-description-info-icon {
    width: 14px;
    height: 14px
}

.initia-terms-description {
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: center;
    line-height: 12px
}

.initia-terms-body {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--gray-5);
    border-radius: 8px;
    overflow-y: auto;
    height: 70%
}

.initia-terms[data-screen-size=lg] .initia-terms-body {
    font-size: 14px
}

.initia-terms-body a {
    color: var(--gray-2);
    text-decoration: none
}

.initia-terms-body a:hover {
    color: var(--gray-1)
}

.initia-terms-body p:not(.initia-terms-body-topic) {
    margin: 0
}

.initia-terms-body-topic {
    margin-bottom: 4px;
    color: var(--gray-1);
    font-weight: 600
}

.initia-terms[data-screen-size=md] .initia-terms-body-topic {
    font-size: 14px
}

.initia-terms[data-screen-size=lg] .initia-terms-body-topic {
    font-size: 16px
}

.initia-terms-body p:nth-child(2n) {
    margin-top: 18px
}

.initia-terms-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px
}

.initia-terms[data-screen-size=lg] .initia-terms-footer {
    gap: 16px;
    margin-top: 48px
}

.initia-terms-footer-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer
}

.initia-terms-footer-checkbox-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1px solid var(--gray-3);
    border-radius: 2px;
    background-color: var(--gray-8)
}

.initia-terms-footer-checkbox-box .initia-check-icon {
    display: none
}

.initia-terms-footer-checkbox:hover .initia-terms-footer-checkbox-box {
    border-color: var(--gray-0)
}

.initia-terms-footer.checked .initia-terms-footer-checkbox-box {
    background-color: var(--gray-0);
    border-color: var(--gray-0)
}

.initia-terms-footer.checked .initia-terms-footer-checkbox-box .initia-check-icon {
    display: block
}

.initia-terms-footer-checkbox-label {
    line-height: 16px;
    cursor: pointer
}

.initia-terms-footer-accept-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 0;
    color: var(--gray-9);
    font-weight: 600;
    cursor: not-allowed;
    background-color: var(--gray-3)
}

.initia-terms[data-screen-size=sm] .initia-terms-footer-accept-button {
    height: 56px;
    width: 100%;
    font-size: 14px
}

.initia-terms[data-screen-size=md] .initia-terms-footer-accept-button {
    height: 32px;
    width: 168px;
    font-size: 12px
}

.initia-terms[data-screen-size=lg] .initia-terms-footer-accept-button {
    height: 56px;
    width: 360px;
    font-size: 16px
}

.initia-terms-footer.checked .initia-terms-footer-accept-button {
    cursor: pointer;
    background-color: var(--gray-0)
}

.initia-terms-footer.checked .initia-terms-footer-accept-button:hover {
    background-color: #fff
}