@import url(https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap);

.header {
    --header-background-color: var(--tertiary);
    --header-color: var(--tertiary-color);
    background-color: var(--header-background-color);
    color: var(--header-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    padding: 10px 15px;
    text-transform: uppercase;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.icon {
    height: 24px;
    width: 24px
}

.section-header {
    --section-header-background-color: var(--secondary);
    --section-header-color: var(--secondary-color);
    background-color: var(--section-header-background-color);
    color: var(--section-header-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    padding: 10px 15px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.menu-header {
    --menu-header-background-color: var(--primary-active);
    --menu-header-color: var(--primary-color)
}

.menu-header.section-header {
    --section-header-background-color: var(--menu-header-background-color);
    --section-header-color: var(--menu-header-color)
}

.menu-list {
    --menu-list-background-color: var(--primary);
    background-color: var(--menu-list-background-color);
    padding: 10px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.menu-item {
    --menu-item-background-color: var(--primary);
    --menu-item-border: var(--primary-border);
    --menu-item-border-radius: var(--primary-border-radius);
    --menu-item-color: var(--primary-color);
    background-color: var(--menu-item-background-color);
    border: var(--menu-item-border);
    border-radius: var(--menu-item-border-radius);
    color: var(--menu-item-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    padding: 10px 20px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), border var(--theme-transition-duration) var(--switch-transition-timing-function), border-radius var(--theme-transition-duration) var(--switch-transition-timing-function), color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.menu-item:not(:first-of-type) {
    margin-top: 5px
}

.menu-item_clickable {
    cursor: pointer
}

.input_disabled {
    opacity: .5
}

.input_full-width {
    width: 100%
}

.input__input-container {
    display: block
}

.input__label {
    color: var(--input-label-color);
    display: block;
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 5px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.input__input-field-container {
    align-items: center;
    background-color: var(--input-background-color);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    display: flex;
    padding: 6px 12px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), border var(--theme-transition-duration) var(--switch-transition-timing-function), border-radius var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.input__input-field-container:has(>.input__input-field:-webkit-autofill) {
    background-color: var(--input-selected-background-color)
}

.input__input-field-container .input__input-field:-webkit-autofill,
.input__input-field-container .input__input-field:-webkit-autofill:active,
.input__input-field-container .input__input-field:-webkit-autofill:focus,
.input__input-field-container .input__input-field:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--input-color) !important;
    -webkit-box-shadow: 0 0 0 100px var(--input-selected-background-color) inset !important
}

.input__input-field-container_errorBorder {
    border: 1px solid #e21919
}

.input__input-field {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: var(--input-color);
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    outline: none;
    padding: 0;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 100%
}

.input__input-field::-webkit-input-placeholder {
    color: var(--input-placeholder-color)
}

.input__input-field::placeholder {
    color: var(--input-placeholder-color)
}

.input__icon {
    color: var(--input-icon-color);
    flex-shrink: 0;
    height: 16px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 16px
}

.input__icon_position_left {
    margin-right: 7px
}

.input__icon_position_right {
    margin-left: 7px
}

.input__description {
    color: var(--input-description-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    margin-top: 5px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.input__description_status_error {
    color: var(--input-description-error-color)
}

@-webkit-keyframes loader-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes loader-animation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.loader {
    -webkit-animation: loader-animation .7s linear infinite;
    animation: loader-animation .7s linear infinite;
    border-color: transparent;
    border-radius: 50%;
    border-style: solid;
    border-top-color: inherit
}

.loader_size_small {
    border-width: 2px;
    height: 16px;
    width: 16px
}

.loader_size_medium {
    border-width: 4px;
    height: 32px;
    width: 32px
}

.loader_size_large {
    border-width: 6px;
    height: 64px;
    width: 64px
}

.loader-container {
    position: relative;
    width: 100%
}

.loader-container__backdrop {
    background-color: var(--loader-background-color);
    height: 100%;
    position: absolute;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 100%;
    z-index: 1000
}

.loader-container__loader {
    color: var(--loader-color);
    left: 50%;
    position: absolute;
    top: 50%;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    translate: -50% -50%;
    z-index: 1001
}

.loader-container__content {
    height: 100%;
    width: 100%
}

.button {
    background-color: var(--button-hover-background-color);
    --button-hover-background-color: var(--brand-hover);
    --button-color: var(--brand-color);
    --button-icon-color: var(--brand-icon-color);
    --button-before-background-color: var(--brand-color);
    align-items: center;
    background-color: #e5d21b !important;
    border: none;
    border-radius: 5px;
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    justify-content: center;
    line-height: 20px;
    outline: none;
    overflow: hidden;
    padding: 7px 14px;
    position: relative;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.button:active,
.button:hover {
    background-color: var(--button-hover-background-color)
}

.button:before {
    background-color: var(--button-before-background-color);
    border-radius: 100%;
    content: "";
    display: block;
    left: 50%;
    opacity: .1;
    padding-top: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 0
}

.button:active:before {
    padding-top: 120%;
    transition: width .2s ease-out, padding-top .2s ease-out;
    width: 120%
}

.button_disabled {
    cursor: not-allowed;
    opacity: .5
}

.button_full-width {
    width: 100%
}

.button__icon-container {
    height: 16px;
    width: 16px
}

.button__icon-container_position_left {
    margin-right: 10px
}

.button__icon-container_position_right {
    margin-left: 10px
}

.button__icon {
    color: var(--button-icon-color);
    height: 16px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 16px
}

.select {
    --select-background-color: var(--input-background-color);
    --select-color: var(--input-color);
    --select-label-color: var(--input-label-color);
    --select-icon-color: var(--input-icon-color);
    --select-border: var(--input-border);
    --select-placeholder-color: var(--input-placeholder-color);
    --select-border-radius: var(--input-border-radius);
    --select-selected-background-color: var(--input-selected-background-color);
    position: relative
}

.select__label {
    color: var(--select-label-color);
    display: block;
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 5px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.select__value-container {
    align-items: center;
    background-color: var(--select-background-color);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
    cursor: pointer;
    display: flex;
    padding: 6px 12px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), border var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.select__value-container_open {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select__value-container_disabled {
    opacity: .5
}

.select__value {
    color: var(--select-color);
    flex-grow: 1;
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    white-space: nowrap
}

.select__value_placeholder {
    color: var(--select-placeholder-color)
}

.select__value-icon {
    color: var(--select-icon-color);
    flex-shrink: 0;
    height: 16px;
    margin-left: 7px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 16px
}

.select__options {
    background-color: var(--select-background-color);
    border: var(--select-border);
    border-bottom-left-radius: var(--select-border-radius);
    border-bottom-right-radius: var(--select-border-radius);
    max-height: 150px;
    overflow-y: auto;
    padding: 5px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.select__options_modal {
    position: absolute;
    width: 100%
}

.select__option {
    word-wrap: break-word;
    background-color: var(--select-background-color);
    border: var(--select-border);
    border-radius: var(--select-border-radius);
    color: var(--select-color);
    cursor: pointer;
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    min-height: 26px;
    padding: 4px 12px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function), border-radius var(--theme-transition-duration) var(--switch-transition-timing-function), background-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.select__option:not(:last-of-type) {
    margin-bottom: 2px
}

.select__option_selected {
    background-color: var(--select-selected-background-color)
}

.switch {
    border-radius: 40px;
    height: 28px;
    padding: 4px;
    position: relative;
    transition: background-color var(--switch-transition-duration) var(--switch-transition-timing-function);
    width: 60px
}

.switch_value_false {
    background-color: var(--switch-false-background-color)
}

.switch_value_false:active .switch__icon {
    width: 30px
}

.switch_value_false .switch__icon {
    left: 4px
}

.switch_value_true {
    background-color: var(--switch-true-background-color)
}

.switch_value_true:active .switch__icon {
    left: 26px;
    width: 30px
}

.switch_value_true .switch__icon {
    left: 36px
}

.switch__icon {
    background-color: var(--switch-icon-color);
    border-radius: 20px;
    height: 20px;
    position: absolute;
    transition: width var(--switch-transition-duration) var(--switch-transition-timing-function), left var(--switch-transition-duration) var(--switch-transition-timing-function);
    width: 20px
}

.date-picker {
    --date-picker-background-color: var(--input-background-color);
    --date-picker-color: var(--input-color);
    --date-picker-label-color: var(--input-label-color);
    --date-picker-border: var(--input-border);
    --date-picker-placeholder-color: var(--input-placeholder-color);
    --date-picker-border-radius: var(--input-border-radius);
    --date-picker-calendar-icon-color: var(--input-color)
}

.date-picker_disabled {
    opacity: .5
}

.date-picker__label {
    color: var(--date-picker-label-color);
    display: block;
    margin-bottom: 5px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.date-picker__input,
.date-picker__label {
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px
}

.date-picker__input {
    align-items: center;
    background-color: var(--date-picker-background-color);
    border: var(--date-picker-border);
    border-radius: var(--date-picker-border-radius);
    color: var(--date-picker-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    min-height: 30px;
    padding: 6px 12px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function), background-color var(--theme-transition-duration) var(--switch-transition-timing-function), border var(--theme-transition-duration) var(--switch-transition-timing-function), border-radius var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.date-picker__input_placeholder {
    color: var(--date-picker-placeholder-color)
}

.date-picker__calendar-icon {
    color: var(--date-picker-calendar-icon-color);
    flex-shrink: 0;
    height: 16px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 16px
}

.pagination {
    --pagination-color: var(--primary-color);
    --pagination-active-color: var(--secondary);
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.pagination,
.pagination__items {
    align-items: center;
    display: flex
}

.pagination__items {
    flex-wrap: wrap
}

.pagination__item {
    align-items: center;
    border-radius: 5px;
    color: var(--pagination-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 30px;
    min-width: 30px;
    padding: 5px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.pagination__item:not(:last-of-type) {
    margin-right: 10px
}

.pagination__item:hover {
    cursor: pointer
}

.pagination__item.pagination__item_icon {
    height: 100%;
    margin-right: 0
}

.pagination__item_active {
    border: 1px solid;
    color: var(--pagination-active-color)
}

.pagination__item_disabled {
    opacity: .5
}

.pagination__item_disabled:hover,
.pagination__item_type_dots:hover {
    cursor: inherit
}

.pagination__icon {
    color: var(--pagination-color);
    height: 16px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 16px
}

.table__container {
    --table-color: var(--primary-color);
    --table-background-color: var(--primary);
    --table-header-background-color: var(--primary-active);
    --table-header-icon-color: var(--primary-icon-color);
    --table-sort-none-icon-color: #6e6e6e;
    background-color: var(--table-background-color);
    margin-bottom: 30px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 100%
}

.table__container_scrollable {
    overflow: auto
}

.table__container_scrollable .table {
    table-layout: auto
}

.table {
    color: var(--table-color);
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    table-layout: fixed;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 100%
}

.table__header {
    background-color: var(--table-header-background-color);
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 100%
}

.table__header-cell {
    padding: 10px 15px;
    white-space: nowrap
}

.table__header-cell_align_left {
    text-align: left
}

.table__header-cell_align_right {
    text-align: right
}

.table__header-cell_align_center {
    text-align: center
}

.table__header-cell-text {
    display: inline-block
}

.table__header-cell-icon {
    color: var(--table-header-icon-color);
    display: inline-block;
    height: 12px;
    margin-left: 5px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    vertical-align: middle;
    width: 12px
}

.table__header-cell-icon_sort_ASC path:first-child,
.table__header-cell-icon_sort_none path {
    fill: var(--table-sort-none-icon-color)
}

.table__header-cell-icon_sort_ASC path:last-child,
.table__header-cell-icon_sort_DESC path:first-child {
    fill: var(--table-header-icon-color)
}

.table__header-cell-icon_sort_DESC path:last-child {
    fill: var(--table-sort-none-icon-color)
}

.table__body-cell {
    word-wrap: break-word;
    padding: 5px 15px;
    vertical-align: middle
}

.table__body-cell_align_left {
    text-align: left
}

.table__body-cell_align_right {
    text-align: right
}

.table__body-cell_align_center {
    text-align: center
}

.table__footer-cell {
    padding: 5px
}

.table__footer-cell_align_left {
    text-align: left
}

.table__footer-cell_align_right {
    text-align: right
}

.table__footer-cell_align_center {
    text-align: center
}

.table__pagination {
    justify-content: flex-end;
    padding: 10px
}

.modal {
    position: fixed;
    z-index: 2001
}

.modal,
.modal__backdrop {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%
}

.modal__backdrop {
    background-color: rgba(0, 0, 0, .4);
    position: absolute
}

.modal__content {
    left: 50%;
    max-height: calc(100% - 20px);
    max-width: calc(100% - 20px);
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.modal-content,
.modal__content {
    display: flex;
    flex-direction: column
}

.modal-content {
    --modal-content-background-color: var(--primary);
    --modal-content-border-color: var(--secondary);
    --modal-content-color: var(--primary-color);
    background-color: var(--modal-content-background-color);
    border: 1px solid var(--modal-content-border-color);
    border-radius: 10px;
    color: var(--modal-content-color);
    font-family: Source Sans Pro, sans-serif;
    min-width: 280px;
    overflow: hidden
}

.modal-content__header {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 15px;
    text-align: center
}

.modal-content__content {
    color: var(--modal-content-color);
    font-size: 14px;
    font-weight: 700;
    overflow: auto;
    padding: 10px 15px 15px
}

.modal-content__actions {
    border-top: 1px solid var(--modal-content-border-color);
    padding: 15px
}

.auto-complete {
    position: relative
}

.auto-complete__list {
    background-color: var(--primary-active);
    border-radius: 0 0 var(--input-border-radius) var(--input-border-radius);
    margin: 3px auto 0;
    padding: 3px;
    position: absolute;
    width: 100%;
    z-index: 10
}

.auto-complete__list-item {
    border-radius: calc(var(--input-border-radius) - 3px);
    border-top: 1px solid var(--primary);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    padding: 10px 5px
}

.auto-complete__list-item:last-of-type {
    border-bottom: 1px solid var(--primary)
}

.auto-complete__list-item_active {
    background-color: var(--primary)
}

.auto-complete__loader {
    border-color: var(--loader-color);
    border-top-color: transparent;
    margin: 0 auto;
    transition: border-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.theme-switch {
    align-items: center;
    display: flex
}

.theme-switch__icon {
    color: var(--theme-switch-icon-color);
    height: 28px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 28px
}

.theme-switch__icon_position_left {
    margin-right: 5px
}

.theme-switch__icon_position_right {
    margin-left: 5px
}

.settings-item {
    align-items: center;
    display: flex;
    transition-property: background-color, color
}

.settings-item_isOpen {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.settings-item__icon {
    height: 22px;
    margin-left: auto;
    width: 22px
}

.change-language__list {
    --change-language-active-background-color: var(--primary-active);
    --change-language-border: var(--primary-border);
    --change-language-border-radius: var(--primary-border-radius);
    border: var(--change-language-border);
    border-bottom-left-radius: var(--change-language-border-radius);
    border-bottom-right-radius: var(--change-language-border-radius)
}

.change-language__list-item {
    align-items: center;
    display: flex
}

.change-language__list-item_isActive {
    background-color: var(--change-language-active-background-color)
}

.change-language__list-item-icon {
    height: 22px;
    margin-right: 10px;
    width: 22px
}

.change-password__list {
    --change-password-border: var(--primary-border);
    --change-password-border-radius: var(--primary-border-radius);
    border: var(--change-password-border);
    border-bottom-left-radius: var(--change-password-border-radius);
    border-bottom-right-radius: var(--change-password-border-radius)
}

.change-password__list-item:not(:last-of-type) {
    margin-bottom: 10px
}

.error-boundary {
    --error-boundary-fallback-background-color: var(--primary);
    --error-boundary-fallback-color: var(--primary-color);
    --error-boundary-fallback-stack-color: var(--primary-color)
}

.error-boundary__fallback {
    background-color: var(--error-boundary-fallback-background-color);
    padding: 15px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.error-boundary__fallback-title {
    color: var(--error-boundary-fallback-color);
    font-weight: 700;
    text-transform: uppercase
}

.error-boundary__fallback-stack,
.error-boundary__fallback-title {
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 20px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.error-boundary__fallback-stack {
    color: var(--error-boundary-fallback-stack-color);
    font-weight: 400;
    white-space: break-spaces
}

.base-template {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.base-template__content {
    flex-grow: 1
}

.base-template__theme-switch {
    padding: 15px
}

.authorized-template {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.authorized-template__header-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2000
}

.authorized-template__header {
    align-items: center;
    display: flex;
    padding-left: 10px;
    padding-right: 10px
}

.authorized-template__header-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.authorized-template__back-icon {
    cursor: pointer;
    flex-shrink: 0;
    height: 16px;
    margin-right: 10px;
    width: 16px
}

.authorized-template__sub-header {
    margin-bottom: 2px
}

.authorized-template__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.auth-page,
.authorized-template__theme-switch {
    padding: 15px
}

.auth-page__input {
    margin-bottom: 15px
}

.new-user-page {
    padding: 15px
}

.new-user-page__input {
    margin-bottom: 15px
}

.user-list-page-table-controls {
    --user-list-table-controls: var(--secondary);
    align-items: center;
    display: flex;
    justify-content: center
}

.user-list-page-table-controls__icon {
    color: var(--user-list-table-controls);
    cursor: pointer;
    height: 24px;
    width: 24px
}

.users-total__section-header {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.users-total__title:not(:last-of-type) {
    margin-right: 10px
}

.users-total__content {
    align-items: center;
    display: flex;
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 16px;
    padding: 10px
}

.users-total__value:not(:last-of-type) {
    margin-right: 10px
}

.user-list-page__loader-container {
    flex-grow: 1
}

.user-list-page__search-block {
    padding: 10px
}

.cashier-transactions-page__loader {
    flex-grow: 1
}

.cashier-transactions-page__date-filter-block {
    padding: 15px
}

.checkbox {
    --checkbox-unchecked-background: transparent;
    --checkbox-checked-background: var(--brand);
    --checkbox-border: var(--input-border);
    --checkbox-border-radius: 5px;
    --checkbox-size: 25px
}

.checkbox__label {
    color: var(--input-label-color);
    display: block;
    font-family: Source Sans Pro;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 2px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.checkbox__box {
    border-radius: var(--checkbox-border-radius);
    cursor: pointer;
    height: var(--checkbox-size);
    position: relative;
    width: var(--checkbox-size)
}

.checkbox__box_value_true {
    background: var(--checkbox-checked-background)
}

.checkbox__box_value_false,
.checkbox__box_value_true {
    border: var(--checkbox-border);
    transition: background var(--theme-transition-duration) var(--switch-transition-timing-function), border var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.checkbox__box_value_false {
    background: var(--checkbox-unchecked-background)
}

.transaction-history-filter__input {
    margin-bottom: 15px
}

.transaction-history-page__loader {
    flex-grow: 1
}

.transaction-history-page__filter-block {
    margin-bottom: 15px
}

.transaction-history-page__filter-container {
    padding: 15px
}

.transaction-history-page__cell_color_red {
    color: var(--error)
}

.transaction-history-page__cell_color_green {
    color: var(--success)
}

.transaction-history-page__total-container {
    display: flex;
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    justify-content: flex-end;
    line-height: 16px
}

.transaction-history-page__total-item:not(:last-child) {
    margin-right: 15px
}

.transaction-history-page__payout {
    color: var(--error)
}

.transaction-history-page__deposit {
    color: var(--success)
}

.transaction-history-page .table__body-row:nth-child(2n) {
    background-color: var(--table-header-background-color);
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.transaction-history-page .table__body-row {
    height: 70px
}

.player-bet-history-filter__item {
    margin-bottom: 10px
}

.player-bet-history-page__loader-container {
    flex-grow: 1
}

.player-bet-history-page__filter-container {
    padding: 15px
}

.player-bet-history-page__filter {
    margin-bottom: 15px
}

.player-bet-history-page__total-container {
    display: flex;
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    justify-content: flex-end;
    line-height: 16px
}

.user-edit-payment__input {
    margin-bottom: 15px
}

.user-edit-payment__button {
    margin-bottom: 5px
}

.user-edit-payment__button_type_top-up {
    --button-background-color: var(--success);
    --button-hover-background-color: var(--success);
    --button-color: var(--success-color)
}

.user-edit-payment__button_type_withdraw {
    --button-background-color: var(--error);
    --button-hover-background-color: var(--error);
    --button-color: var(--error-color)
}

.user-edit-payment__error {
    color: var(--error);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 5px
}

.user-edit-user-details__button:not(:last-of-type),
.user-edit-user-details__item:not(:last-child) {
    margin-bottom: 10px
}

.user-edit-user-details__button_type_ban {
    --button-background-color: var(--error);
    --button-hover-background-color: var(--error);
    --button-color: var(--error-color)
}

.user-edit-user-details__button_type_unban {
    --button-background-color: var(--success);
    --button-hover-background-color: var(--success);
    --button-color: var(--success-color)
}

.user-edit-players {
    flex-grow: 1
}

.user-full-info-item {
    --user-info-border-color: var(--tertiary-border);
    align-items: center;
    border-bottom: 1px solid var(--user-info-border-color);
    display: flex;
    flex-direction: row;
    padding-bottom: 10px;
    width: 100%
}

.user-full-info-item__label {
    align-self: flex-start;
    color: #8b8c9b;
    flex-shrink: 0;
    font-weight: 700;
    margin-right: 1%;
    width: 34%
}

.user-full-info-item__value {
    color: var(--primary-color);
    flex-shrink: 0;
    text-align: end;
    width: 65%;
    word-break: break-word
}

.user-full-info-item__value_touched {
    cursor: pointer;
    display: flex;
    gap: 5px;
    justify-content: flex-end
}

.users-info {
    --users-info-icon: var(--loader-color);
    flex-grow: 1
}

.users-info__info-icon {
    color: var(--users-info-icon);
    height: 17px;
    width: 17px
}

.users-info__filter {
    margin-bottom: 15px
}

.user-full-info-change-password__description {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    margin-bottom: 20px;
    text-align: center
}

.user-full-info-change-password__input {
    margin-bottom: 15px
}

.user-full-info-change-password__button.button {
    --button-border-color: #66e738
}

.user-full-info-parents {
    display: flex;
    flex-direction: column;
    min-height: 100px
}

.user-full-info-parents__loader-container,
.user-full-info-parents__loader-container .loader-container__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.user-full-info-parents__item:not(:last-of-type) {
    margin-bottom: 10px
}

.user-full-info-parents__empty-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.user-full-info-parents__empty {
    font-size: 16px;
    margin: auto;
    text-align: center
}

.user-full-info-parents__icon {
    height: 1rem;
    width: 1rem
}

.user-full-info-parents__icon * {
    fill: var(--secondary)
}

.user-full-info-ban__button {
    align-items: center;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    min-width: 66px;
    padding: 3px 6px;
    text-transform: uppercase
}

.user-full-info-ban__button_type_ban {
    background-color: var(--error);
    color: var(--error-color)
}

.user-full-info-ban__button_type_unban {
    background-color: var(--success);
    color: var(--success-color)
}

.user-full-info-ban__button_disabled {
    opacity: .5
}

.user-full-info-ban__actions {
    display: flex
}

.user-full-info-ban__action-button {
    background: transparent !important;
    border: 1px solid;
    color: var(--primary-color)
}

.user-full-info-ban__action-button:not(:last-of-type) {
    margin-right: 10px
}

.user-full-info-ban__action-button_type_confirm {
    border-color: var(--success)
}

.user-full-info-ban__action-button_type_cancel {
    border-color: var(--error)
}

.user-full-info-controls {
    border-bottom: 1px solid var(--tertiary-border);
    display: flex;
    justify-content: center;
    padding-bottom: 10px
}

.user-full-info-controls__button {
    align-items: center;
    background-color: var(--secondary);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    min-width: 66px;
    padding: 3px 6px;
    text-transform: uppercase
}

.user-full-info-controls__button:not(:last-of-type) {
    margin-right: 10px
}

.user-full-info-controls__button_disabled {
    cursor: inherit;
    opacity: .5
}

.user-full-info-controls__ban-button {
    cursor: pointer;
    margin-right: 10px
}

.user-full-info-controls__icon {
    height: 16px;
    width: 16px
}

.user-full-info-controls__icon path {
    fill: var(--tertiary-color)
}

.user-full-info-controls__close-btn {
    background: transparent !important;
    border: 1px solid var(--error);
    color: var(--primary-color)
}

.user-full-info-change-amount {
    align-items: center;
    border-bottom: 1px solid var(--tertiary-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 10px
}

.user-full-info-change-amount__form {
    align-items: center;
    display: flex;
    gap: 10px;
    height: 30px
}

.user-full-info-change-amount__description {
    font-size: 14px;
    font-weight: 700;
    text-align: center
}

.user-full-info-change-amount__description-amount_type_output {
    color: var(--error)
}

.user-full-info-change-amount__description-amount_type_input {
    color: var(--success)
}

.user-full-info-change-amount__error {
    color: var(--error);
    font-size: 11px
}

.user-full-info-change-amount__amount-input_minusDisabled .amount-input__icon-button_minus,
.user-full-info-change-amount__amount-input_plusDisabled .amount-input__icon-button_plus {
    opacity: .5
}

.user-full-info-change-amount__input {
    color: var(--primary-color);
    margin-left: 10px;
    margin-right: 10px;
    padding: 4px;
    width: 87px
}

.user-full-info-change-amount__input::-webkit-input-placeholder {
    color: var(--amount-input-placeholder-color);
    text-align: center
}

.user-full-info-change-amount__input::placeholder {
    color: var(--amount-input-placeholder-color);
    text-align: center
}

.user-full-info-change-amount__input .input__input-field {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center
}

.user-full-info-change-amount__input .input__input-field-container {
    border: none !important
}

.user-full-info-change-amount__buttons {
    display: flex;
    justify-content: center
}

.user-full-info-change-amount__button {
    background: transparent !important;
    border: 1px solid;
    color: var(--secondary-color)
}

.user-full-info-change-amount__button:not(:last-of-type) {
    margin-right: 10px
}

.user-full-info-change-amount__button_type_error {
    border-color: var(--error)
}

.user-full-info-change-amount__button_type_success {
    border-color: var(--success)
}

.user-full-info-change-amount__icon-button {
    color: var(--amount-input-icon-color);
    cursor: pointer;
    height: 18px;
    width: 18px
}

.user-full-info-change-amount__icon-button path {
    fill: var(--secondary)
}

.user-full-info-change-amount__icon-button_disabled {
    cursor: auto;
    opacity: .5
}

.user-full-info-change-amount__tooltip {
    -webkit-animation: blockVisible .6s;
    animation: blockVisible .6s;
    background-color: #fff;
    border-radius: 4px;
    color: #000;
    display: none;
    font-size: 12px;
    font-weight: 500;
    left: -150%;
    line-height: 1.2;
    max-width: 240px;
    padding: 3px 6px;
    position: absolute;
    top: 100%;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    width: -webkit-max-content;
    width: max-content
}

.user-full-info-change-amount__tooltip_right {
    left: inherit;
    right: -150%
}

.user-full-info-change-amount__icon-wrapper {
    display: flex;
    position: relative
}

.user-full-info-change-amount__icon-wrapper:hover>.user-full-info-change-amount__tooltip {
    display: block
}

@-webkit-keyframes blockVisible {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes blockVisible {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.user-full-info__item {
    margin-bottom: 10px
}

.user-full-info__icon {
    height: 1rem;
    width: 1rem
}

.user-full-info__icon * {
    fill: var(--secondary)
}

.tree-item {
    padding-bottom: 5px;
    position: relative;
    width: 100%
}

.tree-item_isChild+.tree-item:not(.tree-item_isChild) {
    padding-top: 15px
}

.tree-item_isChild .tree-item__line {
    display: block
}

.tree-item_isLastChild .tree-item__line_y {
    height: 50%
}

.tree-item__line {
    background: var(--secondary);
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 4
}

.tree-item__line_x {
    height: 2px;
    margin: auto 0;
    width: 100%
}

.tree-item__line_y {
    height: 100%;
    width: 2px
}

.tree-item__content {
    position: relative;
    z-index: 5
}

.tree-item__show-more-btn {
    margin: 15px auto;
    min-height: auto;
    padding: 5px 10px;
    text-transform: uppercase
}

.tree-item__close-btn {
    background: transparent !important;
    border: 1px solid var(--error);
    color: var(--primary-color)
}

.user-edit-page__loader-container {
    flex-grow: 1
}

.user-edit-page__content-container {
    padding: 15px
}

.user-edit-page__account-info {
    display: flex;
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 16px;
    margin-bottom: 15px
}

.user-edit-page__account-info-item:not(:last-of-type) {
    margin-right: 10px
}

.user-edit-page__account-info-item:last-of-type {
    text-align: end
}

.user-edit-page__tabs {
    align-items: center;
    border: var(--primary-border);
    border-radius: var(--primary-border-radius);
    display: flex;
    margin-bottom: 15px;
    overflow: hidden;
    transition: border var(--theme-transition-duration) var(--switch-transition-timing-function), border-radius var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.user-edit-page__tab {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    line-height: 16px;
    padding: 5px;
    width: 33.3%
}

.user-edit-page__tab:not(:last-of-type) {
    border-right: var(--primary-border)
}

.user-edit-page__tab_active {
    background-color: var(--secondary);
    color: var(--secondary-color)
}

.users-tree-filter__input {
    margin-bottom: 15px
}

.user-tree-page__loader-container {
    flex-grow: 1
}

.user-tree-page__filter {
    padding: 15px
}

.user-tree-page__tree {
    padding-left: 15px;
    padding-right: 15px
}

.user-tree-page__pagination {
    display: flex;
    justify-content: flex-end;
    padding: 10px
}

.sub-header {
    --sub-header-background-color: var(--secondary);
    --sub-header-color: var(--secondary-color);
    --sub-header-icon-color: var(--secondary-icon-color);
    align-items: center;
    background-color: var(--sub-header-background-color);
    display: flex;
    padding: 7px 15px;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

.sub-header__title-container {
    align-items: center;
    display: flex;
    margin-right: 10px
}

.sub-header__title {
    color: var(--sub-header-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    margin-right: 10px;
    text-transform: uppercase;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

@media screen and (max-width:400px) {
    .sub-header__title {
        word-break: break-all
    }
}

.sub-header__icons {
    align-items: center;
    display: flex;
    margin-left: auto
}

.sub-header__icon {
    color: var(--sub-header-icon-color);
    cursor: pointer;
    height: 24px;
    transition: color var(--theme-transition-duration) var(--switch-transition-timing-function);
    width: 24px
}

.sub-header__icon:not(:last-of-type) {
    margin-right: 10px
}

.sub-header__whatsapp {
    cursor: pointer;
    height: 24px;
    width: 24px
}

.search-block {
    align-items: center;
    display: flex
}

.search-block__input {
    margin-right: 10px
}

.date-filter-block__date-picker {
    margin-bottom: 10px
}

.info-block {
    --info-block-background: var(--primary);
    --info-block-color: var(--primary-color);
    --info-block-border-color: var(--secondary);
    background: var(--info-block-background);
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
    display: block;
    padding: 5px;
    width: 100%
}

.info-block__top {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px
}

.info-block__top-left {
    color: var(--info-block-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px
}

.info-block__top-left-banned {
    color: var(--error)
}

.info-block__info-btn {
    background: transparent !important;
    border: 1px solid var(--info-block-border-color);
    color: var(--info-block-color);
    font-family: Source Sans Pro, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    margin-left: 10px;
    min-height: auto;
    padding: 1px 0;
    text-transform: uppercase
}

.info-block__row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%
}

.info-block__col {
    font-family: Source Sans Pro, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px
}

.info-block__col-name {
    color: var(--info-block-color);
    text-transform: uppercase
}

.info-block__col-value {
    color: var(--info-block-color);
    margin-left: 5px
}

.password-validation-block {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    font-family: Source Sans Pro, sans-serif;
    gap: 10px;
    justify-content: flex-start;
    margin-bottom: 15px
}

.password-validation-block__block {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: flex-start
}

.password-validation-block__block-icon {
    height: 24px;
    width: 24px
}

.session-container {
    height: 100%
}

:root {
    --brand: #ffea1f;
    --brand-hover: #e5d21b;
    --brand-color: #000;
    --brand-icon-color: #000;
    --primary: #181c23;
    --primary-color: #fff;
    --primary-active: #23272f;
    --primary-icon-color: #fff;
    --primary-border: 1px solid #fff;
    --primary-border-radius: 5px;
    --secondary: #08af72;
    --secondary-color: #fff;
    --secondary-icon-color: #fff;
    --tertiary: #181c23;
    --tertiary-color: #fff;
    --tertiary-border: #8b8c9b;
    --quaternary: #46465c;
    --quaternary-color: #fff;
    --quaternary-border: #66e738;
    --quaternary-label-color: #8b8c9b;
    --success: #08af72;
    --success-color: #fff;
    --error: #ec1a1a;
    --error-color: #fff;
    --warning: #e5d21b;
    --loader-color: #08af72;
    --loader-background-color: rgba(0, 0, 0, .5);
    --input-background-color: #181c23;
    --input-color: #fff;
    --input-label-color: #fff;
    --input-icon-color: #fff;
    --input-border: 1px solid #fff;
    --input-placeholder-color: #838589;
    --input-border-radius: 5px;
    --input-description-color: #aaadb2;
    --input-description-error-color: #ec1a1a;
    --input-selected-background-color: #23272f;
    --switch-true-background-color: #08af72;
    --switch-false-background-color: #2c8ed2;
    --switch-icon-color: #fff;
    --switch-transition-duration: 0.2s;
    --switch-transition-timing-function: ease;
    --theme-switch-icon-color: #fff;
    --theme-transition-duration: 0.5s
}

.theme-light {
    --brand: #ffea1f;
    --brand-hover: #e5d21b;
    --brand-color: #000;
    --brand-icon-color: #000;
    --primary: #fafafa;
    --primary-color: #000;
    --primary-active: #dce7ed;
    --primary-icon-color: #b2b2b2;
    --primary-border: 1px solid #d9d9d9;
    --primary-border-radius: 5px;
    --secondary: #08af72;
    --secondary-color: #fff;
    --secondary-icon-color: #fff;
    --tertiary: #176548;
    --tertiary-color: #fff;
    --tertiary-border: #8b8c9b;
    --quaternary: #176548;
    --quaternary-color: #fff;
    --quaternary-label-color: #8b8c9b;
    --success: #08af72;
    --success-color: #fff;
    --error: #ec1a1a;
    --error-color: #fff;
    --warning: #e5d21b;
    --loader-color: #08af72;
    --loader-background-color: rgba(0, 0, 0, .5);
    --input-background-color: #fff;
    --input-color: #000;
    --input-label-color: #000;
    --input-icon-color: #b2b2b2;
    --input-border: 1px solid #d9d9d9;
    --input-placeholder-color: #9c9c9c;
    --input-border-radius: 5px;
    --input-description-color: #282828;
    --input-description-error-color: #ec1a1a;
    --input-selected-background-color: #dce7ed;
    --switch-true-background-color: #08af72;
    --switch-false-background-color: #2c8ed2;
    --switch-icon-color: #fff;
    --switch-transition-duration: 0.2s;
    --switch-transition-timing-function: ease;
    --theme-switch-icon-color: #000;
    --theme-transition-duration: 0.5s
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    -webkit-font-feature-settings: inherit;
    font-feature-settings: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: 0;
    box-sizing: border-box;
    font-stretch: inherit;
    font-style: inherit;
    font-variant: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    vertical-align: initial
}

input {
    box-sizing: border-box
}

table,
tbody,
td,
tfoot,
th,
thead,
tr {
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
    border: none;
    border-collapse: inherit;
    border-color: inherit;
    border-spacing: 0;
    font-weight: inherit;
    height: auto;
    margin: 0;
    padding: 0;
    text-align: left;
    vertical-align: inherit;
    width: auto
}

div::-webkit-scrollbar,
header::-webkit-scrollbar,
li::-webkit-scrollbar {
    -ms-overflow-style: none;
    display: none;
    scrollbar-width: none
}

a,
a:active,
a:focus,
a:hover {
    text-decoration: none
}

body,
html {
    height: 100%;
    width: 100%
}

body {
    background-color: #181c23;
    background-color: var(--primary);
    color: #fff;
    color: var(--primary-color);
    overflow-y: auto;
    transition: background-color .5s ease, color .5s ease;
    transition: background-color var(--theme-transition-duration) var(--switch-transition-timing-function), color var(--theme-transition-duration) var(--switch-transition-timing-function)
}

#root {
    height: 100%;
    width: 100%
}