.calculator_form{
    width:99%;
    padding: 10px 5px;
    margin-bottom: 10px;
    background-color: var(--calc_background);
    border-radius: 8px;
    color:var(--calc_text);
}
.calculator_form >*{
    margin-bottom:20px;
}
.calculator_response{
    width:99%;
    overflow-x: auto;
    padding: 10px 5px 15px;
    margin-top: 10px;
    background-color: var(--calc_background);
    border-radius: 8px;
    color:var(--calc_text);

}
.center_block{
    display: flex;
	text-align: center;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.center_text{
	text-align: center;
}
.right_text{
	text-align: right;
	margin-right: 5px;
}
.left_text{
	text-align: left;
	margin-left: 5px;
}
.calc_in_text{
    width: 100%;
    color:var(--calc_title);
}
.calc_in_row {
    margin: 5px 0;
}
.nowrap{
    white-space: nowrap;
}
.block_input_num{
    display: flex;
    position: relative;
    border-radius: 5px;
    padding-left: 5px;
    align-items: center;
    gap: 0.2rem;
}
.block_input_select {
    padding-left: 5px;
}
.input_base {
    margin-top: 19px;
    max-width:40px;
    padding-left: 0;
}
.input_num, .input_date {
    width: 100%;
    border: solid 1px var(--calc_num_border);
    height: 36px;
    font-size: 1rem;
    text-align: center;
    border-radius: 5px;
    color: var(--calc_text);
    background-color: var(--calc_num_background);
}
.input_num_50{
    border: solid 1px var(--calc_num_border);
    display: inline-block;
    border-radius: 5px;
    padding: 5px;
    margin: 10px 0;
    width: 50px;
    background-color: var(--calc_num_background);
}
.input_text {
    width: 100%;
    border: solid 1px var(--calc_num_border);
    height: 100px;
    border-radius: 5px;
    color: var(--calc_text);
    background-color: var(--calc_num_background);
    padding: 8px;
}
.otvet_num {
    width: 100%;
    max-width: 350px;
    height: 28px;
    line-height: 28px;
    border: solid 1px var(--calc_num_border);
    font-size: 14px;
    text-align: center;
    color: var(--calc_text);
    background-color: var(--calc_num_answer_background);
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 2px 11px -7px inset;
}
.input_select{
    font-size:1.5rem; 
    background-color: var(--calc_select_background);
    border-radius: 4px;
    border: solid 1px var(--calc_num_border);
    color: var(--calc_text);
}
.block_input_date{
    display: inline-block;
    border-radius: 5px;
    padding-top: 20px;
    padding-right: 40px;
    min-width: 253px;
    vertical-align: top;
}
/* ряд полей с подписями: на узком экране поля переносятся на новую строку, скрытые (.hide) не занимают места */
.calc_inputs{
    flex-wrap: wrap;
    column-gap: 40px;
}
.calc_inputs .block_input_date{
    padding-right: 0;
    min-width: 0;
    width: 253px;
    max-width: 100%;
}
.calc_inputs .input_select{
    width: 100%;
    font-size: 1rem;
    height: 30px;
}
/* строка уравнения: поля коэффициентов вперемешку с текстом, на узком экране переносится */
.urav_row{
    flex-wrap: wrap;
    gap: 4px;
    font-size: 1.2rem;
    color: var(--calc_text);
}
.urav_row .urav_coef{
    width: 64px;
}
@media (max-width: 480px){
    .urav_row{
        font-size: 1rem;
        gap: 2px;
    }
    .urav_row .urav_coef{
        width: 46px;
    }
}
/* матрицы и определители в решении */
.urav_matrix{
    display: inline-table;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 8px 2px;
    margin: 4px;
    border-left: 2px solid var(--calc_text);
    border-right: 2px solid var(--calc_text);
}
.urav_matrix_mat{
    border-radius: 8px;
}
.urav_matrix td{
    text-align: center;
    min-width: 24px;
}
.urav_matrix .urav_aug{
    border-left: 1px solid var(--calc_text);
    padding-left: 8px;
}
.urav_system{
    display: inline-block;
    border-left: 2px solid var(--calc_text);
    border-radius: 8px;
    padding: 2px 10px;
    text-align: left;
}
/* быстрый выбор значения под полем (ставки НДС и т.п.) */
.quick_buttons input{
    padding: 3px 10px;
    margin: 6px 3px 0;
    border-radius: 5px;
    border: solid 1px var(--calc_num_border);
    background-color: var(--calc_num_background);
    color: var(--calc_text);
    cursor: pointer;
}
/* поле дроби: числитель над знаменателем, слева целая часть */
.drob_box .block_row{
    width: 90px;
}
.drob_box .block_row.shortnum{
    width: 60px;
}
.drob_sign{
    font-size: 1.5rem;
    padding: 0 5px;
}
.table_ceil{
	border: 1px solid var(--calc_table_fon_border);
	width: 20px;
	text-align: center;
}
.img_calc_wait{
    max-width: 32px;
    max-height: 32px;
}
.calc_button {
    cursor: pointer;
    padding: 15px 40px;
    border-radius: 10px;
    background: var(--calc_button);
    color: var(--calc_button_text);
    border: 0;
    min-width: 40px;
    max-width: 750px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    font-size: 1.1em;
}
.calc_button:hover {
    background: var(--calc_button_hover);
    color: var(--calc_button_text);
}
.inline_button{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 36px;   
    font-size: 1.5rem;
    line-height: 2rem;
    border-radius: 0;
    background: var(--calc_inline_button);
    outline: 1px solid var(--calc_inline_button_border);
    color: var(--calc_inline_button_text);
}
.hidden_radio:checked + .inline_button {
    outline-color: var(--calc_inline_active_button_border);
    position: relative;
}
.box_clear{
    position: absolute;
    float: right;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
    background: #c50000;
    font-weight: bold;
    line-height: 0px;
    padding: 8px 5px 11px 5px;
    right: -8px;
    top: -9px;
}
.red_hr {
    color: red;
    background-color: red;
    border-color: red;
}
.errortext,.red_text{
    color:red;
} 
.green_text{
    color:green;
}
.big_text{
	font-size:1.3rem;
}
.schmall_text{
	font-size:0.8rem;
}
.table_border_top{
    border-top:2px solid var(--calc_table_activ_border);
}
.table_border_left{
    border-left:2px solid var(--calc_table_activ_border);
}
.table_border_bottom{
    border-bottom:2px solid var(--calc_table_activ_border);
}
.table_border_right{
    border-right:2px solid var(--calc_table_activ_border);
}
.block_row{
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
}
.block_300px{
    display: block;
    width: 300px;
    margin: 0 auto;
}
.block_inline{
    display: inline-block;
}
.table_cell{
    display: inline-table;
    border: 0;
}
.table_cell>tbody>tr>td{
    padding: 0 8px;
}
.table_text{
    background-color: var(--calc_table_fon);
    border-collapse: collapse;
    font-size: 0.8rem;
}
.table_text td, .table_text th {
    border: 1px solid var(--calc_table_border);
    padding: 0 7px;
    text-align: left;
    vertical-align: middle;
}
.shortnum{
    max-width: 44%;
}
hr {
    margin: 5px 0;
    border: 1px solid var(--calc_text);
}
.border{
    border: solid 1px var(--calc_table_fon_border);
}
.cel {
    display: inline-block;
    position:relative;
    top:3px;
    margin-top: 15px;

}
.cel, .op {
    margin-right: 2px;
}
.op {
    display: inline-block;
    position:relative; 
    top:3px;
    margin: 15px 3px 0 3px;
  }
.op_middle {
    display: inline-block;
    position:relative; 
    top:-24px;
      margin: 15px 5px 0 10px;
      height: 35px;
  }
.step{
    border: solid 1px var(--calc_table_fon_border);
    display: inline-block;
    border-radius: 5px;
    margin: 10px 5px 0 0;
}
.step_name{
    display: none;
    border-bottom: 1px dotted var(--calc_table_fon_border);;
    background-color: var(--calc_description_text_backround);
    font-size: 0.7em;
    padding:0 5px;
}
.step_body{
  margin: 0 5px 12px;
  text-align: center;
}
.step_text{
    color: #3361EC;
    margin-top: 10px;
}
.dr {
    display: inline-block;
    margin: 5px 0;
    height: 40px;
    vertical-align: top;
}
/* крупная дробь в ответе выше 40px и иначе налезает на то, что идёт под ней */
.big_text .dr {
    height: auto;
}
.chis, .zn {
    text-align: center;
}
.chis {
    border-bottom: 1px solid var(--calc_text);
    position: relative;
}
.zn{
    border-top: 1px solid black;
}
.hide{
    display: none;
}
.hidden
{
    visibility: hidden;
}
.half_block{
	width: 49%;
	font-size: 0.8em;
    display: inline-block;
	vertical-align: top;
}


.arrow {
    cursor: pointer;
    position: relative;
    width: 80px;
    height: 50px;
    margin: 20px;
    display: inline-block;
    vertical-align: bottom;
    
}
.arrow div {
    position: relative;
    top: 20px;
    width: 90px;
    height: 10px;
    background-color: #288563;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    left:0;
    display: inline-block;
    
}
.arrow div::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 10px;
    top: -11px;
    left: -8px;
    background-color: #288563;
    transform: rotate(-45deg);
}
.arrow div::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 10px;
    top: 11px;
    left: -8px;
    background-color: #288563;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    transform: rotate(45deg);
}

