.input-area {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    min-width: 343px
}

.input-area input:-webkit-autofill:not(.dark),
.input-area input:-webkit-autofill:hover:not(.dark),
.input-area input:-webkit-autofill:focus:not(.dark),
.input-area input:-webkit-autofill:active:not(.dark) {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: var(--primary-mode-1) !important;
    caret-color: var(--primary-mode-1) !important
}

#edit-player-form .input-area input:-webkit-autofill:not(.dark),
#edit-player-form .input-area input:-webkit-autofill:hover:not(.dark),
#edit-player-form .input-area input:-webkit-autofill:focus:not(.dark),
#edit-player-form .input-area input:-webkit-autofill:active:not(.dark) {
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: #000 !important;
    caret-color: #000 !important
}

.input-area.input-area-checkbox,
.input-area.input-area-radio {
    margin-left: 0;
    min-width: unset
}

.input-area.input-area-checkbox:hover label .checkmark,
.input-area.input-area-checkbox:hover label .radio-button,
.input-area.input-area-radio:hover label .checkmark,
.input-area.input-area-radio:hover label .radio-button {
    background-color: var(--primary-5)
}

.input-area.input-area-checkbox.dark:hover label .checkmark,
.input-area.input-area-checkbox.dark:hover label .radio-button,
.input-area.input-area-radio.dark:hover label .checkmark,
.input-area.input-area-radio.dark:hover label .radio-button {
    background-color: var(--primary-7)
}

.input-area.input-area-checkbox.dark:hover label.error .checkmark,
.input-area.input-area-radio.dark:hover label.error .checkmark {
    background-color: var(--system-5)
}

.input-area .input-label {
    color: var(--other-mode-1);
    margin-bottom: 8px;
    margin-left: 16px
}

.input-area .input-label.select-box-label {
    color: var(--primary-5)
}

.input-area .input-label.checkbox-label,
.input-area .input-label.radio-label {
    margin: 0
}

.input-area .input-bottom-text {
    color: var(--primary-6);
    display: flex
}

.input-area .input-bottom-text.input-bottom-text-checkbox {
    margin: var(--spacing-8) 0 0 0;
    display: none
}

.input-area .input-bottom-text.disabled {
    display: none
}

.input-area .input-bottom-text label.error {
    color: var(--system-5);
    margin-left: var(--spacing-16)
}

.input-area .input {
    position: relative
}

.input-area .input input,
.input-area .input select {
    all: unset;
    display: inline-flex;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--primary-mode-9);
    border-radius: 60px
}

#edit-player-form .input-area .input input,
#edit-player-form .input-area .input select,
#TransactionHistoryForm .input-area .input input,
#TransactionHistoryForm .input-area .input select {
    color: #000;
}

#deposit-form .input-area .input input,
#deposit-form .input-area .input select {
    color: #000
}

#GameHistoryForm .input-area .input input,
#GameHistoryForm .input-area .input select {
    color: #000
}

#add-payment-account-form .input-area .input input,
#add-payment-account-form .input-area .input select {
    color: var(--other-mode-1);
}

.input-area .input input::placeholder,
.input-area .input select::placeholder {
    color: var(--primary-mode-7)
}

.input-area .input input:focus,
.input-area .input input:hover,
.input-area .input select:focus,
.input-area .input select:hover {
    /* border-color: var(--primary-mode-1) */
}

#add-payment-account-form .input-area .input input:focus,
#add-payment-account-form .input-area .input input:hover,
#add-payment-account-form .input-area .input select:focus,
#add-payment-account-form .input-area .input select:hover {
    border-color: unset
}

.input-area .input select:invalid {
    color: var(--primary-mode-7)
}

.input-area .input select option {
    color: var(--primary-1)
}

.input-area .input select:after {
    content: "";
    width: 12px;
    height: 12px;
    -webkit-mask: url(../static/images/icon-chevron-down.svg) no-repeat center;
    -webkit-mask-size: 12px
}

.input-area .input.has-icon-left input {
    padding-left: 44px
}

.input-area .input.has-icon-right input {
    padding-right: 44px
}

.input-area .input.has-two-icons-right input {
    padding-right: var(--spacing-72)
}

.input-area .input .icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.input-area .input .icon.icon-left {
    margin: auto auto auto 15px
}

