@import "./humanResources.css";
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300&display=swap');

body {
    font-family: 'Almarai', sans-serif !important;
}

.d-flex {
    flex-wrap: wrap;
}

canvas {
    width: 100% !important;
}

.wrapper {
    background: #fafafb;
}
/* DASHBOARD SIDEBAR */
.dashboard-title {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 25px;
}

    .dashboard-title + h3 {
        font-size: 1rem;
        font-weight: normal;
        color: #5e686e;
        margin: 0px 3px;
    }

select#BranchID {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('../Content/images/down-arrow.png');
    background-repeat: no-repeat;
    background-position: left 0.7em top 50%, 0 0;
    background-size: 12px 13px;
    color: unset !important;
    font-size: 14px !important;
}

.dashboard-s1-cards.mr-3 {
    margin-left: 1rem !important;
}

.form-control:focus {
    box-shadow: unset !important;
}

.info-sec, .info-sec:hover {
    cursor: pointer !important;
    color: #535252 !important;
}

    .info-sec .fa-circle-info {
        color: #535252 !important;
    }

.mr-3 {
    margin-left: 1rem !important;
    margin-right: 0px !important;
}

label {
    margin-bottom: 0.2rem !important;
    font-size: 12px;
}

.dashboard-sidebar > div > div div > a {
    font-size: 1rem;
    display: flex;
    width: 100%;
    align-items: center;
    color: #005b8e;
    font-weight: 700;
}

#barChart {
    width: 100% !important;
}

.dashboard-sidebar > div > div div > a:hover {
    text-decoration: none;
}

div#formOuter .lang {
    right: unset !important;
    left: 0 !important;
}

    div#formOuter .lang a {
        color: black;
        font-weight: unset;
        font-size: 12px;
        margin: 0px 6px;
    }

.dashboard-sidebar > div > div div > a > h2 {
    font-size: 16px;
    font-weight: 700;
    height: 20px !important;
}

.w3_info h2 {
    font-size: 20px;
    margin-bottom: 0px;
}

    .w3_info h2:first-child {
        font-size: 12px;
    }

.w3_info p {
    font-size: 16px;
    font-weight: bold;
}

.w3_info h2:first-child, .w3_info p {
    color: #18384E;
}
/*#login {
    background-image: url(../Content/login/images/login-dash.jpg);
}*/
form #form0 button#submit {
    right: unset !important;
    left: 0px !important;
    background: #163166;
    border-radius: 5px;
    width: 100%;
    font-weight: 700;
    font-size: 12px;
    height: 40px;
}

form#form0 .checkbox input + i:after {
    top: -3px !important;
    left: 1px !important;
}

form#form0 input[type="text"] {
    font-size: 14px;
    color: #333;
    text-align: left;
    letter-spacing: 1px;
    padding: 11px 10px;
    width: 93%;
    /* height: 100%; */
    display: inline-block;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Almarai', sans-serif !important;
}

#formOuter .header {
    display: flex !important;
    justify-content: end !important;
}

.dashboard-sidebar-content-title svg {
    width: 25px;
    height: 25px;
}

    .dashboard-sidebar-content-title svg path {
        fill: #005b8e;
    }

.dashboard-sidebar-content-title h2 {
    font-size: 16px !important;
}

.dashboard-sidebar-content svg {
    height: 20px !important;
}

.dashboard-sidebar-content > a {
    height: 26px !important;
}

.dashboard-sidebar-content-title {
    height: 48px;
    background-color: rgba(0, 90, 142, 0.1);
    color: #005b8e;
}


.dashboard-sidebar-content > a {
    padding: 0px 30px;
}

.dashboard-sidebar-content {
    min-height: 35px;
    color: #005b8e;
}

.dashboard-sidebar-content-not-active {
    filter: contrast(0);
}

    .dashboard-sidebar-content-not-active:hover {
        filter: unset;
    }

        .dashboard-sidebar-content-not-active:hover svg path {
            fill: #005b8e;
        }

.dashboard-sidebar-content-active {
    filter: unset;
}

.badge-lang, .lang .badge:hover {
    color: #fff;
    background-color: #005b8e;
    border-color: #005b8e;
    padding: 11px 12px;
    font-size: 1rem;
}

