:root {
    --col-main-primary  : #D22630;
    --col-main-secondary: #D2263026;
    --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;
}
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-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-dark-grey{
    color: var(--col-dark-grey);
}
.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;
    border-radius: 8px;
    background-color: var(--col-light-grey);
}
.menu_mqs .menu-item{
    border-radius: 8px;
    margin       : 10px 0px 10px 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 6px;
}
.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: 15px;
}
.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       : 10px 10px;
    padding-bottom: 35px;
}

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

/* Login Menu */
.login_menu_header{
    border-radius: 0.3rem 0.3rem  0 0 !important;
}
.login_menu{
    border-radius: 50%;
    border       : 2px solid var(--col-main-primary);
    font-weight  : bold;
    aspect-ratio : 1/1;
    padding-top  : 10%;
}
.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;
}
.div_row_items{
    padding      : 10px 0px;
    border       : 1.5px solid var(--col-light-grey);
    margin       : 7px 0px;
    border-radius: 8px;
    color        : #737171;
    cursor       : pointer;
}
.div_row_items.active {
    color : inherit;
    border: 1.5px solid var(--col-main-primary);
}
.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;
} */

.red-text, .red-text a {
    color: #cf4031;
}

.col-sm-2 {
    padding-right: 5px;
    padding-left: 5px;
}
.invalid-feedback { display: block; }

.site-login span, .timer {
    color: #666;
}

.time-left {
    color: #FF5555 !important;
    font-weight: bold;
}

input.custom-field {
    border: 1px solid #D3D3D3 !important;
    width: 50px !important;
    height: 50px !important;
    text-align: center;
    font-size: 1rem;
    border-radius: 8px;
}

form .btn {
    border-radius: 7px;
    height: 48px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 700;
}

/* .card {
    border-radius: 0;
} */

/* .card-body {
    padding: 3rem !important;
} */

.nav-link {
    color: #000000;
}

.border {
    border-radius: 0.5rem;
}

input[type="checkbox"] {
    appearance        : none;
    -webkit-appearance: none;
    -moz-appearance   : none;
    width             : 20px;
    height            : 20px;
    border            : 1px solid #FFFFFF;
    border-radius     : 3px;
    outline           : none;
    cursor            : pointer;
}

input[type="checkbox"]:checked {
    background-color: red;
}

input[type="checkbox"]:checked::before {
    content    : '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color      : white;
    position   : absolute;
    line-height: 15px;
    padding    : 2px;
    font-size  : 14px;
}

input[type="checkbox"]:not(:checked) {
    background-color: #f2f2f2;
}

.bg-pink {
    background-color: #F8DEE0;
    color           : #000000;
}

/* Preloader */
#preloader-modal {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
  position: fixed;
  margin-top: 0px;
  top: 0px;
  z-index: 9999;
}
#loading-center-modal {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader {
  background-color: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
  position: fixed;
  margin-top: 0px;
  top: 0px;
  z-index: 9999;
}
#loading-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 75px;
  display: inline-block;
  vertical-align: middle;
}
.loader .loader-outter {
  position: absolute;
  border: 4px solid #f0c949;
  border-bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
    infinite;
  animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
.loader .loader-inner {
  position: absolute;
  border: 4px solid #000000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  top: calc(50% - 20px);
  border-top-color: transparent;
  -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
    infinite;
  animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}
@-webkit-keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader-outter {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

@keyframes loader-inner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
/* Preloader END */

.font_reversed {
    font-family: "maqasafontreversed", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
    }
}