@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 {
    --base-clr: #fffff;
    --sidebar-back-clr: #2D6DCF;
    --sidebar-text-clr: #fff;
    --sidebar-line-clr: #2D6DCF;
    --title-clr: rgba(0,0,0,0.7);
    --err-clr: rgba(248, 46, 46, 0.8);
    --line-clr: #42434a;
    --hover-clr: #76a3ff;
    --text-clr: #5B6267;
    --accent-clr: #5e63ff;
    --secondary-text-clr: #b0b3c1;
    --normal-font: 1rem;
    --active-company-caption-font: 1.30rem;
    --table-caption-font: 1.25rem;
    --table-head-font: 1rem;
    --table-body-font: 0.90rem;
    --table-head-back-clr: #f7f8fe;
    --table-body-hover-clr: #eaebfd;
    --menu-font: 0.90rem;
    --label-font: 0.95rem;
    --legend-font: 1rem;
    --list-header-report: #000;
    --label-clr: #4b4a54;
}

html {
    font-family: Poppins, 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5rem;
    font-size: var(--normal-font);
    scroll-behavior: smooth; /* Enables smooth scrolling */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    letter-spacing: 0.02rem;
}


body {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: #f0f4f7;
    color: var(--text-clr);
    display: grid;
    grid-template-columns: auto 1fr;
    overflow-y: auto; /* Allows vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
}

hr {
    margin: 5px 0px !important;
    color: #454555 !important;
}




a[data-title]:hover::after {
    content: attr(data-title);
    position: absolute;
    bottom: -50%;
}
/*Login page styles*/
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 15px !important;
    overflow: hidden;
    outline: none;
    /*border: darkgreen 5px solid;*/
    padding: 0px;
    z-index: 100;
    height: 65vh;
    width: 55vw;
    -webkit-box-shadow: 10px 9px 4px -2px rgba(230,230,230,1);
    -moz-box-shadow: 10px 9px 4px -2px rgba(230,230,230,1);
    box-shadow: 10px 9px 4px -2px rgba(230,230,230,1);
}

input:disabled:not([type="checkbox"]):not([type="radio"]), select:disabled, textarea:disabled {
    background: #f7f9ff !important;
}



.download-link {
    text-decoration: none;
    font-size: var(--label-font) !important;
}

.file-delete-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px !important;
    /* padding: 5px; */
    border-radius: 50% !important;
    background-color: #fff !important;
    color: #dc3545 !important;
}

.contents {
    height: 100% !important;
}

.left-panel {
    width: 50%;
    height: 100% !important;
    /*background-image: linear-gradient(to right, #0A58CA 0%, #004CBC 100%);*/
}

    .left-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../Assets/imgs/login_back.jpg'); /* Replace with your image URL */
        background-size: cover;
        background-position: center;
        opacity: 0.9; /* Adjust the opacity as needed */
        z-index: -1;
    }


    .left-panel img {
        height: 150px;
        width: 150px;
    }


.company__information h4 {
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-size: 2.8rem;
    color: #545D6B;
    /*text-align: center;*/
    line-height: 48px;
    letter-spacing: 1px;
    /*-webkit-text-stroke: 0.05rem #fff;*/ /* Stroke color and width */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Shadow effect */
    /*text-shadow: 2px 1px #6259C8;*/
}

.company__support__center::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.65;
    background: rgb(5,82,195);
    background: linear-gradient(62deg, rgba(5,82,195,1) 10%, rgba(97,85,195,1) 91%);
    opacity: 0.65; /* Background opacity */
    z-index: -1; /* Place behind the content */
}

.company__support__center {
    padding: 10px 0;
}

