body .ui-button:enabled:focus {
    box-shadow: none
}

body .ui-button:enabled:active {
    background-color: transparent;
    color: transparent;
    border-color: none;
}

input {
    padding: 0 5px;
}

.content-page {
    color: var(--c-text-primary)
}

.account .body {
    background-color: var(--c-primary-d);
    margin: 0px;
    max-width: 100%;
    /* height: 100%; */
}

/************************************
          Left User Menu
*************************************/
.account-menu-left > app-widget-host, .account-menu {
    display: flex;
    flex-direction: row;
    /* flex-wrap:wrap; */
    width: 100%
}
.webpay .account-menu{
    position: unset
}
.webpay .left-sidebar{
    width: 100%;
    padding: 0

}
.webpay .user-payment-content{
    max-width: 100%;
    margin: 20px 0;
    padding: 0 20px
}
.account-menu {
    position: sticky;
    top: 0px;
    z-index: 21;
    padding: 20px;
    background-color: var(--primary-divider-color);
}

#root #mainDiv .account-menu ul.menu li:not(:last-child) {
    /* margin-right:10px; */
}

#root #mainDiv .account-menu ul.menu li {
    flex: 1;
    margin: 5px;
}

.account-menu .header-title {
    color: var(--c-black-e);
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 13px 10px;
    border-bottom: 1px solid var(--c-emphasis);
}

.account-profile .account-menu .account-tab > app-widget-host, .account-transactions .account-menu .transaction-tab > app-widget-host, .account-deposit .account-menu .deposit-tab > app-widget-host, .account-withdraw .account-menu .withdraw-tab > app-widget-host, .account-password .account-menu .password-tab > app-widget-host, .bet-open .account-menu .bet-open-tab > app-widget-host, .bet-settled .account-menu .bet-settled-tab > app-widget-host {
    background-color: var(--c-primary);
}

.account-menu .group-tabs > app-widget-host {
    display: flex;
    flex-direction: row;
    background-color: var(--c-primary);
    color: var(--c-text-odds);
    border-bottom: 1px solid var(--c-primary-b);
    height: 42px;
    font-size: 13px;
    cursor: pointer;
    align-items: center;
    border-radius: var(--r-md);
    margin-bottom: 2px;
    box-shadow: var(--bs-primary-b);
    color: var(--c-black-e);
}

.account-menu .group-tabs > app-widget-host:hover, .account-menu .group-tabs > app-widget-host:hover .logout-button {
    filter: brightness(0.8)
}

.account-menu .white-image img, .account-menu .blue-image img {
    width: 20px;
    height: 20px;
    margin: 0 15px
}

.account-menu .group-tabs > app-widget-host:hover .white-image, .account-menu .blue-image {
    display: none
}

.account-menu .group-tabs > app-widget-host:hover .blue-image {
    display: block
}

.account-page app-logout {
    text-align: center;
}

.account-page .logout-button {
    background-color: var(--c-blue-d);
    color: var(--c-text-light);
    height: 45px;
    max-width: 294px;
    width: 100%;
    font-size: 13px;
    border: 0;
    border-radius: 40px;
    margin: 40px 0px;
}

.account-menu .group-tabs .account-image:before {
    content: "";
    display: flex;
    align-content: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    padding: 0 10px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    filter: invert(1);
}

.account-menu .account-tab .account-image:before {
    background-image: url("/v1.01/r/images/africa/user-white.svg")
}

.account-menu .bet-open-tab .account-image:before {
    background-image: url("/v1.01/r/images/tipster/mybets.svg")
}

.account-menu .bet-settled-tab .account-image:before {
    background-image: url("/v1.01/r/images/site/history-bet-white.svg")
}

.account-menu .transaction-tab .account-image:before {
    background-image: url("/v1.01/r/images/africa/transaction-white.svg")
}

.account-menu .deposit-tab .account-image:before {
    background-image: url("/v1.01/r/images/africa/deposit-white.svg")
}

.account-menu .withdraw-tab .account-image:before {
    background-image: url("/v1.01/r/images/africa/payout-white.svg")
}

.account-menu .password-tab .account-image:before {
    background-image: url("/v1.01/r/images/africa/security-white.svg")
}

.account-menu .logout-tab .account-image:before {
    background-image: url("/v1.01/r/images/africa/log-out-white.svg")
}

/* active */
.account-profile .account-menu .account-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/bestbet/icon/user-yellow.svg")
}

.bet-open .account-menu .bet-open-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/site/mybets-yellow.svg")
}

.bet-settled .account-menu .bet-settled-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/site/history-bets-yellow.svg")
}

.account-transactions .account-menu .transaction-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/bestbet/icon/transaction-yellow.svg")
}

.account-deposit .account-menu .deposit-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/bestbet/icon/deposit-yellow.svg")
}

.account-withdraw .account-menu .withdraw-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/bestbet/icon/payout-yellow.svg")
}

.account-password .account-menu .password-tab .account-image:before {
    filter: invert(0);
    background-image: url("/v1.01/r/images/bestbet/icon/security-yellow.svg")
}

.account .withdraw-cancel .button-undefined{
    background-color: var(--c-emphasis-b);
    color: var(--c-primary);
    border-radius: 8px;
    padding: 8px 12px
}
.account .withdraw-cancel .confirm-api-button-wrapper .api-button-confirm{
    color: var(--c-primary);
    margin-bottom: 16px
}
.account .withdraw-cancel .confirm-api-button-wrapper button{
    color: var(--c-primary);
    border-radius: 8px;
    padding: 8px 12px;
}
.account .withdraw-cancel .confirm-api-button-wrapper .button-confirm-yes{
    background-color: var(--c-green);    
    margin-right: 8px
}
.account .withdraw-cancel .confirm-api-button-wrapper .button-confirm-no{
    background-color: var(--c-emphasis-b);   
    margin-left: 8px

}
.account .row-reservedwithdraw {
    color: var(--c-primary);
    margin-bottom: 16px;
}

#root .api-button-message-modal .ui-dialog-titlebar{
    background-color: var(--c-green);
}
.api-button-message-modal .ui-dialog-titlebar-close{
    background-image: url(/v1.5601/r/images/site/icons/material-symbols_close_white.svg);
}
/************************************
          Account My Profile
*************************************/
.account .main-content, .deposit-history-box {
    margin-bottom: 50px;
    color: var(--c-white-e)
}

.account .main-content {
    margin-top: 20px;
}

.account .main-content .section-title {
    background-color: transparent;
    color: var(--c-white-e)
}

.profile-info .form-label, .change-password .form-label {
    align-items: center;
    color: var(--c-text-primary);
    font-size: 13px;
    /* font-weight: bold; */
}

#root div[class*=mobile] .account .generic-form tel-input p-dropdown {
    width: 75px;
    border-radius: var(--r-border-radius-small);
    height: 40px;
    background-color: transparent;
}

#root .desktop .account .generic-form tel-input p-dropdown {
    border-radius: var(--r-border-radius-small);
    height: 40px;
    background-color: var(--c-background-input);
    color: var(--c-text-input)
}

#root .account .generic-form tel-input p-dropdown .ui-dropdown, .account .generic-form .form-row input {
    height: 40px;
    border: 0
}

#root .account .generic-form tel-input p-dropdown .ui-dropdown {
    background-color: transparent;
}

tel-input .ui-dropdown .ui-dropdown-clear-icon {
    display: none
}

#root .desktop .account tel-input input {
    width: 275px;
    background-color: var(--c-background-input);
    font-size: 13px;
    color: var(--c-text-input);
}

#root .desktop .account tel-input label {
    background-color: var(--c-background-input);
    color: var(--c-text-input)
}

#root .account tel-input label {
    padding: 0;
    width: 100%;
    height: 40px;
    justify-content: center;
    background-color: transparent;
}

#root .account .generic-form tel-input p-dropdown .ui-dropdown-trigger {
    display: none
}

.generic-form .form-row .form-label {
    padding-right: 0;
    margin-bottom: 8px;
}

.change-password .form-label {
    min-width: 200px
}

.profile-info .form-element-wrapper, .change-password .form-element-wrapper {
    align-items: flex-start;
}

.profile-info .form-element-wrapper > select {
    max-width: 350px;
    height: 40px;
    background-color: var(--c-background-input);
    font-size: 14px;
    color: var(--c-text-input);
}

.profile-info .form-element-wrapper > input, .change-password .form-element-wrapper > input, .profile-info .form-element-wrapper input {
    /* max-width: 350px; */
    height: 40px;
    background-color: var(--c-tint);
    width: 100%;
    border: 0;
    color: var(--c-white-e);
    font-size: 13px;
    padding-left: 10px;
}

.profile-info .form-element-wrapper ngx-combo-datepicker {
    max-width: 350px;
    width: 100%
}

.profile-info .form-element-wrapper ngx-combo-datepicker select {
    height: 40px;
    background-color: var(--c-blue-d);
    color: var(--c-white);
    font-size: 0.9em;
    padding-left: 10px
}

.profile-info #edit-personal-details > div:last-child {
    /* margin: 50px 0; */
}

.profile-info .checkbox-wrapper .field-label {
    color: var(--c-tint-b);
    margin-left: 15px
}

.profile-info ui-button {
    display: flex;
    justify-content: flex-start
}

