/* =========================================================
   ОБЩИЕ ПРАВИЛА
   ========================================================= */

[hidden] {
    display: none !important;
}

/*
 * Регион с панелью находится на Global Page 0.
 * Сам контейнер региона не должен занимать место на странице.
 */
#accessibility-panel-region {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#accessibility-panel-region .t-Region-body,
#accessibility-panel-region .t-Region-bodyWrap {
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Никогда не блокируем основную прокрутку из-за режима увеличения.
 */
html,
body {
    min-height: 100%;
}

html.a11y-font-large,
html.a11y-font-xlarge,
html.a11y-font-large body,
html.a11y-font-xlarge body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* =========================================================
   ЗАТЕМНЕНИЕ
   ========================================================= */

.a11y-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;

    background: rgba(0, 0, 0, 0.62);

    pointer-events: auto;
}

/* =========================================================
   ПАНЕЛЬ НАСТРОЕК
   ========================================================= */

.a11y-panel {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 20001;

    width: min(500px, calc(100% - 48px));
    max-height: calc(100dvh - 48px);

    padding: 24px;
    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    background: #ffffff;
    color: #111111;

    border: 3px solid #111111;
    border-radius: 12px;

    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.38);

    pointer-events: auto;
}

.a11y-panel,
.a11y-panel * {
    box-sizing: border-box;
}

.a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 22px;
}

.a11y-panel__header h2 {
    margin: 0;

    color: #111111;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.a11y-close {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 2px solid #111111;
    border-radius: 7px;

    background: #ffffff;
    color: #111111;

    font-size: 30px;
    font-weight: 600;
    line-height: 38px;

    cursor: pointer;
}

.a11y-close:hover {
    background: #eeeeee;
}

.a11y-option {
    margin-top: 24px;
}

.a11y-label {
    display: block;

    margin-bottom: 10px;

    color: #111111;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.a11y-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.a11y-control-button {
    min-width: 76px;
    min-height: 48px;

    padding: 9px 15px;

    border: 2px solid #111111;
    border-radius: 7px;

    background: #ffffff;
    color: #111111;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;

    cursor: pointer;
}

.a11y-control-button:hover {
    background: #eeeeee;
}

.a11y-control-button.is-active {
    background: #111111;
    color: #ffffff;
}

.a11y-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    color: #111111;

    font-size: 17px;
    line-height: 1.45;

    cursor: pointer;
}

.a11y-checkbox-label input[type="checkbox"] {
    flex: 0 0 auto;

    width: 23px;
    height: 23px;

    margin: 1px 0 0;

    cursor: pointer;
}

.a11y-panel__footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 30px;
    padding-top: 18px;

    border-top: 1px solid #d0d5dd;
}

.a11y-panel__footer .t-Button {
    min-height: 46px;
    padding: 9px 18px;

    font-size: 16px;
}

.a11y-panel button:focus-visible,
.a11y-panel input:focus-visible {
    outline: 4px solid #ff6b00 !important;
    outline-offset: 3px !important;
}

/* =========================================================
   УВЕЛИЧЕНИЕ ТЕКСТА
   Не изменяем font-size у html, потому что это может нарушить
   вычисление высоты контейнеров Universal Theme.
   ========================================================= */

html.a11y-font-large body {
    font-size: 18px !important;
}

html.a11y-font-xlarge body {
    font-size: 21px !important;
}

html.a11y-font-large .t-Body,
html.a11y-font-large .t-Body-content,
html.a11y-font-large .t-Region,
html.a11y-font-large .t-Region-body,
html.a11y-font-large .t-Form-label,
html.a11y-font-large .t-Form-inputContainer,
html.a11y-font-large .t-Report-cell,
html.a11y-font-large .a-IRR-table,
html.a11y-font-large .a-GV-table,
html.a11y-font-large .a-IG {
    font-size: 18px !important;
}

html.a11y-font-xlarge .t-Body,
html.a11y-font-xlarge .t-Body-content,
html.a11y-font-xlarge .t-Region,
html.a11y-font-xlarge .t-Region-body,
html.a11y-font-xlarge .t-Form-label,
html.a11y-font-xlarge .t-Form-inputContainer,
html.a11y-font-xlarge .t-Report-cell,
html.a11y-font-xlarge .a-IRR-table,
html.a11y-font-xlarge .a-GV-table,
html.a11y-font-xlarge .a-IG {
    font-size: 21px !important;
}

html.a11y-font-large input,
html.a11y-font-large select,
html.a11y-font-large textarea,
html.a11y-font-large .t-Button {
    font-size: 18px !important;
}

