#root .user-page .content, #root .site-content-page .content {
    margin-top: 10px;
    /* min-height:90vh; */
}

#root .desktop .user-page .content, #root .desktop .site-content-page .content {
    max-width: calc(100% - (var( --c-l-sidebar-max) + var(--c-r-sidebar-max) + 100px ))
}

#root .user-page .right-sidebar, #root .site-content-page .right-sidebar {
    margin-top: 10px;
    margin-bottom: 10px;
}

#root .user-content {
    /* max-width:720px; */
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    color: var(--c-text-light-e);
}

#root .mobile .user-content, #root .mobile .site-content {
    padding: var(--c-mobile-padding);
}

#root .user-content app-block.username {
    padding: 0 0 10px 0 ;
    font-size: 1.8rem;
    color: var(--c-white-e);
}

#root .user-account-top .username {
    margin-right: auto
}

.balance-details {
    background-image: var(--c-linear-gradient-1);
    padding: 15px 20px;
    padding-bottom: 30px;
    color: var(--c-text-light-e);
    font: var(--t-small-text-bold);
    border-radius: var(--r-10);
}

.balance-details .row.row-hide-balance {
    font: var(--t-body-bold);
    border-bottom: 1px solid var(--c-accent-color);
    margin-bottom: 20px;
    min-height: 38px;
}

.row-hide-balance .hide-balance {
    width: 43px;
    height: 22px;
    background-color: var(--c-background-white);
    border-radius: 100px;
    position: relative;
    cursor: pointer
}

.row-hide-balance .hide-balance::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(2px, -50%);
    background-color: var(--c-dark-blue-20);
    pointer-events: none;
}

#root.hide-balance .row-hide-balance .hide-balance::before {
    transform: translate(24px, -50%);
    pointer-events: none;
    background-color: var(--c-dark-blue);
}

#root.hide-balance .balance-details .row:not(.row-hide-balance) .value *, #root.hide-balance data-view[value="user.balance.total"] {
    display: none;
}

.balance-details > app-widget-host > .row {
    /* padding:10px; */
    justify-content: space-between;
    align-items: center;
    /* min-height: 28px; */
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-background-white-10);
    position: relative;
    /* background-color:var(--c-shade-b); */
}

.balance-details > app-widget-host > .row .label {
    margin-right: auto;
}

.balance-details > app-widget-host > .row .icon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    filter: saturate(0) invert(1);
}

.balance-details .row.row-buttons {
    border-bottom: 0;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.balance-details .row.row-buttons .cancel-withdraw, .balance-details .row.row-buttons .deposit-link {
    flex: 1;
}

.balance-details .row.row-buttons .cancel-withdraw {
    display: contents;
}

.balance-details .row.row-buttons .cancel-withdraw > div {
    display: contents;
}

.balance-details .row.row-buttons .cancel-withdraw ui-button {
    display: flex;
    flex: 1;
}

.balance-details .row.row-buttons .cancel-withdraw .api-button-wrapper {
    display: flex;
    flex: 1;
    margin-right: 10px;
}

.balance-details .row.row-buttons .cancel-withdraw .confirm-api-button-wrapper {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.balance-details .row.row-buttons .cancel-withdraw .confirm-api-button-wrapper .api-button-confirm {
    width: 100%;
    margin-bottom: 5px;
}

.balance-details .row.row-buttons .cancel-withdraw .confirm-api-button-wrapper ui-button:first-of-type {
    margin-right: 10px;
}

.balance-details .row.row-buttons .cancel-withdraw ui-button button {
    width: 100%;
    /* padding:0; */
    min-height: 40px;
    /* border-radius:var(--r-10); */
    background-color: transparent;
    color: var(--c-text-light-e);
    /* font:var(--t-small-text-bold); */
    border: 1px solid var(--c-background-white);
    margin: 0;
}

.balance-details .row.row-buttons .deposit-link div {
    width: 100%;
    padding: 0;
    min-height: 40px;
    ; border-radius: var(--r-10);
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--t-small-text-bold);
    color: var(--c-text-light-e);
    background-color: var(--c-accent-color)
}

.balance-details .row.net-balance {
    flex-wrap: wrap;
    border-bottom: 0;
}

.balance-details .row.net-balance .total-net-desc {
    width: 100%;
    font: var(--t-small-text-normal);
    padding-top: 20px;
    margin-top: 10px;
    border-top: 1px solid var(--c-background-white-10);
}

.balance-details .row.row-hide-balance .label {
    align-items: center;
}

.balance-details .row.row-hide-balance .icon {
    filter: saturate(0) invert(1);
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    background-position: -198px -43px;
    margin-right: 8px;
}

#root .balance-details .row .value {
    margin-left: auto;
    /* font-weight:bold; */
    /* font-size:1.2rem; */
    /* color: var(--c-white-e); */
}

