#abit-calc,
#abit-calc-spo {
    /* font */

    --calc-font-size-lg: 1.14286rem; /* = font-size-in-rem($font_size_lg) */

    /* grid */

    --calc-grid-space-xl: 48px; /* = $grid_space_xl */
    --calc-grid-space-lg: 36px; /* = $grid_space_lg */
    --calc-grid-space-md: 24px; /* = $grid_space_md */
    --calc-grid-space-sm: 18px; /* = $grid_space_sm */
    --calc-grid-space-xs: 12px; /* = $grid_space_xs */
    --calc-grid-space-2xs: 6px; /* = $grid_space_2xs */
    --calc-grid-space-ex-xs: 8px; /* = $grid_space_ex_xs */

    /* input */

    --calc-input-height-base: 44px; /* = $input_height_base */
    --calc-input-space-base: var(--calc-grid-space-sm); /* = $input_space_base */
    --calc-btn-height-base: var(--calc-input-height-base); /* = $btn_height_base */
    --calc-group-gap: 8px; /* = $group_gap */

    /* border */

    --calc-border-radius-xs: 4px; /* = $border_radius_xs */

    /* outline */

    --calc-outline-width: 4px; /* = $outline_width */

    /* color */

    --calc-color-red: #ff1552;
    --calc-color-orange: #ff8e00;
    --calc-color-green: #97bd00;
    --calc-color-green-dark: #7e9500;
    --calc-color-blue: #008ad5;
}

#abit-calc,
#abit-calc-spo {
    display: block;
    margin: var(--calc-grid-space-lg) 0;
    text-align: left;
    line-height: 1.5rem;
}

#abit-calc > div,
#abit-calc-spo > div {
    display: block;
}

#abit-calc ul,
#abit-calc-spo ul {
    display: block;
    margin: 0;
    padding: 0;
}

#abit-calc ul li,
#abit-calc-spo ul li {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    break-inside: avoid;
}

#abit-calc ul li::before,
#abit-calc-spo ul li::before {
    display: none;
}

#abit-calc ul li + li {
    margin-top: var(--calc-grid-space-sm);
}
#abit-calc ul { /* Список испытаний. */
    columns: 2; /* columns box */
    column-gap: calc(2 * var(--gr-grid-h-gap)); /* columns box */
    border: 1px solid var(--gr-border-color);
    border-radius: var(--gr-card-border-radius);
    padding: var(--gr-card-padding);
}

#abit-calc li label {
    display: grid; /* grid box */
    grid-template-columns: auto auto 1fr; /* grid box */
    grid-template-rows: auto 1fr; /* grid box */
    grid-gap: calc(var(--calc-grid-space-xs) / 3) var(--calc-grid-space-xs); /* grid box */
    cursor: pointer;
}

#abit-calc li label::before {
    grid-row: 1 / 2; /* grid cell */
    grid-column: 1 / 2; /* grid cell */
    border-radius: 3px;
    width: 6px;
    height: 16px;
    background-color: var(--calc-color-red);
    content: "";
}

#abit-calc li[data-group="3"] label::before {
    background-color: var(--calc-color-orange);
}

#abit-calc li[data-group="2"] label::before {
    background-color: var(--calc-color-green);
}

#abit-calc li[data-group="1"] label::before {
    background-color: var(--calc-color-blue);
}

#abit-calc input[type="checkbox"] {
    appearance: none;
    display: inline-block;
    position: relative;
    outline: 0 solid transparent;
    border: 1px solid var(--gr-input-border-color);
    border-radius: var(--calc-border-radius-xs);
    width: 16px;
    height: 16px;
    background: var(--gr-input-bg-color);
    cursor: pointer;
}

#abit-calc input[type="checkbox"]::before {
    --inner-space: 2px;
    --icon-url: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiIHk9IjAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Ik01MDQuNTAyIDc1LjQ5NmMtOS45OTctOS45OTgtMjYuMjA1LTkuOTk4LTM2LjIwNCAwTDE2MS41OTQgMzgyLjIwMyA0My43MDIgMjY0LjMxMWMtOS45OTctOS45OTgtMjYuMjA1LTkuOTk3LTM2LjIwNCAwLTkuOTk4IDkuOTk3LTkuOTk4IDI2LjIwNSAwIDM2LjIwM2wxMzUuOTk0IDEzNS45OTJjOS45OTQgOS45OTcgMjYuMjE0IDkuOTkgMzYuMjA0IDBMNTA0LjUwMiAxMTEuN2M5Ljk5OC05Ljk5NyA5Ljk5Ny0yNi4yMDYgMC0zNi4yMDR6IiBmaWxsPSIjMDAwIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIi8+PC9zdmc+");
    display: block;
    position: absolute;
    inset: var(--inner-space);
    background: var(--gr-icon-line-color);
    mask: 50% 50% no-repeat;
    mask-size: contain;
    -webkit-mask-image: var(--icon-url);
    mask-image: var(--icon-url);
    opacity: 0;
    content: "";
    transition: opacity .25s;
    pointer-events: none;
}

