@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --brand-color: #3C1B24;
    --secondary-color: #E5E7EB;
    --black-color: #000;
    --light-gray: #f5f5f5;
    --white-color: #fff;
    --dark-green: #529F16;
    --blue: #338EE3;
    --orange: #7763EA;
    --active: #15822D;
    --inactive: #FF1519;
    --light-red: #FFE8E8;
    --light-green: #E8F3EA;
    --border-gray: #d9d9d9;
    --field-border: #838993;
    --dark-red: #C93438;
    --greenish: #5B823D;
    --light-orange: #7763EA1A;
    --light-blue: #e2f4fa;
    --light-red-2: #fdd8d9;
    --gray-text: #6f6664;
    --light-yellow: #fff3ca;
    --orange-dark:#ffbb00;

}

.orange{
    color: var(--orange);
    background-color: var(--light-orange);
}


*{
    font-family: "Poppins", sans-serif !important;
    font-weight: normal;
    font-style: normal;
}


.fs-10{
    font-size: 10px !important;
}

.fs-12{
    font-size: 12px !important;
}

.fs-13{
    font-size: 13px !important;
}

.fs-14{
    font-size: 14px !important;
}

.fw-400{
    font-weight: 400 !important;
}

.fw-500{
    font-weight: 500 !important;
}

.fw-600{
    font-weight: 600 !important;
}

.brand-bg{
    background-color: var(--brand-color) !important;
}

.brand-text{
    color: var(--brand-color) !important;
}

.border-brand{
    border-color: var(--brand-color) !important;
}

.text-gray{
    color: var(--gray-text) !important;
}

.text-white{
    color: var(--white-color) !important;
}

.text-active{
    color: var(--active) !important;
}

.text-inactive{
    color: var(--inactive) !important;
}



.w-100{
    width: 100%;
}

.h-100{
    height: 100%;
}

.shadow-d{
    box-shadow: 0px 7.79px 27.25px 0px #4859661A;
}

.site-layout{
    background: var(--light-gray) !important;
}

.ant-layout .ant-layout-sider {
    background: var(--white-color) !important;
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; */
    overflow-x: hidden;
}

.bg-transparent{
    background: transparent !important;
}

.border0{
    border: 0px !important;
}

.p-0{
    padding: 0px !important;
}
.pb-2{padding-bottom: 1rem !important;}
.pt-3{padding-top:1rem!important;}
.pt-5{padding-top:3rem!important;}
.px-0{padding-right:0!important;padding-left:0!important}
.px-1{padding-right:.25rem!important;padding-left:.25rem!important}
.px-2{padding-right:.5rem!important;padding-left:.5rem!important}
.px-3{padding-right:1rem!important;padding-left:1rem!important}
.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}
.px-5{padding-right:3rem!important;padding-left:3rem!important}

.py-0{padding-top:0!important;padding-bottom:0!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.py-5{padding-top:3rem!important;padding-bottom:3rem!important}

.ps-0{
    padding-left: 0px !important;
}
.margintop-5{
    margin-top: 5px !important;
}
.mb-2{
    margin-bottom: 1rem !important;
}
.m-0{margin: 0 !important}
.mt-0{margin: 0 !important}
.mb-3{margin-bottom:1rem!important}
.mx-0{margin-right:0!important;margin-left:0!important}
.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}
.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}
.mx-3{margin-right:1rem!important;margin-left:1rem!important}
.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}
.mx-5{margin-right:3rem!important;margin-left:3rem!important}
.mx-auto{margin-right:auto!important;margin-left:auto!important}
.my-0{margin-top:0!important;margin-bottom:0!important}
.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}
.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}
.my-3{margin-top:1rem!important;margin-bottom:1rem!important}
.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}
.my-5{margin-top:3rem!important;margin-bottom:3rem!important}

.bg-secondary-color{
    background-color: var(--secondary-color) !important;
}


.ant-input-outlined:hover{
    border-color: var(--black-color) !important;
}

.ant-input-outlined:focus, .ant-input-outlined:focus-within{
    box-shadow: none !important;
    border-color: var(--black-color) !important;
}

.card-rad{
    border-radius: 12px 12px 0px 0px !important;
}

.card-cs{
    border-color: var(--light-gray);
}

.card-cs .ant-card-body{
    padding: 16px !important;
}

.radius-12{
    border-radius: 12px !important;
}

.radius-8{
    border-radius: 8px !important;
}

/* table css */
.ant-table-measure-row{
    display: none;
}

.ant-table-wrapper .ant-table {
    scrollbar-color: unset !important;
}

.table-dark table .ant-table-tbody >tr >td{
    padding: 15px 10px  !important;
    border-color: var(--secondary-color) !important;
}

.table-dark .ant-table-thead{
    background: transparent !important;
}

.table-dark .ant-table-thead >tr>th{
    color: var(--black-color) !important;
    padding: 14px 10px  !important;
    border-top: 1px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    font-weight: 500 !important;
}

.table-dark .ant-table-thead >tr>th:not(:last-child){
    background-color: var(--light-gray) !important;
}

