/* style variables */
:root {
    --sso-primary-color: #181818;
    --sso-secondary-color: #354243;
    --sso-secondary-color-hover: #2B3A3B;
    --sso-primary-button-color-hover: #EEEEEE;
    --sso-border-color: #27272A;
    --sso-border-secondary-color: #505255;
    --sso-secondary-border-hover: #EEEEEE;
    --sso-font-color: #FAFAFA;
    --sso-font-secondary-color: #838383;
    --sso-bg-color: #09090B;
    --sso-link-button-hover-color: #6e6ef6;
    --sso-accent-color: #FFB700;
    --sso-accent-color-hover: #E0A100;
    --sso-dark-gray: #3C4B4C;
    --sso-button-bg-color: #FFFFFF;
    --sso-info-color: #1C46D6;
    --sso-success-color: #0A7637;
    --sso-warn-color: #ff535c;
    --sso-error-color: #CA150C;

    --sso-input-color: #191919;
    --sso-input-border-color: #3F3F46;
    --sso-input-border-color-active: rgba(238, 238, 238, 1);

    --sso-border-radius-sharp: 4px;
    --sso-border-radius-round: 8px;
    --sso-font-size: 0.875rem;
    --sso-heading-font-size: 1.5rem;

    --sso-header-height: 2.5rem;
    --sso-dropdown-width: 7rem;

    --sso-dropdown-y: calc(var(--sso-header-height) + 20px);
    --sso-dropdown-x: calc(100% - var(--sso-dropdown-width) - 20px);

    --sso-locale-bg-color: #18181B;
}

body {
    font-family: "Manrope", sans-serif;
}

/*** GLOBAL ***/
button, button:hover {
    border: none !important;
}

/** BODY STYLES **/
.card-pf {
    flex: 1;
    border: none;
    box-shadow: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-pf-page .card-pf {
    padding-left: 5px;
    padding-right: 5px;
}

.sso-content-wrapper {
    border-radius: var(--sso-border-radius-round);
    border: 1px solid var(--sso-border-color);
    background-color: var(--sso-bg-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 20px 32px;
}

.login-pf-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #09090B;
    background-image: url("../img/admicom_background.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
}

#kc-error-message p.instruction,
#info-box p.instruction {
    font-size: 1rem;
    margin: 5px 0 15px;
    color: var(--sso-font-color);
}


#info-box p.instruction,
.login-pf-page .login-pf-signup,
.login-pf-page .login-pf-signup a {
    margin: 0;
}

#backToApplication {
    font-size: 1rem;
}

#instruction1, #instruction2, #instruction3 {
    font-size: 0.9rem;
    color: var(--sso-font-color);
    margin: 5px 0 15px;
}

#social-microsoft-entra:hover,
#social-google:hover {
    background-color: #EEEEEE;
}

.pf-c-page__main-section {
    background-color: transparent;
}

.pf-c-content {
    color: var(--sso-font-color);
}

#page-layout-default-nav {
    display: flex;
    flex-direction: column;
    background-color: var(--sso-bg-color);
    background-image: url("../img/admicom_background.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
}

#page-layout-default-nav main {
    padding: 20px 30px;
}

.pf-c-page {
    background-color: var(--sso-bg-color);
}

.pf-c-page__main {
    background-image: url("../img/admicom_background.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right;
}

.pf-c-page__main-section {
    color: var(--sso-button-bg-color);
}

.pf-c-data-list {
    border: none;
}

.pf-c-data-list * {
    color: var(--sso-button-bg-color);
    background-color: var(--sso-bg-color);
    border-radius: var(--sso-border-radius-sharp);
    border: 1px solid var(--sso-secondary-color);
}

.pf-c-page__header-tools #loggedInUser {
    display: none;
}

.pf-c-data-list__item-row * {
    border: 0;
}

#landingLogo .brand, #brandLink .brand {
    height: 25px;
}

.pf-c-page__header-brand {
    align-items: self-end;
}

.pf-l-gallery {
    --pf-l-gallery--GridTemplateColumns--min: 350px;
}

.pf-c-card {
    border-radius: var(--sso-border-radius-sharp);
    border: 1px solid rgba(238, 238, 238, 0.25);
    background-color: var(--sso-bg-color);
    color: var(--sso-button-bg-color);
    padding: 17px;
}