#abit-calc input[type="checkbox"][disabled] {
    opacity: .5;
    cursor: default;
}

#abit-calc input[type="checkbox"]:not([disabled]):hover,
#abit-calc input[type="checkbox"]:not([disabled]):focus {
    border-color: var(--gr-input-border-color--hover);
}

#abit-calc input[type="checkbox"]:not([disabled]):focus {
    outline: var(--calc-outline-width) solid var(--gr-outline-color);
}

#abit-calc input[type="checkbox"]:not([disabled]):checked::before {
    opacity: 1;
}

#abit-calc label input {
    grid-row: 1 / 2; /* grid cell */
    grid-column: 2 / 3; /* grid cell */
}

#abit-calc label input + span { /* Название предмета. */
    grid-row: 1 / 2; /* grid cell */
    grid-column: 3 / -1; /* grid cell */
    overflow: hidden;
    font-weight: 600;
    transition: color .25s;
}

#abit-calc label:hover input + span  { /* Название предмета. */
    color: var(--gr-color-primary-base);
}

#abit-calc label span:last-child { /* Кол-во баллов. */
    grid-row: 2 / -1; /* grid cell */
    grid-column: 3 / -1; /* grid cell */
    font-size: .85rem;
    color: var(--gr-color-gray-base);
}

#abit-calc input[type="button"],
#abit-calc-spo input[type="button"] {
    --border-color: var(--gr-button-border-color);
    --border-color--hover: var(--gr-button-border-color--hover);
    --text-color: var(--gr-button-text-color);
    --text-color--hover: var(--gr-button-text-color--hover);
    display: inline-block;
    vertical-align: middle;
    outline: 0 solid transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--gr-button-border-radius);
    padding: 0 var(--calc-grid-space-md);
    min-height: var(--calc-btn-height-base);
    background: transparent;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--calc-font-size-lg);
    color: var(--text-color);
    cursor: pointer;
}

#abit-calc input[type="button"]:not(:disabled):hover,
#abit-calc input[type="button"]:not(:disabled):focus,
#abit-calc-spo input[type="button"]:not(:disabled):hover,
#abit-calc-spo input[type="button"]:not(:disabled):focus {
    border-color: var(--border-color--hover);
    background-color: var(--border-color--hover);
    color: var(--text-color--hover);
}

#abit-calc input[type="button"]:not([disabled]):focus,
#abit-calc-spo input[type="button"]:not([disabled]):focus {
    outline: var(--calc-outline-width) solid var(--gr-outline-color);
}

#abit-calc input[type="button"]:disabled,
#abit-calc-spo input[type="button"]:disabled {
    opacity: 0.5;
    cursor: default;
}

#abit-calc ul + div { /* Группа кнопок. */
    display: flex; /* flex box */
    flex-flow: row wrap; /* flex box */
    gap: var(--calc-group-gap); /* flex box */
    margin-top: var(--calc-grid-space-md);
}

#abit-calc > div > ul + div + div, /* Направления для выбранных испытаний. */
#abit-calc-spo > div > form + input, /* Кнопка "сбросить". */
#abit-calc-spo > div > form + input + div { /* Направления для выбранной специальности. */
    margin-top: var(--calc-grid-space-md);
}

#abit-calc ul + div + div > div:first-child span, /* Бейджи с кол-вом направлений для выбранных испытаний. */
#abit-calc-spo div > div:first-child span { /* Бейджи с кол-вом направлений для выбранной специальности. */
    display: inline-block;
    border-radius: 14px;
    background-color: rgba(var(--gr-color-gray-base-rgb), .25);
    padding: 0 6px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    font-weight: bold;
    text-align: center;
}

#abit-calc ol, /* Список направлений для выбранных испытаний. */
#abit-calc-spo ol { /* Список направлений для выбранной специальности. */
    display: block;
    margin: 0;
    margin-top: var(--calc-grid-space-md);
    padding: 0;
    border: 1px solid var(--gr-border-color);
    border-radius: var(--gr-card-border-radius);
    padding: var(--gr-card-padding);
}

#abit-calc ol li,
#abit-calc-spo ol li {
    --index-width: 28px;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: calc(var(--index-width) + var(--gr-card-padding));
    font-weight: bold;
    color: var(--gr-color-accent);
}

#abit-calc ol li + li,
#abit-calc-spo ol li + li {
    margin-top: var(--calc-grid-space-sm);
}

#abit-calc ol li::before,
#abit-calc-spo ol li::before {
    left: 0;
    border-color: var(--gr-color-accent);
    color: var(--gr-color-accent);
}