.profile-info ui-button .button-submit-profile-form {
    color: var(--c-white-e);
    text-transform: uppercase;
    font-size: 0.9em;
    height: 40px;
    width: 200px;
    border-radius: var(--r-lg);
     background: var(--primary-divider-color);
}

body .profile-info .ui-chkbox {
}

body .ui-chkbox .ui-chkbox-box {
    border-radius: 50%;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
    background-color: var(--c-emphasis-c);
    border: 0;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active span {
    color: var(--c-black-e);
}

body .ui-chkbox .ui-chkbox-box.ui-state-active:not(.ui-state-disabled):hover {
    background-color: var(--c-emphasis-c);
    border: 0;
}

/************************************
          Account Transactions
*************************************/
body .ui-table.ui-table-hoverable-rows .ui-table-tbody>tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
    background-color: var(--body-footer-color);
    color: var(--c-white0e) /* color: var(--c-black-e); */
}

.button-change-password, .main-actions, .customer-actions button, .show-results, .buy-booking-actions button, .password-actions button, .deposit-actions button, .withdraw-actions button {
    
    color: var(--c-white-e);
    font-size: 0.9em;
    padding: 5px 10px;
    border-radius: var(--r-lg);
    min-height: 35px;
    background: var(--primary-divider-color);
}

body .account .ui-table .ui-table-thead>tr>th {
    color: var(--c-black-e);
    background-color: var(--c-primary);
    border: 0;
}

body .account .ui-table .ui-table-tbody>tr {
    color: var(--c-white);
    background-color: var(--body-footer-color);
    border: 0;
    text-align: center
}

body .ui-table .ui-table-tbody>tr>td {
    border: 1px solid var(--c-shade)
}

body .ui-button.ui-button-icon-only {
    border: 1px solid var(--c-shade)
}

body .ui-button.ui-button-icon-only .ui-button-text {
   background-color: var(--primary-divider-color)
}

/* Transaction Histori tabs */
.transaction-header {
    display: flex;
    justify-content: center;
    margin: 15px;
    align-items: center
}

#root .transaction-header > app-widget-host {
    margin: 0;
    background-color: transparent;
    border: 0
}

#root .transaction-header .deposit-history-header, #root .transaction-header .withdraw-history-header {
    position: relative;
    min-width: 180px;
    text-transform: uppercase;
    background: var(--c-primary);
    color: var(--c-black-e);
    margin: 0 5px;
    border-radius: var(--r-md);
    /* box-shadow: var(--bs-primary-b); */
    cursor: pointer;
    text-align: center
}

#root .transaction-header .deposit-history-header > div, #root .transaction-header .withdraw-history-header > div {
    height: 40px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    letter-spacing: .5px;
    font-weight: bold;
    color: var(--c-text-market);
    display: flex
}

#root:not(.add-deposit-history) .transaction-header .deposit-history-header > div, #root.add-deposit-history .transaction-header .deposit-history-header > div, #root.add-withdraw-history .transaction-header .withdraw-history-header > div {
    border-radius: var(--r-border-radius-medium);
    background-color: var(--c-emphasis-c);
    color: var(--c-text-odds-header);
}

#root.add-withdraw-history .transaction-header .deposit-history-header > div {
    background-color: var(--c-background-primary);
    color: var(--c-text-market);
}

#root .transaction-header .deposit-history-header:hover, #root .transaction-header .withdraw-history-header:hover {
    opacity: .9
}

/************************************
          Account Deposit
*************************************/
.credit-card, .giro, .paysafe, .skrill, .neteller {
    display: block
}

body:not(.credit-card-tab) .credit-card, body:not(.giro-tab) .giro, body:not(.paysafe-tab) .paysafe, body:not(.skrill-tab) .skrill, body:not(.neteller-tab) .neteller {
    display: none
}

body:not(.giro-tab):not(.paysafe-tab):not(.skrill-tab):not(.neteller-tab):not(.credit-card-tab) .giro {
    display: block
}

body:not(.giro-tab):not(.paysafe-tab):not(.skrill-tab):not(.neteller-tab):not(.credit-card-tab) .grio-filter .deposit-method-img> img {
    filter: brightness(2)
}

.giro-tab .grio-filter .deposit-method-img> img, .paysafe-tab .paysafe-filter .deposit-method-img> img, .skrill-tab .skrill-filter .deposit-method-img> img, .neteller-tab .neteller-filter .deposit-method-img> img, .credit-card-tab .credit-card-filter .deposit-method-img> img {
    filter: brightness(2)
}

.deposit-merge-image > app-widget-host {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin: 30px 0
}

.deposit-method {
    width: calc(100% - 40px);
    margin: 20px;
    max-width: 450px;
}

.deposit-method div {
    display: flex;
    width: 100%;
    background-color: #244241;
    padding: 10px;
    align-items: center;
    flex-direction: row;
    border-radius: 5px;
}

.deposit-method .deposit-image {
    min-width: 100px;
    height: 100px;
    background-image: url(/v1.136/r/images/accessbet/icons/paystack.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    border-right: 1px solid var(--c-primary-d)
}

.deposit-info-row {
    width: 100%;
}

.deposit-info-row .label {
    margin-right: 5px;
    line-height: 11px;
}

.deposit-info-row > app-widget-host {
    display: flex;
    flex-direction: row;
    margin-top: 4px;
    font-size: 10px;
    align-items: center;
}

.deposit-info-row .deposit-button {
    background-color: var(--c-green)
}

.deposit-info-row .time {
    margin-left: auto;
}

.deposit-info {
    color: var(--c-text-light);
    line-height: 1;
    width: 100%;
}

.deposit-title {
    font-size: 15px;
    color: var(--c-white-e);
    text-transform: uppercase;
}

.description-title, .no-history-records, .affiliate, .deposit-history-header, .withdraw-history-header {
    font-size: 14px;
    color: var(--c-white-e);
    margin-bottom: 15px
}

.no-history-records {
    text-align: center;
    margin-top: 30px;
    font-size: 10px;
    color: var(--c-text-light)
}

.description-text, .show-results, .subaccounts-wrapper > div:last-child {
    /* margin-bottom: 15px; */
}

.sub-title-text, .description-text, .min-deposit, .max-deposit, .subaccounts-wrapper > div:last-child {
    color: var(--c-text-primary)
}

.user-payment-content .generic-form {
    flex-direction: row;
}

.user-payment-content .generic-form .form-row {
    padding: 0;
}

.user-payment-content label {
    min-width: 70px;
}

.user-payment-content form {
    margin-right: 10px
}

.user-payment-content ui-button .button-submit-payment {
    height: 32px;
    border-radius: var(--r-border-radius-medium);
    background-color: var(--c-internal-user-background);
    color: var(--c-black-e);
    padding: 0 10px
}

.deposit-instructions-notes {
    display: flex;
    justify-content: center;
    color: var(--c-black-e)
}


body#root .account .deposit-voucher label{
    font-size: 0 !important;
}
#root .account .deposit-voucher label:before{
    content: "Transfer code* ";
    font-size: 10px !important
}
.deposit-menu > app-widget-host {
    display: flex;
    flex-direction: row;
    justify-content: center
}
.deposit-menu .deposit-menu-item:first-of-type {
    margin-right: 8px
}
.deposit-menu .deposit-menu-item div {
    font-size: 13px;
    text-transform: uppercase;
    line-height: 15px;
    padding: 10px;
    min-height: 42px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-primary);
    color: var(--c-primary);
    border-radius: 3px;
    font-weight: 600
}
.deposit-menu .deposit-menu-item.active div {
    color: var(--c-emphasis-c);
    background-color: var(--body-footer-color);
    border: 1px solid
}

/************************************
          Account Responsible
*************************************/
#root .responsible-gaming .window-tabs {
    justify-content: flex-start
}

.responsible-gaming .window-tabs > div, .responsible-gaming .window-tabs.limit-tabs > div {
    color: var(--c-white);
    font-style: normal;
    font-weight: 500;
    width: auto;
    padding: 0 20px;
    min-width: 200px;
    background-color: var(--c-background-betslip);
    border-radius: var(--r-border-radius-small);
    margin: 0 2px 2px 0;
    height: 42px;
    font-size: 13px;
    cursor: pointer;
    line-height: 41px
}

.responsible-gaming .window-tabs .window-tab.tab-selected {
    color: var(--c-text-betslip-betting-body)
}

.responsible-gaming .window-tabs.limit-tabs .window-tab.tab-selected {
    font-size: 13px!important;
    background-color: var(--c-background-betslip);
    color: var(--c-white-e)
}

.responsible-gaming .window-tabs.limit-tabs > div {
    font-size: 13px!important;
    background-color: var(--c-background-betslip-title);
    color: var(--c-white)
}

/************************************
          Account Documents
*************************************/
#root .history-header > div label {
    color: var(--c-black-e)
}
body#root .account:not(.login) .profile-info .history-header label, 
#root .label-value-container input, 
#root .affiliate-service h3 {
    font-size: 10px!important;
   /* color: var(--c-primary); */
    /* max-width: 215px; */
    display: flex;
    align-items: center;
    border-radius: var(--r-sm);
    font-weight: 500
}
body#root .account:not(.login) .profile-info .history-header label[for="history_period"],
body#root .account:not(.login) .profile-info .history-header label[for="history_from"],
body#root .account:not(.login) .profile-info .history-header label[for="history_to"]{
    color: var(--c-primary)
}


