/**
 *
 * You can write your CSS code here, DO NOT touch the default JavaScript file
 * because it will make it harder for you to update.
 * 
 */

/*# sourceMappingURL=custom.css.map */
@font-face {
  font-family: "Inter-Regular";
  src: url(../fonts/Inter-Regular.ttf);
}
@font-face {
  font-family: "Inter-Medium";
  src: url(../fonts/Inter-Medium.ttf);
}
@font-face {
  font-family: "Inter-SemiBold";
  src: url(../fonts/Inter-SemiBold.ttf);
}
@font-face {
  font-family: "Inter-Bold";
  src: url(../fonts/Inter-Bold.ttf);
}

@font-face {
  font-family: "IBMPlexSans-Regular";
  src: url(../fonts/IBMPlexSans-Regular.ttf);
}
@font-face {
  font-family: "IBMPlexSans-Medium";
  src: url(../fonts/IBMPlexSans-Medium.ttf);
}
@font-face {
  font-family: "IBMPlexSans-SemiBold";
  src: url(../fonts/IBMPlexSans-SemiBold.ttf);
}
@font-face {
  font-family: "IBMPlexSans-Bold";
  src: url(../fonts/IBMPlexSans-Bold.ttf);
}
@font-face {
  font-family: "IBMPlexSans-Thin";
  src: url(../fonts/IBMPlexSans-Thin.ttf);
}
@font-face {
  font-family: "IBMPlexSans-Light";
  src: url(../fonts/IBMPlexSans-Light.ttf);
}

.main-content {
    min-height: auto !important;
}
.main-wrapper{
    max-width: 1920px;
    width: 100%;
}
.col-auto{
    max-width: 100%;
    min-width: 0;
}
.login-body{
    height: 100vh;
    background-image: url(../img/auth-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-box{
    position: relative;
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.2);
}
.login-box .form-control{
    padding: 8px 12px !important;
}
.login-box .primary-btn{
    padding: 8px 10px;
    font-size: 16px;
    color: #fff;
    font-family: "IBMPlexSans-Medium";
    background-color: #848284;
    border-color: #848284;
    border-radius: 0px;
}
.hero-img {
    position: relative;
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.form-box{
    position: relative;
    width: 100%;
}
.login-content-box{
    position: relative;
    background-color: #efefef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
}
.login-logo {
    position: relative;
    max-width: 120px;
    margin-bottom: 20px;
}
.login-title{
    position: relative;
    font-family: "IBMPlexSans-SemiBold";
    font-size: 22px;
    color: #000;
    font-weight: 700;
    text-align: center;
}
.login-p{
    position: relative;
    font-family: "IBMPlexSans-Regular";
    font-size: 16px;
    line-height: normal;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
}
.form-label{
    position: relative;
    font-family: "IBMPlexSans-SemiBold";
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 2px;
}
.form-control, .form-select{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: #fff;
    border: 1.5px solid #666;
    font-size: 14px !important;
    line-height: normal;
    color: #333;
    font-weight: 400;
    padding: 3px 6px !important;
    height: auto !important;
    border-radius: 0;
}
select.form-control{
    padding: 2px 6px !important;
}
.form-control-sm{
    padding: .25rem .5rem !important;
    font-size: .875rem !important
}
.forgot-text{
    position: relative;
    font-family: "IBMPlexSans-Regular";
    font-size: 16px;
    color: #000000;
    font-weight: 400;
    margin-top: 10px;
    display: inline-block;
}
.invalid-feedback{
    position: relative;
    font-family: "IBMPlexSans-Regular";
    font-size: 16px;
    font-size: 100%;
    color: #ff0000;
}
.form-group {
    margin-bottom: 5px;
}
.add-new-btn{
    position: relative;
    font-family: "IBMPlexSans-Regular";
    background-color: #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    line-height: normal;
    color: #000;
    font-weight: 500;
    padding: 8px 15px;
    display: inline-block;
    border: 1px solid #666;
}
.add-new-btn:hover{
    border: 1px solid #666;
    color: #000;
    background-color: #fff;
    outline: 0.5px solid #000;
}
.filter-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    color: #000;
    font-weight: 500;
    padding: 3px 10px;
    display: inline-block;
    border: 1.5px solid #666;
}
.filter-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.export2-btn {
    padding: 3px 10px !important;
    margin-top: 0px !important;
}
.add-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #fff;
    margin-top: 5px;
}
.add-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.view-edit-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #fff;
    margin-top: 5px;
}
.view-edit-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.primary-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    color: #000;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #666;
    margin-top: 5px;
}
.primary-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.secondary-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    color: #000;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    border: 1.5px solid #666;
    margin-top: 5px;
}
.secondary-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
a:hover{
    color: #000;
    text-decoration: none;
}
.navbar{
    position: relative;
    padding: 10px 15px;
    height: auto;
    background-color: #fff;
    border-bottom: 1px solid #666;
}
.logo-image{
    position: relative;
    max-height: 40px;
}
.profile-header-name{
    position: relative;
    font-size: 14px;
    line-height: normal;
    font-family: "IBMPlexSans-Regular";
}
.navbar .nav-link.nav-link-user{
    position: relative;
    color: #000;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: inline-flex;
    align-items: center;
}
a.nav-link.notification-toggle.nav-link-lg.position-relative{
    display: inline-flex;
    align-items: center;
}
.pxy-10{
    padding: 10px 0px 7px;
}
.header-title{
    position: relative;
    font-family: "IBMPlexSans-SemiBold";
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
    color: #fff;
}
.pl-10{
    margin: 5px;
}
.pr-10{
    margin: 5px;
}
.table-secondary, .table-secondary>td, .table-secondary>th{
    background-color: #d7d7d7;
}
.table.dataTable td{
    padding: 3px 5px;
    vertical-align: middle;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
    color: #000;
    border-bottom: 1px solid #666;
}
.active-btn{
    background-color: #848284;
    color: #fff;
}
.inactive-btn{
    background-color: #FF5500;
    color: #fff;
}
.draft-btn{
    background-color: #3abaf4 ;
    color: #fff;
}
.datablank-btn {
    background-color: #ffa426;
    color: #fff;
}
.ready_for_dispatch-btn{
    background-color: #934FB0 ;
    color: #fff;
}