#root .hover .balance-details .row.link:hover, #root .hover .balance-details .row.row-logout:hover .logout-button {
    color: var(--c-emphasis);
}

#root .hover .balance-details .row.link:hover .icon, #root .hover .balance-details .row.row-logout:hover .logout-button::before {
    filter: hue-rotate(184deg) brightness(2.5);
}

#root .balance-details .row.row-rollover .value {
    display: flex;
}

#root .balance-details .row.row-account .icon {
    background-position: -112px -43px;
}

#root .balance-details .row.row-balance .icon {
    background-position: -54px -75px;
}

#root .balance-details .row.row-withdraw .icon {
    background-position: -38px -105px;
}

#root .balance-details .row.row-bonus .icon {
    background-position: -128px -10px;
}

#root .balance-details .row.row-rollover .icon {
    background-position: -97px -10px;
}

#root .balance-details .row.row-kyc-verification .icon {
    background-position: -257px -42px;
}

#root .balance-details .row.row-history .icon {
    background-position: -167px -42px;
}

#root .balance-details .row.row-contact .icon {
    background-position: -68px -106px;
}

#root .balance-details .row.row-messages .icon {
    background-position: -228px -43px;
}

#root .balance-details .row.row-self-protection .icon {
    background-position: -141px -42px;
}

#root .balance-details .row.row-logout .logout-button {
    padding: 0;
    border: 0;
    color: var(--c-text-light-e);
    font: var(--t-small-text-bold);
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center
}

#root .balance-details .row.row-logout .logout-button::before {
    width: 22px;
    height: 22px;
    content: "";
    display: block;
    margin-right: 8px;
    filter: saturate(0) invert(1);
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    background-position: -433px -42px;
}

#root .user-content .logout button {
    width: 100%;
    margin: unset;
    margin-top: 5px;
    font-size: 1.14rem;
    background-color: var(--c-emphasis-b);
}

#root .content-header .user-page-header {
    margin-left: 5px;
}

#root .content-header app-content-block.user-page-header:not(:first-of-type)::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    background-color: var(--c-white-e);
    border-radius: 50%;
    margin-right: 5px;
}

#root .user-account-top {
    display: flex;
    justify-content: space-between
}

.beto-message-thread {
    display: flex;
    flex-direction: column;
    background-color: var(--c-background-white-10);
    padding: 20px;
    border-radius: var(--r-10);
    gap: 20px
}

.beto-message-thread .thread-message-wrapper {
    width: auto;
    max-width: 90%;
    display: flex;
    flex-direction: column;
}

.mobile .beto-message-thread .thread-message-wrapper {
    max-width: 400px;
}

.beto-message-thread .thread-message-wrapper.operator {
    margin-right: auto;
    margin: auto
}

.beto-message-thread .thread-message-wrapper.customer {
    margin-left: auto;
}

.thread-message-header {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* flex-direction:column; */
    order: 2;
    padding: 5px;
    display: none
}

.thread-message-header .thread-message-status {
    display: none;
}

.thread-message-header .thread-message-sender {
    font-size: 0px;
    display: flex;
}

