*{
    outline: none !important;
}
.btn:first-child:active:focus{
    box-shadow: none !important;
    border-color: transparent;
}
:root{
	--primary:#0084B3;
    --primary-dark:#026b91;
    --primary-light:#EAF5FA;
	--secondary:#5F6F8D;
	--light:#F5F7FA;
	--dark:#1F2C46;
    --white:#fff;
    --danger: #DC3545;
    --success: #0ACF97;
    --warning:#FFC700;
    --muted:#5F6F8D;
    --border-color:#DFEBF0;
    --page-content-space:20px;
    --body-font-size:14px;
    --field-bg:#F4F6FB;
    --field-placeholder:#767F8F;
    --field-border-focus:#E7ECF4;
    --field-font-size:14px;
    --sidebar-width: 230px;
    --bs-border-radius:0.75rem;
    --bs-dark-rgb: 31, 44, 70;
    --bs-secondary-bg:#d3d3d3;
    --greay:#5F6F8D;
    --report-sidebar-width:330px;
}
body{
    font-family: "Poppins", sans-serif;
    background-color:var(--light);
    font-size: var(--body-font-size);
    font-weight: 400;
    overflow-x: hidden;
}
html {
    font-size: var(--body-font-size);
}
::selection{
    color:var(--white);
    background:var(--primary);
}
img, svg {
    width: auto;
    max-width: 100%;
    height: auto;
}
*, ::after, ::before {
    box-sizing: border-box;
    outline: none;
}
html button{
    box-shadow: none !important;
}
p:last-child{
    margin-bottom: 0;
}
html a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s;
}
html a:hover{
    color: var(--dark) ;
    text-decoration: none;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 600;
}

blockquote {
    margin: 0 0 16px
}
.card-text {
    color: #677788;
}

