html[data-theme='light'] {
    --logoGram: url('/ui/images/logo.svg');
    --blackOrWhiteColor: 0, 0, 0;
    --borderColor: rgba(var(--blackOrWhiteColor), 0.114);
    --gramColor: #0d68c5;
    --eventColor: rgb(36, 91, 198);
    --focusBorderColor: #99bbef;
    --textColor: color(display-p3 .13 .13 .13);
    --textLightColor: 106, 109, 112;
    --appColor: #f8f8f6;
    --appWindowColor: #fff;
    --appWindowColorLight: #fafafa;
    --templateInputBackground: #fff;
    --btnBorderColor: #bbb;
    --btnShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06);
    --whiteColor: 255, 255, 255;
    --inputBorderRadius: 6px;
    --borderRadius: 6px;
    --borderRadiusBig: 16px;
}

html[data-theme='dark'] {
    --logoGram: url('/ui/images/logo_white.svg');
    --blackOrWhiteColor: 255, 255, 255;
    --borderColor: rgb(66, 66, 56);
    --gramColor: #0d68c5;
    --eventColor: #6aaaea;
    --focusBorderColor: #2d64f6;
    --textColor: #E4E6EB;
    --textLightColor: 161, 161, 163;
    --appColor: #161612;
    --appWindowColor: #1a1a1a;
    --appWindowColorLight: #242424;
    --templateInputBackground: #282828;
    --btnBorderColor: rgba(255, 255, 255, 0.15);
    --btnShadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06);
    --whiteColor: 255, 255, 255;
    --inputBorderRadius: 6px;
    --borderRadius: 6px;
    --borderRadiusBig: 16px;
}

html[data-theme='dark'],
html[data-theme='dark'] body {
    background-color: #161612;
    color-scheme: dark;
}

html[data-theme='light'],
html[data-theme='light'] body {
    background-color: #f8f8f6;
    color-scheme: light;
}

body {
    color: var(--textColor);
    background-color: var(--appColor);
}

.login-container {
    background: var(--appColor);
}

.login-content {
    background-color: var(--appWindowColor);
    border: 1px solid var(--borderColor);
}

.field-input:not(.field-datetime-time),
.login-form .field-input .input-field {
    background-color: var(--templateInputBackground) !important;
    border-color: var(--borderColor) !important;
    color: var(--textColor) !important;
}

.field-caption {
    color: rgba(var(--textLightColor), 1);
}

html[data-theme='dark'] .alert-danger {
    color: color-mix(in srgb, #F55555 58%, var(--textColor) 42%);
    background-color: color-mix(in srgb, #F55555 16%, var(--appWindowColor) 84%);
    border-color: color-mix(in srgb, #F55555 28%, var(--appWindowColor) 72%);
}

.gbtn-primary {
    color: #fff;
    background-color: var(--eventColor);
    border-color: var(--eventColor);
}

.logo-gram-crm {
    content: var(--logoGram);
}

@keyframes autofill {
    from {
        color: inherit;
    }

    to {
        color: inherit;
    }
}

input:-webkit-autofill {
    animation-name: autofill;
    animation-duration: 1ms;
    -webkit-text-fill-color: var(--textColor) !important;
    caret-color: var(--textColor);
    box-shadow: 0 0 0 1000px var(--templateInputBackground) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    background: var(--templateInputBackground) !important;
}

input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill::first-line {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--textColor) !important;
    caret-color: var(--textColor);
    box-shadow: 0 0 0 1000px var(--templateInputBackground) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    background: var(--templateInputBackground) !important;
}

.login-form input,
.login-form input:hover,
.login-form input:focus,
.login-form input:active {
    color: var(--textColor) !important;
    -webkit-text-fill-color: var(--textColor) !important;
    caret-color: var(--textColor);
}

.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus,
.login-form input:-webkit-autofill:active,
.login-form input:-webkit-autofill::first-line {
    color: var(--textColor) !important;
    -webkit-text-fill-color: var(--textColor) !important;
    caret-color: var(--textColor);
    box-shadow: 0 0 0 1000px var(--templateInputBackground) inset !important;
    background-color: var(--templateInputBackground) !important;
}

body {
    display: flex;
    flex-direction: column;
}

html body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
}

.login-container {
    flex: 1 0 auto;
    min-height: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--appColor);
}

