/*
Brandbook colors
#373c59 темно синий
#f15b4e коралловый
#414042 темно-серый
#6d6e71 серый
#939598 светло-серый
#bcbec0 светло-светло-серый
#ebebec почти белый
#929ebc светло-голубой
#fabfb7 светло-коралловый
*/
html, body {
    margin: 0;
    padding: 0;
    /*font-size: 1.1em;*/
    line-height: 1.5em;
    background-color: #444;
}
a {
    color: #003;
    
}
a:visited{
    color: #000;
}
.fa-n{
    font-weight: initial !important;
}
.container {
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    /* Optional */
    padding: 0;
    background-color: #bcbec0;
    box-sizing: border-box;
}
.vert{
    display: flex;
    flex-flow: column wrap;
}
.horiz {
    display: flex;
    flex-flow: row wrap;
}
.center {
    align-items: center;
}
#container{
    padding: 10px;
    align-items: stretch;
}
.nav{
    width: 100%;
    /*margin-top: 10px;*/
    margin-bottom: 10px;
}
.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  list-style: none;
  margin: 0; 
  background: #373c59;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
  border-top: thin solid #bcbec0;
}

.navigation a:hover {
  background: #f05a4e;
  border-top: thin solid #f00;
}
.header, .footer{
    flex-flow: column nowrap;
    display: flex;
    margin: auto;
    width: 100%;
    text-align: center;
    align-items: center;
    align-content: center;
    min-height: 30px;
    background-color: #373c59;
    color: white;
}
.header > p, .footer > p{
    margin: auto;
}
.header {
    flex-flow: row nowrap;
    justify-content: center;
}
.footer{
    margin-top: 10px;
}
.header p:nth-child(2){
    color: white;
    font-size: xx-large;
    font-family: sans-serif;
    font-weight: bold;
    line-height: 1.2em;
    margin-top: 15px;
}

.button{
    display: inline-block; 
    background-color: #EEE; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    padding-right: 5px;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
}
.button:hover{
    background-color: #DDD; 
    box-shadow: -2px -2px 2px 0px #000000 inset;
}
.shadow {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 .round5border {
    /*margin: 5px 0 5px 0;*/
    border: 1px solid #999;
    border-radius: 5px;
    /*padding: 5px;*/
}
.graybg{
    background-color: #ebebec;
}
.dgraybg{
    background-color: #CCC;
}
.w100ps{
    width: 98%;
}
.margin5updown{
    margin-top: 5px;
    margin-bottom: 5px;
}
#messcount, #mess_c  {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin: 0;
    padding: 0;
    font-size: x-small;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    background-color: red;
    box-shadow:  -2px -2px 5px 0px rgba(0, 0, 0, 0.9) inset, 2px 2px 5px 0px rgba(255, 150, 150, 0.9) inset;
    color: white;
}
#messcount {
    position: absolute;
    margin-top: -55px;
    margin-left: 100px;
    float: right;
}
#mess_c {

}
#newcatform {
    margin-top: 15px;
}
#namenewcat {
    min-width: 99%;
}
.message-block {
    max-width: 720px;
    min-width: 720px;
}
.message-title {
    border: thin dotted #333;
    padding: 5px;
    cursor: pointer;
}
.noviewed {
    font-weight: bold;
}
.viewed {
    
}
.new-status{
    background-color: #77d285;
}
.message-body {
    display: none;
}
.message-link {
    
}
#mess > a , #app > a, #moder > a,#userinfo {
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}
#moder {
    
}
#check, #save {
     margin: 10px;   
     /*height: 30px;*/
    }
