.data-content-action {
    width: 100%;
}

@media screen and (max-width: 1600px) {
    html, body {
        font-size: 14px;
    }

    .common-page-content-header_form-control, .investment-page-header_form-control {
        width: 51%;
    }

    .chosen-container-single .chosen-single div b {
        top: 10%;
    }
}

@media screen and (max-width: 1399px) {
    .donut-chart .circle {
        width: 5rem;
        height: 5rem;
    }

    .donut-chart-sm .circle {
        width: 4rem;
        height: 4rem;
    }

    .chosen-container-single .chosen-single div b {
        top: 50%;
        transform: translateY(-50%);
    }
}
@media screen and (min-width: 1025px) {
    .toggle-btn-sidebar {
        display: none;
    }
    .toggle-btn-desktop {
        display: flex;
    }
    .toggle-btn-tablet {
        display: none;
    }
}



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

        .toggle-btn-desktop {
            display: none;
        }

        .toggle-btn-tablet {
            display: flex;
        }
        .toggle-btn-sidebar {
            background: none;
            border: none;
            font-size: 1.5rem;
            position: absolute;
            background: none;
            border: none;
            display: flex;
            width: 1.5rem;
            height: 1.5rem;
            right: 1.5rem;
            top: 1rem;
        }
            .toggle-btn-sidebar:focus,
            .toggle-btn-sidebar:focus-visible {
                outline: none;
            }
            html, body {
            font-size: 12px;
            margin: 0;
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }
        .sidebar {
            width: 100%;
            position: absolute !important;
            z-index: 11;
            background: rgba(0,0,0,0.5);
            padding-bottom: 0;
            display: none !important;
        }
         .sidebar.showSidebar {
                display: flex !important;
            }
        .sidebar-menu {
            width: 80%;
            height: 100%;
            background: var(--sh-bg-white);
            position: relative;
        }

            .sidebar.collapsed {
                width: 100% !important;
                display: none !important;
            }
 


                .main-content {
                    margin-left: 0 !important;
                    min-height: 0;
                }

        .main-header {
            height: 5rem;
            position: sticky;
            top: 0;
            z-index: 10;
            background: #fff;
        }
    }

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

        .main-header {
            padding: 0 0.25rem;
            width: 100%;
            gap: 0.25rem;
        }

            .main-header .toggle-btn {
                left: 0.5rem;
            }

        .header-profile-section-img {
            width: 2rem;
            height: 2rem;
        }

        .header-profile-section-header {
            min-width: 9.75rem;
        }

        .header-profile-section-dropdown {
            min-width: 9.75rem;
        }



        .collapsed + .main-content .header-role,
        .collapsed + .main-content .header-profile-section {
            opacity: 1;
        }

        .sidebar + .main-content .main-content-inner {
            position: relative;
        }

            .sidebar + .main-content .main-content-inner:before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                content: '';
                z-index: 1;
                background: rgba(0, 0, 0, 0.4);
            }

        .collapsed + .main-content .main-content-inner,
        .collapsed + .main-content .main-content-area {
            background: none;
            pointer-events: auto;
        }

            .collapsed + .main-content .main-content-inner:before {
                display: none;
            }

        .sidebar + .main-content .main-content-inner:before {
            display: none !important;
        }

        div.dt-container div.dt-search,
        div.dt-container div.dt-length {
            text-align: right;
            margin-block-end: 1rem;
        }


        div.dt-container div.dt-info {
            margin-block-end: 1rem;
        }



        table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
        table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
            position: relative;
            top: 2px;
        }

        div.dt-container div.dt-search label {
            margin-block-end: 2px;
        }
    }

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



    @media (max-width: 1024px) {
        .main-content-inner .dashboard-widget-wrap:last-child {
            /*        margin-block-end: 1rem;*/
        }
        /* Leave Request Page */
        /*Employe Request Page */
        .reques-card-wrap {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

            .reques-card-wrap .request-card {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
                flex-direction: row;
                align-items: center;
                padding-inline: 0.25rem;
                text-align: left;
                justify-content: left;
                padding-block: 0.5rem;
                border-radius: 0.25rem;
                font-size: 0.75rem;
            }

        .request-card {
            padding: 0 0.25rem;
        }

            .request_tab .request-card-icon,
            .request-card .request-card-icon {
                margin-block-end: 0 !important;
                width: 1.5rem;
                height: 1.5rem;
                display: none;
            }

        .request-card-icon-img {
            height: 1.5rem;
        }

        .reques-card-wrap .request-card-title {
            text-align: left !important;
            margin-block-end: 0 !important;
        }

        .Detail_pannel h5.mb-1 {
            margin-block-end: 1rem !important;
            width: 100%;
        }

        /* Leave Request Page */
        .tbl-filter-wrap .control-wrap {
            min-width: 12rem;
        }
    }

    /* Dasboard Page */
    @media (max-width: 991px) {

        .dashboard-widget-wrap_attendence .dashboard-widget {
            flex: 0 0 calc(50% - 0.5rem);
        }

        .dashboard-widget-wrap_attendence .flex-1.dashboard-widget {
            order: 3;
            flex: 1;
        }

        #divpopupContainer_HolidayList {
            grid-template-columns: repeat(2, 1fr);
        }

        .dashboard-widget-holiday_leave .bordered-widget.flex-1 {
            /*            flex: unset;*/
        }
        /*  Leave Request Page */
        .leve-resignation-page .req-content5 .card-body .resign-info-panel {
            order: 1;
            display: block;
            width: 100%;
            height: auto !important;
        }

        .leve-resignation-page .req-content5 .card-body > .d-flex > .flex-1 {
            order: 2;
        }
        /* Request Approval Page */
        .request-approval-subheader__col {
            flex-basis: 48%;
        }

        .common-page-content-header_form .col-md-3 {
            width: 50%;
        }

        .common-card-template .vr {
            display: none;
        }

        .order-custom-wrap {
            flex-direction: column;
            width: 100%;
        }

        .order-1-custom {
            order: 1;
            margin-inline: auto;
        }

        .order-2-custom {
            order: 2;
        }
        .emp-profile-section-content {
            gap: 1rem !important;
            flex-wrap: wrap;
        }
    }

    @media screen and (max-width: 767px) {
        /* ommon Css for Tab */

        .nav-pills .nav-link {
            border: 1px solid var(--sh-dark-blue);
            background: var(--sh-bg-white);
            color: var(--sh-dark-blue);
            width: 100%;
            font-size: 0.75rem;
            padding-inline: 0.25rem;
        }

            .nav-pills .nav-link.active {
                background: var(--sh-dark-blue);
                color: var(--sh-bg-white);
                border-color: var(--sh-dark-blue);
            }

        .common-card-template .card-header .card-header_text {
            gap: 0.25rem;
        }

        .sh-grid-col-wrap {
            grid-template-columns: repeat(1, 1fr);
        }

        .period-header h5 {
            align-items: center;
            font-size: 0.875rem;
        }



        .section-header-card .vr {
            display: none;
        }

        .common-tab .nav {
            display: grid;
            grid-template-columns: repeat(2,1fr);
        }

        .section-header-card .invst-dec_wrap-left {
            order: 2;
            display: block;
            width: 100%;
            flex: unset;
        }

        .section-header-card .invst-dec_wrap-right {
            order: 1;
            justify-content: center;
            margin-inline: auto;
        }

        .section-header-card .col-sm-3 {
            width: 50%;
        }

        .status-leave-shift {
            grid-template-columns: repeat(1, 1fr);
        }

        .pending-confirm-tab .nav-link i {
            font-size: 1rem;
        }

        .rating-section {
            flex-basis: 50%;
        }
        #Div_SummaryConatiner {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
            #Div_SummaryConatiner .col .info-card {
                width: 100%;
                height: 100%;
            }
    }

    @media (max-width: 680px) {
        .login-section {
            flex-direction: column;
        }

        .login-section_left {
            width: 100%;
            height: 9rem;
            margin-inline: auto;
        }

        .login-section {
            margin-inline: 0.5rem;
        }

        .login-section_right {
            padding: 1.5rem;
        }

        .common-page-content-header, .common-page-content-wrap {
            padding: 0.75rem !important;
        }

        #btn_addDevelopment, #btn_FinalSubmit {
            padding-inline: 0.5px;
        }

        .period-header h5 i {
            font-size: 1rem;
        }

        .period-header {
            padding-inline: 0.5rem;
        }
    }

    @media (max-width: 640px) {
        .dashboard-widget-wrap_attendence .dashboard-widget {
            flex-basis: 100%;
        }

        .dashboard-widget-wrap .flex-1 {
            flex-basis: 100%;
        }

        .flex-1.birthday-info-card_content {
            flex: 1;
        }

        .sidebar-menu a {
            font-size: 0.75rem;
        }

        .birthday-info-card {
            min-width: 0;
        }

        .sidebar-menu a.menu-text {
            font-size: 0.75rem;
        }
        /* Request Approval Page */
        .req-wrap-header .input-group-search-wrap_content {
            width: 100%;
            margin-block-end: 1rem;
            max-width: 100%;
        }

        .req-wrap-header .common-form-section {
            margin-inline-start: auto;
        }
        div.dt-container div.dt-search input {
            margin-left: 0;
        }
    }

    @media screen and (max-width: 575px) {
        .data-content-parent-action .form-select {
            margin-block-end: 1rem;
        }

        h1 {
            font-size: 2rem;
        }

        h2 {
            font-size: 1.5rem;
        }

        h3 {
            font-size: 1.25rem;
        }

        h4 {
            font-size: 1.125rem;
        }

        h5 {
            font-size: 1rem;
        }

        div.dt-container div.dt-search input,
        div.dt-container div.dt-search label {
            width: 100%;
        }

        div.dt-container div.dt-length input {
            text-align: left;
        }
        #btnNewTop {
            margin-block-start: 1rem;
        }
    }

    @media (max-width: 580px) {
        .donut-chart-wrap {
            grid-template-columns: repeat(2, 1fr);
        }

        .dashboard-widget-holiday_leave .dashboard-widget-content {
            height: auto;
            width: 100%;
        }

        #divContainer_Holiday {
            width: 100%;
            margin-block-end: 1rem;
        }
        .mt-mob-2 {
            margin-block-start: 1rem;
        }
    }

    @media (max-width: 432px) {
        .reques-card-wrap .request-card-title {
            font-size: 0.625rem;
        }
    }