.direct_view{
    display: inline-block;
    text-align: center;
    margin: 10px 0;
    max-width: 42%;
    overflow: hidden;
}

#arrow_up{
    rotate: 40deg;
} 
#arrow_vert_up{
    rotate: 90deg;
} 
#arrow_down{
    rotate: -90deg;
} 
.cancel_text {
position: relative;
}

.cancel_text:before {
border-bottom: 1px solid red;
position: absolute;
content: "";
width: 100%;
height: 60%;
top: 0px;
transform: rotate(-14deg);
}

.up_cancel_text {
    position: absolute;
    top: -10px;
    font-size: 0.7rem;
}

.up_cancel_text:before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: -2px;
    margin-top: -1px;
    width: 1px;
    height: calc(100% + 2px);
    background: red;
    -webkit-transform: rotate(136deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}


.block_tab{
    display: flex;
    flex-wrap: wrap;
    width: 73px;
    min-width: 73px;
    height: inherit;
    padding: 1px;
    gap: 1px;
    z-index: 1;
    margin-right: -1px;  
}
.hidden_radio{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}

.noselect {
	-webkit-touch-callout: none;
	  -webkit-user-select: none;
	   -khtml-user-select: none;
		 -moz-user-select: none;
		  -ms-user-select: none;
			  user-select: none; 
}