/*Buttons*/
.btn {
    --bs-btn-padding-x: 18px;
    --bs-btn-padding-y: 9px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 18px;
    --bs-btn-border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn.btn-lg {
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 16px;
}
.btn.btn-sm {
    --bs-btn-padding-x: 15px;
    --bs-btn-padding-y: 4px;
    --bs-btn-font-size: 13px;
}
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color:var(--primary);
    --bs-btn-hover-bg:var(--primary-dark);
    --bs-btn-hover-border-color:var(--primary-dark);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color:var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.btn-link {
    --bs-btn-color: var(--primary);
    --bs-btn-hover-color:var(--primary-dark);
    --bs-btn-active-color:var(--primary-dark);
}
.btn-soft-primary {
    color: var(--primary);
    background-color: var(--primary-light);
    border-color: transparent;
}
.btn-soft-primary:focus,
.btn-soft-primary:hover {
    color: #fff;
    background-color: var(--primary);
    border-color: transparent;
}
.btn-ghost-primary {
    color: var(--primary);
    background-color: transparent;
}
.btn-ghost-primary:focus,
.btn-ghost-primary:hover {
    color: var(--primary);
    border-color: transparent;
    background-color: var(--primary-light);
}
.btn.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.btn.btn-icon.btn-lg {
    width: 43.6px;
    height: 43.6px;
}
.btn.btn-icon.btn-md {
    width: 30px;
    height: 30px;
}
.btn.btn-icon.btn-sm {
    width: 27.6px;
    height: 27.6px;
}
.btn.btn-icon.btn-circle {
    border-radius: 50px;
}

.btn.btn-mate {
    background-color: rgb(31 44 70 / 10%);
    color:var(--dark);
}
.btn.btn-mate:hover {
    background-color: var(--dark);
    color:var(--white);
}
.btn.btn-outline {
    --bs-btn-color: var(--dark);
    --bs-btn-border-color: var(--field-border-focus);
    --bs-btn-hover-border-color: var(--dark);
}






.form-field {
    margin: 0 0 18px;
    line-height: 120%;
}
.form-field label,.form-label {
    font-size: 13px;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: top;
    line-height:18px;
}
span.form-text {
    display: block;
    font-weight: 400;
}
.form-field label em{
    color:red;
    font-style: normal;
}
.form-field label > button {
    font-size: var(--body-font-size);
    font-weight: 500;
    text-decoration: underline;
    background: transparent;
    border: 0;
    color: var(--primary);
}
html .form-control, html .form-select {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 0 15px;
    height: 38px;
    font-size: var(--field-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    font-family: inherit;
    font-weight: normal;
}
html .form-control-light{
    background: var(--light);
    box-shadow: none;
}
.form-control.form-control-lg{
    height: 44px;
}
.form-control.form-control-sm{
    height: 28px;
}
.form-control[type=file] {
    line-height: 36px;
    padding-left: 10px;
}
html textarea.form-control {
    padding: 10px 15px;
    min-height: 100px;
}
.input-group > textarea.form-control {
    min-height: 60px;
}



.form-field-icon {
    position: relative;
}
.form-field-icon .icon {
    width: 38px;
    height: 38px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-field-icon .form-control, 
.form-field-icon .form-select {
    padding-left: 38px;
}








html .form-control-solid,
html .form-select-solid{
    background-color: var(--field-bg);
    border-color: var(--field-border-focus);
}
html .form-control:hover,
html .form-control:focus,
html .form-select:hover,
html .form-select:focus {
    border-color:var(--field-border-focus);
    background-color:var(--white);
}
html .form-control-light:hover, 
html .form-control-light:focus, 
html .form-select-light:hover, 
html .form-select-lightfocus {
    background: var(--light);
}
html .form-control.form-control-solid:hover,
html .form-control.form-control-solid:focus,
html .form-select.form-select-solid:hover,
html .form-select.form-select-solid:focus {
    background-color: var(--field-bg);
}
html .form-control::-webkit-input-placeholder { /* Edge */
    color: var(--field-placeholder);
}
html .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--field-placeholder);
}
html .input-group-merge .form-control {
    padding-left: 40px;
    border-radius: 8px !important;
}
.input-group-prepend {
    position: absolute;
    left: 4px;
    z-index: 6;
    top: 50%;
    background: transparent;
    border: 0;
    transform: translateY(-50%);
}
html .form-control::placeholder {
    color: var(--field-placeholder);
}
.select2-container {
    display: block;
    z-index: 9991;
}
html .select2.select2-container {
    width: 100% !important;
    z-index: 1;
}
.select2-container--default .select2-selection--single {
    background-color: var(--white);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 0 35px 0 15px;
    height: 38px;
    font-size: var(--body-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}
.field-icon .select2-container--default .select2-selection--single{
    padding-left:38px;
}
html .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 20px;
    height: 20px;
    right: 9px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}
html .select2-container--default .select2-selection--single .select2-selection__arrow:before {
    content: "";
    width: 12px;
    height: 8px;
    display: block;
    transition: all 0.2s;
    color: var(--muted);
    background-image: url('data:image/svg+xml,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%23313131" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
}
html .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:before {
    transform: rotate(180deg);
    margin-top: 0;
}
html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--primary);
    color: white;
}
html .select2-container--default .select2-results__option--selected {
    background-color: var(--light);
}
.select2-container--default .select2-selection--multiple {
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 0 35px 2px 15px;
    min-height: 38px;
    font-size: var(--body-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-top: 2px;
}
html .select2-dropdown{
    border-color:rgba(0,0,0,0.1);
}
html .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--light);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    padding: 0 10px;
    height: 32px;
    font-size: var(--body-font-size);
}
html .select2-results__option {
    font-size: var(--body-font-size);
    padding: 6px 10px;
}
.select2-results__option.select2-results__message {
    text-align: center;
    color: var(--muted);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    background: #cfcfcf96;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: none;
    background: #cfcfcf96;
    padding: 3px 16px 3px 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    left: auto;
    top: 0;
    right: 3px;
    border: 0;
    font-size: 14px;
    height: 100%;
}
.form-select-solid ~ .select2-container--default .select2-selection--single {
    background: var(--light);
    border-color: var(--field-border-focus);
}
.form-select-sm ~ .select2-container--default .select2-selection--single {
    height: 30px;
}
.form-select-lg ~ .select2-container--default .select2-selection--single {
    height: 44px;
}
html .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    font-weight: 400;
}
html .form-switch {
    margin-bottom: 0;
}
html .form-switch .form-check-input {
    background-color: var(--light);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 0 0 transparent !important;
    cursor: pointer;
}
html .form-switch .form-check-input:focus {
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}
html .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
html .form-switch .form-check-input:checked {
    background-color: var(--dark);
    border-color: var(--dark) !important;
}
html .form-switch .form-check-label {
    margin-bottom: 0;
    cursor: pointer;
}
.form-switch.form-switch-2 {
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.form-switch.form-switch-2 .form-check-input {
    margin: 0 10px;
}
.form-switch.form-switch-2 .form-check-input + .form-check-label {
    order: -1;
    color: var(--primary);
}
.form-switch.form-switch-2 .form-check-input:checked + .form-check-label,
.form-switch.form-switch-2 .form-check-input + .form-check-label + .form-check-label{
    color: var(--muted);
}
.form-switch.form-switch-2 .form-check-input:checked + .form-check-label + .form-check-label{
    color: var(--primary);
}
form:last-child{
    margin-bottom:0;
}
.text-small {
    font-size: 13px;
    font-weight: normal;
}
html .form-check-input {
    width: 18px;
    height: 18px;
    top: 0;
    margin: 0;
    box-shadow: 0 0 0 transparent !important;
    background-color: var(--light);
    border: 1px solid rgba(0,0,0,0.1) !important;
}
html .form-check-input.is-invalid {
    border-color: var(--bs-form-invalid-color) !important;
    background-color: transparent;
}
html .form-check .form-check-input {
    margin-left: -24px;
}
html .form-check {
    min-height: 18px;
    padding-left: 25px;
    margin-bottom: 15px;
}
.form-field.form-check-field {
    display: flex;
    flex-direction: column;
}
.form-field.form-check-field  .form-check:last-child {
    margin-bottom: 0;
}
.form-field.form-check-field ul.parsley-errors-list {
    order: 1;
}
html .form-check label {
    margin-bottom: 0;
}
html .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary)!important;
}
html .form-switch .form-check-input {
    width: 36px;
    height: 20px;
    margin-right: 10px;
}
html .form-control.shadow-sm {
    box-shadow: 0 1px 3px rgb(0 0 0 / 7%) !important;
    border: 0;
}
/* floting-lablel */
.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, 
.form-floating>.form-control:not(:placeholder-shown)~label,
 .form-floating>.form-select~label {
    transform: scale(.85) translateY(-24px) translateX(0);
}
.form-floating>.form-control-plaintext:focus,
 .form-floating>.form-control-plaintext:not(:placeholder-shown), 
 .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 10px;
}
.form-floating>.form-control, .form-floating>.form-control-plaintext{
    padding-left: 15px;
    padding-right: 15px;
}
.form-floating>label{
    left: 6px;
}
.form-field-light>.form-control-plaintext~label::after,
 .form-field-light>.form-control:focus~label::after, 
 .form-field-light>.form-control:not(:placeholder-shown)~label::after, 
 .form-field-light>.form-select~label::after {
    height: 10px;
}

