.main h3 {
    color: #500000;
    font-size: 30px;
    padding-left: 20px;
}

.main ul {
    font-size: 20px;
}

/* Navigations */
.nav {
    background-color: #d1f7ff;
    position: fixed;
    width: 280px;
    min-height: 100vh;
    left: -230px;
    z-index: 10;
    transition: all .2s;
}

.nav-open {
    left: -100px;
    transition: all .2s;
}

.nav ul.main {
    padding: 0px;
}

.nav .main li {
    background-color: #e8fbff;
    list-style: none;
    float: right;
    width: 250px;
    position: relative;
}

.nav .main li a,
.nav .main li .link {
    padding-left: 80px;
    background-color: #d1f7ff;
    height: 50px;
    display: block;
    font-size: 23px;
    transition: all .5s;
}

.nav .main li a:hover,
.nav .main li .link:hover {
    text-decoration: none;
    background-color: #e8fbff;
    transition: all .2s;
    cursor: pointer;
}

.nav img.icon {
    height: inherit;
    float: right;
    padding: 5px;
}

/* sub nav */
ul.sub {
    position: absolute;
    z-index: -10;
    left: 255px;
    padding: 0px;
    top: 0px;
    opacity: 0;
    width: 0px !important;
    overflow-x: hidden;
    transition: all .5s 0.1s;
}

ul.sub:hover,
.nav .main li a:hover + .sub,
.nav .main li .link:hover + .sub {
    opacity: 1;
    width: 200px !important;
    transition: all .3s;
}

ul.sub li {
    width: 200px !important;
    background-color: #e8fbff;
    list-style: none;
    position: relative;
    margin-top: .1px;
}

ul.sub li a,
ul.sub li .link {
    padding: 5px 10px !important;
    background-color: #e8fbff !important;
    height: auto !important;
    width: 200px;
    border-bottom: 1px solid #c9e7ff;
    font-size: 17px !important;
    transition: all .3s;
}

ul.sub li a:hover,
ul.sub li .link:hover {
    text-decoration: none;
    background-color: #fcfdff !important;
    transition: all .1s;
    cursor: pointer;
}

/* All blocks */
header,
.content,
footer {
    padding-left: 50px;
    min-width: 260px;
}

/* Header */
header {
    background-color: #c9e7ff;
    position: absolute;
    height: 80px;
    width: 100%;
}

header h1 {
    margin-left: 10px;
    font-size: 35px;
    color: #002b51;
}

header .title {
    color: #500000;
}

/* Links */
.links {
    background-color: #ddf8ff;
    overflow-y: hidden;
    transition: all .2s;
    border-bottom: 1px solid #002b51;
    border-top: 1px solid #002b51;
    padding: 3px 0px;
}

.links a {
    display: block;
    float: left;
    padding: 5px 10px;
    border-right: 1px solid #002b51;
}

.links a:last-child {
    border-right: none;
}

.links a:hover {
    background-color: #effaff;
    text-decoration: none;
    transition: all .2s;
}

/* Content */
.content {
    background-color: #fcfdff;
    min-height: 98vh;
    z-index: ;
    padding-top: 80px;
}

/* Footer */
footer {
    width: 100%;
    bottom: 0px;
    background-color: #ededed;
    min-height: 1vh;
}

footer .copyright {
    display: block;
    text-align: center;
    color: #adadad;
}

footer .copyright a {
    color: #adadad;
}

/* Other */
.clear {
    clear: both;
}

/* Filter */
.filter_win {
    overflow: auto;
}

.filter {
    min-width:
}

.filter-open {
    min-width: 1075px;
}

.filter {
    padding: 5px 10px;
    background-color: #ddf8ff;
    height: 37px;
    overflow-y: hidden;
    transition: all .2s;
}

.filter-open {
    height: 245px;
    transition: all .2s;
}

.filter label {
    font-size: 20px;
    color: #002b51;
    padding-right: 10px;
}

.filter input[type='date'],
.filter input[type='month'],
.filter input[type='text'] {
    padding: 2px;
    border: 1px solid #002b51;
    border-radius: 3px;
    width: 300px;
    margin-bottom: 2px;
    margin-bottom: 2px;
}

