/* Mobile */
@media (max-width: 767px) {
    p, dt, dd, li, a {
        font-size: 17px;
    }

    h2, .h2 {
        font-size: 30px;
    }

    .h3, h3 {
        font-size: 25px;
    }

    .btn-primary {
        width: auto!important;
        padding: 10px 20px;
    }

    .navbar {
        padding: 5px 10px;
    }

    .navbar-brand {
        padding: 0;
        font-size: 17px;
        width: 70%!important;
        margin-left: 10px!important;
    }

    .navbar-toggler {
        padding: 0;
        font-size: 24px;
        line-height: 1;
        color: #fff!important;
        background-color: transparent;
        border: 0!important;
        border-radius: 0;
    }

    .navbar-toggler i {
        font-size: 30px!important;
        font-weight: 400;
        color: #fff!important;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }

    .navbar-collapse {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 0 20px;
        margin-bottom: 0;
        list-style: none;
        position: absolute;
        top: 140%;
        left: 7px;
        right: 0px;
        background-color: #222B36;
        box-shadow: none;
        z-index: 99999;
        box-shadow: 0px 4px 8px 0px #6c757d;
    }

    .navbar-nav .nav-item {
        padding: 10px 0;
        color: #fff!important;
    }

    .navbar-expand-lg .navbar-nav .nav-link i {
        color: #fff!important;
    }

    .main-second-dropdown, .main-second-dropdown .dropdown {
        padding-top: 0;
    }

    .nav-item a {
        color: #01121F !important;
        padding: 0px 20px 10px 25px !important;
    }

    .navbar-collapse .dropdown-item.active, .navbar-collapse .dropdown-item:active {
        color: #20FFFF!important;
        font-weight: 500;
        background-color: transparent;
        outline: none;
    }

    .dropdown-item:focus, .dropdown-item:hover, .navbar-nav .nav-item:focus {
        background-color: transparent;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 20px;
        color: #fff!important;
    }

    .nav-link.active .nav-item, .nav-link .nav-item:hover {
        font-weight: 600;
        color: #fff!important;
        border-bottom: 4px solid #20FFFF;
        padding-bottom: 8px;
        outline: none;
    }

    .nav-link i {
        padding-left: 0;
    }

    .navbar-nav .dropdown-menu {
        top: 100% !important;
        left: 0 !important;
        position: static !important;
        box-shadow: none !important;
        background-color: transparent;
        text-align: center;
        border-top: 0;
        border-radius: 0;
        margin-top: 0px;
        font-size: 15px;
        padding: 0px;
    }

    .dropdown-item {
        font-weight: 400;
        color: #00072A;
        font-size: 15px;
    }

    .navbar-nav .nav-link.show {
        text-align: center;
        font-weight: 700;
    }

    .navbar-nav .dropdown-menu a {
        padding: 0px 0px 0px 0px !important;
        font-size: 17px;
    }

    .mobile-brand {
        display: none!important;
    }

    .mobile-brand p {
        font-size: 40px;
        margin-bottom: 0;
        line-height: 25px;
    }

    .h-100vh {
        margin: auto 0;
        height: 80vh;
    }

    .login-page {
        height: auto;
        padding-top: 10vh;
        background-position: bottom 3% right 3%;
        background-size: 25%;
    }
    
    .audit-page .dropdown-menu.show {
        display: block;
        width: 350px;
    }
    /* Dashboard */
    .dashboard-cards .col-lg-4 {
        margin-top: 60px;
    }

    .top-img {
        width: 20%;
        margin: -30px auto -30px auto;
        z-index: 998;
        display: block;
        position: relative;
    }

    .dashboard-cards {
        margin-top: 0;
    }

    .table-responsive.med-card {
        max-height: 100vh;
    }

    .table-responsive.med-card {
        max-height: none;
    }

    .table-responsive.long-card {
        max-height: none;
    }

    .table td {
        font-size: 16px;
    }

    .table-actions i {
        color: #000000;
        font-size: 30px;
        vertical-align: middle;
        line-height: 40px;
        margin: 0;
    }

    .table td:first-child {
        border-left: 0!important;
    }

    .table td:last-child {
        border-right: 0!important;
    }

    /* hide table headings */
    .table-responsive table thead {
        display: none;
    }

    /* treat rows like divs */
    .table-responsive table tr {
        display: block;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .latest-reports-table .table-responsive table tr {
        margin-bottom: 0;
    }

    /* treat columns like divs */
    .table-responsive table td {
        text-align: left;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        justify-content: start;
        padding: 10px 8px;
        align-items: center;
        border: 0;
    }

    /* this part is ugly, but necessary to show label on left */
    .table-responsive table td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        width: 100%;
        text-align: left;
        font-size:17px;
    }

    .table-actions a:first-child {
        margin-left: 0;
    }

    .latest-reports-table {
        padding-bottom: 10%;
    }

    .new-report-page, .reports-page, .users-page, .audit-page {
        padding: 30% 0 10% 0;
    }

    .manage-card i {
        font-size: 25px;
        padding-right: 10px;
    }

    .file-upload {
        height: 35vh;
        width: auto;
    }

    .form-label {
        position: absolute;
        top: 20%;
        right: 20px;
        left: 20px;
    }

    .reports-table .table-card .card-body {
        max-height: none;
    }

    .table-card .table-actions i {
        color: #000000;
        font-size: 25px;
        vertical-align: middle;
        line-height: 40px;
        margin: 0 15px 0 0;
    }

    .table td img {
        width: 30px;
        height: auto;
        margin-right: 15px;
    }

    .links-table .table td img {
        width: 190px;
        height: auto;
        margin-right: auto;
    }

    .users-page .col-md-6 p {
        line-height: normal;
        font-size: 15px;
    }

    .modal-action-btn strong {
        line-height: 40px;
    }

    .select2-container--open .select2-dropdown--below, .select2-container {
        max-width: 355px;
    }

    .view-page {
        padding: 30% 0 8% 0;
    }

    .training-page {
        padding: 30% 0 0% 0;
    }

    .users-page p>a>i, .modal-action-btn i, .customers-page p.small-icons>a>i {
        font-size: 25px !important;
        padding-right: 15px;
        padding-left: 0;
    }

    .error-page {
        padding: 40% 0 5% 0;
    }

    footer {
        top: auto;
    }
}

/* Tablet & small screens: */
@media (min-width: 768px) and (max-width: 991px) {
    .btn-primary {
        width: auto!important;
        padding: 10px 20px;
    }

    .navbar {
        padding: 5px 10px;
    }

    .navbar-brand {
        padding: 0;
        font-size: 17px;
        width: 70%!important;
        margin-left: 10px!important;
    }

    .navbar-brand img {
        width: 30%;
    }

    .navbar-toggler {
        padding: 0;
        font-size: 24px;
        line-height: 1;
        color: #fff!important;
        background-color: transparent;
        border: 0!important;
        border-radius: 0;
    }

    .navbar-toggler i {
        font-size: 30px!important;
        font-weight: 400;
        color: #fff!important;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }

    .navbar-collapse {
        display: flex;
        flex-direction: column;
        padding: 20px 20px 0 20px;
        margin-bottom: 0;
        list-style: none;
        position: absolute;
        top: 140%;
        left: auto;
        right: 0px;
        background-color: #222B36;
        box-shadow: none;
        z-index: 99999;
        box-shadow: 0px 4px 8px 0px #6c757d;
        max-width: 230px;
    }

    .navbar-nav .nav-item {
        padding: 10px 0;
        color: #fff!important;
    }

    .navbar-expand-lg .navbar-nav .nav-link i {
        color: #fff!important;
    }

    .main-second-dropdown, .main-second-dropdown .dropdown {
        padding-top: 0;
    }

    .nav-item a {
        color: #01121F !important;
        padding: 0px 20px 10px 25px !important;
    }

    .navbar-collapse .dropdown-item.active, .navbar-collapse .dropdown-item:active {
        color: #20FFFF!important;
        font-weight: 500;
        background-color: transparent;
        outline: none;
    }

    .dropdown-item:focus, .dropdown-item:hover, .navbar-nav .nav-item:focus {
        background-color: transparent;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 20px;
        color: #fff!important;
    }

    .nav-link.active .nav-item, .nav-link .nav-item:hover {
        font-weight: 600;
        color: #fff!important;
        border-bottom: 4px solid #20FFFF;
        padding-bottom: 8px;
        outline: none;
    }

    .nav-link i {
        padding-left: 0;
    }

    .navbar-nav .dropdown-menu {
        top: 100% !important;
        left: 0 !important;
        position: static !important;
        box-shadow: none !important;
        background-color: transparent;
        text-align: center;
        border-top: 0;
        border-radius: 0;
        margin-top: 0px;
        font-size: 15px;
        padding: 0px;
    }

    .dropdown-item {
        font-weight: 400;
        color: #00072A;
        font-size: 15px;
    }

    .navbar-nav .nav-link.show {
        text-align: center;
        font-weight: 700;
    }

    .navbar-nav .dropdown-menu a {
        padding: 0px 0px 0px 0px !important;
        font-size: 17px;
    }

    .mobile-brand {
        display: none!important;
    }

    .mobile-brand p {
        font-size: 40px;
        margin-bottom: 0;
        line-height: 25px;
    }

    .dashboard-page {
        padding-top: 15%;
    }

    .top-img {
        width: 20%;
        margin: -50px auto -34px auto;
    }

    .dashboard-cards {
        margin-top: 0;
    }

    .dashboard-cards .col-md-6 {
        margin-top: 60px;
    }

    .dashboard-cards .card-body .col-md-6 {
        margin-top: 0px;
    }

    #checkBoxes {
        padding-top: 14%;
    }

    .latest-reports-table {
        padding-bottom: 5%;
    }

    .table td {
        font-size: 15px;
    }

    .lrg-num {
        font-size: 50px;
    }

    .icon-bg {
        position: absolute;
        top: 7%;
        left: 40%;
    }

    .table-responsive.med-card {
        max-height: 100vh;
    }

    .table-responsive.med-card {
        max-height: none;
    }

    .table-responsive.long-card {
        max-height: none;
    }

    .table-actions i {
        color: #000000;
        font-size: 25px;
        vertical-align: middle;
        line-height: 40px;
        margin: 0 20px 0 0;
    }

    .table td img {
        width: 30px;
        margin-right: 20px;
    }

    .links-table .table td img {
        width: 180px;
        margin-right: auto;
    }

    .table td:first-child {
        border-left: 0!important;
    }

    .table td:last-child {
        border-right: 0!important;
    }

    /* hide table headings */
    .table-responsive table thead {
        display: none;
    }

    /* treat rows like divs */
    .table-responsive table tr {
        display: block;
        border-top: 2px solid lightgray;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .latest-reports-table .table-responsive table tr {
        margin-bottom: 0;
    }

    /* treat columns like divs */
    .table-responsive table td {
        text-align: left;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        justify-content: start;
        padding: 10px 8px;
        align-items: center;
        border-right: 0;
    }

    /* this part is ugly, but necessary to show label on left */
    .table-responsive table td:before {
        content: attr(data-label);
        float: left;
        font-weight: 700;
        width: 100%;
        text-align: left;
        font-size: 15px;
    }

    .table-actions a:first-child {
        margin-left: 0;
    }

    .new-report-page, .customers-page, .users-page, .audit-page, .reports-page {
        padding: 15% 0 1% 0;
    }

    .map-fixed-top {
        z-index: 990;
    }

    .manage-card i {
        font-size: 20px;
        padding-right: 10px;
    }

    .manage-card p {
        font-size: 14px;
    }

    .file-upload {
        height: 30vh;
    }

    .small-icons i {
        font-size: 25px;
        padding-left: 20px;
    }

    .users-page .col-md-6 p {
        line-height: normal;
    }

    .modal-action-btn {
        line-height: 30px!important;
    }

    .table-card.med-card .card-body {
        max-height: 80vh;
    }

    .training-page {
        padding: 20% 0 0% 0;
    }

    .view-page {
        padding: 15% 0 8% 0;
    }

    .select2-container {
        width: auto;
    }

    .new-report-buffer {
        padding: 15% 0 10% 0;
    }

    .new-report-buffer .h2 {
        font-size: 25px;
    }

    .new-report-buffer img {
        width: 100%;
        text-align: center;
    }

    .login-page {
        background-position: top 10% right;
        background-size: 50%;
        background-repeat: no-repeat;
    }

    .error-page {
        padding: 30% 0 14% 0;
    }

    footer {
        top: auto;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .h5, h5 {
        font-size: 20px;
    }

    .fz20 {
        font-size: 20px;
    }

    .nav-link.active .nav-item, .nav-link .nav-item:hover {
        padding-bottom: 18px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 30px;
    }

    .btn-primary {
        width: auto!important;
        padding: 10px 20px;
    }

    .table-card.med-card .card-body {
        max-height: 50vh;
    }

    .top-img {
        width: 20%;
        margin: -30px auto -30px auto;
    }

    #checkBoxes {
        padding-top: 12%;
    }

    .body-scroll {
        max-height: 49vh;
    }

    .lrg-num {
        font-size: 60px;
    }

    .table-actions i {
        font-size: 23px;
        line-height: 22px;
        margin: 0 3px;
    }
    
    #map {
        height: 630px;
        width: 440px;
    }

    .new-report-page, .customers-page, .users-page, .audit-page, .reports-page {
        padding: 11% 0 1% 0;
    }

    .icon-bg {
        top: 5%;
        left: 45%;
        font-size: 80px;
    }

    .file-upload {
        height: 30vh;
    }

    .user-role-table .table-actions i, .department-table .table-actions i {
        font-size: 20px;
        line-height: 22px;
        margin: 0 1px;
    }

    .select2-container--open .select2-dropdown {
        left: 0 !important;
        top: 0 !important;
    }

    .select2-container {
        width: auto;
    }

    .new-report-buffer .h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .new-report-buffer img {
        width: 80%;
    }

    .new-report-buffer {
        padding: 17% 0 12% 0;
    }

    .training-page {
        padding: 19% 0 10% 0;
    }

    .view-page {
        padding: 13% 0 14% 0;
    }
}

/* Laptop: */
@media (min-width: 1200px) and (max-width: 1600px) {
    .table-card.med-card .card-body {
        max-height: 50vh;
    }

    .btn-primary {
        width: auto!important;
        padding: 10px 15px;
    }

    .icon-bg {
        top: 14%;
        left: 35%;
    }

    .nav-link.active .nav-item, .nav-link .nav-item:hover {
        padding-bottom:21px;
    }

    .new-report-page, .customers-page, .users-page, .audit-page, .reports-page {
        padding: 10% 0 1% 0;
    }

    header .dropdown-menu[data-bs-popper], header .dropdown-menu {
        top: 43px;
    }

    .top-img {
        margin: -40px auto -34px auto;
    }

    .body-scroll {
        overflow-y: scroll;
        max-height: 44vh;
        margin-right: 4px;
    }

    .new-report-buffer {
        padding: 13% 0 9% 0;
    }

    .file-upload {
        height: 30vh;
    }

    .audit-page .dropdown-menu.show {
        width: 250px;
    }

    .select2-container--open .select2-dropdown {
        left: 0 !important;
        top: 0 !important;
    }

    .select2-container {
        width: auto;
    }

    .training-page {
        padding: 14% 0 5% 0;
    }

    .view-page {
        padding: 10% 0 13% 0;
    }

    .small-icons i {
        font-size: 25px;
    }

    .table-actions img {
        width: 15%;
        height: auto;
    }
    .error-page {
        padding: 20% 0 10% 0;
    }
    
}

/* 14” HD Laptop and bigger */
@media (min-width: 1391px) and (max-width: 1600px) {
    .dashboard-page {
        padding: 15vh 0 5vh 0;
    }

    .body-scroll {
        max-height: 47vh;
    }

    .file-upload {
        height: 35vh;
    }

    .table-responsive.med-card {
        max-height: 40vh;
    }

    .select2-container--open .select2-dropdown {
        left: 0 !important;
        top: 0 !important;
    }

    .select2-container {
        width: auto;
    }

    #map {
        height: 550px;
        width: 560px;
    }

    .training-page {
        padding: 10% 0 1% 0;
    }

    .view-page {
        padding: 10% 0 4% 0;
    }
    .actions-th {
        min-width: 200px;
    }

    footer {
        top: auto;
    }
}

@media (min-width: 1400px) and (max-width: 1600px) {
    .nav-link.active .nav-item, .nav-link .nav-item:hover {
        padding-bottom: 24px;
    }

    .navbar-brand img {
        width: 30%;
    }

    .error-page {
        padding: 10% 0 10% 0;
    }
}