/*******************************
        Register Form
********************************/

.register-form > div{
    color: var(--c-black);
  
}
.otprequest .register-form > div{
    text-align: center;
    padding-top: 20px
}
.otp-request-wrapper .otp-request-content form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.otprequest .otp-request-wrapper ui-button button {
    background-color: var(--c-emphasis-b);
    color: var(--c-white);
    min-height: 32px;
    padding: 8px 12px;
    border-radius: var(--r-border-radius-big);
}

.header .loginbutton button{
     height: 32px;
    cursor: pointer;
    padding: 0 12px;
    margin-right: 5px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: .3px;
    border: 0;
    border-radius: var(--r-border-radius-medium);
    min-width: 90px;
    background-color: var(--c-shade-b);
    color: var(--c-white)
}
.header .loginbutton.register button{
    background-color: var(--c-emphasis-c)
}
.header .loginbutton.register button {
            filter:brightness(.9)
}
.header .loginbutton button:hover{
    filter: brightness(.9)
}
/*** Register / Login / Forgot Pass ***/
body .desktop-register-popup.ui-dialog {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 10vh!important;
    max-width: 768px;
    width: 100%;
}

body .desktop-register-popup.ui-dialog .ui-dialog-content {
    padding: 0;
        border: none;
    overflow-y: auto;
    max-height: 70vh
}

.signin .signup-menu {
    display: block;
    /*position: relative;*/
        position: sticky;
    top: 0;
    z-index: 3
}

.signin .signup-menu > app-widget-host {
    display: flex;
    flex-direction: row;
    background-color: var(--c-emphasis-b);
    color: var(--c-white);
}

.signin .signup-menu > app-widget-host app-content-block {
    flex: 1 1 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 5px solid transparent;
    cursor: pointer;
    transition: all .3s
}

#root.login-menu-register:not(.show-login) .signup-menu-item.register, 
#root:not(.login-menu-register):not(show-login):not(.show-register) .signup-menu-item.login, 
#root.show-login .signup-menu-item.login, #root.show-register .signup-menu-item.register {
    border-bottom: 5px solid var(--c-emphasis-c);
    transition: all .3s
}

#root:not(.login-menu-register):not(.show-forgot-password) .desktop .forgot-password,
#root:not(.login-menu-register):not(.show-register) .desktop .register-form,
#root.login-menu-register:not(.show-login) .desktop .login.column,
#root.login-menu-register:not(.show-login) .desktop .forgot-password,
#root.show-login .desktop .register-form,
#root.show-register .ui-dialog .login.column,
#root.show-forgot-password .desktop .register-form,
#root.show-forgot-password .desktop .login.column,
#root.show-register .desktop .forgot-password,
#root.show-login .desktop .forgot-password { 
    display: none
}

#root.login-menu-register.show-forgot-password .forgot-password {
    display: block
}

.signin .signup-menu app-content-block > div {
    padding: 15px 20px;
    width: 100%;
    text-align: center;
        font-weight: bold;
}



.signin  .close-page-button {
    display: flex;
    align-items: center;
    width: 51px;
    justify-content: center;
    border-left: 1px solid var(--c-black);
    margin: 5px 0
}

.signin  .close-page-button .close-modal-button {
    font-size: 0;
    width: 51px;
    text-align: center
}

.signin .close-page-button .close-modal-button:before {
    content: "\00D7";
    font-size: 40px;
    font-weight: bold;
    line-height: 42px;
    color: var(--c-white)
}

.signin .login.column , .signin app-register.register-form, .signin app-forgot-password.forgot-password {
    display: block;
    padding: 40px;
    color:var(--c-black)
    }
.register-form-wrapper h2,
.register-form-wrapper h3 {
    display: none;
}
.mobile .signin .login.column ,
.mobile .signin app-register.register-form,
.mobile .signin app-forgot-password.forgot-password {
    padding: 0 0 40px;
}

.signin .login.column > app-widget-host, 
.signin app-register.register-form .register-form-wrapper, 
.signin app-forgot-password.forgot-password .forgot-password-form {
    padding: 30px;
    display: flex;
    flex-direction: column;
    background-color: var(--c-white);
    /* box-shadow: 0 1px 3px 0 rgb(0 0 0 / 50%); */
    border-radius: var(--r-border-radius-small);
}
.signin app-forgot-password.forgot-password .forgot-password-form{
    padding-bottom: 70px
}
.forgot-password-form-errors .form-element-error{
    position: absolute;
    bottom: -72px
}
#forgotpass .form-element-error{
    position: absolute;
    bottom: -100px
}
.generic-form .form-row {
    position:relative;
}
/* */
.login-form .generic-form .form-row .form-element-wrapper .form-element-error {
    padding: 10px 5px;
    max-width: 600px
}

