@font-face {
    font-family: 'Montserrat';
    src: url('/Assets/fonts/montserrat-regular.ttf') format('truetype'),
         url('/Assets/fonts/montserrat-bold.ttf') format('truetype');
}

html, body {
    height: 100dvh;
}

body {
    margin: 0px;
    line-height: normal;
}

a {
    text-decoration: none !important;
    user-select: none;
}

.content {
    width: 100%;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 13px;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    min-height: 100%;
    background: url('/Assets/images/bg-login-pattern.png');
}

@keyframes spinnerRotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.spinner {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 6px solid #e2e2e2;
    border-top-color: #3a3a3a;
    animation: spinnerRotation 1s infinite linear;
    margin: 0 auto;
}

.btn.focus, .btn:focus {
    box-shadow: none;
}

.defaultCard-container {
    display: flex;
    flex-direction: column;
    font-family: Montserrat, 'Lucida Grande', sans-serif;
}

.defaultCard-formContainer {
    width: 100%;    
    padding: 54px 0;
}

.login .defaultCard-formContainer {
    padding-bottom: 0;
}

.login .login-forgot-link {
    padding-bottom: 54px;
}

.defaultCard-form {
    width: 310px;
    max-width: 100%;
    background-color: rgb(249, 249, 249);
    margin: 0px auto;
    border-radius: 5px;
}

.defaultCard-form-header {
    padding: 40px 25px 25px;
    border-bottom: 1px solid #e8e8e8;
}

.defaultCard-form-title {
    margin-top: 25px;
    font-size: 18px;
    color: #5a5a5a;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.defaultCard-form-logo img {
    display: block;
    width: 94px;
    margin: 0 auto;
}

.defaultCard-inputWrapper {
    position: relative;
}

.defaultCard-inputWrapper:not(:last-of-type) {
    margin-bottom: 15px;
}

.defaultCard-inputIcon {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 1;
}

.defaultCard-inputIcon svg {
    fill: #a6a6a6;
    width: 21px;
    height: 21px;
}

.defaultCard-input {
    background-color: #333333;
    width: 100%;
    height: 44px;
    margin: 0 auto;
    padding-left: 40px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #ffffff;
    border: 0;
}

.defaultCard-input-dropdownContainer {
    background-color: #333333;
    width: 100%;
    height: 44px;
    margin: 0 auto;
    border-radius: 5px;
}

.defaultCard-input-dropdownContainer .dropdown-toggle::after {
    position: absolute;
    top: 20px;
    right: 20px;
}

.defaultCard-input-dropdownContainer > .dropdown-menu {
    width: 100%;
    background-color: #333333;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.defaultCard-input-dropdownContainer > .dropdown-menu > .dropdown-item {
    color: #ffffff;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
}

.defaultCard-input-dropdownContainer > .dropdown-menu > .dropdown-item:hover {
    color: #363636;
    background-color: #eeba51;
}

.defaultCard-input-dropdown {
    background-color: transparent;
    width: 100%;
    height: 100%;
    padding-left: 40px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #ffffff;
    text-align: left;
    border: 0;
    text-transform: uppercase;
}

.defaultCard-input-dropdown-content {
    display: flex;
    align-items: center;
}

.defaultCard-input-dropdown-content .spinner {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    display: none;
}

.defaultCard-input-dropdown-text {
    flex: 1 1 auto;
}

.defaultCard-form-content {
    position: relative;
    margin: 0 auto;
    padding: 15px 25px 20px 25px;
    box-shadow: 0 10px 16px -8px rgba(68, 68, 68, 0.2);
}

.defaultCard-input::-webkit-input-placeholder {
    color: #ffffff;
    text-transform: uppercase;
}

.defaultCard-input:-moz-placeholder {
    color: #ffffff;
    text-transform: uppercase;
}

.defaultCard-input::-moz-placeholder {
    color: #ffffff;
    text-transform: uppercase;
}

.defaultCard-input:-ms-input-placeholder {
    color: #ffffff;
    text-transform: uppercase;
}

.defaultCard-input:disabled {
    opacity: 0.7;
}

.defaultCard-confirmButton {
    display: block;
    width: 100%;
    height: 65px;
    background-color: var(--SecondaryPaletteColor);
    border-radius: 0 0 5px 5px;
    color: var(--OnSurfaceVariant);
    font-size: 17px;
    line-height: 65px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border: 0;
}