.login-content {
    width: calc(100% - 200px);
    max-width: 992px;
    min-height: 500px;
    background-color: var(--appWindowColor);
    padding: 80px;
    display: flex;
    flex-direction: row;
    position: relative;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
    border-radius: var(--borderRadiusBig);
    border: var(--frameBorder);
}

.login-form-container,
.login-form {
    width: 350px;
    padding-right: 40px;
    margin-right: 40px;
}

.login-form {
    padding-right: 0;
    margin-right: 0;
}

.login-content:has(.register-info-panel) .login-form {
    width: 350px;
}

.login-content:has(.register-info-panel) .register-fields-host,
.login-content:has(.register-info-panel) .register-primary-actions,
.login-content:has(.register-info-panel) .back-button {
    width: 100%;
    max-width: 100%;
}

.login-form-container {
    width: 390px;
    border-right: 1px solid var(--borderColor);
}

.login-form-container p {
    font-size: 12px;
}

.login-form-container .alert-dismissible {
    padding-right: 48px;
}

.login-form-container .alert-dismissible .close {
    align-items: center;
    display: flex;
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
}

.login-form-container .alert-dismissible .close span {
    display: block;
    line-height: 1;
}

.login-form-title {
    text-align: center;
}

.register-lang-switch {
    display: flex;
    gap: 8px;
    justify-content: end;
    margin-bottom: 9px;
    margin-top: 9px;
}

.register-lang-switch a,
.register-lang-switch a:visited {
    font-size: 12px;
    color: #1a5fb4 !important;
    text-decoration: none;
}

.register-lang-switch a.is-active {
    font-weight: 700;
}

.register-lang-switch a:hover,
.register-lang-switch a:focus {
    text-decoration: underline;
}

.footer {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    font-size: 12px !important;
}

.form-group {
    position: relative;
}

.login-form .field-input {
    width: 100%;
}

.login-form .field-input .input-field {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.login-form #Password,
.login-form #InputNewPass,
.login-form #InputNewPassConfirm {
    padding-right: 44px !important;
}

.login-form .field-input .gf-password-toggle {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    transform: none;
    z-index: 3;
    flex: 0 0 auto;
    width: 32px;
    height: 100%;
    min-width: 32px;
    padding: 0;
    color: rgba(var(--textLightColor), .65);
    opacity: .75;
}

.login-form .field-input .gf-password-toggle svg {
    width: 16px;
    height: 16px;
}

.login-form .field-input .gf-password-toggle:hover,
.login-form .field-input .gf-password-toggle:focus {
    color: rgba(var(--textLightColor), .9);
    opacity: 1;
}

body:has(.login-container) .bootstrap-select .dropdown-menu.show {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

body:has(.login-container) .bootstrap-select .dropdown-menu.inner.show {
    min-width: 0 !important;
}

body:has(.login-container) .bootstrap-select .dropdown-toggle .filter-option,
body:has(.login-container) .bootstrap-select .dropdown-toggle .filter-option-inner,
body:has(.login-container) .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme='dark'] .carousel-item .card {
    background-color: var(--appWindowColor);
}

.card {
    background-color: var(--appWindowColor);
}

.carousel-item {
    text-align: left;
}

.login-more.carousel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    position: relative;
    min-height: 340px;
    padding-bottom: 30px;
}

.login-more.carousel .carousel-inner {
    flex: 0 0 auto;
    min-height: 340px;
}

.carousel-indicators {
    bottom: -20px;
}

.login-more.carousel .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
}

.password-info-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #f7f9fc 0%, #edf2f8 56%, #f8fafc 100%);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 32px;
}

.pip-dot {
    position: absolute;
    border-radius: 50%;
}

