:root {
    --col-main-primary  : #D22630;
    --col-main-secondary: #D2263026;
    --col-main-faded    : #f8dee0;
    --col-main-faded-rgb: rgb(248 222 224);;
    --col-white         : #FFFF;
    --col-light-grey    : #E6E7EB;
    --col-medium-grey   : #8F8F8F;
    --col-dark-grey     : #465668;
    --col-green         : #519545;
    --col-text-main     : #2A2A2A;
    --col-text-secondary: #3A3A49;
    --col-white-trans   : rgb(255 255 255 / 18%);;
}
body{
    color           : var(--col-text-main);
    background-color: var(--col-white);
}
.btn-dark-grey{
    background-color: var(--col-dark-grey);
    color           : var(--col-white);
}
.btn-light-grey{
    background-color: var(--col-light-grey);
    color           : var(--col-text-main);
}

.btn-primary{
    background-color: var(--col-main-primary);
    color           : var(--col-white);
    border-color    : var(--col-main-primary);
    box-shadow      : 0 0.125rem 0.25rem 0 rgba(70, 118, 251, 0.41);
}
.btn-primary:hover {
    color           : var(--col-white);
    background-color: var(--col-main-primary);
    border-color    : var(--col-main-primary);
}
.btn-primary:focus, .btn-primary.focus {
    color           : var(--col-white);
    background-color:  var(--col-main-primary);
    border-color    :  var(--col-main-primary);
    transform       : translateY(0);
    box-shadow      : none;
}
.btn-outline-primary {
    color       : var(--col-main-primary);
    border-color: var(--col-main-primary);
    background  : transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
    color           : var(--col-white);
    background-color: var(--col-main-primary);
    border-color    : var(--col-main-primary);
}
.btn-secondary{
    background-color: var(--col-main-secondary);
    color           : var(--col-main-primary);
    border-color    : var(--col-main-secondary);
    box-shadow      : none;
}
.btn-secondary:hover {
    color           : var(--col-main-primary);
    background-color: var(--col-main-secondary);
    border-color    : var(--col-main-secondary);
}
.btn-secondary:focus, .btn-primary.focus {
    color           : var(--col-main-primary);
    background-color:  var(--col-main-secondary);
    border-color    :  var(--col-main-secondary);
    transform       : translateY(0);
    box-shadow      : 0 0.125rem 0.25rem 0 rgba(70, 118, 251, 0.41);
}
.btn-grey{
    background-color: var(--col-light-grey);
    color           : var(--col-text-main);
    border-color    : var(--col-light-grey);
    box-shadow      : none;
}
.btn-grey:hover {
    color           : var(--col-text-main);
    background-color: var(--col-light-grey);
    border-color    : var(--col-light-grey);
}
.btn-grey:focus, .btn-primary.focus {
    color           : var(--col-text-main);
    background-color:  var(--col-light-grey);
    border-color    :  var(--col-light-grey);
    transform       : translateY(0);
    box-shadow      : 0 0.125rem 0.25rem 0 rgba(70, 118, 251, 0.41);
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
    color           : var(--col-white);
    background-color: var(--col-main-primary);
    border-color    : var(--col-main-primary);
}

.border-col-primary {
    border-color: var(--col-main-primary) !important;
}

.card_services {
    border: 1.5px solid #8F8F8F !important;
}
.navbar.bg-primary {
    background-color: var(--col-main-primary) !important;
    color           : var(--col-white) !important;
}
.bg-primary{
    background-color: var(--col-main-primary) !important;
    color           : var(--col-white) !important;
}
.bg-primary .modal-title{
    color           : var(--col-white) !important;
}
.bg-light-grey{
    background-color: var(--col-light-grey) !important;
}
.col-primary{
    color: var(--col-main-primary);
}
.col-light-grey{
    color: var(--col-light-grey) !important;
}
.col-dark-grey{
    color: var(--col-dark-grey);
}
.col-text-primary{
    color: var(--col-text-primary);
}
.col-text-secondary{
    color: var(--col-text-secondary);
}
.navbar_title{
    color      : var(--col-white) !important;
    font-size  : 22px;

}
.payment_card{
    /* border: 1px solid; */
}
.payment_card .logo{
    font-size: 70px;
    color    : var(--col-main-primary);
    text-align: center;
}
.payment_card .title{
    font-size: 24px;
    font-weight: 700;
    text-align : center;
}
.payment_card .desc{
    text-align   : center;
    margin-bottom: 45px;
}
.payment_card .info{
    margin        : 20px 20px;
    border-bottom : 1.5px solid var(--col-dark-grey);
    font-weight   : 700;
    padding-bottom: 7px;
}

