@charset "UTF-8";

* { margin: 0; padding: 0; border: none; outline: none; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: auto; box-sizing: border-box; }
aside, button, h1, h2, h3, header, fieldset, footer, form, label, main, nav, picture, section, textarea, ul { display: block; }
html, body { width: 100%; min-width: 360px; text-rendering: optimizeLegibility; }
body { font-family: 'Montserrat', Arial, Verdana, sans-serif; font-optical-sizing: auto; font-size: 16px; font-weight: 400; font-style: normal; line-height: 1.6; background: #30373a; color: #b4bbc0; overflow-y: scroll; }
::selection { background: rgba(0,15,17,0.6); color: #fff; }
::placeholder { color: #91a2ac; font-weight: 400; opacity: 1; transition: 0.4s ease-out; }
:focus::placeholder { opacity: 0; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background-color: rgba(47,57,67,0.8); }
h1, h2, h3 { line-height: 1; font-weight: 700; text-transform: uppercase; color: #fff; }
h1 { border-bottom: 1px solid #596569; }
h1 + .desc span { }
a { text-decoration: none; transition: 0.4s ease color, 0.5s ease background-color; }
picture { overflow: hidden; }
picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* PAGE BASE */
.wrapper { position: relative; box-shadow: 0 0 0 1px #596569; background: #262d2f; overflow: hidden; }
.wrapper > section { min-height: 100vh; background: #30373a; transition: 0.8s ease opacity; overflow: hidden; }
footer { position: relative; background: #30373a; color: #596569; border-top: 1px solid #596569; overflow: hidden; }
header { position: fixed; top: 0; left: 0; right: 0; }
header > div { background: #30373a; border-bottom: 1px solid #596569; overflow: hidden; }
header .get_aside { float: left; border-right: 1px solid #596569; }
header .get_aside div { color: #fff; text-align: center; cursor: pointer; }
header nav { float: right; }
header nav > a { float: right; text-align: center; color: #fff; font-weight: 600; border-left: 1px solid #596569; }
header nav div { float: left; }
header nav div a { float: left; text-align: center; color: #fff; border-left: 1px solid #596569; }
aside { position: fixed; bottom: 0; background: #30373a; overflow: hidden; }
aside > div { position: absolute; top: 10px; bottom: 10px; left: 10px; right: 10px; scrollbar-color: #596569 #262d2f; overflow: auto; }
aside > div > div { overflow: hidden; }
aside ul { list-style: none; display: block; }
.menu { font-weight: 500; }
.menu a,
.menu div { display: block; color: #b7bec2; cursor: pointer; transition: 0.4s ease color; }
.menu a:hover,
.menu a:focus,
.menu div:hover,
.menu div:focus { color: #fff; }
.menu > .blank { border-top: 1px solid #596569; height: 20px; margin-top: 20px; }
.menu .top > a,
.menu .top > div { height: 44px; line-height: 44px; font-size: 16px; font-weight: 700; text-transform: uppercase; }
.menu .top.active,
.menu .top.active > a,
.menu .top.active > div { color: #fff; }
.menu .sub { padding: 10px 0 20px 20px; font-size: 16px; display: none; }
.menu .sub  > .blank { border-top: 1px solid #596569; height: 10px; margin-top: 10px; }
.menu .sub_item > div span { float: right; font-size: 16px; color: #939a9d; }
.menu .sub_item.active { color: #fff; }
.menu .sub a { height: 34px; line-height: 34px; }
.menu .top.active span { color: #fff; }

/* LOGIN BOX */
.login_form { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: 360px; display: flex; align-items: center; justify-content: center; }
.login_form > div { width: 360px; }
.login_form input[type="submit"] { margin-top: 30px; }

/* FORMS */
/* labels */
label { position: relative; width: 100%; min-height: 40px; padding: 1px; margin-top: 20px; font-size: 16px; overflow: hidden; }
label.nobott { margin-bottom: -20px; }
label.notop { margin-top: 0; }
label.smtop { margin-top: 10px; }
label > span { display: block; min-height: 20px; line-height: 20px; font-size: 14px; }
label > span:first-child { margin-bottom: 5px; }
label > span:last-child { margin-top: 5px; }
label div.act { position: absolute; top: 25px; right: 0; width: 40px; height: 40px; line-height: 40px; font-size: 22px; cursor: pointer; }

/* inputs */
select,
textarea,
input[type="text"],
input[type="password"] { width: 100%; background: #2a3133; color: #fff; font-weight: 400; font-family: inherit; font-size: inherit; box-shadow: 0 0 0 1px #596569; }
select,
input[type="text"],
input[type="password"] { height: 40px; line-height: 40px; padding: 0 10px; }
textarea { min-height: 127px; max-height: 500px; padding: 10px; resize: vertical; }
textarea + span { height: 15px; }
input[type="text"].readonly { box-shadow: none; background: transparent; font-weight: 600; padding: 0; }

/* inputs checkbox */
.check_line { min-height: 30px; cursor: pointer; }
.check_line input + span { float: left; width: 55px; height: 30px; padding: 3px; margin-right: 15px; background: #262d2f; }
.check_line input + span span { float: left; width: 24px; height: 24px; margin-left: 0; background: #596569; transition: 0.5s ease margin-left, 0.5s ease background-color; }
.check_line input + span + span { margin-top: 5px; transition: 0.5s ease color; overflow: hidden; }
.check_line input:checked + span span { float: left; width: 24px; height: 24px; margin-left: 25px; background: #009461; }
.check_line.check_delete input:checked + span span { background: #a2002c; }
.check_line:hover input + span + span,
.check_line input:checked + span + span { color: #fff; }

/* buttons */
.form_buttons { margin-top: 40px; display: flex; justify-content: space-between; }
.form_buttons input[type="submit"],
.form_buttons input[type="reset"] { width: calc(50% - 20px); }
input[type="submit"] { background: #008156; color: #fff; }
input[type="submit"].del { background: #a2002c; }
input[type="submit"],
input[type="reset"] { width: 100%; height: 60px; line-height: 60px; text-align: center; font-family: inherit; font-weight: 700; font-size: 20px; text-transform: uppercase; cursor: pointer; transition: 0.5s ease all }
input[type="reset"] { background: #2a3133; color: #596569; }
input[type="submit"]:hover { background: #00b173; }
input[type="reset"]:hover { background: #1d2223; color: #fff; }
input[type="submit"].del:hover { background: #c50037; }








/* ==================================================================== */

@media all and (max-width: 600px) {

    * { cursor: default !important; }
    h1 { padding-bottom: 10px; margin-bottom: 40px; font-size: 24px; }
    h1 + .desc { margin: -20px 0 50px; font-size: 14px; }

    /* PAGE BASE */
    .wrapper > section { padding: 100px 30px 100px; }
    .wrapper > section.fade { opacity: 0.4; }
    footer { height: 60px; line-height: 60px; margin-top: -60px; text-align: center; font-size: 14px; }
    header > div { height: 60px; }
    header .get_aside { width: 60px; height: 60px; }
    header .get_aside div { width: 60px; height: 60px; line-height: 60px; font-size: 30px; }
    header nav > a { height: 60px; line-height: 60px; padding: 0 10px; }
    header nav div a { width: 60px; height: 60px; line-height: 60px; font-size: 20px; }
    aside { top: 60px; left: -100%; width: 100%; border-right: 1px solid #596569; transition: 0.8s ease left; border-top: 1px solid #596569; }
    aside.show { left: 0; }
    aside > div > div { padding: 30px 20px 30px 30px; }
    .menu a,
    .menu div { color: #d5dce0; }
    .menu .top > a,
    .menu .top > div { font-size: 18px; }

    /* login box */
    .login_form > div { padding: 30px; }

}

/* -------------------------------------------------------------------- */
@media all and (min-width: 601px) and (max-width: 1599px) {

    h1 { padding-bottom: 12px; margin-bottom: 50px; font-size: 30px }
    h1 + .desc { margin: -30px 0 50px; }

    /* PAGE BASE */
    .wrapper { margin: 0 auto; }
    .wrapper > section { padding: 130px 80px 130px; }
    .wrapper > section.fade { opacity: 0.4; }
    footer { height: 80px; line-height: 80px; text-align: center; margin-top: -80px; font-size: 14px; }
    header > div { height: 80px; margin: 0 auto; }
    header .get_aside { width: 80px; height: 80px; }
    header .get_aside div { width: 80px; height: 80px; line-height: 80px; font-size: 40px; }
    header nav > a { height: 80px; line-height: 80px; padding: 0 12px; }
    header nav div a { width: 80px; height: 80px; line-height: 80px; font-size: 22px; }
    aside { top: 80px; left: -500px; width: 500px; border-right: 1px solid #596569; transition: 0.8s ease left; border-top: 1px solid #596569; }
    aside.show { left: 0; }
    aside > div > div { padding: 40px 30px 40px 40px; }

    /* buttons */
    .form_buttons { margin-top: 40px; display: flex; justify-content: space-between; }
    .form_buttons input[type="submit"],
    .form_buttons input[type="reset"] { width: calc(50% - 20px); }

    @media all and (max-width: 1100px) {
        * { cursor: default !important; }
    }

}

/* -------------------------------------------------------------------- */

@media all and (min-width: 1600px) {

    h1 { padding-bottom: 15px; margin-bottom: 60px; font-size: 36px; }
    h1 + .desc { margin: -40px 0 60px; }

    /* PAGE BASE */
    .wrapper { width: 1550px; padding-left: 400px; margin: 0 auto; }
    .wrapper > section { padding: 150px 60px 170px; }
    footer { height: 90px; line-height: 90px; padding-left: 60px; margin-top: -90px; }
    header > div { width: 1550px; height: 90px; margin: 0 auto; }
    header .get_aside { display: none !important; }
    header nav > a { height: 90px; line-height: 90px; padding: 0 20px; }
    header nav div a { width: 90px; height: 90px; line-height: 90px; font-size: 26px; }
    aside { top: 91px; left: calc(50% - 775px); width: 400px; border-right: 1px solid #596569; }
    aside > div > div { padding: 30px; }



}