.company__support__center_reachus {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 500 !important;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.company__support__center ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

    .company__support__center ul li {
        color: #ffffff;
        margin: 0px 10px;
        font-size: 18px;
        font-family: 'Poppins', sans-serif;
        display: flex;
        align-items: center;
    }

        .company__support__center ul li i {
            font-size: 20px;
            margin-right: 5px;
        }

.socialIcons {
    display: flex;
    gap: 15px; /* Adjust spacing between icons */
}

    .socialIcons a {
        font-size: 1.4rem;
        color: #ffffff;
    }

.company__support_social {
    display: flex;
    justify-content: center;
}

    .company__support_social ul {
        list-style: none;
    }

        .company__support_social ul li {
            height: 35px !important;
            width: 35px !important;
            flex: auto;
            display: inline;
            list-style: none;
            border: 1px solid #34333c;
            border-radius: 50%;
            padding: 5px;
        }

            .company__support_social ul li a, .company__support_social ul li i {
                font-size: 1.4rem;
                color: #34333c;
            }

.right-panel {
    width: 50%;
    max-height: 100% !important;
    background-color: #fff !important;
    font-family: 'Poppins', sans-serif;
}

.panel-centered {
    position: relative;
    top: 50%;
    left: 50%;
    width: 60%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    margin-right: 150px;
    background-color: #fff !important;
    /*border: darkgreen 5px solid;*/
    padding: 0px;
}

    .panel-centered input {
        margin: 10px auto;
    }

    .panel-centered img {
        height: 120px;
        width: 120px;
        margin-bottom: 30px;
    }

    .login-link-content label, .panel-centered a {
        margin: 10px auto;
        background-color: #fff;
        font-size: 1rem !important;
        font-weight: 400 !important;
        color: #677381;
        text-decoration: none;
    }

    .panel-centered button {
        width: 150px;
        /*margin-left:45px;*/
        font-size: 16px;
        border: none;
        font-weight: 400;
        /*flex: 1 1 auto;*/
        text-align: center;
        transition: 0.5s;
        /*background-size: 200% auto;*/
        color: white;
        text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        box-shadow: 0 0 20px #eee;
        border-radius: 10px;
        background-image: linear-gradient(to right, #0A58CA 0%, #004CBC 100%);
    }

.login-content-area {
    margin-bottom: 50px;
}

.login__label {
    color: #7C7B86 !important;
    margin: 1px auto !important;
    font-size: 0.90em !important;
    font-weight: 500 !important;
}

.login__input {
    margin-top: 1px !important;
}

/*.login-link-content {
    
    border: 1px solid red;
    
}*/

.login-link-content label, .login-link-content input, .panel-centered a {
    background-color: #fff;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #677381;
    text-decoration: none;
}


.btn__login:hover {
    background-position: right center; /* change the direction of the change here */
}
/*Login page style ends*/
.page {
    background-color: #f1f5f9;
}

.productInfo {
    font-size:14px!important;
    color: var(--sidebar-back-clr)!important;
}

.productInfo-expiry {
    font-size: 12px !important;
    color: #FF0000 !important;
}

@media only screen and (max-width: 768px) {
    .left-panel {
        display: none;
    }

    .right-panel {
        width: 100%;
    }

    .panel-centered {
        margin-right: 40px;
    }

    .login-link-content {
        flex-direction: column;
        align-items: start;
        padding-bottom: 10px;
    }

        .login-link-content label, .panel-centered a {
            font-size: 0.7rem !important;
        }
}






/*Bread crumb*/
.breadcrumb-item a, .breadcrumb li {
    text-decoration: none !important;
    font-size: var(--menu-font) !important;
    color: var(--base-clr) !important;
}

.breadcrumb .active {
    color: #4b4a54 !important;
    font-weight: 600 !important;
}

.download-column a {
    text-decoration: none;
}

/*Header End*/
textarea {
    resize: none;
    font-size: inherit;
}

.color-gray {
    color: #A1A4A9 !important;
}

.control-disabled {
    background-color: #fff !important;
    font-weight: 700 !important;
}



/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

.row {
    margin-bottom: 10px !important;
}

    .row label {
        line-height: 1.2em !important;
        /*color: #677381 !important;*/
        font-size: 13px;
    }

.form-control-sm, .form-control-md {
    font-size: var(--normal-font) !important;
    color: #4B4A54 !important;
    /*text-transform: uppercase;*/
}

.btn-primary {
    background-color: var(--sidebar-back-clr) !important;
}

.btn-sm {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: var(--normal-font) !important;
}

    .btn-sm i {
        margin: 0 !important;
        font-size: var(--normal-font) !important;
        padding: 0 !important;
        vertical-align: text-bottom;
    }

.btn-sm-menu {
    border: 1px solid #e5e5e5 !important;
    font-size: 14px !important;
    height: 34px !important;
    transition: border-color 0.3s ease-in-out; /* smooth transition */
}

.btn-light-green {
    background-color: #d9eddf !important;
    border: 0.8px solid #b0cbc2 !important;
    color: #6b7e4b !important;
    font-weight: 600 !important;
}

    .btn-light-green span i{
        font-size:1.25rem!important;
    }

    .modal h5, .list-head-caption {
        font-size: 1em;
        font-weight: 500;
        margin-bottom: 15px;
        color: #0a58ca !important;
    }

fieldset legend {
    margin-bottom: 24px;
    width: 100%;
    display: flex !important;
    justify-content: space-between !important;
    color: var(--title-clr) !important;
    font-size: var(--legend-font) !important;
    font-weight: 700 !important;
}


.cw-30 {
    width: 200px;
    text-align: center !important;
}

.c-center {
    text-align: center !important;
}





.btn-type1 {
    border-width: 2px;
    border-color: #0a58ca;
    background-color: #0a58ca !important;
    font-weight: 700;
    color: #EBFCFF !important;
}

    .btn-type1:hover {
        border-width: 2px;
        border-color: #C462B6;
        background-color: #B650BD !important;
        color: #ffffff !important;
    }

.btn-border-type1 {
    /*border-color: #FFC017!important;*/
    /*border: solid 2px transparent;
    border-radius: 10px;
    background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
    background-origin: border-box;
    background-clip: content-box, border-box;*/
    /*border-width: 2px;
    border-color: #ffb401;
    background-color: #ffb401;*/
    font-weight: 700;
    font-size: 22px !important;
    color: #4b4a54 !important;
    transition: all 1s ease-out;
}

.btn-border-type1-ext {
    border-width: 2px;
    border-color: #845EC2;
    background-color: #845EC2;
    font-weight: 700;
    color: #fff !important;
}

    .btn-border-type1-ext:hover {
        background-color: #845EC2;
        font-weight: 700;
        color: #ffffff !important;
        transition: all ease 0.4ms;
    }


.btn-border-type1:hover {
    /*background-color: #ffb401;
    border-color: #ffb401;*/
    color: #ffb401 !important;
    /*background-color: #fff;
    font-weight: 700;
    color: #ffb401 !important;
    transform: scale(1);*/
}

.btn-border-type2 {
    /*border-width: 2px;
    border-color: #ff3648;
    background-color: #ff3648*/;
    font-weight: 700;
    font-size: 22px !important;
    color: #4b4a54 !important;
    transition: all 1s ease-out;
}

    .btn-border-type2:hover {
        /*background-color: #ff3648;
        border-color: #ff3648;*/
        color: #ff3648 !important;
        /*border-width: 2px;
        border-color: #ff3648;
        font-weight: 700;
        color: #ff3648 !important;
        transform: scale(1);*/
    }


.btn-border-type3 {
    /*border-width: 2px;
    border-color: #337ab7;
    background-color: #337ab7;*/
    font-weight: 700;
    font-size: 22px !important;
    color: #4b4a54 !important;
    transition: all 1s ease-out;
}

    .btn-border-type3:hover {
        color: #337ab7 !important;
        /*border-width: 2px;
        border-color: #2068a7;
        font-weight: 700;
        color: #2068a7 !important;
        transform: scale(1);*/
    }

.btn-border-type4 {
    border-width: 1px;
    border-color: rgb(10,88,202);
    font-weight: 700;
    color: rgb(10,88,202) !important;
}

    .btn-border-type4:hover {
        border-width: 1px;
        border-color: rgb(10,88,202);
        background: linear-gradient(120deg, rgba(10,88,202,1) 35%, rgba(182,80,189,1) 85%, rgba(255,89,153,1) 100%);
        font-weight: 700;
        color: #ffffff !important;
    }


/*.list-button-column {
    width: 150px !important;
}*/
.highlight-new-item {
    font-weight: 700;
}

.nav-pills {
    background-color: #0a58ca;
    padding: 5px;
    border-radius: 5px;
}

.nav-link {
    background-color: var(--sidebar-back-clr) !important;
    color: var(--sidebar-text-clr) !important;
    font-size: var(--normal-font) !important;
    font-weight: 500 !important;
}

    .nav-link.active {
        background-color: #ffffff !important;
        color: var(--sidebar-back-clr) !important;
        font-size: var(--normal-font) !important;
        font-weight: 700 !important;
    }

.nav-links-ext {
    padding: 5px 15px !important;
    /*font-size: 13px !important;*/
}

.nav-tabs li {
    margin: 5px 2px !important;
}

nav-pills li a {
    padding: 2px !important;
}


.control-label {
    font-size: var(--menu-font) !important;
    font-weight: 500 !important;
    letter-spacing: 0.7px !important;
    display: flex;
    align-items: center;
    color: var(--label-clr) !important;
}

.d-flex-ext {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
}

.card_body {
    width: 100%;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 2px;
    box-shadow: none !important;
    /*box-shadow: 0 1px 1px rgba(0,0,0, 0.05);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, 0.05);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, 0.05);
    -ms-box-shadow: 0 1px 1px rgba(0,0,0, 0.05);
    -o-box-shadow: 0 1px 1px rgba(0,0,0, 0.05);*/
}





.add_flex {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 2px !important;
    padding-right: 0px;
}

.dim_button {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    /*text-transform: uppercase;*/
    text-align: center;
    padding-top: 6px;
    background: #0a58ca;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 20px;
}

.add_new {
    padding: 8px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-width: 2px !important;
}

    .add_new i {
        font-size: 20px !important;
        font-weight: 500 !important;
    }

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




.mode {
    padding: 4px 10px;
    color: #fff;
    font-weight: 400;
    border-radius: 1rem;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    -ms-border-radius: 1rem;
    -o-border-radius: 1rem;
    letter-spacing: 0.4px;
}

.mode-on {
    color: #155724;
    font-size: 0.83rem !important;
    font-weight: 400 !important;
}

.mode-off {
    /*background-color: #C0C6CC;*/
    color: #C0C6CC;
}

.mode-process {
    font-size: 0.83rem !important;
    font-weight: 400 !important;
    color: #856404;
}

.mode-done {
    /*background-color: #A5E2FD;*/
    color: #00A4E8;
}





.icon-left, .icon-right {
    color: coral;
    font-size: 1rem;
}

.disabled .icon-left, .disabled .icon-right {
    color: red;
    font-size: 1rem;
}

/*.paginate_button {
    border: none !important;
    padding:3px 3px!important;
    background:none!important;
}

.paginate_button:hover {
    background: none !important;
    border: none !important;
}

.paginate_button:focus {
    border: none !important;
    outline: none !important;
}

.paginate_button:active {
    background:none!important;
    border: none !important;
    box-shadow: none !important;
}
*/

/*tables end*/
/* Scrollbar Styling */
/*::-webkit-scrollbar {
    width: 2rem;
}

::-webkit-scrollbar-track{
    background-color: #ebebeb;*/
/*-webkit-border-radius: 10px;
    border-radius: 10px;*/
/*}

::-webkit-scrollbar-thumb {
    background: #6d6d6d; 
    border-radius: 1rem;
    border: 2rem solid transparent;
    background-clip:content-box;
}*/






.alert {
    margin-bottom: -5px;
    margin-bottom: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0px 15px;
    font-size: 12px;
}

.message {
    font-weight: 400;
    font-size: 14px;
}


.numeric-input {
    white-space: nowrap;
    text-align: right !important;
    font-weight: 700 !important;
}

.no-wrap {
    white-space: nowrap !important;
}

.approved {
    background-color: #FFF;
    color: #155724;
}

.pending {
    background-color: #FFEB64;
    color: #5F5900;
}

fieldset {
    margin: 20px 0px;
    /*padding: 10px;*/
    background-color: #fff;
    /*-webkit-box-shadow: 10px 9px 4px -2px rgba(230,230,230,1);
    -moz-box-shadow: 10px 9px 4px -2px rgba(230,230,230,1);
    box-shadow: 10px 9px 4px -2px rgba(230,230,230,1);*/
}

.tab-pane fieldset {
    margin: 0px;
    padding: 10px;
}

.bottom-button-section {
    justify-content: space-between;
}

    .bottom-button-section.text-center {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 5px;
    }

    .bottom-button-section a, .bottom-button-section button {
        outline: none;
        border-radius: 5px !important;
        padding: 8px 22px;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase;
    }

        .bottom-button-section a i, .bottom-button-section button i {
            margin-right: 5px !important;
            font-size: var(--normal-font) !important;
            font-weight: 500 !important;
        }



.currency-text {
    background-color: #F5F9FF !important;
    border: 1px solid #D5D7E3;
    color: #4975EC;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    font-weight: 700;
}

.currency-numeric-input {
    background-color: #F5F9FF !important;
    border: 1px solid #D5D7E3;
    color: #4975EC;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    font-weight: 700;
}

.modal-title {
    font-size: 14px !important;
    color: #4B4A54 !important;
}
/*reuired fields*/
.required::after {
    content: " *";
    font-weight: 700;
    color: #f63c3c;
    margin-left: 5px;
}
/*dialog box*/
.confirm-dialog .modal-body {
    justify-content: flex-start;
    align-items: center;
}

    .confirm-dialog .modal-body p {
        font-size: 0.80rem !important;
    }

.delete-confirm-dialog .model-body-icon i {
    font-size: 36px;
    color: #ff9393;
}

.info-confirm-dialog .model-body-icon i {
    font-size: 36px;
    color: #FBBC07;
}

.extra-info-confirm-dialog .model-body-icon i {
    font-size: 36px;
    color: #198754;
}

/*-----Delete Dialog Box */
.delete-confirm-dialog .modal-header {
    display: flex !important;
    background-color: #ff8e90 !important;
    padding: 10px !important;
    margin: 0px !important;
    color: #fff !important;
    align-items: center;
    height: 40px !important;
    font-size: 14px !important;
}

.info-confirm-dialog .modal-header {
    display: flex !important;
    background-color: #FBBC07 !important;
    padding: 10px !important;
    margin: 0px !important;
    color: #fff !important;
    align-items: center;
    height: 40px !important;
    font-size: 0.85rem !important;
}

.extra-info-confirm-dialog .modal-header {
    display: flex !important;
    background-color: #198754 !important;
    padding: 10px !important;
    margin: 0px !important;
    color: #fff !important;
    align-items: center;
    height: 40px !important;
    font-size: 0.85rem !important;
}


.btn-delete-confirm-yes {
    background-color: #ff8e90 !important;
    border: 1px solid #ff8e90 !important;
    color: #fff;
}

    .btn-delete-confirm-yes:hover {
        color: #DCDCDC;
        transition: ease all 0.4s;
    }

.btn-info-confirm-yes {
    background-color: #FBBC07 !important;
    border: 1px solid #FBBC07 !important;
    color: #fff;
}

    .btn-info-confirm-yes:hover {
        color: #fff;
        transition: ease all 0.4s;
    }

.btn-extra-info-confirm-yes {
    background-color: #198754 !important;
    border: 1px solid #198754 !important;
    color: #fff;
}

    .btn-extra-info-confirm-yes:hover {
        color: #fff;
        transition: ease all 0.4s;
    }

.btn-sm-ext {
    padding: 10px !important;
    font-size: 14px !important;
}

#btnSendForProcess {
    font-size: 14px !important;
}

    #btnSendForProcess:hover {
        background-color: #7293ff !important;
        border-color: #7293ff !important;
    }


    #btnSendForProcess i {
        margin-right: 5px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
    }

