@media only screen and (max-width:1600px) {
    .card-icon {
        width: 40px;
        min-width: 40px;
    }

    .card-full {
        padding: 15px;
    }

    .card-boxes .card-full {
        min-height: 65px;
    }

    .emp-boxes span {
        font-size: 25px;
    }

    .four-col .card-boxes {
        padding: 15px;
    }

    .leave-alert {
        height: 130px;
    }

    .table-leave-record {
        height: calc(100vh - 300px);
    }

    .table td {
        padding: 10px 20px;
    }

    .table_wrapper.full_table_wrapper {
        height: calc(100% - 85px);
        overflow-y: scroll;
    }

    .display-date {
        font-size: 18px;
    }

    .timer .display-time,
    .display-date #daynum {
        font-size: 36px;
    }

    /*------------------- tableheight----------------- */
    .table-employee {
        height: calc(100vh - 320px);
        overflow: hidden;
    }

    /*-------------------end of tableheight----------------- */
    .kpi-achivements table td p.increase:after,
    .kpi-achivements table td p.decrease:after {
        right: -12px;
    }

    ul#tabs-nav {
        margin-left: -20px;
    }

    .tab-item {
        padding: 5px 20px 15px 20px;
    }

    .posted_media-wrapper {
        position: relative;
        margin-right: 20px;
        width: 25%;
        min-height: 120px;
        max-height: 120px;
        max-width: 185px;
    }

    .attendance-sheet .full_table_wrapper {
        height: calc(100% - 135px);
    }

    .attendance-indicator-wrapper {
        position: relative;

    }

    .event-grp-name {
        max-width: 140px;
    }

    .flight-ticket-table table td {
        padding: 15px;
    }

    .flight-ticket-table .table_wrapper .table_head td {
        padding: 15px;
    }

    .course-list {
        height: 483px;
    }

    .buttons button:before {
        width: 44px !important;
        font-size: 16 !important;
    }

    .buttonsvolume button:before,
    .fullscreenbtn:before {
        font-size: 16px !important;
    }

    .payroll-file .full_table_wrapper {
        height: auto
    }

    .training-file-wrap .image-name {
        max-width: 193px;
    }

    .extra-filter .table-search {
        width: 266px;
    }

    .extra-filter .table-search {
        width: 220px;
    }

    .search-txt {
        width: 175px;
    }

    .course-list {
        height: 430px;
    }

    .employee-directory-home .table-top h4 {
        margin-bottom: 10px;
    }

    .hr-request-table .flight-ticket-link {
        top: 10px;
    }

    .accordion-content td {
        padding: 15px 20px;
    }

    .kpi_approval_table .full_table_wrapper {
        height: calc(100% - 75px);
    }
    #errorModal{
        padding-top: 125px;
    }
}