.table-dark .ant-table-thead >tr>th:last-child{
    background-color: transparent !important;
}

.ant-table-column-sorters .ant-table-column-title{
    font-weight: 500 !important;
}



/* .table-dark .ant-table-thead >tr>th:last-child{
    background: red !important;
} */

.table-dark .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before{
    background-color: transparent !important;
}


/* .ant-table-wrapper .ant-table-container table>thead>tr:first-child >*:last-child{
    background-color: var(--light-gray) !important;
} */

.pagination .ant-pagination li .ant-pagination-item-link {
    color: var(--black-color) !important;
}

.pagination .ant-pagination-item-active{
    background-color: var(--brand-light-2) !important;
    border-color: var(--brand-light-2) !important;
}

.pagination .ant-pagination .ant-pagination-item-active a {
    color: var(--brand-color) !important;
}

.pagination .ant-pagination .ant-pagination-item {
    background-color: transparent;
}

.pagination .ant-pagination .ant-pagination-item a{
    color: var(--black-color);
}

.ant-input-affix-wrapper .ant-input-prefix {
    margin-inline-end: 10px !important;
    margin-top: -2px !important;
}
.drawer .ant-drawer-header {
    background-color: transparent !important; 
  }
  

  .btnsave{
    padding: 0.40rem 1.9rem;
    height: auto !important;
    background-color: var(--brand-color);
    color: var(--white-color);
    box-shadow: none !important;
    font-size: .8rem;
    border-radius: 5px;
    border: 1px solid !important;
}
.btncancel{
    padding: 0.40rem 1.9rem;
    height: auto !important; 
    color: var( --border-dark) !important;
    box-shadow: none !important;
    font-size: .8rem;
    border-radius: 5px;
    border-color: var(--gray-text) !important;
}

.btnsave:hover{
    border-color: var(--brand-color) !important;
}

.pad-x{
    padding: .6rem 1.2rem !important;
}

.pad{
    padding: 10px !important;
}

.pad-filter {
    padding: .50rem 1rem !important;
}

  
  .modal-cs .ant-modal-content {
    border-radius: 10px;padding: 0px !important;
  }
  
  .modal-cs .header-modal{
    padding: 10px 24px;    
    border-bottom: 1px solid var(--border-gray);
  }

  .modal-cs .content-modal{
    padding: 15px 24px;
  }

  .modal-cs .ant-modal-footer{
    padding: 12px 24px;    
    border-top: 1px solid var(--border-gray);
    margin-top: 0px !important;
  }
 

  .drawer .ant-drawer-header {
    border-bottom: 1px solid rgba(105, 105, 105, 0.5) !important
}

.drawer .ant-drawer-footer {
    border-top: 1px solid rgba(105, 105, 105, 0.5) !important
}

.dragcs .ant-upload-list{
    flex-direction: column !important;
}

.dragcs .ant-upload-drag{
    border-width: 2px;
    border-color: var(--border-blue) !important;
    border-radius: 12px;
}

.ant-picker .ant-picker-suffix{
    color: var(--black-color) !important;
}

.right{
    display: flex;
    justify-content: end;
}

.drawer .ant-drawer-footer,
.drawer .ant-drawer-header{
    border-width: 1px !important;
    border-color: var(--border-gray) !important;
}

.ant-drawer-body::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: var(--light-gray);
}

.ant-drawer-body::-webkit-scrollbar
{
	width: 6px;
    border-radius: 10px;
	background-color: var(--light-gray);
}

.ant-drawer-body::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--secondary-color);
}


.ant-dropdown .ant-dropdown-menu{
    background: var(--secondary-color) !important;
}

.ant-dropdown .ant-dropdown-menu span{
    color: var(--black-color);
}

.width-drag{
    width: 30%;
    margin: 0 auto;
}

.w-170 .ant-select-selector {
    width: 170px !important;
    max-width: 100%;
}

.ant-upload.ant-upload-select{
    border-color: var(--black-color) !important;
}