#root .account label {
    color: var(--c-text-light);
    /* margin-bottom: 8px; */
}

#root .account .user-payment-content .payment-method label {
    white-space: nowrap;
    margin-right: 10px
}

#root .account .user-payment-content .payment-method .button-submit-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--c-emphasis-c);
    border-radius: 8px;
    padding: 20px 30px;
    line-height: 38px;
    color: var(--c-black-e);
}

#root .account .user-payment-content .payment-method .form-row.payment-form-errors {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
}

#root .account .user-payment-content .payment-method .form-row.payment-form-errors .form-element-error {
    color: red
}

app-file-input-field {
    width: 100%;
}

#root .label-value-container input {
    background-color: var(--c-tint);
    text-indent: 8px;
    width: 100%;
}
#root .label-value-container input::placeholder,
#root .label-value-container input ::placeholder{
    color: var(--c-white)
}
#root .label-value-container input[type="password"]{
    background-color: var(--c-green)
}

.label-value-container input {
    margin-right: 0;
    color: black
}

.upload-wrapper input {
    color: var(--c-text-primary)
}

#root .affiliate-service .label-value-container, .affiliate-service .history-filter, .affiliate-service .history-from, .affiliate-service .history-to {
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    height: 100%
}

#root .label-value-container {
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
    height: 40px;
    max-width: 500px;
}

#root .affiliate-service .label-value-container {
    flex-direction: column
}

.affiliate-service .history-filter {
    justify-content: flex-start
}

.element.value input, .element.value select {
    height: 47px;
    border: 0;
    background-color: var(--c-blue-d);
    color: var(--c-white);
    border-radius: var(--r-border-radius-small)
}

#root .element.value .file-input input {
    width: 100%;
    max-width: unset;
    text-indent: 0px;
    height: 47px;
    padding: 0px;
    background-color: var(--c-green);
}

#root .element.value .file-input input::file-selector-button {
    width: 100%;
    height: 100%;
    padding: 0px 5px;
    text-align: left;
    outline: none;
    border: 0;    
    color: var(--c-white-e);
    background-image: url(/v1.5601/r/images/site/icons/material-symbols_upload.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) 50%;
    background-color: var(--c-tint);
}
::-webkit-file-upload-button {
    background-color: var(--c-tint)!important
    background-color: var(--c-tint) !important;
    
                                    
}

.element.value select {
    /* width: 179px; */
}

.element.value {
    position: relative;
    min-width: 200px;
    display: flex;
    align-items: center;
}

.element.value app-password-input-field {
    width: 100%;
}

.element.value .required-inline-field {
    /* position: absolute; */
    color: var(--c-background-login-button);
    right: 0;
    top: 0;
    color: var(--c-red);
    margin: 0px 5px /* transform: translateX(-100%); */
}

.beto-user-documents-upload .required-inline-field {
    display: none;
}

.responsible-gaming button, .profile-document-upload button.btn-submit {
    background-color: var(--c-emphasis-c);
    color: var(--c-black-e);
    font-size: 0.9em;
    padding: 10px 20px;
    margin-top: 20px;
    min-width: 146px;
    border-radius: var(--r-lg);
    margin-left: 20px
}

.profile-document-upload button.btn-submit {
    margin-left: 0px;
}

.responsible-gaming button.btn-reset-values, .responsible-gaming button.btn-clear-all, .profile-document-upload button.btn-remove-file {
    background-color: var(--c-green);
    color: var(--c-white);
    border-radius: var(--r-lg)
}

.profile-document-upload button.btn-remove-file {
    width: 30px;
    height: 30px;
    min-width: unset;
    font-size: 0px;
    padding: 0px;
    border-radius: 6px;
    background-color: transparent;
    background-image: url(/v1.100/r/images/accessbet/icons/mdi_trash.svg);
    background-size: 28px;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.responsible-gaming button.btn-save-acccess, .responsible-gaming button.btn-select-all, .responsible-gaming button.btn-suspend-account, .profile-document-upload button.btn-submit {
    color: var(--c-black-e)
}

.access-limits-tabs-header, .access-limits-tabs-rows, .access-limits-tabs-footer {
    display: flex;
    color: var(--c-white);
    font-size: 14px;
    align-items: center;
    margin: 20px 0;
}

.access-limits-tabs-header > div, .access-limits-tabs-rows > div, .access-limits-tabs-footer > div {
    display: flex;
    flex: 1;
    justify-content: flex-start
}

.responsible-gaming app-access-limits div:last-child {
    display: flex;
}

.responsible-gaming button.btn-reset-values {
    margin-left: auto
}

app-time-out h3, app-self-suspension h3 {
    text-align: center;
}

.permanent-suspension-label {
    margin: 0px 10px;
}

.permanent-suspension-warning {
    margin: 5px 10px;
    background-color: var(--c-red);
    width: auto;
    padding: 5px;
    border-radius: 5px;
    s }

.documents-type app-set-value {
    max-width: unset;
    margin: 0 20px
}

.documents-list .list-header, .documents-list .list-info, .upload-message {
    font-size: 14px;
    color: var(--c-white)
}

.documents-list .list-header .header-element , .documents-list .list-header .info-element {
    min-width: 200px;
    max-width: 200px;
    text-align: left
}

.documents-list .list-header {
    display: none;
}

#root div[class*="mobile"] app-block.documents-list {
    padding: 0px 15px;
}

#root div[class*="mobile"] .documents-list .documents-list tr {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 32px;
}

#root div[class*="mobile"] .documents-list .documents-list tr td {
    font-size: 12px;
    color: var(--c-white-e)
}

#root div[class*="mobile"] .documents-list .documents-list tr td:not(.info-element.status)::before {
    content: attr(data-column)":";
    margin-right: 5px;
    color: var(--c-text-light)
}

#root div[class*="mobile"] .documents-list .documents-list tr td.info-element.status {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translate(0%,-50%);
    font-size: 0px;
    background-repeat: no-repeat;
    background-size: 22px;
    background-position: center;
}

#root div[class*="mobile"] .documents-list .documents-list tr td.info-element.status.approved {
    background-image: url(/v1.235/r/images/accessbet/icons/nt-success-i.svg);
    border-radius: 50%;
}

#root div[class*="mobile"] .documents-list .documents-list tr td.info-element.status.rejected {
    background-image: url(/v1.235/r/images/accessbet/icons/nt-error-i.svg);
    border-radius: 50%;
}

#root div[class*="mobile"] .documents-list .documents-list tr td.info-element.status.pending {
    background-image: url(/v1.235/r/images/accessbet/icons/nt-warning-i.svg);
}

/************************************
          Account Password
*************************************/
.files-group, .upload-form {
    display: flex;
    align-items: center;
    max-width: 500px;
}

.upload-form {
    flex-wrap: wrap;
    margin-bottom: 20px
}

.files-group {
    width: 100%;
    flex-wrap: wrap;
    margin-top: 10px;
}

.files-group app-label-value {
    width: calc(100% - 40px);
    margin-left: auto
}

.files-group app-label-value ~ div {
    /* padding:15px; */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 30px;
    margin-right: 10px;
    /* width:100%; */
}

.files-group app-label-value ~ div .upload-result-success {
    width: 20px;
    height: 20px;
    background-image: url(/v1.235/r/images/accessbet/icons/nt-success-i.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--c-white-e);
    border-radius: 50%;
    /* margin-right:5px; */
}

.files-group app-label-value ~ div p {
    font-size: 12px;
    margin: 0px;
    display: none;
}

#root div[class*="mobile"] .files-group .label-value-container {
    margin: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#root div[class*="mobile"] .files-group .label-value-container .element.label {
    margin-bottom: 0px;
    width: 50%;
}

#root div[class*="mobile"] .files-group .label-value-container .element.value {
    min-width: unset
}

#root div[class*="mobile"] .files-group .label-value-container .element.value progress {
    width: 100%;
}

#root div.mobile .files-group .label-value-container {
    max-width: unset;
}

#root div[class*="mobile"] .files-group .label-value-container .element.value progress {
    -webkit-appearance: none;
}

#root div[class*="mobile"] .files-group .label-value-container .element.value ::-webkit-progress-bar {
    background-color: var(--c-primary-d);
    border-radius: 10px;
    border: 2px solid var(--c-blue-c)
}

#root div[class*="mobile"] .files-group .label-value-container .element.value ::-webkit-progress-value {
    background-color: var(--c-emphasis-c);
    border-radius: 10px;
}

#root div[class*="mobile"] .upload-form .btn-clear {
    background-color: var(--c-green);
    padding: 8px 16px;
    border-radius: 15px;
    font-size: 10px;
    margin-right: 15px;
    color: var(--c-white-e);
}

/************************************
          Account affiliate
*************************************/
.go-back {
    display: none
}

.subaccounts-main-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.main-actions.expand-collapse-all, .subaccounts-main-actions .main-actions {
    margin: 30px 0
}

.user-name.shop {
    color: var(--c-border-sport-coupon)!important;
    text-align: left
}

.user-name.customer, .user-option, .user-more {
    text-align: left
}