.thread-message-header .thread-message-sender span {
    font: var(--t-small-text-bold);
    text-transform: capitalize;
}

.beto-message-thread .thread-message-wrapper.operator .thread-message {
    margin-right: auto;
}

.beto-message-thread .thread-message-wrapper.operator .thread-message a {
    display: block
}

.beto-message-thread .thread-message-wrapper.operator .thread-message img {
    width: 100%;
    height: auto;
}

.beto-message-thread .thread-message-wrapper.customer .thread-message {
    margin-left: auto;
}

.thread-message {
    /* line-height: 1.6em; */
    /* margin-top: 20px; */
    padding: 16px;
    background-color: var(--c-background-white-10);
    border-radius: var(--r-10);
    border: 1px solid var(--c-background-white-50);
    opacity: .7;
    position: relative;
}

.new .thread-message::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--c-accent-color);
    display: block;
    position: absolute;
    right: -5px;
    top: -5px
}

.read .thread-message {
    opacity: 1;
}

#root .thread-message-wrapper.operator .thread-message-sender {
    font-weight: bold;
    order: -1;
    margin-right: 2px;
    color: var(--c-accent-color)
}

#root .thread-message-wrapper.operator .thread-message-header {
    display: none
}

.personal-details > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    margin-bottom: 30px;
}

.personal-details > div .profile-section {
    width: calc(50% - 10px);
    background-color: var(--c-background-white-10);
    padding: 30px;
    border-radius: var(--r-20);
    border: 1px solid var(--c-background-white-10);
    min-width: 320px;
}

.personal-details > div .profile-section:not(:last-child) {
    margin-right: 20px;
}

.personal-details .profile-section .field-section {
    margin-bottom: 10px;
}

.personal-details .profile-section .section-title {
    font: var(--t-h2);
    color: var(--c-accent-color);
    margin-bottom: 30px;
}

.personal-details .input-phone {
    display: flex;
}

.personal-details .input-phone select {
    max-width: 80px;
    margin-right: 8px;
    text-align: center;
    text-indent: 0px;
}

.personal-details select:disabled {
    appearance: none;
}

.mobile .personal-details > div .profile-section {
    flex: 1;
    margin-right: 0;
    margin-bottom: 20px;
}

#root .user-page input, #root .user-page select, #root .user-page textarea, #root .user-page .ui-dropdown {
    min-height: 50px;
    ; border-radius: var(--r-10);
    background-color: var(--c-background-white-10);
    border: 1px solid var(--c-background-white-50);
    text-indent: 8px;
    color: var(--c-text-light-e)
}

#root .user-page select {
    background-color: #324f64;
}

#root .user-page input::placeholder {
    color: var(--c-text-light-e)
}

#root .ui-dropdown .ui-dropdown-label-container, #root .ui-dropdown .ui-dropdown-label-container label {
    height: 100%;
}

#root .user-page textarea {
    min-height: 120px;
    width: 100%!important;
    text-indent: 0px;
    padding: 10px;
    font: var(--t-small-text-normal)
}

#root .user-page .field-label {
    font: var(--t-small-text-bold);
    color: var(--c-text-light-e);
    margin-bottom: 8px;
}

.user-page .note {
    margin: 20px 0px;
}

.separator {
    height: 1px;
    background-color: var(--c-background-white-10);
    margin: 20px 0px;
}

.deposit-limits-note {
    justify-content: center;
    text-align: center;
    margin-top: 20px;
}

.mobile .deposit-limits-note {
    justify-content: flex-start;
    text-align: left;
}

.deposit-limits-button.cta-link {
    margin-top: 10px;
    background-color: var(--c-accent-color);
    margin: 0 auto;
    margin-top: 10px;
    border-radius: var(--r-10)
}

.mobile .deposit-limits .cta-link {
    margin: 0;
    margin-right: auto;
}

.cta-link div {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--r-10);
    font: var(--t-small-text-bold);
    cursor: pointer;
}

