.handout-content {
    background: #e3e3e3;
    width: 100vw;
    display: flex;
    min-height: calc(100vh - 83px);
    flex-direction: column;
}

    .handout-content .asset-container {
        width: 100%;
    }

        .handout-content .asset-container .asset-content {
            border: 1px solid #ccc;
            border-radius: .25em;
            background: #fff;
            width: calc(100% - 2em);
            max-width: 60em;
            margin: 1em auto 0 auto;
            padding: 1em;
        }

            .handout-content .asset-container .asset-content h1 {
                font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
                font-weight: normal;
                color: #005581;
                max-width: 60em;
                margin: 0 auto 1em auto;
                font-size: 1.5rem;
            }



@media all and (min-width: 64em) {
    .handout [role="main"] {
        padding-top: 156px;
    }

    .handout [role="banner"] h1 {
        top: 2.875rem;
        left: 16rem;
        right: auto;
        font-size: 2rem;
    }

    .handout-content {
        min-height: calc(100vh - 156px);
    }

        .handout-content nav {
            padding: 1em 0;
        }
}

[role="banner"] .student-links {
    position: absolute;
    top: .25em;
    right: 36em;
}

@media (min-width: 50em) {
    .courses table thead th:last-child, .catalog table thead th:last-child {
        width: 12em;
    }
}

/*@media (min-width: 50em) {
    .courses .my-courses table thead th:nth-child(3), .catalog .my-courses table thead th:nth-child(3), .courses .course-list table thead th:nth-child(3), .catalog .course-list table thead th:nth-child(3) {
        width: 20em;
        text-align: left;
    }
}*/

medium {
    font-family: 'Open Sans',sans-serif,Verdana,Geneva,Tahoma;
    color: #333;
    font-weight: normal;
    font-size: 1em;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

[role="main"] > medium {
    margin: .5rem 1rem 0 1rem;
    display: block;
}

    [role="main"] > medium h1 {
        font-size: 1.6em;
        margin: 0.67em 0;
        padding: 0em;
        color: #333;
    }

    [role="main"] > medium h2 {
        font-size: 1.3em;
        margin: 0.67em 0;
        color: #333;
    }

    [role="main"] > medium h3 {
        font-size: 1.2em;
        margin: 0.67em 0;
        color: #333;
    }

[role="main"] h2 {
    font-size: 1.5em;
}

    [role="main"] h2.info {
        font-size: 1.3em;
        margin: 0.67em 0.67em;
        color: #005581;
        font-weight: normal;
    }

[role="main"] h1.info {
    font-size: 1.5em;
}

.participant .chapter-nav ul {
    font-size: 1em;
}

.handout {
    font-size: 1em;
}

table {
    font-size: 1em;
}

.courses [role="main"] .course-list, .catalog [role="main"] .course-list {
    max-width: 120rem;
}

/*@media (min-width: 50em) {
    .courses .my-courses table thead th:nth-child(3), .catalog .my-courses table thead th:nth-child(3), .courses .course-list table thead th:nth-child(3), .catalog .course-list table thead th:nth-child(3) {
        width: 10em;
    }
}*/

.courses .my-courses table thead th:nth-child(3), .catalog .my-courses table thead th:nth-child(3), .courses .course-list table thead th:nth-child(3), .catalog .course-list table thead th:nth-child(3) {
    width: 30em;
}

.ui-tabs {
    max-width: 85em;
}

[role="banner"] .student-links {
    right: 10em;
}

#questionContainer > .aa-container .focus {
    min-height: 0rem;
}


.performance input[type="checkbox"],
.performance input[type="radio"] {
    position: absolute;
    left: -9999px;
}

    .performance input[type="checkbox"] + label,
    .performance input[type="radio"] + label {
        width: auto;
        margin-left: .5rem;
    }

        .performance input[type="checkbox"] + label::after,
        .performance input[type="radio"] + label::after {
            content: "\f0c8";
            font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
            font-size: 2em;
            font-weight: 100;
            color: #888;
        }

    .performance input[type="checkbox"]:checked + label::after,
    .performance input[type="radio"]:checked + label::after {
        content: "\f14a";
        color: #50ac01;
        font-weight: 900;
    }

.assets-container {
    display: flex; /* or inline-flex */
    flex-direction: row;
    /*justify-content: space-around;*/
    gap: 10px;
}

.activeasset {
    border: 4px solid #50ac01;
    border-radius: .25em;
}

.assets-container {
    padding: 1.5rem;
    width: 100%;
    border-radius: 0.25em;
    border: 1px solid #cbcbcb;
}