html.a11y-font-xlarge input,
html.a11y-font-xlarge select,
html.a11y-font-xlarge textarea,
html.a11y-font-xlarge .t-Button {
    font-size: 21px !important;
}

html.a11y-font-large h1,
html.a11y-font-xlarge h1 {
    line-height: 1.25;
}

html.a11y-font-large h2,
html.a11y-font-large h3,
html.a11y-font-xlarge h2,
html.a11y-font-xlarge h3 {
    line-height: 1.3;
}

/*
 * Не задаём overflow: visible для .t-Body-main,
 * .t-Body-content и таблиц, чтобы не ломать APEX-компоненты.
 */

/* =========================================================
   КРУПНЫЕ КНОПКИ И ПОЛЯ
   ========================================================= */

html.a11y-large-controls .t-Button,
html.a11y-large-controls button:not(.a11y-close),
html.a11y-large-controls input:not([type="checkbox"]):not([type="radio"]),
html.a11y-large-controls select,
html.a11y-large-controls textarea {
    min-height: 50px;
    font-size: 1em;
}

html.a11y-large-controls .t-Button {
    padding: 10px 18px;
}

html.a11y-large-controls input[type="checkbox"],
html.a11y-large-controls input[type="radio"] {
    width: 25px;
    height: 25px;
}

/* =========================================================
   УВЕЛИЧЕННЫЕ ИНТЕРВАЛЫ
   ========================================================= */

html.a11y-spacing body {
    line-height: 1.75;
    letter-spacing: 0.035em;
    word-spacing: 0.09em;
}

html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing label,
html.a11y-spacing .t-Form-label,
html.a11y-spacing .t-Report-cell,
html.a11y-spacing .a-IRR-table td,
html.a11y-spacing .a-IRR-table th {
    line-height: 1.75;
}

html.a11y-spacing p,
html.a11y-spacing li {
    margin-bottom: 0.75em;
}

/* =========================================================
   ПОДЧЁРКИВАНИЕ ССЫЛОК
   ========================================================= */

html.a11y-underline-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/* =========================================================
   ЧЁРНО-БЕЛАЯ СХЕМА
   ========================================================= */

html.a11y-contrast-black-white body,
html.a11y-contrast-black-white .t-Body,
html.a11y-contrast-black-white .t-Body-main,
html.a11y-contrast-black-white .t-Body-content,
html.a11y-contrast-black-white .t-Region,
html.a11y-contrast-black-white .t-Region-body,
html.a11y-contrast-black-white .t-Header,
html.a11y-contrast-black-white .t-Footer,
html.a11y-contrast-black-white .t-BreadcrumbRegion,
html.a11y-contrast-black-white .t-DialogRegion,
html.a11y-contrast-black-white .t-Login-container,
html.a11y-contrast-black-white .a-IRR-container,
html.a11y-contrast-black-white .a-IRR-content,
html.a11y-contrast-black-white .a-IG,
html.a11y-contrast-black-white .a-GV,
html.a11y-contrast-black-white table,
html.a11y-contrast-black-white th,
html.a11y-contrast-black-white td {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html.a11y-contrast-black-white .t-Region-title,
html.a11y-contrast-black-white .t-Body-title,
html.a11y-contrast-black-white h1,
html.a11y-contrast-black-white h2,
html.a11y-contrast-black-white h3,
html.a11y-contrast-black-white h4,
html.a11y-contrast-black-white p,
html.a11y-contrast-black-white span,
html.a11y-contrast-black-white label {
    color: #000000 !important;
}

html.a11y-contrast-black-white a {
    color: #0000ee !important;
}

html.a11y-contrast-black-white input,
html.a11y-contrast-black-white select,
html.a11y-contrast-black-white textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

html.a11y-contrast-black-white input::placeholder,
html.a11y-contrast-black-white textarea::placeholder {
    color: #333333 !important;
    opacity: 1;
}

html.a11y-contrast-black-white .t-Button,
html.a11y-contrast-black-white button:not(.a11y-control-button):not(.a11y-close) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
}