.form-range:disabled {
    opacity: 0.5;
}
.input-group-lg input.form-control {
    height: 44px;
    font-size: 14px;
}
.form-control.is-invalid {
    color: var(--bs-form-invalid-color);
}
.form-control.is-valid {
    color: var(--bs-form-valid-color);
}
.input-group-sm input.form-control{
    height: 30px;
}
.input-group-append, .input-group-prepend{
    display: flex;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
    margin-left: -0.0625rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group .select2-container--default .select2-selection--single {
    border-radius: 0;
}
.input-group>.input-group-append>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
input[type='range']{
    overflow: hidden;
}
input[type='range']::-webkit-slider-thumb {
    background: var(--primary);
}
input[type="range"]::-webkit-slider-runnable-track {
    background: #ccc;
}
li.parsley-required,ul.parsley-errors-list.filled li {
    color: red;
    font-size: 14px;
    margin-top: 4px;
    font-weight: 400;
}
html .form-control.parsley-error, html .form-select.parsley-error {
    border-color: #ff000057;
}
.form-field.select-field {
    display: flex;
    flex-direction: column;
}
.form-field.select-field ul.parsley-errors-list.filled {
    order: 1;
}
html .table-hover>tbody>tr:hover>* {
    --bs-table-bg-state: rgb(245 247 250);
}
.table-sm>:not(caption)>*>* {
    padding: .25rem .25rem;
    font-size: 14px;
}
html .table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: rgb(245 247 250);
}
html table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
    box-shadow: inset 0 0 0 9999px rgb(245 247 250);
}

html ul.pagination li.dt-paging-button {
    margin-right: 6px;
}
html ul.pagination li.dt-paging-button .page-link {
    border: 0;
    color: #5F6F8D !important;
    background-color: transparent !important;
    font-weight: 500;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 13px;
    box-shadow: 0 0 0 transparent !important;
}
html ul.pagination li.dt-paging-button .page-link:hover {
    color: var(--primary) !important;
    background: #e4f8ff !important;
}
html ul.pagination li.dt-paging-button.active .page-link {
    color: var(--dark) !important;
    background: #e4f8ff !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05) !important;
}