.input-area .input .icon.icon-right {
    margin: auto 15px auto auto
}

.input-area .input .icon.icon-right-two {
    margin: auto 43px auto auto
}

.input-area .input .icon.icon-timelapse {
    background-color: var(--primary-7);
    -webkit-mask: url(../static/images/icon-timelapse.svg) no-repeat center;
    -webkit-mask-size: 20px
}

.input-area .input .icon.icon-calendar {
    background-color: var(--primary-2);
    -webkit-mask: url(../static/images/icon-calendar.svg) no-repeat center;
    -webkit-mask-size: 20px;
    pointer-events: none;
    touch-action: none
}

.input-area .input .icon.icon-eye-show {
    background-color: var(--primary-5);
    -webkit-mask: url(../static/images/icon-eye-show.svg) no-repeat center;
    -webkit-mask-size: 20px
}

.input-area .input .icon.icon-eye-show.toggled {
    background-color: var(--primary-5);
    -webkit-mask: url(../static/images/icon-eye-hide.svg) no-repeat center;
    -webkit-mask-size: 20px
}

.input-area .input .icon.icon-lock {
    background-color: var(--primary-5);
    -webkit-mask: url(../static/images/icon-lock.svg) no-repeat center;
    -webkit-mask-size: 20px
}

.input-area .input.disabled input {
    border-color: var(--primary-9);
    background-color: var(--primary-10);
    color: var(--primary-4);
    pointer-events: none;
    text-overflow: ellipsis
}

.input-area:focus .select-box-label:not(.disabled),
.input-area:hover .select-box-label:not(.disabled),
.input-area:focus-within .select-box-label:not(.disabled) {
    color: var(--primary-1)
}

.input-area .select-box__list {
    background-color: var(--dropdown-mode-1)
}

.input-area:not(.dark) .select-box__list .opt-optional-text .icon-dropdown:not(.ignore-color) {
    background-color: var(--primary-7)
}

.input-area.dark .input-label {
    color: var(--other-1)
}

.input-area.dark .input-label.select-box-label {
    color: var(--primary-7)
}

.input-area.dark .input-bottom-text {
    color: var(--primary-6)
}

.input-area.dark:focus .select-box-label:not(.disabled),
.input-area.dark:hover .select-box-label:not(.disabled),
.input-area.dark:focus-within .select-box-label:not(.disabled) {
    color: var(--other-1)
}

.input-area.dark .select-box {
    border-color: var(--primary-3)
}

.input-area.dark .select-box .select-box__input-text {
    background-color: var(--opacity-2)
}

.input-area.dark .select-box__value input:checked+.select-box__input-text {
    color: var(--other-1)
}

.input-area.dark .select-box:focus,
.input-area.dark .select-box:hover,
.input-area.dark .select-box:focus-within {
    border-color: var(--other-1)
}

.input-area.dark .select-box__list {
    background-color: var(--primary-2)
}

.input-area.dark .select-box__option {
    background-color: var(--primary-2)
}

.input-area.dark .select-box__option:hover,
.input-area.dark .select-box__option:focus {
    background-color: var(--primary-3)
}

.input-area.dark .select-box__option .option-text,
.input-area.dark .select-box__option .opt-optional-text {
    color: var(--other-1)
}

.input-area.dark .select-box.disabled .select-box__current {
    background-color: var(--primary-2)
}

.input-area.dark .select-box .select-box__current .select-box__value .icon-dropdown {
    width: 20px;
    height: 20px;
    display: none
}

.input-area.dark .select-box .select-box__current .select-box__value .select-box__input-text {
    color: var(--other-1)
}

.input-area.dark .select-box .select-box__current .select-box__value .select-box__input:checked+.icon-dropdown {
    display: flex
}

.input-area.dark .select-box .select-box__current .select-box__value .select-box__input:checked+.icon-dropdown:not(.ignore-color) {
    background-color: var(--primary-7)
}

.input-area.dark .input input {
    color: var(--other-1);
    border-color: var(--primary-3)
}

.input-area.dark .input input:-webkit-autofill,
.input-area.dark .input input:-webkit-autofill:hover,
.input-area.dark .input input:-webkit-autofill:focus,
.input-area.dark .input input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--other-1) !important;
    caret-color: var(--other-1) !important
}

.input-area.dark .input input::placeholder {
    color: var(--primary-5)
}