.pf-c-card h2, #landingWelcomeMessage {
    color: var(--sso-font-color);
}

#landingWelcomeMessage, .pf-c-content .pf-c-title {
    font-size: 2rem;
    font-weight: 500;
}

.pf-c-content p {
    color: var(--sso-font-secondary-color);
    font-weight: 500;
}

.pf-c-page__main {
    background-color: var(--sso-bg-color);
}

#landingWelcomeMessageBox {
    padding: 2rem;
}

.pf-c-card .pf-u-mb-md {
    margin: 5px 0;
    color: var(--sso-font-secondary-color);
    font-weight: 500;
}

#landingSignInButton,
#landingSignOutButton,
#signOutButton,
#setUpAction-otp #otp-set-up,
.pf-c-card__body .landing-site-button,
#save-btn,
#microsoft-entra-idp-unlink,
#microsoft-entra-idp-link,
#google-idp-unlink,
#google-idp-link,
#password-set-up,
[id*="password-row"] .pf-c-data-list__item-action [id*="password-update"] {
    background-color: var(--sso-dark-gray);
    color: var(--sso-font-color);
    border-radius: var(--sso-border-radius-sharp);
    margin: 0 auto;
}

[id*="password-row"] [id*="password-created-at"] {
    color: var(--sso-font-secondary-color);
}

.pf-c-data-list__item-action [id*="otp-remove"]:hover {
    border: none;
    background-color: var(--sso-warn-color);
}

#basic-authentication-categ-title, #two-factor-categ-title {
    font-size: 1.5rem;
}

#otp-cred-help {
    color: var(--sso-font-secondary-color);
}

#save-btn {
    padding: 8px 10px 8px 10px;
    margin: 10px;
}

#save-btn:hover {
    background-color: var(--sso-secondary-color-hover);
}

#landingSignInButton:hover,
#landingSignOutButton:hover,
#signOutButton:hover,
#setUpAction-otp #otp-set-up:hover,
.pf-c-card__body .landing-site-button:hover,
#microsoft-entra-idp-unlink:hover,
#microsoft-entra-idp-link:hover,
#password-set-up:hover,
[id*="password-row"] .pf-c-data-list__item-action [id*="password-update"]:hover {
    background-color: var(--sso-secondary-color-hover);
    margin: 0 auto;
    border: none;
    text-decoration: none;
    color: var(--sso-font-color);
}

.login-pf body {
    background: none;
}

.login-pf-page .login-pf-header {
    padding: 0 20px 0 20px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    height: var(--sso-header-height);
}

.login-pf-page #instruction-email-action {
    color: var(--sso-primary-button-color-hover);
    margin: 20px auto;
    font-size: 1rem
}

.login-pf-page #kc-page-title {
    text-align: left;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 8px;
    font-size: var(--sso-heading-font-size);
    line-height: 35px;
    color: var(--sso-font-color);
    border-bottom: 1px solid var(--sso-border-color);
}

#admicom-logo {
    height: 100%;
    max-width: 50%;
}

#client-logo img {
    display: block;
    margin: 0 auto 2rem auto;
}

.login-pf-page .login-pf-settings {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.login-pf .alert-error {
    border: none;
    border-radius: var(--sso-border-radius-sharp);
}

.pf-c-alert-group.pf-m-toast .pf-c-alert__title,
.pf-c-alert-group.pf-m-toast .pf-c-alert__icon,
.pf-c-alert-group.pf-m-toast .pf-c-button.pf-m-plain {
    color: var(--sso-button-bg-color);
}

.pf-c-alert-group.pf-m-toast .pf-c-alert, .alert-success, .alert-error, .alert-info, .alert-warning {
    border-radius: var(--sso-border-radius-sharp);
    padding: 16px;
    color: var(--sso-font-color);
    border: none;
    margin-bottom: 1rem;
}

.alert-info,
.pf-c-alert-group.pf-m-toast .pf-c-alert.pf-m-info {
    background-color: var(--sso-info-color);
}

.alert-success,
.pf-c-alert-group.pf-m-toast .pf-c-alert.pf-m-success {
    background-color: var(--sso-success-color);
}

.alert-warning,
.pf-c-alert-group.pf-m-toast .pf-c-alert.pf-m-warning {
    background-color: var(--sso-warn-color);
}

.alert-error,
.pf-c-alert-group.pf-m-toast .pf-c-alert.pf-m-error,
.pf-c-alert-group.pf-m-toast .pf-c-alert.pf-m-danger {
    background-color: var(--sso-error-color);
}

.kc-feedback-text, .pf-c-alert__icon > span {
    color: var(--sso-font-color);
}

.forgot-button a {
    font-size: 14px;
    text-decoration-line: underline;
    color: var(--sso-font-color);
}

#kc-attempted-username {
    color: var(--sso-font-color);
}