/* time-picker */
.bootstrap-timepicker-widget.dropdown-menu {
    padding: .46875rem!important;
    border-radius: 6px!important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.bootstrap-timepicker-widget table tbody tr td .bootstrap-timepicker-hour, .bootstrap-timepicker-widget table tbody tr td .bootstrap-timepicker-meridian, .bootstrap-timepicker-widget table tbody tr td .bootstrap-timepicker-minute {
    width: 40px;
    height: calc(1.5em + .875rem + 2px);
    border: 1px solid #ced4da;
    padding: 6px;
    background: 0 0;
    color: #000;
    box-shadow: none;
    transition: all .2s linear;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
.bootstrap-timepicker-widget table tbody tr td .glyphicon {
    font-family: Font Awesome\ 6 Free,Font Awesome\ 6 Pro,FontAwesome!important;
    font-weight: 700;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 12px;
}
.bootstrap-timepicker-widget table tbody tr td a:focus, .bootstrap-timepicker-widget table tbody tr td a:hover {
    background: var(--bs-component-dropdown-hover-bg);
    color: var(--bs-component-hover-color);
}
.bootstrap-timepicker-widget table td a:hover {
    text-decoration: none;
    background-color: #eee;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-color: #ddd;
}
.bootstrap-timepicker-widget table tbody tr td a {
    border: none;
    color: #adb5bd;
    padding: .46875rem;
    text-decoration: none;
    border-radius: 4px!important;
}
.bootstrap-timepicker-widget table tbody tr td .glyphicon.glyphicon-chevron-down:before {
    content: "\f078";
}

.bootstrap-timepicker-widget table tbody tr td .glyphicon.glyphicon-chevron-up:before {
    content: "\f077";
}

/* tagit */
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    background: var(--primary);
    padding: 2px 7px;
    border-radius: 5px;
}
.form-field.tag-input .bootstrap-tagsinput {
    width: 100%;
    background-color: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 7px 7px;
    min-height: 38px;
    font-size: var(--field-font-size);
    box-shadow: 0 0 0 transparent !important;
    color: var(--dark);
    transition: all 0.2s;
    font-family: inherit;
    font-weight: normal;
    font-size: 12px;
}
.form-field.white-thems .bootstrap-tagsinput .tag {
    background: white;
    color: #000;
    border: 1px solid #ccc;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: '⛌' !important;
    font-weight: 700;
    font-size: 10px;
}

/* range-slider */
.irs.irs--big {
    height: 40px;
}
.irs.irs--big .irs-bar {
    height: 4px;
    top: 30px;
    background: var(--primary);
    box-shadow: none;
}
.irs.irs--big .irs-handle {
    top: 21px;
    width: 20px;
    height: 20px;
    background: #fff;
    border: none;
    box-shadow: 0 2px 5px rgba(32,37,42,.2);
}
.irs.irs--big .irs-handle.state_hover, .irs.irs--big .irs-handle:focus, .irs.irs--big .irs-handle:hover {
    background: #fff;
    box-shadow: 0 2px 5px rgba(32,37,42,.4);
}
.irs .irs .irs-line {
    height: 4px;
    top: 30px;
    background: #ced4da;
    border: none;
}
.irs.irs--flat .irs-handle>i:first-child {
    background: var(--primary);
    width: 4px;
    margin-left: -2px;
}
.irs.irs--flat .irs-handle.state_hover>i:first-child, .irs.irs--flat .irs-handle:focus>i:first-child, .irs.irs--flat .irs-handle:hover>i:first-child {
    background: #276baa;
}
.irs.irs--flat .irs-bar {
    height: 4px;
    top: 30px;
    background: var(--primary);
}
.irs .irs .irs-from, .irs .irs .irs-single, .irs .irs .irs-to {
    background: #2d353c;
    font-size: .6875rem;
    font-weight: 600;
}
.irs .irs .irs-from:before, .irs .irs .irs-single:before, .irs .irs .irs-to:before {
    border-top-color: #2d353c;
}






.table-sm>:not(caption)>*>* {
    padding: .25rem .25rem;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg);
}
html table .form-check {
    margin-bottom: 0;
}
ul.pagination li.dt-paging-button a.page-link {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--primary);
    color: var(--primary);
}
ul.pagination li.dt-paging-button a.page-link:hover,
ul.pagination li.dt-paging-button.active a.page-link {
    background: var(--primary);
    color: #FFF;
}
ul.pagination li.dt-paging-button.disabled a.page-link {
    background: transparent;
    opacity: 0.5;
}
.dt-container .dt-length {
    display: flex;
    align-items: center;
}
html .dt-container .select2 {
    min-width: 100px;
    margin-right: 10px;
}