input[type="text"], input[type="Password"] {
    text-align: right !important;
}

.list-group-item > a {
    min-height: 48px;
    color: #005b8e;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    width: 100%;
}

.dashboard-sidebar-content-title > a {
    filter: unset !important;
}

.list-group-item:hover {
    filter: unset;
    background-color: rgba(0, 90, 142, 0.1);
}

.list-group-item:first-child {
    filter: unset;
}
/* DASHBOARD BODY */
/* TITLE */
.dashboard-body {
    background: rgb(231 231 231 / 49%);
}

    .dashboard-body > div > div:first-child > div:first-child > h2 {
        font-size: 2.25rem;
        font-weight: bold;
    }

.lang img {
    width: 30px !important;
    height: 29px !important;
}

.w3_info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

form#form0 .checkbox i {
    position: absolute;
    top: 2px;
    right: -12%;
}

.w3_info .login-check label {
    margin-right: 18px;
}

.w3l_form, .w3_info {
    direction: rtl !important;
}

.agile_info {
    display: flex !important;
}

.dashboard-body > div > div:first-child > div:first-child > h2 {
    font-size: 2.25rem;
    font-weight: bold;
}

button#sidebarCollapseMob {
    padding: 2px 8px;
    font-size: 15px;
    align-self: center;
    margin-top: 10px;
}

.new {
    width: 120px !important;
}

.lang a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.leave-cards > div {
    padding: 0px !important;
}

.dashboard-body-date-container {
    position: relative;
}

.dashboard-body-date {
    padding: 7px 10px;
    display: flex;
    flex-direction: row-reverse;
    border: 0;
    border-radius: 10px;
    width: 125px !important;
    height: 35px !important;
    font-size: 13px !important;
    text-align-last: right;
    align-items: center;
}

.pie-chart-container {
    width: 250px;
    height: 250px;
    margin: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#sidebar.active {
    box-shadow: 0px 0px 15px 6px rgba(0,0,0,0.02);
}

    #sidebar.active #sidebarCollapse {
        left: -10px;
        bottom: 0;
        top: unset !important;
        position: absolute;
    }

    #sidebar.active #sidebarCollapseMob {
        left: -10px;
        bottom: 0;
        top: unset !important;
        position: absolute;
    }

    #sidebar.active .main-logo {
    }

    #sidebar.active .fa-angles-left {
        transform: rotate(360deg) scale(1.1) !important;
    }

#sidebar #sidebarCollapse, #sidebar #sidebarCollapseMob {
    bottom: 0;
    left: 0;
    position: absolute;
    transform: rotate(541deg) !important;
}

#sidebar .fa-angles-left {
    transform: rotate(360deg) scale(1.1) !important;
    color: #24486c;
    outline: 0px solid;
    font-size: 21px;
    padding: 2px 7px;
}

/*#pieChart{
    height:160px !important;
    width:160px !important;
}*/
.ar-col {
    padding: 0px 1rem !important;
}

.flex-ar-re {
    flex-direction: row-reverse !important;
}

.pl-ar-d {
    padding-right: 1rem !important;
    padding-left: 0px !important;
}

.ar-design-r {
    padding-left: 0px !important;
    padding-right: 1rem !important;
}

.ar-s-b {
    margin-right: 15px !important;
}

