/* Menu */
.aboutus-menu {
    background-color: var(--c-secondary);
    width: 300px;
}

.aboutus-menu a {
    border-bottom: var(--border);
    border-radius: 0;
    padding: var(--spacing-4);
    height: auto;
    white-space: break-spaces;
}

.aboutus-menu a.selected {
    background-color: rgba(255, 255, 255, 0.2);
}

.aboutus-content {
    background-color: var(--c-elevation-1);
    padding: var(--spacing-6);
    width: calc(100% - 300px);
}

/* Accordions */
.accordion-header {
    width: 100%;
    padding: var(--spacing-2);
    cursor: pointer;
    text-transform: uppercase;
    background-color: var(--c-secondary);
    font-weight: bold;
    transition: ease-in-out 150ms;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.accordion-header:hover {
    background-color: color-mix(in srgb, var(--c-secondary) 90%, white);
    transition: ease-in-out 150ms;
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height ease-in-out 300ms;
    background-color: var(--c-elevation-2);
}

.accordion-body.expanded {
    max-height: 800px;
    overflow: auto;
    transition: max-height ease-in-out 300ms;
}

/* History */
.history-line {
    height: 100%;
    width: 50%;
    border-right: solid 3px var(--c-primary);
    margin: var(--spacing-2) 0;
}

.history-label {
    margin-top: 5px;
}

.history-content {
    background-color: var(--c-elevation-2);
    position: relative;
}

.history-content::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--c-elevation-2);
    transform: rotateY(0deg) rotate(45deg);
    position: absolute;
    left: -10px;
    top: 10px;
}

/* Misc */
iframe { /* This will be part of the framework in a future release */
    border: none;
}

th {
    text-align: left;
    padding: var(--spacing-2);
    background-color: var(--c-secondary);
}