/* Custom Style */
.hidden {
    display: none;
}

/* Adjust image height to match the table rows */
.image-container img {
    height: auto;
    /* Adjust the height as needed */
    max-width: 100%;
    /* Ensure the image doesn't exceed its container */
}

.table-responsive {
    overflow-x: auto;
    max-height: 800px; 
    overflow-y: auto;
}

.outer-border-blue {
    border: 2px solid #212a3e;
    padding: 10px;
}

.border-blue {
    border-color: #212a3e;
}

.outer-border {
    border: 2px solid #212a3e;
    /* Blue border outside */
    padding: 10px;
    /* Add padding for spacing */
}

.cs-bg-primary {
    background-color: #212a3e;
    /* background-color: #212a3e; */
}

.cs-bg-secondary {
    /* background-color: #f1f6f9; */
    background-color: #eef5ff;
}

.cs-bg-tertiary {
    /* background-color: #9ba4b5; */
    background-color: #81b1ce;
}

.cs-bg-quaternary {
    background-color: #394867;
}

.cs-bg-pink {
    background-color: #ff0080;
}

.cs-table-border th {
    border: 2px solid #212a3e !important;
}

.cs-border-tertiary {
    border: 2px solid #212a3e;
}

.cs-border-end {
    border-right: 2px solid orange;
}

.cs-text-primary {
    color: #212a3e;
}

.cs-text-shadow-primary {
    color: #212a3e;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.cs-text-shadow {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
}

.step {
    display: none;
}

.step.active {
    display: block;
}

/* custom.css */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #9ba4b5; /* Change this to your desired color */
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #f1f6f9; /* Optional: Change this to your desired color */
}

.section-header {
    background-color: #e9ecef;
    font-weight: bold;
    /* Tes */
    position: sticky;
    top: 0;
    /* background-color: #f1f1f1; */
    z-index: 1;
    /* border-bottom: 2px solid #dee2e6; */
    /* font-weight: bold; */
}
.question-row {
    background-color: #ffffff;
}
.cs-box {
    transition: all 0.3s ease-in-out;
}
.cs-box:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.logo-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background-color: white;
    border-radius: 50%;
}

.button-group {
    display: flex;
    gap: 0.5rem;
}

.button-group .btn {
    flex: 1;
    /* Ensure buttons fill the container equally */
}

.sticky-header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    /* background-color: #f8f9fa; */
    z-index: 100;
    border-bottom: 2px solid #212A3E;
}

@media (max-width: 576px) {
    /* Adjust breakpoint as needed */
    .button-group {
        flex-direction: column;
    }
    .button-group .btn {
        width: 100%;
    }
}