.input-area.dark .input input:focus,
.input-area.dark .input input:hover {
    border-color: var(--other-1)
}

.input-area.dark .input.disabled input {
    border-color: var(--primary-3);
    background-color: var(--primary-2);
    color: var(--primary-8);
    pointer-events: none
}

.input-area.dark .input.error,
.input-area.dark .select-box.error,
.input-area.dark .checkbox-label.error,
.input-area:not(.dark) .input.error,
.input-area:not(.dark) .select-box.error,
.input-area:not(.dark) .checkbox-label.error {
    border-color: var(--system-5)
}

.input-area.dark .input.error input:not(.no-validation),
.input-area.dark .select-box.error input:not(.no-validation),
.input-area.dark .checkbox-label.error input:not(.no-validation),
.input-area:not(.dark) .input.error input:not(.no-validation),
.input-area:not(.dark) .select-box.error input:not(.no-validation),
.input-area:not(.dark) .checkbox-label.error input:not(.no-validation) {
    border-color: var(--system-5)
}

.input-area.dark .input.error .checkmark,
.input-area.dark .select-box.error .checkmark,
.input-area.dark .checkbox-label.error .checkmark,
.input-area:not(.dark) .input.error .checkmark,
.input-area:not(.dark) .select-box.error .checkmark,
.input-area:not(.dark) .checkbox-label.error .checkmark {
    background-color: var(--system-5)
}

.input-area.dark .input.error~.input-bottom-text-checkbox,
.input-area.dark .select-box.error~.input-bottom-text-checkbox,
.input-area.dark .checkbox-label.error~.input-bottom-text-checkbox,
.input-area:not(.dark) .input.error~.input-bottom-text-checkbox,
.input-area:not(.dark) .select-box.error~.input-bottom-text-checkbox,
.input-area:not(.dark) .checkbox-label.error~.input-bottom-text-checkbox {
    display: flex
}

.input-area.dark .input.error .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area.dark .select-box.error .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area.dark .checkbox-label.error .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area:not(.dark) .input.error .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area:not(.dark) .select-box.error .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area:not(.dark) .checkbox-label.error .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show) {
    background-color: var(--system-5);
    -webkit-mask: url(/static/images/icon-error.svg) no-repeat center;
    -webkit-mask-size: 20px
}

.input-area.dark .input.error .icon-eye-show:not(.icon-dropdown),
.input-area.dark .select-box.error .icon-eye-show:not(.icon-dropdown),
.input-area.dark .checkbox-label.error .icon-eye-show:not(.icon-dropdown),
.input-area:not(.dark) .input.error .icon-eye-show:not(.icon-dropdown),
.input-area:not(.dark) .select-box.error .icon-eye-show:not(.icon-dropdown),
.input-area:not(.dark) .checkbox-label.error .icon-eye-show:not(.icon-dropdown) {
    right: 18px;
    padding: 12px
}

.input-area.dark .input.error~.input-bottom-text,
.input-area.dark .select-box.error~.input-bottom-text,
.input-area.dark .checkbox-label.error~.input-bottom-text,
.input-area:not(.dark) .input.error~.input-bottom-text,
.input-area:not(.dark) .select-box.error~.input-bottom-text,
.input-area:not(.dark) .checkbox-label.error~.input-bottom-text {
    margin-top: var(--spacing-8)
}

.input-area.dark .input.valid input:not(.no-validation),
.input-area.dark .select-box.valid input:not(.no-validation),
.input-area.dark .checkbox-label.valid input:not(.no-validation),
.input-area:not(.dark) .input.valid input:not(.no-validation),
.input-area:not(.dark) .select-box.valid input:not(.no-validation),
.input-area:not(.dark) .checkbox-label.valid input:not(.no-validation) {
    border-color: var(--system-1)
}

.input-area.dark .input.valid .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area.dark .select-box.valid .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area.dark .checkbox-label.valid .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area:not(.dark) .input.valid .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area:not(.dark) .select-box.valid .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show),
.input-area:not(.dark) .checkbox-label.valid .icon-right:not(.icon-dropdown, .icon-calendar, .icon-eye-show) {
    display: block;
    background-color: var(--system-1);
    -webkit-mask: url(/static/images/icon-success.svg) no-repeat center;
    -webkit-mask-size: 20px;
    right: 0
}