.payments-container {
    flex-wrap: wrap;
    margin: 30px 0px;
}

.mobile .payments-container {
}

.payment-methods-row {
    width: 100%;
    flex-wrap: wrap;
}

.payments-container .payment-method {
    justify-content: center;
    border: 1px solid var(--c-background-white-50);
    background-color: var(--c-background-white-10);
    border-radius: var(--r-10);
    padding: 20px;
    margin: 5px 0px;
    width: calc(20% - 8px);
    text-align: center;
    min-width: 195px;
}

.payments-container .payment-method:not(:last-child) {
    margin-right: 10px;
}

.payments-container .payment-method .image {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 6px;
}

.mobile .payments-container .payment-method {
    width: calc(50% - 5px);
    min-width: 100px;
}

.payments-container .payment-method.mastercard .image {
    background-image: url(/v1.020/r/images/site/icons/master-logo-new.svg);
    background-size: auto 80%
}

.payments-container .payment-method.visa .image {
    background-image: url(/v1.020/r/images/in2bet/payments/v3/visa_white.svg);
    background-size: auto 80%
}

.payments-container .payment-method.mastercard-maestro .image {
    background-image: url(/v1.020/r/images/in2bet/payments/v3/ms_vrt_rev.svg);
    background-size: auto 110%
}

.payments-container .payment-method.paysafecard .image {
    background-image: url(/v1.020/r/images/site/icons/paysafecard.svg);
    background-size: 90% auto
}

.payments-container .payment-method.skrill .image {
    background-image: url(/v1.020/r/images/site/icons/skrill-logo-new.svg);
    background-size: 90% 90%;
}

.payments-container .payment-method.revolut .image {
    background-image: url(/v1.020/r/images/in2bet/payments/v3/revolut_white.svg);
    background-size: 60% 90%;
}

.payments-container .payment-method.neteller .image {
    background-image: url(/v1.020/r/images/site/icons/Neteller-logo-new.svg);
    background-size: 70% 90%;
}

.payments-container .payment-method.neteller .image {
    background-image: url(/v1.020/r/images/site/icons/Neteller-logo-new.svg);
    background-size: 70% 90%;
}

.payments-container .payment-method.oktocash .image {
    background-image: url(/v1.020/r/images/site/icons/oktocash.png);
    background-size: 70% 50%;
}

.payments-container .payment-method.bank .image {
    background-image: url(/v1.020/r/images/site/icons/bank-transfer.svg);
    background-size: 70% 90%;
}

.change-password-form {
    margin-bottom: 10px;
}

.change-password-form .form-row {
    display: flex;
    flex-direction: column;
}

.change-password-form form {
    background-color: var(--c-background-white-10);
    padding: 30px;
    border-radius: var(--r-20);
    border: 1px solid var(--c-background-white-10);
}

.change-password-form form button {
    background-color: var(--c-accent-color);
    color: var(--c-text-light-e);
    font: var(--t-small-text-bold);
    min-height: 40px;
}

#root .change-password-form form label {
    font: var(--t-small-text-bold);
    color: var(--c-text-light-e);
    margin-bottom: 8px;
    padding: 0px;
    min-width: unset;
}

.beto-messages thead {
    display: none;
}

#root .beto-messages tbody, #root .beto-messages table {
    display: flex;
    flex-direction: column;
}

#root .beto-messages .list-message-row {
    display: grid;
    grid-template-columns: 1fr 1fr 80px 80px;
    grid-template-areas: "subject subject messages status" "date date messages status";
    position: relative;
    border-radius: var(--r-10);
    background-color: var(--c-background-white-10);
    border: 1px solid var(--c-background-white-10);
    color: var(--c-text-light-e);
    font: var(--t-small-text-normal);
    width: 100%;
    border-left-width: 5px;
}