@media only screen and (max-width:1440px) {
    .mb-20 {
        margin-bottom: 15px;
    }

    .mt-20 {
        margin-top: 15px;
    }

    .ml-20 {
        margin-left: 15px;
    }

    .p-20 {
        padding: 15px;
    }

    .card-boxes {
        padding: 15px;
    }

    .content {
        margin: 85px 15px 15px 275px;
        width: calc(100% - 290px);
    }

    .m-10-minus {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }

    .m-20-minus {
        margin-left: -15px;
        margin-right: -15px;
    }

    .mx-10 {
        margin: 0 7.5px;
    }

    .timer .display-time,
    .display-date #daynum {
        font-size: 32px;
    }

    .vertical-line {
        height: 35px;
        margin: 5%;
    }

    .display-date {
        font-size: 17px;
    }

    .select-selected {
        font-size: 17px;
    }

    .wish-box {
        height: 419px;
    }

    .leaves-works {
        height: 470px;
    }

    .table-dashboard {
        height: 370px;
    }

    .table-hr-dashboard {
        max-height: 370px;
    }

    /*------------------- tableheight----------------- */
    .table_wrapper.full_table_wrapper {
        height: calc(100% - 85px);
        overflow-y: scroll;
    }

    .table-full-screen {
        height: calc(100vh - 200px);
    }

    .table-employee {
        height: calc(100vh - 280px);
        overflow: hidden;
    }

    .full-screen {
        min-height: calc(100vh - 145px);
        height: 100%;
    }

    .table-roles {
        height: calc(100vh - 145px);
    }

    .minimum-height {
        min-height: calc(100vh - 155px);
        height: 100%;
    }

    .table-employee {
        height: calc(100vh - 295px);
    }

    .table-kpi {
        min-height: calc(100vh - 155px);
    }

    /* ----------------table row paddin-------------- */
    /* table dashboard  */
    .table_wrapper.table-dashboard td {
        padding: 15px;
    }

    .table_wrapper.table-dashboard thead td {
        padding: 15px 10px;
    }

    .table_wrapper.table-hr-dashboard td {
        padding: 10px;
    }

    .table_wrapper.table-hr-dashboard thead td {
        padding: 15px 10px;
    }

    /* ----------------end of table row paddin-------------- */
    /*-------------------end of tableheight----------------- */

    .accordian-content .button-block {
        padding-top: 15px;
    }

    .accordian-content .table_wrapper {
        margin-left: -15px;
        margin-right: -15px;
    }

    .add-pic {
        min-width: 125px;
    }

    .avatar-upload {
        height: 125px;
    }

    .table-top .table-search {
        width: 200px;
    }

    .table-top .SumoSelect {
        width: 120px;
    }

    .table-top>div>*,
    .table-top>.table-form>* {
        margin: 0 7.5px;
    }

    .table-top>div,
    .table-top>.table-form {
        margin: 0 -7.5px;
    }

    .table-top .table-search {
        width: 200px;
    }

    .table-top .SumoSelect {
        width: 120px;
    }

    .table-top.sumo-tabletop .SumoSelect {
        width: auto;
    }

    .posted_media-wrapper {
        position: relative;
        margin-right: 15px;
        width: 25%;
        min-height: 100px;
        max-height: 100px;
        max-width: 155px;
    }

    .multiple-item-three>li:last-child .posted_media {
        margin: 2px 0;
    }

    .multiple-item-three .circle_percent,
    .multiple-item-two .circle_percent {
        width: 0.6em;
        height: 0.6em;
    }

    .multiple-item-three .percent_text::after,
    .multiple-item-two .percent_text::after {
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 7px solid #00A293;
        margin-left: 3px;
    }

    .more-image-overlay {
        font-size: 16px;
    }

    .notification-alert,
    .profile-pop {
        right: 15px;
    }

    .corporate-video-list .table_wrapper,
    .job-description-list .table_wrapper {
        height: calc(100vh - 220px);
    }

    .job-form-wrapper {
        padding-bottom: 15px;
    }

    .bottom-list .card-details h6,
    .right-list .card-details h6 {
        font-size: 13px;
    }

    .margin-full-page {
        margin: 15px;
    }

    .attendance-sheet {
        height: calc(100vh - 200px);
    }

    .attendance-sheet .full_table_wrapper {
        height: calc(100% - 130px);
    }

    .attendance-indicator-wrapper {
        position: relative;

    }

    .event-grp-name {
        max-width: 115px;
    }

    .events-list-item {
        width: 15.66%;
    }

    .course-list {
        height: 437px;
    }

    .course-list .training-details p {
        font-size: 14px;
    }

    .video-details {
        margin: 25px auto 25px;
    }

    .training-inside>div {
        margin: 0 20px;
    }

    .training-inside {
        margin: 0 -20px;
    }

    .buttons button:before {
        width: 42px !important;
        font-size: 15px !important;
        padding: 10px 15px !important;
    }

    .three-d-swipper {
        padding: 30px;
    }

    .three-d-swipper h5 {
        font-size: 15px;
    }

    .training-swipper-title {
        font-size: 26px;
        line-height: 40px;
    }

    .slide-caption {
        font-size: 18px !important;
    }

    .attendence-user-view {
        height: calc(100vh - 305px);
    }

    .emp-boxes span {
        font-size: 23px;
    }

    .emp-boxes h5 {
        font-size: 13px;
    }

    .emp-boxes p {
        font-size: 13px;
    }

    .date-indicate li {
        width: 30px;
        height: 30px;
        font-size: 13px
    }

    .approve-complete::after,
    .approve-reject::after,
    .approve-pending::after {
        background-size: 16px;
    }

    .table_wrapper .approved li img {
        width: 25px;
        min-width: 25px;
        height: 25px;
    }

    .payroll-file .full_table_wrapper {
        height: auto
    }

    .salary-info .full_table_wrapper {
        max-height: calc(100vh - 205px);
    }

    .training-file-wrap .image-name {
        max-width: 174px;
    }

    .training-file-wrap .remove-file {
        margin-left: 15px;
    }

    .payroll-body .table-top .SumoSelect:nth-child(3) {
        width: auto;
    }

    .table-probation .table-top .SumoSelect {
        width: auto;
    }

    .perfor-appraisal-table .table-top .SumoSelect {
        width: auto;
    }

    .three-col-row .form-feild-box {
        margin: 0 7.5px !important;
        width: calc(33.33% - 15px);
    }

    .header {
        padding: 0 15px 0 15px;
    }

    .w-68 {
        width: calc(66.66% - 15px);
    }

    .w-32 {
        width: calc(33.33% - 15px);
    }

    .hr-dashboad-home .rescent-act {
        height: 420px;
    }

    .file-folder-items {
        width: 24%;
    }

    .request-rescent .table-hr-dashboard {
        min-height: 370px;
    }
    .attendance-sheet .date-range-att{
        padding-right: 34px;
      }

}

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

    /*-------------------- login----------- */
    .login-box>p {
        margin: 15px 0 20px;
        font-size: 13px;
    }

    .login-title {
        margin-bottom: 10px;
    }

    .login-title h3 {
        font-size: 18px;
        line-height: 21px;
    }

    .login-title p {
        font-size: 13px;
    }

    .login-form ul .input_box {
        margin-top: 15px;
    }

    .input-item {
        font-size: 13px;
        height: 35px;
        padding: 9px 12px;
    }

    .form-icon {
        width: 17px;
        top: 7px;
    }

    .recover {
        margin-top: 10px;
    }

    .recover a {
        font-size: 13px;
    }

    .submit-box {
        margin-top: 20px;
    }

    .login-footer {
        margin-top: 70px;
    }

    .login-box {
        width: 380px;
        padding: 20px;
    }

    .login-submit {
        min-height: 35px;
    }

    /* .login-form .input_box:first-child .input-item,
    .login-form .input_box:nth-child(2) .input-item{
        background-position: right 15px center ;
        background-size: 18px;
    } */
    /*-------------------end of login----------- */

    /*------------------------------- table properties------------------ */
    .table-search {
        width: 200px;
        height: 28px;
    }

    .search-icon {
        width: 15px;
        height: 25px;
    }

    .SumoSelect>.CaptionCont {
        min-height: 30px;
        max-height: 30px;
        font-size: 13px;
        line-height: 14px;
    }

    .accordian-content td .SumoSelect>.CaptionCont {
        padding: 4px 8px;
    }

    .table .table_head td {
        font-size: 13px;
        line-height: 14px;
    }

    .table td {
        font-size: 13px;
        line-height: 14px;

    }

    .select-default {
        height: 30px;
    }

    .pagination-count,
    .pagination a {
        font-size: 13px;
    }

    .table-top h4 {
        font-size: 15px;
    }

    .table-search {
        font-size: 13px;
    }

    .leave-alert {
        height: 125px;
    }

    /* .table-leave-record {
        height: calc(100vh - 365px);
    } */

    /*------------------ end of table------------------- */
    /*------------------- tableheight----------------- */
    .table_wrapper.full_table_wrapper {
        height: calc(100% - 85px);
        overflow: auto;
    }

    .table_wrapper.full_table_wrapper::-webkit-scrollbar {
        display: block;
        height: 10px;
        width: 0;
    }

    .table_wrapper.full_table_wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .table_wrapper.full_table_wrapper::-webkit-scrollbar-thumb {
        background: rgb(177, 177, 177);
    }


    .table-full-screen {
        height: calc(100vh - 194px);
    }

    .table-holidays {
        height: calc(100vh - 194px);
    }

    .table-employee {
        height: calc(100vh - 280px);
        overflow: hidden;
    }

    .full-screen {
        min-height: calc(100vh - 145px);
        height: 100%;
    }

    .table-roles {
        height: calc(100vh - 145px);
    }

    .minimum-height {
        min-height: calc(100vh - 150px);
        height: 100%;
    }

    .corporate-video-list .table_wrapper,
    .job-description-list .table_wrapper {
        height: calc(100vh - 210px);
    }

    /*-------------------end of tableheight----------------- */
    .menu_link .link-text,
    .sub-menu-item a {
        font-size: 13px;
    }

    .card-boxes h4 {
        font-size: 15px;
    }

    .gradient-button {
        font-size: 13px;
        padding: 6px 18px;
    }

    .white-button {
        font-size: 13px;
        padding: 6px 18px;
    }

    .form-box label {
        font-size: 13px;
        line-height: 15px;
        margin-bottom: 8px;
    }

    .input-box input,
    .input-box select {
        font-size: 13px;
        line-height: 15px;
    }

    .input-box .SumoSelect>.CaptionCont {
        font-size: 13px;
        padding: 5px 10px;
    }

    .graph-indicators li {
        padding-left: 10px;
    }

    .wish-list-img {
        width: 50px;
        height: 50px;
    }

    .holiday-date-box h6 {
        font-size: 20px;
        line-height: 20px
    }

    .holiday-date-box,
    .job-icon {
        min-width: 50px;
        height: 50px;
        width: 50px;
    }

    .trainging-vedio {
        width: 54px;
        height: 54px;
    }

    .right-list li {
        padding: 15px 0;
    }

    .page-top h4 {
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
    }

    .page-top p,
    .page-top a {
        font-size: 13px;
        line-height: 14px;
    }

    .emp-boxes h5 {
        font-size: 12px;
        line-height: 14px;
    }

    .emp-boxes p {
        font-size: 12px;
    }

    .emp-boxes span {
        font-size: 22px;
        line-height: 23px;
    }

    .select-default {
        font-size: 13px;
        line-height: 14px;
    }

    .select-default {
        height: 30px;
    }

    .pagination-count,
    .pagination a {
        font-size: 13px;
    }

    .table-top h4 {
        font-size: 15px;
    }

    .table-search {
        font-size: 13px;
    }

    .table-top p {
        font-size: 13px;
        line-height: 14px;
    }

    /* .SelectBox, .SumoSelect.open .search-txt {
    padding: 10px 8px;
} */
    .form-feild-box input,
    .form-feild-box select {
        height: 30px;
        width: 100%;
        font-size: 13px;
    }

    .setting-button>span {
        font-size: 22px;
    }

    .gradient-button {
        min-height: 30px;
        max-height: 30px;
    }

    .table-top .gradient-button {
        max-height: 30px;
    }

    .setting-button {
        min-height: 30px;
    }

    .input-box input,
    .input-box select {
        height: 30px;
    }

    .SelectBox,
    .SumoSelect.open .search-txt {
        padding: 8px;
    }

    /* .accordian-content .SelectBox, .SumoSelect.open .search-txt {
    padding: 4px 8px;
} */
    .drag-text h3 {
        font-size: 13px;
    }

    .drag-text p {
        font-size: 11px;
    }

    .button-block .white-button,
    .button-block .gradient-button {
        height: 35px;
    }

    .five-col .file-uploaded h6 {
        font-size: 13px;
    }

    .new-file p {
        font-size: 13px;
    }

    .table-top .SumoSelect {
        margin-left: 10px;
    }

    .table-top div button,
    .table-top div a {
        margin-left: 10px;
    }

    .table-top-icon span {
        font-size: 20px;
    }

    .table-top .date-selector,
    .table-top .month-selector {
        font-size: 13px;
        padding: 0 8px;
        min-height: 30px;
        max-height: 30px;
    }

    /* .payslip-table .form-feild-box {
    padding: 15px 15px 0px 15px;
} */
    .grey-bottom ul,
    .green-bottom ul {
        padding: 15px 25px;
    }

    /* .salary-upload .sal-slip-upload{
    width: 98%;
 } */
    /* appraisal */
    .center-title h5 {
        font-size: 17px;
    }

    .form-feild-box label {
        font-size: 13px;
    }

    .side-title h6 {
        padding-top: 6px;
    }

    .table_wrapper .table-box {
        min-height: 30px;
    }

    .table-note p {
        font-size: 12px;
    }

    .side-title p {
        font-size: 12px;
    }

    .side-title h4 {
        font-size: 15px;
    }

    .table-inner-box {
        font-size: 12px;
    }

    .total-box {
        height: 35px;
    }

    .bg-sec h5 {
        font-size: 15px;
    }

    .perfo-grade-confirm li {
        font-size: 13px;
    }

    .perfo-grade-confirm textarea {
        margin: 15px 0;
    }

    .signature-section {
        margin-bottom: 10px;
    }

    .page-top .top-btn-grp {
        margin-left: -7px;
        margin-right: -7px;
    }

    .page-top .top-btn-grp * {
        margin: 0 7px;
    }

    .four-col .card-boxes {
        margin: 0 7px;
        width: calc(25% - 15px);
    }

    .table-kpi {
        min-height: calc(100vh - 149px);
    }

    .table-kpi-more {
        min-height: calc(100vh - 235px);
    }

    .hod_table_wrapper {
        min-height: calc(100vh - 295px);
    }

    .table-kpi input {
        font-size: 13px;
        height: 30px;
    }

    .table-kpi .table table .goal_add_table td input {
        min-height: 30px;
    }

    .emp-boxes {
        margin-left: 12px;
    }

    .leave-alert h5 {
        font-size: 12px;
    }

    .achivement-list ul li {
        padding-bottom: 12px;
    }

    /*----------------- notification---------------- */
    .pop-body h5 {
        font-size: 16px;
    }

    .notifi-info p {
        font-size: 13px;
    }

    .notifi-info .alert-time {
        font-size: 11px;
    }

    .notification-alert .notification-list {
        margin: 20px -15px 0 -15px;
    }

    /*-----------end of notification----------------- */
    .accordian-content .form-control {
        font-size: 14px;
    }

    .accordian-content .table-card-block.table-card-visible tbody td {
        padding: 10px 10px;
    }

    .accordian-content .table-card-block.table-card-visible tr td:first-child {
        padding-left: 10px;
    }

    .accordian-content .table-card-block.table-card-visible tr td:last-child {
        padding-right: 10px;
    }

    .accordian-content .table-card-block.table-card-visible .kpi-btn {
        margin-left: 10px;
        min-width: 30px;
        height: 30px;
    }

    .accordian-content .form-control {
        font-size: 13px;
        height: 30px;
    }

    .accordian-content td .SumoSelect {
        min-width: auto;
    }

    .accordian-content .table_wrapper {
        margin-left: -15px;
        margin-right: -15px;
    }

    .avatar-upload .avatar-edit input+label {
        font-size: 13px;
    }

    /*------------------ pop up------------------- */
    .pop-body {
        padding: 15px;
    }

    .leave-req-form label {
        font-size: 13px;
    }

    .role-popup .input_box {
        padding: 15px 0;
    }

    .pop-body+.carousel__button {
        width: 20px;
    }

    .role-popup .input_box {
        padding: 10px 0;
    }

    .approve-item li:first-child {
        width: 50px;
        height: 50px;
    }

    .approve-item li span {
        font-size: 13px;
    }

    .form-items {
        padding-bottom: 15px;
    }

    .three-col-row .text-box label {
        font-size: 13px;
    }

    /*------------------end of  pop up------------------- */
    .tab-item a {
        font-size: 13px;
    }

    ul#tabs-nav {
        margin-left: -15px;
    }

    .tab-item {
        padding: 5px 15px 10px 16px;
    }

    .personal-info_wrapper {
        border-bottom: 1px solid #EAEAEA;
        padding-bottom: 15px;
        margin-top: 10px;
        margin-bottom: 19px;
    }

    .accordian-content .add-exp span {
        font-size: 25px;
    }

    .accordian-content .add-exp h6 {
        font-size: 15px;
    }

    .accordian-content .add-exp p {
        font-size: 13px;
    }

    .job-details li img {
        width: 45px;
        height: 45px;
    }

    .col-three .job-details a span {
        font-size: 14px;
    }

    .col-three .job-details h6 {
        font-size: 15px;
    }

    .col-three .job-details li:nth-child(2) span {
        font-size: 12px;
    }

    .col-three .job-details>li:nth-child(2) {
        margin: 10px 0;
    }

    .col-three .job-details p {
        font-size: 13px;
    }

    .col-three .job-details .job-type {
        margin: 10px -5px 15px;
    }

    .job-bg-green {
        font-size: 12px;
    }

    .email-resume a {
        font-size: 13px;
    }

    .accordian-content .col-three .col-three-item {
        margin: 2% 1%;
    }

    .address-box li h6 {
        font-size: 15px;
    }

    .address-box li+li {
        margin-top: 15px;
    }

    .address-box li p {
        font-size: 13px;
    }

    .address-box li .address-para {
        line-height: 18px;
    }

    .address-box li+li {
        margin-top: 15px;
    }

    .address-box li span {
        font-size: 12px;
    }

    .address-box li p {
        font-size: 13px;
    }

    .leave-req-form {
        margin-top: 20px;
    }

    [type="radio"]:checked+label:before,
    [type="radio"]:not(:checked)+label:before {
        width: 16px;
        height: 16px;
    }

    [type="radio"]:checked+label:after,
    [type="radio"]:not(:checked)+label:after {
        width: 8px;
        height: 8px;
    }

    .radio-btn-list p {
        margin-right: 40px;
    }

    .checkmark {
        height: 18px;
        width: 18px;
    }

    .checkmark-container .checkmark:after {
        left: 5px;
        top: 1px;
        width: 6px;
        height: 11px;
    }

    .checkmark-container {
        font-size: 13px;
        padding-left: 30px;
    }

    .req-certificate li {
        margin-bottom: 10px;
    }

    .req-certificate p {
        font-size: 13px;
    }

    .req-certificate li img {
        width: 28px;
    }

    /*-------------- medical insurence------------------ */
    .doc-list img {
        width: 34px;
    }

    .documents .doc-list .doc-name {
        font-size: 13px;
    }

    .insurance-card-holder {
        min-width: 260px;
    }

    /*---------------------------- dashboard--------------- */
    .write-box .text-feild textarea {
        font-size: 13px;
    }

    .post_btn .post-type {
        font-size: 13px;
    }

    .post_btn span {
        margin-right: 10px;
        font-size: 16px;
    }

    .post_btn span:first-child {
        font-size: 17px;
    }

    .post-profile-details h6 {
        font-size: 13px;
        line-height: 17px;
    }

    .post-profile-details .post-time {
        font-size: 11px;
        line-height: 19px;
    }

    .post-action li {
        margin-right: 25px;
        padding: 8px 15px;
    }

    .post-info .post-action li {
        padding: 0 10px;
    }

    .post-details .post-action {
        margin: 0 -10px;
    }

    .posted-coments .text-para p {
        font-size: 13px;
    }

    .posted-details p,
    .post-info h6 {
        font-size: 13px;
    }

    .job-para p {
        font-size: 13px;
    }

    .job-para {
        margin: 10px 0 15px;
    }

    .wish-list-img {
        width: 42px;
        height: 42px;
    }

    /* ------------------job-------------- */
    .setting-button.dlt>span {
        font-size: 18px;
    }

    .job-icon-hloder {
        width: 65px;
        height: 65px;
    }

    .live-job-details>li:nth-child(2) {
        margin-top: 15px;
        padding-bottom: 15px;
    }

    .live-job-details>li:nth-child(2) h5 {
        font-size: 18px;
        line-height: 25px;
    }

    .live-job-details .job-post-info>span {
        font-size: 13px;
        line-height: 19px;
    }

    .live-job-details .job-post-info>div {
        margin-top: 8px;
    }

    .mail-icon-hloder {
        width: 50px;
        height: 50px;
    }

    .live-job-details .mail-box span {
        font-size: 13px;
    }

    .live-job-details .mail-box a {

        font-size: 13px;
    }

    .live-job-details .job-details {
        padding-top: 20px;
    }

    .live-job-details .job-details h6 {
        font-size: 15px;
    }

    .live-job-details .job-details p {
        font-size: 13px;
        line-height: 18px;
        margin-top: 10px;
    }

    .job-summary {
        margin-bottom: 20px;
    }

    .job-description li {
        font-size: 13px;
        margin: 8px 0;
    }

    .form-box {
        padding-bottom: 10px;
    }

    .four-item-row {
        margin: 8px -1% 8px;
    }

    .drag-text .cloud {
        width: 25px;
    }

    .leave-docs {
        height: 135px;
    }

    .leave-docs .file-upload-content {
        padding-top: 10px;
    }

    .file-upload {
        padding: 15px;
    }

    .image-title-wrap {
        padding: 6px 10px;
    }

    .remove-image {
        margin-left: 15px;
    }

    .select-parent .select-drop {
        font-size: 13px
    }

    .select-parent .btn-list li a {
        font-size: 13px;
    }

    /* ----------corporate video---------------- */
    .corporate-video-upload {
        margin-bottom: 15px;
    }

    .remove-image span {
        font-size: 17px;
    }

    .col-three {
        margin: 10px -0.5% 0 -0.5%;
    }

    .col-three .col-three-item {
        width: 32.33%;
        margin: 0.5% 0.5%;
    }

    /* ---------------------events----------------- */
    .col-three-item .play-btn {
        width: 40px;
        height: 40px;
        padding: 9px 15px;
    }

    .col-three-item .play-btn svg {
        width: 13px;
        height: 17px;
    }

    .event-video-list .col-three-item h3 {
        font-size: 15px;
        margin: 8px 13px;
    }

    .view-docs-btn>span {
        font-size: 13px;
    }

    .attendance-sheet {
        height: calc(100vh - 195px);
    }

    .attendance-sheet .full_table_wrapper {
        height: calc(100% - 115px);
    }

    .attendance-sheet tr td span {
        font-size: 14px;
    }

    .table-attendance-indicator {
        margin-top: 15px;
    }

    .course-list {
        height: 402px;
    }

    .table-top h3 {
        font-size: 16px;
        line-height: 19px;
    }

    .media_player_wrapper {
        margin-top: 15px;
    }

    .course-list .training-details p {
        font-size: 13px;
        line-height: 17px;
    }

    .course-list {
        padding-top: 15px;
    }

    .course-step li {
        height: 3px;
    }

    .course-list li+li {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .training-inside {
        margin: 0 -15px;
    }

    .training-inside>div {
        margin: 0 15px;
    }

    .circle_percent {
        width: 0.8em;
        height: 0.8em;
        min-width: 29px;
    }

    .video-details p {
        margin-top: 15px;
        font-size: 13px;
    }

    .training-info .table-bg-light-blue {
        padding: 6px 15px;
        font-size: 12px;
    }

    .buttons button:before {
        width: 41px !important;
        font-size: 14px !important;
    }

    .training-swipper-title {
        font-size: 24px;
        line-height: 30px;
    }

    .slide-caption {
        font-size: 16px !important;
    }

    .play-vid {
        width: 35px;
        height: 35px;
    }

    .video-box .video-info h6 {
        font-size: 15px;
    }

    .video-box .course-inside p {
        font-size: 13px;
    }

    .video-box ul>div .drop-parent {
        right: 10px;
    }

    .tab-item a,
    .video-box .course-inside p {

        font-size: 13px;
    }

    .user-attendance-top .profile-round {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }

    .user-attendance-top ul>li label {
        font-size: 12px;
    }

    .user-attendance-top ul>li h6 {
        font-size: 14px;
        line-height: 16px;
    }

    .attendence-user-view {
        min-height: calc(100vh - 290px);
        height: auto;
    }

    .attendence-user-view .table_wrapper.full_table_wrapper {
        height: calc(100% - 65px);
    }

    .date-indicate li {
        margin: 0 3px;
    }

    .card-icon {
        width: 35px;
        min-width: 35px;
    }

    .emp-attendance-top .four-col .card-boxes {
        width: 27%;
    }

    .table-employee .table_wrapper.full_table_wrapper {
        height: calc(100% - 70px);
    }

    .maping_table table thead td {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .video-box .vid-title span {
        font-size: 13px;
    }

    .salary-info .full_table_wrapper {
        max-height: calc(100vh - 198px);
    }

    .payroll-body .table-top .SumoSelect:nth-child(3) {
        width: auto;
    }

    .table-probation .table-top .SumoSelect {
        width: auto;
    }

    .perfor-appraisal-table .table-top .SumoSelect {
        width: auto;
    }

    .search-txt,
    #rqst-subject {
        height: 30px;
    }

    .card-details h5 {
        font-size: 13px;
    }

    .status-select .SumoSelect>.optWrapper>.options li.opt label {
        font-size: 13px;
        padding: 9px 0;
    }

    .status-select .SumoSelect>.CaptionCont {
        font-size: 16px;
    }

    .status-select .SumoSelect>.CaptionCont>label {
        top: 17px;
        width: 38px;
        height: 38px;
    }

    .size-reduce .content {
        width: calc(100% - 105px);
        margin: 75px 20px 20px 90px;
    }

    .view-more-block {
        margin-top: 10px;
    }

    .col-four .card-boxes p {
        font-size: 13px;
    }

    .recruitment-home .mt-30 {
        margin-top: 15px;
    }

    .recruitment .col-four {
        margin-top: 15px;
    }

    .col-four .card-boxes>div {
        padding: 8px;
    }

    .share_btn_holder .select-drop {
        font-size: 13px;
    }

    .white-button {
        max-height: 30px;
        min-height: 30px;
    }

    svg.play-vid {
        width: 35px;
        height: 35px;
    }

    .swiper-slide-active .slide-caption:after {
        clip-path: polygon(9% 0%, 90% -1%, 100% 100%, 0% 94%) !important;
        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0) 89%) !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0) 89%) !important;
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: 16px !important;
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: 16px !important;
    }

    [class^="swiper-button-"] {
        width: 26px !important;
        height: 26px !important;
    }

    .video-details {
        margin: 20px auto 20px;
    }

    .training-inside .wish-box {
        padding: 20px 0 0;
    }

    #training_request-form .col-two-items .form-feild-box {
        margin-bottom: 15px;
    }

    .training_request-form .form-items {
        padding-bottom: 0px;
    }

    .no-job-found {
        min-height: auto;
        font-size: 13px;
    }

    #rqst-subject {
        font-size: 13px;
    }

    .display-date {
        font-size: 16px;
    }

    .timer .display-time,
    .display-date #daynum {
        font-size: 31px;
    }

    .reset-password-form #timer {
        font-size: 13px;
    }

    .video-section .plyr button {
        width: 40px;
        height: 40px;
        padding: 11px;
    }

    .join-now-sec .course-title,
    .pdf-viewer .course-title {
        font-size: 13px;
    }

    .pdf-viewer-wrapper .pdf-image {
        width: 55px;
    }

    .table-top .side-title {
        margin-top: 15px;
    }

    .table-box {
        min-height: 30px;
        padding: 7px 10px;
        line-height: 14px;
    }

    .table-top .side-title {
        margin-top: 15px;
    }

    .three-col-row {
        margin: 5px -7.5px 5px;
    }

    .form-feild-box>label {
        margin-bottom: 5px;
    }

    .sign-sec li {
        margin-bottom: 20px;
    }

    .form-feild-box .checkmark+label {
        font-size: 13px;
    }

    .table-raw-box {
        min-height: 30px;
        line-height: 18px;
        padding: 5px 10px;
    }

    .sign-sec span,
    .sign-sec label {
        font-size: 13px;
    }

    .event-list {
        margin: 15px -0.5% 0;
    }

    .col-three-item .gallery-dlt span {
        font-size: 16px;
    }

    .col-three-item .gallery-dlt {
        width: 30px;
        height: 30px;
    }

    .event-title input {
        min-height: 30px;
        font-size: 13px;
    }

    .hr-dashboad-home .rescent-act {
        height: 420px;
    }

    .file-folder {
        margin: 15px -0.5%;
    }

    .folder-content-wrapper {
        padding: 15px;
    }

    .folder-action {
        right: 15px;
    }

    .file-box img {
        margin-right: 7px;
    }

    .folder-details span {
        margin-left: 10px;
        font-size: 13px;
    }

    .leave-req-form input {
        height: 30px;
        font-size: 13px;
    }

    input.form-control {
        height: 30px;
        font-size: 13px;
    }

    textarea.form-control {

        font-size: 13px;
    }

    .leave-req-form .input_box {
        margin-bottom: 7.5px;
    }

    .fl-ticket-info-item p {
        font-size: 13px;
    }

    .col-two-three {
        margin: 10px 0 15px;
    }

    .input-box textarea {
        height: 135px;
    }

    .noc-include-salary p,
    .noc-include-education p {
        font-size: 13px !important;
    }

    .new-job-post-page .input-box {
        margin-bottom: 5px;
    }

    .attendance-sheet .full_table_wrapper {
        height: calc(100% - 130px);
    }

    .table-attendance-indicator {
        margin-top: 10px;
    }

    .profile-page .five-col>.input-box {
        width: calc(25% - 2%);
    }

    .qr-box {
        min-height: 232px;
    }

    .timer-box {
        min-height: 232px;
    }

    .qr-title h5 {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    .qr-block {
        margin: -7.5px;
    }

    .qr-image {
        width: calc(50% - 15px);
        margin: 7.5px;
    }

    .absent-round {
        display: flex;
        width: 14px;
        min-width: 14px;
        height: 14px;
        font-size: 10px;
    }
    .kpi_goal_overview_height{
        min-height: unset;
        max-height: 500px;
    }
    .attendance-sheet .date-range-att{
        padding-right: 34px;
      }
}

