html, body {   
    margin: 0;
    padding: 0;
    height: 100%;
}
#container {
    min-height: 100%;
    position: relative;
}
#header {
    height: 60px;
    border-bottom: 1px solid #80808026;
}
#body {
    background-color: #dee2e654;
    height: calc(100vh - 180px);
    padding-left: 78px !important;
    padding: 12px;
    position: relative;
    overflow: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.main_logo {
    background-color: #1a1ace;
    height: 59px ;   
}
.main-logo {
    margin: 0 !important;
    width: 66px;
}
.side_navbar {
    margin: 0;
    padding: 0;
    width: 66px;
    left: 0;
    bottom: 0;
    display: flex;
    position: fixed;
    height: 100%;
    top: 0px;
    height: 100vh;
    z-index: 10;
    background-color: #004fff;
    font-size: 12px;
}

.content {
    height: 3.8pc;
    margin-left: 66px;
    padding-top: 15px;
    border-bottom: 1px solid #80808030;
}
.footer-text-one {
    text-align: left;
}

.footer-text-two {
    text-align: center;
}
.footer_light{
    display:flex;
    justify-content:space-between;
}
.footer-text-three {
    text-align: end;
}
.footer {
    position: fixed;
  /*  position: absolute;*/
    bottom: 0;
    width: 100%;
    display: flex;
    height: 60px;
    background-color: #dee2e654;
    padding-left: 66px;
    justify-content: space-between;
    border-top: 1px solid #80808054;
}
.col-md-4 > p {
    margin: 0 !important;
    font-size: 12px;
}
@media (min-width: 992px) {
    .col-md-4 {
        width: 33.33333333%;
    }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
    }
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}


@media (max-width: 991px) {
    .footer {
        display: block;
        justify-content: center;
    }

    .footer-text-one {
        text-align: center;
    }

    .footer-text-two {
        text-align: center;
        padding-top: 0px;
    }

    .footer-text-three {
        text-align: center !important;
        padding-top: 0px;
    }

    .footer-text-two p {
        text-align: center;
        padding-top: 5px !important;
    }

    .footer-text-three p {
        text-align: center;
        padding-top: 5px !important;
    }
}

.page-title {
    margin-left: 23px;
}
.page-title_1 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.header_start {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    padding-left: 66px;
}
.header_end {
    display: flex;
    justify-content: flex-end;
}
.logout_button {
    background-color:orangered;
    height:100%;
    padding:13px;
    }
.tag_user {
    padding: 19px 25px 15px 15px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
}
.tag {
    padding: 19px 15px 15px 25px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}
.menu {
    position: absolute;
    top: 23%;
    width:66px;
}
@media (max-height:485px){
    .menu {
        top: 14%;
    }
}
.settings {
    position: absolute;
    bottom: 46px;
    width: 66px;
}
.menu_item {
    padding: 14px 2px 14px 2px;
}
.menu_item > span > a {
    display: grid;
    color: #88bef5;
    font-weight: 600;
    justify-content: center;
}
    .menu_item > span > a > img {
        width: 23px;
    }
.footer_part {
    left: 66px;
    line-height: 40px;
    font-size: 12px;
    display: flex;
    width:94.3%;
    justify-content: space-between;
}
a:hover {
    text-decoration: none;
}
.footer_1 {
    display: flex;
    justify-content: space-around;
    width:40%;
}
@media (max-width: 1125px) {
    .footer_part {
        width: 93.3%;
    }
}
@media (max-width: 975px) {
    .footer_part {
        width: 90.3%;
    }
    .footer_1{
        width:50%;
    }
}
@media (max-width: 580px) {
    .footer_part {
        width: 89.3%;
       
    }
    .footer_1 {
        width: 60%;
        display:grid;
    }
}
@media (max-width: 580px) {
    .footer_part {
        width: 88.3%;
        display:grid;
    }
}

    .dashboard_hover_img {
        display: none;
    }

    .dashboard:hover {
        background-color: #00408585;
    }

        .dashboard:hover .dashboard_img {
            display: none;
        }

        .dashboard:hover .dashboard_hover_img {
            display: block;
        }

        .dashboard:hover .dash_title {
            color: white;
        }

    .user_hover_img {
        display: none;
    }
li {
    list-style-type: none;
}
.user_list {
    display: none;
    position: absolute;
    background-color: white;
    left: 66px;
    width: 245px;
    height: 220px;
    font-size: 16px;
    margin-top: -40px;
    line-height: 33px;
    padding: 30px;
    box-shadow: 1px 2px 33px rgba(28, 97, 171, 0.33);
}
    .user_list > ul {
        padding:0px;
    }
    .user_list > ul >li >a {
        color:black;
    }

    .user:hover .user_list {
        display: block;
    }

    .user:hover {
        background-color: #00408585;
    }

        .user:hover .user_img {
            display: none;
        }

        .user:hover .user_hover_img {
            display: block;
        }

        .user:hover .user_title {
            color: white;
        }

    .DandT_hover_img {
        display: none;
    }

    .DandT:hover {
        background-color: #00408585;
    }