.pip-dot-lg {
    width: 90px;
    height: 90px;
    background: #1a5fb4;
    top: -20px;
    right: 24px;
    opacity: .13;
}

.pip-dot-md {
    width: 55px;
    height: 55px;
    background: #e066a8;
    right: 44px;
    bottom: 48px;
    opacity: .45;
}

.pip-dot-left {
    width: 20px;
    height: 20px;
    background: #3584e4;
    top: 40%;
    left: 10px;
    opacity: .5;
}

.pip-dot-small {
    width: 14px;
    height: 14px;
    background: #62a0ea;
    right: 10px;
    bottom: 20%;
    opacity: .6;
}

.pip-dot-tiny {
    width: 10px;
    height: 10px;
    background: #1a5fb4;
    top: 24%;
    right: 16%;
    opacity: .4;
}

.pip-inner {
    position: relative;
    z-index: 1;
}

.pip-label {
    margin-bottom: 6px;
    color: #3584e4;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.pip-title {
    margin-bottom: 28px;
    color: #1a2b4a;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}

.pip-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    color: #333;
    font-size: 13px;
    line-height: 1.45;
}

.pip-check {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3584e4;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.carousel-indicators li {
    background-color: var(--gramColor);
}

.card-columns {
    column-count: 1;
}

.carousel-inner .card {
    border: none;
}

.carousel-inner .card-media img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 10px;
}

.card-body {
    padding: 16px 0;
    padding-bottom: 0;
}

.card-body p {
    text-align: justify;
}

.carousel-item h3 a,
.carousel-item p {
    font-size: var(--textSize);
    color: var(--textColor);
}

.carousel-item h3,
.carousel-item h3 a {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.2;
}

.carousel-item p {
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 12px;
}

.carousel-item .read-more-date {
    color: #979797;
    font-weight: 400;
}

.card-body .topics {
    display: none;
}

.password-length {
    color: #979797;
    padding-top: 5px;
    padding-left: 7px;
}

.back-button button {
    padding: 0;
}

.login-button {
    text-align: right;
    display: flex;
    gap: 5px;
    justify-content: end;
}

.login-button a:hover {
    text-decoration: none;
}

.back-button a {
    z-index: 1;
    position: relative;
    width: auto;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: auto;
}

.login-secondary-actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
}

html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) {
    display: grid;
    grid-template-columns: minmax(0, calc(50% - 6px)) minmax(0, calc(50% - 6px));
    column-gap: 12px;
    row-gap: 15px;
    width: 100%;
    max-width: 100%;
}

html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row {
    margin-bottom: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-input,
html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) .bootstrap-select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
}

