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




body .ui-dialog.desktop-register-popup{
    top: 10vh!important
}
body .desktop-register-popup .ui-dialog-content{
    background-color: var(--c-background-footer);
    border: 0;
    border-radius: 5px;
    width: 500px;
    padding: 0!important;    
    min-height: 250px;
    max-height: 80vh
}
body .signin-dialog{
    width: 350px;
}
body .signin-dialog .ui-dialog-titlebar{
    font-weight: normal;
    padding: 2em
}
.modal-header{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    background: var(--c-diagonal-gradient)
}
.modal-header > app-widget-host{
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--c-black-e);
    border: 0;
    padding: 1em;
}
.modal-header .logo{
    width: 100%;
    text-align: center
}
.modal-header .logo img{
    max-width: 180px
}
.modal-header .close-page-button{
    position: absolute;
    right: 15px
}
.register-form-wrapper .form-pages{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-black-e)
}
.form-page{
    display: flex;
    justify-content: center;
    border-radius: 100%;
    /* padding: 0 10px; */
}
.form-page .active{
    padding: 0 4px;
    background-color: var(--c-background);
    color: var(--c-text-header);
    border-radius: 100%
}
.register-modal .login-menu-register{
    padding-top: 20px
}
.register-form-wrapper h2{
        color: var(--c-black-e);
    padding: 15px 0;
    text-transform: uppercase;
    margin-top: 0;
    font-size: 18px;

}
.register-form-wrapper h2,
.register-form-wrapper form > div > div,
.register-form-wrapper .form-row label{
    display: flex;
    justify-content: center;
    align-items: center
}
.register-form-wrapper form > div > div{
    /* max-width: 400px; */
    padding: 0 15px;
    margin: 0 auto
}
.register-form-wrapper .register-fields-wrapper app-fields-section{
    width: 100%
}
.register-form-wrapper h3{
    margin: 10px 0;
    padding: 10px;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    color: var(--c-black-e);
    display: none;
}
.register-form-wrapper h3:after {
    content: "";
    background-image: linear-gradient(90deg,#7432ff,transparent,transparent,transparent,#7432ff);
    align-items: center;
    display: flex;
    position: relative;
    height: 8px;
    width: 100%;
    margin-top: -12px;
    margin-bottom: 4px;
    z-index: 0;
    border-radius: 4px;
}

.register-form-wrapper .generic-form .form-row{
    padding-bottom: 20px;
    flex-direction: column
}
.register-form-wrapper .form-row label{
    justify-content: flex-start;
    /* padding-bottom: 5px; */
}
.register-modal .form-element-wrapper input{
    height: 32px;
    width: 100%;
    background-color: var(--c-white-e);
    border: 0;
    border-radius: 8px;
    color: var(--c-black-e)
}
.registration:nth-child(5) .form-element-wrapper{
    background-color: var(--c-text-header);
    border: 0;
    border-radius: 8px;
    max-width: 264px
}
.form-element-wrapper select{
    height: 32px;   
    border: 0;
    background-color: var(--c-background-input);
    color: var(--c-text-header-menu);
    border-radius: var(--r-border-radius-small)
}
.register-modal app-date-field .form-element-wrapper{
    background-color: transparent;
}
app-date-field .form-element-wrapper ngx-combo-datepicker{
    display: flex;
    max-width: 180px
}
app-date-field .form-element-wrapper ngx-combo-datepicker select:nth-child(2){
   margin: 0 5px
}
.register-form-wrapper .generic-form .form-row.checkbox-wrapper{
    flex-direction: row;
    flex-wrap: wrap
}
.register-fields-wrapper .checkbox-wrapper span{
    color: var(--c-white);
}
.register-fields-wrapper .checkbox-wrapper span.required{
    margin-right: 3px
}
.register-fields-wrapper .checkbox-wrapper span.field-label{
    flex: 0 0 80%;
    order: 3
}
.register-fields-wrapper .checkbox-wrapper p-checkbox{
    padding-right: 10px
}
.register-fields-wrapper .checkbox-wrapper .form-element-error-wrapper{
    flex: 1 1 100%;
    padding-top: 10px;
    order: 10;
    color: var(--c-background-betslip-title)
}
.reset-next-buttons-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 0 auto; */
    padding-top: 36px;
    padding-bottom: 50px;
    width: 100%;
    position: relative;
    flex-direction: row-reverse
}
.reset-next-buttons-wrapper ui-button:first-child{
    display: flex;
    margin-left: 5px;
    justify-content: flex-start
}
.reset-next-buttons-wrapper ui-button:last-child{
    display: flex;
    margin-right: 5px;
    justify-content: flex-end;
}
.reset-next-buttons-wrapper .button-submit-register,
.button-reset-register-yes,
.button-reset-register-no,
.button-submit-forgot-password,
.register-form-wrapper .button-reset-register{
    padding: 10px 20px;
    color: var(--c-black-e);
    font-weight: bold;
    border-radius: 8px;
    /* max-width: 130px; */
    background: var(--c-emphasis-c);
}
.button-submit-forgot-password{
    max-width: 100%;
    margin: 0 auto;
    font-weight: bold;
    max-width: 182px;
    font-family: 'Roboto';
    border-radius: var(--r-lg);
    position:absolute;
    bottom:0px;
    right:0px;
}
.reset-next-buttons-wrapper, ui-button,
.reset-next-buttons-wrapper .button-submit-register,
.register-form-wrapper .button-reset-register,
.button-reset-register-yes,
.button-reset-register-no{
    width: 100%;    
}
.button-reset-register-yes,
.reset-next-buttons-wrapper .button-submit-register{
    background-color: var(--c-emphasis-c);
    color: var(--c-black-e);
    border-radius:var(--r-lg);
    height: 46px;
}
.reset-register-confirm{
    position: absolute;
    top: 0;
    color: var(--c-text-special-market);
    display: block;
    width: 100%;
    text-align: center
}
.register-form-wrapper .button-next{
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: transparent;
    border: 0;
}
#root .register-form-wrapper .button-next:hover{
    background-color: transparent
}
.register-form-wrapper .button-next{
    background-color: var(--c-emphasis-c);
    color: var(--c-black);
    width:auto;
    border-radius: 5px;
    /* width: 75px; */
    font-weight: 600;
    height:46px;
    align-items: center;
    border-radius: 20px;
    padding: 0px 15px;
    margin-top: 25px;
    margin-left: auto;
}
.generic-form .form-row .form-element-wrapper .form-element-error:not(:empty){
    font-size: 0.9em;
    padding: 5px 0px;
    justify-content: space-between;
}