.input-area.dark .input.valid .icon-eye-show,
.input-area.dark .select-box.valid .icon-eye-show,
.input-area.dark .checkbox-label.valid .icon-eye-show,
.input-area:not(.dark) .input.valid .icon-eye-show,
.input-area:not(.dark) .select-box.valid .icon-eye-show,
.input-area:not(.dark) .checkbox-label.valid .icon-eye-show {
    right: 18px;
    padding: 12px
}

@media(min-width: 767.5px) {
    .input-area.input-label-left {
        flex-direction: row;
        justify-content: space-between
    }
    .input-area.input-label-left .input-label {
        margin: 14px 0 0 0
    }
    .input-area.input-label-left .input-wrapper {
        width: 100%
    }
}

.select-box {
    min-height: 48px;
    position: relative;
    font-size: 14px;
    color: var(--primary-mode-1);
    display: inline-flex;
    line-height: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--primary-9);
    border-radius: 60px
}

.select-box.disabled {
    background-color: var(--primary-10);
    pointer-events: none
}

.select-box.disabled .select-box__input-text {
    background-color: var(--primary-10)
}

.select-box.disabled:focus,
.select-box.disabled:hover,
.select-box.disabled:focus-within {
    border-color: var(--primary-9)
}

.select-box.searchable {
    border: unset;
    border-radius: unset
}

.select-box.searchable:after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--primary-7);
    -webkit-mask: url(../static/images/icon-chevron-down.svg) no-repeat center;
    -webkit-mask-size: 12px;
    display: flex;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all .3s;
    pointer-events: none;
    touch-action: none
}

.select-box.searchable.rotate-arrow:after {
    transform: rotate(-180deg)
}

.select-box.searchable .icon-search {
    position: absolute;
    background-image: url(../static/images/icon-search.svg);
    background-repeat: no-repeat;
    height: 20px;
    width: 25px;
    right: 44px;
    background-size: 20px;
    pointer-events: none;
    touch-action: none;
    top: 14px
}

.select-box.searchable .select-box__list {
    padding: var(--spacing-4) var(--spacing-8)
}

.select-box.searchable .select-box__list .select-box__input {
    display: none
}

.select-box:focus,
.select-box:hover,
.select-box:focus-within {
    border-color: var(--primary-mode-1)
}

.select-box.error .select-box__current {
    display: flex;
    width: 100%
}

.select-box.error .select-box__current .icon-right {
    height: 20px;
    width: 20px;
    right: var(--spacing-40);
    position: absolute
}

.select-box.valid .icon-search {
    display: none
}

.select-box__current,
.select-box__search-input {
    position: relative;
    cursor: pointer;
    outline: none;
    padding: 13px 15px;
    width: 100%;
    border-radius: 60px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.select-box__search-input {
    border: 1px solid var(--primary-9)
}

.select-box__search-input:focus,
.select-box__search-input:hover,
.select-box__search-input:focus-within {
    border-color: var(--primary-mode-1)
}

.select-box__search-input:focus~.icon-search,
.select-box__search-input:hover~.icon-search,
.select-box__search-input:focus-within~.icon-search {
    display: block
}

.select-box__current:focus~.select-box__list,
.select-box__search-input:focus~.select-box__list,
.select-box__list:focus-within {
    opacity: 1;
    animation-name: none;
    z-index: 100
}

.select-box__current.dropdown-open:not(.disabled):after,
.select-box__search-input:not(.disabled):focus:after {
    transform: rotate(-180deg)
}

.select-box__no-records {
    display: none;
    text-align: center;
    color: var(--primary-mode-7)
}

.select-box__current:after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--primary-7);
    -webkit-mask: url(../static/images/icon-chevron-down.svg) no-repeat center;
    -webkit-mask-size: 12px;
    display: flex;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all .3s
}

.select-box__current.disabled:after {
    -webkit-mask: url(../static/images/icon-lock.svg) no-repeat center;
    -webkit-mask-size: 12px
}

.select-box__current.disabled {
    border-color: var(--primary-9);
    background-color: var(--primary-10);
    color: var(--primary-4);
    pointer-events: none
}

.select-box__current.disabled .select-box__input-text {
    background-color: var(--primary-10)
}

.select-box__value {
    display: flex
}