.student{
    cursor: pointer;
    /*color: green;*/
    background-color: #ebebec;
    border: thin solid #bcbec0;
    border-radius: 5px;
    padding: 3px;
}
.green {
    background-color: palegreen !important;
}
.tcenter {
    text-align: center;
    margin: 0;
}
.datacheck {
    font-size: small;
    font-variant-position: super;
    float: right;
}
.wrong {
    color: red;
}
.good {
    color: green;
}
.blue {
    color: blue;
}
.coral {
    background-color: #f15b4e;
    color: #373c59;
}
.orange {
    color: darkgoldenrod !important;
}
.orange a {
    color: darkgoldenrod !important;
}
.fright{
    float: right;
}
.debug {
    color: blue;
    border: solid thin red;
    font-family: "Courier New", Courier, monospace;
    margin: 10px;
    padding: 10px;
}
.sortth {
    font-weight: bold;
    text-decoration: underline;
    color: #373c59;
    cursor: pointer;
}
.th {
    background-color: #4da9fd;
}
.stcount {
    color: blue;
    margin: 3px;
}
.appctrl, .userctrl  {
    border: thin dotted #373c59;
    background-color: #373c59;
    color: white;
    border-radius: 5px;
    max-width: 40%;
    padding: 3px;
    margin: 3px;
}
.appctrl > span, .userctrl > span {
    position: relative;
    top: -10px;
}

.appctrl {
    text-align: right;
    float: right;
}
.userctrl {
    text-align: left;
    float: left;
}
.moderate > a {
    /*font-size: small;*/
    line-height: 1.3em;
    cursor: pointer;
}
.bold{
    font-weight: bold;
}
#userinfoblock {
    display: none;
}
#apptypeblock {
    display: inline;
    float: right;
}
#content {
    /*width: 800px;*/
    box-sizing: border-box;
}
.editicon {
    float: right;
    padding: 5px;
}
.addicon {
    position: relative;
    /*top: 10px;*/
    padding: 5px;
}
.courseitem {
	display: flex;
	flex-flow: column nowrap;
  width: 500px;
  /* Optional */
  position: relative;
  margin: 5px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #4290e2;
  box-shadow: 4px 0px 10px rgba(0,0,0,0.5),
    -4px 0px 10px rgba(0,0,0,0.5),
    0px 4px 10px rgba(0,0,0,0.5),
    0px -4px 10px rgba(0,0,0,0.5);
  color: #fff;
  /*padding: 15px;*/
  /*box-sizing: content-box;*/
}
.courseitem > a {
    border-radius: inherit;
    text-decoration: none;
}
.courseimg{
        display: flex;
	width: 500px;
	height: 300px;
}
.courseitem img {
	object-fit: cover;
        width: 500px;
        height: 300px;;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
        margin: auto;

}
.courseitem > a > .title{
	/*position: relative;*/
        /*top: -300px;;*/
        display: block;
        position: absolute;
        margin: auto;
        width: 100%;
        height: 180px;
        padding-top: 25%;
        text-shadow: 3px 3px 3px black, 
            1px 0 1px #000, 
            0 1px 1px #000, 
            -1px 0 1px #000, 
            0 -1px 1px #000;
        text-align: center;
        color: white;
        font-size: 1.5em;
        font-weight: bold;
        z-index: 1;
}
.courseitem > a .note{
    text-align: left;
    padding: 10px;
    margin-bottom: 1em;
    /*position: relative;*/
    margin-bottom: 2.6em;
    bottom: 0px;
}
.courseitem > a .datecourse{
    text-align: center;
    color: white;
    font-family: sans-serif;
    background-color: #373c59;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.courseitem:hover .courseimg {
	filter: grayscale(100%);
}
.courseitem:hover .title {
    /*background-color: white;*/
    color: yellow;
}
.inactive {
    background-color:  #999;
}
.moderate {
    text-align: center;
    color: white;
    font-family: sans-serif;
    background-color: #f15b4e;
    position: absolute;
    bottom: 1.5em;;
    width: 100%;
    z-index: 2;
}
.moderate a {
    margin: 10px;
}