.generic-form tel-input{
    display: flex;
    width:100%;
}
#root .generic-form tel-input p-dropdown{
    width: 60px;
    height: 32px;
    overflow: hidden;
    border-radius: var(--r-border-radius-medium);
    margin-right: 1px;
}
#root tel-input .ui-dropdown{
    height: 34px;
    top: -1px;
    left: -1px;
    min-width: auto;
    width: 100%
}
.register-form-wrapper tel-input .ui-dropdown .ui-dropdown-trigger{
    display: none
}
.register-form-wrapper tel-input .ui-dropdown .ui-dropdown-label{
    padding: 0 5px;
    height: 46px;
    line-height: 46px;
    font-size: 12px
}
#root .register-form-wrapper tel-input .ui-dropdown,
#root .register-form-wrapper tel-input p-dropdown{
    height:46px;
    top: 0px;
    left: 0px;
    border-radius: 0;
    border-color: transparent;
}
#root .register-form-wrapper .generic-form tel-input input{
    width: 100%;
    border-top-left-radius:0px;
    border-bottom-left-radius:0px;
    border: 0;
}
#root .generic-form .field-caption{
    padding-top: 7px;
    color: var(--c-text-primary);
    opacity: .6
}
.register-form-wrapper .reset-next-buttons-wrapper{
    padding-top: 0;
}
#mainDiv:not(.rg-2) .register-form-wrapper .reset-next-buttons-wrapper {
    display:none
}
.modal-ok-button{
    width: 100px;
    background-color: var(--c-background-primary);
    color: var(--c-text-header);
    display: block;
    text-align: center;
    margin: 20px auto 0;
    padding: 10px 20px
}

/***********************************
          Forgot Password
***********************************/