@media only screen and (max-width:1280px) {
    .side-menu {
        width: 240px;
    }

    .sidebar-menu {
        padding: 12px;
    }

    .menu_link>div {
        padding: 12px;
    }

    .submenu {
        padding: 15px 15px 15px 39px;
    }

    .size-reduce .side-menu {
        transform: translateX(-72%);
    }

    .avatar-box {
        margin: 0 21px;
    }

    .side-header {
        padding-right: 15px;
    }

    .sidebar-hover .side-menu-wrapper {
        width: 240px;
    }

    .header {
        width: calc(100% - 240px);
        margin: 0 20px 15px 240px;
    }

    .content {
        margin: 75px 15px 15px 255px;
        width: calc(100% - 270px);
    }

    .profile-round {
        min-width: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .bar_outer {
        width: 12px;
    }

    .size-reduce .header {
        width: calc(100% - 67px);
        margin: 0 20px 15px 67px;
    }

    .size-reduce .content {
        width: calc(100% - 97px);
        margin: 75px 20px 20px 82px;
    }

    .training-request-list mt-20.table_wrapper.full_table_wrapper {
        height: auto;
        overflow-y: scroll;
    }

    .training-request-list .table-full-screen {
        min-height: calc(100vh - 194px);
        height: auto;
    }

    .no-job-found {
        min-height: auto;
        font-size: 13px;
    }

    .events-list-item {
        width: 19%;
    }

    .hr-training-req-list .table-form {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .hr-training-req-list .table-form>* {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .employee-directory-home .four-col .card-boxes {
        width: calc(50% - 15px);
        margin-top: 7.5px;
        margin-bottom: 7.5px;
    }

    .employee-directory-home .four-col {
        margin-top: 7.5px;
        margin-bottom: -7.5px;
    }

    .request-home .four-col .card-boxes {
        width: calc(50% - 15px);
        margin-top: 7.5px;
        margin-bottom: 7.5px;
    }

    .request-home .four-col {
        margin-top: 7.5px;
        margin-bottom: -7.5px;
    }

    /*---------------------------------------------------- table height--------------------------------------- */
    .table-holidays {
        min-height: calc(100vh - 194px);
        height: auto;
    }

    .table-full-screen {
        min-height: calc(100vh - 194px);
        height: auto;
    }

    .table-employee {
        min-height: calc(100vh - 280px);
        height: auto;
    }

    .corporate-video-list .table_wrapper,
    .job-description-list .table_wrapper {
        min-height: calc(100vh - 210px);
        height: auto;

    }

    .table-roles {
        min-height: calc(100vh - 135px);
        height: auto;
    }

    .salary-info .full_table_wrapper {
        min-height: calc(100vh - 198px);
        max-height: unset;
    }

    /*---------------------------------------------------- table height--------------------------------------- */
    .apply-leave-page .input-box {
        width: calc(50% - 2%);
    }

    .flight-ticket-page .personal-info .personal-info-item {
        width: 23%;
        margin: 8px 1%;
    }

    .new-job-post-page .form-box .input-box {
        width: calc(50% - 2%);
    }

    .new-job-post-page .form-box .add-job-text-area {
        width: calc(100% - 2%);
    }

    .insurance-card-holder {
        min-width: 250px;
        width: 250px
    }

    .documents .doc-list {
        width: 100%;
    }

    .attendance-sheet .table-top>h4 {
        width: 100%;
    }
    .flight-ticket-page .personal-info .personal-info-item.flight_approve_leave_select_wrapper{
        width: 50%;
    }
    .received-input-wrapper{
        width: 100% !important;
    }

}

@media only screen and (max-width:1200px) {
    .hamburger-btn {
        display: block;
    }

    .toggle-btn {
        display: none;
    }

    .side-menu {
        transform: translateX(-100%);
    }

    .content {
        width: calc(100% - 30px);
        margin: 75px 15px 15px 15px;
    }

    /* .side-header{
        display: none;
    } */
    /* .side-menu{
        margin-top: 58px;
    } */
    .header {
        width: calc(100% - 0px);
        margin: 0 20px 15px 0px;
    }

    .header-logo-wrapper {
        display: block;
    }

    .side-bar-close {
        display: block;
    }

    .sidebar-hover .side-header {
        justify-content: space-between;
    }

    /* .content {
        transition: unset;
    }
    .header{
        transition: unset;
    } */
    /* .side-menu{
        transition: none;
    } */
    .side-menu .sidebar-menu {
        height: calc(100% - 220px);
    }

    .recruitment .col-four .card-boxes {
        width: calc(33.33% - 1%);
    }

    .side-menu.mobile-menu {
        transform: translate(0);
    }

    .employee-directory-home .table-employee .full_table_wrapper::-webkit-scrollbar {
        display: none;
    }
   
   

}

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

    /* ---------------DASHBOARD HOME----------------*/
    .dashboard-home {
        flex-direction: column;
    }

    .dashboard-home .w-30,
    .dashboard-home .w-70 {
        width: calc(100% - 15px);
        display: flex;
        flex-wrap: wrap;
    }

    .dashboard-home .w-30 {
        margin: 0;
        width: 100%;
    }

    .dashboard-home .w-70 {
        margin-top: -7.5px;
    }

    .dashboard-home .w-30>div {
        width: calc(50% - 15px);
        margin: 7.5px;
    }

    .dashboard-home .w-70>div {
        width: 100%;
        margin: 7.5px 0;
    }

    .timer .display-time,
    .display-date #daynum {
        font-size: 44px;
    }

    .dashboard-home .rescent-act {
        height: 370px;
    }

    .dashboard-home .w-30 .card-boxes.wish-box:last-child {
        margin-bottom: 0;
    }

    .dashboard-home .wish-box {
        height: 361px;
    }

    .post-action li {
        margin-right: 20px;
        padding: 8px 10px;
    }

    .display-date {
        font-size: 20px;
    }

    .timer-box::after {
        bottom: -13%;
    }

    .posted-coments .text-para p {
        margin-right: 0;
    }

    .holiday-date-box h6 {
        font-size: 18px;
        line-height: 18px;
    }

    .hr-dashboad-home .four-col>.card-boxes {
        width: calc(50% - 15px);
    }

    .hr-dashboad-home .four-col .card-boxes {
        margin: 7.5px;
    }

    .hr-dashboad-home .four-col.m-10-minus {
        margin-top: -7.5px;
        margin-bottom: -7.5px;
    }

    .rescent-act-wrapper {
        width: 100%;
    }

    .hr-dashboad-home .emp-boxes {
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: space-between;
    }

    .hr-dashboad-home .w-68 {
        width: 100%;
    }

    .hr-dashboad-home .w-32 {
        width: calc(50% - 15px);
    }

    .hr-dashboad-home .leave-chart {
        min-height: 419px;
    }

    .hr-dashboad-home .graph-indicators {
        max-height: 145px;
    }

    .table_wrapper.table-hr-dashboard td {
        min-width: 100px;
    }

    .video-section video {
        height: 55vh;
    }

    .video-box-wrapper .card-boxes {
        width: calc(32.33% - 1%);
    }

    .video-box-wrapper {
        margin: 10px -1% -10px;
    }

    .video-box .vid-title,
    .video-box .course-inside {
        padding: 10px;
    }

    .video-box .video-info h6 {
        margin-bottom: 3px;
    }

    .training-course-list .tab-item a {
        padding: 5px 20px 10px 20px;
    }

    .training-course-list .tab-item {
        padding-bottom: 10px;
    }

    .three-d-swipper h5 {
        font-size: 14px;
        line-height: 18px;
    }

    .training-swipper-title {
        font-size: 21px;
        line-height: 24px;
    }

    .slide-caption {
        font-size: 14px !important;
        padding: 5px 0 !important;
    }

    .swiper-container.swiper-container-coverflow {
        margin-top: 25px !important;
    }

    .three-d-swipper {
        padding: 25px;
    }

    .swiper-slide-active .slide-caption:after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0) 83%) !important;
    }

    .table-top h3 {
        font-size: 14px;
        line-height: 17px;
    }

    .media_player_wrapper {
        margin-top: 10px;
    }

    .training-inside {
        flex-wrap: wrap;
    }

    .training-inside .w-70 {
        width: 100%;
    }

    .training-inside .w-30 {
        width: calc(100%);
    }

    .course-list {
        height: auto;
        max-height: 402px;
    }

    .training-inside .wish-box {
        padding: 15px 0 0;
        height: auto;
        max-height: 402px;
    }

    .table-top p {
        font-size: 12px;
        line-height: 13px;
    }

    .button-block .white-button,
    .button-block .gradient-button {
        min-width: 130px;
    }

    .posted-coments {
        max-height: 802px;
        height: auto;
    }

    .table-probation .three-col-row {
        flex-direction: column;

    }

    .table-probation .form-feild-box {
        width: calc(100% - 15px);
        margin-bottom: 8px !important;
    }

    .table-probation .three-col-row .form-feild-box:last-child {
        margin-bottom: 0 !important;
    }

    .table-probation .table-bottom .form-feild-box {
        width: 100%;
        margin-bottom: 0 !important;
    }

    .signature-section>form {
        flex-direction: column;
    }

    .table-probation .signature-section>form .form-feild-box {
        margin-bottom: 15px !important;
    }

    .sign-sec li {
        margin-bottom: 15px;
    }

    .center-title h5 {
        text-align: left;
    }

    .events-list-item {
        width: 24%;
    }

    .col-three-item .play-btn {
        width: 36px;
        height: 36px;
        padding: 8px 14px;
    }

    .event-video-list .col-three-item h3 {
        font-size: 13px;
        margin: 4px 13px;
        line-height: 16px;
    }

    .media-upload-content {
        display: none;
        padding: 5px 10px;
    }

    .media-upload-text img {
        width: 28px;
    }

    .it-support-page .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    .it-support-page .table-top .table-form {
        margin-top: 10px;
        flex-direction: column;
        width: 100%;
    }

    .it-support-page .table-form>div {
        flex-direction: column;
        width: 100%;
        margin-bottom: 10px;
    }

    .it-support-page .table-form>div:last-child {
        margin-bottom: 0;
    }

    .it-support-page .table-form>div input {
        width: calc(100% - 55px);
    }

    .it-support-page .table-form>div .SumoSelect {
        width: 100%;
    }

    .tickets-popup .three-col-row {
        flex-direction: column;
    }

    .tickets-popup .form-feild-box {
        width: 98%;
    }

    .tickets-popup .form-feild-box:nth-child(2) {
        margin-top: 5px !important;
    }

    .tickets-popup {
        width: 90%;
        min-width: auto;
    }

    .training-up-section .three-col-row .form-feild-box {
        width: calc(50% - 15px);
    }

    .training-up-section .col-two-three .form-feild-box,
    .training-up-section .corporate-video-upload,
    .training-up-section .video-upload-box {
        width: 100%;
    }

    .training-up-section .col-two-three {
        margin: 10px 0 10px;
    }

    .request-rescent>.w-32 {
        width: 100%;
    }

    .request-rescent>.w-68 {
        width: calc(100% - 15px);
    }

    .employee-directory-home .table-form {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .employee-directory-home .table-form>* {
        margin-bottom: 10px;
    }

    .file-folder-items {
        width: 32.33%;
    }

    .leave-approval-home .full_table_wrapper::-webkit-scrollbar {
        display: none;
    }

    .leave-summary-home .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    .leave-summary-home .table-form,
    .leave-summary-home .table-form>div {
        width: 100%;
        margin: 0;
    }

    .leave-summary-home .table-form {
        margin-top: 10px;
    }

    .leave-summary-home .table-search {
        width: calc(100% - 55px);
    }

    .request-home .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .request-home .table-top .table-form {
        margin-top: 10px;
        justify-content: start;

    }

    /* .lv-rqst-table .table_wrapper.full_table_wrapper::-webkit-scrollbar{
    display: none;
} */
    .certificate-req-home .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .certificate-req-home .table-top .table-form {
        margin-top: 5px;
        margin-bottom: -5px;
        justify-content: start;
        flex-wrap: wrap;
    }

    .certificate-req-home .table-top .table-form>* {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .flight-ticket-info {
        width: 90%;
    }

    .flight-ticket-info .pop-body {
        width: auto;
    }

    .flight-ticket-info .fl-ticket-info .fl-ticket-info-item {
        width: calc(33.33% - 2%);
    }

    .flight-ticket-info .fl-ticket-details>li {
        width: calc(20% - 2%);
    }

    .attendance-req-home .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .attendance-req-home .table-top>.d-flex {
        margin-top: 10px;
    }

    .user-attendance-top ul>li:last-child {
        flex-grow: unset !important;
    }

    .attendence-user-view .full_table_wrapper::-webkit-scrollbar {
        display: none;
    }

    .payroll-list-page .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .payroll-list-page .table-top .table-form {
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 5px;
        margin-bottom: -5px;
    }

    .payroll-list-page .table-top .table-form>* {
        margin-top: 5px;
        margin-bottom: 5px !important;
    }

    .search-payroll {
        margin-left: 0 !important;
    }

    .search-payroll>* {
        margin: 0 7.5px;
    }

    .import-payroll .input-box {
        width: calc(50% - 15px);
    }

    .import-payroll .sal-slip-upload {
        width: calc(100% - 15px);
    }

    .import-payroll .button-block {
        width: calc(100% - 15px) !important;
    }

    .my-leaves-page .four-col {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .my-leaves-page .four-col .card-boxes:not(:last-child) {
        width: calc(50% - 15px);
        margin-bottom: 15px;
    }

    .my-leaves-page .four-col .card-boxes.flex-grow-1 {
        width: calc(100% - 7.5px);
    }

    .leave-alert {
        max-height: 180px;
        height: auto;
    }

    .date-indicate li {
        width: 25px;
        height: 25px;
        font-size: 12px;
        margin: 0px 2px;
    }

    .request-rescent .table-hr-dashboard {
        min-height: unset;
    }

    .documents .doc-list {
        width: 100%;
    }

    .attendance-sheet .table-top>form {
        min-width: 850px;
    }

    .attendance-sheet .table-top {
        overflow: auto;
    }

    .attendance-sheet .table-top::-webkit-scrollbar {
        display: none;
    }

    .attendance-sheet {
        height: auto;
        max-height: 800px;
    }

    .attendance-sheet .full_table_wrapper {
        height: calc(800px - 170px);
    }

    .table-attendance-indicator {
        margin-bottom: 10px;
    }

    .table-attendance-indicator {
        overflow: auto;
    }

    .table-attendance-indicator::-webkit-scrollbar {
        display: none;
    }

    .attendance-indicator-wrapper {
        min-width: 445px;
    }

    .employee-salary-page .table-form {
        justify-content: flex-start;
        margin-top: 0;
        margin-bottom: -7.5px;
    }

    .employee-salary-page .table-form>* {
        margin-top: 7.5px;
        margin-bottom: 7.5px !important;
    }

    .profile-page .five-col>.input-box {
        width: calc(33.33% - 2%);
    }

    .leaves-works {
        height: 370px;
    }

    .qr-box {
        min-height: unset;
    }

    .attendance-indicator-wrapper {
        min-width: 520px;
    }
    .kpi-approval-status .table-form{
        flex-wrap: wrap;
    }
    .dynamic-width {
        width: calc(50% - 20px) !important;
        margin: 7.5px !important;
    }
}

@media only screen and (max-width:820px) {
    .create-post {
        margin: auto 20px;
        width: 90%;
    }

    .posts .pop-body {
        width: 100%;
        min-width: auto;
    }

    .new-post {
        min-width: auto;
        width: 90%;
    }

    .display-date {
        font-size: 18px;
    }

    .timer .display-time,
    .display-date #daynum {
        font-size: 38px;
    }

    .holiday-date-box h6 {
        font-size: 18px;
    }

    .holiday-date-box p {
        font-size: 13px;
    }

    .recruitment-home .col-three .col-three-item {
        width: calc(50% - 1%);
    }

    .recruitment .col-four .card-boxes {
        width: calc(50% - 1%);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }

    .video-section video {
        height: 35vh;
    }

    .login-bg .container {
        justify-content: center;
    }

    .video-box .video-info h6 {
        font-size: 14px;
    }

    .training-swipper-title {
        font-size: 18px;
        line-height: 20px;
    }

    .three-d-swipper h5 {
        font-size: 13px;
        line-height: 16px;
    }

    .three-d-swipper {
        padding: 20px;
    }

    .table-top h3 {
        font-size: 13px;
    }

    .buttons button:before {
        width: 35px !important;
        height: 35px !important;
        font-size: 13px !important;
        padding: 8px 7px !important;
    }

    .buttonsvolume input[type=range] {
        left: -70% !important;
    }

    .controls {
        margin: 4px 0 !important;
    }

    .orange-bar input[type=range] {
        height: 6px !important;
    }

    #training_request-form .col-two-items .form-feild-box {
        margin-bottom: 10px;
    }

    #training_request-form .button-block.mt-20 {
        margin-top: 10px;
    }

    .video-section .plyr button {
        width: 35px;
        height: 35px;
        padding: 9px;
    }

    .plyr button svg {
        transform: scale(0.8);
        left: 1px;
    }

    .training-inside .card-boxes h4,
    .training-inside .table-top h4 {
        font-size: 14px;
    }

    .videoWrapperActive::after {
        display: none;
    }

    .flight-ticket-info .fl-ticket-info .fl-ticket-info-item {
        width: calc(50% - 2%);
    }

    .flight-ticket-info .fl-ticket-details>li {
        width: calc(25% - 2%);
    }

    .flight-ticket-page .three-col-row {
        flex-direction: column;
    }

    .three-col-row .form-feild-box {
        width: calc(100% - 15px);
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .radio-btn-list {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .three-col-row .form-feild-wrapper {
        flex-direction: column;
        width: 100%;
    }

    .flight-ticket-page .personal-info .personal-info-item {
        width: calc(33.33% - 2%);
        margin: 8px 1%;
    }

    .attendance-page .emp-attendance-top:first-child {
        flex-direction: column;
        margin-top: 0px;
    }

    .attendance-page .emp-attendance-top:first-child>div {
        margin-top: 10px;
    }

    .attendance-page .emp-attendance-top>.card-boxes {
        width: calc(100% - 20px);

    }

    .medical-insurence-page .insurance>ul {
        flex-direction: column;
    }

    .medical-insurence-page .insurance>ul>li:not(.insurance-card) {
        width: 100%;
    }

    .medical-insurence-page .documents .doc-list {
        min-width: unset;

    }

    .payroll-add-page .three-col-row {
        flex-wrap: wrap;
    }

    .profile-page .three-col-row {
        flex-wrap: wrap;
    }

    .profile-page .three-col-form .three-col-row~.three-col-row {
        margin-top: -5px;
    }

    .profile-page .three-col-row .form-feild-box {
        width: calc(100% - 15px);
    }

    .insurance-card {
        width: 100%;
    }

    .three-col .card-boxes {
        width: calc(50% - 20px);
      }
      .card-boxes:last-child{
        margin-top: 15px;
      } 
}

@media only screen and (max-width:768px) {
    .recruitment-home .table-form {
        justify-content: flex-end;
        margin: 5px -7.5px;
    }

    .recruitment .col-four {
        margin-top: 10px;
    }

    .col-three .col-three-item {
        width: 49%;
        margin: 0.5% 0.5%;
    }

    .col-three-item .play-btn {
        width: 34px;
        height: 34px;
        padding: 7px 13px;
    }

    .event-inside .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    .event-inside .table-top .table-form {
        width: 100%;
        margin: 0;
    }

    .event-inside .table-top .SumoSelect {
        width: 100%;
        margin: 8px 0;

    }

    .edit-it-support {
        width: 90% !important;
        max-width: unset !important;
        min-width: auto !important;
    }

    .file-folder-items {
        width: 49%;
    }

    .settings-common .table-top {
        flex-direction: column;
        align-items: stretch !important
    }

    .settings-common .table-top .table-form {
        margin-top: 10px;
        flex-basis: 100%;
    }

    .settings-common .table-top .search-box {
        flex-grow: 1;
    }

    .settings-common .table-top .search-box input {
        width: calc(100% - 55px);
    }

    .leave-adjusment-popup {
        width: 90%;
    }

    .leave-adjusment-popup .three-col-row {
        flex-direction: column;
    }

    .leave-adjusment-popup .three-col-row .form-feild-box {
        width: calc(100% - 15px);
        margin-bottom: 10px !important;
    }

    .leave-adjusment-popup .dummy-label {
        display: none;
    }

    .leave-adjusment-popup .justify-content-top {
        margin: 0 7.5PX;
    }

    #add_insurance {
        width: 90% !important;
        min-width: auto;
        max-width: unset;
    }

    .attendance-req-home .table-top>.d-flex {
        flex-direction: column;
        margin-top: 5px;
        margin-bottom: -5px;
    }

    .attendance-req-home .table-top>.d-flex>* {
        width: calc(100% - 15px);
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .attendance-req-home .table-top>.d-flex .SumoSelect {
        margin-left: 7.5px;
    }

    .apply-leave-page .input-box {
        width: calc(100% - 2%);
        margin-bottom: 10px;
    }

    .apply-leave-page .form-box>li {
        flex-direction: column;
    }

    .input-box .input-50 {
        width: 49%;
    }

    .it-manage-popup {
        width: 90%;
        min-width: unset;
    }

    .payroll-add-page .three-col-row {
        flex-wrap: wrap;
    }

    .salary-details-sec>ul {
        min-width: 738px;
    }

    .salary-details-sec {
        overflow: auto;
    }

    .salary-details-sec::-webkit-scrollbar {
        display: none;
    }

    .profile-page .col-three .col-three-item {
        width: calc(100% - 2%);
    }

    .profile-page .five-col>.input-box {
        width: calc(50% - 2%);
    }

    .profile-page .accordian-content .address-box {
        width: calc(100% - 2%);
    }

    .profile-page .accordian-content .address-col-wrapper {
        flex-wrap: wrap;
    }
    .kpi-approval-status .table-form{
        margin-top: 10px;
    justify-content: start;
    }
    .kpi-approval-status .table-form > *{
        margin-top:5px;
        margin-bottom: 5px;
    }
    .received-input-wrapper{
        width: calc(100% - 2%) !important;
    }
}

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

    .live-job-details>li:nth-child(2) {
        flex-direction: column;
    }

    .live-job-details .mail-box {
        margin-top: 15px;
    }

    /* ---------------DASHBOARD HOME----------------*/
    .dashboard-home .w-30>div {
        width: calc(100% - 15px);
    }

    .dashboard-home .w-70>.table-card-block+div {
        flex-direction: column;
        width: 100% !important;
    }

    .dashboard-home .w-70>.table-card-block+div>.wish-box {
        width: 100% !important;
    }

    .dashboard-home .w-70>.table-card-block+div>.wish-box:last-child {
        margin-top: 15px;
        margin-left: 0 !important;
    }

    .header-logo-wrapper {
        margin-left: 20px;
    }

    .posted_media-wrapper {
        min-width: 150px;
    }

    .hr-dashboad-home .four-col>.card-boxes {
        width: calc(100% - 15px);
    }

    .graph-card-block .graph-indicators {
        margin-right: 5px;
    }

    .graph-indicators li span {
        margin-right: 5px;
    }

    .hr-dashboad-home .w-32 {
        width: calc(100% - 15px);
    }

    .upload__img-box {
        width: 150px;
    }

    .recruitment-home .table-top {
        flex-direction: column;
        align-items: flex-start !important;
        margin-bottom: 10px;
    }

    .recruitment-home .table-top h4 {
        margin-bottom: 10px;
    }

    .recruitment-home .table-top .table-form {
        flex-direction: column;
        width: 100%;
        margin: 5px 0;
    }

    .recruitment-home .table-top .table-form>* {
        margin: 5px 0;
        width: 100%;
    }

    .recruitment-home .table-top .table-search {
        width: calc(100% - 52px);
    }

    .recruitment-home .col-three .col-three-item {
        width: calc(100% - 10px);
        margin: 5px;
    }

    .recruitment-home .col-four {
        margin-top: 0;
    }

    .recruitment-home .col-four .card-boxes {
        margin: 5px;
        width: calc(50% - 10px);
    }

    .recruitment-home .col-four {
        margin: 0 -5px -5px;
    }

    .recruitment-home .col-three {
        margin: -5px;
    }

    .video-box-wrapper .card-boxes {
        width: calc(49% - 1%);
    }

    .training-course-list .tab-item {
        padding-bottom: 5px;
    }

    .training-course-list .tab-item a {
        padding: 5px 15px 5px 15px;
    }

    .training-course-list .tab-item:first-child a {
        padding-right: 20px;
    }

    .video-box .video-info h6 {
        font-size: 13px;
    }

    .three-d-swipper {
        padding: 15px;
    }

    .training-swipper-title {
        font-size: 16px;
        line-height: 18px;
    }

    .three-d-swipper h5 {
        font-size: 12px;
    }

    .slide-caption {
        font-size: 13px !important;
        padding: 5px 0 !important;
    }

    .video-box .vid-title span {
        font-size: 12px;
        line-height: 12px;
    }

    .col-two-items {
        width: 98%;
    }

    .button-block .white-button,
    .button-block .gradient-button {
        min-width: 110px;
    }

    .page-top p,
    .page-top a {
        font-size: 12px;
        line-height: 12px;
    }

    .mt-20 {
        margin-top: 10px;
    }

    .pdf-viewer-wrapper .pdf-image {
        width: 45px;
    }

    .events-list-item {
        width: 49%;
    }

    .holidays-page .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    .holidays-page .table-form {
        margin-top: 10px;
    }

    .training-home .sumo-tabletop {
        flex-direction: column;
        align-items: start !important;
    }

    .training-home .sumo-tabletop .table-form {
        margin-top: 10px;
    }

    #approve-pop .three-col-row {
        flex-direction: column;
    }

    #approve-pop .three-col-row .form-feild-box {
        width: 97%;
        margin-bottom: 10px !important;
    }

    #approve-pop .three-col-row .form-feild-box:last-child {
        margin-bottom: 0 !important;
    }

    #approve-pop {
        width: 90%;
    }

    .employee-directory-home .four-col .card-boxes {
        width: calc(100% - 15px);
    }

    .employee-directory-home .table-form>* {
        width: 100%;
    }

    .employee-directory-home .table-search {
        width: calc(100% - 55px);
    }

    .employee-directory-home .four-col .card-boxes:last-child {
        margin-bottom: 15px;
    }

    #policies_list .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    #policies_list .search-box {
        width: 100%;
        margin-top: 10px;
    }

    #policies_list .search-box .table-search {
        width: calc(100% - 55px);
    }

    .leave-approval-home .table-form {
        flex-direction: column;
        align-items: start;
        width: 100%;
        flex-grow: 1;
    }

    .leave-approval-home .table-form>* {
        width: calc(100% - 10px);
        margin: 5px;
    }

    .leave-approval-home .search-box input {
        width: calc(100% - 55px);
    }

    .role-popup {
        width: 90%;
        min-width: auto;
    }

    .request-home .table-top .table-form {
        flex-direction: column;
        margin-top: 5px;
        margin-bottom: -5px;
    }

    .request-home .table-top .table-form>* {
        width: calc(100% - 15px);
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .request-home .search-box input {
        width: calc(100% - 55px);
    }

    .request-home .form-feild-box input {
        width: 100%;
    }

    .request-home .table-top .table-form .SumoSelect {
        margin-left: 7.5px;
    }

    .leave-request-detail-popup {
        width: 90%;
    }

    .leave-request-detail-popup .three-col-row {
        flex-direction: column;
    }

    .leave-request-detail-popup .three-col-row .form-feild-box {
        width: calc(100% - 15px);
        margin-bottom: 10px !important;
    }

    .leave-request-detail-popup .three-col-row .form-feild-box:last-child {
        margin-bottom: 0 !important;
    }

    .leave-request-detail-popup .three-col-row .text-box {
        margin: 0 5px;
        width: calc(100% - 10px);
    }

    .certificate-req-home .table-top .table-form {
        flex-direction: column;
    }

    .certificate-req-home .table-top .table-form>* {
        width: calc(100% - 15px);
    }

    .certificate-req-home .table-top .table-form .SumoSelect {
        margin-left: 7.5px;
    }

    .certificate-req-home .table-top .table-form .search-box .table-search {
        width: calc(100% - 55px);
    }

    .flight-ticket-info .fl-ticket-details>li {
        width: calc(33.33% - 2%);
    }

    #view-request {
        width: 90%;
        min-width: auto;
    }

    .salary-slip-page .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .salary-slip-page .table-top .table-form {
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: -5px;
    }

    .salary-slip-page .table-top .table-form>* {
        margin-top: 5px;
        margin-bottom: 5px;
        width: calc(100% - 15px);
    }

    .payroll-list-page .table-top .table-form {
        flex-direction: column;
    }

    .payroll-list-page .table-top .table-form .search-payroll {
        flex-direction: column;
        margin-top: 0px;
        margin-bottom: 0px !important;
    }

    .payroll-list-page .table-top .table-form .search-payroll>* {
        margin: 5px;
        width: calc(100% - 15px);
    }

    .search-payroll .table-search {
        width: calc(100% - 55px);
    }

    .my-leaves-page .four-col .card-boxes:not(:last-child) {

        margin-bottom: 10px;

    }

    .my-leaves-page .four-col .card-boxes:not(:last-child) {
        width: calc(100% - 10px);
    }

    .certi-letters-page #tabs-content .three-col-row {
        flex-direction: column;
    }

    .certi-letters-page #tabs-content .three-col-row .form-feild-box {
        width: calc(100% - 15px);
        margin-bottom: 10px !important;
    }

    .certi-letters-page #tabs-content .three-col-row .form-feild-box:last-child {
        margin-bottom: 0 !important;
    }

    .personal-info_wrapper {
        margin-top: 0;
    }

    .certi-letters-page .tab-item {
        width: calc(50% - 2px);
        text-align: center;
        background-color: #b6e3df;
        margin: 1px;
        padding: 8px 15px 8px 16px;
    }

    ul#tabs-nav {
        margin-left: 0;
    }

    .certi-letters-page .tab-item.active {
        background: var(--gradient-bg);
    }

    .certi-letters-page .tab-item.active a {
        color: #ffffff;
    }

    .flight-ticket-page .personal-info .personal-info-item {
        width: calc(50% - 2%);
        margin: 8px 1%;
    }

    .attendance-page .emp-attendance-top:last-child {
        flex-direction: column;
    }

    .attendance-page .emp-attendance-top:nth-child(2) {
        flex-direction: column
    }

    .attendance-page .emp-attendance-top:nth-child(2) .card-boxes:not(:last-child) {
        margin-bottom: 10px;
    }

    .payroll-add-page .table-form {
        flex-direction: column;
        flex-grow: 1;
        margin: 0;
    }

    .payroll-add-page .payroll-body .table-top {
        justify-content: flex-start !important;
    }

    .payroll-add-page .payroll-body .table-top .SumoSelect {
        width: calc(100% - 15px);
        margin: 7.5px;
    }

    .payroll-add-page .payroll-body .table-top .SumoSelect select {
        width: 100%;
        min-width: unset;

    }

    .employee-salary-page .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .employee-salary-page .table-form {
        flex-direction: column;
    }

    .employee-salary-page .search-payroll {
        flex-direction: column;
        margin-bottom: 0 !important;
    }

    .employee-salary-page .search-payroll>* {
        margin: 7.5px;
        width: calc(100% - 15px);
    }

    .job-description-page .table-form {

        margin-top: 0px;
        margin-bottom: -7.5px;
    }

    .job-description-page .table-form>* {
        margin-top: 7.5px;
        margin-bottom: 7.5px;
    }

    .hidden-label {
        display: none;
    }

    .kpi-approval-status .table-search {
        width: calc(100% - 55px);
    }
    .three-col .card-boxes {
        width: calc(100% - 20px);
      }

      .card-boxes:nth-child(2){
        margin-top: 15px;
      } 

      .card-boxes:last-child{
        margin-top: 15px;
      } 
      .dynamic-width {
        width: calc(100% - 20px) !important;
    }

}