.detail-confirm-dialog .modal-header {
    color: #042b64;
    font-size: 16px;
    font-weight: 500;
}

.detail-confirm-dialog .model-body-icon i {
    font-size: 46px;
    color: #006599;
}

.btn-detail-confirm-yes {
    background-color: #042b64 !important;
    border: 1px solid #042b64 !important;
    color: #fff;
}

    .btn-detail-confirm-yes:hover {
        color: #DCDCDC;
        transition: ease all 0.4s;
    }

.confirm-dialog .row {
    margin-bottom: 0px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
/*--Upload File With Drag Option--*/
/*--Section Start--*/
.drag-area, .drag-area-bg {
    border: 2px dashed #6c6c6c;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .drag-area.active, .drag-area-bg.active {
        border: 2px solid #6c6c6c;
    }

    .drag-area .icon, .drag-area-bg .icon {
        font-size: 100px;
        color: #6c6c6c;
    }

    .drag-area header, .drag-area-bg header {
        font-size: 24px;
        font-weight: 500;
        color: #6c6c6c;
    }

    .drag-area span, .drag-area-bg span {
        font-size: 20px;
        font-weight: 500;
        color: #6c6c6c;
        margin: 10px 0 15px 0;
    }

    .drag-area button, .drag-area-bg button {
        padding: 10px 25px;
        font-size: 15px;
        font-weight: 500;
        border: none;
        outline: none;
        background: #fff;
        color: #5256ad;
        border-radius: 5px;
        cursor: pointer;
    }

    .drag-area img, .drag-area-bg img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
/*--Section End--*/



#alert-section .alert {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}
/*-----Delete Dialog Box End*/
/*accordion section*/
.accordion-body p {
    font-size: 0.7rem;
    white-space: pre-wrap;
}

.status {
    /*padding: 6px 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: 25px;*/
    font-size: var(--menu-font) !important;
    font-weight: 600;
}

.status-Approved, .status-Issued {
    background-color: #28a745; /* Green */
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}

.status-Rejected {
    background-color: #dc3545; /* Red */
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}

.status-Pending {
    background-color: #ffc107; /* Yellow - Waiting */
    color: black;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}

.status-Requested {
    background-color: #007bff; /* Blue - Ongoing */
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    display: inline-block;
}


/*------------------------*/

/*---------------drop down section--------------*/
.chosen-container {
    border: none !important;
    border-radius: 0.2rem;
    font-size: 12px !important;
    color: #4B4A54 !important;
}

.chosen-container-single, .chosen-single {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    outline: none !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 0.01rem solid rgb(206, 212, 218) !important;
    /*    border-radius: 3.2px !important;
    border: 1px solid #ccc;*/
    border-radius: 0.5rem !important;
    min-height: auto !important;
    box-shadow: none !important;
    line-height: 24px !important;
    /*margin-top: 50% !important;
    -ms-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;*/
}

.chosen-container-active .chosen-single {
    box-shadow: none !important;
}


.chosen-container-single .chosen-single span {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    color: var(--text-clr);
    font-size: var(--normal-font);
}

.chosen-results {
    font-size: var(--normal-font);
}

.chosen-container .chosen-results li.highlighted {
    color: var(--sidebar-text-clr);
    background-color: var(--sidebar-back-clr) !important;
}

    .chosen-container .chosen-results li.highlighted em {
        background: transparent;
    }

.chosen-single {
    padding: 8px 16px !important;
    min-height: 28px !important;
    line-height: 18px !important;
}

.chosen-drop {
    border-top: 1px solid #aaaaaa !important;
    margin-top: 1px !important;
}

#iBankId_chosen .active-result[data-option-array-index="1"] {
    font-weight: bold !important;
}
/*------------------------*/
/*-----toast section-----*/
.toast {
    position: absolute;
    top: 0;
    z-index: 99999;
}