.modal-header-row > app-widget-host{
    flex-direction: row;
    justify-content: space-between;
    background: var(--c-diagonal-gradient);
    padding: 0 20px;
    align-items: center
}
.modal-header-row > app-widget-host > span{
    display: none
}
.modal-header-row .close-modal-button{
    color: var(--c-black-e)
}
.modal-header-row .close-modal-button:hover{
    color: var(--c-black-e)
}
.forgot-menu{
   margin: 50px 0 20px;
    position:relative;
    padding-bottom:36px;
}
.forgot-menu #forgotpass{
    align-items: center;
    display: flex;
    justify-content: center
}
.forgot-menu #forgotpass div {
    width:100%;
}
.forgot-menu #forgotpass label{
    color: var(--c-white);
    font-size: 12px;
    justify-content: center;
    align-items: center
}
.register-modal .forgot-menu .form-element-wrapper input{
    height: 40px;
    width: 300px
}
.register-fields-wrapper .form-element-wrapper div:last-child{
    margin: 0
}
.forgot-menu .forgot-password-form ui-button{
    display: flex;
    justify-content: center
}
.register-modal .forgot-content{
    color: var(--c-black-e);
    cursor: pointer;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 15px 0
}
.back-to-login {
    position:absolute;
    left:0px;
    bottom:0px;
   
}
.back-to-login > app-widget-host {
     height:36px;
    flex-direction:row;
    align-items:center;
}
.back-to-login > app-widget-host::before {
    width:32px;
    height:32px;
    content:"";
    background-image:url(/v1.206/r/images/accessbet/icons/arrow-bubble.svg);
    background-size:32px;
    background-repeat:no-repeat;
    background-position:center;
    margin-right:8px;
}
.generic-form .form-row.username-row,
.generic-form .form-row.password-row{
    height: 32px;
    align-items: center;
    padding: 0;
    margin: 10px 0
}
.generic-form .form-row input{
    border-radius: var(--r-md);
    border: 0;
    height: 38px;
    color: var(--c-primary);
}
/*******************************
     Desktop Login Form Popup
********************************/


.desktop-login-popup{
    width: 350px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important
}
body .desktop-login-popup.ui-dialog .ui-dialog-content{
    padding: 0
}
.desktop-login-popup .modal-header > app-widget-host,{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--c-background-header);
    color: var(--c-text-header);
    border: 0;
    padding: 1em
}
.desktop-login-popup .close-modal-button{
    display: flex;
    align-items: center;
    font-size: 0
}
.desktop-login-popup .close-modal-button:before{
    content: "\00D7";    
    color: var(--c-text-header);
    font-size: 20px;
    font-weight: bold
}
.desktop-login-popup .login-menu-register > app-widget-host{
    padding: 20px 50px
}

