.modal {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 100px; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* By default, use 80% of screen width */
    max-width: 600px; /* Don't get wider than this on large screens */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: add a shadow for better appearance */
}

@media only screen and (max-width: 480px) {
.modal-content {
    width: 95%; /* Use more width on small screens */
   }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
.modal-content {
    width: 90%; /* Use a bit less width on tablets */
   }
}

@media only screen and (min-width: 769px) {
.modal-content {
    width: 80%; /* Use the default width on desktops */
   }
}
.table {
    border-collapse: collapse;
}

.td {
    padding: 5px;
    font-family: "Roboto","Segoe UI","GeezaPro","DejaVu Serif","sans-serif","-apple-system","BlinkMacSystemFont";
    font-size: 10px;
    font-weight: normal;
}

.selectionSummary {
    font-weight: bold;
    margin-top: 20px;
}

input[type="password"]::-ms-reveal {
    display: none;
}

.table-bordered>:not(caption)>*>* {
    border-width: 0 1px;
    border-color: #041345;
}

.sidebar-background {
    position: absolute;
    z-index: -1;
    height: 100%;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: 50%;
    color: #ecb731;
    opacity: 1;
    background-color: #00334e;
}
.navbar-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    height: 70px;
    padding: 0 1.5rem 0 calc(1.5rem / 2);
    background-color: #d7d7d8;
}

.page-title-box {
    padding: 10px 1.5rem;
    background-color: var(--vz-card-bg-custom);
    -webkit-box-shadow: 0 1px 2px rgba(56,65,74,.15);
    box-shadow: 0 1px 2px rgba(56,65,74,.15);
    border-bottom: 1px solid none;
    margin: -23px -1.5rem 1.5rem -1.5rem;
    background-color: #ecb731;
}
.table-container {
    max-height: 500px; /* Adjust the maximum height as needed */
    overflow-y: scroll;
    position: relative;
}

/* Make the table header sticky */
.table-container thead {
    position: sticky;
    top: 0;
    background-color: #f2f2f2;
    z-index: 1; /* Ensure the header appears above the table content */
}
.card-title {
    font-size: 12px;
    margin: 0 0 7px 0;
    color: #fff;
}


button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: 12px;
    line-height: inherit;
}
.card-header {
    padding: 10px;
    margin-bottom: 0;
    color: var(--vz-card-cap-color);
    background-color: var(--vz-card-cap-bg);
    border-bottom: var(--vz-card-border-width) solid var(--vz-card-border-color);
}

.table>:not(caption)>*>* {
    padding: 0rem;
    background-color: var(--vz-table-bg);
    border-bottom-width: 1px;
    -webkit-box-shadow: inset 0 0 0 9999px var(--vz-table-accent-bg);
    box-shadow: inset 0 0 0 9999px var(--vz-table-accent-bg);
    text-align: center;
}
.p-2 {
    padding: 0.1rem!important;
}
.page-content {
    padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    /* background-color: white; */
}

.card {
    --vz-card-spacer-y: 1rem;
    --vz-card-spacer-x: 1rem;
    --vz-card-title-spacer-y: 0.5rem;
    --vz-card-border-width: 0;
    --vz-card-border-color: rgba(0, 0, 0, 0.125);
    --vz-card-border-radius: 0.25rem;
    --vz-card-box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
    --vz-card-inner-border-radius: 0.25rem;
    --vz-card-cap-padding-y: 1rem;
    --vz-card-cap-padding-x: 1rem;
    --vz-card-cap-bg: #00334e;
    --vz-card-bg: #fff;
    --vz-card-img-overlay-padding: 1rem;
    --vz-card-group-margin: 0.75rem;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    height: var(--vz-card-height);
    word-wrap: break-word;
    background-color: var(--vz-card-bg);
    background-clip: border-box;
    border: var(--vz-card-border-width) solid var(--vz-card-border-color);
    border-radius: var(--vz-card-border-radius);
}

.form-select {
    display: block;
    width: 100%;
    padding: .5rem 2.7rem .5rem .9rem;
    -moz-padding-start: calc(.9rem - 3px);
    font-size: .0.75rem;
    font-weight: 400;
    line-height: 0.75;
    color: var(--vz-body-color);
    background-color: var(--vz-input-bg);
    background-position: right .9rem center;
    background-size: 16px 12px;
    border: 1px solid var(--vz-input-border);
    border-radius: 0rem;
    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-control {
    display: block;
    width: 100%;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1;
    background-color: #fffaaa;
    border: none;
    text-align: center;
    min-width: 100px;
}

.form-control:disabled {
    background-color: #ffffff00;
}

.table>thead {
    border-color: #041345;
}
.bx{

    margin: 0.5rem;
}

.control-container {
    padding: 0px !important;
}

.footer {
    bottom: 0;
    padding: 20px calc(1.5rem * .5);
    position: absolute;
    right: 0;
    color: #00334e;
    left: 250px;
    height: 60px;
    background-color: #d7d7d8;
}

#loadingIndicator {
    text-align: center;
}

#cohortTable {
    width: 100%;
    border-collapse: collapse;
}

#cohortTable th, 
#cohortTable td {
    padding: 12px 15px;
    text-align: left; /* Or 'right' as per your requirement */
    min-width: 50px; /* Adjust to your preference */
}

#cohortTable thead th {
    background-color: #003d5b;
    color: white;
    position: sticky;
    top: 0;
    z-index: 10; /* Increased the z-index to be above tbody z-index if any */
}

#cohortTable tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

#cohortTable tbody tr:hover {
    background-color: #f1f1f1;
}

/* Column specific styles */
#cohortTable .cohort-column {
    font-weight: bold;
    background-color: #005f73;
    color: #ffffff;
}

#cohortTable .new-mrr-column, 
#cohortTable .month-zero-column {
    background-color: #00afb9;
    color: #ffffff;
    font-weight: bold;
}

/* Conditional formatting classes */
#cohortTable .green {
    background-color: #c8e6c9; /* Light green */
}

#cohortTable .yellow {
    background-color: #fff9c4; /* Light yellow */
}

#cohortTable .red {
    background-color: #ffcdd2; /* Light red */
}

#cohortTable .grey {
    background-color: #a3a3a3; /* Light grey */
}

/* Fixed columns */
#cohortTable tbody td:first-child, 
#cohortTable thead th:first-child,
#cohortTable tbody td:nth-child(2), 
#cohortTable thead th:nth-child(2) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: nowrap;
}

#cohortTable tbody {
    max-height: 500px;
    overflow-y: auto;
}