#request-status {
    top: 76px !important;
    right: 16px !important;
    border: none;
    background-color: #96cf96;
}

    #request-status .toast-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: transparent !important;
        color: #fff !important;
    }

        #request-status .toast-header div {
            display: flex;
            justify-content: start;
            align-items: center;
            font-size: 18px !important;
            font-weight: 600 !important;
        }

            #request-status .toast-header div i {
                margin-right: 10px !important;
                font-size: 24px !important;
                font-weight: 700 !important;
                /*color: #7293ff !important;*/
            }

    #request-status .btn-toast {
        background-color: transparent !important;
        border-color: #fff !important;
        font-weight: 600 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        color:#fff!important;
        font-size:1rem!important;
    }

        #request-status .btn-toast:hover {
            color: #96cf96!important; 
            background-color: #fff !important;
            border-color: #fff !important;
            
        }

    #request-status .btn-toast-close {
        background-color: #fff !important;
        color: #96cf96 !important;
        border-color: #fff !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-weight:600!important;
    }

    #request-status .toast-body {
        font-size: 16px !important;
        color: #fff !important;
    }
/*-----------------------*/
/*----Tooltip------*/
.tooltip-inner {
    background-color: #0a58ca;
    box-shadow: 0px 0px 4px #A9AABC;
    opacity: 1 !important;
    color: #D6F4FF !important;
    font-size: 0.7rem !important;
}