.report-actions.account-statement, .report-actions.betting-history {
    background-color: var(--c-text-schedule);
    padding: 7px;
    color: var(--c-text-header-menu);
    margin-right: 5px
}

.report-actions.can-place-bets, .report-actions.buy-booked-bet {
    background-color: var(--c-border-sport-coupon);
    padding: 7px;
    color: var(--c-text-primary);
    margin-right: 5px
}

.report-actions.buy-booked-bet {
    margin: 0
}

.report-actions.can-place-bets.selected {
    color: var(--c-text-primary)!important;
    background-color: red
}

.affiliate-service .list-header th.header-element:first-child {
    width: 21%
}

.affiliate-service .list-header th.header-element:nth-child(2) {
    width: 5%
}

.affiliate-service .list-header th.header-element:nth-child(3) {
    width: 28%
}

.affiliate-service .list-header th.header-element:nth-child(4) {
    width: 12%
}

.affiliate-service .list-header th.header-element:nth-child(5) {
    width: 12%
}

.affiliate-service .list-header th.header-element:nth-child(6) {
    width: 6%
}

.affiliate-service .list-header th.header-element:nth-child(7) {
    width: 16%
}

.affiliate-service .subaccounts-wrapper td {
    white-space: nowrap
}

.report-actions.deposit {
    background-color: var(--c-border-sport-coupon);
    color: var(--c-text-primary);
    margin-right: 5px;
    padding: 7px 10px
}

.report-actions.withdraw {
    background-color: var(--c-text-special-market);
    color: var(--c-text-primary);
    margin-right: 5px;
    padding: 7px 10px
}

.report-actions.change-password {
    color: var(--c-text-primary);
    background-color: red;
    padding: 7px 10px
}

body .ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar-icon span {
    /* background: var(--c-primary-c); */
    color: var(--c-white-e);
    border: 0;
}

.customer-actions, .buy-booking-actions, .password-actions, .deposit-actions, .withdraw-actions {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse
}

body .ui-dialog .ui-dialog-content {
        color: var(--c-white-e);
    border: 0;
    padding: 20px;
    background: hsla(163, 25%, 19%, 1);
    background: linear-gradient(90deg, hsla(163, 25%, 19%, 1) 0%, hsla(163, 31%, 20%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(163, 25%, 19%, 1) 0%, hsla(163, 31%, 20%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(163, 25%, 19%, 1) 0%, hsla(163, 31%, 20%, 1) 100%)
}

body .ui-dialog .ui-dialog-content .element.label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 120px
}

/************************************
          Account History Bets
*************************************/
.history-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 10px 0px;
    align-items: center;
}

.history-header > div {
    width: calc(33.33% - 8px);
    margin: 4px;
    display: flex;
    flex-wrap: wrap;
    padding-right: 0px;
    align-items: flex-end;
    min-height: 60px
}

.history-header > div p-dropdown, .history-header > div p-calendar {
    width: 100%;
    /* display: flex; */
    /* min-height: 38px; */
}

.history-header > div .ui-calendar {
    display: flex;
    flex-wrap: wrap;
}

.history-header > div .ui-calendar input {
    /* flex:1; */
    width: calc(100% - 33px);
    background-color: var(--c-white-e);
    color: var(--c-black-e);
    border: 1px solid var(--c-blue-d);
}

#root .history-header > div .ui-calendar .ui-calendar-button {
    width: 33px;
}
#root .history-header > div .ui-calendar .ui-calendar-button span::before {
    display:none;
}
#root .history-header > div .ui-calendar .ui-calendar-button span.ui-button-icon-left,
#root .account .ui-calendar-button span.ui-button-icon-left{
    background-image: url(/v1.5601/r/images/site/icons/CalendarIcon.svg);
    background-repeat:no-repeat;
    background-position:center;
}


.history-header > div .ui-dropdown, .history-header > div .ui-calendar {
    min-width: unset;
    width: 100%;
    border: 0px solid var(--c-primary-d);
    background: var(--c-primary-d);
}
body#root .ui-dropdown-panel{
    background-color: var(--c-primary-c);
    border: 0
}
body#root .ui-dropdown-panel li.ui-state-highlight,
body#root .ui-dropdown-panel li:hover{
    background-color: var(--body-footer-color);
    color: #fff;
}
body .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item{
    color: #fff;
    }
.history-header > div.history-show {
    /* margin-top: auto; */
}

.history-header > div.history-show button {
    height: 35px;
    width: 100%;
    /* background-color: var(--c-blue-d); */
    color: var(--c-white);
}

.history-filter {
    display: flex;
    align-items: center;
    /* padding-bottom: 8px; */
    width: 100%
}

.history-from, .history-to,.history-show {
    display: flex;
    align-items: center;
    height: 60px
}

#root .ui-inputwrapper-focus .ui-state-focus {
    border: 0;
}

body .ui-inputtext:enabled:focus:not(.ui-state-error) {
    border-color: var(--c-blue-d);
}

#root app-history.bet-history .history-filter > label,#root app-history.bet-history .history-product > label, #root app-history.bet-history .history-period > label {
    display: none
}

.history-to .ui-datepicker {
    left: unset!important;
    right: 0px
}

#root .history-header label {
    max-width: 100%;
    width: 100%
}

#root .history-header label.ui-dropdown-label {
    /* width: 241px; */
    background-color: var(--c-primary-b);
    border-radius: 0;
    min-height: 33px;
    font-size: 13px !important;
    justify-content:center
}

.history-from input, .history-to input {
    /* width: 309px; */
}

.history-bet-wrapper {
    border: 1px solid var(--c-blue-d);
    margin: 20px 0px;
    border-top: 0;
    border-radius: 10px;
    color: var(--c-white);
    background-color: var(--c-primary-b);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px 12px;
    position: relative
}

#root app-history .history-systems-wrapper .history-system-wrapper.history-bet-header, .history-system-wrapper:not(.pools) {
    display: none;
    padding: 0;
    justify-content: space-between;
    /* background: var(--c-background); */
    width: 100%
}

.history-bet-header {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 10px 0px;
    border-left: 0;
    border-radius: var(--r-md);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--c-white);
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}

.history-bet-header .history-bet-toggle {
    cursor: pointer;
    display: flex;
    /* height: 100%; */
    /* width:100%; */
    border: 0;
    justify-content: flex-end;
    margin: 0px 10px;
    margin-right: 0px;
    order: 0;
    /* position: absolute; */
    left: 0;
    align-items: center
}
.product-pools .history-bet-header .history-bet-toggle {
    display:none
}
.history-bet-header .history-bet-toggle::after {
    /* content:"Bet Details"; */
    order: -1;
    font-size: 0.9em;
    margin-right: 5px;
}

.history-bet-wrapper.expanded .history-bet-header .history-bet-toggle:before {
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    transform: rotate(90deg);
    background-image: url(/v1.5601/r/images/site/icons/arrow-right-black.svg);
}

.history-bet-wrapper .history-bet-header .history-bet-toggle:before {
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: center;
    transform: rotate(-90deg);
    background-image: url(/v1.5601/r/images/site/icons/arrow-right-black.svg)
}

.history-bet-wrapper .history-bet-header .history-bet-toggle:after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    content: ""
}

.history-bet-wrapper:not(.expanded) .history-bet-match-details {
    display: none
}

.history-bet-info > div {
    padding-right: 10px
}

.history-bet-info .history-bet-type {
    /* padding-left:10px; */
    /* font-size: 15px; */
}

.history-bet-info > div.history-bet-lines {
    display: none;
}

#root app-history .history-systems-wrapper .history-system-wrapper.history-bet-header > div, .history-system-wrapper > div {
    flex: 20%
}

.history-systems-wrapper span:not(.history-system-label-value) {
    /* display: none; */
}

.history-systems-wrapper span.history-system-label-value {
    position: absolute;
    top: 36px;
    left: 80px;
}

.history-bet-info, .history-bet-date-time-id, .history-bet-content, .bet-infos-title-wrapper, .bet-infos-title-wrapper .bet-infos-toggle, .history-bet-status.won, .history-bet-status.lost, .history-bet-status.open, #root app-history .history-systems-wrapper .history-system-wrapper.history-bet-header, .history-system-wrapper, .history-bet-status.cancelled {
    color: var(--body-footer-color)
}

#root app-history .history-systems-wrapper {
    width: 100%;
    order: 5;
}

.history-bet-content {
    order: 3;
    width: 100%;
    /* margin: 0px 10px; */
}

.bet-infos {
    display: none
}

.history-bet-info, .history-bet-date-time-id {
    display: flex;
}

#root .history-bet-status {
    margin-left: auto;
    padding: 1px 8px;
    text-transform: uppercase;
    font-size: 10px;
    border-radius: 2px;
    /* margin-right: 10px; */
}

.history-bet-status.won, .history-bet-status.open, .history-bet-status.won-cashout {
    color: var(--c-background-betslip-button-bet)
}

.history-bet-status.cancelled {
    background-color: red
}

.history-bet-status.lost {
    background-color: red
}

.history-bet-status.won {
    background-color: green;
}

.history-bet-status.open {
    background-color: #FFC000;
    color: var(--c-black-e)
}