.signin .login .generic-form .form-row, .signin .forgot-password .form-row {
    flex-direction: column;
    position: relative
}
#root .signin .login .generic-form .remember-me-row,
#root .signin .login .generic-form .keep-me-row{
    flex-direction: row;
    align-items: center;
}
.signin .login .generic-form .remember-me-row .form-element-wrapper,
.signin .login .generic-form .keep-me-row .form-element-wrapper{
    flex: unset;
}

.signin .login .username-row .form-label, .signin .login .password-row .form-label, .signin .forgot-password .form-label {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    padding-bottom: 5px
}
.signin .login .password-row .form-element-wrapper{
    position: relative
}

.signin .register-form label {
    display: flex;
    align-items: center
}

.generic-form app-phone-field .form-row .form-element-wrapper {
}

.signin .register-form tel-input {
    display: flex;
    position: relative
}
.signin .register-form tel-input p-dropdown{
    position: absolute
}
.signin .register-form tel-input .ui-dropdown {
    /* min-width: 50px; */
    border: 0;
    height: 36px;
    max-width: 40px;
    min-width: unset;
    background: transparent
}
.signin .register-form tel-input .ui-dropdown-clear-icon {
    display:none
}
.signin .register-form tel-input .ui-dropdown label {
    background: transparent;
    border: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%;
    /* display: flex; */
    padding-right: unset;
    font-size: 14px;
    padding: 0;
    padding-left: 8px;
    /* align-items:center; */
}
.signin .register-form tel-input .ui-dropdown .ui-dropdown-label-container {
    height:100%;
    min-height: 38px
}
.signin .register-form tel-input .ui-dropdown .ui-dropdown-trigger {
    display: none
}
.signin .register-form tel-input input{
    text-indent: 32px;
    font-size: 14px;
    line-height: 150%
}
.signin .login .username-row .form-label:before, .signin .login .password-row .form-label:before, .signin .forgot-password .form-label:before {
    content: "";
    width: 38px;
    height: 38px;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 8px;
    left: 0;
    background-size: 20px;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 50%);
    border-radius: var(--r-border-radius-medium);
}

.signin .login .username-row .form-label:before {
    background-image: url(/v1.025/r/images/site/icons/su-phone-black.svg)    
}

.signin .login .password-row .form-label:before {
    background-image: url(/v1.025/r/images/site/icons/login-pass.svg)
}

.signin .forgot-password .form-label:before {
    background-image: url("/v1.025/r/images/site/icons/su-phone-black.svg");
    background-size:30px;
    opacity:0.5;
}

.signin .login .username-row .form-element-wrapper input, 
.signin .login .password-row .form-element-wrapper input, 
.signin .register-form input, .signin .register-form select, 
.signin .forgot-password input {
    height: 38px;
    /* box-shadow: 0 1px 3px 0 rgb(0 0 0 / 50%); */
    border: 0;
    padding: 0 10px;
    width: 100%;
    margin-left: auto;
    border-radius: var(--r-border-radius-medium);
    background-color: var(--c-background-b)
}
.signin .forgot-password input{
    text-indent: 60px;
    font-size: 16px
}
.signin .login .username-row .form-element-wrapper input,
.signin .login .password-row .form-element-wrapper input,
.signin .forgot-password input{
    width: calc(100% - 50px)
}

/* */
.signin .generic-form.login-form > ui-button, .signin .forgot-password-form ui-button {
    display: block;
    height: 38px;

}

.signin .generic-form.login-form > ui-button .button-submit-login,
.signin .forgot-password-form ui-button .button-submit-forgot-password {
    width: 100%;
    min-width: 100%;
    padding: 0;
    height: 100%;
    border: 0;
}

.signin .generic-form.login-form .button-submit-login .button-label,
.signin .forgot-password-form .button-submit-forgot-password .button-label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: var(--r-border-radius-big);
    background-color: var(--c-emphasis-c);
    color: var(--c-white)
}

.forgot-password-link {
    display: flex;
    align-items: center;
    margin-top: 20px;
    cursor: pointer;
    width: 100%;
    font-size: 12px;
    line-height: 12px;
        align-items: center;
    justify-content: center;
    font-size: 12px;
}

.generic-form .form-row .form-element-wrapper .form-element-error .clear-error {
    margin: 0px 5px;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-red);
    border-radius: 50%;
}

.signin .register-form .reset-next-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* width: calc(100% - 60px); */
}

.signin .register-form .reset-next-buttons-wrapper ui-button {
    width: calc(50% - 5px);
    height: 38px;
    text-align: center
}
.signin .register-form .reset-next-buttons-wrapper ui-button:first-of-type {
    margin-right:5px;
}
.signin .register-form .reset-next-buttons-wrapper button {
    width: 100%;
    height: 100%;
    border-radius: var(--r-border-radius-big);
}