/* базовый калькулятор */

.calc_basic_input{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--calc_button_num_border);
    border-radius: 5px;
}
.calc_basic_decs{
    text-align: right;
    padding: 0 0.5rem;
    font-size: 1.5em;
    color: var(--calc_text);
}
.calc_basic_rezult{
    text-align: right;
    padding: 0 0.5rem;
    font-size: 3em;
    color: var(--calc_text);
}
.calc_basic_row{
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}
.calc_basic_button{
    font-size: 1.5em;
    line-height: 1;
    margin: 0px 2px;
    border: 1px solid var(--calc_button_num_border);
    background-color: var(--calc_button_num);
    color: var(--calc_button_num_text);
    flex-basis: 25%;
    height: 45px;
    border-radius: 5px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

}
.calc_basic_button:hover{
    background-color: var(--calc_button_num_hover);
}
.long_button{
    flex-basis: calc(50% + 4px);
}
.button_base_calc{
    height: 95px;
    background-color: var(--calc_button);
}
.button_base_calc:hover{
    height: 95px;
    background-color: var(--calc_button_hover);
}
.calc_basic_upkey{
    background-color: var(--calc_button_key);
}
.calc_basic_upkey:hover{
    background-color: var(--calc_button_key_hover);
}
.calc_basic_rkey{
    background-color: var(--calc_inline_button);
}
.calc_basic_rkey:hover{
    background-color: var(--calc_inline_button_hover);
}

.input_num_append{
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    cursor: default;
    opacity: 0.8;
}

/* калькулятор нод*/
.dashed{
    border-bottom: 1px dashed var(--calc_title);
}
.pad_right{
    padding-right: 10px;
}