#abit-calc ol dl,
#abit-calc-spo ol dl {
    --dt-left-space: 84px;
    --dd-left-space: 120px;
    display: block;
    margin: 0;
    padding: 0;
    font-weight: normal;
    color: var(--gr-text-color);
}

#abit-calc ol dt,
#abit-calc ol dd,
#abit-calc-spo ol dt,
#abit-calc-spo ol dd {
    display: block;
    margin: 0;
    padding: 0;
}

#abit-calc ol dt:first-child, /* Название направления. */
#abit-calc ol dd + dt, /* Название направления. */
#abit-calc-spo ol dt:nth-child(2n - 1) > a { /* Название направления. */
    display: flex; /* flex box */
    flex-flow: row nowrap; /* flex box */
    gap: var(--calc-grid-space-xs); /* flex box */
    margin-top: var(--calc-grid-space-xs);
    font-weight: bold;
}

#abit-calc ol dt:first-child span, /* Код направления. */
#abit-calc ol dd + dt span, /* Код направления. */
#abit-calc-spo ol dt:nth-child(2n - 1) > a span { /* Код направления. */
    flex: none; /* flex cell */
    width: var(--dt-left-space);
    overflow: hidden;
    color: var(--gr-color-primary-base);
    text-overflow: ellipsis;
}

#abit-calc ol dt + dt, /* Название профиля. */
#abit-calc-spo ol dt:nth-child(2n) { /* Название профиля. */
    padding-left: calc(var(--dt-left-space) + var(--calc-grid-space-xs));
}

#abit-calc ol dd { /* Испытание. */
    padding-left: var(--dd-left-space);
    font-size: .85rem;
    color: var(--gr-color-gray-base);
}

#abit-calc ol dt + dd { /* Испытание. Первая строка. */
    margin-top: var(--calc-grid-space-2xs);
}

#abit-calc ol dt + dd::before { /* Метка перед первым испытанием. */
    display: block;
    margin-left: calc(-1 * (var(--dd-left-space) - var(--dt-left-space) - var(--calc-grid-space-xs)));
    content: "Вступительные испытания:";
}

#abit-calc ol dd span, /* Название вступительного испытания. */
#abit-calc ol dd strong { /* Кол-во баллов. */
    font-weight: 600;
}

#abit-calc ol dd strong::before {
    content: "(от ";
    font-weight: normal;
}

#abit-calc ol dd strong::after {
    content: " баллов)";
    font-weight: normal;
}

#abit-calc-spo ol dt:nth-child(2n - 1) > a strong { /* Название направления. */
    color: var(--gr-text-color);
    transition: color .25s;
}

#abit-calc-spo ol dt:nth-child(2n - 1) > a:hover strong { /* Название направления. */
    color: var(--gr-color-primary-base);
}

#abit-calc-spo ol dt:nth-child(2n) { /* Название профиля. */
}

#abit-calc-spo form {
    display: block;
    position: relative; /* Для позиционирования всплывающего списка. */
}

#abit-calc-spo form input {
    outline: 0 solid transparent;
    border: 1px solid var(--gr-input-border-color);
    border-radius: var(--gr-input-border-radius);
    padding: 0 var(--calc-input-space-base);
    width: 100%;
    min-height: var(--calc-input-height-base);
    background-color: var(--gr-input-bg-color);
    background-clip: padding-box;
    color: var(--gr-input-text-color);
}

#abit-calc-spo form input[disabled] {
    opacity: .5;
}

#abit-calc-spo form input:not([disabled]):hover {
    border-color: var(--gr-input-border-color--hover);
}

#abit-calc-spo form input:not([disabled]):focus-visible {
    outline: var(--calc-outline-width) solid var(--gr-outline-color);
    border-color: var(--gr-input-border-color--hover);
    color: var(--gr-input-text-color--hover);
}

#abit-calc-spo form input::placeholder {
    color: var(--gr-input-placeholder-color);
}

#abit-calc-spo .dropdown-list {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    margin-top: calc(2 * var(--calc-outline-width));
    outline: 0 solid transparent;
    border: none;
    border-radius: var(--gr-input-border-radius);
    box-shadow: none;
    max-height: 300px;
    overflow-y: auto;
    background: var(--gr-input-bg-color);
    background-clip: padding-box;
    opacity: 0;
    transition: outline-width .1s, outline-color .25s, border-color .25s, opacity .25s, scrollbar-color .25s;
}

#abit-calc-spo .dropdown-list:focus {
    outline: var(--calc-outline-width) solid var(--gr-outline-color);
    border-color: var(--gr-input-border-color--hover);
    color: var(--gr-input-text-color--hover);
}

#abit-calc-spo .dropdown-list {
    border: 1px solid var(--gr-input-border-color);
    box-shadow: 4px 4px 0 rgba(var(--gr-color-black-rgb), .075);
    opacity: 1;
}