/* Оформление чекбокса на странице логина */
.custom-checkbox {
	position: relative;
	cursor: pointer;
	line-height: 24px;
}
.custom-checkbox input {
	position: absolute;
	left: -9999px;
}
.custom-checkbox-button {
	display: inline-block;
	margin: 0 15px;
	width: 50px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.5);
	height: 24px;
	position: relative;
	bottom: -4px;
	cursor: pointer;
}
.custom-checkbox-button:before {
	background: #fff;
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	position: absolute;
	top: -1px;
	left: -1px;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(44, 77, 138, 0.3), 0px 7px 8.55px 0.45px rgba(22, 44, 84, 0.15);
	        box-shadow: 0px 0px 1px 0px rgba(44, 77, 138, 0.3), 0px 7px 8.55px 0.45px rgba(22, 44, 84, 0.15);
	-webkit-transition: 0.2s;
	        transition: 0.2s;
}
.custom-checkbox-button:after {
	content: "";
	width: 12px;
	height: 12px;
	position: absolute;
	background: #1967c3;
	border-radius: 50%;
	top: 6px;
	left: 6px;
	-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.15);
	        box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.15);
	-webkit-transition: 0.2s;
	        transition: 0.2s;
}
.custom-checkbox.checked .custom-checkbox-button:before {
	left: 25px;
}
.custom-checkbox.checked .custom-checkbox-button:after {
	left: 32px;
	background: #1967c3;
}
/* конец Оформление чекбокса на странице логина */

.ochecked {
    background-image: url(../img/checked.png);
    background-repeat: no-repeat;
    background-position: 98% 96%;
}
.scandoc {
    display: block;
    float: right;
    z-index: 5;
    position: relative;
    right: 5px;
    bottom: 0px;
}
.copy-btn {
    cursor: pointer;
}
span.show-tooltip-text {
			display: none;
			position: absolute;
			font-size: 0.8em;
                        background-color: #ffffea;
                        border: #000000 solid thin;
                        border-radius: 5px;
			padding: 6px;
			padding-left: 12px;
			padding-right: 12px;
			color: #1a3070;
                        z-index: 99;
}
.icobtn {
    display: inline-block;
    cursor: pointer;
    width: 16px !important;
    height: 16px !important;
    background-image: url(../img/icons1.png);
    background-repeat: no-repeat;
    vertical-align: central;
}
.ibadduser {
    background-position-x: 0px;
    background-position-y: 0px;
}
.ibdeluser {
    background-position-x: -16px;
    background-position-y: 0px;
}
.ibeditcat {
    background-position-x: -128px;
    background-position-y: -16px;
}
.ibaddsubcat {
    background-position-x: -80px;
    background-position-y: -0px;
}
.ibaddcourse {
    background-position-x: 0px;
    background-position-y: -16px;
}
.ibdelcat {
    background-position-x: -32px;
    background-position-y: -16px;
}
.ibmale{
    background-position-x: -64px;
    background-position-y: 0px;
}
.iblock {
    background-position-x: 0px;
    background-position-y: -32px;
}
.ibunlock {
    background-position-x: -144px;
    background-position-y: -16px;
}
.ibfemale{
    background-position-x: -48px;
    background-position-y: 0px;
}
.ibgroup, .ibgroupoff {
    background-position-x: -32px;
    background-position-y: 0px;
}
.ibgroupon {
    background-position-x: -48px;
    background-position-y: -32px;
}
.ibgreen {
    display: inline-block;
    cursor: pointer;
    width: 16px !important;
    height: 16px !important;
    vertical-align: central;
}
.icobtn32 {
    display: inline-block;
    cursor: pointer;
    width: 32px !important;
    height: 32px !important;
    background-image: url(../img/icons2.png);
    background-repeat: no-repeat;
    vertical-align: central;
}
.ib32accept {
    background-position-x: 0px;
    position: relative;
    top: -4px;
}
.ib32reject {
    background-position-x: -32px;
    position: relative;
    top: 6px;
}
.ib32delete {
    background-position-x: -64px;
}
.ib32snils {
    background-position-x: -96px;
}
.ib32passport {
    background-position-x: -128px;
}
.ib32diplom {
    background-position-x: -160px;
}
.ib32greenlist {
    background-position-x: -192px;
}
.ib32work {
    background-position-x: -224px;
}
.newapp, .appcount {
    float: right;
    margin-right: 10px !important;
    /*z-index: 10;*/
}
img.newapp {
    position: relative;
    top: 5px;
}
.appcount {
    display: block;
    color: white;
    font-size: 8px;
    text-align: center !important;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0;
    top: 3px;  
}
.formrow{
    width: 100%;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    /*border: thin dotted red;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;*/
}
.formrow > p {
    margin: 0;
}
.formrow > label {
    flex: 1;
}
.formrow > input {
    flex: 2;
}
.date{

}
.tabfield input,  .tabfield select {
    order: 2;
}

