/*
    File for developers css
    These css later shoule be moved to scss by designers
 */

/* simple user profile icon in top menu (without actions) */

.sub-menu__item.active .sub-menu__link {
    background-color: #3b82f6;
    color: #fff;
}

/* Telegram button on login */
.telegram-auth-btn {
    align-self: center;
}

/* banners page */
.table_banner_wrap {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.table_banner img {
    max-height: 111px;
}

/* Match and Feeds pages */
.minutes-dot {
    animation: ballanimation;
    animation-duration: 0.7s;
    animation-iteration-count: infinite;
}

.latest-match-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    height: 100%;
    color: #001f3f;
}

.latest-match-feed-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    height: 100%;
}

/* Match page - h2h one to one */
.color_blue_win1,
.color_blue_win2 {
    background-color: #a7e3ff;
}

/* my-bots page */

/* динамически формируется */
.icon-text_subscribe-inactive {
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 12px;
    background-color: red;
    width: fit-content;
    color: #fff;
}
.scanner_inactive {
    opacity: 0.3;
}

.scanner_active {
    opacity: 1;
}

.icon-transparent {
    background-color: transparent !important;
}

/* create my-leagues popup */
dialog.create-leagues_popup .pop-up__wrapper {
    max-width: 1200px !important;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}

/* retroanalyses and stats pages */
.icon_check-circle_success {
    background-color: #29c163 !important;
}
.icon_check-circle_error {
    background-color: #db3838 !important;
}
.icon_check-circle_in_progress {
    background-color: #a86d16 !important;
}
.icon_check-circle_unknown {
    background-color: #928d87 !important;
}

.icon_check-circle_neutral {
    background-color: #ecb11b !important;
}

/* balance popup */
.payment-method-details {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-system-label {
    font-size: 12px;
    color: #6c757d;
}

.payment-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.payment-select {
    appearance: none;
    padding: 8px 24px 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    color: #252e35;
    cursor: pointer;
}

.payment-select-arrow {
    position: absolute;
    right: 8px;
    pointer-events: none;
    color: #6c757d;
}

/* noty.js in modals */
dialog .noty_bar {
    position: fixed !important;
    top: 10px;
    z-index: 10000;
}

.app-menu-avatar {
    display: inline;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
}

.btn-noty-confirm {
    padding: 4px 20px !important;
    margin-right: 8px !important;
    background: #ffffff !important;
    color: #4b2c06 !important;
}

/* html in tippy */
.tippy-box ul {
    list-style-type: disc !important;
    padding-left: 16px !important;
    margin: 0 !important;
}

.tippy-box li {
    margin-bottom: 4px !important;
}

/* faq */
.p-faq {
    margin-top: 20px;
    margin-bottom: 20px;
    text-indent: 30px;
}

/* Live page - filters popup */
/* Create filter page */
.option-item:has(input:disabled),
.checkbox_large:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* different pages */
.btn[disabled] {
    background-color: #cee0ff;
    color: #7a99ce;
    cursor: not-allowed;
}

/* number input without spins */
/* Chrome, Safari, Edge */
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input.no-spin {
    -moz-appearance: textfield;
}

/* Scanner form */
.option-item__text {
    margin-right: 4px;
}

/* disable minutes in time picker of Scanner form */
.hour-picker-from
    .dp__menu
    .dp__time_input
    .dp__time_col:nth-child(3)
    .dp__inc_dec_button,
.hour-picker-from .dp__menu .dp__time_input .dp__time_col:nth-child(3),
.hour-picker-to
    .dp__menu
    .dp__time_input
    .dp__time_col:nth-child(3)
    .dp__inc_dec_button,
.hour-picker-to .dp__menu .dp__time_input .dp__time_col:nth-child(3) {
    pointer-events: none;
    opacity: 0.5;
}

.hour-picker-from .dp__menu,
.hour-picker-to .dp__menu {
    min-width: 150px; /* Уменьшаем ширину окна выбора времени */
    font-size: 14px; /* Уменьшаем размер шрифта */
    padding: 8px; /* Уменьшаем внутренние отступы */
}
.hour-picker-from .dp__menu .dp__time_input,
.hour-picker-to .dp__menu .dp__time_input {
    padding: 4px; /* Уменьшаем отступы внутри области времени */
}
.hour-picker-from .dp__menu .dp__time_input .dp__time_col,
.hour-picker-to .dp__menu .dp__time_input .dp__time_col {
    width: 40px; /* Уменьшаем ширину колонок времени */
}
.hour-picker-from .dp__menu .dp__time_input .dp__time_col .dp__time_display,
.hour-picker-to .dp__menu .dp__time_input .dp__time_col .dp__time_display {
    padding: 2px; /* Уменьшаем отступы для отображения времени */
}
.hour-picker-from .dp__menu .dp__time_input .dp__inc_dec_button,
.hour-picker-to .dp__menu .dp__time_input .dp__inc_dec_button {
    width: 20px; /* Уменьшаем размер кнопок */
    height: 20px; /* Уменьшаем высоту кнопок */
}
.hour-picker-from .dp__menu .dp__time_input .dp__inc_dec_button svg,
.hour-picker-to .dp__menu .dp__time_input .dp__inc_dec_button svg {
    width: 16px; /* Уменьшаем размер иконок стрелок */
    height: 16px;
}

/* Active el in navigation in edit filter menu */
.study__nav-link.active {
    background-color: #3b82f6;
    color: #fff;
}

.telegram-auth-btn-custom {
    display: flex;
}

.dp__main .btn_live {
    padding: 5px 8px;
    min-height: 36px;
    column-gap: 4px;
}

/* notices */
.sub-menu__notification-dot {
    position: absolute;
    top: 6px; /* выше */
    right: 4px;
    width: 6px; /* меньше */
    height: 6px; /* меньше */
    background-color: #ff3b30;
    border-radius: 50%;
}

.icon-notification-dot {
    position: absolute;
    top: 10px;
    right: -2px;
    width: 4px;
    height: 4px;
    background-color: #ff3b30;
    border-radius: 50%;
    pointer-events: none;
}

#vue-balance-button-header {
    min-width: 146px;
}