#abit-calc-spo .dropdown-list:empty { /* WARN: в Firefox этот селектор нельзя группировать со следующим, т.к. нет поддержки has() */
    border: none;
    box-shadow: none;
    opacity: 0;
}

/*
#abit-calc-spo .dropdown-list:has(ul:empty) { *//* WARN: CSS Level 4 *//*
    border: none;
    box-shadow: none;
    opacity: 0;
}
*/

/*
#abit-calc-spo .dropdown-list:has(ul > li) { *//* WARN: CSS Level 4 *//* WARN: это вместо предыдущих трёх селекторов *//*
    border: 1px solid var(--gr-input-border-color);
    box-shadow: 4px 4px 0 rgba(var(--gr-color-black-rgb), .075);
    opacity: 1;
}
*/

#abit-calc-spo .dropdown-list {
    --scrollbar-thumb-width: 6px;
    --scrollbar-thumb-space: 6px;
    --scrollbar-width: calc(2 * var(--scrollbar-thumb-space) + var(--scrollbar-thumb-width));
}

#abit-calc-spo .dropdown-list::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

#abit-calc-spo .dropdown-list::-webkit-scrollbar-track {
    border-radius: 0 calc(var(--gr-input-border-radius) - 1px) calc(var(--gr-input-border-radius) - 1px) 0;
    background-color: var(--gr-input-bg-color);
}

#abit-calc-spo .dropdown-list::-webkit-scrollbar-thumb {
    border: var(--scrollbar-thumb-space) solid transparent;
    border-radius: var(--scrollbar-width);
    box-shadow: none;
    background: rgba(var(--gr-color-primary-base-rgb), .5);
    background-clip: padding-box;
    transition: background-color .25s;
}

#abit-calc-spo .dropdown-list:hover::-webkit-scrollbar-thumb {
    background-color: var(--gr-color-primary-base);
}

@-moz-document url-prefix() { /* WARN: только для Firefox */

    #abit-calc-spo .dropdown-list {
        border-radius: 2px;
        overflow-y: auto;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--gr-color-primary-base-rgb), .5) transparent;
    }

}

#abit-calc-spo .dropdown-list ul:empty::before {
    display: block;
    padding: var(--calc-grid-space-md);
    content: "ничего не найдено";
    text-align: center;
}

#abit-calc-spo .dropdown-list li {
    outline: none;
    border-top: 1px solid var(--gr-input-border-color);
    padding: var(--calc-grid-space-ex-xs) var(--calc-input-space-base);
    background: transparent;
    background-clip: padding-box;
    cursor: pointer;
    transition: border-top-color .125s, background-color .125s, color .125s;
}

#abit-calc-spo .dropdown-list li:first-child {
    border-top: none;
}

#abit-calc-spo .dropdown-list li:hover,
#abit-calc-spo .dropdown-list li:focus {
    border-top-color: var(--gr-color-primary-base);
    background-color: var(--gr-color-primary-base);
    color: var(--gr-color-white);
}

#abit-calc-spo .dropdown-list li:hover + li,
#abit-calc-spo .dropdown-list li:focus + li {
    border-top-color: var(--gr-color-primary-base);
}

@media (max-width: 552px) {
    body:not(._fd) #abit-calc ul { /* Список испытаний. */
        columns: 1; /* columns box */
    }

    body:not(._fd) #abit-calc ol dl, /* Список направлений для выбранных испытаний -> dl. */
    body:not(._fd) #abit-calc-spo ol dl { /* Список направлений для выбранной специальности -> dl. */
        margin-left: calc(-1 * (var(--index-width) + var(--gr-card-padding)));
    }

    body:not(._fd) #abit-calc ol dt:first-child, /* Название направления. */
    body:not(._fd) #abit-calc ol dd + dt, /* Название направления. */
    body:not(._fd) #abit-calc-spo ol dt:nth-child(2n - 1) > a { /* Название направления. */
        display: block; /* no flex box */
    }

    body:not(._fd) #abit-calc ol dt:first-child span, /* Код направления. */
    body:not(._fd) #abit-calc ol dd + dt span, /* Код направления. */
    body:not(._fd) #abit-calc-spo ol dt:nth-child(2n - 1) > a span { /* Код направления. */
        margin-right: calc(var(--calc-grid-space-xs) - .5em);
    }

    body:not(._fd) #abit-calc ol dt + dt, /* Название профиля. */
    body:not(._fd) #abit-calc-spo ol dt:nth-child(2n) { /* Название профиля. */
        padding-left: 0;
    }

    #abit-calc ol dd { /* Испытание. */
        padding-left: var(--calc-grid-space-md);
    }

    #abit-calc ol dt + dd::before { /* Метка перед первым испытанием. */
        margin-left: calc(-1 * var(--calc-grid-space-md));
    }
}