@media only screen and (max-width:570px) {
    .usr-training-req .table-form {
        flex-direction: column;
        width: 100%;
    }

    .usr-training-req .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    .usr-training-req .table-form>* {
        width: 100%;
        margin: 5px;
    }

    .usr-training-req .table-top .SumoSelect {
        margin: 5px;
    }

    .usr-training-req .top-btn-grp {
        margin-top: 10px;
    }

    .training-up-section .three-col-row {
        flex-direction: column;
    }

    .training-up-section .three-col-row .form-feild-box {
        width: calc(100% - 15px);
        margin-bottom: 10px !important;
    }

    .training-up-section .three-col-row .form-feild-box:last-child {
        margin-bottom: 0 !important;
    }

    .hr-training-req-list .table-top {
        flex-direction: column;
        align-items: start !important;
    }

    .hr-training-req-list .table-form {
        flex-direction: column;
    }

    .hr-training-req-list .table-form {
        width: 100%;
        margin: 0;
        margin-left: -7.5px;
    }

    .hr-training-req-list .table-form>* {
        width: 100%;
    }

    .hr-training-req-list .search-box input {
        width: calc(100% - 55px);
    }

    .edit-it-support .three-col-row {
        flex-direction: column;
    }

    .edit-it-support .three-col-row .form-feild-box {
        width: 97%;
        margin-bottom: 10px !important;
    }

    .edit-it-support .three-col-row .form-feild-box:last-child {
        margin-bottom: 0%;
    }

    .extra-left-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .extra-left-btns .top-btn-grp {
        flex-direction: column !important;
        margin-top: -5px;
        margin-bottom: -5px;
    }

    .extra-left-btns .top-btn-grp>* {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .flight-ticket-info .fl-ticket-details>li {
        width: calc(50% - 2%);
    }

    .user-attendance-top {
        flex-direction: column;
        align-items: stretch;
    }

    .import-payroll .form-box>li {
        flex-direction: column;
    }

    .import-payroll .input-box {
        width: calc(100% - 15px);
    }

    .new-job-post-page .form-box>li {
        flex-direction: column;
    }

    .new-job-post-page .form-box .input-box {
        width: calc(100% - 2%);
    }

    .sal-slip-overview .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .sal-slip-overview .table-form {
        flex-direction: column;
        margin-top: 0;
        margin-bottom: -7.5px;
    }

    .sal-slip-overview .table-top .date-selector,
    .sal-slip-overview .table-top .month-selector {
        width: calc(100% - 15px);
        margin-top: 7.5px;
        margin-bottom: 7.5px;
    }

    .profile-page .profile-basic-info {
        flex-direction: column;
    }

    .add-pic {
        min-width: 125px;
        max-width: 125px;
        margin-bottom: 10px;
    }
    .kpi-approval-status .table-form > *{
        width: 100%;
    }
}

@media only screen and (max-width:480px) {
    .write-box+.d-flex {
        flex-direction: column;
    }

    .write-box+.d-flex>.posted_media-wrapper.image+div,
    .write-box+.d-flex>.posted_media-wrapper.video-post+div {
        margin-top: 15px;
    }

    .posted_media-wrapper>li {
        height: auto;
    }

    .bar_outer {
        width: 10px;
    }

    .graph-month {
        padding-top: 15px;
        font-size: 12px;
    }

    .graph-card-block {
        height: 330px;
    }

    .post-action li {
        margin-right: 0;
        padding: 8px;
    }

    .post-action .bg-grey+li:nth-child(2) {
        margin-left: 8px;
        padding: 8px;
    }

    .holiday-date-box h6 {
        font-size: 16px;
    }

    .header-logo-wrapper {
        margin-left: 10px;
    }

    .pop-body {
        min-width: auto;
    }

    .notification-alert {
        max-width: none;
        margin: auto 0 auto 15px;
    }

    .hr-dashboad-home .graph-top {
        flex-direction: column;
    }

    .hr-dashboad-home .graph-card-block .graph-indicators {
        justify-content: flex-end;
    }

    .hr-dashboad-home .graph-body {
        height: calc(100% - 65px);
    }

    .recruitment-home .col-four .card-boxes {
        width: 100%;
    }

    .live-job-details .mail-box {
        min-width: auto;
    }

    .live-job-details .job-post-info>div {
        margin-top: 5px;
    }

    .live-job-details .mail-box {
        margin-top: 5px;
    }

    .live-job-details .job-details {
        padding-top: 15px;
    }

    .video-box-wrapper .card-boxes {
        width: calc(49% - 1%);
    }

    .swiper-container.swiper-container-coverflow {
        margin-top: 15px !important;
    }

    .three-d-swipper h5,
    .training-swipper-title {
        text-align: center;
    }

    .swiper-button-prev,
    .swiper-container-rtl .swiper-button-next {
        left: 5px !important;
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev {
        right: 5px !important;
    }

    [class^="swiper-button-"] {
        width: 20px !important;
        height: 20px !important;
    }

    .swiper-button-white svg {
        width: 5px;
    }

    .swiper-slide-active .slide-caption:after {
        clip-path: polygon(15% 0%, 85% -1%, 93% 83%, 7% 95%) !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.17) 0%, rgba(0, 0, 0, 0) 81%) !important;
    }

    .buttons button:before {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
        padding: 8px 7px !important;
    }

    .controls .buttons {
        padding: 0 !important;
    }

    .events-list-item {
        width: 99%;
        margin: 1.5% 0.5%;

    }

    .col-three .col-three-item {
        width: 99%;
        margin: 1.5% 0.5%;
    }

    .event-home .table-top {
        display: flex;
        flex-direction: column;
        align-items: start !important;
    }

    .event-home .table-top .table-search {
        width: 100%;
        margin: 0;
    }

    .event-home .table-top .table-form {
        width: 100%;
        margin: 0;
        margin-top: 10px;
    }

    .event-home .search-box {
        width: calc(100% - 55px);
        margin: 0;
    }

    .new-event-popup {
        width: 90%;
    }

    .holidays-page .table-form {
        flex-direction: column;
        width: 100%;
    }

    .holidays-page .table-form .search-box,
    .holidays-page .table-form .SumoSelect {
        width: 100%;
    }

    .holidays-page .table-form .SumoSelect {
        margin-left: 7px;
        margin-top: 10px;
    }

    .holidays-page.table-top .table-search {
        width: calc(100% - 55px);
    }

    .training-home .sumo-tabletop .table-form {
        flex-direction: column;
        width: 100%;
    }

    .training-home .sumo-tabletop .table-form>div {
        width: 100%;
    }

    .training-home .sumo-tabletop .search-box {
        margin: 0;
        margin-left: 10px;
    }

    .training-home .sumo-tabletop .search-box input {
        width: calc(100% - 55px);
    }

    .training-home .sumo-tabletop select {
        margin: 0;
    }

    .training-home .sumo-tabletop .SumoSelect {
        margin-top: 10px;
    }

    .file-folder-items {
        width: 99%;
        margin-top: 7.5px;
        margin-bottom: 7.5px;
    }

    .file-folder {
        margin: 7.5px -0.5%;
    }

    .page-top {
        flex-direction: column;
        align-items: stretch;
    }

    .page-top .gradient-button,
    .page-top .setting-button {
        width: 100%;
    }

    .request-home .four-col .card-boxes {
        width: calc(100% - 15px);
    }

    .user-attendance-top ul {
        flex-direction: column;
        align-items: stretch;
    }

    .user-attendance-top ul li {
        width: 98%;
    }

    .user-attendance-top ul li .iput-box {
        text-align: center;
    }

    .user-attendance-top .profile-round {
        margin: 0 auto 10px;
        min-width: 50px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .my-leaves-page .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .my-leaves-page .table-top .table-form {
        justify-content: start;
        flex-direction: column;
    }

    .my-leaves-page .table-top .SumoSelect {
        margin-top: 10px;
        margin-left: 7.5px;
        width: calc(100% - 15px);
    }

    .certi-letters-page .tab-item {
        width: calc(100% - 2px);
    }

    .flight-ticket-page .personal-info .personal-info-item {
        width: calc(100% - 2%);
        margin: 8px 1%;
    }

    .attendance-page .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .attendance-page .table-top>div {
        flex-direction: column;
    }

    .attendance-page .table-top>div input {
        width: calc(100% - 15px);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .create-jobs .radio-btn-list {
        margin-left: 15px;
    }

    .create-jobs .radio-btn-list p {
        margin-right: 15px;
    }

    .profile-page .five-col>.input-box {
        width: calc(100% - 2%);
    }

    .my-leaves-page .table-leave-record {
        height: 100vh;
    }

    .my-leaves-page .table_wrapper.full_table_wrapper {
        height: calc(100% - 130px);
        overflow: auto;
    }

    .job-description-page .table-form {
        flex-direction: column;
    }

    .job-description-page .table-form>* {
        width: calc(100% - 15px);
    }

    .job-description-page .table-top {
        flex-direction: column;
        align-items: stretch !important;
    }

    .job-description-page .table-form .SumoSelect {
        margin-left: 7.5px;
    }

    .job-description-page .table-top .table-search {
        width: calc(100% - 54px);
    }

    .holidays-page .table-top .table-search {
        width: calc(100% - 54px);
    }

    .qr-block {
        flex-direction: column;
    }

    .qr-image {
        width: calc(100% - 15px);
    }

    .qr-title h5 {
        font-size: 17px;
        line-height: 19px;
    }
    .flight-ticket-page .personal-info .personal-info-item.flight_approve_leave_select_wrapper{
        width: 100%;
    }
}

@media only screen and (max-width:425px) {
    .assigned-day-box .emp-boxes.flex-grow-1 {
        margin-left: 0px;
    }

    .date-indicate {
        justify-content: flex-start !important;
        margin-top: 5px;
        width: 100%;
    }

    .assigned-day-box {
        flex-wrap: wrap;
    }

    .assigned-time-box {
        flex-wrap: wrap;
    }

    .assigned-time-box .emp-boxes.flex-grow-1 {
        margin-bottom: 5px;
    }
}

@media only screen and (max-width:375px) {
    .post_btn span:first-child {
        margin-right: 5px;
    }

    .card-boxes {
        padding: 10px;
    }

    .display-date {
        font-size: 16px;
    }

    .timer .display-time,
    .display-date #daynum {
        font-size: 30px;
    }

    .write-box .text-feild textarea {
        font-size: 12px;
    }

    .graph-month {
        padding-top: 10px;
        font-size: 12px;
    }

    .bar_outer {
        width: 7px;
    }

    .percentage-left li {
        font-size: 11px;
    }

    .upload__img-box {
        width: 150px;
    }

    .upload__img-wrap {
        justify-content: center;
    }

    .video-box-wrapper .card-boxes {
        width: calc(100%);
        margin: 5px 0;
    }

    .training-course-list .tab-item a {
        padding: 5px 5px 5px 5px;
    }

    .flight-ticket-info .fl-ticket-details>li {
        width: calc(100% - 2%);
    }

    .flight-ticket-info .fl-ticket-info .fl-ticket-info-item {
        width: calc(100% - 2%);
    }

    .assigned-day-box {
        flex-wrap: wrap;
    }

    .assigned-day-box .emp-boxes.flex-grow-1 {
        margin-left: 0px
    }

    .date-indicate {
        justify-content: flex-start !important;
        margin-top: 5px;
    }

    .emp-boxes span {
        font-size: 21px;
    }

    .create-jobs .radio-btn-list {
        flex-direction: column;
    }

    .profile-pop {
        width: calc(100% - 30px);
        min-width: unset;
    }

    .qr-block {
        margin: -5px;
    }

    .qr-image {
        width: calc(100% - 10px);
        margin: 5px;
    }

    .qr-title h5 {
        font-size: 16px;
        line-height: 18px;
    }

}