#root .beto-messages .list-message-row.has-unread-messages::before {
    content: attr(data-unread);
    position: absolute;
    right: -8px;
    top: -8px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font: var(--t-small-text-bold);
    background-color: var(--c-accent-color);
    border-radius: 50%;
}

#root .beto-messages .list-message-row.has-unread-messages {
    border-left-color: var(--c-accent-color)
}

#root .beto-messages .list-message-row:not(:last-child) {
    margin-bottom: 8px;
}

#root .beto-messages .list-message-row td {
    height: 100%;
    text-align: unset;
    border: 0;
    display: flex;
    background-color: unset;
    padding: 8px 15px;
}

#root .beto-messages .list-message-row td[data-column="Messages"], #root .beto-messages .list-message-row td[data-column="Status"], #root .beto-messages .list-message-row td[data-column="Μηνύματα"], #root .beto-messages .list-message-row td[data-column="Κατάσταση"] {
    display: none
}

#root .beto-messages .list-message-row td:first-child {
    grid-area: date;
    padding-top: 2px;
}

#root .beto-messages .list-message-row td:nth-child(2) {
    grid-area: subject;
    padding-bottom: 0px;
    font: var(--t-body-bold)
}

.beto-messages .list-message-row td:nth-child(3) {
    grid-area: messages;
    align-items: center;
    justify-content: center;
    /* flex-direction:column; */
}

.beto-messages .list-message-row td:nth-child(3)::before {
    content: attr(data-column)":";
    margin-right: 2px;
    font: var(--t-small-text-bold) /* order:2; */
}

.beto-messages .list-message-row td:nth-child(4) {
    grid-area: status;
    align-items: center;
    justify-content: center;
    text-transform: capitalize
}

.new-message-container {
    padding: 20px;
    margin: 20px 0px;
    border-radius: var(--r-10);
    background-color: var(--c-background-white-10);
    border: 1px solid var(--c-background-white-10);
}

.new-message-container .h3 {
    margin-bottom: 20px;
    color: var(--c-accent-color)
}

.beto-send-message .generic-form {
    max-width: unset;
}

.beto-send-message .generic-form .form-row {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
}

.beto-send-message .generic-form .form-row label {
    width: 100%;
    padding: 0;
    font: var(--t-small-text-bold);
    color: var(--c-text-light-e);
    margin-bottom: 8px;
    padding: 0px;
}

.beto-send-message .generic-form .form-row button {
    margin-left: auto;
    min-height: 40px;
    background-color: var(--c-accent-color);
    color: var(--c-text-light-e)
}

.beto-personal-det-mrk form {
    max-width: unset;
    margin-top: 8px;
}

.beto-personal-det-mrk form .form-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#root .beto-personal-det-mrk .field-label {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: left;
    width: calc(100% - 28px);
    margin-bottom: 0px;
    align-items: center;
}

.beto-personal-det-mrk p-checkbox {
    margin-right: 8px;
}

.beto-personal-det-mrk .fld-marketingsubscribe .field-label > span {
    padding: 4px 0px
}

.beto-personal-det-mrk .fld-contactsms {
    margin-top: 10px;
}

.beto-personal-det-mrk .fld-contactsms .field-caption {
    order: -1;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
}

.beto-personal-det-mrk .fld-contacttelephone .field-caption {
    display: none;
}

.beto-personal-det-mrk .fld-contactmessage {
    display: none;
}

#root .beto-personal-det-mrk button {
    margin-top: unset;
    min-height: 40px;
    background-color: var(--c-accent-color);
    border: 1px solid var(--c-accent-color);
    color: var(--c-text-light-e)
}

.transactions-menu .transactions-menu-item {
    flex: 1;
    margin-bottom: 20px;
}

.transactions-menu .transactions-menu-item:not(:last-child) {
    margin-right: 10px
}

.transactions-menu .transactions-menu-item div {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: var(--r-10);
    border: 1px solid var(--c-accent-color);
    color: var(--c-accent-color);
    font: var(--t-small-text-bold);
    cursor: pointer;
}

