/* Datatable */
/* --------------------------------------------------------------------- */
.table-container {
    /* padding: 2rem 2rem; */
    /* padding: 2rem 3rem; */
    padding: 1rem 0rem;
    /* padding: 1rem 0.8rem; */
    border-radius: 8px;
}
.form-wrapper {
    padding: 2rem 3rem !important;
    border-radius: 8px !important;
}

/* -------------------------------------------------------------------------- */
/* Table */
.table-container .row.form-number.active-tab {
    padding: 0rem 2rem !important;
}
.table-container #eportable_wrapper > div:first-child,
.table-container #eportable_wrapper > div:nth-child(2),
.table-container #eportable_wrapper > div:last-child {
    padding: 0rem 2rem !important;
}
th span.dt-column-title {
    display: flex;
    width: max-content !important;
    margin-top: 2rem;
    text-align: left !important;
}
.table-container > .d-flex.flex-row.justify-content-between {
    padding: 0rem 2rem !important;
}

/* --------------------------------------------------------------------- */
td {
    text-align: left !important;

    /* Datatable Row Height Settings */
    overflow: hidden !important; /* Hide overflowing content */
    white-space: nowrap !important; /* Prevent text wrapping */
    text-overflow: ellipsis !important; /* Add ellipsis for overflowing text */
    /* Set fixed row height */
    /* height: 4rem !important; */
    height: 3.5rem !important;

    /* Color settings */
    /* border-bottom-color: rgb(232, 239, 255) !important; */
}
/* --------------------------------------------------------------------- */
/* Add some give at column start */
tr th:first-child,
tr td:first-child {
    padding-left: 2rem !important;
}
tr th:last-child,
tr td:last-child {
    padding-right: 2rem !important;
}
/* ------------------------------------------------------------------------ */
/* Vertical Scroller */
.dt-scroll-body {
    /* overflow-y: auto; */
}

/* The scrollbar */
.dt-scroll-body::-webkit-scrollbar {
    width: 8px; /* Change width */
}

/* The scrollbar track */
.dt-scroll-body::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Change track color */
    border-radius: 10px; /* Add rounded corners */
}

/* The scrollbar thumb */
.dt-scroll-body::-webkit-scrollbar-thumb {
    background-color: #888; /* Change thumb color */
    /* background-color: #bad0ff; */
    border-radius: 10px; /* Add rounded corners */
}

/* Hover effect */
.dt-scroll-body::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Change thumb color on hover */
}
/* Horizontal scroller */
/* -------------------------------------------------------------------------- */
.dt-scroll-body::-webkit-scrollbar:horizontal {
    height: 8px; /* Change height */
}

.dt-scroll-body::-webkit-scrollbar-track:horizontal {
    background-color: #f1f1f1; /* Change track color */
    border-radius: 10px; /* Add rounded corners */
}

.dt-scroll-body::-webkit-scrollbar-thumb:horizontal {
    background-color: #888; /* Change thumb color */
    border-radius: 10px; /* Add rounded corners */
}
/* -------------------------------------------------------------------------- */
.table-button {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    font-size: 0.8rem !important;
}

.table-report-heading {
    color: #bb8c16;
    padding: 0rem 2rem !important;
    font-weight: bold;
}

/* Select2 buttons */
/* -------------------------------------------------------------------- */
.select2-container {
    width: 100% !important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;

    border-radius: 0.2rem;
    color: #495057;
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.3rem 0.85rem !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    width: 100%;

    height: 100%;
    border-radius: 0.5rem !important;
}

.select2-dropdown.select2-dropdown--below {
    /* .select2-results { */
    z-index: 1000000 !important;
}

.label-form {
    font-size: 0.8rem;
}
/* ----------------------------------------------------------------------- */
/* Colors */
.btn-primary {
    background-color: #182b4a !important;
    border-color: #182b4a !important;
}

.bg-gold {
    /* background-color: goldenrod !important; */
    background-color: transparent !important;
    font-size: 1rem !important;
    border: 0.5px solid goldenrod !important;
    /* border: none; */
    /* color: unset; */
    color: #c2931d;
    color: #008055;
    color: #5e0e5e;
    font-weight: bold;
}

.payment-card {
    border-radius: 1rem !important;
}
.payment-box {
    height: 9.7rem !important;
}

/* --------------------------------------------------------------------- */
/* Progress Circle */
.svg-progress {
    height: 60px;
    width: 60px;
    cursor: pointer;
}

.svg-progress-circle {
    transform: rotate(-90deg);
}

.svg-progress-circle-back {
    fill: none;
    stroke: #d2d2d2;
    stroke-width: 4px;
}

.svg-progress-circle-prog {
    fill: none;
    stroke: #7e3451;
    stroke-width: 4px;
    stroke-dasharray: 0 999;
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}

.svg-progress-success {
    stroke: #008055;
}
.svg-progress-danger {
    stroke: #800000;
}
.svg-progress-warning {
    stroke: #807700;
}
.svg-progress-info {
    stroke: #128293;
}

.svg-progress-text {
    width: 100%;
    position: relative;
    top: -37px;
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
}