/* раздел «Алгебра и функции»: дробь в строке решения, поле формулы, график */
.alg_frac{
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    margin: 0 2px;
}
.alg_frac > span{
    padding: 0 3px;
    line-height: 1.35;
}
.alg_frac > span:first-child{
    border-bottom: 1px solid currentColor;
}
.alg_formula_input{
    width: 360px;
    max-width: 100%;
}
.alg_formula_input .input_num{
    text-align: left;
    padding: 0 8px;
}
.alg_range .input_num{
    width: 80px;
}
.alg_color{
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alg_graph{
    margin: 10px auto;
    max-width: 640px;
}
.alg_svg{
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
}
.alg_legend{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
}
.alg_legend > span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.alg_table td, .alg_table th{
    text-align: center;
}

/* калькуляторы статистики: поле списка чисел */
.st_list{
    max-width: 520px;
    height: 80px;
    resize: vertical;
}
/* многострочный текст (подсчёт слов, транслитерация) */
.st_long{
    width: 100%;
    max-width: 640px;
    height: 180px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

/* калькуляторы матриц: сетка элементов */
.mat_grid{
    border-collapse: separate;
    border-spacing: 4px;
    border-left: 2px solid var(--calc_text);
    border-right: 2px solid var(--calc_text);
    border-radius: 8px;
    padding: 0 4px;
}
.mat_grid .input_num{
    width: 54px;
}
.mat_sel{
    font-size: 1rem;
    height: 28px;
}
@media (max-width: 480px){
    .mat_grid .input_num{
        width: 40px;
    }
}

/* калькуляторы геометрии: схема фигуры, единицы измерения */
.geom_figure svg{
    width: 100%;
    max-width: 280px;
    height: auto;
    color: var(--calc_text);
}
.geom_figure .geom_lbl{
    fill: var(--calc_title);
    font-size: 15px;
    font-style: italic;
}
.geom_unit{
    font-size: 1rem;
    height: 30px;
    padding: 0 6px;
}
/* рисунок в масштабе в решении */
:root{
    --draw_aux: #2563eb;
    --draw_circ: #16a34a;
    --draw_ang: #dc2626;
}
:root[theme='dark']{
    --draw_aux: #7aa7ff;
    --draw_circ: #4ade80;
    --draw_ang: #ff8a8a;
}
.draw_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 24px;
    margin: 8px 0;
}
.draw_svg{
    display: block;
    max-width: 100%;
    height: auto;
    color: var(--calc_text);
    font-family: inherit;
}
.draw_txt text{
    paint-order: stroke;
    stroke: var(--calc_background);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.draw_legend{
    margin-bottom: 8px;
}

:root {
    --calc_background:#fff;
    --calc_num_background:#fff;
    --calc_num_answer_background:#e3f3f8;
    --calc_description_text_backround:#dce6e8;
    --calc_num_border:#0096cd;
    --calc_table_fon:#f8f8f8;
    --calc_table_border:#dce5e7;
    --calc_table_fon_border:#dfdfdf;
    --calc_table_activ_border:#000;
    --calc_select_background:#EEF2FF;
    --calc_title:#5b57db;
    --calc_text:#000;
    --calc_subtext:#3b3b3b;
    --calc_link:#5045E5;
    --calc_button:#dbd657;
    --calc_button_text:#1f2937;
    --calc_answer:#0a7a3d;
    --calc_button_hover:#efe95e;
    --calc_inline_button:#f4ee64;
    --calc_inline_button_hover:#f4ee64;
    --calc_inline_button_border:#fff;
    --calc_inline_button_text:#7d7b7b;  
    --calc_inline_active_button_border:#7d7b7b;  
    --calc_button_num:#FFF;
    --calc_button_num_hover:#F3F4F6;
    --calc_button_num_border:#D1D5DB;
    --calc_button_num_text:#000;
    --calc_button_key:#FFF;
    --calc_button_key_hover:#E5E7EB;
    --calc_button_key_border:#D1D5DB;
    --calc_button_key_text:#000;
}
:root[theme='dark'] {
    --calc_background:#1f2937;
    --calc_num_background:#374151;
    --calc_num_answer_background:#725725;
    --calc_description_text_backround:#374151;
    --calc_num_border:#4b5563;
    --calc_table_fon:#333333;
    --calc_table_border:#59686b;
    --calc_table_fon_border:#4f4f4f;
    --calc_table_activ_border:#FFF;
    --calc_select_background:#5045E5;
    --calc_title:#e5e5e5;
    --calc_text:#fff;
    --calc_subtext:#b1b0b0;
    --calc_link:#9a98f2;
    --calc_button:#666464;
    --calc_button_text:#fff;
    --calc_answer:#5fd38d;
    --calc_button_hover:#7d7b7b;
    --calc_inline_button:#7d7b7b;
    --calc_inline_button_hover:#7d7b7b;
    --calc_inline_button_border:#939393;
    --calc_inline_button_text:#fff;
    --calc_inline_active_button_border:#fff;
    --calc_button_num:#000;
    --calc_button_num_hover:#5d5d5d;
    --calc_button_num_border:#73767a;
    --calc_button_num_text:#FFF;
    --calc_button_key:#000;
    --calc_button_key_hover:#5d6ea9;
    --calc_button_key_border:#6b7789;
    --calc_button_key_text:#FFF;
}
/* конвертеры единиц: число, две единицы и кнопка обмена в одну строку, на узком экране - столбиком */
.un_row{
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.un_field{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.un_field .calc_in_text{
    width: auto;
}
.un_value{
    width: 160px;
}
.un_sel{
    font-size: 1rem;
    height: 30px;
    max-width: 260px;
}
.un_swap{
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 30px;
    padding: 0 6px;
    color: var(--calc_text);
    user-select: none;
}
@media (max-width: 480px){
    .un_field, .un_value, .un_sel{
        width: 100%;
        max-width: none;
    }
}

/* поля дат и времени в общих формах */
.st_date{
    width: 170px;
}
.urav_row .st_time{
    width: 110px;
}
.urav_row .st_text{
    width: 280px;
    max-width: 100%;
}

/* календарь месяца в решениях */
.dt_cal td, .dt_cal th{
    text-align: center;
    min-width: 32px;
}
.dt_cal .dt_off{
    color: #c0392b;
}
.dt_cal .dt_mark{
    background: #2563eb;
    color: #ffffff;
    font-weight: bold;
    border-radius: 4px;
}
.dt_cal .dt_hol{
    background: rgba(192, 57, 43, 0.15);
    color: #c0392b;
}
.dt_cal .dt_work{
    background: rgba(37, 99, 235, 0.12);
}

/* обратный отсчёт: быстрый выбор события и живой отсчёт в ответе */
.ot_presets{
    flex-wrap: wrap;
    gap: 6px;
}
.ot_presets .calc_in_text{
    width: auto;
}
.ot_preset{
    cursor: pointer;
    padding: 3px 10px;
    border: solid 1px var(--calc_num_border);
    border-radius: 14px;
    color: var(--calc_text);
    background-color: var(--calc_num_background);
    font-size: 0.95rem;
    user-select: none;
}
.ot_live{
    margin-top: 6px;
    font-size: 1.1rem;
}

/* химия: степени окисления над символами, электронно-графические схемы */
.ch_ox{
    position: relative;
    display: inline-block;
    min-width: 1.15em;
    text-align: center;
}
.ch_ox_s{
    position: absolute;
    left: 50%;
    top: -1.05em;
    transform: translateX(-50%);
    font-size: 0.68em;
    line-height: 1;
    white-space: nowrap;
    color: #c0392b;
}
.ch_ox_eq{
    display: inline-block;
    padding-top: 0.7em;
    font-size: 1.15rem;
    line-height: 2.1;
}
.ch_orb{
    display: inline-block;
    min-width: 1.6em;
    height: 1.5em;
    line-height: 1.5em;
    border: solid 1px var(--calc_text);
    margin-left: -1px;
    text-align: center;
    letter-spacing: -0.15em;
    vertical-align: middle;
}
.ch_orbs{
    display: inline-block;
    text-align: left;
    line-height: 1.9;
}
.ch_orb_name{
    display: inline-block;
    min-width: 3em;
    text-align: right;
    margin-right: 6px;
}

/* таблица Менделеева и таблица растворимости: прокрутка по горизонтали на узком экране */
.pt_wrap{
    max-width: 100%;
    overflow-x: auto;
    margin: 12px auto 6px;
}
.pt_grid{
    display: grid;
    grid-template-columns: repeat(18, minmax(30px, 1fr));
    grid-template-rows: repeat(7, auto) 10px auto auto;
    gap: 2px;
    min-width: 600px;
}
.pt_cell{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 0 3px;
    border: solid 1px rgba(127, 127, 127, 0.35);
    border-radius: 3px;
    color: var(--calc_text);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.15;
    cursor: pointer;
}
.pt_cell b{
    font-size: 0.95rem;
}
.pt_z{
    font-size: 0.65rem;
    opacity: 0.75;
}
.pt_cell:hover, .pt_cur{
    outline: solid 2px #c0392b;
    outline-offset: -1px;
}
.pt_gap{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--calc_text);
    opacity: 0.7;
}
.pt_frow{
    justify-content: flex-end;
    padding-right: 4px;
}
.pt_legend{
    font-size: 0.8rem;
    line-height: 1.9;
    text-align: center;
}
.pt_legend .pt_cell{
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0 3px 0 10px;
    vertical-align: middle;
    cursor: default;
}
.pt_alkali{ background: rgba(231, 76, 60, 0.28); }
.pt_alkaline{ background: rgba(230, 126, 34, 0.28); }
.pt_transition{ background: rgba(241, 196, 15, 0.26); }
.pt_post{ background: rgba(149, 165, 166, 0.3); }
.pt_metalloid{ background: rgba(26, 188, 156, 0.28); }
.pt_nonmetal{ background: rgba(46, 204, 113, 0.3); }
.pt_halogen{ background: rgba(52, 152, 219, 0.3); }
.pt_noble{ background: rgba(155, 89, 182, 0.3); }
.pt_lanthanide{ background: rgba(236, 112, 160, 0.26); }
.pt_actinide{ background: rgba(192, 108, 132, 0.3); }
.rv_table{
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 0.8rem;
    color: var(--calc_text);
}
.rv_table th, .rv_table td{
    border: solid 1px rgba(127, 127, 127, 0.4);
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
}
.rv_table td{
    cursor: pointer;
    min-width: 22px;
}
.rv_table td:hover, .rv_table .rv_cur{
    outline: solid 2px #c0392b;
    outline-offset: -2px;
}
.rv_R{ background: rgba(46, 204, 113, 0.25); }
.rv_M{ background: rgba(241, 196, 15, 0.3); }
.rv_N{ background: rgba(231, 76, 60, 0.25); }
.rv_X{ background: rgba(127, 127, 127, 0.15); }

/* информатика: часть номера узла в двоичной записи IP-адреса */
.ip_cut{
    color: #c0392b;
}
.kd_bits{
    font-family: monospace;
    letter-spacing: 0.04em;
}
.cv_swatch{
    display: inline-block;
    width: 1.6em;
    height: 1.1em;
    border: solid 1px rgba(127, 127, 127, 0.6);
    border-radius: 3px;
    vertical-align: middle;
}
/* биология: решётка Пеннета - прокрутка широкой решётки, образец цвета фенотипа */
.pq_wrap{
    max-width: 100%;
    overflow-x: auto;
}
.pq_grid td{
    white-space: nowrap;
}
.pq_sw{
    display: inline-block;
    width: 1.2em;
    height: 1em;
    border: solid 1px rgba(127, 127, 127, 0.6);
    border-radius: 3px;
    vertical-align: middle;
}
/* русский язык: ударная гласная в стихотворной строке */
.sr_st{
    color: #c0392b;
    text-decoration: underline;
}

/* состояние расчёта и ответ */
.calc_button:disabled{
    opacity: 0.6;
    cursor: progress;
}
.hidden_radio:focus-visible + .inline_button{
    outline: 2px solid var(--focus_ring);
}
.calc_status{
    text-align: center;
    margin: 8px 0;
    color: var(--calc_text);
}
.calc_status:empty{
    display: none;
}
.calc_status_error{
    color: #c0392b;
    font-weight: 500;
}
:root[theme='dark'] .calc_status_error{
    color: #ff8a80;
}
#user_otvet_global .red_text,
#user_otvet_global .errortext{
    color: var(--calc_answer);
}
.calc_copy_answer{
    margin: 8px 0 4px;
    padding: 6px 14px;
    border: 1px solid var(--calc_num_border);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--calc_text);
}
.calc_copy_answer[hidden]{
    display: none;
}
/* форма физики: число и единица в одну строку */
.ph_mode_row{
    flex-wrap: wrap;
    gap: 4px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
.ph_mode{
    width: 100%;
    min-height: 36px;
    font-size: 1rem;
}
#ph_inputs .urav_row{
    flex-wrap: wrap;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
#ph_inputs .urav_text{
    flex: 0 0 100%;
    text-align: center;
}
#ph_inputs .ph_value{
    flex: 1 1 0;
    width: auto;
    min-width: 90px;
}
#ph_inputs select{
    flex: 0 1 auto;
    width: auto;
    max-width: 50%;
    height: 36px;
    font-size: 1rem;
}
/* на телефоне поля под палец; шрифт 16px не даёт iOS увеличивать страницу при вводе */
@media (max-width: 767px){
    .input_num, .input_date{
        height: 44px;
    }
    .input_select, .un_sel, .ph_mode, #ph_inputs select, .calc_inputs .input_select{
        min-height: 44px;
        font-size: 1rem;
    }
}
/* длинная подпись переключателя не должна расширять страницу на телефоне */
@media (max-width: 480px){
    .calculator_form label.nowrap{
        white-space: normal;
    }
}
/* научный калькулятор: ширину определяет блок формы, а не окно, поэтому раскладка на контейнерных запросах */
.nk_wrap{
    container-type: inline-size;
}
.nk_calc{
    max-width: 880px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    background: var(--calc_table_fon);
    border: 1px solid var(--calc_table_border);
    border-radius: 14px;
}
.nk_display{
    position: relative;
    padding: 8px 12px;
    background: var(--calc_num_background);
    border: 1px solid var(--calc_num_border);
    border-radius: 8px;
    text-align: right;
}
.nk_expr{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0 2px 22px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--calc_text);
    font-size: 1.15rem;
    text-align: right;
}
.nk_expr.errortext{
    color: red;
}
.nk_m{
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--calc_subtext);
}
.nk_out{
    min-height: 2.6rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.nk_res{
    font-size: 1.7rem;
    line-height: 1.25;
    font-weight: bold;
    overflow-wrap: anywhere;
    color: var(--calc_text);
}
.nk_steps{
    font-size: 0.8rem;
    font-weight: normal;
    white-space: nowrap;
    color: var(--calc_link);
}
.nk_mem{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}
.nk_pads{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.nk_pad{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.nk_more{
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.25;
    background: var(--calc_button_key_hover);
    color: var(--calc_button_key_text);
    border: 1px solid var(--calc_button_key_border);
    border-radius: 7px;
    touch-action: manipulation;
}
.nk_more:focus-visible{
    outline: 2px solid var(--focus_ring);
}
.nk_fn{
    display: none;
}
.nk_open .nk_fn{
    display: grid;
}
.nk_key{
    min-height: 38px;
    padding: 0 2px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    background: var(--calc_button_key_hover);
    color: var(--calc_button_key_text);
    border: 1px solid var(--calc_button_key_border);
    border-radius: 7px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.nk_key:hover{
    filter: brightness(0.93);
}
.nk_key:active{
    transform: translateY(1px);
}
.nk_key:focus-visible{
    outline: 2px solid var(--focus_ring);
}
.nk_key sup, .nk_key sub{
    font-size: 0.7em;
    line-height: 0;
}
.nk_mem .nk_key{
    min-height: 30px;
    background: transparent;
    color: var(--calc_text);
}
.nk_num .nk_key{
    min-height: 46px;
    font-size: 1.2rem;
    background: var(--calc_button_num);
    color: var(--calc_button_num_text);
    border-color: var(--calc_button_num_border);
}
.nk_num .nk_op{
    background: var(--calc_select_background);
    color: var(--calc_text);
}
.nk_num .nk_ac{
    font-weight: bold;
}
.nk_num .nk_wide{
    grid-column: span 2;
}
.nk_fn .nk_on{
    background: var(--calc_button);
    color: var(--calc_button_text);
    font-weight: bold;
}
.nk_num .calc_button{
    min-width: 0;
    padding: 0;
    font-size: 1.5rem;
    background: var(--calc_button);
    color: var(--calc_button_text);
    border: 0;
}
.nk_num .calc_button:hover{
    background: var(--calc_button_hover);
}
/* широкая форма: функции слева, цифры справа, как на настольном калькуляторе */
@container (min-width: 620px){
    .nk_calc{
        padding: 14px;
        gap: 10px;
    }
    .nk_pads{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
    }
    .nk_more{
        display: none;
    }
    .nk_fn{
        display: grid;
    }
    .nk_fn .nk_key, .nk_num .nk_key{
        min-height: 50px;
    }
    .nk_fn .nk_key{
        font-size: 1rem;
    }
    .nk_res{
        font-size: 2rem;
    }
}
@container (max-width: 340px){
    .nk_calc{
        padding: 6px;
    }
    .nk_pad{
        gap: 4px;
    }
    .nk_key{
        font-size: 0.8rem;
    }
}
@media (max-width: 767px){
    /* 16px не даёт iOS увеличивать страницу при вводе */
    .nk_expr{
        font-size: 1rem;
    }
}
.home_calc{
    margin: 0 0 20px;
}
.home_calc_link{
    display: block;
    text-align: center;
    color: var(--calc_link);
}