.history-table {
    display: none;
    margin-bottom: 10px;
}

#root:not(.show-withdraw-table) .table-deposits, #root.show-withdraw-table .table-withdrawals {
    display: flex;
}

#root:not(.show-withdraw-table) .transactions-menu .transactions-menu-item.deposits div, #root.show-withdraw-table .transactions-menu .transactions-menu-item.withdrawals div {
    background-color: var(--c-accent-color);
    color: var(--c-text-light-e)
}

.history-table td {
    width: 20%;
    flex: unset;
}

body#root .generic-form p-calendar .ui-calendar .ui-datepicker-trigger {
    min-height: 50px;
    width: 50px;
    border-top-right-radius: var(--r-10);
    border-bottom-right-radius: var(--r-10);
    background-color: var(--c-accent-color);
    border-color: var(--c-accent-color);
}

body#root .generic-form p-calendar .ui-calendar .ui-inputtext {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.beto-statement {
    margin-bottom: 10px;
}

.beto-statement .statement-header-wrapper, .beto-history .history-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.desktop .beto-statement .statement-header-wrapper > div, .desktop .beto-history .history-header > div {
    width: calc(33.33% - 6.66px);
    min-width: 200px;
    margin-top: 10px;
    flex: 1;
    flex-wrap: wrap;
    padding: 0px;
}

.mobile .beto-statement .statement-header-wrapper > div, .mobile .beto-history .history-header > div {
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
    padding: 0px;
}

.desktop .beto-statement .statement-header-wrapper > div:not(:last-child), .desktop .beto-history .history-header > div:not(:last-child) {
    margin-right: 10px;
}

.beto-statement .statement-header-wrapper button, .beto-history .history-header button {
    min-height: 50px;
    width: 100%;
    margin: 0;
    margin-top: auto;
    background-color: var(--c-accent-color);
    color: var(--c-text-light-e);
    border: 1px solid var(--c-accent-color)
}

.beto-statement .statement-header-wrapper > div.statement-show, .beto-history .history-header > div.history-show {
    display: flex;
    align-items: flex-end
}

.beto-history p-dropdown {
    display: flex;
    height: 50px;
}

.beto-history p-calendar {
    width: 100%;
}

.beto-payment {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    padding: 20px;
    background-color: var(--c-background-white-10);
    border-radius: var(--r-10);
    border: 1px solid var(--c-background-white-50);
    margin-bottom: 10px;
}

.beto-payment .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px;
}

.beto-payment app-fields-section > div > div:not(:first-child) .form-row {
    margin-top: 8px;
}

.beto-payment .form-row label {
    width: 100%;
}

.beto-payment button[type="submit"] {
    width: 100%;
    min-height: 40px;
    background-color: var(--c-accent-color);
    color: var(--c-text-light-e);
    border: 1px solid var(--c-accent-color)
}

.payment-frame {
    position: relative;
    min-height: 100vh
}

.payment-frame iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.voucher-form .generic-form .form-label {
    display: none;
}

.voucher-form.generic-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.voucher-form.generic-form .api-form-wrapper {
    flex: 1;
    order: -2;
}

.voucher-form.generic-form ui-button {
    order: -1;
    max-width: 120px;
    width: 100%;
    margin-left: 10px;
}

.voucher-form.generic-form ui-button button {
    margin-top: 0px;
    width: 100%;
    height: 50px;
    background-color: var(--c-accent-color);
    color: var(--c-text-light-e)
}

.view-page-account-documents .sidebar-link.account-verification .sidebar-link-text div, .view-page-account-profile .sidebar-link.account-profile .sidebar-link-text div, .view-page-account-changepassword .sidebar-link.change-password .sidebar-link-text div, .view-page-account-documents .sidebar-link.profile .sidebar-link-text div, .view-page-account-profile .sidebar-link.profile .sidebar-link-text div, .view-page-account-changepassword .sidebar-link.profile .sidebar-link-text div {
    color: var(--c-accent-color)
}