.history-bet-date-time-id {
    display: flex;
    /* margin-left: auto; */
    width: calc(100% - 35px);
    order: -1;
    justify-content: flex-start;
    /* margin-bottom: 5px; */
    padding: 4px 0px;
    /* flex: 1; */
}

.history-bet-content app-bet-match {
    display: flex;
    flex-direction: column;
}

.history-selection-info {
    display: flex;
    padding: 5px 0px;
    color: var(--body-footer-color);
    border-top: 1px solid var(--body-footer-color);
    margin-top: 5px;
    font-size: 10px
}

.history-match-info {
    display: flex;
    order: -1;
    justify-content: space-between
}

.history-bet-match-wrapper .bet-match-tournament-info {
    color: var(--body-footer-color);
    font-size: 0.85em
}

.history-bet-match-wrapper .history-bet-match-name {
    /* font-weight: bold; */
    color: var(--c-black-e);
    margin-bottom: 5px;
    font-size: 12px;
}

.history-bet-match-wrapper .history-bet-match-name .history-match-banker {
    position: unset;
}

#root .match-date-code-wrapper {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    color: var(--body-footer-color);
    /* flex-wrap: nowrap; */
    justify-content: flex-end;
    white-space: nowrap;
    font-size: 0.85em;
    flex-direction: column;
}

#root .match-date-code-wrapper::before {
    margin-bottom: auto;
    margin-left: auto;
    /* width: 100%; */
    font-size: 0.8em;
    text-align: right;
    /* padding:2px 5px; */
}

#root .history-bet-match-details.lost .match-date-code-wrapper::before {
    content: "Lost";
    color: var(--c-red);
}

#root .history-bet-match-details.won .match-date-code-wrapper::before {
    content: "Won";
    color: green
}

#root .history-bet-match-details.pending .match-date-code-wrapper::before {
    content: "Unsettled";
    color: #FFC000;
}

#root .match-date-code-wrapper .betslip-match-code {
    display: none
}

.history-match-info .match-and-time {
    display: flex;
    flex-direction: column-reverse
}

.history-bet-date-time-id div:not(.history-bet-id) {
    padding-right: 5px;
    color: var(--body-footer-color)
}

.history-bet-date-time-id div.history-bet-time::after {
    content: "|";
    margin-left: 5px;
}

.history-bet-date-time-id .history-bet-id-copy {
    position: relative;
    z-index: 2;
    display: flex;
    margin-left: 5px;
}

.history-bet-date-time-id .history-bet-id-copy input {
    width: 18px;
    height: 18px;
    font-size: 0px;
    background-color: transparent;
    border: 0px;
    background-image: url(/v1.150/r/images/accessbet/icons/ph_copy.svg);
    background-size: 18px;
    background-position: center;
    opacity: .5;
}

.history-bet-date-time-id .history-bet-id-copy div {
    font-size: 0px;
    height: 16px;
}

.history-bet-date-time-id .history-bet-id-copy div::before {
    content: "Copied!";
    font-size: 11px;
    margin-left: 5px;
}

.history-bet-date-time-id .history-bet-id {
    /* margin-left:auto; */
}

.history-bet-date-time-id .history-bet-id:before {
    content: "ID: "
}

.history-bet-match-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 10px;
    padding: 10px;
    background-color: var(--c-primary-b);
    border-radius: 3px;
}
.history-bet-match-details:not(:first-child) .history-bet-match-wrapper{
    margin-top:20px;
}
.history-bet-match-details:not(:first-child) .history-bet-match-wrapper::before {
    position:absolute;
    top:-10px;
    width:100%;
    height:1px;
    left:0px;
    background-color: var(--c-blue);
    content:""
}
.selection-and-odds {
    display: flex;
    /* width: 100%; */
    flex: 1;
    /* position: absolute; */
    right: 0;
    top: 0
}

.selection-and-odds .history-bet-odds, .history-bet-footer span {
    /* margin-left: 10px; */
}

.selection-and-odds .history-bet-odds {
    margin-left: auto;
    color: var(--c-black-e)
}

.selection-and-odds .history-bet-odds, .history-bet-possible-winnings {
    /* color: var(--c-black-e); */
}

.history-bet-footer .negative {
    color: red
}

.history-bet-footer .positive {
    color: var(--c-background-bet-button)
}

.history-bet-match-time {
    opacity: 1;
    order: -1;
}
.expanded .history-bet-footer  {
     border-bottom: 2px solid var(--c-blue);
    margin-bottom: 8px;
}
.history-bet-footer {
    display: flex;
    font-size: 15px;
    color: var(--body-footer-color);
    line-height: 20px;
    justify-content: space-between;
    flex-direction: column;
    padding: 0 20px;
    padding: 10px 0px;
    order: 0;
    width: 100%;
    border-top: 1px solid var(--c-blue);
    margin-top: 0px;
   
}

tfoot .history-bet-footer {
    padding: 10px
}

.history-bet-footer > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
}
.history-bet-footer > div > div{
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid;
}
.history-bet-wrapper.expanded .market-name, .history-bet-wrapper.expanded .history-bet-match-time, .history-bet-wrapper.expanded .history-bet-footer {
    /* display: none; */
}

.history-bet-wrapper.expanded .market-name {
    order: -1;
    flex-wrap: wrap;
}

.history-bet-wrapper.expanded .history-bet-content .history-bet-match-details .market-name .bet-live-info {
    /* width:100%; */
}

.history-bet-wrapper.expanded .market-name::after {
    content: ":";
    margin-right: 5px
}

.bet-infos-title-wrapper.expanded + .bet-infos-content {
    background-color: var(--c-background-primary);
    color: var(--c-black-e);
    border: 0
}

.history-bet-wrapper .history-actions-wrapper:not(:empty) {
    justify-content: center;
    padding: 20px 10px;
    order: 3;
    width: 100%;
    border-top: 1px solid var(--c-blue);
}

#root .history-bet-wrapper .history-actions-wrapper .history-bet-cancel {
    color: var(--c-text-light);
    /* border-radius: var(--r-md); */
    background-color: transparent;
    border-right: 1px solid var(--c-blue);
    border-left: 1px solid #0D182E /* margin-left: 3px; */
}

.history-bet-wrapper .history-actions-wrapper .history-bet-reprint, #root .history-bet-wrapper .history-actions-wrapper .history-bet-confirm, .history-bet-wrapper .history-actions-wrapper .history-bet-cashout {
    background: transparent;
    color: var(--c-text-light);
    /* border-radius: var(--r-lg); */
    max-width: 264px;
}

.history-bet-wrapper .history-actions-wrapper .history-bet-action {
    max-width: 120px;
    /* border-radius: var(--r-lg); */
    font-size: 0.9em;
}

.history-bet-wrapper .history-actions-wrapper .history-bet-action.history-bet-reload, .history-bet-wrapper .history-actions-wrapper .history-bet-action.history-bet-reload-end {
    background-color: var(--body-footer-color);
    color: var(--c-white-e)
}

.history-bet-wrapper .history-actions-wrapper .history-bet-action.history-bet-reload-end {
    max-width: 100%;
}

.history-bet-wrapper .history-actions-wrapper .history-bet-action.history-bet-cashout {
    order: -1;
    background-color: transparent;
    border-right: 1px solid var(--c-blue);
    color: var(--c-black-e)

}

.bet-infos-title-wrapper {
    border-top: 1px solid var(--c-emphasis-b);
}

.cashout-description {
    color: var(--c-black-e);
    padding: 30px 0;
}
.product-pools .history-system-wrapper.pools {
    padding:0;
}
.history-system-wrapper.pools div:not(.history-system-type){
    display:none;
}
.history-system-wrapper.pools div.history-system-type {
    /* position:relative; */
    display:flex;
    font-size:0px;
    height: 0;
}
.history-system-wrapper.pools div.history-system-type span.history-pools-toggle {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:64px;
    font-size:0px;
    display: block;
}
.history-system-wrapper.pools div.history-system-type span.history-pools-toggle::before {
    width:24px;
    height:24px;
    display:block;
    content:"";
    background-image:url(/v1.285/r/images/accessbet/icons/ant-design_caret-left-outlined.svg);
    background-size:24px;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    right:10px;
    top:10px;
    filter:invert(1);
}
.history-systems-wrapper:not(.pools-collapsed) div.history-system-type span.history-pools-toggle::before {
    transform:rotate(180deg)
}
.history-system-wrapper.pools div.history-system-type .history-system-type-title{
    display:none;
}
.history-pools-ticket {
    /* padding-top:10px; */
    /* border-top:2px solid var(--c-blue); */
}
 .history-pools-ticket table.betslip-html > tbody {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
     font-size:13px;
}
 .history-pools-ticket table.betslip-html > tbody tr.head {
     width:60%;
     margin-bottom:10px;
     padding:0px 10px;
 }
.history-pools-ticket table.betslip-html > tbody tr.head + tr {
    width:40%;
    display:flex;
    text-align:center;
}
.history-pools-ticket table.betslip-html > tbody tr.head + tr td:not(.pools-header) {
    display:none
}
.history-pools-ticket table.betslip-html > tbody tr.head + tr td.pools-header {
    flex:1;
}
 .history-pools-ticket table.betslip-html tbody .match.selection {
     width:100%;
     padding:0px;
     background-color:var(--c-blue);
     border-radius:3px;
     
 }