.defaultCard-confirmButton:disabled {
    opacity: 0.7;
    cursor: default;
}

.defaultCard-form-error {
    display: flex;
    align-items: center;
    margin: -15px 0 15px;
    color: #c82626;
    padding-top: 15px;
}

.defaultCard-form-error-message {
    margin-left: 5px;
}

.login-languageSwitcher {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.login-languageSwitcher-menu {
    padding: 0 20px 0 0;
}

.login-languageSwitcher-button {
    font-size: 8px;
    color: var(--SecondaryContainer);
    text-transform: uppercase;
    padding: 0 20px;
    background: none;
    border: none;
    height: 54px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.login-languageSwitcher-menu .dropdown button:not(:disabled):active {
    color: var(--SecondaryContainer);
    background: none;
    border: none;
}

.login-languageSwitcher-menu .dropdown-toggle::after {
    display: none;
}

.login-languageSwitcher-dropDownArrow svg {
    fill: var(--SecondaryContainer);
    margin: 0 0 0 15px;
}

.login-languageSwitcher-menu .dropdown-menu {
    border-radius: 0;
    color: #444444;
    font-size: 8px;
    padding: 0;
    min-width: unset;
    width: 130px;
    top: -5px !important;
}

.login-languageSwitcher-menu .dropdown-menu .dropdown-item {
    text-transform: uppercase;
    cursor: pointer;
    padding: 9px 12px;
}

.login-languageSwitcher-menu .dropdown-menu .dropdown-item:hover {
    background: var(--SurfaceContainerHighest);
    color: var(--SecondaryContainer);
}

.login-languageSwitcher-menu .dropdown-menu .dropdown-item.active,
.login-languageSwitcher-menu .dropdown-menu .dropdown-item:active {
    background: var(--SurfaceContainerHigh);
    color: var(--SecondaryContainer);
}

.login-form-avatar {
    display: block;
    width: 87px;
    margin: 0 auto;
    padding-top: 15px;
}

.login-form-label {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
    padding: 10px 0 !important;
}

.login-form-providers {

}

.login-form-providers-title {
    text-align: center;
    padding-bottom: 10px;
    color: #a6a6a6;
}

.login-form-providers-container > a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 10px;
    position: relative;
    color: #3a3a3a;
    font-weight: bold;
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s ease 0s;
}

.login-form-providers-container > a:hover,
.login-form-providers-container > a:focus {
    color: #3a3a3a;
    background-color: #ffffff;
    border-color: rgba(58, 58, 58, 0.3);
}

.login-form-providers-container > a:focus {
    outline: none;
}

.login-form-providers-container > a:active {
    opacity: 0.5;
    box-shadow: none;
}

.login-form-providers-container > a:not(:last-child) {
    margin-bottom: 5px;
}

.login-form-provider-image {
    width: 16px;
    height: 16px;
    vertical-align: bottom;
}

.login-form-provider-text {
    font-size: 14px;
    padding-left: 5px;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.login-form-providers-separator::before {
    margin-right: 1em;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    content: '';
    flex: 0 1 auto;
    width: 100%;
    height: 2px;
    background: #e2e2e2;
}

.login-form-providers-separator {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font: 600 12px;
    color: #3a3a3a;
    width: 100%;
    color: #a6a6a6;
    text-transform: uppercase;
    margin-top: 10px
}

.login-form-providers-separator::after {
    margin-left: 1em;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    content: '';
    flex: 0 1 auto;
    width: 100%;
    height: 2px;
    background: #e2e2e2;
}

.login-form-remember{
    display: block;
    font-size: 10px;
    color: #717171;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 0;
}

.login-form-checkbox {
    margin-right: 6px;
    vertical-align: bottom;
}

.login-forgot-link {
    cursor: pointer;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
}

.login-forgot-link > a {
    color: var(--SecondaryContainer);
}

.login-forgot-sync {
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
}

.login-forgot-sync > button {
    color: var(--SecondaryContainer);
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.login-forgot-sync > button:focus {
    outline: none;
}

.login-form-syncLabel {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
}

.error {
    width: 100%;
    padding: 54px 0;
}

.error-header {
    padding: 40px 25px 25px;
}

.error-logo img {
    display: block;
    width: 94px;
    margin: 0 auto;
}

.error-content {
    width: 310px;
    font-family: Montserrat, 'Lucida Grande', sans-serif;
    background-color: rgb(249, 249, 249);
    margin: 0 auto;
    border-radius: 5px;
}

.error-title {
    margin-top: 25px;
    font-size: 18px;
    color: #5a5a5a;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.error-message {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
    padding-top: 20px;
}

.error-backToHome,
.about-backToHome {
    display: block;
    width: 100%;
    height: 65px;
    background-color: var(--SecondaryPaletteColor);
    border-radius: 0 0 5px 5px;
    color: #ffffff;
    font-size: 17px;
    line-height: 65px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border: 0;
}

.error-backToHome:hover,
.error-backToHome:visited,
.about-backToHome:hover,
.about-backToHome:visited {
    color: #ffffff;
}

.setup .defaultCard-form,
.setupSyncProfile .defaultCard-form,
.setupSyncUser .defaultCard-form {
    width: 500px;
}

.setupSyncUser-info {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
}

.about {
    overflow: auto;
    height: 100%;
}

.about-info {
    text-align: center;
}

.about-info:not(:last-child) {
    margin-bottom: 5px;
}

.about-info-label {
    font-weight: bold;
}

.oAuth2Consent-application {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
}

.oAuth2Consent-applicationName {
    font-weight: bold;
    color: #5a5a5a;
}

.oAuth2Consent-scopes {
    font-size: 13px;
    color: #5a5a5a;
    letter-spacing: 1px;
    margin-top: 20px;
}

.oAuth2Consent-scopes ul {    
    list-style: none;
    padding-left: 20px;
    margin-right: 20px;
}

.oAuth2Consent-scopes li {
    display: flex;
    align-items: center;
}

.oAuth2Consent-scopes li span {
    margin-left: 15px;
}

.oAuth2Consent-scopes li svg {
    fill: #5a5a5a;
}

.oAuth2Consent-scopes li:not(:last-child) {
    margin-bottom: 10px;
}

.oAuth2Consent-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}

.oAuth2Consent-avatar img {
    width: 50px;
    display: block;
    border-radius: 50%;
}

.oAuth2Consent-avatar div {
    margin-top: 5px;
    color: #5a5a5a;
    font-size: 12px;
}

.oAuth2Consent-buttonContainer {
    display: flex;
}

.oAuth2Consent-button {
    width: 100%;
    height: 100%;

    color: #ffffff;
    cursor: pointer;
    border: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 17px;
    line-height: 65px;
    height: 65px;
    padding: 0;
}

.oAuth2Consent-button-allow {
    border-radius: 0 0 5px 0px;
    background-color: var(--SecondaryPaletteColor);
}

.oAuth2Consent-button-deny {
    border-radius: 0 0 0px 5px;
    background-color: #a6a6a6;
}

.modal {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
}

.modal .modal-content {
    border: none;
    border-radius: 5px;
    color: #3a3a3a;
    background-color: #ffffff;
}

.modal .modal-header {
    color: #444444;
    background-color: #e6e6e6;
    padding: 8px 12px;
    border-width: 0 0 1px;
    border-style: solid;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    min-height: 16px;
}

.modal .modal-title {
    left: 0.44em;
    right: 4em;
    font-size: 1.2em;
    line-height: 1.25;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: default;
}

.modal .modal-body {
    margin: 0;
    color: #3a3a3a;
    padding: 8px 8px 0px 8px;
}

.modal .modal-footer {
    border: 0;
    flex: 0 0 auto;
    margin: 5px 0;
    text-align: right;
    display: block;
    padding: 5px 20px;
    position: relative;
}

.modal .modal-footer button {
    position: relative;
    padding: 5px 10px;
    color: #3a3a3a;
    font-weight: bold;
    background-color: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s ease 0s;
    min-width: 30px;
    font-size: 13.3333px;
}

.modal .modal-footer button:hover:not(.innovaButton-disabled),
.modal .modal-footer button:focus:not(.active):not(.innovaButton-disabled) {
    color: #3a3a3a;
    background-color: #ffffff;
    border-color: rgba(58, 58, 58, 0.3);
}

.modal .modal-footer button:focus {
    outline: none;
    background-color: #ffffff !important;
    border-color: rgba(58, 58, 58, 0.3) !important;
    box-shadow: none;
}

.modal .modal-footer button:active {
    opacity: 0.5;
    box-shadow: none;
    background-color: #ffffff !important;
    border-color: rgba(58, 58, 58, 0.3) !important;
}

.forgotPasswordFormContainer {
    width: 100%;
    padding: 54px 0;
    font-family: Montserrat, 'Lucida Grande', sans-serif;
}

.forgotPasswordFormContainer input::placeholder {
    color: #ffffff;
}

.forgotPasswordForm {
    width: 310px;
    background-color: rgb(249, 249, 249);
    margin: 0px auto;
    border-radius: 5px;
}

.forgotPasswordForm-header {
    padding: 40px 25px 25px;
    border-bottom: 1px solid #e8e8e8;
}

.forgotPasswordForm-logo img {
    display: block;
    width: 94px;
    margin: 0 auto;
}

.forgotPasswordForm-content {
    position: relative;
    margin: 0 auto;
    padding: 15px 25px 20px 25px;
    box-shadow: 0 10px 16px -8px rgba(68, 68, 68, 0.2);
}

.forgotPasswordForm-forgotPasswordLabel {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
    padding: 10px 0 !important;
}

.forgotPassword-inputWrapper {
    position: relative;
    margin-bottom: 15px;
}

.forgotPassword-emailIcon {
    position: absolute;
    top: 12px;
    left: 10px;
}

.forgotPassword-emailIcon svg {
    fill: #a6a6a6;
}

.forgotPasswordForm-emailInput {
    background-color: #333333;
    width: 100%;
    height: 44px;
    margin: 0 auto;
    padding-left: 40px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #ffffff;
}

.forgotPasswordForm-emailInput:disabled {
    opacity: 0.7;
}

.forgotPassword-resetButton {
    display: block;
    width: 100%;
    height: 65px;
    background-color: var(--SecondaryPaletteColor);
    border-radius: 0 0 5px 5px;
    color: #ffffff;
    font-size: 17px;
    line-height: 65px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border: 0;
}

.forgotPassword-resetButton:disabled {
    opacity: 0.7;
    cursor: default;
}

.resetPasswordFormContainer {
    width: 100%;
    padding-top: 54px;
    font-family: Montserrat, 'Lucida Grande', sans-serif;
}

.resetPasswordFormContainer input::placeholder {
    color: #ffffff;
}

.resetPasswordForm {
    width: 310px;
    background-color: rgb(249, 249, 249);
    margin: 0px auto;
    border-radius: 5px;
}

.resetPasswordForm-header {
    padding: 40px 25px 25px;
    border-bottom: 1px solid #e8e8e8;
}

.resetPasswordForm-logo img {
    display: block;
    width: 94px;
    margin: 0 auto;
}

.resetPasswordForm-content {
    position: relative;
    margin: 0 auto;
    padding: 15px 25px 20px 25px;
    box-shadow: 0 10px 16px -8px rgba(68, 68, 68, 0.2);
}

.resetPasswordForm-resetLabel {
    font-size: 12px;
    color: #a6a6a6;
    text-align: center;
    letter-spacing: 1px;
    padding: 10px 0 !important;
}

.resetPassword-inputWrapper {
    position: relative;
    margin-bottom: 15px;
}

.resetPassword-inputIcon {
    position: absolute;
    top: 12px;
    left: 10px;
}

.resetPassword-inputIcon svg {
    fill: #a6a6a6;
}

.resetPassword-input {
    background-color: #333333;
    width: 100%;
    height: 44px;
    margin: 0 auto;
    padding-left: 40px;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 2px;
    color: #ffffff;
}

.resetPassword-input:disabled {
    opacity: 0.7;
}

.resetPassword-resetButton {
    display: block;
    width: 100%;
    height: 65px;
    background-color: var(--SecondaryPaletteColor);
    border-radius: 0 0 5px 5px;
    color: #ffffff;
    font-size: 17px;
    line-height: 65px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    border: 0;
}

.resetPassword-resetButton:disabled {
    opacity: 0.7;
    cursor: default;
}

@media screen and (max-width: 767px) {
    .defaultCard-formContainer,
    .error,
    .forgotPasswordFormContainer {
        padding: 20px 0;
    }

    .resetPasswordFormContainer {
        padding-top: 20px;
    }

    .login .defaultCard-formContainer {
        padding-top: 0;
    }
}