/* ========= >>>>>>>>>>>>>>   генеральные */


html {
    overflow-x: hidden;
}


body{
    margin: 0;
    padding: 0;
}

p, a, span {
    font-family: 'OS';
}

a {
    text-decoration: none;
}

/* Общий флекс */
.dF {
    display: flex;}

.dFcc {
    display: flex;
    align-items: center;
    justify-content: center;}

.dFaC {display: flex; align-items: center;}

.dFjS {
    display: flex;
    justify-content: flex-start;}

.dFjSaC {
    display: flex;
    justify-content: flex-start;
    align-items: center;}


/* Выравниватель */
.gBC {
    margin: 0 auto 0 auto;
    width: 100%;
    max-width: 1200px;
    transition: ease 0.4s;}

.gBCAll {
    margin: 0 auto 0 auto;
    width: 100%;
    max-width: 1200px;
    transition: ease 0.4s;}

.shadow {
    box-shadow: 3px 3px 10px rgba(10,10,10,0.2), -3px -3px 10px rgba(10,10,10,0.2);}

.posDown {bottom: -40%;}


.padAll {padding: 20px 0 30px 0;}

.padAllUpMin {padding: 10px 0 0 0;}

.padAllMin {padding: 10px 0 20px 0;}

.padAllDown {padding: 0 0 20px 0;}

.titleAll {margin: 5px auto 5px auto; max-width: 1200px;}
.titleAll h1 {
    padding: 0;
    margin: 0;
    font-family: 'OS';
    font-size: 22px;}


.tr {
    transition: ease 0.6s;}


.none {
    opacity: 0;
}





/* =====  >>>>>  не универсально

.delimiterBackground {
    width: 100%;
    background: var(--delimiterColor);}

.delimiter {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;}

.delimiter span{
    font-size: 18px;
    text-indent: 10px;
    color: var(--baseTextColorWhite);}


=================================== >>>>>>>> */


.titleBlock {
    font-size: 20px;
    color: #111;
    margin-bottom: 20px;}


.breadCrumbsBackground {
    background: var(--colorBackgroundBaseAdditional);
    font-size: 14px;
    padding: 5px 0 5px 0;}

.breadCrumbsBoss span {color: #000; margin-left: 3px;}

.breadCrumbsAll {color: #111;}
.breadCrumbsSelect {color: var(--colorBaseActive);}



/* кнопки внизу */
.keyDownBoss {display: flex; align-items: center; justify-content: center;}

.keyDownActive, .keyDown {
    display: flex;
    margin: 30px 5px 20px 5px;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(0,0,0,0.2);
    border-radius: 2px;
    transition: ease 0.4s;
    font-size: 14px;}

.keyDownActive:hover, .keyDown:hover {
    background: var(--colorBaseHover); color: #fff;}

.keyDownActive:active, .keyDown:active {
    background: var(--colorBaseActive); color: #fff;}

.keyDownActive {background: var(--colorBase); color: #fff;}
.keyDown {background: #eee; color: #111;}



/* таблицы   */

.genTable {
    font-family: 'OS';
    font-size: 13px;
    width: 98%;
    max-width: 1200px;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    box-shadow:  0px 3px 5px rgba(0, 0, 0, 0.20), 3px 3px 5px rgba(0, 0, 0, 0.20);}

.genTable th {
  color: var(--colorTableTextTh);
  border-bottom: 1px solid var(--colorTableOddBorder);
  padding: 12px 17px;
  background-color: var(--colorTableTitle);}

.genTable td {
    color: var(--colorTableTextTd);
    border-bottom: 1px solid var(--colorTableOddBorder);
    border-right:1px solid var(--colorTableOddBorder);
    background-color: var(--colorTableEven);
    padding: 7px 17px;
    transition: all 0.4s ease;}

.genTable tr:nth-child(odd) td { background-color: var(--colorTableOdd); transition: all 0.4s ease;}
.genTable td:nth-child(n+2) {text-align: left; width: 20%; min-width: 120px;}
.genTable tr:last-child td {border-bottom: none;}
.genTable td:last-child {border-right: none;}
.genTable tr:hover td{background-color: var(--colorTableEvenHover);}
.genTable tr:nth-child(odd):hover td{background-color: var(--colorTableOddHover);}


@media screen and (max-width: 1200px) {
    .gBC {max-width: 1150px;}}

@media screen and (max-width: 1150px) {
    .gBC {max-width: 1100px;}}

@media screen and (max-width: 1100px) {
    .gBC {max-width: 1050px;}}

@media screen and (max-width: 1050px) {
    .gBC {max-width: 1000px;}}

@media screen and (max-width: 1000px) {
    .gBC {max-width: 950px;}}

@media screen and (max-width: 950px) {
    .gBC {max-width: 900px;}}

@media screen and (max-width: 900px) {
    .gBC {max-width: 850px;}}

@media screen and (max-width: 850px) {
    .gBC {max-width: 800px;}}

@media screen and (max-width: 800px) {
    .gBC {max-width: 750px;}}

@media screen and (max-width: 750px) {
    .gBC {max-width: 700px;}}

@media screen and (max-width: 700px) {
    .gBC {max-width: 650px;}}

@media screen and (max-width: 650px) {
    .gBC {max-width: 600px;}}

@media screen and (max-width: 600px) {
    .gBC {max-width: 550px;}}

@media screen and (max-width: 550px) {
    .gBC {max-width: 500px;}}

@media screen and (max-width: 500px) {
    .gBC {max-width: 480px;}}

@media screen and (max-width: 480px) {
    .gBC {width: 90%;}}