.history-pools-ticket table.betslip-html tbody .match.selection td.match::before {
    
    order:3;
    margin-left:auto;
    font-size:0.8em
}
.history-pools-ticket table.betslip-html tbody .match.selection.selection-pending td.match::before {
    content:"Open";
    color:var(--c-emphasis-c)
}
.history-pools-ticket table.betslip-html tbody .match.selection.selection-won td.match::before {
    content:"Won";
    color:green
}
.history-pools-ticket table.betslip-html tbody .match.selection.selection-lost td.match::before {
    content:"Lost";
    color: var(--c-red);
}
 .history-pools-ticket table.betslip-html tbody .match.selection .nr {
     display:none;
 }
 .history-pools-ticket table.betslip-html tbody .match.selection td.match {
     width:60%;
     padding:6px 10px;
     display:flex;
 }
 .history-pools-ticket table.betslip-html tbody .match.selection td.match ~ td {
     width:13.3333%;
     text-align:center;
     display:flex;
     justify-content:center;
     align-items:center;
     position:relative;
 }
 .history-pools-ticket table.betslip-html tbody .match.selection td.match ~ td:not(:last-child)::before {
     content:"";
     position:absolute;
     width:1px;
     height:70%;
     right:0px;
     background-color:var(--c-blue-c);
     top:50%;
     transform:translate(0%,-50%);
 }
.history-pools-ticket table.betslip-html tbody .match.selection td.match .date {
    color:var(--c-text-light)
}
.history-pools-ticket table.betslip-html > tbody tr:last-child {
    order:5
}
.history-pools-ticket table.betslip-html > tbody table.bets tr:not(.totals) {
    display:none;
}
.history-pools-ticket table.betslip-html > tbody table.bets tr.totals {
    margin-bottom:10px;
    display:flex;
    justify-content:space-between
}
.history-pools-ticket table.betslip-html > tbody table.bets tr.totals td:last-child{
    text-align:right;
}
/************************************
          Account Withdraw
*************************************/
body .body .content .rollover-left-amount > app-widget-host {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 5px 0;
    color: var(--c-black-e);
}

body .body .content .rollover-left-amount > app-widget-host >span {
    display: none
}

body .body .content .rollover-amount > app-widget-host {
    display: flex;
    flex-direction: row
}

.payment-header {
    margin-top: 40px;
    margin-bottom: 30px;
}

.payment-header > div {
    padding: 0px 20px;
    font-size: 20px;
    font-weight: 500
}

.payment-description > div {
    padding: 0px 20px;
    font-size: 12px;
}

.payment-container > app-widget-host {
    display: flex;
    width: 100%;
    justify-content: center;
    position: relative;
    padding: 5px 20px;
    margin: 0px auto 40px;
    /* background-color: var(--c-primary); */
    color: var(--c-black-e);
}

.payment-container.withdraw > app-widget-host {
    padding: 20px;
}

.payment-method > div {
    width: 100%;
    display: contents;
    flex-direction: column;
    color: var(--c-emphasis)
}

.payment-method > div .generic-form, .payment-method, .payment-method > div .generic-form > div, .payment-method > div .generic-form app-fields-page, .payment-method > div .generic-form form, .payment-method > div .generic-form form > div, .payment-method > div .generic-form form > div > div, .payment-method > div .generic-form app-fields-section, .payment-method > div .generic-form app-fields-section > div {
    display: contents;
}

.payment-method .fld-password {
    order: 3
}

.payment-method > div.payment-error div {
    color: var(--c-white-e);
    background-color: var(--c-red);
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 5px;
}

.payment-method ui-button {
    order: 4;
    text-align: center;
    margin-top: 25px;
}

.withdrawal > .fld-amount {
    margin-bottom: 20px
}

div[class*=mobile] .generic-form .deposit-accessbet .fld-amount .form-row .form-element-wrapper {
    position: relative;
}

div[class*=mobile] .generic-form .deposit-accessbet .fld-amount .form-row .form-element-wrapper::before {
    content: "Min 100 NGN";
    position: absolute;
    right: 0px;
    height: 40px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 8px;
    font-size: 10px;
    max-width: 80px;
    width: 100%;
}

div[class*=mobile] .generic-form .deposit-accessbet .fld-amount .form-row .form-element-wrapper input {
    padding-right: 96px;
}

.account-header-menu {
    width: 100%;
}

.account-header-menu > app-widget-host {
    display: flex;
    flex-direction: row;
    padding: 16px 20px;
    /* padding-left: 30px; */
    /* background-image: url(/v1.076/r/images/accessbet/icons/mingcute_user-4-fill.svg); */
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 8px 50%;
    position: relative;
}

.account-header-menu > app-widget-host::before {
    content: "";
    bottom: 0px;
    width: calc(100% - 40px);
    position: absolute;
    left: 20px;
    height: 1px;
    background-color: var(--primary-success-color)
}

.account-header-menu .account-info-container {
    width: 100%;
}

.account-header-menu .account-info-container > app-widget-host {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding-left: 44px;
    background-image: url(/v1.076/r/images/accessbet/icons/mingcute_user-4-fill.svg);
    background-size: 44px;
    background-repeat: no-repeat;
    background-position: 0px 50%;
}

.username-container {
    width: 50%;
    font-size: 18px;
    color: var(--c-white-e);
}

.username-container > app-widget-host {
    display: flex;
    flex-direction: row;
    padding: 0px 8px;
}

.username-container .username {
    margin-left: 5px;
}

.id-container {
    width: 50%;
    color: var(--c-text-light);
    margin-top: 5px;
}

.id-container > app-widget-host {
    display: flex;
    flex-direction: row;
    /* justify-content: flex-end; */
    padding: 0px 8px;
    font-size: 10px;
}

.header .id-container {
    width: 100%;
    color: var(--c-white-e)
}

.header .id-container > app-widget-host {
    padding: 0px
}

.header .id-label {
    white-space: nowrap;
}

.account .body.header-menu {
    margin-bottom: 0px;
}

.desktop .user-top > app-widget-host {
    flex-direction: column;
    align-items: flex-start
}

.user-balance-overview > app-widget-host {
    padding: 15px 20px;
    padding-top: 0px;
}

.user-top > app-widget-host {
    flex-direction: column;
    /* padding: 8px; */
    align-items: center;
}

.user-top .user-top-block {
    flex: 1;
    /* margin:8px; */
    height: 118px;
    /* flex: 1; */
    border-radius: 10px;
    overflow: hidden;
}

.user-top .user-top-block.user-bonus > app-widget-host {
    /* justify-content:space-between; */
    height: 100%;
}

.user-top .user-top-block.user-balance {
    margin-right: 8px
}

.desktop .user-top .user-top-block {
    max-width: 500px;
    width: 100%;
}

.balance-row, .bonus-row {
    padding: 16px 0px;
    /* padding-top: 8px; */
    /* background-color: var(--c-blue-d); */
    /* height: 100%; */
    /* border-radius: 10px; */
    color: var(--c-white);
    width: 100%;
}

.balance-row > app-widget-host, .bonus-row > app-widget-host {
    flex-direction: row;
    justify-content: space-between
}

.bonus-row {
    padding-top: 0px;
    /* margin-bottom:auto; */
}

.balance-label, .bonus-label {
    font-size: 12px
}

.user-top .balance, .user-top .bonus {
    /* margin-top: 8px; */
    /* font-size: 30px; */
    font-weight: 500;
    color: var(--c-white-e)
}

.user-bottom > app-widget-host {
    flex-direction: row;
    align-items: center;
}

.deposit-row {
    display: flex;
    width: 50%
}

.deposit-row > app-widget-host {
    flex-direction: row;
    /* padding: 10px; */
    /* padding-bottom: 8px; */
    /* background-color: var(--c-blue-d); */
    color: var(--c-green);
    justify-content: space-between
}

.deposit-row .account-link {
    border: 1px solid var(--c-green);
    width: 100%;
    border-radius: var(--r-lg);
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
}

.deposit-row .account-link.deposit {
    background-color: var(--c-green);
    color: var(--c-white-e);
}

.deposit-row .account-link.deposit div {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#root .user-bottom .beto-api-form.voucher-form {
    /* margin: auto 0; */
    /* margin-bottom: 5px; */
    margin-left: 8px;
    width: 50%;
}

#root .user-bottom .voucher-form .form-label {
    display: none
}

#root .user-bottom .voucher-form > form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.user-bottom .voucher-form .api-form-wrapper {
    width: 60%;
    order: 0;
}

.user-bottom .voucher-form ui-button {
    width: 40%;
    order: 1;
    text-align: center;
}

.user-bottom .voucher-form ui-button button {
    width: 100%;
    padding: 8px 5px;
    border-radius: var(--r-lg);
    background-color: var(--c-green);
    color: var(--c-white);
    font-size: 10px;
    margin-left: 8px;
}

.user-bottom .voucher-form .form-row {
    padding-bottom: 0px;
}

.user-bottom .voucher-form .api-form-errors {
    order: 2
}

#root .user-bottom .voucher-form input {
    background-color: transparent;
    border: 1px solid var(--primary-success-color);
    border-radius: 10px;
    text-align: center;
    height: 38px
}

#root .user-bottom .voucher-form input::placeholder {
    font-size: 8px;
    text-align: center;
    color: var(--primary-success-color)
}