.view-page-account-documents .sidebar-link.profile .icon, .view-page-account-profile .sidebar-link.profile .icon, .view-page-account-changepassword .sidebar-link.profile .icon {
    filter: hue-rotate(184deg) brightness(2.5);
}

.view-page-account-deposit .sidebar-link.deposit .sidebar-link-text div, .view-page-account-withdraw .sidebar-link.withdrawal .sidebar-link-text div, .view-page-account-voucher .sidebar-link.voucher .sidebar-link-text div, .view-page-account-deposit .sidebar-link.wallet .sidebar-link-text div, .view-page-account-withdraw .sidebar-link.wallet .sidebar-link-text div, .view-page-account-voucher .sidebar-link.wallet .sidebar-link-text div {
    color: var(--c-accent-color)
}

.view-page-account-deposit .sidebar-link.wallet .icon, .view-page-account-withdraw .sidebar-link.wallet .icon, .view-page-account-voucher .sidebar-link.wallet .icon {
    filter: hue-rotate(184deg) brightness(2.5);
}

.view-page-metra .sidebar-link.self-protection .sidebar-link-text div {
    color: var(--c-accent-color)
}

.view-page-metra .sidebar-link.self-protection .icon {
    filter: hue-rotate(184deg) brightness(2.5);
}

.view-page-account-personaldata .sidebar-link.personal-data .sidebar-link-text div {
    color: var(--c-accent-color)
}

.view-page-account-personaldata .sidebar-link.personal-data .icon {
    filter: hue-rotate(184deg) brightness(2.5);
}

.view-page-account-bethistory .sidebar-link.bethistory .sidebar-link-text div, .view-page-account-transactions .sidebar-link.transactions .sidebar-link-text div, .view-page-account-statement .sidebar-link.statement .sidebar-link-text div, .view-page-account-bethistory .sidebar-link.history .sidebar-link-text div, .view-page-account-transactions .sidebar-link.history .sidebar-link-text div, .view-page-account-statement .sidebar-link.history .sidebar-link-text div {
    color: var(--c-accent-color)
}

.view-page-account-bethistory .sidebar-link.history .icon, .view-page-account-transactions .sidebar-link.history .icon, .view-page-account-statement .sidebar-link.history .icon {
    filter: hue-rotate(184deg) brightness(2.5);
}

.view-page-account-messages .sidebar-link.messages .sidebar-link-text div {
    color: var(--c-accent-color)
}

.view-page-account-messages .sidebar-link.messages .icon {
    filter: hue-rotate(184deg) brightness(2.5);
}

#root .ui-chkbox .ui-chkbox-box {
    border-radius: 50%;
}

#root .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
    display: none;
}

#root .ui-chkbox .ui-chkbox-box.ui-state-active {
    background-image: var(--c-global-icon-spritesheet);
    background-size: 450px auto;
    background-position: -197px -56px;
    background-repeat: no-repeat;
    background-color: var(--c-accent-color);
    border-color: var(--c-accent-color)
}

.beto-payment app-radio-field input {
    display: none;
}

.beto-payment .buttons-holder label {
    color: var(--c-text-light-e);
}

.beto-payment .buttons-holder .button:not(:last-child) {
    margin-bottom: 10px;
}

.beto-payment .buttons-holder .button label {
    padding: 10px;
    background-color: var(--c-background-white-10);
    border-radius: var(--r-10);
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.beto-payment .buttons-holder .button label::before {
    width: 20px;
    height: 20px;
    border: 1px solid var(--c-background-white);
    content: "";
    display: block;
    border-radius: 50%;
    margin-right: 8px;
}

.beto-payment .buttons-holder .button input:checked + label::before {
    background-image: radial-gradient(circle at center,var(--c-background-white) 50%, transparent 51%)
}

.beto-payment .buttons-holder .button input:checked + label {
    background-color: var(--c-background-white-30);
}

.beto-payment .buttons-holder app-radio-field .form-row {
    display: flex
}

.beto-payment .buttons-holder .button {
    display: flex;
    border: 0;
    padding: 0px;
}

.beto-payment app-content-field div {
    text-align: center;
}

#root .beto-payment app-checkbox-field .form-row .field-label {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    max-width: calc(100% - 35px);
    margin-left: 5px;
    text-align: left;
}

