.dashboard-event-content .event-card {
    justify-content: start;
}

.event-header-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.event-type-status-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.event-status {
    border-radius: 5px;
    padding-left: 6px;
    padding-right: 6px;
}

.event-status.approved {
    background-color: #B6E6A1;
}

.event-status.cancelled {
    background-color: #D6D6D6;
}

.event-status.declined {
    background-color: #F6B8B8;
}

.event-status.incomplete {
    background-color: #EAEAEA;
}

.event-status.not_approved {
    background-color: #FFD8A8;
}

.event-status.pending_payment {
    background-color: #FFF3B0;
}

.event-status.wait_list {
    background-color: #BFD7ED;
}

.event-info {
    position: relative;
    display: inline-block;
}

.event-info-items {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 100%;
    right: 0;

    width: 43px;

    z-index: 100;
    opacity: 0;
    transition: opacity 0.5s;
}

.event-info-items.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 11px;

    border: 1px solid #00000040;
    border-radius: 5px;
    background-color: #fff;

    opacity: 1;
}

.event-info-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    /* Indicates clickability */
}

.event-info-toggle {
    cursor: pointer;
    /* Indicates clickability */
}

.event-agreement-status-container,
.event-status {
    font-family: var(--font-primary);
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 0.3px;
}

.event-agreement-status-container h2 {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: var(--bold-font-weight);
    margin: 0;
}

.event-agreement-status-container p {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    font-weight: var(--regular-font-weight);
    margin: 0;

}

.event-course-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}

.event-description-links {
    font-family: var(--font-primary);
    font-weight: var(--regular-font-weight);
    font-size: 13px;
    line-height: 22px;
    letter-spacing: 0.3px;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
    color: #000;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

.event-description-links button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #000;
}


.step-progress {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.step-progress li {
    position: relative;
    flex: 1;
    text-align: center;
    padding-bottom: 5px;
}

.step-progress li::before {
    counter-increment: step;
    content: counter(step);
    display: block;
    margin: 0 auto 10px;
    background: #adb5bd;
    color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
}

.step-progress li.completed::before {
    background: #28a745;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" viewBox="0 0 20 30" fill="none"><g transform="translate(0,5)"><mask id="path-1-inside-1_12_5" fill="white"><path d="M10 0C4.48565 0 0 4.48565 0 10C0 15.5143 4.48565 20 10 20C15.5143 20 20 15.5143 20 10C20 8.01739 19.4175 6.16927 18.4188 4.61362L17.8235 5.31675C18.6475 6.68805 19.1304 8.28696 19.1304 10C19.1304 15.0343 15.0343 19.1304 10 19.1304C4.96565 19.1304 0.869565 15.0343 0.869565 10C0.869565 4.96565 4.96565 0.869565 10 0.869565C12.3665 0.869565 14.5191 1.78251 16.143 3.26512L16.712 2.59341C14.9359 0.982541 12.5804 0 10 0ZM17.9288 2.5017L9.52785 12.4151L5.99185 9.11685L5.39912 9.75289L9.60173 13.6727L18.5929 3.06386L17.9288 2.5017Z"/></mask><path d="M10 0C4.48565 0 0 4.48565 0 10C0 15.5143 4.48565 20 10 20C15.5143 20 20 15.5143 20 10C20 8.01739 19.4175 6.16927 18.4188 4.61362L17.8235 5.31675C18.6475 6.68805 19.1304 8.28696 19.1304 10C19.1304 15.0343 15.0343 19.1304 10 19.1304C4.96565 19.1304 0.869565 15.0343 0.869565 10C0.869565 4.96565 4.96565 0.869565 10 0.869565C12.3665 0.869565 14.5191 1.78251 16.143 3.26512L16.712 2.59341C14.9359 0.982541 12.5804 0 10 0ZM17.9288 2.5017L9.52785 12.4151L5.99185 9.11685L5.39912 9.75289L9.60173 13.6727L18.5929 3.06386L17.9288 2.5017Z" fill="white"/></g></svg>');
    display: block;
    margin: 0 auto 10px;
    width: 30px;
    height: 30px;
    color: white;
}

.step-progress li.active::before {
    background: #0d6efd;
}

.step-progress li+li::after {
    content: '';
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 4px;
    background: #adb5bd;
    z-index: -1;
}

.step-progress li.completed+li::after {
    background: #28a745;
}


/* Popup Container Styles */
.msa-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.msa-popup.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

/* Popup Content Styles */
.msa-popup-content {
    background-color: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 60vh;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 30px;
    position: relative;
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.msa-popup.active .msa-popup-content {
    transform: translateY(0);
}

.display-course-description{
   overflow-y: auto;
   height: 50vh; 
}

/* Close Button */
.msa-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.msa-popup-close:hover {
    color: #d33;
}

/* Content Styles */
.msa-popup-content h3 {
    margin-top: 0;
    color: #000;
    padding-bottom: 10px;
    border-bottom: 1px solid #FFE921;
}

.display-event-schedule,
.display-course-description {
    margin-top: 20px;
}

/* Table Container */
.event-schedule-container {
    margin: 1em 0;
    overflow-x: auto;
}

/* Table Structure */
.event-schedule-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
}

/* Header Alignment */
.event-schedule-table thead tr {
    text-align: left;
}

.event-schedule-table th,
.event-schedule-table td {
    padding: 0.75em 1em;
    vertical-align: middle;
}

/* Column Specific Alignment */
.event-schedule-table td:nth-child(1) {
    /* Date column */
    white-space: nowrap;
    width: 1%;
}

.event-schedule-table td:nth-child(2) {
    /* Time column */
    white-space: nowrap;
    width: 1%;
}

.event-schedule-table td:nth-child(3) {
    /* Location column */
    width: auto;
}

/* Row Striping */
.event-schedule-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .event-schedule-table td {
        padding: 0.5em 0.75em;
    }

    .event-schedule-table td:nth-child(1),
    .event-schedule-table td:nth-child(2) {
        white-space: normal;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .msa-popup-content {
        width: 95%;
        padding: 20px;
    }

}