.payment_card .item_row{
    margin : 10px 20px;
    padding: 5px 5px;
}
.payment_card .item_row .value{
    font-weight  : 700;
}
.navbar_user_icon{
    font-size       : 35px;
    background-color: var(--col-main-primary) !important;
    color           : var(--col-white) !important;
    margin          : 10px 15px;
}
.navbar_company{
    font-weight: 700;
}

.menu_mqs {
    margin          : 12px !important;
    left            : 12px !important; /* Dont Forget to reverted in rtl css */
    border-radius   : 8px;
    background-color: var(--col-light-grey);
}
.menu_mqs .menu-item{
    border-radius: 8px;
    margin       : 0px 0px 5px 5px !important;
    width        : 15.5rem !important;
}
.menu_mqs .menu-item a{
    color      : var(--col-text-main);
    font-weight: 600 !important;
}

.menu_mqs .menu-link .menu-icon{
    color: var(--col-main-primary);
}
.menu_mqs .menu_divider{
    padding: 0px 3px;
}
.menu_mqs .menu_divider hr{
    margin: 0px 10px;
    color : var(--col-main-primary);
    margin: 10px 15px;
}
.menu_mqs .menu-item.active, .menu_mqs .menu-item:hover{
    background-color: var(--col-main-secondary);
}
.menu_mqs .menu-item:hover{
    transition: 0.7s;
}
.menu_mqs .app-brand {
    margin-top: 0px;
}
.menu_mqs .app-brand-logo {
    width: 100%;
}
.app-brand .layout-menu-toggle {
    background-color: var(--col-main-primary);
    border          : 7px solid var(--col-light-grey);
}
.menu_mqs .titles {
    text-align: center;
    color     : var(--col-main-primary);
}
.menu_mqs .titles p.title{
    font-size: 20px;
    margin-bottom: 0px;
}
.menu_mqs .titles .desc{
    font-size  : 26px;
    font-weight: 700;
    margin-bottom: 0px;
}
.menu_mqs .menu-header-text {
    color      : var(--col-text-main);
    font-weight: 600;
}
.menu_mqs .menu-vertical .menu-header {
    margin : 0px;
    padding: 0rem 2rem;
}
.menu_mqs .menu_logo_bottom {
    padding       : 0px 0px;
    padding-bottom: 20px;
}
.menu_logo_bottom img{
    height: 45px;
    width : auto;;
}

.table_services th {
    background-color: var(--col-light-grey);
}

/* Login Menu */
.login_menu_header{
    border-radius: 0.3rem 0.3rem  0.5rem 0.5rem !important;
}
.login_menu{
    border-radius: 50%;
    border       : 2px solid var(--col-main-primary);
    font-weight  : bold;
    aspect-ratio : 1/1;
}
.login_menu a {
    text-decoration : none;
    background-color: transparent !important;
    color           : var(--col-dark-grey);
}
.login_menu a .type{
    color: var(--col-main-primary);
}
.login_menu a.active .type {
    color: #000000;
}
.login_menu:has(a.active) {
    border-color: var(--col-main-secondary);
}
.login_menu:not(:has(a.active)) {
    background-color: var(--col-main-secondary);
}

.login_menu a img{
    height: 50px;
    width : auto;
}
.login_menu .name {
    font-size  : 10px;
    font-weight: 900;
}
.login_main_column{
    /* height: 700px; */
}

.dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active {
    background-color: var(--col-main-secondary) !important;
    color: var(--col-dark-grey) !important;
}
#modal_signup p.title {
    font-size    : 24px;
    text-align   : center;
    font-weight  : bold;
    margin-bottom: 40px;
}