#kc-totp-settings, #kc-totp-settings li p {
    color: var(--sso-font-color);
    font-size: 1rem;
}

#kc-totp-settings, #kc-totp-settings > li {
    margin-bottom: 1.50rem;
}

#kc-totp-supported-apps li {
    margin-left: 0.5rem;
    list-style-type: circle;
}

#saveTOTPBtn {
    width: 100%;
    margin: 1rem 0;
}

#mode-barcode {
    color: var(--sso-accent-color)
}

.text-button, #modal-cancel, #cancel-btn, #kc-decline, #kc-form-buttons .btn-default {
    width: 100%;
    font-size: 1rem;
    text-decoration-line: underline;
    color: var(--sso-font-color);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.text-button:hover, #modal-cancel:hover, #kc-decline:hover, #kc-form-buttons .btn-default:hover {
    color: var(--sso-link-button-hover-color);
}

#mode-manual {
    color: var(--sso-accent-color);
}

#reset-login {
    color: var(--sso-accent-color);
}

#kc-form-options .checkbox {
    color: var(--sso-font-color);
}

#kc-form-options {
    text-align: center;
    margin-top: 1rem;
}

#info-box {
    color: var(--sso-font-color);
    text-align: left;
    font-size: 1rem;
}

.pf-c-alert__icon {
    color: var(--sso-accent-color);
}

#terms-accept-switch-container {
    margin: 1.5rem 0;
}

#terms-accept-switch-container .switch-label {
    margin-left: 1rem;
    color: var(--sso-font-color);
    font-size: 1rem;
}

#kc-accept {
    width: 100%;
}

#terms-link {
    color: var(--sso-accent-color);
}

.alert-info {
    border: none;
    border-radius: var(--sso-border-radius-sharp);
}

.pf-c-input-group {
    border: 1px solid var(--sso-input-border-color);
    border-radius: var(--sso-border-radius-sharp);
    background-color: var(--sso-bg-color);
}

.pf-c-input-group:hover {
    outline: none;
    border: 1px solid var(--sso-input-border-color-active);
    background-color: var(--sso-bg-color);
}

.pf-c-input-group:focus {
    border: 1px solid var(--sso-info-color);
    background-color: var(--sso-bg-color);
}

.pf-c-input-group > input:hover {
    outline: none;
    background-color: var(--sso-bg-color);
    border: 1px solid var(--sso-input-border-color-active);
}

#password, #password-new, #password-confirm {
    border: none;
}

#password:focus, #password-new:focus, #password-confirm:focus {
    border: 1px solid var(--sso-info-color);
}

.pf-c-input-group > input:focus, .pf-c-form-control:focus {
    outline: none;
    border: 1px solid var(--sso-info-color);
    border-radius: var(--sso-border-radius-sharp);
    background-color: var(--sso-bg-color);
}

.pf-c-input-group > .pf-c-form-control:hover {
    border: none;
}

.pf-c-input-group.pf-c-form-control {
    border: none;
}

.pf-c-form-control:hover {
    background-color: var(--sso-bg-color);
}

.pf-c-input-group > .pf-c-button.pf-m-control {
    background-color: var(--sso-bg-color);
    border: none;
}

.pf-c-input-group > .pf-c-button.pf-m-control:hover {
    border: none;
    background-color: var(--sso-bg-color);
}

.fa-eye, .fa-eye-slash {
    color: var(--sso-font-color);
}

/* PROFILE SPINNER SCREEN */
#spinner_screen {
    background-color: var(--sso-primary-color);
}