.fs-8 {
    font-size: 8px !important;
}
.fs-9 {
    font-size: 9px !important;
}
.fs-10 {
    font-size: 10px !important;
}
.fs-11 {
    font-size: 11px !important;
}
.fs-12 {
    font-size: 12px !important;
}
.fs-13 {
    font-size: 13px !important;
}
.fs-14 {
    font-size: 14px !important;
}
.fs-15 {
    font-size: 15px !important;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-17 {
    font-size: 17px !important;
}
.fs-18 {
    font-size: 18px !important;
}
.fs-19 {
    font-size: 19px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.h-30px {
    height: 30px;
}
.fw-100 {
    font-weight: 100!important
}

.fw-200 {
    font-weight: 200!important
}

.fw-300 {
    font-weight: 300!important
}

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

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

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

.fw-700 {
    font-weight: 700!important
}

.fw-800 {
    font-weight: 800!important
}
.blockquote {
    color: var(--secondary);
    border-left: .1875rem solid  var(--secondary);
    padding-left: .75rem;
    margin-bottom: 0;
}
footer.blockquote-footer {
    font-size: 12px !important;
    margin-top: -12px;
}
figcaption.blockquote-footer {
    margin-top: 0;
}
/* tabs */
ul.nav.nav-tabs {
    border: 0;
}
.nav-tabs .nav-link {
    color: var(--secondary);
    padding: 10px 20px;
    font-size: 13px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--dark);
    font-weight: 500;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--dark);
    font-weight: 500;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.tab-content.panel {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #DFEBF0;
    padding: 17px;
}
.card {
    box-shadow: 0 .375rem .75rem rgba(140,152,164,.075);
    border-color: rgba(231, 234, 243, 0.7);
    border-radius: 0.75rem;
}
.card-body{
    padding: 20px;
}   
.card-subtitle {
    display: block;
    text-transform: uppercase;
    color: #8c98a4;
    font-size: 11px;
    margin-bottom: 4px;
}
.card-text {
    color: var(--secondary);
}
.card-link {
    font-weight: 600;
    white-space: nowrap;
}
.card-header,.card-footer {
    padding: 15px 16px;
    --bs-card-cap-bg: var(--light);
    --bs-card-border-color: var(--border-color);
}
.card-img-overlay {
    background: rgb(32 37 42 / 50%) !important;
    color: #fff;
}
.card-img-overlay .card-text {
    color: var(--white);
}
.card-transition {
    transition: all .2s ease-in-out;
}
.card-transition:focus, .card-transition:hover {
    -webkit-transform: translateY(-2px)!important;
    transform: translateY(-2px)!important;
}

/* car-table */
.avatar {
    position: relative;
    display: inline-block;
    width:42px;
    height:42px;
    border-radius: 100%;
}
.avatar-circle .avatar, .avatar-circle .avatar-img, .avatar-circle .avatar-initials {
    border-radius: 50%;
}
.card table tr th {
    font-weight: 400;
}
.legend-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #bdc5d1;
    border-radius: 50%;
    margin-right: 7px;
}
.avatar:not(img) {
    background-color: #fff;
}
.avatar-soft-primary .avatar-initials {
    color: #377dff;
    background-color: rgba(55,125,255,.1);
}
.avatar-initials {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 2.625rem;
    height: 2.625rem;
    font-size: .875rem;
    font-weight: 600;
    pointer-events: none;
    text-transform: uppercase;
    border-radius: .5rem;
}
.card table.table tr td, .card table.table tr th {
    padding: 8px 10px;
    vertical-align: middle;
}
h3, .h3{
    font-size: 28px;
}
h3, .h3 {
    font-size: 26px;
}
  
h4, .h4 {
    font-size:22px;
}
  
h5, .h5 {
    font-size: 18px;
}
  
h6, .h6 {
    font-size: 16px;
}