.tooltip.bs-tooltip-right .tooltip-arrow::before {
    border-right-color: #0a58ca !important;
}

.tooltip.bs-tooltip-left .tooltip-arrow::before {
    border-left-color: #0a58ca !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #0a58ca !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #0a58ca !important;
}


/*Report Filteration Section*/
.filter-body {
    padding: 10px !important;
    margin: 10px 0px;
    border: 1px solid #f3f2f2;
    border-radius: 15px;
    background-color: #fff;
    border-bottom: 0;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}

.report-button {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    transition: all .4s ease;
}

.filter-report-button {
    background-color: #fff !important;
    color: #ff8671;
    border: 1px solid #ff8671;
}

    .filter-report-button:hover {
        background-color: #ff8671 !important;
        color: #fff;
    }

.excel-report-button {
    background-color: #fff !important;
    color: #007255;
    border: 1px solid #007255;
}

    .excel-report-button:hover {
        background-color: #007255 !important;
        color: #fff;
    }

.report-title {
    color: #ff8671 !important;
}

.btn-report {
    background-color: var(--sidebar-back-clr) !important;
    color: #fff;
}

    .btn-report:hover {
        color: #fff !important;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    }

.btn-outline-report {
    border: 2px solid var(--text-clr);
    color: var(--text-clr);
}

    .btn-outline-report:hover {
        background-color: var(--text-clr) !important;
        color: #fff;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px !important;
    }

.currency-caption {
    font-style: italic;
}
/*----------Processing Dots-----------*/
.loading-dots {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    text-align: center;
    animation: loading-dots-animation 1.5s infinite;
}


@keyframes loading-dots-animation {
    0% {
        content: ".";
    }

    33% {
        content: "..";
    }

    66% {
        content: "...";
    }
}
/*-----------------------------------------*/



/*#processingOverlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
}

#processingCircle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 6px solid #ccc;
    border-top-color: #9257d3;
    border-radius: 50%;
    animation: spin 1s infinite linear;
}*/
/*
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}*/

#processingOverlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4); /* Transparent black background */
    z-index: 9999;
}

.loaderBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    background: white;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
}

.loaderText {
    color: #333;
}

#report-button-container {
    position: fixed;
    top: 25%;
    right: -80px !important;
    width: 50px;
    text-align: center;
    margin: 100px;
    z-index: 9999999;
    display: none;
}

.rounded-button {
    background: rgb(99,82,151);
    background: radial-gradient(circle, rgba(99,82,151,1) 0%, rgba(162,69,153,1) 0%, rgba(220,38,126,1) 85%, rgba(255,29,75,1) 100%);
    color: #fff;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-bottom: 5px;
    padding: 5px 0px;
    font-size: 14px;
    cursor: pointer;
    transition: width 0.3ms, height 0.3s;
}

.hidden-buttons {
    display: none;
    position: absolute;
    top: 32%;
    right: 5px;
    width: 50px;
    padding-top: 10px;
}

    .hidden-buttons button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 5px 18px;
        background: rgb(99,82,151);
        background: radial-gradient(circle, rgba(99,82,151,1) 0%, rgba(162,69,153,1) 0%, rgba(220,38,126,1) 85%, rgba(255,29,75,1) 100%);
        color: #fff;
        border: none;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        cursor: pointer;
    }

        .hidden-buttons button i, .rounded-button i {
            font-size: 1.5rem;
        }

    .hidden-buttons #btnQuickPdf {
        animation-duration: 500ms;
    }

    .hidden-buttons #btnQuickXls {
        animation-duration: 700ms;
    }

    .hidden-buttons #btnQuickClose {
        animation-duration: 900ms;
    }

