@import "../../general/cssVariables.css";
:root {
    --color-3:#F7665D;
}
.tvx-spinner-large {
    width:80px;
    height:80px;
    align-self:center;
}
form {
    display:flex;
    flex-direction:column;
    flex-grow:1;
}
.login-container {
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:var(--app-white);
    height:100vh;
}
.login-box-container {
    font-family:var(--app-font-medium);
    display:flex;
    flex-direction:column;
    width:440px;
    height:512px;
    min-height:476px;
    font-size:14px;
    font-style:normal;
    font-stretch:normal;
    line-height:1.8;
    letter-spacing:normal;
    color:var(--app-dark-grey);
}
.login-box-content {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}
.login-component {
    display:flex;
    width:100%;
    height:auto;
    margin:12px 0;
}
.login-component hr {
    width:100%;
    margin:0;
}
.login-password-component { margin-bottom:0; }
.login-template-container {
    display:flex;
    flex-direction:column;
    flex-grow:1;
}
.login-button-container {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}
.login-logo {
    margin-top:0;
    margin-bottom:8px;
}
.login-logo img { max-height:26px; }
.signin-label {
    font-family:var(--app-font-bold);
    height:19px;
    font-size:16px;
    font-style:normal;
    font-stretch:normal;
    line-height:normal;
    letter-spacing:normal;
    color:var(--app-dark-grey);
}
.create-password-label-container { margin-bottom:8px; }
.login-label { margin:0 0 12px 0; }
.signin-external-component {
    display:flex;
    flex-direction:column;
    width:100%;
}
.signin-external-button {
    background-color:var(--app-white);
    font-family:var(--app-font-regular);
    width:100%;
    text-transform:none;
    height:41px;
    line-height:41px;
    color:var(--app-mid-grey);
    padding:0 27px 0 12px;
    margin-top:12px;
}
.signin-external-button:hover { background-color:var(--app-white); }
.signin-external-logo {
    height:100%;
    vertical-align:middle;
}
.spacing-6 { margin-top:6px; }
.signin-main-form-login {
    display:flex;
    flex-direction:column;
    width:100%;
}
.login-error-msg {
    width:100%;
    font-family:var(--app-font-medium);
    font-size:12px;
    font-style:normal;
    font-stretch:normal;
    line-height:normal;
    letter-spacing:normal;
    color:var(--color-3);
}
.login-error-msg p { margin:0; }
.login-no-auth-error { margin-top:12px; }
.login-component.login-light-text {
    font-family:var(--app-font-regular);
    margin-top:8px;
    margin-bottom:6px;
}
.login-component.password-created-text {
    font-family:var(--app-font-regular);
    margin-top:8px;
    margin-bottom:12px;
}
[class^='login-button-'] {
    font-family:var(--app-font-medium);
    width:140px;
    height:36px;
    border-radius:18px;
    background-color:var(--app-main-color);
    border-style:none;
    font-size:12px;
    font-style:normal;
    font-stretch:normal;
    line-height:normal;
    letter-spacing:normal;
    text-align:center;
    color:var(--app-white);
    cursor:pointer;
}
[class^='login-button-']:disabled { background-color:var(--app-light-grey); }
[class^='login-button-']:disabled:hover { cursor:default; }
[class^='login-button-'][class*='-standard'] { width:140px; }
[class^='login-button-'][class*='-full'] { width:100%; }
[class^='login-button-'][class*='-keycloak'] {
    width:100%;
    display: block;
    line-height: 36px;
    font-size: 13px;
}
[class^='login-button-'][class*='-full-outline'] {
    background-color:var(--app-white);
    color:var(--app-main-color);
    border:1px solid var(--app-main-color);
    width:100%;
}
[class^='login-button-'][class*='-full-outline']:hover { background-color:#ECECEC; }
button:focus {
    outline:none;
    background-color:var(--app-main-color);
}
[class^='login-button-'][class*='-etisalat'] {
    background-color:red;
}
.signin-fake-link {
    font-family:var(--app-font-medium);
    cursor:pointer;
    color:var(--app-main-color);
    font-size:14px;
    font-style:normal;
    font-stretch:normal;
    line-height:normal;
    letter-spacing:normal;
}
.login-bottom-bar {
    display:flex;
    flex-direction:column;
    font-size:13px;
}
.login-bottom-bar hr { margin:0 0 7px 0; }
hr {
    background-color:var(--app-ornament);
    color:var(--app-ornament);
    border:none;
    height:1px;
}
.login-bottom-bar-language-bar {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:baseline;
}
.login-bottom-bar-language-bar >.language-select >select {
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
}
.language-select { margin:0; }
.login-bottom-bar-register-help {
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    flex-grow:1;
    height:100%;
    align-items:center;
    margin:0;
}
.login-bottom-bar-register-help >.help-link {
    margin-left:30px;
    color:var(--app-mid-grey);
}
.register-link a {
    color:var(--app-main-color);
    text-decoration:none;
}
.login-input-field:-webkit-autofill {
    -webkit-box-shadow:0 0 0 24px white inset !important;
    background-color:var(--app-white) !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill:hover {
    -webkit-box-shadow:0 0 0 24px white inset !important;
    background-color:var(--app-white) !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill:hover+label {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 24px white inset !important;
    background-color:var(--app-white) !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill:focus+label {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill:active {
    -webkit-box-shadow:0 0 0 24px white inset !important;
    background-color:var(--app-white) !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill:active+label {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.login-input-field:-webkit-autofill+label {
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
    transition:none !important;
}
.input-field >input[type=text].login-input-field {
    font-family:var(--app-font-regular);
    height:48px;
    width:100%;
    font-size:16px !important;
    font-style:normal !important;
    font-stretch:normal !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    color:var(--app-dark-grey);
    padding:0 8px;
    box-sizing:border-box;
}
.input-field >input[type=password].login-input-field {
    font-family:var(--app-font-regular);
    height:48px;
    width:100%;
    font-size:16px !important;
    font-style:normal !important;
    font-stretch:normal !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    color:var(--app-dark-grey);
    padding:0 8px;
    box-sizing:border-box;
}
.input-field >input[type=password].login-input-field >label { font-family:var(--app-font-regular); }
.login-inputs {
    display:flex;
    flex-direction:column;
}
h2 {
    margin:0 0 0 0;
    font-weight:normal;
}
@media screen and (max-width: 600px) {
    .login-container {
        height:calc(52vh);
        height:calc(var(--vh) * 100 - 48px);
        padding:24px;
        align-items:flex-start;
    }
    .login-container >.login-box-container { height:100%; }
    .login-box-container { width:100%; }
    .login-box-content { padding:0; }
    .input-field >input.login-input-field { font-size:16px; }
    .sign-in-content-form { align-items:center; }
    .login-bottom-bar-language-bar >.input-field.language-select { margin:0; }
}
.input-field {
    height:48px;
    margin:8px 0px 4px 0px;
}
.input-field input[type=text], .input-field input[type=password] {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding-left:8px;
    border-radius:4px;
    border:1px solid #d7dadb !important;
    color:black;
    box-shadow:none;
}
.input-field input[type=text]:focus, .input-field input[type=password]:focus {
    border-color:var(--app-main-color) !important;
    border-width:1px;
    color:black !important;
    box-shadow:none;
}
.input-field input[type=text]:not(.browser-default):focus:not([readonly]) { box-shadow:none; }
input[type=text]:not(.browser-default) { margin:0 !important; }
.input-field > label:not(.label-icon), .input-field > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label {
    margin-left:7px;
    margin-top:4px;
    color:rgba(0,0,0,0.54);
    width:auto;
    background-color:white;
}
.password-confirm-input-field { margin-top:24px !important; }
@-moz-document url-prefix() {
    .input-field > label:not(.label-icon).active {
        margin-left:7px;
        margin-top:4px;
        color:rgba(0,0,0,0.54);
        width:auto;
        background-color:white;
    }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .input-field > label:not(.label-icon).active {
        margin-left:7px;
        margin-top:4px;
        color:rgba(0,0,0,0.54);
        width:auto;
        background-color:white;
    }
}
input[type=password].no-transition + label, input[type=text].no-transition + label {
    -webkit-transition:none;
    -moz-transition:none;
    -ms-transition:none;
    -o-transition:none;
    transition:none;
}
.input-field input[type=text].ng-empty:not(:focus) + label, .input-field input[type=password].ng-empty:not(:focus) + label {
    margin-left:11px;
    transform:translateY(8px);
    -webkit-transform:translateY(8px);
    -moz-transform:translateY(8px);
    -ms-transform:translateY(8px);
    -o-transform:translateY(8px);
}
input[data-com-onepassword-filled="dark"], input[data-com-onepassword-filled="light"] { background-color:white !important; }
.input-field input[type=text]:focus + label { color:var(--app-main-color) !important; }
.input-field input[type=password]:not(.browser-default):focus:not([readonly]) + label { color:var(--app-main-color) !important; }
.input-field input[type=text].ng-invalid, .input-field input[type=password].ng-invalid { border-color:#F7665D !important; }
.input-field input[type=text].ng-invalid:not(.browser-default):not([readonly]) + label, .input-field input[type=text].ng-invalid:not(.browser-default):focus:not([readonly]) + label { color:#F7665D !important; }
.input-field input[type=password].ng-invalid:not(.browser-default):not([readonly]) + label, .input-field input[type=password].ng-invalid:not(.browser-default):focus:not([readonly]) + label { color:#F7665D !important; }
.input-field input[type=text]:focus, .input-field input[type=password]:focus { box-shadow:none; }
.input-field:not(.-webkit-autofill) input[type=text]:focus, .input-field:not(.-webkit-autofill) input[type=password]:focus { box-shadow:none; }
select, select:focus {
    display:inline-block !important;
    height:33px;
    border:none;
    outline:none;
    padding:0px;
    width:86px;
    font-family:Roboto-Regular, Helvetica, Arial, sans-serif;
    font-size:14px !important;
    font-style:normal !important;
    font-stretch:normal !important;
    line-height:normal !important;
    letter-spacing:normal !important;
    color:#727272;
}

/* custom css styles for some customers
    the custom class must be the domain name concatenated to domain
    example: telavox.com = telavoxcom
 */

.erizon-voipcom .login-logo img {
     max-height: 36px !important;
 }

.mycloudphonefr .login-logo img {
    max-height: 36px !important;
}

.telavoxcom div[class^="tvx-spinner-"] {
    background: url("/img/spinner-branded.svg") no-repeat center;
}

.clarope .login-logo img {
    max-height: 36px !important;
    max-width: 440px;
}

.korianone .login-logo img {
    max-height: 36px !important;
}

div[class^="tvx-spinner-"] {
    background: url("/img/spinner-branded.svg") no-repeat center;
}

.login-button-container .goback-button .MuiSvgIcon-root {
    background-color: var(--app-background-color);
    color: #0e0e0e;
    border-radius: 50%;
    padding: 3px;
    cursor:pointer;
    width: 24px;
    height: 24px;
}
.sign-in-reset-password-options {
    display: flex;
    flex-direction: column;
}
.sign-in-reset-password-option-button {
    width: 90% !important;
    margin-bottom: 15px;
}