/* basic */

/* responsive menu */
.g-front .navbar-header-mobile {
    display: none;
}

.navbar-header-mobile label {
    margin-bottom: 0;
}
.navbar-header-mobile .toggle,
[id^=drop] {
    display: none;
}
.navbar-header-mobile {
    margin:0;
    padding: 0;
    background-color: #263544;
}
.navbar-header-mobile:after {
    content:"";
    display:table;
    clear:both;
}
.navbar-header-mobile ul {
    float: right;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
}
.navbar-header-mobile ul li {
    margin: 0px;
    display:inline-block;
    float: left;
    /*background-color: #82042b;*/
}
.navbar-header-mobile a {
    display:block;
    padding:14px 20px;
    color:#FFF;
    font-size:17px;
    text-decoration:none;
}
.navbar-header-mobile ul li ul li:hover {
    background: #82042b;
}
.navbar-header-mobile a:hover {
    background-color: #82042b;
}
.navbar-header-mobile ul ul {
    display: none;
    position: absolute;
    top: 60px;
}
.navbar-header-mobile ul li:hover > ul {
    display:inherit;
}
.navbar-header-mobile ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}
.navbar-header-mobile ul ul ul li {
    position: relative;
    top:-60px;
    left:170px;
}
.navbar-header-mobile li > a:after { content:  ' +'; }
.navbar-header-mobile li > a:only-child:after { content: ''; }
.navbar-header-mobile i.fa-bars {
    padding-right: 10px;
}

/* media query */
@media screen and (min-width: 320px) and (max-width: 479px) {
    /* grid */
    .g-front .navbar-header,
    .g-front .container-navbar {
        display: none !important;
    }
    .g-front .navbar-header-mobile {
        display: block !important;
    }
    .g-front .main-container {
        margin: 0 !important;
    }
    .g-front .container-content {
        margin-left: 0 !important;
        float: none !important;
    }
    /* navbar */
    .navbar-header-mobile {
        margin: 0;
    }
    .navbar-header-mobile > .toggle {
        border-bottom: 2px solid #1e2a36 !important;
    }
    .navbar-header-mobile .toggle + a,
    .navbar-header-mobile .menu {
        display: none;
    }
    .navbar-header-mobile .toggle {
        display: block;
        background-color: #263544;
        padding:14px 20px;
        color:#FFF;
        font-size:17px;
        text-decoration:none;
        border:none;
    }
    .navbar-header-mobile .toggle:hover {
        background-color: #82042b;
    }
    [id^=drop]:checked + ul {
        display: block !important;
    }
    .navbar-header-mobile ul {
        float: none;
    }
    .navbar-header-mobile ul li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #1e2a36;
    }
    .navbar-header-mobile ul ul .toggle,
    .navbar-header-mobile ul ul a {
        padding: 0 40px;
    }
    .navbar-header-mobile ul ul ul a {
        padding: 0 80px;
    }
    .navbar-header-mobile a:hover,
    .navbar-header-mobile ul ul ul a {
        background-color: #82042b;
    }
    .navbar-header-mobile ul li ul li .toggle,
    .navbar-header-mobile ul ul a,
    .navbar-header-mobile ul ul ul a{
        padding:14px 20px;
        color:#FFF;
        font-size:17px;
    }
    .navbar-header-mobile ul li ul li .toggle,
    .navbar-header-mobile ul ul a {
        background-color: #212121;
    }
    .navbar-header-mobile ul ul {
        float: none;
        position:static;
        color: #ffffff;
    }
    .navbar-header-mobile ul ul li:hover > ul,
    .navbar-header-mobile ul li:hover > ul {
        display: none;
    }
    .navbar-header-mobile ul ul li {
        display: block;
        width: 100%;
    }
    .navbar-header-mobile ul ul ul li {
        position: static;
    }
    .navbar-header-mobile li a i {
        padding-right: 10px;
    }
    /* content */
    .btn-primary,
    .plan .card a,
    .g-front .page-body .card .form-control,
    .g-front .page-body form input,
    .g-front .page-body form select,
    .g-front .page-body form,
    .g-front .page-body table,
    .g-front {
        font-size: 16px !important;
    }
    .g-front .page-header.card .col-lg-4 {
        display: none;
    }
    .page-header.card .navbar > a {
        float: none !important;
        display: block;
        width: 100%;
        margin-left: 0;
        margin-bottom: 5px;
        text-align: center;
    }
    .card-body {
        overflow-x: auto;
    }
    .page-body > .stats .form-row > .col,
    .page-body > .plan.operator .form-row > .col,
    .page-body > .plan.operator .row > div,
    .page-body > .plan .row > .col,
    .access-list-detail .form-row > .col,
    .epr-activity .data .row > .col,
    .epr-activity .card-body .row > .col-4,
    .epr-dashboard .card-body .row > div {
        width: 100%;
        max-width: 100%;
        margin-bottom: 5px;
        flex: none;
    }
    .epr-activity .data .row > .col:nth-child(2) {
        height: 400px;
        width: 100%;
    }
    .epr-activity #chartContainer1 {
        height: 400px !important;
        width: auto !important;
    }
    .access-list-detail #search_table {
        width: 150% !important;
    }
    .access-list-detail #search_table th:nth-child(3) {
        width: 50% !important;
    }
    .access-list-detail #search_table th:nth-child(2),
    .access-list-detail #search_table th:nth-child(1) {
        width: 36% !important;
    }
}
@media screen and (min-width: 480px) and (max-width: 599px) {

}
@media screen and (min-width: 600px) and (max-width: 767px) {

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

}
@media screen and (min-width: 900px) and (max-width: 1023px) {

}
@media screen and (min-width: 1024px) and (max-width: 1199px) {

}
@media screen and (min-width: 1200px) {

}