.extra-button {
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    margin: 5px;
}

.dropdown-list a {
    text-decoration: none;
    color: #379937;
}


.checkbox-dropdown {
    width: 100%;
    border: 1px solid #aaa;
    padding: 5px;
    position: relative;
    margin: 0 auto;
    font-size: 12px !important;
    color: #4B4A54 !important;
    user-select: none;
}

    /* Display CSS arrow to the right of the dropdown text */
    .checkbox-dropdown:after {
        content: '';
        height: 0;
        position: absolute;
        width: 0;
        border: 6px solid transparent;
        border-top-color: #000;
        top: 50%;
        right: 10px;
        margin-top: -3px;
    }

    /* Reverse the CSS arrow when the dropdown is active */
    .checkbox-dropdown.is-active:after {
        border-bottom-color: #000;
        border-top-color: #fff;
        margin-top: -9px;
    }

.checkbox-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px;
    /* align the dropdown to the left */
    right: -1px;
    /* align the dropdown to the right */
    opacity: 0;
    /* hide the dropdown */

    transition: opacity 0.1s ease-in-out;
    height: 200px;
    overflow: scroll;
    overflow-x: hidden;
    pointer-events: none;
    /* avoid mouse click events inside the dropdown */
}

.is-active .checkbox-dropdown-list {
    opacity: 1;
    background-color: #fff;
    /* display the dropdown */
    pointer-events: auto;
    /* make sure that the user still can select checkboxes */
}