.tabfield{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    /*margin: 5px;*/
    align-items: center;
}
.tabfield label {
    display: flex;
    order: 1;
    width: 45%;
    text-align: right;
    margin: 5px;
    justify-content: right;
}
.tabfield input[type="checkbox"], input[type="radio"] {
  order: 1;
  flex: none;
  width: auto;
  margin-left: 43%;
  }
  input[type="checkbox"] ~ label, input[type="radio"] ~ label {
  /*width: 20px;*/
  text-align: left;
  /*padding-left: 45%;*/
}
.cmes {
    display: block;
    text-align: center;
    margin: 10px;
}
#messenger{
    background-color: #FF7777;
    margin: 1%;
    width: 98%;
    border: 1px dotted #FF0000;
    border-radius: 5px;
    display: none;
    text-align: center;
}  
#setTable tr:nth-child(odd) {
    background-color: #929ebc;
}
#setTable {
    border-collapse: collapse;
}
#setTable table, #setTable th, #setTable td{
    border: thin solid #414042;
    display: table-cell;
    padding: 5px;
    margin: 0;
    text-align: center;
}
#setTable td:nth-child(2) input[type=text] {
    width: 4em;
}
#setTable td:nth-child(3) input[type=text] {
    width: 2em;
}
#setTable tr td:last-child{
    text-align: left;
}
#setTable tr td:first-child {
    text-align: right;
}
.adm {
    display: none;
}
.adm input[type=submit] {
    float: right;
    padding: 5px;
    margin: 5px;
}
#admmenu {
    list-style-type: none;
    margin-left: 0; 
    padding-left: 0;
    min-width: 320px;
}
#admmenu .fa-light {
    margin-right: 10px;
}
#admmenu li {

    
}
#admmenu li span:nth-child(1){
    display: block;
    padding: 7px;
    width: 96% !important;
}
#admmenu li:nth-child(even) {
    background-color: #bcbec0;
}
#admmenu li span:nth-child(1):hover {
    background-color: #fabfb7;
}
#admmenu li :hover .adm{
    background-color: #ebebec;
}

#admmenu li span:first-child{
    cursor: pointer;
    font-weight: 400;
}
.closeset {
    display: none;
    float: right;
    margin-top: -1.7em;
    border: thin solid #6d6e71;
    background-color: #939598;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    cursor: pointer;    
}
.warn {
    display: none;
    text-align: center;
    background-color: #fabfb7;
    border: thin solid #f15b4e;
    border-radius: 5px;
    margin-bottom: 15px;
}


/* Модальное окно */
.modal_div {
   width: 400px;
   height: auto; /* Рaзмеры дoлжны быть фиксирoвaны */
   border-radius: 8px;
   border: 2px #000 solid;
   background: #fff;
   position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
   top: 20%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
   left: 50%; /* пoлoвинa экрaнa слевa */
   margin-top: -150px;
   margin-left: -200px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
   display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
   opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
   z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
   padding: 20px 10px;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_close {
   width: 21px;
   height: 21px;
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   text-align: center;
   display: block;
}
/* Кнoпкa зaкрыть для тех ктo в тaнке) */
.modal_ok {
   width: 40%;
   position: absolute;
   bottom: 10px;
   left: 50%;
   cursor: pointer;
   display: block;
   margin-left: -20%;
}
/* Пoдлoжкa */
#overlay {
   z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
   position:fixed; /* всегдa перекрывaет весь сaйт */
   background-color:#000; /* чернaя */
   opacity:0.7; /* нo немнoгo прoзрaчнa */
   -moz-opacity:0.7; /* фикс прозрачности для старых браузеров */
   filter:alpha(opacity=70);
   width:100%;
   height:100%; /* рaзмерoм вo весь экрaн */
   top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
   left:0;
   cursor:pointer;
   display:none; /* в oбычнoм сoстoянии её нет) */
}