#modal_signup p.desc {
    text-align : center;
    font-size  : 16px;
    color      : var(--col-main-primary);
    font-weight: 600;
    margin     : 40px 0px;
}
.div_row_header{
    padding         : 7px 15px;
    background-color: var(--col-light-grey);
    color           : var(--col-text-secondary);
    font-weight     : 600;
    border-radius   : 8px;
}
.table_caption {
    padding    : 10px 0px;
    font-size  : 18px;
    font-weight: 600;
}
.div_row_items{
    padding      : 10px 0px;
    border       : 1.5px solid var(--col-medium-grey);
    margin       : 7px 0px;
    border-radius: 8px;
    font-size    : 12px;
}
/* .div_row_items:hover {
    background-color: var(--col-main-primary);
    color           : var(--col-white);
    border-color    : var(--col-main-primary);
    transition      : 0.3s cubic-bezier(0, 0, 0.2, 1)
}
.div_row_items:hover .btn-secondary, .div_row_items:hover .dropdown-toggle {
    background-color: var(--col-white-trans);
    color           : var(--col-white);
    transition      : 0.3s cubic-bezier(0, 0, 0.2, 1)
}
.div_row_items:hover .btn-primary {
    background-color: var(--col-white);
    color           : var(--col-main-primary);
    transition      : 0.3s cubic-bezier(0, 0, 0.2, 1)
}
.div_row_items:hover .col_rejected_reason {
    background-color: var(--col-main-faded-rgb);
    border-radius   : 5px;
    transition      : 0.3s cubic-bezier(0, 0, 0.2, 1)
}
.div_row_items:hover a.file_link {
    color          : var(--col-white);
    text-decoration: underline;
} */
.div_file{
    padding: 5px 0px;
}
.div_file > div > div{
    padding: 5px 0px;
}
.dropdown-toggle:hover{
    transform: translateY(-1px);
}
.btn_show_list_filter {
    padding-left : 13px;
    padding-right: 13px;
}
.div_filter_items{
    margin-bottom: -15px;
    margin-top   : 8px;
}

.divider.divider-primary .divider-text:before, .divider.divider-primary .divider-text:after {
    border-color: var(--col-main-primary);
}

.btn_pagination {
    padding         : 7px 15px;
    border-color    : var(--col-main-primary);
    background-color: var(--col-white);
    color           : var(--col-text-secondary);
    box-shadow      : none;
}
.pagination li.active > a.btn_pagination, .pagination li.active > a.btn_pagination:hover, .pagination li.active > a.btn_pagination:focus{
    border-color    : var(--col-main-primary);
    background-color: var(--col-main-primary);
    color           : var(--col-white);
}
.prev .btn_pagination, .next .btn_pagination{
    border: none;
}

.input-group:focus-within .form-control, .input-group:focus-within .input-group-text {
    border-color:  var(--col-main-primary);
}