html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row:has(#FirstName),
html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row:has(#LastName) {
    grid-column: span 1;
}

html[data-device='browser'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row:not(:has(#FirstName, #LastName)) {
    grid-column: 1 / -1;
}

html[data-device='browser'] .login-content:has(.register-info-panel) {
    max-width: 992px;
}

html[data-device='browser'] .login-content:has(.register-info-panel) .login-form-container {
    /*flex: 0 0 390px;
    width: 390px;
    min-width: 390px;*/
}

html[data-device='browser'] .login-content:has(.register-info-panel) .register-info-panel {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

@media (min-width: 991px) and (max-width: 1200px) {
    html[data-device='browser'] .login-content:has(.register-info-panel) .register-info-panel {
        min-width: 0;
    }
}

@media (min-width: 991px) {
    html[data-device='phone'] .login-content:has(.register-info-panel) {
        width: calc(100% - 200px);
        max-width: 992px;
        padding: 80px;
    }

    html[data-device='phone'] .login-content:has(.register-info-panel) .login-form-container {
        flex: 0 0 390px;
        width: 390px;
        min-width: 390px;
    }

    html[data-device='phone'] .login-content:has(.register-info-panel) .register-info-panel {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        padding: 0;
    }

    html[data-device='phone'] .register-info-panel .rip-inner,
    html[data-device='phone'] .register-info-panel .rip-setup-panel {
        /*max-width: 320px;*/
    }

    html[data-device='phone'] .register-info-panel .rip-dot {
        display: none;
    }

    html[data-device='phone'] .register-info-panel .rip-inner {
        max-width: none;
    }
}

@media (max-height: 700px) {
    .login-content {
        margin: 0;
    }
}

@media (max-width: 990px) {
    .form-control {
        padding: .375rem .75rem;
    }

    .login-content {
        box-sizing: border-box;
        width: min(640px, calc(100% - 64px));
        max-width: 640px;
        padding: 40px;
    }

    .login-form-container,
    .login-form {
        padding-right: 0;
        border-right: none;
        margin-right: 0;
        width: 100%;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    .login-content:has(.register-info-panel) .login-form,
    .login-content:has(.register-info-panel) .register-fields-host,
    .login-content:has(.register-info-panel) .register-primary-actions,
    .login-content:has(.register-info-panel) .back-button {
        width: 100%;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    .login-more,
    .login-more.carousel {
        display: none;
    }

    .login-form-btn {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

@media (max-width: 990px) {
    .login-content {
        background-color: var(--appColor);
        box-shadow: none;
        border: none;
    }
}

@media (max-width: 576px) {
    .login-content {
        width: 100%;
        max-width: none;
        padding: 20px;
        margin: 0;
        height: 100%;
        border-radius: inherit;
        border: inherit;
        box-shadow: inherit;
    }

    .password-length {
        padding-top: 10px;
        padding-left: calc(var(--inputBorderRadius) + 5px);
    }

    .form-control {
        min-width: 100%;
        height: 52px;
        padding: 16px 5px 0 10px;
    }

    .form-control:focus {
        border: 2px solid #99bbef;
        font-size: 16px;
    }

    label {
        position: absolute;
        top: 4px;
        left: 10px;
        color: rgba(var(--textLightColor), 1);
        font-size: var(--textSmallerSize);
        text-transform: uppercase;
    }

    .login-form-container,
    .login-form {
        width: 100%;
        max-width: none;
    }

    .login-content:has(.register-info-panel) .login-form,
    .login-content:has(.register-info-panel) .register-fields-host,
    .login-content:has(.register-info-panel) .register-primary-actions,
    .login-content:has(.register-info-panel) .back-button,
    .login-content:has(.register-info-panel) .field-row,
    .login-content:has(.register-info-panel) .field-input,
    .login-content:has(.register-info-panel) .input-field,
    .login-content:has(.register-info-panel) .bootstrap-select {
        box-sizing: border-box;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .login-content:has(.register-info-panel),
    .login-content:has(.register-info-panel) .login-form-container {
        overflow-x: hidden;
    }

    .login-content:has(.register-info-panel) .register-check-row,
    .login-content:has(.register-info-panel) .custom-control,
    .login-content:has(.register-info-panel) .custom-control-label,
    .login-content:has(.register-info-panel) .custom-control-label a {
        min-width: 0;
        max-width: 100%;
    }

    .login-content:has(.register-info-panel) .custom-control-label,
    .login-content:has(.register-info-panel) .custom-control-label a {
        overflow-wrap: anywhere;
    }
}

html[data-device='phone'] .login-form-title {
    padding-top: 1.5rem;
}

html[data-device='phone'] .login-button.pt-3 {
    padding-top: 3rem !important;
}

html[data-device='phone'] .login-form-btn {
    flex: 1;
    height: 40px;
}

html[data-device='phone'],
html[data-device='phone'] body {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
}

html[data-device='phone'] body {
    position: static !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
}

html[data-device='phone'] .login-container {
    height: auto !important;
    min-height: 0;
    align-items: flex-start;
}

html[data-device='phone'] .login-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background-color: var(--appColor);
    box-shadow: none;
    border: none;
}

html[data-device='phone'] .register-info-panel {
    background: transparent !important;
}

html[data-device='phone'] .password-info-panel {
    display: flex !important;
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}

html[data-device='phone'] .password-info-panel .pip-dot {
    display: none;
}

html[data-device='phone'] .password-info-panel .pip-card {
    /*background: transparent;*/
    box-shadow: none;
    border: 1px solid var(--borderColor);
}

html[data-theme='dark'] .password-info-panel {
    background: transparent !important;
}

html[data-theme='dark'] .password-info-panel .pip-title {
    color: var(--textColor) !important;
}

html[data-theme='dark'] .password-info-panel .pip-card {
    background: color-mix(in srgb, var(--appWindowColor) 90%, #000 10%) !important;
    border: 1px solid var(--borderColor);
    color: var(--textColor) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.24) !important;
}

html[data-device='phone'] .login-more .card {
    background-color: transparent;
}

html[data-device='phone'] .login-form .back-button {
    padding-top: 12px !important;
}

html[data-device='phone'] .login-form .login-button + .back-button {
    padding-top: 28px !important;
}

html[data-device='phone'] .login-form .back-button + .back-button {
    padding-top: 4px !important;
}

html[data-device='phone'] .login-form .back-button a {
    min-height: 44px;
    width: 100%;
    padding: 10px 12px;
    line-height: 1.35;
}

html[data-device='phone'] .login-form .field-caption {
    max-width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 577px) and (max-width: 900px) {
    html[data-device="phone"] .login-content {
        padding: 40px;
        background-color: var(--appColor);
        box-shadow: none;
        border: none;
    }

    html[data-device="phone"] .card {
        background-color: transparent;
    }
}

@media (max-height: 450px) {
    .login-form-title {
        padding-top: 0;
    }

    .login-form-title.pb-5 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }

    .back-button.pt-5 {
        padding-top: 1rem !important;
    }

    html[data-device='phone'] .login-button.pt-3 {
        padding-top: 1rem !important;
    }

    .login-button {
        padding-top: 0;
    }

    .login-secondary-actions {
        flex-direction: row;
        gap: 16px;
        justify-content: center;
    }

    html[data-device='phone'] .login-form .login-secondary-actions a {
        width: auto;
        min-height: 36px;
        padding: 6px 8px;
    }

}

@media (min-width: 577px) and (max-height: 449px) {
    html[data-device="phone"] .login-content {
        padding-top: 0;
        padding-bottom: 0;
        min-height: 0;
        align-items: center;
    }

    html[data-device="phone"] .login-container {
        min-height: 0;
    }
}

@media (min-width: 577px) and (max-height: 400px) {
    html[data-device="phone"] .footer {
        display: none;
    }
}

/* Register */
.login-form-container > p:has(> strong) {
    margin: 0 auto 28px;
    padding-left: 0;
    max-width: 430px;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.login-form-container > p:has(> strong) strong {
    font-weight: 600;
}

.register-subtitle { font-size: 13px; color: #6b7280; margin-bottom: 32px; }
.register-step-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #e8f1fd; color: #1a5fb4; font-size: 12px; font-weight: 600; padding: 6px 12px; margin-bottom: 14px; }
.register-note { font-size: 12px; color: #6b7280; }
.register-hidden { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.register-check-row { margin-bottom: 12px; }
.register-check-row .custom-control-label { line-height: 1.35; }
.register-check-row .custom-control-label::before,
.register-check-row .custom-control-label::after {
    top: .05rem;
}
.register-check-row .custom-control-label::before {
    background-color: var(--appWindowColor);
    border-color: var(--borderColor);
    border-radius: 4px;
    box-shadow: none;
    top: .05rem;
}
.register-check-row .custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
    border-color: color-mix(in srgb, var(--eventColor) 46%, var(--borderColor) 54%);
}
.register-check-row .custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--focusBorderColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focusBorderColor) 24%, transparent);
}
.register-check-row .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--eventColor);
    border-color: var(--eventColor);
}
.register-check-row .custom-control-input:checked ~ .custom-control-label::after {
    filter: brightness(0) invert(1);
}
html[data-theme='dark'] .register-check-row .custom-control-label {
    color: var(--textColor);
}
html[data-theme='dark'] .register-check-row .custom-control-label::before {
    background-color: color-mix(in srgb, var(--templateInputBackground) 82%, #000 18%);
    border-color: color-mix(in srgb, var(--borderColor) 76%, var(--textColor) 24%);
}
html[data-theme='dark'] .register-check-row .custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
    background-color: color-mix(in srgb, var(--templateInputBackground) 70%, var(--eventColor) 30%);
    border-color: color-mix(in srgb, var(--eventColor) 62%, var(--borderColor) 38%);
}
html[data-theme='dark'] .register-check-row .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--eventColor);
    border-color: var(--eventColor);
}
.register-check-row .custom-control-label a { color: #1a5fb4; font-weight: 700; text-decoration: none; }
.register-check-row .custom-control-label a:hover,
.register-check-row .custom-control-label a:focus { text-decoration: underline; }
.register-fields-host .field-row { margin-bottom: 15px; }
.register-primary-actions { text-align: right; display: flex; justify-content: end; }
.register-info-panel { position: relative; overflow: hidden; background: linear-gradient(145deg, #f7f9fc 0%, #edf2f8 56%, #f8fafc 100%); border-radius: 16px; display: flex; flex-direction: column; justify-content: center; padding: 36px 32px; margin: 0; }
.rip-dot { position: absolute; border-radius: 50%; }
.rip-inner { position: relative; z-index: 1; width: 100%; margin: 0 auto; text-align: left; }
.rip-title { margin-bottom: 28px; color: #1a2b4a; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.rip-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 16px; border: 1px solid var(--borderColor); border-radius: 12px; background: color-mix(in srgb, var(--appWindowColor) 92%, #dce6f3 8%); box-shadow: none; color: var(--textColor); font-size: 13px; line-height: 1.45; text-align: left; }
.rip-item::before { content: '\2713'; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #3584e4; color: #fff; font-size: 14px; font-weight: 700; }
html[data-theme='dark'] .register-info-panel { background: transparent; }
html[data-theme='dark'] .rip-title { color: var(--textColor); }
html[data-theme='dark'] .rip-item { background: color-mix(in srgb, var(--appWindowColor) 90%, #000 10%); color: var(--textColor); box-shadow: none; }
.register-progress { width: 100%; height: 12px; border-radius: 999px; background: #dfe7f4; overflow: hidden; margin: 12px 0; }
.register-progress > div { height: 100%; width: 10%; background: linear-gradient(90deg, #1a5fb4 0%, #3584e4 100%); transition: width 350ms ease; }
.register-credentials { border: 1px solid #dbe3ef; border-radius: 10px; padding: 12px; background: #f8fbff; font-size: 13px; margin-top: 12px; }
.register-credentials .line { margin-bottom: 6px; }

@media (max-width: 990px) {
    .register-info-panel { display: none !important; }
    .password-info-panel { display: none !important; }

    html[data-device='phone'] .password-info-panel {
        display: none !important;
    }
}

@media (max-width: 576px) {
    html[data-device='phone'] .register-fields-host .bootstrap-select .dropdown-toggle { min-height: 52px; }

    .login-form-container > p:has(> strong) {
        max-width: 360px;
    }
}

@media (max-width: 900px) {
    html[data-device='phone'] body {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    html[data-device='phone'] .login-container {
        height: auto !important;
        min-height: 0;
        align-items: flex-start !important;
        padding: 0 !important;
    }

    html[data-device='phone'] .login-content {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}

.rip-setup-panel { width: 100%; text-align: center; }
.rip-setup-orb { position: relative; width: 100px; height: 100px; margin: 0 auto 28px; }
.rip-orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.rip-orb-ring-1 { border-color: rgba(53,132,228,.28); animation: rip-spin 3.2s linear infinite; }
.rip-orb-ring-2 { inset: 12px; border-color: rgba(26,95,180,.45); border-top-color: transparent; animation: rip-spin 2.1s linear infinite reverse; }
.rip-orb-ring-3 { inset: 24px; border-color: rgba(99,163,245,.55); border-right-color: transparent; animation: rip-spin 1.4s linear infinite; }
.rip-orb-core { position: absolute; inset: 36px; background: linear-gradient(135deg,#3584e4,#1a5fb4); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: rip-pulse 2.5s ease-in-out infinite; }
.rip-orb-core svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes rip-spin { to { transform: rotate(360deg); } }
@keyframes rip-pulse { 0%,100% { box-shadow: 0 0 14px rgba(53,132,228,.3); } 50% { box-shadow: 0 0 30px rgba(53,132,228,.6); } }
.rip-setup-heading { font-size: 1rem; font-weight: 700; color: var(--textColor); line-height: 1.3; margin-bottom: 5px; }
.rip-setup-sub { font-size: 11.5px; color: rgba(var(--textLightColor),1); margin-bottom: 22px; }
.rip-setup-steps { list-style: none; padding: 0; margin: 0; text-align: left; }
.rip-setup-step { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-radius: 12px; margin-bottom: 8px; background: color-mix(in srgb, var(--appWindowColor) 88%, #3584e4 12%); border: 1px solid var(--borderColor); font-size: 12.5px; color: var(--textColor); opacity: 0; transform: translateY(6px); animation: rip-step-in .45s ease forwards; }
.rip-setup-step:nth-child(1) { animation-delay: .15s; }
.rip-setup-step:nth-child(2) { animation-delay: .55s; }
.rip-setup-step:nth-child(3) { animation-delay: .95s; }
@keyframes rip-step-in { to { opacity: 1; transform: translateY(0); } }
.rip-step-dot { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rip-step-dot-done { background: linear-gradient(135deg,#3584e4,#1a5fb4); }
.rip-step-dot-done svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rip-step-dot-active { background: rgba(53,132,228,.12); border: 2px solid rgba(53,132,228,.4); }
.rip-step-dot-active-inner { width: 8px; height: 8px; border-radius: 50%; background: #3584e4; animation: rip-dot-blink 1.2s ease-in-out infinite; }
@keyframes rip-dot-blink { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.rip-step-muted { opacity: .45; }
html[data-theme='dark'] .rip-setup-step { background: color-mix(in srgb,var(--appWindowColor) 88%,#0e2040 12%); }

@media (min-width: 991px) {
    html[data-device='phone'] .register-info-panel {
        background: transparent;
        border-radius: 0;
        justify-content: center;
        margin-top: 0;
        overflow: visible;
        padding: 0 0 0 40px;
    }

    html[data-device='phone'] .register-info-panel.register-info-panel-setup {
        justify-content: flex-start;
        margin-top: 155px;
    }

    html[data-device='phone'] .login-more.register-info-panel {
        align-self: stretch;
    }

    html[data-device='phone'] .login-more.register-info-panel.register-info-panel-setup {
        align-self: flex-start;
    }

    html[data-device='phone'] .login-more.register-info-panel .rip-inner {
        margin-top: 0;
    }

    html[data-device='phone'] .login-content:has(.register-info-panel-setup) .rg-mobile-hint {
        display: none;
    }
}

@media (min-width: 560px) {
    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) {
        display: grid;
        grid-template-columns: minmax(0, calc(50% - 6px)) minmax(0, calc(50% - 6px));
        column-gap: 12px;
        row-gap: 15px;
        width: 100%;
        max-width: 100%;
    }

    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row {
        margin-bottom: 0;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-input,
    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) .bootstrap-select {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }

    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row:has(#FirstName),
    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row:has(#LastName) {
        grid-column: span 1;
    }

    html[data-device='phone'] .login-form .register-fields-host:has(#FirstName, #LastName) .field-row:not(:has(#FirstName, #LastName)) {
        grid-column: 1 / -1;
    }
}

.rg-mobile-hint { display: none; }

html[data-device='phone'] .login-form-container:has(.rg-mobile-hint) > h5,
html[data-device='phone'] .login-form-container:has(.rg-mobile-hint) > .register-subtitle {
    box-sizing: border-box;
    width: 100%;
    /*max-width: 350px;*/
    margin-right: auto;
    margin-left: auto;
}

html[data-device='phone'] .rg-mobile-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    /*max-width: 350px;*/
    margin-right: auto;
    margin-left: auto;
    background: color-mix(in srgb,var(--appWindowColor) 94%,#3584e4 6%);
    border: 1px solid var(--borderColor);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 12px;
    color: rgba(var(--textLightColor),1);
}

@keyframes macos-spin { to { transform: rotate(360deg); } }
.rg-macos-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2.5px solid rgba(53,132,228,.18);
    border-top-color: #3584e4;
    animation: macos-spin .75s linear infinite;
}

.oauth-login-content {
    width: min(620px, calc(100% - 64px));
    max-width: 620px;
    min-height: 0;
    padding: 40px;
    justify-content: center;
}

.oauth-login-content .login-form-container {
    border-right: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.oauth-consent-form {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.oauth-login-content .register-lang-switch {
    margin: 0 0 18px;
}

.oauth-login-content .login-form-title {
    padding-bottom: 28px !important;
}

.oauth-login-content .login-form-title img {
    height: 30px;
}

.oauth-intro {
    margin-bottom: 18px;
    text-align: center;
}

.oauth-intro p {
    color: #4b5563;
}

.oauth-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
}

.oauth-section h6 {
    color: #5f6368;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
}

.oauth-section-main {
    min-width: 0;
}

.oauth-section-main code {
    font-size: var(--textSize);
}

.oauth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.oauth-icon i {
    font-size: 20px;
}

.oauth-icon-app {
    background: #eef5ff;
    color: #0b73f6;
}

.oauth-icon-link {
    background: #fdebf2;
    color: #c03567;
}

.oauth-icon-scope {
    background: #e8f8ef;
    color: #0d8a4b;
}

.oauth-client-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.scope-chip {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #16356b;
    font-size: var(--textSize);
}

.scope-chip.scope-chip-denied {
    background: #fde8e8;
    color: #8a1c1c;
    text-decoration: line-through;
}

.scope-chip.scope-chip-ok {
    background: #e8f8ef;
    color: #0d6b37;
}

.muted-line {
    color: #667085;
    font-size: var(--textSmallerSize);
}

.oauth-permissions {
    grid-column: 1 / -1;
    margin: 8px -12px -12px;
    border-top: 1px solid #dfe3e8;
}

.oauth-permissions:empty {
    display: none;
}

.oauth-permission-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 4px 12px;
}

.oauth-permission-row + .oauth-permission-row {
    border-top: 1px solid #dfe3e8;
}

.oauth-permission-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: #0d8a4b;
    font-size: 14px;
    font-weight: 700;
}

.oauth-permission-title {
    font-size: var(--textSmallerSize);
    font-weight: 700;
}

.oauth-permission-text {
    font-size: var(--textSmallerSize);
}

.oauth-note {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #dfe7f4;
    border-radius: 8px;
    background: #f8fbff;
}

.oauth-note-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: #0b73f6;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.oauth-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    justify-content: flex-end;
}

.oauth-deny-btn {
    background: var(--btnBackground) !important;
    border-color: var(--btnBorderColor) !important;
    color: var(--textColor) !important;
}

.oauth-deny-btn:hover {
    background: var(--btnHoverBackground) !important;
}

.oauth-error {
    display: none;
}

@media (max-width: 990px) {
    .oauth-login-content {
        width: min(560px, calc(100% - 64px));
        max-width: 560px;
        min-height: 0;
        padding: 36px;
    }
}

@media (max-width: 576px) {
    .oauth-login-content {
        width: 100%;
        padding: 28px 20px;
    }

    .oauth-section {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 14px;
        padding: 12px;
    }

    .oauth-icon {
        width: 42px;
        height: 42px;
    }

    .oauth-login-content .login-form-title img {
        height: 30px;
    }

    .oauth-actions {
        justify-content: stretch;
    }

    .oauth-actions .login-form-btn {
        flex: 1 1 100%;
    }
}