@font-face {
    font-family: Urbanist;
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("https://fonts.gstatic.com/s/urbanist/v15/L0xjDF02iFML4hGCyOCpRdycFsGxSrqDSxkvEZmq.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.vc-settings-header {
    display: flex;
    flex-direction: row;
    gap: 128px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-content: center;
    max-height: fit-content;
    padding: 24px;
}

.vc-settings-header-minimal > div > .vc-settings-logo-container {
    width: 100%;
    height: 20%;
    min-height: 36px;
}

@keyframes vc-settings-logo-boioioing {
    0% {
        transform: scale(1) scaleX(1) scaleY(1);
    }

    10% {
        transform: scale(1.05) scaleX(1.05) scaleY(0.6);
    }

    70% {
        transform: scale(1.05) scaleY(1.1);
    }

    90% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1) scaleX(1) scaleY(1);
    }
}

.vc-settings-logo {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.nx-mascot {
    /* When adjusting make sure image reaches out of card top for ~16px */
    transform: scale(2) translateX(-24px) translateY(-4px);
}

.vc-settings-header > div {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.vc-settings-header-minimal > div {
    display: flex !important;
    flex-direction: row;
    min-width: 100% !important;
    max-height: 30px;
}

.vc-settings-header-minimal .vc-settings-logo {
    transform: translateY(-4px);
}

.vc-settings-buttonRow {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.vc-settings-buttonRow-minimal {
    display: inline-flex;
    min-width: fit-content !important;
    max-height: fit-content;
}