.desktop-login-popup .generic-form .form-row.username-row,
.desktop-login-popup .generic-form .form-row.password-row{
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0 0 30px;
    max-width: 350px
}
.desktop-login-popup .generic-form .form-row .form-label,
.desktop-login-popup .generic-form .form-row .form-element-wrapper{
    width: 100%
}
.desktop-login-popup .generic-form .form-row input{
    background-color: transparent;
    border-bottom: 1px solid var(--c-border-sport-coupon);
    border-radius: 0
}
.desktop-login-popup  .button-submit-login .button-label{
    background-color: var(--c-background-bet-button)
}
.register .body {
    padding:0px 30px;
}
.mobile .register .form-pages {
    display:flex;
    order:-1;
    margin:25px 0px;
    justify-content:flex-start
}
.mobile .register .form-pages .form-page div:not(.step-label){
    width:33px;
    height:33px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--c-blue-d);
    color:var(--c-white-e);
    font-size:18px;
    font-weight:bold;
    border-radius:50%;
}
.mobile .register .form-pages .form-page {
    display:flex;
    align-items:center;
}
.mobile .register .form-pages .form-page:not(:last-child)::after {
    content:"";
    width:22px;
    height:3px;
    background-color:var(--c-blue-d);
    margin:0px 8px;
}
.mobile .register .form-pages .form-page div.active {
    background-color:var(--c-emphasis-b);
}
.register .register-form,
.register .register-form-wrapper {
    display:contents;
}
.register .reg-header {
    font-size:25px;
    line-height:1;
    font-weight:600;
    margin-bottom:25px;
}
.reg-page-material {
    display:none;
}
.reg-note {
    margin-bottom:40px;
}
.reg-note.page-1 {
    font-size:10px;
    line-height:1;
    background-color:#491A96;
    padding:8px;
    padding-left:38px;
    background-image:url(/v1.165/r/images/accessbet/icons/ph_gift-light.svg);
    background-repeat:no-repeat;
    background-size:18px;
    background-position:10px center ;
    border-radius:5px;
}
.rg-1 .page-1,
.rg-2 .page-2,
.rg-3 .page-3 {
    display:block
}
#root .register-form-wrapper .form-element-wrapper select {
    height:46px;
    background-color:var(--c-white-e);
    border-radius:5px;
    color:var(--c-black-e);
    text-indent:10px;
}
.register form > div {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}
.register form > div > div {
    width:100%;
}
.register .button-previous {
    /* display:none; */
}
/*******************************
     Ruccessfully Registered
********************************/
#root .successfully-registered.ui-dialog {
    height:100%!important;
    width:100%!important;
    top:0px!important;
}
#root .mobile-large .successfully-registered.ui-dialog {
    max-width:400px;
    max-height:60%;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-50%)!important
}
#root .successfully-registered.ui-dialog .ui-dialog-titlebar {
    border-top-right-radius:10px;
    border-top-left-radius:10px;
    color:transparent;
}
#root .successfully-registered.ui-dialog .ui-dialog-titlebar,
#root .successfully-registered.ui-dialog .ui-dialog .ui-dialog-titlebar-icon span{
    background-color: var(--c-primary-d);
    color: transparent
}
body .successfully-registered.ui-dialog .ui-dialog-content{
    background-color: var(--c-primary-d);
    height:calc(100% - 45px);
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}
.successfully-registered.ui-dialog  .modal-ok-button{
    background-color: var(--c-emphasis-c);
    color: var(--c-black-e);
    font-weight: bold;
    border-radius:50px;
    max-width:218px;
    width:100%;
}
.successfully-registered.ui-dialog .modal-content {
    text-align:center;
}
.successfully-registered.ui-dialog .modal-content span {
    font-weight:500;
    font-size:25px;
    margin-bottom:5px;
    display:block;
}
.successfully-registered.ui-dialog .modal-content::before {
    content:"";
    width:198px;
    height:286px;
    display:block;
    background-image:url(/v1.244/r/images/site/icons/reg_complete.png);
    margin:0 auto;
}
.register-instead {
    margin:10px 0px;
    text-align:left;
}
.register-instead:not(.reg-page-material) > app-widget-host {
    justify-content:center;
}
.close-register {
    order:-2;
    margin:20px 0px;
}
.close-register .close {
    width:24px;
    height:24px;
    margin-left:auto
}
#root .register-form-wrapper .form-element-error:not(:empty) {
     background-color:#961A3C;
    color:var(--c-white-e);
    padding:8px 10px;
    border-radius:5px;
    margin-top:5px;
 }
.fld-telephone + .fld-telephone p-dropdown {
    display:none;
}
.register-terms-and-conditions > app-widget-host {
    display:inline
}
.register-terms-and-conditions > app-widget-host * {
    display:inline;
    margin-right:2px;
}
.register-terms-and-conditions > app-widget-host .link {
    color:var(--c-emphasis-c)
}
.fld-password .icon-show-pass-container {
    display:block;
    position:absolute;
    color:transparent;
    top:12px;
    right:10px;
    width:24px;
    height:24px;
    background-image:url(/v1.167/r/images/accessbet/icons/bx_bx-show.svg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:24px;
    
}
.fld-password input[type="text"] ~ .icon-show-pass-container {
    background-image:url(/v1.167/r/images/accessbet/icons/mdi_hide.svg);
    filter:invert(1)
}
.fld-password .form-element-wrapper {
    position:relative;
}
.beto-register .generic-form {
    position:relative;
}
.beto-register .generic-form .button-previous {
    position:absolute;
    bottom:22px;
    height:40px;
    max-width:80px;
    width: 100%;
    display:flex;
    align-items:center;
    background-color:transparent;
    border:0px;
}
.beto-register .generic-form .button-previous .ui-button-text {
    padding:0px;
    display:inline
}
.beto-register .generic-form .button-previous::before {
    content:"";
    display:block;
    width:32px;
    height:32px;
    background-image:url(/v1.206/r/images/accessbet/icons/arrow-bubble.svg);
    background-size:30px;
    background-repeat:no-repeat;
    background-position:center;
    margin-right:5px;
}

body .view-page-register .ui-widget-overlay {
  background-color: rgba(0, 0, 0, 1) !important;
}

body .view-page-register .ui-dialog-mask {
  z-index: 100 !important;
}