.DandT_list {
    display: none;
    position: absolute;
    background-color: white;
    left: 66px;
    width: 250px;
    padding: 17px 20px 17px 30px;
    height: 230px;
    margin-top: -40px;
    font-size: 16px;
    line-height: 33px;
    box-shadow: 1px 2px 33px rgba(28, 97, 171, 0.33);
}
    .DandT_list> ul{
        padding:0px;
    }
        .DandT_list > ul > li>a {
            color: black;
        }
.body1 {
    background-color: #dadee27a;
    margin-left: 66px;
}
.DandT:hover .DandT_list {
    display: block;
}
        .DandT:hover .DandT_img {
            display: none;
        }

        .DandT:hover .DandT_hover_img {
            display: block;
        }

        .DandT:hover .DandT_title {
            color: white;
        }

    .reports_hover_img {
        display: none;
    }
.reports_list {
    display: none;
    position: absolute;
    background-color: white;
    left: 66px;
    width: 250px;
    height: 200px;
    padding: 30px;
    font-size: 16px;
    margin-top: -40px;
    line-height: 33px;
    box-shadow: 1px 2px 33px rgba(28, 97, 171, 0.33);
}
    .reports_list>ul{
        padding:0px;
    }
    .reports_list>ul > li > a{
        color:black;
    }

    .reports:hover .reports_list {
        display: block;
    }
    .reports:hover {
        background-color: #00408585;
    }

        .reports:hover .reports_img {
            display: none;
        }

        .reports:hover .reports_hover_img {
            display: block;
        }

        .reports:hover .reports_title {
            color: white;
        }
.setting_hover_img {
    display: none;
}

.setting:hover {
    background-color: #00408585;
}

    .setting:hover .setting_img {
        display: none;
    }

    .setting:hover .setting_hover_img {
        display: block;
    }

    .setting:hover .setting_title {
        color: white;
    }

/* Login pag css*/
.container {
    position: relative;
    text-align: center;
}
.logo {
    position: absolute;
    top: 40px;
    left: 35px;   
}
.rights {
    position: absolute;
    bottom: 10px;
    left: 35px;
    font-size: 11px;
    color: white;
    font-family: sans-serif;
}
.title {
    text-align: start;
    position: absolute;
    bottom: 27%;
       left: 35px;
    color: white;
    display: grid;
}
.title_1 {
    font-size: 100px;
    font-family: monospace;
    font-weight: 900;
}
.title_2 {
    font-size: 38px;
    font-family: sans-serif;
}
.login_page {
    height:50%;
    width:50%;
    background-color:white;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.login_head > span {
    font-size: 12px;
    font-family: sans-serif;
}
.login_box {   
    background-position: top;
    background-repeat: no-repeat;
}
    .login_box > img {
        width: 100%;
        height:70px
    }
.login_head {
    margin: 0;
    display: grid;
    margin-left: 23px;
}
.title_header {
    font-size: 21px !important;
    font-weight: 600;
}
#usernameSpan{
    color:red;
}
#passwordSpan{
    color:red;
}
.params {
    display: flex;
    margin-left: 33px;
    width: 91%;
    padding-bottom: 36px;
}
.forget_pass > div > a {
    text-decoration: none;
    color: black;
}
.login_view {
    padding: 36px 0px 36px 0px;
}
    .params > div > div > span {
        font-size: 12px;
        font-family: monospace;
        font-weight: 600;
        color: gray;
        letter-spacing: 1px;
    }
.params_user {
    width: 45%;
    padding-right: 5%;
}
    .params_user > div {
        display: flex;
    }
    .params > div > div > input {
        border: 0;
        outline: 0 !important;
        background: transparent;
        border-bottom: 1px solid gray;
        width:100%
    }
 input:focus {
    border-bottom-color: orange !important;
    z-index:10;
 }


.login_footer {
    position: absolute;
    bottom: 11px;
    display: flex;
    border-top: #80808057 1px solid;
    width: 100%;
}
    .login_footer > div > p {
        font-size: 11px;
        font-weight: normal;
        margin-top: 11px;
        font-family: sans-serif;
    }
        .login_footer > div > p > a {
            text-decoration: none;
            color: black;
            font-size: 11px;
            /* padding-top: 47px; */
            font-family: sans-serif;
            font-weight: 750;
            text-transform: uppercase;
        }
.forget_pass {
    margin-left: 22px;
}
   
.submit_button {
    height: 48px;
    width: 10pc;
    background-color: orangered;
    color: white;
    position: absolute;
    right: 2px;
    border:none;
}
.submit_button>i{
    padding-left:10px;
}
.ad_login1 {
    position: relative;
    right: 15px;
}
.adview{
    padding-top:15px;
}
.ad_login {
    display: flex;
    justify-content: flex-end;
    height: 35px;
    margin-top: -6px;
}
    .ad_login > input {
        background-color: #004fff;
        border: none;
        color: white;
    }
@media (max-width: 790px){
    .login_page {
        height: 60%;
        width: 60%;
    }
}
@media (max-width: 690px) {
    .login_page {
        height: 66%;
        width: 66%;
    }
}
@media (max-width: 590px) {
    .login_page {
        height: 70%;
        width: 70%;
    }
}
@media (max-width: 490px) {
    .login_page {
        height: 70%;
        width: 85%;
    }
}
@media (max-width: 400px) {
    .login_page {
        height: 70%;
        width: 100%;
    }
}