.filter input[type='month'] {
    width: 150px;
}

.filter input[type='date']:focus,
.filter input[type='month']:focus,
.filter input[type='text']:focus {
    border-color: #c1f7ff;
}

.filter a.button,
.filter input[type='submit'] {
    border: 1px solid #002b51;
    color: #002b51;
    border-radius: 3px;
    padding: 1px 20px;
    background-color: #e8fbff;
    margin-top: 15px;
    transition: all .2s;
    margin: 3px 5px;
}

.filter a.button:hover,
.filter input[type='submit']:hover {
    border: 1px solid #004d91;
    background-color: #d6f7ff;
    text-decoration: none;
    transition: all .2s;
}

.filter a.button {
    padding: 3px 20px;
}

.filter .block {
    border: 1px solid #002b51;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px;
    float: left;
}

.filter .block .title {
    font-size: 15px;
    color: #500000;
}

.filter .block .label {
    color: #0064bc;
    font-size: 13px;
}

.filter .block input:checked + .label {
    color: #500000;
}

#filter_open {
    cursor: pointer;
    font-size: 20px;
}

.admin img.icon,
.personal img.icon,
#filter_open img.icon {
    height: 20px;
    transition: all .2s;
}

.admin img.up,
.personal img.up,
#filter_open img.up {
    transform: rotate(180deg);
    transition: all .2s;
}

/* Table */
.table {
    width: 100%;
    padding: 10px 20px;
    overflow-x: auto;
}

.table table {
    width: 100%;
}

.table a.asc {
    display: block;
    text-decoration: none;
}

.table th,
a.asc {
    font-size: 15px;
    color: #002b51;
    transition: all .2s;
    padding: 2px 3px;
}

.table tr td:first-child {
    text-align: center;
    width: 70px;
}

.table td a {
    display: block;
}

.table td img.icon {
    height: 30px;
    padding: 3px;
    transition: all .2s;
}

.table th img.more,
.table td img.more {
    padding-right: 3px;
    height: 25px;
}

.table th img.icon {
    height: 20px;
    padding: 1px;
    transition: all .2s;
}

.table th:hover,
a.asc:hover {
    color: #500000;
    transition: all .2s;
}

.table th:hover img.icon {
    padding: 0px;
    transition: all .2s;
}

.table td {
    font-size: 13px;
    color: #000;
    padding: 2px 3px;
}

.table table tr {
    background-color: inherit;
    transition: all .2s;
}

.table table tr:nth-child(odd) {
    background-color: #e2f1ff;
    transition: all .2s;
}

.table table tr:hover:not(.row-graph) {
    background-color: #cce6ff;
    transition: all .2s;
}

.table th,
.table td {
    min-width: 50px;
    padding: 4px 5px;
    border-left: 1px solid #002b51;
    border-bottom: 1px solid #002b51;
}

.table tr th:first-child,
.table tr td:first-child {
    border-left: none;
}

.table td.zero,
.table tr.zero {
    background-color: #faa !important;
}

/* Login */
.admin,
.login {
    padding: 20px 50px;
}

.admin label,
.login label {
    font-size: 20px;
    color: #500000;
    display: block;
}

.admin select,
.admin input[type='text'],
.admin input[type='email'],
.admin input[type='date'],
.admin input[type='month'],
.admin input[type='password'],
.login select,
.login input[type='text'],
.login input[type='email'],
.login input[type='date'],
.login input[type='month'],
.login input[type='password'] {
    padding: 2px;
    border: 1px solid #500000;
    border-radius: 3px;
    width: 500px;
}

.admin select:focus,
.admin input[type='text']:focus,
.admin input[type='email']:focus,
.admin input[type='date']:focus,
.admin input[type='month']:focus,
.admin input[type='password']:focus,
.login select:focus,
.login input[type='text']:focus,
.login input[type='email']:focus,
.login input[type='date']:focus,
.login input[type='month']:focus,
.login input[type='password']:focus {
    border-color: #c1f7ff;
}