/* список курсов, Дерево*/
.treeline, .treeline ul, .treeline li {
   margin: 0; padding: 0; line-height: 1.5; list-style: none;
}
.treeline ul {margin: 0 0 0 15px; /* отступ вертикальной линии */}
.treeline > li:not(:only-child), .treeline li li {
   position: relative;
   padding: 3px 0 0 20px; /* отступ текста */
}
/* Стиль вертикальной линии */
.treeline li:not(:last-child) { border-left: 1px solid #000;}
/* Стили горизонтальной линии*/  
.treeline li li:before, .treeline > li:not(:only-child):before {
   content: ""; position: absolute; top: 0; left: 0;
   width: 1.1em; height: .9em; border-bottom:1px solid #000;
}
/* Вертикальная линия последнего пункта в списка */  
.treeline li:last-child:before {
   width: calc(1.1em - 1px); border-left: 1px solid #000;
}
.treeline {
   color: #666;
}
.treeline .rootcat{
   color: #000;
   font-weight: bold;
}
#coverimg{
    display: block;
    width: 300px;
    height: 180px;
    background-color: #999;
    background-position: center center;
    background-image: url(/img/photo.png);
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid #555;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    margin: auto;
}

#predmet {
    max-width: 500px;
}
.hidden{
    display: none;
}
.brorder-bottom {
    border-bottom: thin solid;
    margin-bottom: 10px;
}
.userlist {
    display: block;
    width: 98%;
}
div[id^='content-'] span.userlist:nth-child(odd) {
    background-color: #bcbec077;
}
.groupctrl {
    display: block;
    float: right;
    margin-left: 5px;
    /*margin-right: 5px;*/
    border-left: thin #333 solid;
    padding-left: 5px;
    padding-right: 5px;
}

#error_messages {
    display: none;
    background-color: #f15b4e;
    border: thin solid red;
    border-radius: 5px;
    padding: 10px;
    color: white;
    text-align: center;
    margin: 5px;
}
.errmess {
    display: none;
    background-color: #f15b4e;
    border: thin solid red;
    border-radius: 5px;
    padding: 10px;
    color: white;
    text-align: center;
    margin: 5px;
}
.selectgroup {
    display: none;
    border: thin solid #373c59;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 3px #373c5977;
    position: absolute;
    z-index: 10;
    background-color: #ebebec;
    padding: 5px;
    font-size: 0.8em;
}
.cross {
    width: 100%;
    display: block;
}
.pttl, .pager {
    text-align: center;
}
.str {
    border: thin solid #555555;
    border-radius: 3px;
    padding: 0 5px 0 5px;
}
.str:hover{
    background-color: ;
}
.str.actpg {
    background-color: #f05a4e;
    font-weight: bold;
}
.pager > a {
    text-decoration: none;
    display: inline-block;

    height: 100%;
    margin: 0;
}
.cross:nth-child(even) {
    background-color: #bcbec0;
}
input[type=submit].modal_ok {
    position: relative;
    margin-top: 15px;
}
.printctrl {
    display: none;
    border: thin solid #373c59;
    border-radius: 5px;
    box-shadow: 2px 2px 3px 3px #373c5977;
    position: absolute;
    z-index: 10;
    background-color: #ebebec;
    padding: 5px;
    font-size: 0.8em;
}
.printctrl span {
    display: block;
    width: 100%;
}
.printctrl span:nth-child(even) {
    background-color: #bcbec0;
}
.shortfield{
    width: 4em;
}
.docsgrouplist li {
    display: block;
    padding: 5px;
    margin: 1px;
    border: thin solid #555;
    margin-bottom: 5px;
    /*cursor: pointer;*/
}
.docsgrouplist li:nth-child(even) {
    background-color: #bcbec077;
}
.docsgrouplist li:hover {
    background-color: #fabfb777;
}
#pozprint {
    margin-top: 15px;
}
#reason {
    width: 98%;
}
.userinfoblock {
    display: table;
    list-style: none;
    margin: 0;
    padding: 0;
    border: darkgray solid thin;
}
.userinfo {
    display: table-row;
    width: 100%;
    list-style: none;
    margin: 0;
}
.userinfo:hover {
    background-color: rgb(200,200,220);
}
.userinfo li {
    display: table-cell;
    border: darkgray solid thin;
    padding: 3px;
}
/* Стили для вкладок =================================================*/
.tabs {
    font-size: 0;
    min-width: 600px;
  }

  .tabs > input[type="radio"] {
    display: none;
  }

  .tabs > div {
    /* скрыть контент по умолчанию */
    display: none;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    font-size: 16px;
  }

  /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
  /* такие стили генерируются в коде отображения групп #tab-btn-{id группы}:checked~#content-{id группы}*/
  #tab-btn-1:checked~#content-1,
  #tab-btn-2:checked~#content-2,
  #tab-btn-3:checked~#content-3,
  #tab-btn-4:checked~#content-4,
  #tab-btn-5:checked~#content-5,
  #tab-btn-6:checked~#content-6,
  #tab-btn-7:checked~#content-7,
  #tab-btn-8:checked~#content-8 {
    display: block;
  }

  .tabs > label {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    padding: 2px 8px;
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
    cursor: pointer;
    position: relative;
    top: 1px;
  }

  .tabs > label:not(:first-of-type) {
    border-left: none;
  }

  .tabs > input[type="radio"]:checked+label {
    background-color: #373c59;
    color: white;
    border-bottom: 1px solid #f00;
  }