.user-menu-container > app-widget-host {
    padding: 0px 20px;
    padding-bottom: 20px;
    background-color: var(--primary-divider-color);
    color: var(--c-white)
}

.user-menu > app-widget-host {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

.user-menu-description {
    padding: 20px 0px;
    /* margin-bottom:20px; */
}

.user-menu-item {
    width: calc(50% - 5px);
    margin-bottom: 10px;
    cursor: pointer
}
.user-menu-item.messages {
    position:relative;
}
.user-menu-item data-view {
    width:24px;
    height:24px;
    position:absolute;
    right:10px;
    border-radius:50%;
    background-color:var(--c-emphasis-b);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--c-white-e);
    font-weight:bold;
}
.user-menu-item > app-widget-host {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 10px;
    color: var(--c-white-e);
    font-size: 13px;
    border-radius: 10px;
    background-color: hsla(0, 0%, 100%, .15)
}

.user-menu-item .user-menu-item-text {
    margin-top: 15px;
    margin-right: auto;
}

.user-menu-item:not(.theme-change) > app-widget-host::after {
    /* width: 24px; */
    /* height: 24px; */
    /* content: ""; */
    transform: rotate(-90deg);
    filter: invert(1);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.user-menu-item .user-menu-item-icon {
    margin-right: 15px;
    width: 20px;
    height: 20px;
}

.user-menu-item .user-menu-item-icon img {
    width: 100%
}

.accessbet-menu-item {
    background-color: hsla(0, 0%, 100%, .15);
    margin-bottom: 2px;
    border-radius: 5px;
    cursor: pointer
}

.accessbet-menu-item > app-widget-host {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
}

.accessbet-menu-item .accessbet-menu-item-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.accessbet-menu-description div {
    padding: 20px 0px;
    border-top: 1px solid var(--body-footer-color);
    }

.account .header-bottom-menu {
    display: none;
}
div[class*=mobile] .account app-block.account{
    background-color: var(--dark-green-color)
}
.account-header-top > app-widget-host {
    display: flex;
    flex-direction: row;
    height: 35px;
    align-items: center;
    background-color: var(--dark-green-color);
    color: var(--c-text-light)
}

.account-header-top .beto-back-button a, .account-header-top app-block.back {
    height: 35px;
    width: 35px;
    font-size: 0;
    display: block;
    position: relative;
}

.account-header-top .beto-back-button a::before,
 .account-header-top app-block.back > app-widget-host::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: invert(1);
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
    background-image: url(/v1.5601/r/images/site/icons/arrow-right-black.svg);
    background-size: 8px
}

.account-header-top app-block.back > app-widget-host {
    width: 100%;
    height: 100%;
}

.account-menu ul {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 10px;
}

.account-menu ul::-webkit-scrollbar {
    display: none
}

.account-menu ul li a span {
    font-size: 0.9em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-white-e);
}

#root div[class*=mobile] .account-menu ul.menu li a {
    border-radius: 10px;
    padding: 8px;
    border: 1px solid var(--c-green)
}

#root div[class*=mobile] .account-menu ul li a.active {
    background-color: var(--c-green)
}

#root .permanent-suspension-wrapper {
    margin-top: 20px;
}

#root .permanent-suspension-wrapper .permanent-suspension-label {
    margin: 10px 0px;
    font-weight: bold;
    color: var(--c-white-e)
}

.beto-logout {
    margin: 25px 0px;
    margin-top: 20px;
    text-align: center;
}

.beto-logout button {
    height: 45px;
    background-color: var(--c-emphasis-b);
    width: 70%;
    margin: 0 auto;
    color: var(--c-white-e);
    border-radius: 30px;
}

.login-section-column .close-modal-button, .merge-fixed-menu .close-modal-button {
    display: none;
}

body .ui-datepicker table td, body .ui-datepicker table th {
    padding: 0px;
}

.ui-dialog.api-form-message-modal .ui-dialog-titlebar {
    background-color: var(--c-blue-c)
}

.ui-dialog.api-form-message-modal .ui-dialog-content {
    background-color: var(--c-blue-d);
}

.copy-user-id > div {
    display: flex;
}

.copy-user-id > div button {
    padding: 0px;
    background-color: transparent;
    background-image: url(/v1.150/r/images/accessbet/icons/ph_copy.svg);
    background-size: 16px;
    background-position: center;
    margin: 0 4px;
}

.copy-user-id > div button div.text {
    display: none
}

.copy-user-id > div button div.icon {
    width: 16px;
    height: 16px;
}

.user-bonus {
    color: var(--c-white)
}

.user-bonus .bonus-block {
    padding: 20px;
    border-radius: 10px;
    margin: 10px;
    background-color: var(--primary-divider-color);
}

.user-bonus .bonus-block .value {
    font-size: 30px;
    line-height: 30px;
    font-weight: bold;
    color: var(--c-white-e)
}

.user-bonus .bonus-block.rollover .bonus-block-content {
    display: flex;
    flex-wrap: wrap;
}

.user-bonus .bonus-block.rollover .bonus-block-content .rollover_bar_container {
    width: 100%;
    height: 10px;
    background-color: var(--body-footer-color);
    border-radius: 10px;
    order: -1;
    margin: 10px 0px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden
}

.user-bonus .bonus-block.rollover .bonus-block-content .rollover_bar_container .rollover_bar {
    position: absolute;
    height: 100%;
    background-color: var(--c-emphasis-c)
}

.user-bonus .bonus-block.rollover .bonus-block-content .rollover-current::after {
    content: "/";
    margin: 0 4px;
}

.account-balance.table {
    color: var(--c-text-light);
    margin: 5px 15px;
    margin-bottom: 0px;
    border-radius: 5px;
        background-color: var(--primary-divider-color)
}

.account-balance.table .row > app-widget-host {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 0px ;
}

.account-balance.table .row {
    margin: 0px 8px;
}

.account-balance.table .row:not(:last-child) {
    border-bottom: 1px solid var(--c-primary-d)
}

/* Temporary styling for deposit form */
div[class*=mobile] .payment-method ui-button .button-submit-payment {
    --c-internal-user-text: white;
    --c-internal-user-background: var(--c-green);
    --r-border-radius-medium: 15px;
}

#root .account:not(.login) .deposit-accessbet label.amount {
    color: var(--c-text-light);
}

div[class*=mobile] .payment-method .generic-form .deposit-accessbet .form-row input {
    border: 1px solid var(--c-text-light);
}

#root .account:not(.login) .deposit-accessbet input {
    color: var(--c-black)
}

.payment-method-presets > app-stake-presets {
    display: flex;
    padding: 8px 0px;
}

.payment-method-presets .element {
    flex: 1;
    height: 42px;
    border-radius: 5px;
    background-color: var(--primary-success-color);
    text-transform: uppercase;
    font-size: 10px;
    color: var(--c-white-e);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-method-presets .elements {
    display: contents;
    width: 100%;
}

.payment-method-presets .element:not(:last-child) {
    margin-right: 8px;
}

.payment-method-presets .element.clear-button {
    margin-right: 8px;
}

.responsible-gaming-menu > app-widget-host {
    padding: 20px;
}

.responsible-gaming-menu > app-widget-host .responsible-gaming-tab {
    margin-bottom: 10px;
}

.responsible-gaming-menu > app-widget-host .responsible-gaming-tab > app-widget-host {
    padding: 20px;
    background-color: var(--c-tint);
    border-radius: 10px;
}

.responsible-gaming-menu > app-widget-host .responsible-gaming-tab .responsible-gaming-tab-title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600
}

.responsible-gaming-menu > app-widget-host .responsible-gaming-tab .responsible-gaming-tab-description {
    color: var(--c-text-light)
}

.responsible-gaming-heading {
    margin: 0px 20px;
}

.responsible-gaming-heading div {
    padding: 20px 0px;
    border-bottom: 1px solid var(--primay-success-color);
}

.gaming-limits {
    text-align: center;
    margin: 10px 0px;
}

.gaming-limits button {
    color: var(--c-white-e);
    padding: 10px;
    margin: 0px 5px;
    margin-top: 10px;
    border-radius: 10px;
     background-color: var(--primary-divider-color)
}

.gaming-limits button:disabled {
    opacity: .5
}
.save-wager-limits,
.save-loss-limits,
.save-deposit-limits{
    margin-top: 12px
}
.suspend-account .self-exclusion-title, .suspend-account .temporary-suspension-wrapper {
    display: none
}

.self-exclusion .permanent-suspension-wrapper {
    display: none;
}

#root div[class*=mobile] .account label.permanent-suspension-label {
    padding: 10px 15px;
    font-size: 15px!important;
    justify-content: center;
}

.deposit-table {
    width: 100%;
}

.deposit-table > app-widget-host {
    display: flex;
    padding: 20px;
    align-items: center;
}

.deposit-table .deposit-method {
    padding: 10px;
    margin-bottom: 5px;
  /*  background-color: var(--c-blue-d); */
    border-radius: 5px;
}
.deposit-table .deposit-method > div{
    color: var(--c-emphasis-c);
    background-color: var(--body-footer-color);
    border: 1px solid;
    justify-content: center;
    cursor: pointer
}

.payment-options > app-widget-host {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 10px;
}