.admin input[type='submit'],
.login input[type='submit'] {
    border: 1px solid #002b51;
    color: #002b51;
    border-radius: 3px;
    padding: 1px 20px;
    background-color: #e8fbff;
    margin-top: 15px;
    margin-left: 400px;
    transition: all .2s;
}

.admin input[type='submit']:hover,
.login input[type='submit']:hover {
    border: 1px solid #004d91;
    background-color: #d6f7ff;
    transition: all .2s;
}

.admin {}

/* Personal */
.personal {
    padding: 3px 20px;
}

.personal:first-child {
    padding-top: 10px;
}

.personal .title {
    font-size: 22px;
    color: #500;
}

.personal .block {
    float: left;
    margin: 3px 10px;
    min-width: 20%;
}

.personal label {
    font-size: 17px;
    color: #002b51;
}

.personal select,
.personal input[type='date'],
.personal input[type='number'],
.personal input[type='month'],
.personal input[type='text'],
.personal textarea {
    padding: 2px;
    border: 1px solid #002b51;
    border-radius: 3px;
    width: 100%;
}

.personal select:focus,
.personal input[type='date']:focus,
.personal input[type='number']:focus,
.personal input[type='month']:focus,
.personal input[type='text']:focus,
.personal textarea:focus {
    border-color: #c1f7ff;
}

.personal a.button,
.personal label.button,
.personal input[type='submit'] {
    border: 1px solid #002b51;
    color: #002b51;
    border-radius: 3px;
    padding: 1px 20px;
    background-color: #e8fbff;
    margin-top: 15px;
    transition: all .2s;
    margin: 3px 5px;
}

.personal a.button:hover,
.personal label.button:hover,
.personal input[type='submit']:hover {
    cursor: pointer;
    border: 1px solid #004d91;
    background-color: #d6f7ff;
    text-decoration: none;
    transition: all .2s;
}

.personal label.button {
    font-weight: 100;
    font-size: 13px;
    width: 90%;
}

.personal a.button {
    padding: 3px 20px;
}

.personal .table {
    width: 100%;
}

.personal table {
    width: auto;
}

.personal table tr td,
.personal table tr th {
    width: 230px;
}

.personal td input[type="text"],
.personal td input[type="password"],
.personal td input[type="email"],
.personal td input[type="month"],
.personal td input[type="date"] {
    width: 60%;
}

.personal .title {
    cursor: pointer;
}

.reports .block,
.reports td input[type="text"],
.reports td input[type="password"],
.reports td input[type="email"],
.reports td input[type="month"],
.reports td input[type="date"] {
    width: 100%;
}

.reports td,
.reports th {
    width: 100px !important;
}

.reports .block input {
    width: auto;
}

/* par graph #d70206, #f05b4f, #f4c63d, #d17905, #453d3f, #59922b, #0544d3, #6b0392, #f05b4f, #dda458 */
.personal table tr td:first-child,
.personal table tr th:first-child {
    width: 250px !important;
}

.selected-col {
    background-color: #99c0ff;
}

/* modal window m_pioneer */
.no_m_pioneer .m_pioneer_back {
    display: none;
    transition: all .2s;
}

.no_m_pioneer .m_pioneer {
    display: none;
    transition: all .2s;
}

.m_pioneer_back {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    content: '';
    display: block;
    top: 0px;
    left: 0px;
    opacity: 0.5;
    transition: all .2s;
}

.m_pioneer {
    position: fixed;
    top: 20%;
    left: 40%;
    background-color: #e8fbff;
    padding: 5px 10px;
    border-radius: 3px;
    transition: all .2s;
}

.m_pioneer span {
    display: block;
}

.m_pioneer .title {
    color: #002b51;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
}

.t_pioneer select,
.m_pioneer select,
.m_pioneer input {
    border: 1px solid #002b51;
    padding: 3px 5px;
    border-radius: 3px;

}

.t_pioneer select,
.m_pioneer select {
    width: 100%;
}

.m_pioneer label {
    position: relative;
}

