@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic');

article,figure,footer,header,menu,nav,section,main {display: block;}
* { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
html{height:100%; margin: 0; padding: 0; font-size: 16px;}
body{
    height:100%; width:100%; font-family: 'Open Sans', sans-serif; color: #495057;
}

.h3_5{height: 3.5rem;}
.top-3_5{top: 3.5rem;}

.top-color{background-color: #3097d1}

main{position: relative; background-color: #f5f9fc/*#f5f8fa*/; min-width: 300px; overflow: auto; font-size: 1rem}
nav, #logo{min-width: 250px; max-width: 250px;}
nav{
    position: relative; padding-top: 20px; overflow: auto;
    background-color: #fefefe; border-right: 1px solid rgb(229, 233, 242); transition: margin-left .4s ease-in-out;
}
#logo{
    background-color: #2f93cb; border-right: 1px solid #2c8abe; text-decoration: none; font-size: 1.2rem; font-weight: 300;
    transition: margin-left .4s ease-in-out; padding-left: 40px;
}
#info-panel{position: relative; min-width: 300px}
@media only screen and (max-width: 570px) {
    nav, #logo{margin-left: -250px}
}

#logo i, #logo .feather{width: 20px; height: 20px; color: #fcc100}
#logo span{font-weight: 300; color: #fcc100}
#nav-switch{height: 28px; cursor: pointer;}
.sandwich{position: relative}
.sandwich, .sandwich:after, .sandwich:before {
    display: block; content: ""; border-radius: 1px; height: 0.14em; width: 24px; background-color: #fff;
    transition: background-color .1s ease-in-out;
}
.sandwich:before {position: absolute; top: -8px; width: 18px;}
.sandwich:after {position: absolute; bottom: -8px; width: 14px;}
#nav-switch:hover .sandwich, #nav-switch:hover .sandwich:before, #nav-switch:hover .sandwich:after{background-color: #fcc100}

nav ul{margin: 0; padding: 0; width: 100%}
nav li{list-style: none; position: relative;}
nav li:after{content:""; position: absolute; bottom:0; left: 0; right: 0; height: 1px;
    /*background: linear-gradient(to right, rgba(0,0,0, 0.02), rgba(0,0,0, 0.1), rgba(0,0,0, 0.02));*/
    background-image: url("../images/system/menu-line.png");
    background-repeat: no-repeat;
}
nav li:last-child:after{display: none}
nav .feather, nav .svg-icon {
    width: 16px; height: 16px; color: rgba(0,0,0,0.65); margin-right: 8px;
    text-decoration:none; transition: color .1s ease-in-out;
}
nav a .svg-icon{fill: rgba(0,0,0,0.65)}
nav a{
    display: flex; align-items: center; width: 100%; font-family: 'Roboto', sans-serif; font-size: 0.9rem; font-weight: 400;
    color: rgba(0,0,0,0.65); text-decoration: none; padding: 8px 15px 8px 20px;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
}
nav a:hover{color:#000; background-color: #f5f5f5/*rgba(0,0,0,.04)*/;}
nav a:hover .feather{color: #000;}
nav a.active, nav a.active .feather{color: #028ee6;}
nav a:hover .svg-icon{fill: #000}
nav a.active .svg-icon{fill: #028ee6}
nav ul ul {margin:0px 0px 0px 0px;}
nav ul ul li:after{display: none}
nav ul ul a{padding: 6px 15px 6px 44px;}
nav ul ul li:last-child a{padding-bottom: 10px}
/*nav li.nav-new-section{border-color: #d6d6d6;}*/
a.menu-dropdown{position: relative}
a.menu-dropdown .dropdown-arrow{position: absolute; right: 0; transition: .3s ease-in-out;}
div.sub-menu{display: none}
div.sub-menu-open{display: block}
a.menu-dropdown-open .dropdown-arrow{transform: rotate(180deg);}

.search-phrase{
    position: relative; height: 55%; width: 280px; max-width: 100%; /*min-width: 100px;*/
    background-color: /*#2f93cb*/ rgba(0,0,0,0.02) /*transparent*/;
    border-radius: 4px; padding-left: 20px; border: 1px solid #2c8abe;
}
@media only screen and (max-width: 768px) {
    .search-phrase{width: 200px}
    .mobile-hidden{display: none}
}
.icon-magnifier{position: absolute; top:50%; margin-top: -8px; left: 8px; width: 15px; height: 15px; color: #ffffff; opacity: 0.7}
.search-phrase input{
    height: 100%; width: 100%; background-color: transparent; border: none; font-size: 0.85rem; outline:0;
    padding-left: 10px; padding-right: 10px; color: rgba(255,255,255,0.95);
}
.search-phrase input::placeholder{color: #fff; opacity: 0.8; font-weight: 300}
.search-phrase input::-webkit-input-placeholder {color: #fff; opacity: 0.8}

.user-menu-switch{width: 24px; height: 24px; fill: #fff; cursor: pointer; transition: all .1s ease-in-out;}
.user-menu-switch:hover{fill: #fcc100}
#info-panel-right a{
    color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.9rem; font-weight: 300;
    transition: color .1s ease-in-out;
}
#info-panel-right a:hover{color: #fcc100}
.js-message{
    display: none; position: absolute; top:5px; left:50%; margin-left: -135px; width: 270px; max-width: 100%; min-height: 70px;
    background-color: #fefefe; background-clip: padding-box;  border: 1px solid rgba(0,0,0,.15); /*border-radius: .2rem;*/
    padding: .8rem .2rem .8rem 1rem; border-left-width: 8px; border-left-color: #57ba7a; font-size: .8rem; line-height: 1.4em;
    overflow: hidden;
    /*box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.1);*/
}
.js-message .feather{
    position: absolute; top:3px; right:4px; width: 15px; color: #666; cursor: pointer; background-color: #fefefe;
    transition: color .1s ease-in-out;
}
.js-message .feather:hover{color: #028ee6}
.js-message-error{border-left-color: #f85353;}
.js-message-txt{max-height: 70px; overflow-y: auto; padding-right: 15px}
.js-message-txt p{margin: 0px 0px 5px 0px;}

p{margin: 10px 0px 10px 0px; line-height: 1.4em}
.popper{
    position: absolute; display: none; min-width: 10rem; padding: .5rem 0; margin: .125rem 0 0; text-align: left; background-color: #fff;
    background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .2rem;
}
.popper a, #info-panel-right .popper a{display: block; color: #000; padding: .4rem 1.5rem; font-size: 0.85rem}
.popper a:hover, #info-panel-right .popper a:hover{background-color: #f5f5f5/*rgba(0,0,0,.04)*/;}
.dropdown-divider {height: 0; margin: .5rem 0; overflow: hidden; border-top: 1px solid #e9ecef;}

.page-title{margin-top:0}
.signup-form{
    width: 700px; max-width: 100%; background-color: #fdfdfd; padding: 16px 32px 32px 32px; border-radius:4px;box-shadow:0 0 2px rgba(0,0,0,0.25);
}
.invalid-feedback{
    display: none; color: #dc3545; font-size: 75%; margin-top: 0.3rem;
}
.is-invalid{border-color: #dc3545 !important;}
.is-invalid + .invalid-feedback{display: block}
.form-input-text {
    display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5;
    color: #495057; background-color: #fff; background-clip: padding-box;  border: 1px solid #ced4da; border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn{ display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle;
background-color: #3097d1; color: #fff;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer;
border: 1px solid transparent; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn:hover{background-color: #2b86ba}
.btn:active {transform: translateY(2px);}
.btn-primary, .btn-primary:visited{background-color: #028ee6}
.btn-primary:hover{background-color: #457ac5}
.btn-busy{
    color: transparent; background-image: url("../images/system/loader.gif"); background-repeat: no-repeat;
    background-position: 50% 50%;
}
/* --- Custom select */
.custom-select{position: relative; display: block; width: 100%;}
.custom-select select{
    display: block; width: 100%; height: calc(2.25rem + 2px); padding: .375rem 1.75rem .375rem .75rem; font-size: 1rem; line-height: 1.5;
    color: #495057; background-color: #fff; background-clip: padding-box;  border: 1px solid #ced4da; border-radius: .25rem;
    outline: 0; appearance: none; -webkit-appearance: none;-moz-appearance: none;
}
.custom-select select::-ms-expand{display: none}
.custom-select select:disabled{opacity: 0.5; pointer-events: none;}
.select-arrow {
    position: absolute; top: 16px; right: 13px; width: 0; height: 0;
    pointer-events: none; border-style: solid; border-width: 6px 5px 0 5px; border-color: #999 transparent transparent transparent;
}
/* --- / Custom select */

/* --- Custom check box */
.custom-checkbox {/* Customize the label (the container) */
    display: block; position: relative;  padding-left: 30px; margin-bottom: 12px; cursor: default;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none;
}
.custom-checkbox input {/* Hide the browser's default checkbox */
    position: absolute; opacity: 0; cursor: default; height: 0; width: 0;
}
.check-mark {/* Create a custom checkbox */
    position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #eee; border-radius: .25rem;
    transition: background-color .1s ease-in-out;
}
.custom-checkbox:hover input ~ .check-mark {/* On mouse-over, add a grey background color */
    background-color: #dee2e6;
}
.custom-checkbox input:checked ~ .check-mark {/* When the checkbox is checked, add a blue background */
    background-color: #2196F3;
}
.is-invalid .check-mark{background-color: rgba(220,53,69,0.7) !important;}
.check-mark:after {/* Create the check-mark/indicator (hidden when not checked) */
    content: ""; position: absolute; display: none;
}
.custom-checkbox input:checked ~ .check-mark:after {/* Show the check-mark when checked */
    display: block;
}
.custom-checkbox .check-mark:after {/* Style the check-mark/indicator */
    left: 7px; top: 3px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);
}
/* --- / Custom check box */
@media only screen and (max-width: 1000px) {
}

@media only screen and (max-width: 768px) {
}