.space-between-align{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-w{
    width: 400px;
    max-width: 100%;
}

.space-cs .ant-space-item:first-child{
    width: 100% !important;
}

.h-40{
    height: 40px !important;
}

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


@media (max-width: 991px){
    .width-drag{
        width: 90%;
    }
}

@media (max-width: 1440px){
    .width-fix{
        width: 100%;
    }
}

@media (max-width: 1000px){
    .cardlg .ant-card-body{
        padding: 15px !important;
    }
    .mbl-fs{
        font-size: 16px !important;
    }
    .search-w{
        width: 100% !important;
    }
    
}

@media (max-width: 700px){
    .header-mbl-cs>div{
        flex-direction: column;
        align-items: center;
    }
    .header-mbl-cs{
        height: auto !important;
    }
}


/*  */
.ant-upload-wrapper .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-error{
    border-color: var(--black-color) !important;
}


/* menu in collapse view */
.addclass .ant-menu .ant-menu-submenu .ant-menu-submenu-title,
.addclass .ant-menu-item>img{
    transform: translateX(13px) !important;
}

.addclass .ant-menu .ant-menu-submenu .ant-menu-submenu-title .ant-menu-submenu-arrow{
    display: none !important;
}

.ant-menu-vertical .ant-menu-title-content{
    color: var(--black-color);
}

.ant-menu-vertical .ant-menu-item-selected .ant-menu-title-content{
    color: var(--black-color) !important;
}


/* css */
.lagend-class{
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.border-btm{
    border-bottom: 1px solid rgba(105, 105, 105, 0.5) !important
}

.ant-select-outlined.ant-select-multiple .ant-select-selection-item {
    background: transparent !important;
    border: 1px solid var(--brand-color) !important;
}

.ant-select-multiple.ant-select-lg .ant-select-selection-item {
    height: 27px !important;
    line-height: 27px !important;
}

/* .ant-table-cell-row-hover{
    background-color: #E8F7FD !important;
} */

.text-center{
    display: block;
    text-align: center;
}

.border-color-divider{
    border-block-start: 1px solid rgba(5, 5, 5, 0.2) !important;
}

.card-h .ant-card-body{
    height: 100% !important;
}

.ant-tooltip{
    font-size: 12px !important;
}

.cursor{
    cursor: pointer;
}

.drager .ant-upload-drag {
    background-color: transparent !important;
    border-color: transparent !important;
}

.position-relate{
    position: relative;
}

.drager:hover .overlap-img{
    filter: grayscale(0);
}

.overlap-img{
    position: absolute;
    top: -25px;
    left: 0px;
    filter: grayscale(1);
}

.shadow-d{
    box-shadow: 0px 7.79px 27.25px 0px #4859661A;
}

.ant-form-item-required{
    flex-direction: row-reverse !important;
}

.ant-form-item .ant-form-item-label >label::after {
    content: ":";
    position: relative;
    margin-block: 0;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
}

.ant-form-item .ant-form-item-label >label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
    margin-inline-end: 0px !important;
    margin-inline-start: 5px;
}

.actionbtn{
    position: absolute;
    top: 10px;
    right: 10px;
}

.receipt-drag{
    width: 150px;
    margin: 0 auto;
}
.custom-quill .ql-container {
    border-radius: 0 0 8px 8px !important;
    border: 1px solid #7E848E !important;
    padding: 8px !important;
    border-top: none !important;
}
  .custom-quill .ql-editor {
    min-height: 100px !important;
    border-radius: 0 0 8px 8px!important;
    padding: 8px !important;
  }
  .custom-quill .ql-toolbar {
    border-radius: 8px 8px 0 0 !important; 
    border: 1px solid #7E848E !important;
    border-bottom: none !important;
    background-color: var(--light-gray) !important;
    color: #000;
}


/* add new css */
.ant-table-wrapper tfoot>tr>td{
    padding: 16px 10px !important;
} 


@media (max-width: 1000px){

    .mbl-space{
        flex-direction: column !important;
        text-align: center;
    }

    .mbl-space .ant-space-item{
        width: 100% !important;
    }
    .mbl-btn{
        width: 100%;
    }
    .mbl-wrap{
        flex-wrap: wrap !important;
    }
}


/* new css */
.table-pad .ant-table-tbody >tr >td,
.table-pad .ant-table-thead >tr >th {
    padding: 5px !important;
}

.active{
    background-color: var(--light-green) !important;
    color: var(--active) !important;
}

.inactive{
    background-color: var(--light-red) !important;
    color: var(--inactive) !important;
}

.badge-cs{
    padding: 5px 15px;
    border-radius: 12px;
    white-space: nowrap;
}

.pending{
    background-color: var(--light-yellow) !important;
    color: var(--orange-dark) !important;
}

.border-btm-orange{
    border-top:0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 2px  solid var(--orange) !important;
}

.border-btm-green{
    border-top:0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 2px  solid var(--dark-green) !important;
}

.border-btm-blue{
    border-top:0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 2px  solid var(--blue) !important;
}

/* new css */
.bar-width .apexcharts-canvas{
    width: 100% !important;
}

.bar-width .apexcharts-canvas svg{
    width: 100% !important;
}

.border-gray {
    border: 1px solid var(--field-border) !important;
}

.blue{
    color: var(--blue);
    background-color: var(--light-blue);
}

.darkred{
    color: var(--dark-red);
    background-color: var(--light-red-2);
}

.green{
    color: var(--greenish);
    background-color: var(--light-green);
}

.bg-light-gray{
    background-color: var(--light-gray);
}

.text-nowrap{
    text-wrap: nowrap !important;
}

.text-start{
    text-align: start !important;
}

.custom-table:where(.css-dev-only-do-not-override-1f0xixd).ant-table-wrapper .ant-table {
    background-color: #F9F9F9 !important;
}

.footer-none .ant-modal-footer {
    border-top: none !important;
}

.listitem{
    overflow: auto;
}

.listitem::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: var(--light-gray);
}

.listitem::-webkit-scrollbar
{
	width: 3px;
    border-radius: 10px;
	background-color: var(--light-gray);
}

.listitem::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--secondary-color);
}

.over-img{
    position: absolute;
    top: -15px;
    right: -22px;
}