/* Tablet View */
@media only screen and (min-width: 768px) and (max-width: 992px) {

    .features-side {
        flex: 2 !important;
        background: #D7EEF2;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat;
        display: block !important;
    }
    .login-side {
        flex: 2 !important;
        padding: 5px !important;
    }
    #loginContainer{
        flex-direction:row !important;
    }
    .login-header img{
        height:49px !important;
    }
    .form-container{
        padding:0px 20px !important;
    }
    .logo{
        display:none !important;
    }
}

/*@media only screen and (max-width: 768px) {
    .features-side {
        display: none !important;
    }

    .login-side {
        padding: 0px !important;
    }

    .form-container {
        padding: 10px 30px !important;
    }
}*/
@media only screen and (max-width: 767px) {
    .features-side
    {
        display:none !important;
    }
 
    .login-side {
        padding: 0px !important;
    }
    .form-container {
        padding: 10px 30px !important;
    }
    .login-header img {
        height: 50px !important;
    }
    .logo img{
        display:none !important;
    }
    #liveDateTime{
        flex-wrap:wrap !important;
    }
    #customer_select_modal .modalSutoFit {
        max-width: 80% !important;
    }
    #add_Party .modalSutoFit {
        max-width: 80% !important;
    }
    #add_Party .modalSutoFit {
        max-width: 80% !important;
    }

    
    #add_Party .text-end {
        justify-content: center !important;
        text-align: center !important;
        row-gap: 10px;
    }

       
        #add_Party .text-end .col-sm-6,
        #add_Party .text-end .col-md-1 {
            width: 48% !important;
            max-width: 48% !important;
            padding: 0 6px !important;
        }

      
        #add_Party .text-end .btn {
            width: 100% !important;
            justify-content: center !important;
        }

    #salaryStructureSiteNew .col-md-1 {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-left: auto !important;
        padding-right: 10px !important;
    }
    #salaryStructureSiteNew #btnAddStruct {
        min-width: 100px;
    }
    #salaryBtnRow {
        display: flex !important;
        justify-content: flex-end !important;
        margin-right: 15px !important;
    }

        #salaryBtnRow .col-md-1 {
            flex: 0 0 auto !important;
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;
        }

    #btnAddStruct {
        width: 100px !important;
    }
    .wage-history-btns .mb-2 .modalSutoFit {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .wage-history-btns .btn.modalSutoFit {
        margin: 0 !important;
    }

    .InventoryModal1,
    .InventoryModal2 {
        max-width: 91% !important;
        width: 90% !important;
        margin: 10px auto !important
    }

        .InventoryModal1 .modal-content,
        .InventoryModal2 .modal-content,
        .InventoryModal1 .modal-body,
        .InventoryModal2 .modal-body {
            overflow-x: hidden !important;
            padding: 10px !important;
        }

        .InventoryModal1 .col-md-2,
        .InventoryModal1 .col-md-3,
        .InventoryModal1 .col-md-4,
        .InventoryModal1 .col-md-6,
        .InventoryModal1 .col-md-12,
        .InventoryModal2 .col-md-2,
        .InventoryModal2 .col-md-3,
        .InventoryModal2 .col-md-4,
        .InventoryModal2 .col-md-6,
        .InventoryModal2 .col-md-12 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            /* width: 100% !important;
            margin-bottom: 12px !important;*/
        }

        .InventoryModal1 .select2-container,
        .InventoryModal2 .select2-container {
            width: 100% !important;
        }

        .InventoryModal1 #submitBtn,
        .InventoryModal1 #clearBtn,
        .InventoryModal2 #submitBtn,
        .InventoryModal2 #clearBtn {
            width: 100% !important;
        }

    #btnManageInventoryModal .VendorModal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }

   
    #btnManageInventoryModal .modal-content,
    #btnManageInventoryModal .modal-body {
        overflow-x: hidden !important;
    }

    #btnManageInventoryModal .modal-body {
        padding: 10px !important;
    }


    #btnManageInventoryModal .row > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 12px !important;
    }

  
    #btnManageInventoryModal .select2-container {
        width: 100% !important;
    }

 
    #btnManageInventoryModal .row:last-child .col-md-12 {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #btnManageInventoryModal #SubmitTBL {
        width: auto !important;
        min-width: 130px;
    }


    #btnManageInventoryModal fieldset {
        margin-bottom: 15px !important;
    }
    .ManageInventoryModal1,
    .ManageInventoryModal2 {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }


        .ManageInventoryModal1 .modal-content,
        .ManageInventoryModal2 .modal-content,
        .ManageInventoryModal1 .modal-body,
        .ManageInventoryModal2 .modal-body {
            overflow-x: hidden !important;
            padding: 12px !important;
        }

        .ManageInventoryModal1 .row > [class*="col-"],
        .ManageInventoryModal2 .row > [class*="col-"] {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
            margin-bottom: 12px;
        }

        .ManageInventoryModal1 .select2-container,
        .ManageInventoryModal2 .select2-container {
            width: 100% !important;
        }

        .ManageInventoryModal1 .col-md-2 button,
        .ManageInventoryModal2 .col-md-2 button {
            width: 100% !important;
        }

       
        .ManageInventoryModal1 .table-responsive,
        .ManageInventoryModal2 .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }


        .ManageInventoryModal1 .d-flex,
        .ManageInventoryModal2 .d-flex {
            flex-direction: column;
            gap: 10px !important;
        }

        .ManageInventoryModal1 .inventory-btn-group,
        .ManageInventoryModal2 .inventory-btn-group {
            display: flex !important;
            justify-content: space-between !important;
            gap: 10px;
        }

            .ManageInventoryModal1 .inventory-btn-group .btn,
            .ManageInventoryModal2 .inventory-btn-group .btn {
                flex: 1;
                width: auto !important;
            }
    .inventory-action-btns {
        display: flex !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

        .inventory-action-btns #submitBtn,
        .inventory-action-btns #clearBtn {
            flex: 1;
            width: auto !important;
            min-width: 0;
        }

    .AssignBranchModal,
    .ReturnBranchModal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }

        .AssignBranchModal .modal-content,
        .ReturnBranchModal .modal-content {
            overflow-x: hidden !important;
        }

        .AssignBranchModal .modal-body,
        .ReturnBranchModal .modal-body {
            padding: 12px !important;
            overflow-x: hidden !important;
        }

        .AssignBranchModal .row > div,
        .ReturnBranchModal .row > div {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            margin-bottom: 12px;
        }

        .AssignBranchModal .select2-container,
        .ReturnBranchModal .select2-container {
            width: 100% !important;
        }

        /* Table Horizontal Scroll */
        .AssignBranchModal .table-responsive,
        .ReturnBranchModal .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .AssignBranchModal table,
        .ReturnBranchModal table {
            min-width: 650px;
        }

        /* Bottom Buttons */
        .AssignBranchModal .col-md-12.d-flex,
        .ReturnBranchModal .col-md-12.d-flex {
            display: flex !important;
            justify-content: space-between !important;
            gap: 10px !important;
        }

            .AssignBranchModal .col-md-12.d-flex .btn,
            .ReturnBranchModal .col-md-12.d-flex .btn {
                flex: 1;
                width: auto !important;
            }

        /* Add Button */
        .AssignBranchModal .col-md-2 button,
        .ReturnBranchModal .col-md-2 button {
            width: 100% !important;
        }


    .ManageDutyModal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 10px auto !important;
    }

        .ManageDutyModal .modal-content {
            overflow-x: hidden !important;
        }

        .ManageDutyModal .modal-body {
            padding: 12px !important;
            overflow-x: hidden !important;
        }

        .ManageDutyModal .row > div {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            margin-bottom: 12px;
        }

        .ManageDutyModal .select2-container {
            width: 100% !important;
        }

        
        .ManageDutyModal .col-md-12.d-flex {
            display: flex !important;
            justify-content: space-between !important;
            gap: 10px !important;
        }

        .ManageDutyModal #btnAdd,
        .ManageDutyModal #btnSubmit {
            flex: 1;
            width: auto !important;
        }

        .ManageDutyModal fieldset {
            margin-bottom: 15px;
        }

    .DutyViewResponsiveModal {
        max-width: 95% !important;
        width: 95% !important;
        margin: 10px auto !important;
    }

        .DutyViewResponsiveModal .modal-body {
            padding: 15px !important;
        }

        .DutyViewResponsiveModal .DutyViewForm {
            padding: 0 !important;
        }

        .DutyViewResponsiveModal .DutyViewField {
            padding: 15px !important;
        }

        .DutyViewResponsiveModal .DutyViewCol {
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            margin-bottom: 15px;
        }

        .DutyViewResponsiveModal .DutyViewTimeRow {
            display: block !important;
        }

        .DutyViewResponsiveModal .DutyViewTo {
            display: none;
        }

        .DutyViewResponsiveModal .select2-container {
            width: 100% !important;
        }

        .DutyViewResponsiveModal .DutyViewFooter {
            display: block !important;
        }

        .DutyViewResponsiveModal .DutyViewSubmit {
            width: 100% !important;
            margin-top: 10px;
        }

        .DutyViewResponsiveModal .DutyViewCheck {
            display: flex;
            align-items: center;
            gap: 8px;
        }

    .RecruitmentProcessModal {
        max-width: 90% !important;
        width: 90% !important;
        margin: 10px auto !important;
    }

        .RecruitmentProcessModal .modal-body {
            padding: 15px !important;
        }

        .RecruitmentProcessModal .container {
            padding: 20% !important;
        }

        .RecruitmentProcessModal .row {
            row-gap: 12px;
        }

        .RecruitmentProcessModal .col-md-1,
        .RecruitmentProcessModal .col-md-2,
        .RecruitmentProcessModal .col-md-4,
        .RecruitmentProcessModal .col-md-5,
        .RecruitmentProcessModal .col-lg-4 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            width: 100% !important;
        }

        .RecruitmentProcessModal .recruit-card {
            margin-bottom: 15px;
        }

        .RecruitmentProcessModal #AadharVerification .row {
            padding: 15px !important;
        }

        .RecruitmentProcessModal #AadharVerification button {
            width: 100% !important;
        }

        .RecruitmentProcessModal #AadhaarTime {
            text-align: center;
            font-size: 20px;
            margin-top: 5px;
        }

        .RecruitmentProcessModal .aadhaar-logo {
            max-width: 70px;
            height: auto;
        }

        .RecruitmentProcessModal .card-title,
        .RecruitmentProcessModal .card-subtitle {
            display: block;
            text-align: center;
        }
    #EmployeeListForGenerateIdCard .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    #EmployeeListForGenerateIdCard .modal-body {
        padding: 15px !important;
    }

    #EmployeeListForGenerateIdCard fieldset {
        padding: 15px !important;
    }

    /* First Row */
    #EmployeeListForGenerateIdCard .row.mb-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px;
    }

    /* Left Section */
    #EmployeeListForGenerateIdCard .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0 !important;
    }

        /* Employee Dropdown */
        #EmployeeListForGenerateIdCard .col-md-8 > div:first-child {
            width: 100% !important;
            margin-bottom: 15px;
        }

     
        #EmployeeListForGenerateIdCard .col-md-8 .d-flex {
            display: flex !important;
            width: 100%;
            gap: 10px;
        }

            #EmployeeListForGenerateIdCard .col-md-8 .d-flex .btn {
                flex: 1;
            }


    #EmployeeListForGenerateIdCard .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #EmployeeListForGenerateIdCard .datatable_search {
        width: 100% !important;
    }

  
    #EmployeeListForGenerateIdCard .table-responsive {
        overflow-x: auto;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #customer_select_modal .modalSutoFit {
        max-width: 50% !important;
    }
    .RecruitmentProcessModal {
        max-width: 40% !important;
    }
    .InventoryModal1 {
        max-width: 65% !important;
    }

    .InventoryModal2 {
        max-width: 70% !important;
    }

    #btnManageInventoryModal .VendorModal {
        max-width: 90% !important;
    }
    .ManageInventoryModal1 {
        max-width: 65% !important;
    }

    .ManageInventoryModal2 {
        max-width: 70% !important;
    }

    .AssignBranchModal {
        max-width: 65% !important;
    }

    .ReturnBranchModal {
        max-width: 70% !important;
    }
    .ManageDutyModal {
        max-width: 40% !important;
    }
    .ManageDutyViewModal{
    max-width:40% !important;
}
}

@media only screen and (min-width: 1400px) {
    #customer_select_modal .modalSutoFit {
        max-width: 50% !important;
    }
    .RecruitmentProcessModal {
        max-width: 40% !important;
    }
    .InventoryModal1 {
        max-width: 65% !important;
    }

    .InventoryModal2 {
        max-width: 70% !important;
    }
    #btnManageInventoryModal .VendorModal {
        max-width: 90% !important;
    }
    .ManageInventoryModal1 {
        max-width: 65% !important;
    }

    .ManageInventoryModal2 {
        max-width: 70% !important;
    }
    .AssignBranchModal {
        max-width: 65% !important;
    }

    .ReturnBranchModal {
        max-width: 70% !important;
    }

    .ManageDutyModal {
        max-width: 40% !important;
    }

    .ManageDutyViewModal {
        max-width: 40% !important;
    }
}