.payment-options > app-widget-host .payment-option {
    width: 50%;
    margin: 5px;
    margin-bottom: 0px;
    align-self: stretch
}

.payment-options > app-widget-host .payment-option.accessbet {
    margin-right: 0px;
}

.payment-options > app-widget-host .payment-option > app-widget-host {
    padding: 16px 12px;
    border-radius: 5px;
    height: 100%;
    border: 1px solid transparent;
    background-color: var(--primary-divider-color);
}

.payment-options > app-widget-host .payment-option .payment-info {
    font-size: 10px;
    line-height: 12px;
    color: var(--c-text-light)
}

.payment-options > app-widget-host .payment-option .payment-option-title {
    font-size: 16px;
    margin-bottom: 12px;
    text-transform: uppercase
}

#mainDiv[class*="withdraw-bank"] .payment-option.bank > app-widget-host, #mainDiv[class*="withdraw-shop"] .payment-option.shop > app-widget-host {
    border: 1px solid var(--c-white)
}

.payment-separator {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 0px 20px;
}

.payment-separator::before {
    content: "";
    height: 2px;
    width: calc(100% - 40px);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(0%,-50%);
    background-color: var(--c-emphasis);
    z-index: 1
}

.payment-separator div {
    width: auto;
    padding: 0px 20px;
    background-color: var(--c-emphasis);
    position: relative;
    z-index: 2;
    color: var(--c-blue-c);
    font-weight: bold;
    font-size: 15px;
}

.multiline-dialog {
    max-width: 400px;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%,-50%)!important
}

body#root .multiline-dialog .ui-dialog-titlebar {
    background-color: var(--c-blue-d);
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
}

body#root .multiline-dialog .ui-dialog-titlebar .ui-dialog-title {
    display: none;
}

body#root .multiline-dialog .ui-dialog-content {
    background-color: var(--c-blue-d);
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    text-align: center;
    padding: 30px 10px;
}

div[class*="mobile"] .user-message-header {
    padding: 0px 15px;
    font-size: 15px;
}

div[class*="mobile"] .user-messages {
    padding: 15px;
}

div[class*="mobile"] .beto-send-message {
    padding: 15px;
}

div[class*="mobile"] .beto-send-message input {
       background-color: var(--c-tint);
    text-indent: 6px;
}

div[class*="mobile"] .beto-send-message button {
    padding: 12px 16px;
    border-radius: 15px;
    font-size: 10px;
    margin-right: 15px;
    color: var(--c-white-e);
    max-width: 200px;
    width: 100%;
    margin: 15px auto;
    background-color: var(--primary-divider-color)
}

div[class*="mobile"] .beto-send-message textarea {
    border: 0;
    min-height: 200px;
    border-radius: 4px;
    background-color: var(--c-tint);
    color: var(--c-white-e);
    padding: 10px;
    font-family: "Roboto",Arial,sans-serif;
}

.beto-send-message .form-row {
    flex-direction: column;
}

[class*="mobile"] .user-messages thead {
    display: none;
}

#root .mobile .user-messages .list-message-row {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    position: relative;
    font-size: 12px;
    background-color: var(--c-blue-d);
    color: var(--c-text-light)
}

#root .user-messages .list-message-row:not(.messages-unread-0) {
    background-color: var(--c-blue-c)
}

#root .mobile .user-messages .list-message-row td:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#root .mobile .user-messages .list-message-row td:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#root .mobile .user-messages .list-message-row td {
    display: flex;
    justify-content: space-between;
}

#root [class*="mobile"] .user-messages .list-message-row td::before {
    content: attr(data-column)
}

#root .mobile-large .user-messages tbody, #root .mobile-large .user-messages table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#root .mobile-large .user-messages .list-message-row {
    display: flex;
    width: 100%;
    font-size: 12px;
}

#root .mobile-large .user-messages .list-message-row td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.beto-message-thread {
    padding: 15px;
}

.thread-message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    margin-bottom: 15px;
}

.thread-message-wrapper.new .thread-message {
    background-color: var(--c-blue-c)
}

.thread-message-wrapper.customer {
    margin-left: auto;
}

.thread-message-wrapper .thread-message-header {
    order: 2;
    display: flex;
    align-items: center;
}

.thread-message-wrapper .thread-message-header .thread-message-date {
    font-size: 10px;
    color: var(--c-text-light);
    margin: 0px 5px;
}

.thread-message-wrapper.operator .thread-message-header .thread-message-date {
    order: 2;
}

.thread-message-wrapper .thread-message-sender {
    font-size: 0px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    background-color: var(--c-blue-d);
    border-radius: 15px;
}

.thread-message-wrapper.operator .thread-message-sender {
    background-color: var(--c-emphasis-c);
    color: var(--c-black-e);
    text-transform: capitalize;
    font-weight: bold;
}

.thread-message-wrapper .thread-message-sender span {
    font-size: 12px;
    /* display:block; */
}

.thread-message-wrapper.customer .thread-message-header {
    justify-content: flex-end;
    width: auto;
}

.thread-message-wrapper.operator .thread-message-header {
    justify-content: flex-start;
    width: auto;
}

.thread-message-wrapper .thread-message-header .thread-message-status {
    display: none;
}

.thread-message-wrapper .thread-message {
    background-color: var(--c-blue-d);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 8px;
}

.kyc-status {
    display: flex;
    padding: 10px 15px;
    padding-left: 45px;
    background-repeat: no-repeat;
    background-position: 20px center;
    font-size: 12px;
}

.kyc-none, .kyc-partial, .kyc-overdue {
    background-image: url(/v1.235/r/images/accessbet/icons/icons8-shield-red.png);
    color: var(--c-emphasis-c)
}

.kyc-full {
    background-image: url(/v1.235/r/images/accessbet/icons/shield_green.png);
}

.kyc-link {
    margin: 0px 4px;
    text-transform: uppercase;
    text-decoration: underline;
}

.ui-dialog.notif-dialog {
    max-width: 300px;
    width: 100%!important;
    left: 50%!important;
    top: 50%!important;
    transform: translate(-50%,-50%)!important;
}

.ui-dialog.notif-dialog .ui-dialog-content {
    padding: 0px;
    min-height: 300px;
    position: relative;
    border-radius: 15px;
}

.ui-dialog.notif-dialog .ui-dialog-content img {
    max-width: 300px;
    width: 100%;
    height: auto;
}

.ui-dialog.notif-dialog .ui-dialog-content .btn-read-notif {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: var(--c-shade-b);
    width: 24px;
    height: 24px;
    color: transparent;
    border-radius: 50%;
    background-image: url(/v1.236/r/images/accessbet/icons/carbon_close-outline.svg);
    background-size: 24px;
    background-repeat: no-repeat;
    opacity: .5
}

.ui-dialog.notif-dialog .ui-dialog-titlebar {
    display: none;
}

.ui-dialog.notif-dialog .notif-body-text {
    position: relative;
}

.ui-dialog.notif-dialog .notif-body-text .notif-link {
    background-color: var(--c-emphasis-c);
    padding: 10px 15px;
    border-radius: 15px;
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translate(-50%,0%);
    font-weight: bold;
}

.ui-dialog.notif-dialog .notif-body-text .notif-link br {
    display: none;
}

.beto-freebet-info:not(:empty) {
    padding: 10px 12px;
    ; overflow: hidden;
    background-color: var(--c-emphasis-c);
    color: var(--c-black);
    border-radius: 6px;
    padding-left: 62px;
    position: relative;
    background-image: url(/v1.236/r/images/accessbet/icons/ph_gift-black.svg);
    background-repeat: no-repeat;
    background-position: 15px center;
    font-weight: bold;
}

.beto-freebet-info:not(:empty) {
    margin-bottom: 12px;
}

.beto-freebet-info:not(:empty)::before {
    content: "";
    width: 24px;
    height: 24px;
    background-color: var(--c-primary-d);
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translate(-80%,-50%);
    border-radius: 50%;
}

.beto-freebet-info:not(:empty)::after {
    content: "";
    width: 24px;
    height: 24px;
    background-color: var(--c-primary-d);
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translate(80%,-50%);
    border-radius: 50%;
}

.beto-freebet-info:not(:empty) .freebet-info-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 4px 6px;
    background-image: linear-gradient(9deg,transparent, var(--c-tint-b) , transparent);
    min-height: 32px;
    align-items: center;
    border-radius: 4px;
}

.beto-freebet-info:not(:empty) .freebet-info-wrapper::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    border-left: 2px dashed var(--c-primary-d);
    ; left: 50px;
}

.beto-freebet-info:not(:empty) .freebet-info-wrapper .freebet-title::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--c-primary-d);
    transform: rotate(45deg) translate(-50%,0%);
    left: 50px;
    top: -4px
}

.beto-freebet-info:not(:empty) .freebet-info-wrapper .freebet-title::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--c-primary-d);
    transform: rotate(45deg) translate(-50%,0%);
    left: 50px;
    bottom: -9px;
}

.beto-freebet-info:not(:empty) .freebet-info-wrapper .freebet-amount .description {
    display: none;
}
#root .ui-paginator-bottom {
    background-color:transparent;
    color:var(--c-text-light);
    border:0;
    /* padding-top:10px; */
}
#root p-paginator {
    margin-top:10px;
    display:block;
}