@media only screen and (min-width: 1600px) {
.modalDialog > div {width:800px; margin:0 0 0 25%; top:10rem; padding:2rem; }
}

@media only screen and (max-width:1440px) {
.modalDialog > div {width:800px; margin:0 0 0 22%; top:10rem; padding:2rem;}
}

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

@media only screen and (max-width: 1280px) {
.modalDialog > div {width:800px; margin:0 0 0 20%; top:8rem; padding:2rem; }
}

@media only screen and (max-width: 1152px) {
header .body{width:94%; max-width:auto;}
footer .body{width:94%; max-width:auto;}
header .body #datepicker{padding:3rem 0 0 0; margin:0 0 0.7rem 15%; width:85%; max-width:720px;}
section.navigation .body {width:94%; max-width:auto;}
section.content-page .body {width:94%; max-width:auto;}
.modalDialog > div {width:800px; margin:0 0 0 15%; top:2rem; padding:2rem;  overflow: scroll; height: 95%;}
}

@media only screen and (max-width: 1024px) {
header .body #datepicker{margin:0 0 0.7rem 12%; width:88%; max-width:720px;}
#cssmenu #main-menu {display:none;}
#cssmenu #deskstop-menu {display:none;}
/*----------------start MENU-----------------*/
nav{width:100%; background:#82b73e; border-radius:5px;}
#cssmenu{width:100%; height:45px;}
#cssmenu ul{width:100%; display:none; background:none; margin:2.8rem 0 0 0; line-height:2.7rem;}
#cssmenu ul li{width:100%; border-top:1px solid #a8cd78;}
#cssmenu ul li:hover{background:#6c9f2a;}
#cssmenu > ul > li{float:none; margin:0;}
#cssmenu > ul > li > a{padding:0;}
#cssmenu #head-mobile{display:block; padding:0px; color:#ffffff; font-size:12px; font-weight:700;}
.button{ /*top:293px;*/ width:94%; height:45px; position:absolute; left:2rem; cursor:pointer; z-index: 1000; border:0px solid #000000;}
.button:after{position:absolute; top:22px; right:20px; display:block; height:3px; width:28px; border-top:3px solid #fff; border-bottom:3px solid #fff; content:''}
.button:before{position:absolute; top:16px; right:20px; display:block; height:3px; width:28px; background:#fff; content:'';
-webkit-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;}
.button.menu-opened:after{top:23px; border:0; height:3px; width:25px; background:#ffffff;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transition:all .3s ease;
-ms-transition:all .3s ease;
transition:all .3s ease;}
.button.menu-opened:before{top:23px; background:#ffffff; width:25px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);}
#cssmenu .submenu-button{position:absolute; z-index:10099; right:0; top:0; display:block; height:45px; width:100%; cursor:pointer;}
#cssmenu .submenu-button.submenu-opened{background:none;}
#cssmenu .submenu-button:after{position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#ffffff; content:''}
#cssmenu .submenu-button.submenu-opened:after{background:#fff;}
#cssmenu .submenu-button:before{position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#ffffff; content:''}
#cssmenu .submenu-button.submenu-opened:before{display:none;}
#cssmenu ul ul .submenu-button{height:45px; width:100%;}
#cssmenu ul ul .submenu-button:after{top:23px; right:13px;}
#cssmenu ul ul .submenu-button:before{top:20px; right:16px;}
#cssmenu ul ul .submenu-button:after{position:absolute; top:22px; right:19px; width:8px; height:2px; display:block; background:#ffffff; content:''}
#cssmenu ul ul .submenu-button.submenu-opened:after{background:#000000;}
#cssmenu ul ul .submenu-button:before{position:absolute; top:19px; right:22px; display:block; width:2px; height:8px; background:#ffffff; content:''}
/*----------------END MENU-----------------*/
section.content-page .body .left-content{margin:0 0 2rem 0; width:100%;}
section.content-page .body .right-content{width:100%; margin:3rem 0 0 0;}
section.content-page .body .right-content .notebook {padding:0 0 0 1rem; margin:0; width:55%;}
section.content-page .body .right-content .usefull-links{margin:0 0 0 5%; width:40%;}
.modalDialog > div {width:800px; margin:0 0 0 10%; top:5rem; padding:2rem; overflow: scroll; height: 94%;}
}

@media only screen and (max-width: 991px) {
.modalDialog > div {width:800px; margin:0 0 0 9%; top:5rem; padding:2rem; overflow: scroll; height: 94%;}
header .body .disk-info {width: 100%; margin-bottom:1rem;    text-align: center;}
}

@media only screen and (max-width: 960px) {
header .body #datepicker{margin:0 0 0.7rem 10%; width:90%; max-width:720px;}
.modalDialog > div {width:800px; margin:0 0 0 8%; top:5rem; padding:2rem; overflow: scroll; height: 94%;}
}

@media only screen and (max-width: 900px) {
header .body.body-index #datepicker {margin:0 0 0.7rem 6%; width:100%; max-width:720px;}
/*header .body #datepicker{margin:0 0 0.7rem 8%; width:100%; max-width:720px;}*/ 
header .body #datepicker{margin: 0 0 0.7rem 3%;  width: 96%;  max-width: 100%; }
.button{left:1.6rem;}
.modalDialog > div {width:800px; margin:0 0 0 5%; top:5rem; padding:2rem;}
header .body .disk-info { display:none;}
header .body .exit {position:relative; width:100%;}
section.message-page .body {
    width:100%;
}
section.content-page .body .right-content .notebook  {display:none;}
section.content-page .body .right-content .usefull-links {
    margin: 0;
    width: 100%;
}

}

@media only screen and (max-width: 800px) {
section.login-page{margin:6rem 0;}
section.login-page .body {width:100%; max-width:600px;}
section.message-page .body {width:100%; max-width:600px;}
header .body #datepicker{margin:0 0 0.7rem 2%; width:98%; max-width:720px;}
.modalDialog > div {width:600px; margin:0 0 0 12%;  top:2rem; padding:2rem; overflow: scroll; height: 94%;}
body {padding: 0 .5rem;  background: #fff;}

section.content-page .body .right-content .notebook .inner-folder img {  width: 8%;}
}

@media only screen and (max-width: 768px) {
section.content-page .body .right-content{width:100%; margin:0rem 0 0 0;}
header .body #datepicker{margin:0 0 0.7rem 0; width:100%; max-width:720px;}
section.content-page .body .right-content .notebook {padding:0 0 0 1rem; margin:0; width:100%;}
section.content-page .body .right-content .notebook .main-folder {display: none;}
section.content-page .body .right-content .notebook .inner-folder {display: none;}
.content-page .body .right-content .usefull-links{margin:0rem 0 0 0!important; width:100% !important;}
.button{left:1.4rem;}
.modalDialog > div {width:600px; margin:0 0 0 2%; top:2rem; padding:1rem; overflow: scroll; height: 94%;}
header .body .disk-info {display:none;}
}

@media only screen and (max-width:700px){
section.login-page .body {width:100%; max-width:500px;}
section.message-page .body {width:100%; max-width:500px;}
/*--------------------да станат 2 календара------------------------------*/
header .body #datepicker{padding:0; margin:0 0 0.7rem 20%; width:80%; max-width:720px; display:none;}
header .body #datepicker_mobile{padding:3rem 0 0 30%; margin:0 0 0.7rem 0; width:100%; max-width:auto; display:block;}

.button{left:1.3rem; /*top:272px;*/ }
.modalDialog > div {width:600px; margin:0 0 0 7%; top:10rem; padding:2rem;}
.home-form .ck.ck-toolbar {display:none!important;}

section.content-page .body .left-content .article a.grey {
    width:100%;
}

section.content-page .body .left-content .article a.grey {  width:100%;} 
section.content-page .body .left-content .article span.date {    width:80%;    font-size:0.875rem; }

button.reg-btn.edit{width:100%;}
button.reg-btn.edit:hover{background:#6c9f2a;}


button.del-btn{ display:none; cursor: pointer; float:left; width:100%; margin-top:1rem; }

#check_mobile{display:block;}
#check_deskstop{display:none;}

#cssmenu > ul > li:last-child {
    width: 100%;
    }


}


@media only screen and (max-width: 640px) {
footer .body{width:92%; max-width:auto;}
.modalDialog > div {width:500px; margin:0 0 0 2%; top:2rem; padding:1rem; overflow: scroll; height: 94%;}
}

@media only screen and (max-width: 600px) {
header .body .exit {   width:100%; position: relative;}
header .body #datepicker_mobile{    padding: 0.5rem 0 0 0; margin-top: .5rem;}
.button{left:1.1rem; /*top:272px;*/}
.modalDialog > div {width:500px; margin:0 0 0 2%; top:2rem; padding:1rem; overflow: scroll; height: 94%;}
.search input, .search  {position: relative; width: 81.8%; height:40px; padding: 0; display: block; float: left;}
.search fieldset { width:100%; display:block; padding:0 0 0 8px;}

@media only screen and (max-width: 480px) {
body {font-size:0.875rem; /* 1rem = 16px */ line-height:1.8rem; padding: 0 .5rem;  background: #fff;}

section.login-page .body {width:100%; max-width:400px;}
input[type=text], input[type=password]{font-size:1rem;}
button.reg-btn{font-size:1.45rem;}
textarea{font-size:1rem;}
section.message-page .body {width:100%; max-width:400px;}
.btn.btn-primary {padding:0.6rem 1.5rem; font-size:1rem;}
section.content-page .body .left-content .article span.date{padding:0; margin:0; float:left; width:80%; display:block; text-align:left; font-size:0.875rem; color:#8e908c;}
.button{left:0.8rem; /*top:266px;*/}
.modalDialog > div {width:90%; margin:0 0 0 2%; top:2rem; padding:1rem; overflow: scroll; height: 94%;}


button.reg-btn.edit{width:100%!important;}
button.reg-btn.edit:hover{background:#6c9f2a;}


button.del-btn{ display:none; cursor: pointer; float:left; width:100%; margin-top:1rem; }

}

@media only screen and (max-width: 360px) {
footer .body{width:90%; max-width:auto;}
section.login-page .body {width:100%; max-width:280px;}
section.message-page .body {width:100%; max-width:280px;}
header .body #datepicker_mobile{padding:0.5rem 0 0 7.5%;}
.modalDialog > div {width:90%; margin:0 0 0 4%; top:2rem; padding:1rem; overflow: scroll; height: 94%;}
}

@media only screen and (max-width: 320px) {
header .body #datepicker_mobile{padding:0rem 0 0 2%;}
.button{left:0.6rem; /*top:266px*/;}
.modalDialog > div {width:300px; margin:0 0 0 2%; top:2rem; padding:1rem; overflow: scroll; height: 94%;}
}