.signin .register-form .reset-next-buttons-wrapper button.button-submit-register ,
.signin .register-form .reset-next-buttons-wrapper button.button-reset-register-yes {
    background-color: var(--c-emphasis-c);
    color: var(--c-white)
}

.signin .register-form .reset-next-buttons-wrapper button.button-reset-register,
.signin .register-form .reset-next-buttons-wrapper button.button-reset-register-no {
    }
.signin .register-form .reset-next-buttons-wrapper button.button-reset-register .button-label,
.signin .register-form .reset-next-buttons-wrapper button.button-reset-register-no .button-label{
    }
.signin .register-form .reset-next-buttons-wrapper .button-label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
        font-weight: bold;
    font-size: 16px
}

.signin .register-form .reset-register-confirm {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
        width: 100%;
    flex-wrap: wrap;
    text-align: center;
    margin-bottom: 10px;
    white-space: normal;
}

/* */
.signin .register-form .general > div .form-row{
    flex-direction: column;
    padding-bottom: 12px
}
.signin .register-form .general > div .form-row.ng-invalid{

}
.signin .register-form .general > div .form-row.ng-pending .icon-container{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.signin .register-form .general > div .form-row.ng-pending .icon-container .loader-icon{
    display: block;
    width: 24px;
    height: 24px;
    margin: 0px;
    border-radius: 50%;
    border: 3px solid var(--c-text-login-button-active);
    border-    animation: register-input-lds 1.2s linear infinite;
}
.signin .register-form .general > .fld-password .form-row.ng-invalid .icon-container ,
.signin .register-form .general > .fld-verifypassword .form-row.ng-invalid .icon-container{
    right: 25px;
}
.signin .register-form .general > div .form-row.ng-valid.ng-invalid .icon-container{
    display: none
}
@keyframes register-input-lds {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.signin .icon-show-pass-container{
    display: flex;
    align-items: center;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.signin .icon-show-pass-container .showpass-icon{
    background-image: url(/v2.05/r/show-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 18px;
    height: 18px;
    filter: invert(27%) sepia(95%) saturate(6798%) hue-rotate(344deg) brightness(79%) contrast(110%);
    font-size: 0
}
.signin .form-element-wrapper:has(input[type=text]) .icon-show-pass-container .showpass-icon{
    background-image: url(/v2.05/r/images/site/hidden-white.svg);
}


.signin .register-form .general > div .form-row.checkbox-wrapper{
    flex-direction: row;
}
.signin .register-form .general > div .form-row.checkbox-wrapper .form-element-error-wrapper{
    padding-left: 10px;
        border-bottom-left-radius:0px;
}
.signin .register-form .general > div .form-element-wrapper{
    position: relative
}
.signin .register-form .general > div .form-element-wrapper .form-element-error-wrapper{
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}
.signin .register-form .general > .fld-password .form-element-wrapper .form-element-error-wrapper,
.signin .register-form .general > .fld-verifypassword .form-element-wrapper .form-element-error-wrapper{
    right: 55px
}

.signin .register-form #registration .fld-dateofbirth ngx-combo-datepicker {
    display: flex;
    width: 100%
}

.signin .register-form .field-label {
    padding-left: 8px;
    display:flex;
    align-items:center;
}
.signin .register-form .checkbox-wrapper .field-label{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: var(--c-primary)
}

#root .successfully-registered.ui-dialog .ui-dialog-content {
    padding: 20px
}

#root .modal-content {
    display: block;
    padding-bottom: 20px
}

#root .modal-ok-button {
    padding: 10px 15px;
            display: inline-block;
    min-width: 100px;
    text-align: center
}

.signin-dialog.ui-dialog,
.auth-login-popup.ui-dialog {
    max-width: 480px;
    width: 100%;
}

#root .signin-dialog.ui-dialog .ui-dialog-titlebar {
    background-image: linear-gradient(323deg, var(--c-primary), var(--c-black-e) 70%);
        border: 0;
    border-bottom: 5px solid var(--c-emphasis);
    padding: 15px 20px
}

body .signin-dialog.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {
    }

body .signin-dialog.ui-dialog .ui-dialog-content,
body .auth-login-popup.ui-dialog .ui-dialog-content {
    padding: 40px;
    }

.signin-dialog.ui-dialog .generic-form.login-form,
.auth-login-popup.ui-dialog .generic-form.login-form {
    padding: 30px;
    display: flex;
    flex-direction: column;
    }

.signin-dialog.ui-dialog .generic-form .form-row,
.signin-dialog.ui-dialog .generic-form .form-row,
.auth-login-popup.ui-dialog .generic-form .form-row,
.auth-login-popup.ui-dialog .generic-form .form-row  {
    flex-direction: column;
    position: relative
}