.form_section {
    border: 1.5px solid var(--col-light-grey);
    padding: 10px 10px 0px 10px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.form_section .input_label{
    font-weight: bold;
}
.form_section div.mb-3{
    margin-bottom: 0px !important;
}
.upload_dropzone, .upload_preview{
    border-radius: 12px;
    height       : 85px;
}
.upload_dropzone .caption_size{
    font-size: 13px;
}
.upload_dropzone .caption_files span:first-child{
    font-weight: 700;
    color: var(--col-main-primary);
}
.upload_dropzone .caption_files{
    margin-bottom: 10px;
    font-size    : 14px;
}
.upload_dropzone{
    text-align      : center;
    border          : 3px dashed var(--col-main-primary);
    padding         : 10px;
    background-color: var(--col-light-grey);
}
.upload_preview{
    border   : 2px solid var(--col-light-grey);
    padding  : 7px;
    font-size: 13px;
}
.upload_preview .name{
    font-weight: 700;
}
.upload_preview .size{
    font-size: 12px;
    color    : var(--col-medium-grey);
}
.upload_progress{
    height: 4px;
}
.upload_progress .progress-bar{
    box-shadow: none;
}
.progress_text{
    font-size: 12px;
}
.upload_progress .completed{
    background-color: var(--col-green);
}
.upload_success_icon{
    color: var(--col-green);
    font-size: 18px;
}

.upload_preview .failed_message {
    color: var(--col-main-primary);
}
.upload_preview .failed_file_name {
    font-size: 12px;
}
.success_page{
    text-align : center;
    height     : 100%;
    padding-top: 20%;
}
.success_page i{
    font-size: 65px;
}
.success_page .title {
    font-size  : 28px;
    margin     : 10px;
    font-weight: bold;
}
/* .file_container{
    height  : 50px;
    overflow: hidden;
} */
.template_download_link{
    color          : var(--col-main-primary);
    text-decoration: underline;
}
.template_download_link:hover {
    color          : var(--col-main-primary);
}
.form-control, .form-control:focus, .form-control:active, .input-group-text {
    background-color: transparent;
}
.form-floating > .form-control:focus ~ label{
    color: var(--col-text-main);
}
.form-control:focus{
    border-color: var(--col-main-primary);
}
.form-control:focus ~ .form-label {
    border      : none;
    border-color: transparent;
}

.live_agm_root{
    border       : 1.5px solid var(--col-medium-grey);
    border-radius: 8px;
    padding      : 10px 0px;
    margin-bottom: 10px;
}
.form_section div.invalid-feedback{
    display: block !important;
}
input.form-control.file-no-browse{
    display: none !important;
}

.file_icon, .upload_preview img.icon{
    height: 25px;
    width : auto;
}

.bg-pink {
    background-color: var(--col-main-faded);
    color: #000000;
}
.input-group-text.kv-date-picker > .text-primary{
    color: var(--col-main-primary) !important;
}
.datepicker table tr td.old, .datepicker table tr td.new {
    color: var(--col-medium-grey);
}
.datepicker table tr td.disabled, .datepicker .month.disabled {
    color          : var(--col-light-grey);
    text-decoration: line-through;
}
.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--col-main-primary) !important;
    color           : var(--col-white);;
}

.select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection, .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus {
    border-color: var(--col-main-faded);
    box-shadow  : 0 0 0 0.25rem var(--col-main-faded-rgb);
    color       : var(--col-white);
}
.select2-container--krajee-bs5:not(.select2-container--disabled) .select2-dropdown {
    border-color: var(--col-main-faded);
    box-shadow: 0 0.375rem 0.75rem 0.2rem var(--col-main-faded-rgb);
}

.select2-container--krajee-bs5 .select2-results__option.select2-results__option--selected, .select2-container--krajee-bs5 .select2-results__option[aria-selected=true] {
    /* color           : var(--col-dark-grey); */
    background-color: var(--col-main-faded);
}

.agm_details .column {
    border       : 1px solid var(--col-medium-grey);
    border-radius: 7px;
    padding      : 10px;
}
.agm_details .row:not(.heading){
    padding      : 10px 0px;
    /* border       : 1.5px solid var(--col-medium-grey); */
    margin       : 7px 0px;
    border-radius: 8px;
}
.agm_details .heading{
    font-size  : 16px;
    font-weight: bold;
    color      : var(--col-main-primary)
}
/* .agm_details .col-md-4{
    font-weight: bold;
} */
.agm_details .col-md-8{
    font-weight: bold;
    text-align: right;
}

.agm_details .label {
    font-size       : 14px;
    padding         : 10px;
    background-color: var(--col-light-grey);
    border-radius   : 5px;
    margin-bottom   : 10px;
}
.agm_details .value {
    font-size : 14px;
    text-align: center;
}
.agm_details .percentage {
    color      : var(--col-main-primary);
    font-weight: bold;
}
.forgot_password{
    /* float      : right; */
    color      : var(--col-main-primary);
    font-weight: bold;
}
.copy_password{
    margin-left: 15px;
    font-size  : 20px;
}
.agm_reports .heading{
    font-weight: bold;
    font-size  : 16px;
}
.input-group-text.kv-field-separator {
    border-radius: 0px;
}

.login_menu_header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}
.service_duration{
    font-size: 12px;
    color    : var(--col-medium-grey);
}
.user_company_detail{
    padding: 5px 0px;
}
.user_company_detail > .row{
    padding: 3px 0px;
}
.user_company_detail > .row div:first-child{
    color    : var(--col-dark-grey);
}
.user_company_detail > .row div:last-child{
    color    : var(--col-main-primary);
}
.user_filter{
    text-align: right;
}
.checkbox_mqs {
    border-color: #d22630 !important;
}
.checkbox_mqs:checked {
    background-color: #d22630 !important;
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}