.select-box__value_default {
    color: var(--primary-7)
}

.select-box__input-text {
    display: none;
    width: 100%;
    margin: 0;
    color: var(--other-mode-1)
}

.select-box__input {
    display: none
}

.select-box__input+.icon-dropdown {
    display: none
}

.select-box__input:checked+.icon-dropdown {
    display: flex;
    width: 20px;
    height: 20px;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 var(--spacing-8) 0 0
}

.select-box__input:checked+.icon-dropdown:not(.ignore-color) {
    background-color: var(--primary-7)
}

.select-box__input:checked~.select-box__input-text {
    display: flex;
    flex-direction: row
}

.select-box__list {
    position: absolute;
    min-width: 100%;
    padding: 0;
    list-style: none;
    opacity: 0;
    top: 55px;
    animation-name: HideList;
    animation-duration: 0s;
    animation-delay: .3s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    box-shadow: 2px 4px 20px 0 var(--opacity-mode-5);
    box-sizing: border-box;
    border-radius: 16px;
    padding: var(--spacing-8);
    z-index: 10
}

.select-box__list.filterable {
    min-width: max(100%, 320px)
}

.select-box__list.filterable .select-box-list-options-container {
    max-height: 168px;
    overflow-y: scroll
}

.select-box__list.filterable .filter-area {
    box-sizing: border-box;
    width: -webkit-fill-available;
    min-width: unset
}

.select-box__list.filterable .filter-area .input {
    position: relative
}

.select-box__list.filterable .filter-area .input .filter-matches-info {
    margin: auto 15px;
    position: absolute;
    display: block;
    height: 20px;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.select-box__list:not(.filterable) .select-box-list-options-container {
    max-height: 232px;
    overflow-y: scroll
}

.select-box__list .select-box-list-options-container::-webkit-scrollbar {
    width: 4px
}

.select-box__list .select-box-list-options-container::-webkit-scrollbar-track {
    background-color: var(--primary-mode-11);
    margin: var(--spacing-32) 0 var(--spacing-32) 0;
    border-radius: 100px
}

.select-box__list .select-box-list-options-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-mode-7);
    background-clip: content-box;
    border-radius: 100px
}

.select-box__list .select-box__option {
    cursor: pointer
}

.select-box__option-wrapper {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    display: flex
}

.select-box__option-wrapper .select-box__option {
    width: 100%
}

.select-box__option-wrapper.no-records {
    margin-top: 0px;
    pointer-events: none
}

.select-box__option-wrapper.highlighted>label {
    background-color: var(--primary-mode-11)
}

.select-box__option {
    display: flex;
    padding: var(--spacing-8) var(--spacing-8);
    color: var(--primary-mode-1);
    background-color: var(--dropdown-mode-1);
    border-radius: 16px;
    justify-content: flex-start
}

.select-box__option .option-text {
    display: flex;
    flex-direction: row;
    flex-shrink: 0
}

.select-box__option .option-text .icon-dropdown {
    width: 20px;
    height: 20px;
    display: flex;
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0
}

.select-box__option .option-text .icon-dropdown:not(.ignore-color) {
    background-color: var(--primary-7)
}

.select-box__option:hover,
.select-box__option:focus {
    background-color: var(--primary-mode-11)
}

.select-box__option:not(:first-child) {
    margin-top: var(--spacing-8)
}

.select-box__option .opt-optional-text {
    display: contents
}

.select-box__option .opt-optional-text p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block
}

.select-box__option .opt-optional-text .icon-dropdown {
    width: 20px;
    height: 20px;
    display: flex;
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
}

.select-box__option .opt-optional-text .icon-dropdown:not(.ignore-color) {
    background-color: var(--primary-7)
}

@keyframes HideList {
    from {
        transform: scaleY(1)
    }
    to {
        transform: scaleY(0)
    }
}

.input-area-checkbox.dark .checkbox-label .checkmark {
    background-color: var(--primary-3)
}

.input-area-checkbox.dark .checkbox-label input:checked~.checkmark {
    background-color: var(--other-1)
}

.input-area-checkbox .checkbox-label {
    display: block;
    position: relative;
    padding-left: var(--spacing-28);
    cursor: pointer
}

.input-area-checkbox .checkbox-label.error input:checked~.checkmark {
    background-color: var(--system-5)
}