.signin-dialog.ui-dialog .generic-form .form-row label,
.auth-login-popup.ui-dialog .generic-form .form-row label {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    padding-bottom: 5px
}

.signin-dialog.ui-dialog .generic-form .form-row label:before,
.auth-login-popup.ui-dialog .generic-form .form-row label:before  {
    content: "";
    width: 38px;
    height: 38px;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 8px;
    left: 0;
    background-size: 20px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 50%);
    background-image: url(/v1.025/r/images/site/icons/su-phone-black.svg);
    border-radius: var(--r-border-radius-medium)
}

.signin-dialog.ui-dialog .generic-form .form-row.password-row label:before,
.auth-login-popup.ui-dialog .generic-form .form-row.password-row label:before  {
    background-image: url(/v1.025/r/images/site/icons/login-pass.svg)
}

.signin-dialog.ui-dialog .form-row input,
.auth-login-popup.ui-dialog .form-row input  {
    height: 38px;
    padding: 0 10px;
    border-radius: var(--r-border-radius-medium);
    width: calc(100% - 50px);
    margin-left: auto;
    outline:none;
    border:0
}

.signin-dialog.ui-dialog .generic-form.login-form > ui-button,
.auth-login-popup.ui-dialog .generic-form.login-form > ui-button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    border-radius: var(--r-border-radius-big)
}

.signin-dialog.ui-dialog .button-submit-login,
.auth-login-popup.ui-dialog .button-submit-login  {
    width: 100%;
    padding: 0;
    height: 100%;
    border: 0;
    max-height: 42px;
    background-color: var(--c-emphasis-b);
    color: var(--c-white)
}

.signin-dialog.ui-dialog .button-submit-login .button-label,
.auth-login-popup.ui-dialog .button-submit-login .button-label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
            font-size: 16px;
    font-weight: bold
}


.register-form .general {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.register-form .general > div:not(.fld-acceptterms):not(.fld-age-verification) {
    width:100%
}
.generic-form .form-row .form-element-wrapper{
    position: relative
}
.generic-form .form-row.username-row .form-element-wrapper::before {
    content: "+256";
    border-radius: var(--r-border-radius-medium);
    border: 0;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    padding-left: 36px;
    margin-right: 8px;
    width: 50px;
    background-image: url(/v1.025/r/images/site/icons/Flag_of_Uganda.svg.png);
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    box-shadow: none;
    left: 50px;
    top: 4px;
   font-weight: bold
}
.generic-form .form-row.username-row .form-element-wrapper input{
    text-indent: 60px
}
.signin .main{
    display: flex;
    flex-direction: column;
    gap: 8px
}
.field-hint{
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 10px;
    transition: all .3s ease-in-out;
    z-index: 2;
    background: linear-gradient(to bottom, var(--c-white) 50%, var(--c-background-b) 50%);
    display: inline-block;
    padding: 0 5px;
    color: var(--c-emphasis-c);
    display: none;
      

}
input:focus-visible,
input:focus{
    outline: 0
}
.form-element-wrapper:has(input:focus) input{
    border-radius: var(--r-border-radius-medium);
    border: 1px solid var(--c-emphasis-c)
}
.form-element-wrapper:has(input:focus) .field-hint{
    display: block
}


.form-element-error{
    bottom: 0;
    transform: translateY(50%);
    right: 10px;
    z-index: 2;
    padding: 0 5px;
}
.form-element-wrapper:has(.form-element-error) input{
    border: 1px solid red!important;
}
.signin .fld-telephone .form-element-wrapper:has(.form-element-error) tel-input{
}
.signin .fld-telephone .form-element-wrapper:has(.form-element-error) input{
}


.login-form .login-action-error-message{
    text-align: center;
    margin-bottom: 24px;
    font-size: 22px;
    color: var(--c-emphasis-a)
}
.login-form .change-password-wrapper .change-password-content .form-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;
}
.login-form .change-password-wrapper .change-password-content .form-row label{

}
.login-form .change-password-wrapper .change-password-content .form-row input{
    height: 38px;
    padding: 0 10px;
    width: 100%;
    margin-left: auto;
    border-radius: var(--r-border-radius-medium);
    background-color: var(--c-background-b);
    border: 0
}

.login-form .change-password-wrapper .change-password-content .form-element-error{
    position: absolute;
    background: linear-gradient(to bottom, var(--c-background-b) 50%, var(--c-white) 50%);
}
.login-form .change-password-wrapper .change-password-content .button-change-password{
    width: 100%
}
.login-form .change-password-wrapper .change-password-content ui-button + .form-row .form-element-error{
    position: unset;
    background: transparent;
    margin: 0 auto;
    text-align: center;
}

.forgot-password-form-success{
    padding: 50px 20px;
    text-align: center;
    color: var(--c-emphasis-c);
    font-size: 18px;
    height: 100vh;
}