.pie-chart-container.bar-labels {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.leave-cards .pr-ar {
    padding-right: 0px !important;
}

.leave-cards .pl-ar {
    padding-left: 0px !important;
}

.dashboard-body-date-container {
    margin-right: 10px;
}

.dashboard-sidebar.active > div > div div > a {
    justify-content: start;
    padding: 0px 10px !important;
}

.dashboard-sidebar.active .dashboard-sidebar-content-title {
    background: unset !important;
}

    .dashboard-sidebar.active .dashboard-sidebar-content-title a {
        filter: unset;
    }

.dashboard-sidebar.active .dashboard-sidebar-content-not-active:hover {
    filter: unset;
}

label {
    display: flex;
}

.dashboard-sidebar.active .dashboard-sidebar-content-title svg {
    fill: #005b8e !important;
    width: 25px;
    height: 25px;
}

.summ-details {
    background: #7b77ff;
    width: 120px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
}

label.label.text-left {
    display: flex;
}

.leave-cards > div {
    padding: 0px 10px !important;
}



.dashboard-sidebar.active img[alt~="main-logo"] {
    display: none !important;
    min-width: 59px !important;
    min-height: 38px !important;
}

.table-handle {
    overflow: scroll;
    width: 100% !important;
    height: 230px;
    height: 230px;
}

.date-arrow-icon {
    position: absolute;
    top: 4px;
    left: 13px;
    width: fit-content;
    height: 25px;
    background: #fff;
    pointer-events: none;
    cursor: pointer;
}

:focus-visible {
    outline: 0px !important;
}

.date-arrow-icon button {
    border: none;
    background: transparent;
}

/* DASHBOARD BODY CONTENT */

/* DASHBOARD BODY CONTENT SECTION ONE */
.dashboard-body-content-s1 {
    border-radius: 10px !important;
}

    .dashboard-body-content-s1 > div:first-child > div > h2 {
        font-size: 1.13rem;
        font-weight: bold;
        color: #030229;
    }

.btn-toggle {
    color: #fff;
    background-color: #005b8e;
    border-color: #005b8e;
}

    .btn-toggle:hover {
        color: #fff;
    }

    .btn-toggle.focus, .btn-toggle:focus {
        box-shadow: unset !important;
    }

.dashboard-body-content-s1 > div > div > h3 {
    font-size: 0.75rem;
    font-weight: 600;
    color: #030229;
}

.hr-body-content-s2 .pr-2 {
    padding-left: 0.5rem !important;
}

select#BranchID {
    border-radius: 10px;
    border: unset;
    height: 35px;
    font-size: 13px !important;
}

.table-handle table thead {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 0px 0px 15px -3px rgba(0,0,0,0.1);
}

.table-handle::-webkit-scrollbar {
    width: 5px;
    height: 4px;
    background: transparent;
}

.table-handle::-webkit-scrollbar-thumb {
    border-radius: 15px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    background: black;
}

.table-handle table thead th {
    border: unset !important
}

.table-handle, .table-handle > * {
    border-radius: unset !important;
}

    .table-handle table tbody tr:nth-of-type(odd) {
        background-color: rgb(220 107 141 / 2%);
    }

.dashboard-body-content-s2, .dashboard-body-content-s4 {
    flex-direction: row-reverse;
}

.row {
    display: flex;
}

.dashboard-body-content-s2 .btn, .dashboard-body-content-s4 .btn {
    width: 120px;
    height: 40px;
    border-radius: 10px;
    color: #fff;
}

.lang {
    background: #005b8e;
    height: fit-content;
    padding: 5px 20px;
    border-radius: 5px;
}

.badge-dark {
    margin: 0px 10px;
}

.dashboard-body-content-s2 .progress-btn {
    background: #ffc327;
}