.checkbox-dropdown-list li {
    padding: 0px 10px;
    transition: all 0.2s ease-out;
}

.amendment-caption {
    font-size: 1.05rem;
    font-weight: 700;
    margin-left: 5px;
    color: var(--sidebar-back-clr);
}

.list-header-report {
    color: var(--list-header-report);
    font-weight:600!important;
}

.bootstrap-select .dropdown-toggle {
    border: 1px solid #ced4da; /* Bootstrap input border */
    background-color: #fff; /* Bootstrap input background */
    color: #212529; /* Bootstrap text color */
    height: calc(2.25rem + 2px); /* match .form-control-sm/lg if needed */
}

.inner li{
    width:100%!important;
}


/*.checkbox-dropdown-list li label {
    display: block;
    border-bottom: 1px solid silver;
    padding: 10px;
    transition: all 0.2s ease-out;
}

    .checkbox-dropdown-list li label:hover {
        background-color: #0a58ca;
        color: white;
    }*/
/* Dashboard style */
.dashboard {
    font-family: Poppins, 'Segoe UI', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .dashboard .card {
        border:none!important;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        border-radius:15px!important;
    }

.dashboard h4 {
    color: var(--sidebar-back-clr) !important;
}

/* HTML: <div class="loader"></div> */
/*.loader {
    width: 50px;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
    background: var(--_c) top, var(--_c) left, var(--_c) right, var(--_c) bottom;
    background-size: 12px 12px;
    animation: l7 1s infinite;
}*/

@keyframes l7 {
    to {
        transform: rotate(.5turn)
    }
}