/* panel */
.panel .panel-heading {
    padding: 12px 15px;
    border: none;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.panel .panel-heading .panel-title {
    margin: 0;
    line-height: 1.35;
    flex: 1;
}
.panel .panel-heading .panel-heading-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}
.panel .panel-body {
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}
.panel.panel-inverse>.panel-heading {
    background: var(--bs-gray-900);
    color: var(--bs-white);
}
.panel.panel-inverse>.panel-heading {
    background: #f2f3f4;
    color: var(--dark);
}
.panel.panel-inverse>.panel-heading ul.nav.nav-tabs {
    margin-bottom: -12px;
}




/* modal */
.info-modal .modal-dialog {
    max-width: 350px;
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}
.info-modal .modal-content {
    border-radius: 20px;
    border: 0;
    text-align: center;
}
.info-modal .modal-header {
    position: relative;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    z-index: 1;
    border: 0;
    margin: 0 0 10px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-modal .modal-header:before {
    content: "";
    display: block;
    position: absolute;
    left: -300px;
    right: -300px;
    bottom: 0;
    width: 500px;
    height: 500px;
    background: var(--primary);
    z-index: -1;
    border-radius: 50%;
    margin: 0 auto;
    opacity: 0.1;
}
.info-modal.info-modal-danger .modal-header:before {
    background: var(--danger);
}
.info-modal.info-modal-warning .modal-header:before {
    background: var(--warning);
}
.info-modal.info-modal-success .modal-header:before {
    background: var(--success);
}
.info-modal.info-modal-primary .modal-header:before {
    background: var(--primary);
}
.info-modal .modal-header .icon {
    width: 102px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='102' height='78' viewBox='0 0 102 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z' fill='%231E40AF'/%3E%3Ccircle cx='51' cy='39' r='33.5' stroke='%23363636' stroke-opacity='0.15' stroke-width='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.info-modal.info-modal-danger .modal-header .icon {
    background-image: url("data:image/svg+xml,%3Csvg width='102' height='78' viewBox='0 0 102 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z' fill='%23D9214E'/%3E%3Ccircle cx='51' cy='39' r='33.5' stroke='%23363636' stroke-opacity='0.15' stroke-width='3'/%3E%3C/svg%3E");
}
.info-modal.info-modal-warning .modal-header .icon {
    background-image: url("data:image/svg+xml,%3Csvg width='102' height='78' viewBox='0 0 102 78' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z' fill='%23FFC700'/%3E%3Ccircle cx='51' cy='39' r='33.5' stroke='%23363636' stroke-opacity='0.15' stroke-width='3'/%3E%3C/svg%3E");
}
.info-modal.info-modal-success .modal-header .icon {
    background-image: url('data:image/svg+xml,<svg width="102" height="78" viewBox="0 0 102 78" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="88" cy="13" r="6" fill="%2332B86F"/><circle cx="77" cy="58" r="10" fill="%2332B86F"/><circle cx="26" cy="22" r="13" fill="%2332B86F"/><circle cx="17.5" cy="9.5" r="6.5" fill="%2332B86F"/><circle cx="4" cy="4" r="4" fill="%2332B86F"/><circle cx="13" cy="61" r="3" fill="%2332B86F"/><circle cx="87" cy="73" r="5" fill="%2332B86F"/><circle cx="98.5" cy="65.5" r="3.5" fill="%2332B86F"/><circle cx="51" cy="39" r="35" fill="%2332B86F"/><circle cx="51" cy="39" r="33.5" stroke="black" stroke-opacity="0.15" stroke-width="3"/></svg>');
}
.info-modal.info-modal-primary .modal-header .icon {
    background-image: url('data:image/svg+xml,<svg width="102" height="78" viewBox="0 0 102 78" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 8C6.20914 8 8 6.20914 8 4C8 1.79086 6.20914 0 4 0C1.79086 0 0 1.79086 0 4C0 6.20914 1.79086 8 4 8ZM11 9.5C11 12.1232 12.5539 14.3834 14.7914 15.4105C13.653 17.3427 13 19.5951 13 22C13 25.6174 14.4775 28.8896 16.8618 31.2463C16.2978 33.7403 16 36.3354 16 39C16 58.33 31.67 74 51 74C58.9957 74 66.3652 71.3189 72.2584 66.8066C73.6694 67.5679 75.2843 68 77 68C82.5229 68 87 63.5228 87 58C87 55.1803 85.833 52.6331 83.9555 50.8152C85.279 47.1243 86 43.1463 86 39C86 19.67 70.33 4 51 4C43.6716 4 36.8692 6.25232 31.2473 10.1025C29.6425 9.39366 27.8672 9 26 9C25.3167 9 24.6458 9.05272 23.991 9.1543C23.8113 5.72516 20.9739 3 17.5 3C13.9101 3 11 5.91015 11 9.5ZM94 13C94 16.3137 91.3137 19 88 19C84.6863 19 82 16.3137 82 13C82 9.68629 84.6863 7 88 7C91.3137 7 94 9.68629 94 13ZM16 61C16 62.6569 14.6569 64 13 64C11.3431 64 10 62.6569 10 61C10 59.3431 11.3431 58 13 58C14.6569 58 16 59.3431 16 61ZM87 78C89.7614 78 92 75.7614 92 73C92 70.2386 89.7614 68 87 68C84.2386 68 82 70.2386 82 73C82 75.7614 84.2386 78 87 78ZM102 65.5C102 67.433 100.433 69 98.5 69C96.567 69 95 67.433 95 65.5C95 63.567 96.567 62 98.5 62C100.433 62 102 63.567 102 65.5Z" fill="%230084B3"/><circle cx="51" cy="39" r="33.5" stroke="%23363636" stroke-opacity="0.15" stroke-width="3"/></svg>');
}
.info-modal .modal-body h3 {
    color: var(--dark);
    font-size: 22px;
    margin: 0 0 14px;
}
.info-modal .modal-body h4 {
    font-size: 18px;
    margin: 0;
    font-weight: 500;
    line-height: 150%;
}
.info-modal .modal-footer {
    padding: 0 20px 35px;
    justify-content: center;
    border: 0;
}


.toast-wrap {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99;
    width: 420px;
    max-width: 100%;
}
.toast-wrap .toast {
    margin: 8px;
    background: #FFFFFF;
    border: 1px solid #EBEEF2;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    overflow: hidden;
    width: auto;
}
.toast-progress {
    background: var(--primary);
    height: 3px;
    position: absolute;
    left: 0;
    bottom: 0;
    animation-name: progressline;
    animation-duration: 2s;
}
@keyframes progressline {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
html .bg-primary {
    background-color: var(--primary) !important;
}
html .bg-danger {
    background-color: var(--danger) !important;
}
html .bg-warning {
    background-color: var(--warning) !important;
}
html .bg-success {
    background-color: var(--success) !important;
}
.toast-wrap .icon {
    border-right: 1px solid #EBEEF2;
    padding: 12px 15px 12px 5px;
    margin-right: 20px;
}
.toast-wrap .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    margin: 10px;
    transition: all 0.4s;
    transform: scale(0.9);
}
.toast-wrap h3 {
    color: var(--dark);
    font-size: 16px;
    margin: 0 0 5px;
}
@media(max-width: 768px){
    html .product-add-page .card th, html .product-add-page .card td {
        font-size: 13px;
    }
}


html .card {
    background: var(--white);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
    border: 0;
    border-radius: 10px;
    padding: 20px;
    margin: 0 0 20px;
}
.card .h2 {
    text-transform: uppercase;
    font-size: 15px;
    color: var(--muted);
    margin: 0 0 20px;
    font-weight: 500;
}

.text-danger {
    color: var(--danger) !important;
}
.text-warning {
    color: var(--warning) !important;
}
.text-success {
    color: var(--success) !important;
}
.text-primary {
    color: var(--primary) !important;
}
.text-muted {
    color: var(--muted) !important;
}
.of-cover{
    object-fit: cover;
}
/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #F5F7FA; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #D4DBE6; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #bac0ca; 
  }

  html .badge {
    font-size: 12px;
    padding: 6px 10px;
    font-weight: 600;
}
.badge-success {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
}
.badge-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #DC3545;
}
.badge-warning {
    background: rgba(255, 122, 0, 0.1);
    color: #FF7A00;
}
html .dropdown-menu {
    --bs-dropdown-border-color: #ededed;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,0.1);
    border-radius: 8px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-hover-bg: var(--light);
    border: 0;
}
b, strong {
    font-weight: 600;
}
.number-box {
    padding: 0 0 0 12px;
    border-left: 1px solid var(--muted);
}
.number-box p {
    color: var(--muted);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}