#root .beto-payment app-checkbox-field .form-row .field-label a {
    color: var(--c-accent-color);
    text-decoration: underline;
}

body:has(.contact-content) iframe#webWidget, body:has(.contact-content) .floating-chat-button-container {
    display: none!important
}

.withdraw-kyc-note {
    padding: 20px;
    background-color: var(--c-background-white-10);
    border-radius: var(--r-10);
    align-items: center;
}

.withdraw-kyc-note > app-widget-host {
    gap: 20px;
}

.withdraw-kyc-note .icon {
    max-width: 60px;
    width: 100%;
}

.beto-freebet-info {
    width: 100%;
}

.beto-freebet-info .freebet-title {
    /* justify-content: space-between; */
    align-items: center;
    /* min-height: 28px; */
    display: flex;
    padding-bottom: 10px;
    gap: 8px;
    position: relative;
    color: var(--c-)
}
.icon + .beto-freebet-info .freebet-title::before  {
    content:"";
    width:22px;
    height:22px;
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    filter: saturate(0) invert(1);
    background-size: 700px auto;
    background-position: -312px -125px;
}
.icon + .beto-freebet-info  {
    border-bottom: 1px solid var(--c-background-white-10);
    margin-bottom:10px
}
.beto-freebet-info .freebet-title::after {
    content: "";
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-image: var(--c-global-icon-spritesheet);
    background-size: 600px auto;
    background-position: -7px -75px;
    filter: saturate(0) invert(1) brightness(10);
    transform: rotate(180deg)
}

.beto-freebet-info .freebet-title.expanded::after {
    transform: rotate(0deg)
}
.beto-freebet-info .freebet-title.expanded ~ .vouchers-list {
    margin-bottom:10px;
}
.beto-freebet-info .freebet-title .vouchers-count {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    background-color: var(--c-accent-color);
    justify-content: center;
    border-radius: 50%;
    margin-right: auto;
   
}

.beto-freebet-info .vouchers-list table, .beto-freebet-info .vouchers-list table tbody {
    display: flex;
    flex-direction: column;
}

.beto-freebet-info .vouchers-list table tbody {
    padding: 5px 10px;
    background-color: var(--c-dark-blue);
     border-radius:var(--r-10);
    
}

#root .beto-freebet-info .vouchers-list table tbody tr {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: transparent;
    color: var(--c-text-light-e);
    align-items: center;
    padding: 8px 0px;
    gap: 8px;
}

#root .beto-freebet-info .vouchers-list table tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--c-background-white-10)
}

.beto-freebet-info .vouchers-list table tr td {
    display: flex;
    flex: 1;
    border: 0;
    padding: 0;
}

.beto-freebet-info .vouchers-list table tr td.column-radio-use-next {
    /* width:60px; */
    flex: unset;
    width:unset!important;
}
.beto-freebet-info .vouchers-list table tr td.column-id {
   font-size:0px;
}
.beto-freebet-info .vouchers-list table tr td.column-id div::before{
    content:"Free Bet";
     font:var(--t-small-text-normal)
}
.beto-freebet-info .vouchers-list table tr td.column-radio-use-next div {
    width: 100%;
    text-align: left;
}

#root .beto-freebet-info .vouchers-list table tr td input {
    min-height: unset;
    text-indent: unset;
    width: 22px;
    height: 22px;
    margin: 0;
}

.beto-freebet-info .vouchers-list table tr td.column-text-amount {
    text-align: right;
    justify-content: flex-end
}
.beto-freebet-info .footer-message {
    font:var(--t-tiny-text);
    padding:5px;
    text-align:right;
    width:100%;
}