a:not(.btn-social-icon):not(.btn-social):not(.page-link) .fas{
    margin-left: 0;
}
.action-wrapper {
    position: relative;
    display: flex;
    justify-content: end;
}
.action-btn{
    position: relative;
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: normal;
    border-radius: 100px;
}
.action-btn .fas{
    font-size: 12px;
}
.view-btn{
    background-color: transparent;
    color: #89C5F8;
    border: 0;
}
.view-btn:hover{
    background-color: #89C5F8;
    color: #fff;
}
.edit-btn{
    background-color: transparent;
    color: #333;
    border: 0;
}
.edit-btn:hover{
    background-color: #333;
    color: #fff;
}
.delete-btn{
    background-color: transparent;
    color: #FF5500;
    border: 0;
}
.delete-btn:hover{
    background-color: #FF5500;
    color: #fff;
    border: 0;
}
.approve-btn{
    background-color: transparent;
    color: #934FB0;
    border: 0;
}
.approve-btn:hover{
    background-color: #934FB0;
    color: #fff;
}
.row{
    margin-right: -5px;
    margin-left: -5px;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
    padding-right: 5px;
    padding-left: 5px;
}
.employees-item-sizebox .col-12, .employees-item-sizebox .col-md{
    padding-right: 0px;
    padding-left: 0px;  
}
.form-group .control-label, .form-group > label{
    position: relative;
    font-family: "IBMPlexSans-Semibold";
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0;
    margin-bottom: 2px;
}
.input-group-text {
    font-family: "IBMPlexSans-Regular";
    font-size: 14px !important;
    line-height: normal;
    color: #333;
    font-weight: 400;
    padding: 3px 6px !important;
    height: auto !important;
    border-radius: 0;
    border: 1.5px solid #666;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0;
    background-color: #fff;
}
.input-group-text .phone_code {
    border: 0;
    font-family: "IBMPlexSans-Regular";
    background-color: transparent;
    font-size: 14px;
    line-height: normal;
    color: #333;
    font-weight: 400;
    padding: 0;
}
.form-control:disabled, .form-control[readonly]{
    background-color: #ddd;
}
.select2-container .select2-selection--single{
    min-height: 24px !important;
    border: 1.5px solid #666;
    border-radius: 0;
    height: auto !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px !important;
    min-height: 24px !important;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
    line-height: normal;
    color: #333;
    font-weight: 400;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    line-height: 24px !important;
    color: #333;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 24px !important;
    min-height: 24px !important;
}
.select2-container {
    width: 100% !important;
}
.gap-1{
    gap: 5px;
}
.gap-2{
    gap: 5px;
}
.row-gap-2{
    row-gap: 10px;
}
.custmer-view-box-bottom{
    margin-bottom: 10px;
}
.modal-header {
    border-bottom: 1px solid #666;
    align-items: center;
    padding: 5px 10px;
}
.modal-body {
    padding: 5px 10px 0px;
}
.modal-footer{
    padding-top: 0 !important;
    justify-content: center;
    padding: 10px;
}
.view-top-icon{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.view-print-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0px;
    font-size: 14px;
    line-height: normal;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #fff;
}
.view-print-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.view-delete-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0px;
    font-size: 14px;
    line-height: normal;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #fff;
}
.view-delete-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.view-approve-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0px;
    font-size: 14px;
    line-height: normal;
    color: #fff;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #fff;
}
.view-approve-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}
.account-topview-box{
    position: relative;
    background-color: #D6D3CE;
    padding: 10px;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.account-topview-box h3{
    position: relative;
    font-family: "IBMPlexSans-SemiBold";
    font-size: 14px;
    color: #000000;
    line-height: normal;
    font-weight: normal;
    margin-bottom: 3px;
}
.account-topview-box p{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
    color: #333;
    line-height: normal;
    margin-bottom: 5px;
}
.account-topview-box p span{
    color: #000;
    font-family: "IBMPlexSans-SemiBold";
}
.sub-title h5{
    position: relative;
    display: inline-block;
    font-weight: normal;
    font-family: "IBMPlexSans-Medium";
    font-size: 18px;
    color: #000;
    line-height: normal;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;
}
.viewinfo-text{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
    color: #333;
    line-height: normal;
}
.view-bill {
    display: flex;
    gap: 5px;
    align-items: end;
}
.account-view-billbox{
    position: relative;
    margin-bottom: 15px;
}
.account-view-billbox h5{
    position: relative;
    font-weight: normal;
    font-family: "IBMPlexSans-Regular";
    font-size: 14px;
    color: #333;
    line-height: normal;
    margin-bottom: 3px;
}
.account-view-billbox .amount{
    position: relative;
    font-family: "IBMPlexSans-Semibold";
    font-size: 18px;
    color: #000;
    line-height: 18px;
    margin-bottom: 0;
}
.account-view-billbox p{
    position: relative;
    font-family: "IBMPlexSans-Regular";
    font-size: 12px;
    color: #333;
    line-height: normal;
    margin-bottom: 0;
}
.account-view-billbox i{
    position: relative;
    font-size: 18px;
    margin-right: 5px;
}
.receipt-color1{
    color: #6E6BEF;
}
.receipt-color2{
    color: #06AED4;
}
.receipt-color3{
    color: #FF0000;
}
.add-row-btn{
    position: relative;
    height: 37px;
    width: 37px;
    background: #7539ff;
    color: #fff;
    border: 1px solid #7539ff;
    border-radius: 5px;
    font-size: 18px;
}
.delete-row-btn{
    position: relative;
    height: 37px;
    width: 37px;
    background: #FF0000;
    color: #fff;
    border: 1px solid #FF0000;
    border-radius: 5px;
    font-size: 18px;
}
.role-title-box{
    position: relative;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 5px;
}
.role-title-box .title{
    position: relative;
    font-weight: normal;
    font-family: "IBMPlexSans-Medium";
    font-size: 16px;
    color: #000;
    line-height: normal;
    margin-bottom: 0;
}
.permission-item-box{
    position: relative;
    padding: 8px 12px;
    border: 1px solid #848284;
    border-radius: 5px;
    margin-bottom: 10px;
}
.permission-label{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
    color: #000;
    line-height: normal;
}
.address-info-btn{
    background-color: #848284;
    color: #fff;
}
.pad-15{
    padding: 10px 10px 0px;
}
.table:not(.table-sm):not(.table-md):not(.dataTable) td{
    padding: 4px 6px;
    height: auto;
    border-bottom: 1px solid #666;
    vertical-align: top;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
    line-height: 16px;
    color: #333;
}
.table:not(.table-sm):not(.table-md):not(.dataTable) tr:last-child td{
    border-bottom: none;
}
.table:not(.table-sm):not(.table-md):not(.dataTable) td:first-child{
    padding-left: 6px;
}
.table:not(.table-sm):not(.table-md):not(.dataTable) td:last-child{
    padding-right: 6px;
}
.table:not(.table-sm):not(.table-md):not(.dataTable) th{
    padding: 4px 6px;
    height: auto;
}
.add-datarow td .form-control, .add-datarow td .form-select{
    line-height: 16px;
    padding: 2px 4px !important;
    height: 22px !important;
}
.add-datarow td .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 24px !important;
    min-height: 24px !important;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
}
.add-datarow td .select2-container .select2-selection--single{
    min-height: 24px !important;
}
.add-datarow td .select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 24px !important;
    min-height: 24px !important;
}
.add-datarow:not(.table-sm):not(.table-md):not(.dataTable) tr:first-child td{
    border-bottom: 1px solid #666;
}
.add-datarow:not(.table-sm):not(.table-md):not(.dataTable) tr td{
    padding: 2px 4px;
}
.add-datarow:not(.table-sm):not(.table-md):not(.dataTable) tr:last-child td{
    border-bottom: none;
}
.add-datarow{
    margin-bottom: 0;
}
.total-box .form-group {
    align-items: center;
    margin-bottom: 2px;
}
.total-box .form-group > label{
    margin-bottom: 0;
    text-align: right;
}
.total-box .form-group .col-form-label{
    padding: 0;
}
.view-total-box{
    padding: 10px;
}
.view-total-box .form-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
}
.view-total-box .form-group > label{
    margin-bottom: 0;
    text-align: right;
    padding-right: 15px;
}
.view-total-box .grand-label{
    position: relative;
    font-family: "IBMPlexSans-SemiBold";
    font-size: 16px;
    color: #000;
    line-height: normal;
}
.view-total-box .grand-total-text{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    font-size: 16px;
    color: #000;
    line-height: normal;
}
.profile-top-box{
    position: relative;
    background-color: #f7f8f9;
    border-radius: 5px;
    height: 50px;
}
.profile-header {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    gap: 15px;
}
.profile-img{
    position: relative;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 100px;
    border: 5px solid #fff;
}
.profile-edit-btn {
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-color: #d6d3ce;
    color: #000;
    width: 26px;
    height: 26px;
}
.alert{
    position: relative;
    padding: 8px 15px;
    position: relative;
    font-family: "IBMPlexSans-Regular";
    font-size: 16px;
    color: #333;
}
.success-alert{
    background-color: #137c37;
    color: #fff;
}
.danger-alert{
    background-color: #c53023;
    color: #fff;
}
/* delete modal */
div:where(.swal2-icon).swal2-warning {
    border-color: #ff0000 !important;
    color: #ff0000 !important;
}
div:where(.swal2-icon){
    width: 3.5em !important;
    height: 3.5em !important;
    margin: 20px auto 0em !important;
}
div:where(.swal2-icon) .swal2-icon-content{
    font-size: 2rem !important;
}
div:where(.swal2-container) h2:where(.swal2-title){
    font-family: "IBMPlexSans-SemiBold" !important;
    font-weight: normal !important;
    color: #000 !important;
    font-size: 18px !important;
    padding: 15px 0px 0px !important;
}
div:where(.swal2-container) div:where(.swal2-popup) {
    padding-bottom: 15px !important;
    width: 450px !important;
}
div:where(.swal2-container) div:where(.swal2-html-container){
    font-family: "IBMPlexSans-Medium";
	padding: 10px 15px 0px !important;
    color: #333 !important;
    font-size: 16px !important;
}
div:where(.swal2-container) div:where(.swal2-actions){
    margin: 10px auto 0px !important;
}
div:where(.swal2-container) button:where(.swal2-styled){
    font-family: "IBMPlexSans-Medium";
    font-size: 14px !important;
    padding: 5px 10px !important;
    margin: 0px 5px;
    background: transparent !important;
    color: #000 !important;
    border: 1.5px solid #000 !important;
    border-radius: 0px !important;
}
div:where(.swal2-container) button:where(.swal2-styled):hover{
    outline: 2px solid #000 !important;
    border: 1.5px solid #000 !important;
    background-color: #d6d3ce !important;
}
div:where(.swal2-container) button:where(.swal2-styled):focus{
    outline: 2px solid #000 !important;
    background-color: #d6d3ce !important;
}
div:where(.swal2-container) button:where(.swal2-styled):focus-visible{
    box-shadow: none !important;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
    top: 25px !important;
    right: .5em !important;
    width: 30px !important;
}
div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: 28px !important;
    left: 9px !important;
    width: 18px !important;
}
div:where(.swal2-icon).swal2-success .swal2-success-fix{
    left: 25px !important;
    top: 6px !important;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line]{
    top: 26px !important;
    width: 30px !important;
    height: 4px !important;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=right]{
    right: 13px !important;
}
div:where(.swal2-icon).swal2-error [class^=swal2-x-mark-line][class$=left] {
    left: 13px !important;
}

