/* KALININ.2.0 */
*{
    font: inherit;
    line-height: inherit;

    margin: 0;
    padding: 0;

    text-decoration: none;

    color: inherit;
    border: none;
    outline: none;
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}
*,
*::before,
*::after{
    box-sizing: inherit;
}
html{
    /*
    [KM]    Cистемные шрифты:
        Roboto / Noto   Android
        Helvetica Neue  iOS9-
        San Francisco   iOS9+
            Шрифт предлагается в двух начертаниях:
            Display - в UI-элементах интерфейса и для текстов с большим кеглем
            Text - для объёмного текста меньшего размера
    caption         Шрифт для текста элементов форм вроде кнопок
    icon            Шрифт для текста под иконками
    menu            Шрифт применяемый в меню
    message-box     Шрифт для диалоговых окон
    small-caption   Шрифт для подписей к небольшим элементам управления
    status-bar      Шрифт для строки состояния окон
    */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
    font-weight: 300;
    line-height: 1.54;

    box-sizing: border-box;
}
ul,
ol{
    list-style: none;
}
dl,
li,
img{
    max-width: 100%;
    height: auto;

    cursor: default;
}
dl,
li,
label,
form > p,
img,
a,
[data-mx]{
    cursor: default;
    -webkit-user-select: none; /* Google Chrome, Opera Next, Safari */
       -moz-user-select: none; /* Mozilla Firefox */
        -ms-user-select: none; /* Internet Explorer (не поддерживается) */
            user-select: none;

     -khtml-user-select: none;
         -o-user-select: none; /* Opera Presto (не поддерживается) */
}
a,
[data-mx]{
    cursor: pointer;
}
a[href^=\#]{
    -webkit-touch-callout: none;
    /*
    запрещаю
    в момент тапа и удержания пальца на ссылке
    всплывающее окно, содержащее информацию о ссылке
    */
}
h1,
h2,
h3,
h4,
h5,
h6,
p{
    /*max-width: 75ch;*/
    margin: 0 auto 14px;
    padding: 9px;

    word-wrap: break-word;
        word-break: break-word;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;

    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
        -ms-hyphens: auto;
}

h3,
strong,
b{
    font-weight: bolder;
}
p{
    text-align: left;
}
h1,
h2,
h3{
    text-align: center;
}

mark{
    background-color: #ffffa1;
    -webkit-box-shadow: 0 5px 0 #ffffa1, 0 -1px 0 #ffffa1;
    box-shadow: 0 5px 0 #ffffa1, 0 -1px 0 #ffffa1;
}
/* * * Типографика.Размеры  * * */

.s1,
.t dt,
h1{
    font-size: 26px;
    line-height: 30px;
}
.s2,
h2{
    font-size: 22px;
    line-height: 30px;
}
.s3,
h3{
    font-size: 20px;
    line-height: 30px;
}
.sx{
    font-size: 18px;
    line-height: 1.3;
}
h4,
h5,
h6,
.sl{
    font-size: 16px;
    font-weight: bolder;
    line-height: 25px;
}
.sm{
    font-size: 14px;
    line-height: 20px;
}
.ss{
    font-size: 12px;
    line-height: 15px;
}
/*
15px
18px
36px
 */

/* For mobile phones: */
/* h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px} */

@media only screen and (min-width: 600px){
    /* For tablets: */
}
@media only screen and (min-width: 768px){
    /* For desktop: */
    .s1,
    h1{
        font-size: 42px;
        line-height: 50px;
    }
    .s2,
    h2{
        font-size: 32px;
        line-height: 40px;
    }
}
.al li,
.al{
    text-align: left;
}
.ac li,
.ac{
    text-align: center;
}
.ar li,
.ar{
    text-align: right;
}
[hidden]{
    display: none;
}


dl.t{
    display: flex;
    /* max-width: 60ch; */

    margin: 30px auto;

    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.t dt{
    width: 100%;
    padding: 16px 8px 8px;

    text-align: center;
    /* background: yellow; */

    border-top: 1px solid #e7e7e7;

    align-self: stretch;
    /* text-transform: uppercase; */
}
.t dt:empty{
    padding: 0;
}
.t dd{
    max-width: 60ch;
    padding: 4px 8px;
}


/*
input:not([type=checkbox]),
input:not([type=radio]),

html input[type='button'],
input[type='reset'],
input[type='submit'],
button[disabled],
html input[disabled],
button::-moz-focus-inner,
input::-moz-focus-inner,
input[type='checkbox'],
input[type='radio'],
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='search'],
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration,
*/
optgroup,
select,
textarea,
input,
button,
fieldset,
form{
    display: inline-block;

    background-color: transparent;
    background-image: none;
}
/* КНОПКИ */
input[type=button],
input[type=submit],
input[type=reset],
input[type=image],
input[type=file]::-webkit-file-upload-button,
button{
    display: block;

    width: auto;
    max-width: 100%;
    margin: 10px auto;
    padding: 4px 8px;

    cursor: pointer;
    text-align: center;

    color: buttontext;
    /* border: 2px outset buttonface; */
    /* border-image: initial; */
    background-color: buttonface;

    -webkit-box-align: center;
}
input[type="button"],
input[type="submit"],
input[type="reset"]{
    white-space: pre;

    -webkit-appearance: push-button;
}
/* ПОЛЯ */
select,
input[type=text],
input[type=password],
/* ПОЛЯ HTML5 */
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=range],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
textarea{
    padding: 4px 8px;

    outline: 1px solid rgba(0, 0, 0, .2);
}
input:focus,
textarea:focus,
select:focus{
    outline-color: rgba(0, 64, 128, .3);
    outline-offset: inherit;
}
/* СТАТУСЫ */
input[type=checkbox],
input[type=radio]{
    padding: 0;
}

/* text_button */
.btn_low{
    /* кнопка - ссылка - текст */
}
/* outlined_button */
.btn_medium{
    /* кнопка с рамкой */
}
/* contained_button */
.btn_hi{
    /* кнопка с заливкой и тенью */
}
/* toggle_button */
.btn_chk{
    /* переключатель */
}
/*
.ok{
    color: #4CAF50;
}
.bad{
    color: #D32F2F;
}
.w{
    color: #F9A825;
}
*/

code,
pre,
var{
    font-family: consolas,monospace;

    white-space: nowrap;

    text-shadow: 0 0 0 currentColor;
}
svg{
    fill: currentColor;
    stroke: inherit;
}