#spinner_screen p {
    color: var(--sso-font-color);
    font-size: 1.25rem;
}

/* Locale dropdown styles */
#kc-locale {
    background-color: var(--sso-dark-gray);
    height: 100%;
    width: var(--sso-dropdown-width);
    font-size: var(--sso-font-size);
    position: unset;
    border-radius: 4px;
}

#kc-locale:hover {
    background-color: var(--sso-secondary-color-hover);
}

#kc-locale ul {
    width: var(--sso-dropdown-width);
    min-width: var(--sso-dropdown-width);
    top: var(--sso-dropdown-y);
    left: var(--sso-dropdown-x);
    background-color: var(--sso-dark-gray);
}

#kc-locale-wrapper {
    width: 100%;
    height: 100%;
}

#kc-locale-dropdown {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--sso-locale-bg-color);
    border-radius: 4px;
    border: 1px solid var(--sso-input-border-color);
}

#kc-locale-dropdown:hover, #kc-locale-dropdown:hover #kc-current-locale-link {
    background-color: var(--sso-secondary-color-hover);
}

#kc-locale-dropdown a {
    font-size: var(--sso-font-size);
    color: var(--sso-font-color);
    text-align: center;
    background-color: var(--sso-locale-bg-color);
    font-weight: 700;
}

#kc-locale-dropdown a:hover {
    background-color: var(--sso-secondary-color-hover);
}

a#kc-current-locale-link {
    display: inline-flex;
    align-items: center;
    background-color: var(--sso-locale-bg-color);
}

a#kc-current-locale-link::after {
    content: "";
    background: url("../img/dropdown.svg") no-repeat center center;
    background-size: contain;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 5px;
}

/** BUTTON STYLES **/
.pf-c-button, #otp-set-up, .landing-site-button, #confirmOverride {
    color: var(--sso-primary-color);
    background: var(--sso-accent-color);
    border-radius: var(--sso-border-radius-sharp);
    line-height: 20px;
    padding: 8px 10px 8px 10px;
    font-size: var(--sso-font-size);
}

.pf-c-button.pf-m-secondary:hover {
    border: 1px solid var(--sso-bg-color);
    background-color: var(--sso-primary-button-color-hover);
}

.pf-c-button:after {
    border: none;
}

.pf-c-button:hover {
    border-radius: var(--sso-border-radius-sharp);
    border: 1px solid var(--sso-border-color);
}

.pf-c-button.pf-m-primary, .pf-c-button.pf-m-secondary {
    border-radius: var(--sso-border-radius-sharp);
    background: var(--sso-accent-color);
    border: 1px solid var(--sso-accent-color);
    color: var(--sso-primary-color);
    font-weight: 700;
    margin-bottom: 1rem;
    width: 100%;
    font-size: 0.75rem;
}

.pf-c-button.pf-m-secondary {
    margin: 0 auto;
}

.pf-c-button.btn-default {
    width: 100%;
}

.pf-c-button.pf-m-primary:disabled {
    opacity: 0.7;
}

.pf-c-button.pf-m-primary:hover, #otp-set-up:hover, .pf-c-button.pf-m-secondary:hover,
#confirmOverride:hover {
    background: var(--sso-accent-color-hover);
    border: 1px solid var(--sso-accent-color-hover);
}

.pf-c-button.pf-m-control {
    border-radius: var(--sso-border-radius-sharp);
    border: 1px solid var(--sso-input-border-color);
    background-color: #fff;
    color: var(--sso-font-color);
}

.pf-c-button.pf-m-control:hover {
    border-radius: var(--sso-border-radius-sharp);
    border: 1px solid var(--sso-border-color);
    background: var(--sso-primary-button-color-hover);
    color: var(--sso-primary-color);
}

.pf-c-form-control {
    border: 1px solid var(--sso-input-border-color);
    border-radius: var(--sso-border-radius-sharp);
    background-color: var(--sso-input-color);
    color: var(--sso-font-color);
}

.pf-c-form-control:hover {
    border: 1px solid var(--sso-input-border-color-active);
}

.pf-c-form-control[readonly] {
    color: var(--sso-primary-color);
}

