/* #root .mobile .beto-login .generic-form .form-row label[for="username_l"],
#root .mobile .beto-login .generic-form .form-row label[for="password_l"] { */
#root .beto-login .generic-form .form-row label[for="username_l"],
#root .beto-login .generic-form .form-row label[for="password_l"] {
    background: unset !important;
    width: 100%;
    color: var(--c-black-text);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background-color: var(--c-white-permatext);
}

#root .beto-login .generic-form .form-row label {
    color: var(--c-black-text);
}

#root .view-page-forgotpassword select {
    height: 37px;
    border-radius: 10px;
    border: none;
    box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.15);
    -webkit-appearance: none;
    color: rgb(170, 170, 170);
}

#root .view-page-forgotpassword select:not(:first-child) {
    margin-left: 10px;
}

#root .view-page-forgotpassword .generic-form .form-row input,
#root .beto-login .generic-form .form-row input:not([type="checkbox"]) {
    padding-left: 0;
    margin-top: 10px;
    width: 100%;
    height: 52px;
    background-color: var(--c-white-permatext) !important;
    border-radius: 10px;
    border: none;
    box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.15);
    /* color: var(--c-black-text) !important; */
    color: var(--c-black-text);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    -webkit-appearance: none;
}

#root .view-page-forgotpassword .generic-form .form-row input {
    height: 40px;
    margin-top: 0;
}

/* #root .view-page-forgotpassword .generic-form .form-row input.ng-invalid {
    border-style: solid;
    border-width: 1px;
    border-color: var(--c-red);
} */

#root .beto-login .generic-form .form-row input:empty {
    color: rgba(0, 0, 0, 0.20);
}

#root .view-page-forgotpassword .generic-form .form-row input:focus,
#root .beto-login .generic-form .form-row input:focus {
    color: var(--c-black-text);
    border: 1px solid var(--c-green);
    background-color: var(--c-white-permatext) !important;
}

/* #root .beto-login .generic-form .form-row input:invalid {
    color: #F00;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: 1px solid #F00;
} */

#root .ui-dialog.login-modal .ui-dialog-titlebar {
    display: none;
}

#root .button-submit-login {
    /* width: 101px; */
    max-width:360px;
    width:100%!important;
    height:auto!Important;
    min-height: 41px;
    border-radius: 13px;
    background-color: var(--c-green);
    box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 18px;
    font-weight: 700;
    font-size: 15px;
}

/* #root .register-button .register-link {
    background-color: unset;
    color: var(--c-black-text);
    font-size: 15px;
    font-weight: normal;
} */
#root .register-button .register-link {
    max-width:360px;
    min-height: 41px;
    border-radius: 13px;
    background-color: var(--c-emphasis);
    /* border: solid 1px #444444; */
    font-size: 15px;
    font-weight: 700;
    color: var(--c-black-text);
    margin-bottom: 55px;
    color:var(--c-white-permatext);
    margin-top:0;
}

#root .login-form ui-button {
    /* margin-top: 54px; */
}

#root .login-form ui-button,
#root .forgot-password-block {
    text-align: center;
}

#root .forgot-password-block {
    color: var(--c-black-text);
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
   
}
#root .forgot-password-block .forgot-password-link {
     text-decoration: underline;
}
#root .loginwelcome-wrapper {
    color: var(--c-emphasis);
    font-family: Roboto;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--c-emphasis);
}

#root .login-block {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

#root .mobile.view-page-login .padding,
#root .mobile.view-page-test-login .padding{
    padding: 0;
    border-top-left-radius: 34px;
    border-top-right-radius: 34px;
    background-color: var(--c-paper);
    /* min-height: calc(100vh - 54px) !important; */
}

#root .view-page-forgotpassword .padding {
    border-radius: 34px;
    background-color: var(--c-paper);
}

#root .view-page-forgotpassword .generic-form .form-row label {
    background: unset !important;
    width: 100%;
    color: var(--c-black-text);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 7px;
}

/* #root .mobile.view-page-forgotpassword,
#root .mobile.view-page-login,
#root .mobile.view-page-register,
#root .mobile.view-page-match,
#root .mobile.view-page-live-match {} */

#root .mobile.view-page-login {
    background-color: var(--c-background);
}

#root .mobile .generic-form.login-form .form-element-error {
    color: var(--c-red);
    background-color: unset;
}

#root .desktop .header .login .form-row:last-child .form-element-error .clear-login-error,
#root .mobile .generic-form.login-form .form-element-error .clear-login-error {
    background-image: url(/v1.042/r/images/site/icons/CloseBlack.svg);
    background-color: unset;
}

#root .view-page-login .closebutton-wrapper {
    width: 100%;
    height: 32px;
}

#root .view-page-forgotpassword .closebutton-wrapper {
    width: 100%;
    height: 32px;
    margin-top: 30px;
}