.input-area-checkbox .checkbox-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.input-area-checkbox .checkbox-label input:checked~.checkmark {
    -webkit-mask: url(../static/images/icon-checkbox-checked.svg) no-repeat center;
    -webkit-mask-size: 20px;
    background-color: var(--primary-1)
}

.input-area-checkbox .checkbox-label .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: var(--primary-9);
    -webkit-mask: url(../static/images/icon-checkbox-unchecked.svg) no-repeat center;
    -webkit-mask-size: 20px
}

.input-area-radio.dark .radio-label .radio-button {
    background-color: var(--primary-3)
}

.input-area-radio.dark .radio-label input:checked~.radio-button {
    background-color: var(--other-1)
}

.input-area-radio .radio-label {
    display: block;
    position: relative;
    padding-left: var(--spacing-28);
    cursor: pointer;
    font-size: 16px;
    height: 24px;
    line-height: 24px
}

.input-area-radio .radio-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.input-area-radio .radio-label input:checked~.radio-button {
    -webkit-mask: url(../static/images/icon-radio-on.svg) no-repeat center;
    -webkit-mask-size: 24px;
    background-color: var(--primary-1)
}

.input-area-radio .radio-label .radio-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: var(--primary-9);
    -webkit-mask: url(../static/images/icon-radio-off.svg) no-repeat center;
    -webkit-mask-size: 24px
}

.pill {
    display: flex;
    flex-direction: row
}

.pill input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.pill input:checked~.pill-label {
    border-color: var(--primary-1)
}

.pill input:checked~.pill-label .pill-text {
    color: var(--primary-1)
}

.pill input:checked~.pill-label .icon-left {
    background-color: var(--primary-1)
}

.pill .pill-label {
    border-radius: 40px;
    border: solid 1px var(--primary-9);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row
}

.pill .pill-label .pill-text {
    color: var(--primary-5)
}

.pill .pill-label .icon {
    background-color: var(--primary-7)
}

.pill .pill-label .icon.icon-left {
    -webkit-mask: url(../static/images/icon-raf.svg) no-repeat center
}

.pill .pill-label .icon.icon-right {
    -webkit-mask: url(../static/images/icon-error.svg) no-repeat center
}

.pill .pill-label:hover {
    border-color: var(--primary-1)
}

.pill .pill-label:hover .icon.icon-right {
    background-color: var(--primary-1)
}

.pill .pill-label.active .pill-text {
    color: var(--primary-1)
}

.pill .pill-label.active .icon-left {
    background-color: var(--primary-1)
}

.pill.lg .pill-label {
    font-size: 14px;
    height: 44px;
    padding: var(--spacing-12) var(--spacing-16);
    box-sizing: border-box
}

.pill.lg .icon.icon-left {
    width: 20px;
    height: 20px;
    -webkit-mask-size: 20px
}

.pill.lg .icon.icon-right {
    width: 16px;
    height: 16px;
    -webkit-mask-size: 16px
}

.pill.md .pill-label {
    font-size: 12px;
    height: 34px;
    padding: 9px var(--spacing-16);
    box-sizing: border-box
}

.pill.md .icon.icon-left {
    width: 16px;
    height: 16px;
    -webkit-mask-size: 16px
}

.pill.md .icon.icon-right {
    width: 16px;
    height: 16px;
    -webkit-mask-size: 16px
}

.device-mobile .input-area {
    font-size: 100%
}

.device-mobile .input-area .input input,
.device-mobile .input-area .input select {
    font-size: 100%
}

.device-mobile .select-box {
    font-size: 100%
}

#edit-player-form .input-area .input.valid .icon-eye-show {
    right: 0;
    margin-right: 43px
}

#edit-player-form .input-area .input.valid .icon-eye-show.toggled {
    right: 0
}

#edit-player-form .input-area .input.error .icon-eye-show {
    right: 0;
    margin-right: 43px
}

#edit-player-form .input-area .input.error .icon-eye-show.toggled {
    right: 0
}

#register-form .mobile-number-input .select-box__list:not(.filterable) .select-box-list-options-container {
    max-height: 212px
}

#register-form .mobile-number-input .select-box__list.filterable .select-box-list-options-container {
    max-height: 148px
}

#withdrawal-form .input-area .input.has-icon-right input {
    color: #000 !important;
}