/*Переменные CSS*/
:root {
    /*Цветовая гамма сайта*/
    --OPTION_BASE_COLOR: #cc0066;
    --OPTION_BASE_COLOR_L: #e0147a;
    --OPTION_BASE_COLOR_D: #b80052;
}



/*Шрифт*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400..900;1,100..900&display=swap');


body {
    font-size: 1rem;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    text-align: left;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    position: relative;
    background-color: #FFF;
    font-weight: 300;
    font-style: normal;
    color: #001d36;
    font-family: 'Montserrat', Arial, sans-serif !important;
}

h1 {font-size: 2em; margin: 0.9rem 0 0.9rem;}
h2 {font-size: 1.6rem; margin: 0.9rem 0 0.5rem; font-weight: 600;}
h3 {font-size: 1.4rem; margin: 0.5rem 0 0.5rem;}

.hr {border-top: 1px solid #e5e5e5; height: 1px; margin: 40px 0; clear: both;}
.hr hr {display:none;}
* html .hr {overflow: hidden;}


/*Шапка*/
header {padding: 20px 0; background-color: #F4F7FB;}
header .logo img {max-width: 70%; width: 400px;}
header .slogan {padding-left: 20px; font-weight: bold; font-size: 1.2rem; align-self: center; font-style: italic;}

/*Контейнеры*/
.content_container {max-width: 1200px; margin: 0px auto; position: relative; padding: 0 20px;}
.d-flex {display: flex;}
.flex-grow-1 {flex-grow: 1;}


/*Кнопка*/
.btn, a.btn {
    background: var(--OPTION_BASE_COLOR);   
    border: 1px solid var(--OPTION_BASE_COLOR);
    border-radius: 4px;
    outline: none;
    overflow: hidden;
    position: relative;
    color: #FFFFFF!important;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: center;
    text-decoration: none;
    line-height: 1.1rem;
    display: inline-block;
    padding: 15px 22px 17px;
    transition: all 0.2s ease 0s;
    width: auto;
     -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
     user-select: none;
     position: relative;
     
     font-family: inherit;
     caret-color: transparent;
}
.btn:hover, .btn.active {
    color: #FFFFFF !important;
    text-decoration: none;
    background: var(--OPTION_BASE_COLOR_L); 
    border: 1px solid var(--OPTION_BASE_COLOR);
}

/*Консоль*/
.console {width: 100%; border-radius: 16px; border: 1px solid #E1E2E3; overflow: scroll; font-size: 12px;}

#tape_container {height: 28px; }
.tape {
    height: 100%; 
    background-image: url("/include/images/tape.png");
    background-size: contain;
    background-repeat: repeat-x;
}

#tape_container.red {background-color: rgba(255, 0, 0);}
#tape_container.green {background-color: rgba(0, 255, 0);}
#tape_container.blue {background-color: rgba(0, 0, 255);}
#tape_container.seed {background-color: rgba(20,  80, 255);}
#tape_container.grow {background-color: rgba(180, 140, 230);}
#tape_container.bloom {background-color: rgba(255,  80, 120);}
#tape_container.micro {background-color: rgba(80,  200, 255);}
#tape_container.univ {background-color: rgba(220, 150, 230);}
#tape_container.flower {background-color: rgba(255, 60, 110);}
#tape_container.fruit {background-color: rgba(255, 70, 140);}

/*Меню*/
.items_menu {margin: 10px 0;}
.items_menu a {
    border-radius: 16px; 
    border: 2px solid #E1E2E3;
    padding: 8px 16px 8px 16px;
    font-weight: 500; 
    display: inline-block;
    text-decoration: none;
    margin: 0 4px 8px 0;
    cursor: pointer;
}
.items_menu a.active.red {border-color: rgba(255, 0, 0);}
.items_menu a.active.green {border-color: rgba(0, 255, 0);}
.items_menu a.active.blue {border-color: rgba(0, 0, 255);}
.items_menu a.active.seed {border-color: rgba(20,  80, 255);}
.items_menu a.active.grow {border-color: rgba(180, 140, 230);}
.items_menu a.active.bloom {border-color: rgba(255,  80, 120);}
.items_menu a.active.micro {border-color: rgba(80,  200, 255);}
.items_menu a.active.univ {border-color: rgba(220, 150, 230);}
.items_menu a.active.flower {border-color: rgba(255, 60, 110);}
.items_menu a.active.fruit {border-color: rgba(255, 70, 140);}


/*demo menu*/
.demo_menu a.active {border-color: var(--OPTION_BASE_COLOR);}


/*styled_switch*/
.styled_switch {display: flex; position: relative; }
.styled_switch label {display: inline; line-height: 48px;}
.styled_switch .checkbox {vertical-align: top; margin: 0 3px 0 0; width: 34px; height: 34px;}
.styled_switch .checkbox + label {cursor: pointer; overflow: visible!important; background: none!important;}
.styled_switch .checkbox:not(checked) {position: absolute; opacity: 0;}
.styled_switch .checkbox:not(checked) + label {position: relative; padding: 0 0 0 120px; display: inline-block; font-size: 1.2rem; font-weight: 600;}
.styled_switch .checkbox:not(checked) + label:before {content: ''; position: absolute; top: 0; left: 0; width: 100px; height: 52px; border-radius: 26px; background: #CDD1DA;}
.styled_switch.alert .checkbox:not(checked) + label:before {background: #CC0000;}
.styled_switch .checkbox:not(checked) + label:after {content: '';position: absolute; top: 4px; left: 4px; width: 44px; height: 44px; border-radius: 20px; background: #FFF; transition: all .2s; }
.styled_switch .checkbox:checked + label:before {background: var(--OPTION_BASE_COLOR)!important;}
.styled_switch .checkbox:checked + label:after {left: 52px;}




.min_max {color: #868686;}
.min_max > div {width: 50%; max-width: 50%;}
.min_max > div:last-child {text-align: right;} 


/*air*/
.air {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;display: block;width: 100%; margin: 0;}
.air.p1 {height: 1px;}
.air.p2 {height: 2px;}
.air.p3 {height: 3px;}
.air.p4 {height: 4px;}
.air.p5 {height: 5px;}
.air.p10 {height: 10px;}
.air.p15 {height: 15px;}
.air.p20 {height: 20px;}
.air.p30 {height: 30px;}
.air.p40 {height: 40px;}
.air.p50 {height: 50px;}
.air.p60 {height: 60px;}
.air.p70 {height: 70px;}
.air.p80 {height: 80px;}
.air.p80 {height: 90px;}
.air.p100 {height: 100px;}