.spinner {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 1.5px solid #c7e0f4;
    border-top-color: #0078d7;
    animation: spinAnimation 1.3s infinite cubic-bezier(.53, .21, .29, .67);
}

.loading-overlay {
    display: none;
    background: rgba(255, 255, 255, 0.7);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9998;
    align-items: center;
    justify-content: center;
}

.loading-overlay.is-active {
    display: flex;
}

@keyframes spinAnimation {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.text-error {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #ea5455;
}

/* .breadcrumb-item + .breadcrumb-item::before {
    margin-top: 5px;
} */

.button-group-same-widths * {
    width: 120px;
    display: inline-block;
}

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

.text-red,
.error {
    color: red !important;
}

#html5-qrcode-button-camera-stop,
#html5-qrcode-button-camera-start,
#html5-qrcode-button-camera-permission {
    cursor: pointer;
    color: #fff;
    background-color: #7367f0;
    border-color: #7367f0;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#html5-qrcode-button-camera-stop:hover,
#html5-qrcode-button-camera-start:hover,
#html5-qrcode-button-camera-permission:hover {
    color: #fff !important;
    background-color: #685dd8 !important;
    border-color: #685dd8 !important;
}

.border-none {
    border: none !important;
}

#render img {
    display: none !important;
}

.required:after {
    content: " *";
    color: red;
}

#fromDate::placeholder,
#toDate::placeholder {
    font-size: 13px;
}

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

.bootstrap-select .dropdown-toggle.show {
    border-color: #7367f0 !important;
}

.select2-results__options {
    word-break: break-word;
    overflow-x: hidden;
}

.text-gray-list {
    color: gray !important
}

h5.title {
    color: #7367F0;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.p-t-3 {
    padding-top: 3px;
}

.p-b-2 {
    padding-bottom: 2px;
}

input.invalid {
    border: 1px solid red;
}

.vertical-top {
    vertical-align: top !important;
}

.user-division-max-width {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 150px;
    display: block;
}

.user-email-max-width {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 170px;
    display: block;
}

.user-name-max-width {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 170px;
    display: block;
}

.table th {
    text-transform: unset !important;
}

.login-with-google-btn {
    transition: background-color .3s, box-shadow .3s;
    width: 100%;

    padding: 10px 16px 10px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 27%);

    color: #000000;
    font-size: 15px;
    font-weight: 500;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 20px 15px;

    &:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0 0 0 / 42%);
    }

    &:active {
        background-color: #eeeeee;
    }
}

.pre-wrap {
    white-space: pre-wrap;
}

.white-space-normal {
    white-space: normal;
}

.mr-10 {
    margin-right: 10px;
}

.mr-5 {
    margin-right: 5px;
}

.select2.select2-container {
    width: 100% !important;
}

.td-disabled {
    background: #f1f1f1 !important;
}

.text-oneline--td {
    word-break: keep-all;
    white-space: nowrap;
    width: 1px !important;
}

.text-ellipsis {
    /* text-overflow: ellipsis;
    overflow: hidden;
    /* display: block; */
    white-space: normal;
}

.btn-same-width .btn {
    width: 120px;
}

ol.breadcrumb {
    margin-bottom: -10px;
}

label.form-label {
    font-weight: 500;
}

.dropdown-menu.show {
    z-index: 10000 !important;
}

.disabled {
    pointer-events: none;
    opacity: 1;
    background-color: rgba(75, 70, 92, 0.08);
}

.paginate_button.disabled,
.pagination .page-item.disabled {
    pointer-events: none;
    opacity: 1;
    background-color: unset !important;
}

/* .close:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
} */

.bootstrap-select a[role="option"] span {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: -5px;
}

.label_description {
    margin-top: 7px;
    margin-right: 5px;
}

.badge.badge-outlined {
    background-color: transparent !important;
    border: 1px solid;
    border-radius: 50px;
}

.badge.badge-outlined.badge-default {
    border-color: #B0BEC5;
    color: #B0BEC5
}

.badge.badge-outlined.bg-primary {
    border-color: #7367f0;
    color: #7367f0
}

.badge.badge-outlined.bg-secondary {
    border-color: #a8aaae;
    color: #a8aaae
}

.badge.badge-outlined.bg-success {
    border-color: #28c76f;
    color: #28c76f
}

.badge.badge-outlined.bg-warning {
    border-color: #FFD600;
    color: #FFD600
}

.badge.badge-outlined.bg-info {
    border-color: #00cfe8;
    color: #00cfe8
}

.badge.badge-outlined.bg-danger {
    border-color: #ea5455;
    color: #ea5455
}

.check-success {
    font-size: 18px;
    color: #28c76f;
}

.check-danger {
    font-size: 18px;
    color: #ea5455;
}