html.a11y-contrast-black-white .a-IRR-header,
html.a11y-contrast-black-white .a-GV-header {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* =========================================================
   ЖЁЛТЫЙ НА ЧЁРНОМ
   ========================================================= */

html.a11y-contrast-yellow-black body,
html.a11y-contrast-yellow-black .t-Body,
html.a11y-contrast-yellow-black .t-Body-main,
html.a11y-contrast-yellow-black .t-Body-content,
html.a11y-contrast-yellow-black .t-Region,
html.a11y-contrast-yellow-black .t-Region-body,
html.a11y-contrast-yellow-black .t-Header,
html.a11y-contrast-yellow-black .t-Footer,
html.a11y-contrast-yellow-black .t-BreadcrumbRegion,
html.a11y-contrast-yellow-black .t-DialogRegion,
html.a11y-contrast-yellow-black .t-Login-container,
html.a11y-contrast-yellow-black .a-IRR-container,
html.a11y-contrast-yellow-black .a-IRR-content,
html.a11y-contrast-yellow-black .a-IG,
html.a11y-contrast-yellow-black .a-GV,
html.a11y-contrast-yellow-black table,
html.a11y-contrast-yellow-black th,
html.a11y-contrast-yellow-black td {
    background-color: #000000 !important;
    color: #ffff00 !important;
}

html.a11y-contrast-yellow-black .t-Region-title,
html.a11y-contrast-yellow-black .t-Body-title,
html.a11y-contrast-yellow-black h1,
html.a11y-contrast-yellow-black h2,
html.a11y-contrast-yellow-black h3,
html.a11y-contrast-yellow-black h4,
html.a11y-contrast-yellow-black p,
html.a11y-contrast-yellow-black span,
html.a11y-contrast-yellow-black label {
    color: #ffff00 !important;
}

html.a11y-contrast-yellow-black a {
    color: #00ffff !important;
}

html.a11y-contrast-yellow-black input,
html.a11y-contrast-yellow-black select,
html.a11y-contrast-yellow-black textarea {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

html.a11y-contrast-yellow-black input::placeholder,
html.a11y-contrast-yellow-black textarea::placeholder {
    color: #ffff99 !important;
    opacity: 1;
}

html.a11y-contrast-yellow-black .t-Button,
html.a11y-contrast-yellow-black button:not(.a11y-control-button):not(.a11y-close) {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border: 2px solid #ffff00 !important;
}

html.a11y-contrast-yellow-black .a-IRR-header,
html.a11y-contrast-yellow-black .a-GV-header {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

/*
 * Панель настроек остаётся светлой независимо от выбранной схемы.
 */
html.a11y-contrast-black-white .a11y-panel,
html.a11y-contrast-yellow-black .a11y-panel {
    background: #ffffff !important;
    color: #111111 !important;
}

html.a11y-contrast-black-white .a11y-panel *,
html.a11y-contrast-yellow-black .a11y-panel * {
    color: #111111;
}

html.a11y-contrast-black-white .a11y-control-button,
html.a11y-contrast-yellow-black .a11y-control-button,
html.a11y-contrast-black-white .a11y-close,
html.a11y-contrast-yellow-black .a11y-close {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
}

html.a11y-contrast-black-white .a11y-control-button.is-active,
html.a11y-contrast-yellow-black .a11y-control-button.is-active {
    background: #111111 !important;
    color: #ffffff !important;
}

/* =========================================================
   ВИДИМЫЙ ФОКУС
   ========================================================= */

html[class*="a11y-"] a:focus-visible,
html[class*="a11y-"] button:focus-visible,
html[class*="a11y-"] input:focus-visible,
html[class*="a11y-"] select:focus-visible,
html[class*="a11y-"] textarea:focus-visible,
html[class*="a11y-"] [tabindex]:focus-visible {
    outline: 4px solid #ff6b00 !important;
    outline-offset: 3px !important;
}

html.a11y-contrast-yellow-black a:focus-visible,
html.a11y-contrast-yellow-black button:focus-visible,
html.a11y-contrast-yellow-black input:focus-visible,
html.a11y-contrast-yellow-black select:focus-visible,
html.a11y-contrast-yellow-black textarea:focus-visible {
    outline-color: #ffffff !important;
}

/* =========================================================
   ДЕКОРАТИВНЫЕ ИЗОБРАЖЕНИЯ
   ========================================================= */

html.a11y-hide-images .a11y-decorative {
    display: none !important;
}

/* =========================================================
   ТЕЛЕФОН
   ========================================================= */

@media (max-width: 600px) {
    .a11y-panel {
        top: 8px;
        right: 8px;
        left: 8px;

        width: auto;
        max-height: calc(100dvh - 16px);

        padding: 20px 16px;

        border-radius: 9px;
    }

    .a11y-panel__header h2 {
        font-size: 21px;
    }

    .a11y-buttons {
        flex-direction: column;
    }

    .a11y-control-button {
        width: 100%;
    }

    .a11y-panel__footer {
        flex-direction: column-reverse;
    }

    .a11y-panel__footer .t-Button {
        width: 100%;
    }
}