.pf-c-form__label-text, .control-label {
    font-weight: 400;
    color: var(--sso-font-color);
    padding-bottom: 0.2rem;
    font-size: var(--sso-font-size);
}

.pf-c-page__header {
    min-height: 55px;
    height: 55px;
    border-bottom: 1px solid var(--sso-border-secondary-color);
}

#landingLoggedInUser {
    margin-right: 1rem;
}

#main_react_container .pf-c-page .pf-c-page__main {
    padding: 40px;
}

#page-sidebar {
    color: var(--sso-font-color);
    background-color: var(--sso-bg-color);
    border-right: 1px solid var(--sso-border-secondary-color);
}

.pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after {
    border-color: var(--sso-font-color);
}

#kc-form-buttons {
    margin-bottom: 4px;
}

#kc-info {
    margin: 1rem 0;
    width: 100%;
}

#kc-info-wrapper {
    background-color: var(--sso-font-color);
    border-radius: 4px;
}

/*** TERMS AND CONDITIONS ***/

#kc-terms-text p {
    color: var(--sso-font-color);
    font-size: var(--sso-font-size);
}

.required {
    color: var(--sso-warn-color);
}

.pw-checker {
    color: var(--sso-font-color);
    font-size: var(--sso-font-size);
    padding-left: 1.5rem;
    margin: 1rem 0 0;
}

.pw-checker li {
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.pw-checker i {
    font-size: 1.5rem;
    margin-right: 0.4rem;
    color: var(--sso-error-color);
}

.pw-checker > ul > li > span > span {
    opacity: 0.5;
}

/*** MODAL ***/
.pf-c-modal-box {
    background-color: var(--sso-bg-color);
    color: var(--sso-font-color);
}

.pf-c-modal-box .pf-m-plain {
    color: var(--sso-button-bg-color);
}

.pf-c-modal-box__footer {
    display: block;
}

/*** DIVIDER ***/
.text-divider {
    color: var(--sso-font-color);
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    gap: 15px;
    font-weight: 500;
}

.text-divider:after, .text-divider:before {
    content: '';
    height: 1px;
    background-color: var(--sso-border-color);
    flex-grow: 1;
}

/*** FONTS ***/
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope.woff2") format("woff2");
}

/*** ICON REPLACEMENTS ***/
.fa-windows:before {
    content: url("../img/microsoft-logo.svg");
}

.fa-google:before {
    content: url("../img/google-logo.svg");
}

.pf-c-nav__item {
    margin: 10px 15px;
    border-radius: 8px;
}

.pf-c-nav__link::before {
    border: none;
}

.pf-c-nav__link {
    margin: 1px;
    border: none;
    padding: 10px;
    border-radius: 8px;
}

.pf-c-nav__link.pf-m-current::after {
    border: none;
    margin: 10px;
    padding: 1px;
}

#google-idp .pf-m-fill:has(> #google-idp-label),
#microsoft-entra-idp .pf-m-fill:has(> #microsoft-entra-idp-label) {
    display: none;
}

#kc-content-wrapper #kc-delete-text {
    font-size: 0.9rem;
    color: var(--sso-font-color);
    margin-bottom: 1rem;
}

/* IDP override */
#override-idp-cancel-box {
    margin: 10px 0;
}

#override-idp-cancel-helper {
    color: var(--sso-font-color);
    font-size: 0.9rem;
}

#forgot-password-text a {
    color: #A1A1AA;
    font-size: var(--sso-font-size);
    text-decoration: underline;
}

#password-label-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px
}

.login-has-changed-wrapper {
    font-size: 1rem;
    font-weight: 500;
    color: var(--sso-font-color);
    margin-bottom: 12px;
}


.kc-social-provider-name, #kc-social-providers .return-to-old-login-button {
    font-weight: 700;
    font-size: 0.75rem;
    color: #151515;
}

#kc-social-providers .return-to-old-login-button:hover {
    background-color: var(--sso-primary-button-color-hover);
}

@media (max-width: 767px) {
    .sso-content-wrapper {
        padding: 10px 20px;
    }

    .login-has-changed-wrapper {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--sso-font-color);
        margin-bottom: 12px;
    }

    .login-pf-page #kc-page-title {
        font-size: 1.2rem;
    }
}