.user-info {
    display: flex;
}

.user-info .user-info-item {
    padding: 10px 20px 8px 20px;
    margin-right: 25px;
    border-radius: 5px;
    min-width: 140px;
}

.bg-blue {
    background-color: rgba(221, 242, 253, 1);
}

.image-verify {
    width: 400px;
    height: 250px;
    object-fit: contain;
}

.pl-0 {
    padding-left: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.card-custom {
    border: 1px solid rgba(0, 0, 0, .125);
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-5 {
    margin-left: 5px;
}

.ml-20 {
    margin-left: 20px;
}

.light-style .select2-dropdown {
    z-index: 1000000 !important;
}

.pointer {
    cursor: pointer;
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1450px;
    }
}

.error.error_name {
    font-size: 15px;
}

.filter-option-inner {
    padding-right: 20px;
}

html:not([dir=rtl]) table.table-bordered.dataTable tr:first-child th:first-child,
html:not([dir=rtl]) table.table-bordered.dataTable td:first-child {
    border-left: 1px solid #dbdade !important;
}

html:not([dir=rtl]) table.table-bordered.dataTable tr:first-child th:last-child,
html:not([dir=rtl]) table.table-bordered.dataTable td:last-child {
    border-right: 1px solid #dbdade !important;
}

.table-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.mw-300 {
    max-width: 300px;
}

.pull-left {
    float: left;
}

.hide {
    display: none !important;
}

.form-check-input.disabled-checkbox,
.form-check-label.disabled-label {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

.items-center {
    align-items: center;
}

.max-h-60vh {
    max-height: 60vh;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.gap-2 {
    gap: .5rem;
}

.flex-col {
    flex-direction: column;
}

.fit-content {
    width: -moz-fit-content;
    width: fit-content;
}

#reader {
    border-radius: 5px;
    margin-bottom: 1rem !important;
}

.mb-0.mb-3 {
    margin-bottom: 0 !important;
}

.col-width-20 {
    width: 20%;
}

.mt-10 {
    margin-top: 10px;
}

.number-format {
    text-align: right;
}

.sub-label {
    margin-left: 3px;
    font-size: 10px;
    color: #777;
}

.custom-flex-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mw-500 {
    max-width: 500px !important;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-calendar-picker-indicator {
    display: none;
}

.dropdown-input-wrapper {
    position: relative;
}

.dropdown-input {
    padding-right: 30px;
    cursor: pointer;
}

.dropdown-input-wrapper::after {
    content: "";
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    right: 16px;
    top: 45%;
    width: 0.5em;
    height: 0.5em;
    border: 1px solid;
    border-top: 0;
    border-left: 0;
}

.lg-backdrop  {
    z-index: 9999 !important;
}

.lg-outer {
    z-index: 10000 !important;
}

.mr-20 {
    margin-right: 20px;
}

.radio-sub-label {
    font-size: 13px;
    color: #777;
    margin-bottom: 10px;
}

.radio-label {
    font-weight: 700 !important;
    color: #5d596c !important;
    margin-bottom: 0;
}

.note-title {
    font-weight: 700 !important;
    color: #5d596c !important;
    margin-bottom: 0;
}

.box-upload-info {
    background: #d6f7fb;
    padding: 15px;
    border-radius: 5px;
}

.box-upload-error {
    background: #fce4e4;
    padding: 15px;
    border-radius: 5px;
}

.box-upload-error span {
    align-self: center;
}

form.form-disabled .btn.dropdown-toggle.disabled.btn-default {
    background: rgba(75, 70, 92, 0.08);
    border: 1px solid #dbdade;
    opacity: 1;
}

.box-media-container .image-original, .box-media-container .image-processed {
    position: absolute;
    width: 75px;
    height: 30px;
    padding: 5px;
    z-index: 9;
    background: #e7eae7;
    top: 10px;
    right: 10px;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
}

.box-media-container .image-processed {
    color: #02A7F0;
}

.table:not(.table-dark) thead:not(.table-dark) th {
    color: #ffffff;
    align-content: center;
    font-weight: 600;
    background: #427d9d;
}

thead, tbody, tfoot, tr, td, th {
    border-color: #cddee4;
    border-style: solid;
    border-width: 0;
}
#accordionPanelsStayOpenExample .card {
    --bs-card-cap-padding-y: 0.5rem;
}

#panelsStayOpen-collapseOne .card-body{
    padding-top: 0;
    padding-bottom: 0;
}

table tr[data-redirect] {
    cursor: pointer;
}

span.rounded-pill {
    cursor: unset;
}

.loading-box {
    position: relative;
    height: 100%;
    width: 100%;
}

.loading-box svg {
    position: absolute;
}