.m_pioneer input[type="submit"],
.m_pioneer input[type="button"] {
    color: #002b51;
    background-color: #e8fbff;
    margin: 0px auto;
    margin-left: 25%;
}

.m_pioneer input[type="submit"]:hover,
.m_pioneer input[type="button"]:hover {
    border: 1px solid #004d91;
    background-color: #d6f7ff;
    text-decoration: none;
    transition: all .2s;
}

.m_pioneer div {
    text-align: right;
    margin: 10px;
}

/* all reports */
.all_reports td input[type="text"],
.all_reports td input[type="password"],
.all_reports td input[type="email"],
.all_reports td input[type="month"],
.all_reports td input[type="date"] {
    width: 100%;
}

.all_reports td input[type="text"],
.all_reports td input[type="password"],
.all_reports td input[type="email"],
.all_reports td input[type="month"],
.all_reports td input[type="date"] {
    width: 100%;
}

.all_reports select,
.all_reports input[type='date'],
.all_reports input[type='month'],
.all_reports input[type='text'],
.all_reports textarea {
    padding: 2px;
    border: 1px solid #002b51;
    border-radius: 3px;
    width: 100%;
}

.all_reports select:focus .personal input[type='date']:focus,
.all_reports input[type='month']:focus,
.all_reports input[type='text']:focus,
.all_reports textarea:focus {
    border-color: #c1f7ff;
}

.all_reports a.button,
.all_reports input[type='submit'] {
    border: 1px solid #002b51;
    color: #002b51;
    border-radius: 3px;
    padding: 1px 20px;
    background-color: #e8fbff;
    margin-top: 15px;
    transition: all .2s;
    margin: 3px 5px;
}

.all_reports a.button:hover,
.all_reports input[type='submit']:hover {
    border: 1px solid #004d91;
    background-color: #d6f7ff;
    text-decoration: none;
    transition: all .2s;
}

.mobile1 {
    display: none;
}

.mobile {
    display: none;
    position: relative;
    top: 80px;
    min-width: 260px;
}

.mobile ul {
    padding: 0px;
}

.mobile a {
    background-color: #ddf8ff;
    display: block;
    color: #002b51;
    padding: 3px 5px;
    text-align: center;
    border-bottom: 2px solid #c9e7ff;
}

.mobile a:hover {
    background-color: #e8faff;
}

.mobile li {
    list-style: none;
}

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

    .filter-open {
        height: 280px;
    }
}

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

    header h1 {
        font-size: 25px;
    }
}

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

    .mobile1 {
        display: block;
    }

    .links.desktop {
        display: none;
    }

    .admin,
    .login {
        padding: 0px 10px;
    }

    .admin li a {
        font-size: 10px;
    }

    .admin select,
    .admin input[type='text'],
    .admin input[type='email'],
    .admin input[type='password'],
    .login select,
    .login input[type='text'],
    .login input[type='email'],
    .login input[type='password'] {
        width: 100%;
    }

    .admin input[type='submit'],
    .login input[type='submit'] {
        margin-left: 0px;
    }

    #filter_open {
        font-size: 17px;
    }

    .filter {
        height: 60px;
    }

    .filter label.search_word {
        font-size: 15px !important;
    }

    .filter input#search_word {
        width: 50%;
    }

    .filter-open .filter_head {
        width: 50%;
    }

    .filter-open {
        height: 290px;
    }
}

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

    .filter label.search_word,
    .filter input#search_word {
        width: 100%;
        margin-bottom: 5px;
    }

    .filter {
        height: 90px;
    }

    .filter_head {
        width: 80%;
    }

    .filter-open .filter_head {
        height: 85px;
        width: 40%;
    }

    .filter-open {
        height: 330px;
    }

    .mobile {
        display: inherit;
    }

    .nav.desktop {
        display: none;
    }

    header,
    .content,
    footer {
        padding-left: 10px;
    }

    .content h3 {
        font-size: 18px;
    }

    .content a {
        font-size: 15px;
    }

    .content a img {
        height: 15px;
    }

    .personal .block {
        width: 100%;
        margin: 3px 0px;
    }
}