/* конец стилей для вкладок =================================================*/
@media all and (max-width: 1023px) {
.header p:nth-child(2){
    font-size: small;
}
.courseitem {
		width: 350px;
	}
	.courseimg{
		width: 350px;
		height: 210px;
	}
	.courseitem img {
			width: 350px;
			height: 210px;
	}
        .courseitem > a > .title{
            height: 157px;
            font-size: 1em;
            font-family: sans-serif;
        }
}

@media all and (max-width: 800px) {
.header p:nth-child(2){
    font-size: small;
}
#region{
    max-width: 500px;
}
}

@media all and (max-width: 360px) {
    body {
        font-family: sans-serif;
    }
    .modal_div {
       width: 300px;
       top: 50px;
       margin-left: -160px; /* oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo */
       padding: 5px;
    }
    .modal_ok{
        margin-top: 5px;
        display: block;
    }
    .navigation {
    flex-flow: column wrap;
    padding: 0;
    }
    .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    }
    .navigation li:last-of-type a {
    border-bottom: none;
    }
    .header p:nth-child(2){
    display: none;
    }
    #messcount {
        margin-top: -35px;
        margin-left: 250px;
    }
    .date{
        width: 70px;
    }
    #snils {
        width: 100px;
    }
    .courseitem {
                    width: 300px;
            }
    .courseimg{
            width: 300px;
            height: 200px;
    }
    .courseitem img {
                    width: 300px;
                    height: 200px;
    }
    .courseitem > a > .title{
            height: 150px;
            font-size: 1em;
            font-family: sans-serif;
            font-weight: normal;
            padding-top: 15%;
        }
    .tabfield input{
        max-width: 120px;
    }
    .tabfield input[type=file]{
        max-width: 150px;
    }
    .js-select2 {
        max-width: 320px !important;
    }
    .tabfield label {
        width: 40%;
    }
    .tabfield input[type="checkbox"], input[type="radio"] {
      margin-left: 43%;
    }
    .courseitem > a .note{
        font-family: sans-serif;
    }
    .message-block {
        max-width: 100%;
        min-width: 99%;
    }
    .appctrl, .userctrl  {
        max-width: 97%;
        min-width: 97%;
        padding: 3px;
        margin: 3px;
        text-align: center;
        float: none;
    }
    .select2 {
        width: 340px;
    }
    #predmet {
        width: 340px;
    }
    .formrow {
        width: 355px !important;
    }
    .container {
        width: 360px !important;
    }
    #dpp {
        width: 340px !important;
    }
    /*.treeline > li > ul > li ul > li:nth-child(odd) {
        background-color: #CCC7;
    }*/
    .tabs {
        min-width: 350px;
        width: 350px;
        margin: 5px;
      }
    input[type=submit].modal_ok {
        width: 80%;
        left: 90px;
    }
    .selectgroup {
        right: 105px;
    }
    .printctrl {
        right: 125px;
    }
    #setTable {
        font-size: 0.7em;
    }
    #suserform{
        width: 340px;
    }
    .cmes {
        min-width: 98%;
        padding: 5px;
    }
}