#root .view-page-login .closebutton-wrapper app-widget-host,
#root .view-page-test-login .closebutton-wrapper app-widget-host,
#root .view-page-forgotpassword .closebutton-wrapper app-widget-host {
    align-items: center;
    width: 100%;
    height: 32px;
}
#root .view-page-login .closebutton-wrapper app-widget-host,
#root .view-page-test-login .closebutton-wrapper app-widget-host {
    align-items:flex-end
}
#root .view-page-login .closebutton,
#root .view-page-test-login .closebutton,
#root .view-page-forgotpassword .closebutton {
    width: 32px;
    height: 32px;
    background-image: url(/v1.042/r/images/site/icons/CloseBlack.svg);
    background-repeat: no-repeat;
}

#root .desktop.view-page-forgotpassword .user-page-content .button-submit-forgot-password {
    width: 164px;
    height: 55px;
    border-radius: 13px;
    background-color: var(--c-green);
    box-shadow: 2px 4px 10px 0 rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
}

#root .desktop.view-page-forgotpassword .user-page-header {
    display: none;
}

#root .desktop.view-page-forgotpassword .forgot-password-block {
    max-width: 500px;
}

#root .desktop.view-page-forgotpassword .content.user-page-content app-widget-host {
    align-items: center;
}

#root .beto-login .generic-form .form-row label {
    top: 7px;
    left:24px;
    position: unset;
    height: auto;
    text-indent:10px;
    width: unset;
}

#root .mobile.view-page-register .body>app-widget-host,
#root .mobile.view-page-login .body>app-widget-host {
    /* height: 100vh; */
}

#root .register-button .register-link div {
    line-height: 1;
}

#root .forgot-password-block .forgot-password-form ui-button {
    margin-top: 15px;
}
#root .login-form-block > app-widget-host {
    padding:17px;
}
#root .login-form,
#root app-login-form{
    display:contents;
}
#root app-login-form .form-row {
    /* padding:0 17px; */
    order:0;
}
#root app-login-form .form-row.error-row {
    order:2
}
#root .desktop app-login-form .form-row {
    flex-direction:column;
}
#root .login-form-block {
    display:flex
}
#root .login-form-block > app-widget-host {
    flex-direction:row;
    flex-wrap:wrap;
}
#root .login-form div[formgroupname="options"] {
    width:50%;
    order:1;
    margin-bottom: 54px;
    margin-top: 8px;
}
#root .login-form-block .forgot-password-block {
    order:1;
    width:50%;
    margin-bottom: 54px;
    margin-top: 8px;
}
#root .login-form-block .forgot-password-block > app-widget-host {
    justify-content:center;
    align-items:flex-end
}
#root .login-form-block .register-button {
    order: 3;
    width:100%;
}
#root .login-form-block  .login-form app-login-form ui-button{
    order: 3;
    width:100%;
}
#root .login-form-block .form-row.remember-me-row {
    flex-direction:row;
    align-items: center;
    margin-bottom: unset;
}
#root .login-form-block .form-row.remember-me-row .form-element-wrapper {
    flex:unset;
    order:-1;
    min-width: unset;
}
#root .mobile-app .login-form-block .form-row.remember-me-row {
    display:none
}
#root .login-form-block .form-row.remember-me-row label,
#root .login-form-block .form-row.keep-me-row label{
    width: calc(100% - 31px);
    margin-right: unset;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    text-indent: 0px;
    padding-left: 10px;
    /* height: unset; */
}
#root .login-form-block .form-row.remember-me-row input {
    width:24px;
    height:24px;
    margin-top:unset;
}
#root app-login-form input[type="checkbox"] {
    background-color:var(--c-white-permatext)!important;
    border:1px solid black;
    padding-left:unset;
    border-radius:3px;
    margin: 0px;
}
#root app-login-form input[type="checkbox"]:checked {
    background-image:url(/v1.045/r/images/site/icons/GreenTick.svg)
}
#root .desktop .loginwelcome-wrapper,
#root .desktop .login-form-block {
    max-width:700px;
    margin:0 auto;
    width:100%;
}
#root .login-form .form-row.keep-me-row {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: unset;
    /* margin-top: 15px; */
}
#root .login-form-block app-login-with-biometrics button {
    padding:0 28px;
}
#root .login-form-block app-login-with-biometrics button span {
    position:relative;
    
}
#root .login-form-block app-login-with-biometrics button span::before {
    content:"";
    display:block;
    width:28px;
    height:28px;
    position:absolute;
    right:0px;
    top:50%;
    background-image:url(/v1.045/r/images/site/icons/fingerprint.svg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:28px;
    transform:translate(100%,-50%)
}
#root .login-form-block app-login-with-biometrics button {
   
}


#root .login-form .form-row.keep-me-row .form-element-wrapper {
    flex: unset;
    order: -1;
    min-width: unset;
}

#root .login-form .form-row.keep-me-row .form-element-wrapper input {
    width: 24px;
    height: 24px;
    padding-left: unset;
}
#root .login-form-block .beto-login-with-biometrics {
    order:3;
    width: 100%;
}