@import url('https://fonts.googleapis.com/css2?family=Montserrat: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');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
    font-family: "Montserrat", Helvetica;
    font-size: 14px;
    background: var(--gray-100, #F2F4F7);
}

/* form */
.form-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
    width: 100%;
    border-radius: 12px;
    position: relative;
    flex: 0 0 auto;
}

.form{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
}

.form .div{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      position: relative;
      align-self: stretch;
      width: 100%;
      flex: 0 0 auto;
}

.form-label{
    color: var(--gray-700, #344054) !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    /* font-family: "Montserrat-SemiBold", Helvetica !important; */
}

label.error{
    font-size: 12px;
    padding: 0 12px;
}

.form-control{
    border-radius: 8px;
    border: 1px solid var(--gray-300, #D0D5DD);
    background: var(--base-white, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    /* padding: 12px; */
    padding: 9px 12px;
    color: var(--gray-500, #667085);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    /* font-family: "Montserrat-Bold", Helvetica !important; */
}

.form-control-small{
    padding: 6px 8px;
    font-size: 12px;
    line-height: 16px;
}

select.form-control{
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--gray-200, #D0D5DD);
    background: var(--base-white, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.form-control-search{
    border-radius: 24px;
    border: 1px solid var(--gray-200, #EAECF0);
    background: var(--base-white, #FFF);
    box-shadow: unset;
    background-image: url("../images/i-search.svg");
    background-repeat: no-repeat;
    background-position: 1rem;
    padding-left: 3rem;
}

.form-select{
    border-radius: .5rem;
    padding: 8.5px 12px;
}

.search-box .form-control{
    padding-left: 50px;
}

.search-box-news input{
    background-color: var(--gray-100, #F2F4F7);
}

form div.relative .icon{
    position: absolute;
    right: 16px;
    bottom: 12px;
    color: var(--gray-500, #667085);
}

form .info span:last-child{
    color: var(--gray-600, #475467);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px; /* 142.857% */
}

form div .input-info{
    position: absolute;
    top: 40px;
    right: 12px;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn{
    /* border-radius: 8px; */
    border: 1px solid var(--gray-200, #EAECF0);
    background: var(--gray-200, #EAECF0) !important;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: var(--gray-400, #98A2B3);
}

.form-switch .form-check-input:checked{
    background-color: var(--Primary, #164283);
    border-color: var(--Primary, #164283);
}

.form-switch .form-check-input-small{
    height: .8em;
    width: 1.8rem;
}


.btn{
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    /* font-family: "Montserrat-SemiBold", Helvetica !important; */
    line-height: 20px; /* 142.857% */
}

.btn-sm{
    padding: .25rem .5rem !important;
}

.btn-primary, .btn-primary:active, .btn-primary:focus{
    border: 1px solid var(--Primary, #164283);
    background: var(--Primary, #164283);
    color: var(--base-white, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn-primary:hover{
    background: var(--PrimaryHover, #194b95);
}

.btn-success{
    border: 1px solid var(--gits-color-green-600, #1D9C53);
    background: var(--gits-color-green-600, #1D9C53);
    color: var(--base-white, #FFF);
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn-success:hover{
    background-color: #1fac5b;
    border: 1px solid #1fac5b;
}

.btn-warning{
    border: 1px solid var(--Secondary, #FA6C51);
    background: var(--Secondary, #FA6C51);
    box-shadow: unset;
}

.btn-warning:hover{
    background-color: #ff775e;
    border: 1px solid #ff775e;
}

.btn-danger {
    color: #fff;
    background-color: #fc2721 !important;
    border-color: #fc2721 !important;
}

.btn-outline-dark{
    color: #343a40 !important;
    border: 1px solid var(--gray-300, #D0D5DD);
}

.btn-outline-dark:hover{
    background-color: #eee !important;
    border: 1px solid var(--gray-300, #D0D5DD);
}

.btn-light{
    color: var(--gray-400, #98A2B3);
    font-weight: 500;
}

.btn-add, .btn-filter, .btn-reset, .btn-excel {
    color: var(--base-white, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
    /* padding: 11px 11px !important; */
    border-radius: 25px;
}

/* text */
.text-success{
    color: var(--gits-color-green-600, #1D9C53) !important;
}

.text-secondary{
    color: var(--Secondary, #FA6C51) !important;
}

/* general */
.button{
    color: var(--basewhite);
    width: 100%;
    display: block;
    height: 44px;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--primary);
    border-radius: 8px;
    border: 1px solid;
    box-shadow: var(--shadow-xs);
    border-color: var(--primary);
    box-sizing: border-box;
}

a.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
  all: unset;
  box-sizing: border-box;
  cursor: pointer !important;
}

.text-primary{
    color: var(--Primary, #164283) !important;
}

a.text-primary:hover{
    color: var(--PrimaryHover, #194b95);
    text-decoration: underline !important;
}

.copy-right{
    color: var(--gray-600, #475467);
    /* Text sm/Regular */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #667085 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #667085 !important;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #667085 !important;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #667085 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #667085 !important;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #667085 !important;
}

.hide{
    display: none;
}

.hide-overflow{
    overflow: hidden;
}

.relative{
    position: relative;
}

.btn-call{
    font-family: "Poppins";
    font-size: 12px;
    position: relative;
    padding-left: 38px;
}

.btn-call > span{
    position: absolute;
    left: 13.5px;
    top: 9px;
    font-size: 18px;
}

/* badge */
.bg-soft-primary{
    background: var(--blue-light-50, #F0F9FF) !important;
    color: var(--blue-light-700, #026AA2) !important;
}

.bg-soft-danger{
    background: var(--pink-50, #FDF2FA) !important;
    color: var(--pink-700, #C11574) !important;
}

.bg-soft-success{
    background: var(--success-50, #ECFDF3) !important;
    color: var(--success-700, #027A48) !important;
}

.bg-soft-blue{
    border-radius: 8px;
    border: 1px solid var(--primary-50, #D8EEFD);
    background: var(--primary-50, #D8EEFD);
}

table .badge{
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 10px;
}

table img.rad, form img.rad{
    border-radius: 5px;
}

/* sweetalert2 */
.swal2-close{
    font-size: 24px;
    color: var(--gray-500, #667085);
}

.modal-title span{
    color: var(--Primary-Text, #0D155B);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 21px; /* 140% */
}

.modal-content-icon{
    display: flex;
    width: 48px;
    height: 48px;
    padding: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 28px !important;
}

.modal-content-icon:has(.success){
    border: 8px solid var(--success-50, #ECFDF3);
    background: var(--success-100, #D1FADF);
}

.modal-content-icon .success{
    color: #039855;
    font-size: 24px;
}

.modal-content-icon:has(.danger){
    border: 8px solid var(--gits-color-orange-50, #FFF4ED);
    background: var(--gits-color-orange-100, #FFE7D5);
}

.modal-content-icon .danger{
    color: #EA360C;
    font-size: 24px;
}

.modal-content-title{
    color: var(--gray-900, #101828);
    font-family: "Poppins";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px; /* 155.556% */
}

.modal-content-description{
    color: var(--gray-600, #475467);
    /* Text sm/Regular */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.modal-content.big-radius{
    border-radius: 1em;
}

.modal-header{
    border-bottom: unset;
    padding-bottom: 0;
}

.modal-open .modal-backdrop {
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 100, 0.1);
  opacity: 1 !important;
}

.modal-body .btn{
    color: var(--base-white, #FFF);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.modal-body p{
    color: var(--Primary, #164283);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px; /* 175% */
}



/* font */
.f16px{
    font-size: 16px !important;
}

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

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

.f10px{
    font-size: 10.5px !important;
}

.poppins{
    font-family: "Poppins";
}

.b-500{
    font-weight: 500;
}

/* alignment */
.end{
    text-align: right !important;
}

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

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

/* card */
.card{
    border-radius: 20px;
    border: 1px solid var(--gray-200, #EAECF0);
    background: #FFF;
    padding: 20px;
}

.card.no-padding, .card-body.no-padding{
    padding: 0;
}

.card:has(.card-header){
    /* padding: 8px; */
    border-radius: 8px;
    box-shadow: unset;
}

.card .card-header {
    padding: 8px;
    /* display: flex;
    flex: auto; */
    /* width: 100%; */
    font-size: 15px;
    font-weight: 600;
    color: var(--Primary-Text, #0D155B);
    align-content: space-between;
    background: var(--gits-color-blue-50, #D8EEFD);
}

.card .card-reader div{
    flex: auto;
}
.card .card-header a{
    font-size: 10.5px;
}

.card .card-body .title{
    color: var(--Primary-Text, #0D155B);
    font-feature-settings: 'clig' off, 'liga' off;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.5%; /* 36px */
}

/* filter */
.filter label{
    font-size: 12px;
    padding-left: 8px;
    margin-bottom: 0.25em;
    display: block;
}

.filter input, .filter select{
    border-radius: 24px;
    border: 1px solid var(--gray-200, #EAECF0);
    box-shadow: unset;
}

@media (max-width: 1199px) {
    .filter input, .filter select{
        margin-bottom: 12px;
    }
}

/* table */
h5.sub-title{
    margin-top: 1rem;
    margin-left: .25rem;
    margin-bottom: 0.25rem;
    color: var(--Primary-Text, #0D155B)
}

.form-control-select{
    border-radius: 24px;
    border: 1px solid var(--gray-200, #EAECF0);
    /* background: var(--base-white, #FFF); */
    box-shadow: unset;
    padding: 10px 12px;
}

.dataTables_length, .dataTables_filter{
    /* display: none !important; */
    margin: 16px 16px 0 16px;
}

.dataTables_length label, .dataTables_filter label{
    font-size: 12px;
}

.table th{
    color: var(--gray-600, #475467);
    font-family: "Inter";
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    line-height: 13.5px; /* 150% */
    text-transform: uppercase;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.table td{
    color: var(--gray-600, #475467);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px; /* 142.857% */
}

.table td .btn.btn-xs{
    font-size: 10px;
    padding: 0px 10px;
    border-radius: 4px;
}

.table tr:last-child td{
    border-bottom: unset;
}

.table td a.btn {
    margin-right: 2px;
}

.table-empty th{
    border-bottom: unset;
}

.table-empty tbody{
    display: none;
}

.no-data{
    display: none;
}

.table-empty .no-data{
    display: block;
}

.table-empty #table-paging{
    display: none;
}

.table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before{
    background-color: var(--Primary-Text, #0D155B);
}

.no-data p{
    color: var(--gray-900, #101828);
    text-align: center;
    font-family: "Poppins";
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 19.5px; /* 150% */
}

#table-paging{
    border-top: 1px solid var(--gray-200, #EAECF0);
    position: relative;
}

.dataTables_paginate{
    padding: 16px 16px 0;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination,
.pagination{
    justify-content: center;
    margin-bottom: .5rem;
}

.page-link{
    border: unset;
    font-weight: 400 !important;
    color: var(--Primary, #164283);
    /* Text sm/Semibold */
    font-family: "Poppins";
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px; /* 142.857% */
    margin-left: 6px;
    margin-right: 6px;
    border-radius: 6px;
}

.page-item:first-child .page-link{
    position: absolute;
    left: 0;
}

.page-item:last-child .page-link{
    position: absolute;
    right: 0;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link
{
    border-radius: 6px;
    border: 1px solid var(--gray-300, #D0D5DD);
    background: var(--base-white, #FFF);
    font-weight: 600 !important;
    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.page-item.active .page-link {
    background: var(--gray-100, #F2F4F7);
    color: var(--Primary, #164283);
    border-color: var(--gray-100, #F2F4F7);
}

tfoot.summary-footer{
    background-color: #e9e9ef;
}

tfoot.summary-footer tr th{
    color: #0D155B;
    font-size: 0.8em;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* pills */
.nav-pills>a{
    color: var(--Secondary-Text, #949BB8);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    color: var(--Primary, #164283);
    background-color: var(--BaseWhite, #FFFFFF);
    /* --basewhite: rgba(255, 255, 255, 1) */
}

/* image */
.product-icon{
    border-radius: 10px;
    height: 60px;
    width: 60px;
    background-position: center;
    background-size: cover;
    border: 4px solid rgba(255, 255, 255, 0.40);
}

.product-icon.small{
    height: 60px;
    width: 60px;
    margin: 0;
}

.product-icon.large{
    height: 160px;
    width: 160px;
    margin: 0;
}

/* accordion */
.accordion-body{
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0;
}

.accordion-item{
    border-radius: 12px;
    border: unset;
    background: var(--base-white, #FFF) !important;
    /* margin-bottom: 12px; */
}

.accordion-item button.outline{
    border-radius: 12px;
    border: 1px solid var(--gray-300, #D0D5DD);
    background: var(--base-white, #FFF);
    color: var(--Primary-Text, #0D155B);
    font-family: "Poppins";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 125% */
    padding: 12px 20px;
    /* margin-bottom: 0; */
}

.accordion-item .accordion-button{
    margin-bottom: 12px;
}

.accordion-item:first-of-type .accordion-button{
    border-radius: 12px;
}

.accordion-item:last-of-type .accordion-button.collapsed{
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.accordion-sub-item.active{
    border-radius: 12px;
    border: 1px solid var(--gits-color-blue-200, #9DD4FB);
    background: var(--gits-color-blue-50, #D8EEFD);
}

.accordion-item .card-dashboard{
    display: flex;
    align-content: space-between !important;
    flex-flow: row wrap !important;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
}

.accordion-item .card-dashboard{
    background: var(--gray-50, #F9FAFB) !important;
}

.accordion-item .card-dashboard.active{
    border: 1px solid var(--gits-color-blue-200, #9DD4FB);
    background: var(--gits-color-blue-50, #D8EEFD) !important;
}

.accordion-item .card-dashboard > div:last-of-type{
    flex-grow: 1;
    text-align: center;
}

.accordion-item .card-dashboard > div:first-of-type{
    flex-grow: auto;
}

.accordion-item p{
    color: var(--Primary-Text, #0D155B);
    font-family: "Poppins";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 142.857% */
    text-align: right;
    margin-bottom: 2px;
}

.accordion-button:not(.collapsed) {
    color: #494dab;
    background-color: #fff !important;
    -webkit-box-shadow: unset;
    box-shadow: inset unset;
}

.accordion-item.full .card-dashboard{
    padding: 8px 12px;
    border-radius: 8px;
}

.card .card-body .title.full{
    font-size: 12px !important;
}

/* loader */
/* .circle-loader{
    animation: rootaatee 1s infinite;
}

@keyframes rootaatee {
  100% {transform: rotate(360deg);}
} */

/* transaction */
.transaction-detail{
    color: var(--Primary, #164283);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    line-height: 15px; /* 142.857% */
}

.transaction-detail strong.text-primary{
    line-height: 24px;
    display: inline-block;
}

.transaction-detail span.badge{
    font-size: 14px;
    padding: 4px 10px !important;
    border-radius: 16px !important;
}

.transaction-detail  hr{
    margin: 10px 0px 0px;
    height: 1px;
    background-color: #56728e;
    /* padding: 2px 2px 2px; */
}

.transaction-detail .row div.line-bottom{
    border-bottom: 1px solid #d8e1ea;
}

/* spinner */
.spinner-border{
    height: 3rem;
    width: 3rem;
}

/* wizard */
.wizard .item{
    display: flex;
    flex-direction: row;
}

.wizard .item{
    min-height: 60px;
}

.wizard .item .icon{
    min-width: 40px;
}

.wizard .item:first-child .line.top{
    display: none;
}

.wizard .item .line{
    width: 7px;
    background-color: #d9dadd;
    height: 50%;
    position: absolute;
    left: 34%;
}

.wizard .item .line.top{
    top: 0px;
}

.wizard .item .line.bottom{
    bottom: 0px;
    background-color: #d9dadd;
}

.wizard .item:last-child .line.bottom{
    display: none;
}

.wizard .item img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.wizard .item .text{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    margin-left: 12px;
    display: flex;
}

.wizard .item .text> div{
    margin-top: auto;
    margin-bottom: auto;
}

.wizard .item .text div p{
    margin-bottom: 0;
}

.wizard .item .text div span.wizard-reason{
    color: var(--Primary, #164283);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
}

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

.alert .title{
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}

.alert .description{
    font-size: 10.5px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
}

.alert .description a{
    font-weight: 700
}

.alert.alert-primary{
    border: 1px solid var(--primary-300, #76C3F9) !important;
    background-color: var(--primary-25, #EEFBFF) !important;
    color: var(--primary-700, #76C3F9) !important;
}

.alert.alert-primary a{
    color: var(--primary-700, #76C3F9) !important;
}

/* select 2 */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{
    border-radius: 25px !important;
    font-size: 12px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove{
    width: 0.5rem !important;
    height: 0.5rem !important;
}

.bg-soft-warning {
    background-color: #FFF9F5 !important;
}

.payment-method.problem {
    filter: brightness(60%);
    cursor: not-allowed;
}