/* quick-menuu */
.all-quick-menu {
    position: absolute;
    right: 11%;
    top: 60px;
    background: #dfe8f5;
    padding: 15px;
    border-radius: 10px;
    display: none;
}
.quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.quick-menu-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
}
.icon-circle {
    width: 30px;
    height: 30px;
    background: #f7f8f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}
.icon-circle i {
    color: #333;
    font-size: 14px;
}
.quick-menu-box span {
    font-family: "IBMPlexSans-Regular";
    font-size: 16px;
    line-height: normal;
    color: #000;
}
.table.dataTable>tbody>tr.child{
    padding: 0;
}
table.dataTable>tbody>tr.child ul.dtr-details{
    width: 100%;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child, table.dataTable.dtr-inline.collapsed>tbody>tr>th.child, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dataTables_empty{
    padding: 5px 0px;
    white-space: normal;
}
table.dataTable>tbody>tr.child ul.dtr-details>li{
    border-bottom: 1px solid #666;
    padding: 4px 10px;
}
table.dataTable>tbody>tr.child span.dtr-title{
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
    font-family: "IBMPlexSans-SemiBold";
    color: #000;
}
.close-btn {
    position: relative;
    color: #fff;
    opacity: 1;
    font-size: 1.3rem;
}
.filter-text {
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
    font-family: "IBMPlexSans-Regular";
    color: #000;
}
.card .card-body-filter {
    padding-bottom: 5px;
}
.fa-bars{
    font-size: 16px;
}
.Whatsapp-btn{
    position: relative;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    font-size: 16px;
    color: #fff;
    background-color: #60D669;
    border: 1px solid #60D669;
    border-radius: 5px;
}
.Whatsapp-btn:hover{
    color: #60D669;
    background-color: #fff;
    border: 1px solid #60D669;
}
.bill-topaction-btn{
    position: relative;
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    font-size: 16px;
    color: #000;
    background-color: #fff;
    border: 1px solid #666;
    border-radius: 5px;
}
.bill-topaction-btn:hover{
    color: #fff;
    background-color: #2e3b48;
    border: 1px solid #2e3b48;
}
.bill-top .fas, .bill-top .far, .bill-top .fab, .bill-top .fal{
    font-size: 16px !important;
    margin-left: 0 !important;
}

.datatable-overflow{
    position: relative;
    max-height: 420px;
    overflow-y: auto;
}

.or-col-20{
    flex: 0 0 20%;
    max-width: 20%;
}
.or-col-10{
    flex: 0 0 10%;
    max-width: 10%;
}
.stat-card {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #666;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s ease;
}
.stat-card p {
    color: #000;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
    font-family: "IBMPlexSans-Medium";
    margin-bottom: 0;
}
.stat-wrapper:hover {
    transform: translateY(-5px);
}
.table thead{
    background:#D6D3CE;
}
.badge-circle{
    width:32px;
    height:32px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-right:5px;
}
.outline-box {
    background-color: #198754;
    width: 90%;
    height: 5px;
    margin: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.stat-number {
    font-weight: 700;
    margin: 0;
    font-family: "IBMPlexSans-Bold";
}
.bg-card1{
    background-color: #27AE60;
}
.text-card1{
    color: #27AE60;
}
.bg-card2{
    background-color: #F49172;
}
.text-card2{
    color: #F49172;
}
.bg-card3{
    background-color: #70D0FF;
}
.text-card3{
    color: #70D0FF;
}
.bg-card4{
    background-color: #39D254;
}
.text-card4{
    color: #39D254;
}
.bg-card5{
    background-color: #27AE60;
}
.text-card5{
    color: #27AE60;
}
.bg-card6{
    background-color: #6E6BEF;
}
.text-card6{
    color: #6E6BEF;
}
.bg-card7{
    background-color: #087A94;
}
.text-card7{
    color: #087A94;
}
.bg-card8{
    background-color: #39D254;
}
.text-card8{
    color: #39D254;
}
.bg-card9{
    background-color: #37A465;
}
.text-card9{
    color: #37A465;
}
.bg-card10{
    background-color: #CEAD47;
}
.text-card10{
    color: #CEAD47;
}

.stat-card-2 {
    position: relative;
    background: #ffffff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #666;
    overflow: hidden;
}
.stat-card-2:hover {
    transform: translateY(-5px);
}
.stat-card-2 p {
    color: #000;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
    font-family: "IBMPlexSans-Medium";
    margin-bottom: 0;
    margin-top: 12px;
}
.top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}
.amount {
    font-size: 20px;
    font-weight: 700;
    font-family: "IBMPlexSans-Bold";
}
.growth {
    font-size: 13px;
    font-weight: 600;
    font-family: "IBMPlexSans-Medium";
}
.positive {
    color: #28A745;
}
.negative {
    color: #FF0000;
}

/* Bottom Wave */
.wave {
    position: absolute;
    bottom: 10px;
    right: 10px;
    max-width: 60px;
}
.select2-container.select2-container--open .select2-selection--single {
    border: #000;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    border-color: #666 !important;
    margin-top: 1px !important;
    padding: 0 5px !important;
    color: #333 !important;
    font-family: "IBMPlexSans-Medium" !important;
    font-size: 13px !important;
    line-height: normal !important;
    border-radius: 0px !important;
    background-color: #fff !important;
}
.select2-container--default .select2-selection--multiple{
    border-radius: 0 !important;
    line-height: normal;
    border: 1.5px solid #666;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px !important;
    line-height: normal;
    color: #333;
    font-weight: 400;
    min-height: 25.6px;
    padding: 0 6px;
}
.select2-container{
    line-height: normal !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
    padding: 0;
}
.select2-container .select2-search--inline .select2-search__field{
    padding: 0;
    margin-top: 2px !important;
}
.dtr-data .action-wrapper{
    justify-content: flex-start;
    display: inline-flex;
}
div:where(.swal2-container) .swal2-input {
    height: 30px !important;
    padding: 3px 5px !important;
}
div:where(.swal2-container) input:where(.swal2-input), div:where(.swal2-container) input:where(.swal2-file), div:where(.swal2-container) textarea:where(.swal2-textarea), div:where(.swal2-container) select:where(.swal2-select), div:where(.swal2-container) div:where(.swal2-radio), div:where(.swal2-container) label:where(.swal2-checkbox) {
    margin: 0px 15px !important;
    font-size: 16px !important;
}
div:where(.swal2-container) label:where(.swal2-input-label){
    font-family: "IBMPlexSans-Medium" !important;
    justify-content: left !important;
    text-align: left !important;
    margin: 10px 15px 5px !important;
}
.table-hover .table-secondary:hover {
    background-color: #D6D3CE;
}
.select2-container.select2-container--focus .select2-selection--multiple, .select2-container.select2-container--focus .select2-selection--single {
    border-color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
    color: #000;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #d6d3ce;
    color: #000;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #d6d3ce;
    color: #000;
}
.form-control::placeholder {
    color: #333;
}
::placeholder {
    color: #333;
}

button:focus {
    outline: 2px solid #000;
}

a:focus{
    outline-offset: 0;
}

.view-print-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.view-delete-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.view-approve-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.view-edit-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.secondary-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.primary-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.add-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.filter-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.add-more-delete-btn:focus{
    outline: 0.5px solid #000;
    border-color: #000;
    color: #000;
    background-color: #d6d3ce;
}
.add-more-delete-btn{
    position: relative;
    font-family: "IBMPlexSans-Medium";
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    line-height: normal;
    color: #000;
    font-weight: 500;
    padding: 5px 10px;
    display: inline-block;
    border: 1.5px solid #666;
}
.add-more-delete-btn:hover{
    border: 1.5px solid #000;
    color: #000;
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
}

.modal-header .close {
    padding: 0;
    margin: 0;
}

.table:not(.table-sm) .table-light th{
    border: 1px solid #666 !important;
}

.report-table:not(.table-sm) thead th{
    border-bottom: 1px solid #666 !important;
}

.table-bordered.report-table td, .table-bordered.report-table th {
    border-color: #666;
}

.report-table:not(.table-sm):not(.table-md):not(.dataTable) td{
    border-bottom: 1px solid #666;
}

.report-title{
    position: relative;
    font-family: "IBMPlexSans-Semibold";
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
}
.report-info-date{
    position: relative;
    font-family: "IBMPlexSans-Semibold";
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    line-height: normal;
}

.report-total-table{
    margin-top: 10px;
    margin-bottom: 0;
}

.report-total-table td, .report-total-table th {
    border: 1px solid #666 !important;
}

 .suggestion-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #666;
    border-radius: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
}
.suggestion-dropdown li {
    padding: 4px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #000;
    font-family: "IBMPlexSans-Medium";
}
.suggestion-dropdown li:hover,
.suggestion-dropdown li:focus{
    background-color: #D6D3CE;
}

select option {
    background-color: #fff;
    color: #000;
}

select option:hover {
    background-color: #d6d3ce;
}

select option:checked {
    background-color: #d6d3ce;
    color: #000;
}

.stock-report-table{
    margin-bottom: 0;
}

.form-select:focus{
    background-color: #d6d3ce;
    outline: 0.5px solid #000;
    color: #000;
    border-color: #000;
}

.select2-container.select2-container--open .select2-selection--multiple{
    border-color: #000;
}

.noti-qty-text{
    position: relative;
    color: #dc3545;
    font-family: "IBMPlexSans-Medium";
    font-size: 14px;
}
.noti-company-name{
    position: relative;
    color: #666;
    font-family: "IBMPlexSans-Medium";
    font-size: 12px;
    font-weight: unset;
}
.noti-size-name{
    position: relative;
    color: #000;
    font-family: "IBMPlexSans-Semibold";
    font-size: 16px;
}
.noti-viewinfo-text{
    position: relative;
    font-family: "IBMPlexSans-Regular";
    font-size: 12px;
    color: #666;
    line-height: normal;
}

/* Mark Attendance */
.employee {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  background: #e6e8ec;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
/* Status */
/* .attendance-status {
    text-align: right;
} */
.a-status-btn {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  font-size: 12px;
  padding: 2px 10px;
  margin-right: 5px;
  cursor: pointer;
}
.present.active { background:  #28a745; color: #fff; }
.absent.active { background: #dc3545; color: #fff; }
.halfday.active { background: #fd7e14; color: #fff; }
.sick.active { background: #6f42c1; color: #fff; }
.paid.active { background: #007bff; color: #fff; }
.companyoff.active { background: #20c997; color: #fff; }

/* Attendance Report */
.a-report-title {
    position: relative;
    font-family: "IBMPlexSans-SemiBold";
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
    color: #000;
}
.percent-high {
  color: #1abc9c;
  font-weight: bold;
}
.percent-mid {
  color: #e67e22;
  font-weight: bold;
}



/* responsive */
@media only screen and (max-width: 1440px) {
    .login-logo {
        max-width: 180px;
    }
    .login-title{
        font-size: 22px;
    }
    .login-p{
        font-size: 16px;
    }
    body.layout-3 .navbar.navbar-secondary .navbar-nav > .nav-item > .nav-link{
        font-size: 14px;
    }
    body.layout-3 .navbar.navbar-secondary .navbar-nav > .nav-item > .nav-link i{
        margin-right: 8px;
        font-size: 14px;
    }
    .add-new-btn{
        font-size: 14px;
        padding: 7px 13px;
    }
    .table:not(.table-sm) thead th{
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .account-topview-box h3{
        font-size: 16px;
    }
    .account-topview-box p{
        font-size: 14px;
    }
    .viewinfo-text{
        font-size: 14px;
    }
    .account-view-billbox .amount{
        font-size: 18px;
    }
    .account-view-billbox h5{
        font-size: 14px;
    }
    .account-view-billbox p{
        font-size: 12px;
    }
    .pad-15 {
        padding: 5px 10px 0px;
    }
}
@media (max-width: 1200px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-container {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 1024px) {
    .main-content {
        padding-left: 0;
        padding-right: 0;
    }
    .table-responsive  .add-datarow{
        white-space: nowrap;
        min-width: 1200px;
    }
    /* .add-datarow td .form-control, .add-datarow td .form-select{
        min-width: 100px;
    } */
    .or-col-10{
        flex: 0 0 12%;
        max-width: 12%;
    }
    .or-col-20{
        flex: 0 0 22%;
        max-width: 22%;
    }
    .responsive-column .or-col-20{
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media only screen and (max-width: 768px) {
    .container {
        width: 100%;
    }
    .or-col-20 {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .responsive-column .or-col-20{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    .or-col-10 {
        flex: 0 0 16%;
        max-width: 16%;
    }
    .view-total-box .grand-label {
        font-size: 16px;
    }
    .view-total-box .grand-total-text {
        font-size: 16px;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media only screen and (max-width: 767px) {
    .add-new-btn{
        display: none;
    }
    .table-responsive  .add-datarow{
        white-space: nowrap;
        min-width: 1320px;
    }
    /* .add-datarow td .form-control, .add-datarow td .form-select{
        min-width: 100px;
    } */
    .or-col-20 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .responsive-column .or-col-20{
        flex: 0 0 50%;
        max-width: 50%;
    }
    .or-col-10 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}
@media only screen and (max-width: 600px) {
     .login-logo {
        max-width: 150px;
    }
    .login-title{
        font-size: 20px;
    }
    .stats-container {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 576px) {
    .total-box .form-group > label{
        text-align: left;
    }
    .profile-header{
        padding-left: 0;
        flex-direction: column;
        text-align: center;
    }
    .notification-dropdwon{
        margin: 0;
    }
    .table-responsive table{
        min-width: auto;
    }
    .table-responsive .add-datarow{
        white-space: nowrap;
        min-width: 900px;
    }
}
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}
@media only screen and (max-width: 425px) {
    .or-col-20 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .responsive-column .or-col-20{
        flex: 0 0 100%;
        max-width: 100%;
    }
    .or-col-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    #country-datatable_wrapper .row{
        gap: 5px !important;
    }
    #state-datatable_wrapper .row{
        gap: 5px !important;
    }
    #city-datatable_wrapper .row{
        gap: 5px !important;
    }  
}
@media only screen and (max-width: 320px) {
    div:where(.swal2-container) h2:where(.swal2-title) {
        font-size: 16px !important;
        padding: 10px 0px 0px !important;
    }
    div:where(.swal2-container) div:where(.swal2-html-container) {
        font-size: 13px !important;
        padding: 5px 10px 0px !important;
    }
    div:where(.swal2-container) div:where(.swal2-actions){
        margin: 5px auto 0px !important;
    }
    div:where(.swal2-icon) {
        margin: 15px auto 0em !important;
    }
}

/* Notification dropdown - compact design for stock alerts */
.notification-dropdown .dropdown-list-content {
    height: auto !important;
    max-height: 280px;
    overflow-y: auto;
}
.notification-dropdown .dropdown-item:hover {
    background-color: #f8f9fa;
}
.dispatch-footer-item {
    background-color: #d6d3ce;
    border: 1px solid #ccc;
    padding: 5px 10px;
    margin-bottom: 5px;
    display: block;
    width: 100%;
}

.dispatch-footer-item .form-group {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.dispatch-footer-item label, 
.dispatch-footer-item .viewinfo-text {
    font-family: "IBMPlexSans-SemiBold";
    font-size: 14px !important;
    color: #000 !important;
    margin-bottom: 0 !important;
}