.dashboard-body-content-s2 .total-d {
    background: #5cbee9;
}
/* DASHBOARD SECTION ONE CARDS */
.dashboard-s1-cards > div {
    height: 116px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
    border-radius: 10px;
    margin: 0px 15px;
    padding: 0px 25px;
}
    /* ICONS */
    .dashboard-s1-cards > div > div:first-child {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

.dashboard-s1-cards:nth-child(2) > div > div:first-child {
    background-color: rgba(44, 115, 255, 10%);
    color: white;
}

.dashboard-s1-cards:nth-child(3) > div > div:first-child {
    background-color: rgba(255, 214, 107, 20%);
}

.dashboard-s1-cards:nth-child(4) > div > div:first-child {
    background-color: rgba(96, 91, 255, 10%);
}

.dashboard-s1-cards:nth-child(5) > div > div:first-child {
    background-color: rgba(255, 143, 107, 10%);
}

.dashboard-s1-cards > div > div:nth-child(2) > h2 {
    font-size: 15px;
    font-weight: 800;
}

.dashboard-s1-cards > div > div:nth-child(2) > h3 {
    font-size: 0.91rem;
    font-weight: 600;
}

/* DASHBOARD BODY TOTAL */
.dashboard-s1-summary > div > h2 {
    font-size: 1.13rem;
    font-weight: bold;
}

/* DASHBOARD BODY CONTENT SECTION TWO */

/* PROGRESS BAR */
.dashboard-body-content-s2 > div:first-child > div:first-child {
    border-radius: 10px;
}

    .dashboard-body-content-s2 > div:first-child > div:first-child > h2 {
        color: #030229;
        font-size: 1.13rem;
        font-weight: bold;
    }

    .dashboard-body-content-s2 > div:first-child > div:first-child > div:nth-child(2) > h2 {
        font-size: 14px;
        color: #4f4e6a;
    }

    .dashboard-body-content-s2 > div:first-child > div:first-child > div > h2 {
        font-size: 14px;
        color: #4f4e6a;
    }

.progress-container {
    width: 100%;
    height: 5px;
    background-color: #f2f3f9;
    border-radius: 10px;
}

.fill {
    width: 80%;
    height: 8px;
    border-radius: 10px;
    background-color: #ff8f6b;
}

/* CASH RECEIPT */
.dashboard-body-content-s2 > div:nth-child(2) > div:first-child {
    border-radius: 10px;
}

    .dashboard-body-content-s2 > div:nth-child(2) > div:first-child > div:first-child > div > h2 {
        font-size: 1.13rem;
        font-weight: bold;
        color: #030229;
    }

    .dashboard-body-content-s2 > div:nth-child(2) > div:first-child > div:first-child > div > h3 {
        font-size: 0.75rem;
        font-weight: 600;
        color: #030229;
    }

/* ICONS */
.dashboard-s2-cards > div > div:first-child {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.dashboard-s2-cards:nth-child(2) > div > div:first-child {
    background-color: rgba(44, 115, 255, 10%);
}

.dashboard-s2-cards:nth-child(3) > div > div:first-child {
    background-color: rgba(96, 91, 255, 10%);
}

.dashboard-s2-cards:nth-child(4) > div > div:first-child {
    background-color: rgba(255, 214, 107, 20%);
}

.dashboard-s2-cards > div > div:nth-child(2) > h2 {
    font-size: 1.37rem;
    font-weight: 800;
    color: #030229;
}

.dashboard-s2-cards > div > div:nth-child(2) > h3 {
    font-size: 0.91rem;
    font-weight: 600;
    color: #030229;
}

.dashboard-s2-cards > div {
    box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
    height: 170px;
    border-radius: 10px;
    width: 180px;
    margin: 0px 15px;
}

/* DASHBOARD BODY TOTAL */
.dashboard-s2-summary > div > h2 {
    font-size: 1.13rem;
    font-weight: bold;
}

.dashboard-body {
    background: #FAFAFB;
}

/* DASHBOARD BODY CONTENT SECTION THREE */
.dashboard-body-content-s3 > div:first-child > div:first-child > h2 {
    color: #030229;
    font-weight: bold;
    font-size: 1.13rem;
}

.dashboard-body-content-s3 > div:first-child > div {
    border-radius: 10px;
}

.bubble-container > div {
    max-height: 220px;
    min-width: 230px;
    max-width: 260px;
}

.bubble-labels > div > div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bubble-labels > div:first-child > div {
    background-color: #95e281;
}

.bubble-labels > div:nth-child(3) > div {
    background-color: #5cbee9;
}

.bubble-labels > div > h2 {
    font-size: 0.9rem;
}

.bubble-labels > div > h3 {
    font-size: 1.13rem;
    font-weight: bold;
}

.bubble-labels > div > h4 {
    font-size: 0.85rem;
}

.semi-circle-container {
    width: 160px;
    height: 160px;
}
/* DASHBOARD BODY CONTENT SECTION Four */
.dashboard-body-content-s4 > div:first-child > div:first-child > h2 {
    color: #030229;
    font-weight: bold;
    font-size: 1.13rem;
}

.dashboard-body-content-s4 > div div {
    border-radius: 10px;
}

.dashboard-body-content-s4 > div:nth-child(2) > div:first-child > h2 {
    color: #030229;
    font-weight: bold;
    font-size: 1.13rem;
}

.rental-title {
    color: #030229;
    font-weight: bold;
    font-size: 1.13rem;
}

.doughnut-chart-contanier {
    width: 160px;
    height: 160px;
}

.doughnut-labels > div {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.doughnut-labels:first-child > div {
    background-color: #5b93ff;
}

.doughnut-labels:nth-child(2) > div {
    background-color: #ffd66b;
}

.doughnut-labels > h2 {
    font-size: 14px;
}

/* details buttons */
.btn-yellow {
    width: 120px;
    height: 37px;
    background-color: #ffd66c;
    border-radius: 10px;
    color: white;
}

    .btn-yellow:hover {
        background-color: white;
        color: #ffd66c;
        border: 2px solid #ffd66c;
    }

.btn-orange {
    width: 120px;
    height: 37px;
    background-color: #ff8f6b;
    border-radius: 10px;
    color: white;
}

    .btn-orange:hover {
        background-color: white;
        color: #ff8f6b;
        border: 2px solid #ff8f6b;
    }

.btn-blue {
    width: 120px;
    height: 37px;
    background-color: #46aaf7;
    border-radius: 10px;
    color: white;
}

    .btn-blue:hover {
        background-color: white;
        color: #46aaf7;
        border: 2px solid #46aaf7;
    }

.btn-pink {
    width: 120px;
    height: 37px;
    background-color: #f29ac2;
    border-radius: 10px;
    color: white;
}

    .btn-pink:hover {
        background-color: white;
        color: #f29ac2;
        border: 2px solid #f29ac2;
    }

.fa-circle-info {
    font-size: 20px;
    margin-bottom: 6px;
}

.btn-green {
    width: 120px;
    height: 37px;
    background-color: #95e281;
    border-radius: 10px;
    color: white;
}

    .btn-green:hover {
        background-color: white;
        color: #95e281 !important;
        border: 2px solid #95e281;
    }
/**        */
.badge-secondary, .badge-dark {
    width: 36px;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    max-width: 290px;
    transition: all 0.3s;
}

    #sidebar.active {
        margin: 10px;
        width: 40px;
    }

    #sidebar ul li.active > a,
    a[aria-expanded="true"] {
        color: #fff;
        background: #6d7fcc;
    }

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.bar-labels > div {
    height: fit-content;
}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

canvas#bubbleChart {
    height: 100% !important;
}

.navbar {
    display: block;
}

.input-group {
    display: flex !important;
}

.sm-des .pl-3 {
    padding-right: 1rem !important;
}

table {
    width: 70% !important;
    border-collapse: collapse;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@viewport {
    width: device-width;
    zoom: 1;
}

@media (min-width: 576px) {
    .dashboard-s1-cards > div {
        width: 370px;
    }

        .dashboard-s1-cards > div > div:nth-child(2) > h2 {
            font-size: 1.37rem;
        }

    .dashboard-s2-cards > div {
        box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
        height: 138px;
        border-radius: 10px;
        width: 148px;
        margin: 0px 15px;
    }

    .dashboard-s1-cards > div > div:nth-child(2) > h2 {
        font-size: 1.37rem;
    }
}

@media (min-width: 425px) {
    .dashboard-s2-cards > div {
        width: 160px;
        height: 150px;
        font-size: 0.61rem;
    }

    .dashboard-s1-cards > div {
        width: 100%;
    }
}

@media (max-width: 425px) {
    #sidebar {
        max-width: 300px;
        transition: all 0.3s;
    }

    h2 {
        font-size: 0.9rem;
    }

    .dashboard-sidebar > div > div div > a {
        width: auto;
        padding: 0;
    }



    .dashboard-sidebar-content {
        padding: 0px 15px !important;
    }

        .dashboard-sidebar-content svg {
            margin: 0 !important;
        }



    #sidebar.active {
        display: block !important;
    }

    .dashboard-s1-cards {
        width: 100%;
    }


        .dashboard-s1-cards > div {
            width: 100% !important;
            margin: 0 !important;
            flex-wrap: nowrap !important;
        }

            .dashboard-s1-cards > div > div:last-child {
                width: 50% !important;
                text-align: right;
            }

    .dashboard-s1-summary > div {
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .dashboard-s2-summary > div {
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

        .dashboard-s2-summary > div > h2 {
            text-align: right;
            line-height: 1.5;
        }

    .dashboard-s1-summary > div > h2 {
        text-align: right;
        line-height: 1.5;
    }

    .dashboard-s2-cards > div {
        box-shadow: 0 1px 8px rgb(0 0 0 / 15%);
        height: 90px;
        border-radius: 10px;
        width: 100px;
        margin: 0px 15px;
    }

        /* ICONS */
        .dashboard-s2-cards > div > div:first-child {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .dashboard-s2-cards > div > div:nth-child(2) > h2 {
            font-size: 0.81rem;
            font-weight: 800;
            color: #030229;
        }

        .dashboard-s2-cards > div > div:nth-child(2) > h3 {
            font-size: 0.61rem;
            font-weight: 600;
            color: #030229;
        }


    /* 
    Generic Styling, for Desktops/Laptops 
    */
    table {
        width: 100% !important;
        border-collapse: collapse;
    }
    /* Zebra striping */
    tr:nth-of-type(odd) {
        background: #eee;
    }

    th {
        /*background: #333;
        color: white;*/
        font-weight: bold;
        font-size: 8px;
    }

    td, th {
        padding: 0px !important;
        margin: 0px !important;
        border: 1px solid #ccc;
        text-align: left;
        font-size: 8px;
    }
}

@media (max-width: 576px) {
    .sm-des {
        width: 100% !important;
        justify-content: end !important;
        margin-top: 1rem;
    }

    h2 {
        font-size: 0.9rem;
    }
}

@media (min-width: 768px) {
    #sidebar {
        max-width: 350px;
        margin-left: 0px;
    }

    .dashboard-sidebar.active > div > div div > a {
        justify-content: center;
        padding: 0px !important;
    }

    .wrapper .dashboard-body .partOne {
        justify-content: end !important;
    }

    #sidebar.active #sidebarCollapse {
        bottom: 0;
        top: unset !important;
    }

    .dashboard-sidebar.active > div > div div > a > h2 {
        display: none;
    }

    #sidebar.active {
        box-shadow: unset;
    }

    /*    div#formOuter .lang a {
        font-size: 15px;
    }*/
    .dashboard-sidebar-content-title h2 {
        font-size: 18px !important;
    }

    #sidebar.active .fa-angles-left {
        transform: rotate(180deg) scale(1.1) !important;
    }

    .dashboard-sidebar.active img[alt~="main-logo"] {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .signupform .container:first-child {
        width: 100% !important;
    }

    .dashboard-sidebar img[alt~="main-logo"], #sidebar {
        display: none !important;
    }

        #sidebar.active {
            display: block !important;
        }


    #sidebar {
        margin-left: 0px;
    }

    .dashboard-sidebar-content {
        padding: 0px !important;
    }

    #sidebar.active {
        margin: 0px 10px 0px 0px;
        position: absolute !important;
        display: block !important;
        width: 270px;
        z-index: 999;
        height: fit-content;
        left: -291px !important;
        top: 85px;
        border-radius: 10px;
    }

    #sidebarCollapse span, #sidebar span {
        display: none;
    }

    .pa-r-0 {
        padding-right: 0.5rem !important;
    }

    .lang {
        left: 10px !important;
        right: unset !important;
    }

    #app {
        padding: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        margin: auto !important;
        width: 100% !important;
        height: 100vh !important;
    }

    form#form0 {
        top: -18%;
    }

    .app-header, .app-header > * {
        font-size: 14px !important;
        font-weight: 900;
        letter-spacing: unset !important;
    }

    #login {
        overflow: hidden;
    }

    form#form0 {
        padding-top: 7rem !important;
    }

    .app-view {
        margin-top: 4rem;
    }

    .w3_info_heading h2 {
        font-size: 15px !important;
        font-weight: 900;
    }
}

@media (min-width: 1200px) {
    .ml-lg-3 {
        margin-left: 0px !important;
        margin-right: 1rem !important;
    }

    .left_grid_info img {
        object-position: -28px -5px;
        width: 670px;
    }

    .w3l_form {
        flex-basis: 55% !important;
        -webkit-flex-basis: 55% !important;
    }

    .hr-body-content-s2 > .pr-xl-3 {
        padding-left: 1rem !important;
    }

    #paralleBarChartTwo {
        height: 300px !important;
    }
}

@media (min-width: 1400px) {
    .col-xl-3.dashboard-s1-cards {
        flex: 0 0 18.5%;
        max-width: 18.5%;
    }
}