/* ==========================================================================
   Color Palette
   ========================================================================== 

    BG_Blue:        #005581  //sidenav
    BG_Blue:Hover:  #004060    
    Blue_Icon:      #7BA5BB  //sidenav icon

     Blue_Icon:      #7CA6BC  //sidenav icon
    
    BG-Light:       #FBFBFB  //footer, Header nav
    BG_Grey:        #f1f1f1  //main content bg
    tbl-Text:       #005581  //table txt

    TXT_Grey:       #333333  //default text color
    

    Off-White:      #fafafa  //button text, used instead of pure white
    Gold-Yellow:    #F8981D  //button
    Gold-Yellow:Hover: #FCD8AA
    Olive:          #999966  //olive button              
    Olive:Hover:    #e5d3a7

    //icons
    DefaultIcon:    #cccccc
    DefaultICon:Hover #ededed;
    Green:          #009900
    Green:Hover:    #00ff00
    Red:            #990000
    Red:            #cd5a5a
    Red:Hover:      #ff8989;

    Red:Hover:      #ff2121
    Blue:           #005581 //edit icon
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

html {
    -webkit-box-sizing: border-box;
    /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
    -moz-box-sizing: border-box;
    /* Firefox 1 - 28 */
    box-sizing: border-box;
    /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */
}

*,
*:before,
*:after {
    box-sizing: inherit;
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}
/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
    display: flex;
    margin-top: 1.5em;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    /* 1 */
    overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    /* 1 */
    text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
    /**
 * Remove the inner border and padding in Firefox.
 */
    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }
    /**
 * Restore the focus styles unset by the previous rule.
 */
    button:-moz-focusring,
    [type="button"]:-moz-focusring,
    [type="reset"]:-moz-focusring,
    [type="submit"]:-moz-focusring {
        outline: 1px dotted ButtonText;
    }



/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}
    /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}
/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

body {
    font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
}

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

p {
    line-height: 1.4em;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="tel"] {
    border: 1px solid #ccc;
    padding: .5em;
    border-radius: .125em;
    font-size: .875em;
}

input[type="file"] {
    font-size: .875em;
    padding-left: .5em;
}

.checkbox,
.ui-radio {
    align-items: center;
    display: flex;
    font-size: .875em;
    margin-bottom: .25em;
}

    .checkbox input,
    .ui-radio input {
        margin-right: .25em;
    }

.custom-select {
    border-radius: .175em;
    margin-top: 0;
}

    .custom-select::after {
        right: .75em;
    }

    .custom-select select {
        padding: .4em 2em .35em .5em;
        font-size: .875em;
    }

hr {
    border-color: rgba(203, 203, 203, 0.5);
    border-bottom: none;
    margin: 2rem 0;
}

textarea {
    width: 100%;
    min-height: 5em;
    border-radius: .25em;
    border: 1px solid #cbcbcb;
}

button,
.button,
input[type="submit"] {
    background: #0099cc;
    border: none;
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
    font-size: .875em;
    border-radius: .25em;
    transition: .1s;
}

    button:hover,
    .button:hover,
    input[type="submit"]:hover {
        background: #005581;
    }

    button.cancel,
    .button.cancel,
    input[type="submit"].cancel {
        background: #8c9b93;
    }

        button.cancel:hover,
        .button.cancel:hover,
        input[type="submit"].cancel:hover {
            background: #5a6760;
        }

    button.linkbutton {
        background: none;
        border: none;
        color: #0099cc;
        cursor: pointer;
        font-size: 1em;
        padding: unset;
    }

        button.linkbutton:hover {
            color: #005581;
            text-decoration: underline;
        }

.abutton {
    display: inline-block;
    background: #0099cc;
    border: none;
    color: #ffffff !important;
    text-decoration: none;
    text-align: center;
    padding: .5em 1em;
    font-size: .875em;
    border-radius: .25em;
    transition: .1s;
}

    .abutton:hover {
        background: #5a6760;
    }

    .btn-dark {
        background: #acacac;
        border: 1px solid #989898;
        box-shadow: 2px 2px 0 rgba(204, 204, 204, 0.54);
        color: #fff;
        font-size: .875em;
        border-radius: 3px;
        margin-top: 1.5em;
    }

    .btn-dark:hover {
        background: #acacac;
        color: #005581;
        border: 1px solid #013a57;
    }

.field-wrapper {
    margin-bottom: 1rem;
}

    .field-wrapper label {
        color: #000;
        display: block;
        font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
        font-size: .875em;
        font-weight: 600;
        line-height: 130%;
        margin-bottom: .375em;
        padding: 0;
    }

    .field-wrapper input[type="text"] {
        width: 100%;
    }

.field-group label {
    color: #000;
    display: block;
    font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
    font-size: .875em;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: .375em;
    padding: 0;
}

.field-group.horiz {
    display: flex;
    flex-wrap: wrap;
}

    .field-group.horiz > label {
        width: 100%;
    }

    .field-group.horiz .field-wrapper {
        display: flex;
        align-items: center;
        margin-right: 1em;
    }

        .field-group.horiz .field-wrapper input {
            margin-right: .25em;
        }

.form {
    padding: 1em;
    border: 1px solid #8c9b93;
    background: #f1f1f1;
}

    .form:before,
    .form:after {
        content: "";
        display: table;
    }

    .form:after {
        clear: both;
    }

    .form .cancel {
        float: right;
    }

    .form .field-group {
        margin-bottom: 1em;
    }

        .form .field-group:last-of-type {
            margin-bottom: 2em;
        }

.resource {
    display: flex;
    border: 1px solid #e3e3e3;
    border-radius: .25em;
    background: #e9e9e9;
}

    .resource.ui-sortable-helper {
        border: 1px solid #444;
    }

    .resource .move,
    .resource .delete {
        padding: 0 1em;
        display: flex;
        align-items: center;
    }

        .resource .move:hover {
            cursor: move;
        }

    .resource .delete {
        color: #ad2317;
    }

        .resource .delete:hover {
            cursor: pointer;
            color: #e65144;
        }

    .resource .field-group {
        border-left: 1px solid #e3e3e3;
        border-right: 1px solid #e3e3e3;
        display: flex;
        flex-direction: column;
        flex-grow: 2;
        padding: 1em;
    }

        .resource .field-group .field-wrapper {
            margin: 0 0 1em 0;
            flex-direction: column;
            align-items: flex-start;
        }

            .resource .field-group .field-wrapper input[type="url"] {
                width: 100%;
            }

@media all and (min-width: 64em) {
    .resource .field-group {
        flex-direction: row;
        flex-wrap: wrap;
    }

        .resource .field-group .field-wrapper {
            margin-right: 1em;
        }
}
/* Label styles: style as needed */
label.select-wrapper {
    display: block;
    margin-top: 0;
    color: #777;
}
/* Container used for styling the custom select, the buttom class adds the bg gradient, corners, etc. */
.custom-select {
    position: relative;
    display: block;
    margin-top: 0.5em;
    padding: 0;
}
    /* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
    .custom-select select {
        width: 100%;
        margin: 0;
        background: none;
        border: 1px solid transparent;
        outline: none;
        /* Prefixed box-sizing rules necessary for older browsers */
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        /* Remove select styling */
        appearance: none;
        -webkit-appearance: none;
        /* Magic font size number to prevent iOS text zoom */
        font-size: 16px;
        /* General select styles: change as needed */
        color: #444;
        padding: .6em 1.9em .5em .8em;
        line-height: 1.3;
    }

        .custom-select select:hover {
            cursor: pointer;
        }
    /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */
    .custom-select::after {
        content: "";
        position: absolute;
        width: 9px;
        height: 8px;
        top: 50%;
        right: 1em;
        margin-top: -4px;
        background-image: url(../images/select-arrow.png);
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: 2;
        /* These hacks make the select behind the arrow clickable in some browsers */
        pointer-events: none;
    }
/* IE 10/11+ - This hides native dropdown button arrow so it will have the custom appearance, IE 9 and earlier get a native select - targeting hack via http://browserhacks.com/#hack-f1070533535a12744a0381a75087a915 */
_:-ms-input-placeholder,
:root .custom-select select::-ms-expand {
    display: none;
}
/* Removes the odd blue bg color behind the text in the select button in IE 10/11 and sets the text color to match the focus style's - fix via http://stackoverflow.com/questions/17553300/change-ie-background-color-on-unopened-focused-select-box */
_:-ms-input-placeholder,
:root .custom-select select:focus::-ms-value {
    background: transparent;
    color: #222;
}
/* Firefox >= 2 -- Older versions of FF (v2 - 6) won't let us hide the native select arrow, so we'll just hide the custom icon and go with native styling. Targeting hack via http://browserhacks.com/#hack-756739b33c37fb7db4cce645bbf7ea5f */
/* Show only the native arrow */
body:last-child .custom-select::after,
x:-moz-any-link {
    display: none;
}
/* reduce padding */
body:last-child .custom-select select,
x:-moz-any-link {
    padding-right: .8em;
}
/* Firefox 6+ -- Hide the native select and arrow. We've found the simplest way to hide the native styling in FF is to make the select bigger than its container and clip it. */
/* The specific FF selector used below successfully overrides the previous rule that turns off the custom icon; other FF hacky selectors we tried, like `*>.custom-select::after`, did not undo the previous rule. Targeting hack via http://browserhacks.com/#hack-443a4eb168ccf066e7c2909be4911af1 */
/* Show the custom arrow again */
_::-moz-progress-bar,
body:last-child .custom-select:after {
    display: block;
}
/* Hacks to hide the native select appearance */
_::-moz-progress-bar,
body:last-child .custom-select select {
    -moz-appearance: window;
    text-indent: 0.01px;
    text-overflow: "";
    /* increase padding to make room for menu icon */
    padding-right: 13%;
}
/* In FF 30+ -- Set overflow:hidden on the wrapper to clip the native select's arrow. Need to get extra wide (120%) because newest Firefox/Android is terrible. The downside is this makes the menu 20% wider than it should be when it opens. Hack targeting via http://browserhacks.com/#hack-cfd4c21603b122acfda8e81f41cdb320 */
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
    /* Clip select with the container */
    _::-moz-progress-bar,
    body:last-child .custom-select {
        overflow: hidden;
    }
    /* Make select extra wide */
}
/* Firefox 7+ focus style - This works around the issue that -moz-appearance: window kills the normal select focus. Using semi-opaque because outline doesn't handle rounded corners */
_::-moz-progress-bar,
body:last-child .custom-select select:focus {
    outline: 2px solid rgba(180, 222, 250, 0.7);
}
/* Opera - Pre-Blink nix the custom arrow, go with a native select button */
x:-o-prefocus,
.custom-select::after {
    display: none;
}
/* Hover style */
.custom-select:hover {
    border: 1px solid #888;
}
/* Focus style */
.custom-select select:focus {
    outline: none;
    box-shadow: 0 0 1px 3px #b4defa;
    background-color: transparent;
    color: #222;
    border: 1px solid #aaa;
}
/* Firefox focus has odd artifacts around the text, this kills that */
.custom-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

.custom-select option {
    font-weight: normal;
}
/* These are just demo button-y styles, style as you like */
.select-button {
    border: 1px solid #bbb;
    border-radius: .3em;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
    background: #f3f3f3;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
    /* W3C */
}

.clear:before,
.clear:after {
    content: "";
    display: table;
}

.clear:after {
    clear: both;
}

.triangle::after {
    border-bottom: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: "";
    transform: rotate(-90deg);
    position: absolute;
    right: -5px;
    top: calc(50% - .375em);
}

.shorten-name {
    display: inline-block;
    text-transform: uppercase;
    font-style: italic;
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
    margin-left: -2.75em;
    margin-top: 2em;
    font-size: 1.5rem;
    color: #fff;
    opacity: .5;
}

.button {
    background: #0099cc;
    border: none;
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
    font-size: .875em;
    border-radius: .25em;
    transition: .1s;
}

    .button:hover {
        background: #005581;
    }

    .button.cancel {
        background: #8c9b93;
    }

        .button.cancel:hover {
            background: #5a6760;
        }

.label {
    color: #000;
    display: block;
    font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
    font-size: .875em;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: .375em;
    padding: 0;
}

.participant {
    min-height: 100vh;
    background: #e4e4e4;
}

    .participant a {
        color: #0099cc;
        transition: .1s;
    }

        .participant a:hover {
            color: #005581;
        }

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

[role="banner"] {
    background: #fff;
    padding: 1em;
    position: relative;
}

    [role="banner"] .logoContainer img {
        display: block;
        width: 100%;
        max-width: 12em;
    }

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

        [role="banner"] .student-links a {
            background: #003f72;
            color: #fff;
            cursor: pointer;
            font-size: .875em;
            padding: .5em 1em;
            transition: .1s;
        }

            [role="banner"] .student-links a i[class*='fa'] {
                margin-right: .25em;
            }

            [role="banner"] .student-links a:hover {
                background: #005581;
            }

    [role="banner"] .user {
        position: absolute;
        top: 0;
        right: 0;
        padding: .5em;
        background: rgba(255, 255, 255, 0.875);
        font-size: .875em;
    }

        [role="banner"] .user .alerts {
            cursor: pointer;
            margin-right: 1em;
        }

            [role="banner"] .user .alerts .fas {
                color: #f8981c;
            }

            [role="banner"] .user .alerts:hover .fas {
                color: #da7e07;
            }

        [role="banner"] .user .username {
            color: #f8981c;
            margin-right: 1em;
        }

        [role="banner"] .user a.username {
            cursor: pointer;
        }

            [role="banner"] .user a.username:hover {
                color: #da7e07;
            }

        [role="banner"] .user .signout {
            color: #8c9b93;
            cursor: pointer;
        }

            [role="banner"] .user .signout:hover {
                color: #005581;
            }

    [role="banner"] + .controls {
        background: #e4e4e4;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }

        [role="banner"] + .controls .search {
            padding: .5em;
        }

        [role="banner"] + .controls .lesson-actions {
            background: #003f72;
            padding: 0 .5em;
            display: flex;
            align-items: center;
        }

            [role="banner"] + .controls .lesson-actions a {
                color: #fff;
                padding: .5em;
                transition: .1s;
                text-decoration: none;
            }

                [role="banner"] + .controls .lesson-actions a:hover {
                    color: #0099cc;
                }

                [role="banner"] + .controls .lesson-actions a.active {
                    background: #879ba8;
                }

                [role="banner"] + .controls .lesson-actions a span {
                    font-size: .875em;
                    display: none;
                }

[role="main"] {
    float: right;
    margin: 1em 1em 0 2em;
    padding: 0 0 1em 0;
    transition: .2s;
    width: calc(100% - 3em);
    background: #fff;
}

    [role="main"] > section {
        margin: 0 1em;
    }

    [role="main"] section.content {
        margin-top: 2em;
    }

    [role="main"] .support-docs {
        margin-top: 3em;
    }

    [role="main"].slim {
        width: calc(100% - 19em);
        margin-right: 1em;
    }

    [role="main"] h1 {
        color: #005581;
        font-size: 1.5em;
        padding: 1rem;
    }

        [role="main"] h1.info {
            background: #cbcbcb;
            color: #fff;
            font-size: 1.5em;
            font-weight: normal;
            margin: 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

            [role="main"] h1.info.course {
                background: #f8981c;
            }

            [role="main"] h1.info.chapter {
                background: #879ba8;
            }

            [role="main"] h1.info.lesson {
                background: #005581;
            }

            [role="main"] h1.info.activity {
                background: #50ac01;
            }

    [role="main"] h2 {
        color: #005581;
        font-size: 1.5em;
        margin: 1em 1em 0 1em;
    }

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

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

table {
    display: block;
    font-size: 1em;
}

    table thead {
        display: none;
    }

    table tbody,
    table tr,
    table td,
    table caption {
        display: block;
    }

    table tr {
        background: #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        margin-bottom: .5em;
    }

    table caption {
        color: #005581;
        font-size: 1.25em;
        font-weight: bold;
        margin-bottom: .5em;
        text-align: left;
    }

    table td {
        padding: .125em .25em .125em 4.25em;
    }

        table td::before {
            color: #005581;
            display: inline-block;
            content: attr(data-title);
            width: 4em;
            margin-left: -4em;
        }

@media all and (min-width: 37.5em) {
    [role="banner"] {
        background-image: url('../images/header-bg.jpg');
        background-position: 100% 0;
        background-repeat: no-repeat;
        background-size: auto 100%;
    }
}

@media all and (min-width: 50em) {
    [role="banner"] + .controls .search input {
        width: 16em;
    }

    [role="banner"] + .controls .lesson-actions a span {
        display: inline;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
        display: table;
        width: 100%;
    }

        table caption {
            display: table-caption;
        }

        table thead {
            display: table-header-group;
        }

        table tbody {
            display: table-row-group;
        }

        table tr {
            display: table-row;
        }

        table td {
            display: table-cell;
        }

        table thead th {
            color: #005581;
            font-weight: 600;
            padding: .25em;
            text-align: left;
        }

        table tr {
            box-shadow: none;
            margin: 0;
        }

        table td {
            padding: .25em;
        }

            table td::before {
                display: none;
            }
}

.participant .chapter-nav {
    position: relative;
    width: 16em;
    transition: .2s;
    float: left;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.25);
}

    .participant .chapter-nav.hidden {
        margin-left: -16em;
    }

    .participant .chapter-nav .toggleNav {
        background: #adacac;
        color: #fff;
        border-bottom-right-radius: 4px;
        border-left: 2px solid #fff;
        border-top-right-radius: 4px;
        cursor: pointer;
        padding: .75em .25em;
        position: absolute;
        right: -1.5em;
        text-align: center;
        top: 1em;
        transition: .2s;
        width: 1.5em;
    }

        .participant .chapter-nav .toggleNav:hover {
            background: #919191;
        }

    .participant .chapter-nav ul {
        background: #cbcbcb;
        color: #fff;
        font-size: 1em;
        list-style: none;
        padding: 0;
        margin: 0;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
    }

        .participant .chapter-nav ul .actions {
            background: #f8981c;
            border-bottom: 2px solid #fff;
            display: flex;
            justify-content: flex-end;
        }

            .participant .chapter-nav ul .actions a {
                color: #fff;
                text-shadow: none;
                padding: 10px;
                text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
            }

                .participant .chapter-nav ul .actions a:hover {
                    background: #da7e07;
                }

                .participant .chapter-nav ul .actions a.active {
                    background: #da7e07;
                }

        .participant .chapter-nav ul a {
            color: #fff;
            text-decoration: none;
            padding: .75em 30px .75em .5em;
            display: block;
            position: relative;
            transition: .1s;
        }

            .participant .chapter-nav ul a:hover {
                box-shadow: inset 2px -4px 3px 0 rgba(0, 0, 0, 0.08);
            }

            .participant .chapter-nav ul a.parent::after {
                content: "\f054";
                font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
                float: right;
                margin-right: .375rem;
                transition: .2s;
                transform-origin: 50% 50%;
                position: absolute;
                right: .375rem;
            }

            .participant .chapter-nav ul a.parent.open::after {
                transform: rotate(90deg);
            }

    .participant .chapter-nav .course > a {
        background: #f8981c;
        color: #fff;
    }

    .participant .chapter-nav .chapter > a {
        color: #fff;
        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
        background: #adacac;
    }

        .participant .chapter-nav .chapter > a.open {
            background: #919191;
            box-shadow: inset 2px 2px 0 #2b2b2b, inset -2px -2px 0 #2b2b2b;
        }

        .participant .chapter-nav .chapter > a:hover {
            background: #919191;
        }

    .participant .chapter-nav .lessons {
        display: none;
    }

        .participant .chapter-nav .lessons .lesson > a {
            background: #005581;
            padding-left: 20px;
        }

            .participant .chapter-nav .lessons .lesson > a.open {
                background: #013a57;
                box-shadow: inset 2px 2px 0 #0099cc, inset -2px -2px 0 #0099cc;
            }

            .participant .chapter-nav .lessons .lesson > a:hover {
                background: #013a57;
            }

    .participant .chapter-nav .activities {
        display: none;
    }

        .participant .chapter-nav .activities .activity > a {
            background: #50ac01;
            padding-left: 40px;
            color: #fff;
            text-shadow: none;
        }

            .participant .chapter-nav .activities .activity > a.active {
                background: #469701;
                overflow: hidden;
                position: relative;
            }

                .participant .chapter-nav .activities .activity > a.active::after {
                    content: "\f054";
                    font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
                    position: absolute;
                    right: .95em;
                    top: calc(50% - .5em);
                }

            .participant .chapter-nav .activities .activity > a.bkmk::before {
                content: "\f02e";
                font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
                color: #fff;
                margin-left: -1.5em;
                font-weight: bold;
                margin-right: .75em;
            }

            .participant .chapter-nav .activities .activity > a:hover {
                background: #469701;
            }

.login {
    background: url('../images/liuna-campus.jpg') 50% 50% no-repeat;
    background-size: cover;
    height: 100vh;
}

    .login [role="main"] {
        background: none;
    }

    .login .azure-login {
        background: #fff;
        margin: 0 auto;
        max-width: 30em;
        padding: 1em;
        width: calc(100% - 2em);
    }

        .login .azure-login h1 {
            font-size: 1em;
            color: #005581;
            margin-top: 1em;
            padding-left: 0;
        }

        .login .azure-login .header {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 1em;
        }

            .login .azure-login .header img {
                max-height: 5em;
            }

        .login .azure-login .buttons {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

            .login .azure-login .buttons button {
                margin-bottom: .5em;
                margin-top: 1em;
            }

@media all and (min-width: 35em) {
    .login .azure-login .buttons {
        flex-direction: row;
    }
}

.login .azure-login .field-group {
    position: relative;
    display: flex;
    margin-bottom: .75em;
}

    .login .azure-login .field-group.remember label {
        position: static;
        text-transform: none;
        font-size: 13px;
        letter-spacing: 0;
    }

        .login .azure-login .field-group.remember label input[type="checkbox"] {
            padding: 0;
            width: auto;
        }

    .login .azure-login .field-group input {
        background: transparent;
        padding-top: 1em;
        width: 100%;
        transition: .5s;
        z-index: 1;
    }

    .login .azure-login .field-group label {
        position: absolute;
        color: #0099cc;
        font-size: .625em;
        text-transform: uppercase;
        top: .25em;
        left: .75em;
        transition: .5s;
        letter-spacing: .025em;
    }

.login .azure-login select {
    width: 100%;
    font-size: .875em;
}

.login .azure-login .horiz {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
    margin-top: 1em;
}

    .login .azure-login .horiz div {
        width: calc(50% - .5em);
    }

        .login .azure-login .horiz div label {
            color: #0099cc;
            font-size: .625em;
            margin-bottom: .5em;
            text-transform: uppercase;
            letter-spacing: .025em;
        }

        .login .azure-login .horiz div input {
            width: 100%;
        }

            .login .azure-login .horiz div input[type="text"] {
                padding: .675em .5em;
            }

.login .azure-login .birth-ssn {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

    .login .azure-login .birth-ssn .custom-select {
        margin-top: 1.125em;
    }

.courses,
.catalog {
    background: #e4e4e4;
}

    .courses [role="main"],
    .catalog [role="main"] {
        background: none;
        margin: 0;
        width: 100%;
    }

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

            .courses [role="main"] .course-list .grades-shown,
            .catalog [role="main"] .course-list .grades-shown {
                border-bottom: none;
            }

        .courses [role="main"] > h1,
        .catalog [role="main"] > h1 {
            margin: 0 auto;
            max-width: 56.25rem;
            padding: 1em .5rem;
            font-weight: 400;
        }

        .courses [role="main"] table,
        .catalog [role="main"] table {
            margin-top: 2em;
        }

            .courses [role="main"] table caption,
            .catalog [role="main"] table caption {
                padding: 0 .5em;
            }

            .courses [role="main"] table tbody tr,
            .catalog [role="main"] table tbody tr {
                margin: 1em auto;
                width: calc(100% - 1em);
                padding: .5em .25em;
            }

                .courses [role="main"] table tbody tr.parent .expand,
                .catalog [role="main"] table tbody tr.parent .expand {
                    cursor: pointer;
                }

                    .courses [role="main"] table tbody tr.parent .expand i[class^='fa'],
                    .catalog [role="main"] table tbody tr.parent .expand i[class^='fa'] {
                        transition: .1s;
                    }

                .courses [role="main"] table tbody tr.parent.open,
                .catalog [role="main"] table tbody tr.parent.open {
                    background: #eee;
                    border: none;
                }

                    .courses [role="main"] table tbody tr.parent.open td:not(expand),
                    .catalog [role="main"] table tbody tr.parent.open td:not(expand) {
                        font-weight: 900;
                    }

                    .courses [role="main"] table tbody tr.parent.open .expand i[class^='fa'],
                    .catalog [role="main"] table tbody tr.parent.open .expand i[class^='fa'] {
                        transform: rotate(90deg);
                    }

                .courses [role="main"] table tbody tr.child,
                .catalog [role="main"] table tbody tr.child {
                    border: none;
                    display: none;
                    background: #eee;
                }

                .courses [role="main"] table tbody tr td .fal.fa-circle,
                .catalog [role="main"] table tbody tr td .fal.fa-circle,
                .courses [role="main"] table tbody tr td .fa-dot-circle,
                .catalog [role="main"] table tbody tr td .fa-dot-circle {
                    color: #f8981c;
                }

                .courses [role="main"] table tbody tr td .fas.fa-circle,
                .catalog [role="main"] table tbody tr td .fas.fa-circle {
                    color: #50ac01;
                }

                .courses [role="main"] table tbody tr td::before,
                .catalog [role="main"] table tbody tr td::before {
                    width: 6em;
                }

            .courses [role="main"] table tbody.grades-shown,
            .catalog [role="main"] table tbody.grades-shown {
                border-bottom: none;
            }

            .courses [role="main"] table tbody [data-title="Grade"],
            .catalog [role="main"] table tbody [data-title="Grade"],
            .courses [role="main"] table tbody [data-title="Pass/Fail"],
            .catalog [role="main"] table tbody [data-title="Pass/Fail"] {
               /* color: #003f72;
                text-decoration: underline;
                cursor: pointer;*/ /*Mr420 for AssessmentDetails*/
            }

                .courses [role="main"] table tbody [data-title="Grade"]:hover,
                .catalog [role="main"] table tbody [data-title="Grade"]:hover,
                .courses [role="main"] table tbody [data-title="Pass/Fail"]:hover,
                .catalog [role="main"] table tbody [data-title="Pass/Fail"]:hover {
                    color: #005581;
                }

            .courses [role="main"] table tbody [data-title="Pass/Fail"],
            .catalog [role="main"] table tbody [data-title="Pass/Fail"] {
                text-align: center;
            }

            .courses [role="main"] table tbody .course-details,
            .catalog [role="main"] table tbody .course-details {
                display: none;
            }

                .courses [role="main"] table tbody .course-details td,
                .catalog [role="main"] table tbody .course-details td {
                    text-align: left;
                }

                    .courses [role="main"] table tbody .course-details td ul,
                    .catalog [role="main"] table tbody .course-details td ul {
                        list-style: none;
                        margin: 0;
                        padding: 0 0 0 4.25em;
                        color: #003f72;
                    }

                        .courses [role="main"] table tbody .course-details td ul li,
                        .catalog [role="main"] table tbody .course-details td ul li {
                            margin-bottom: .25em;
                        }

                        .courses [role="main"] table tbody .course-details td ul .header,
                        .catalog [role="main"] table tbody .course-details td ul .header {
                            font-weight: bold;
                        }

                        .courses [role="main"] table tbody .course-details td ul .details .assess-name,
                        .catalog [role="main"] table tbody .course-details td ul .details .assess-name {
                            font-weight: bold;
                        }

            .courses [role="main"] table.in-person thead tr th:nth-child(3),
            .catalog [role="main"] table.in-person thead tr th:nth-child(3),
            .courses [role="main"] table.in-person thead tr th:nth-child(4),
            .catalog [role="main"] table.in-person thead tr th:nth-child(4) {
                text-align: left;
            }

            .courses [role="main"] table.in-person thead tr th:nth-child(5),
            .catalog [role="main"] table.in-person thead tr th:nth-child(5) {
                text-align: center;
            }

            .courses [role="main"] table.in-person tbody tr td:nth-child(3),
            .catalog [role="main"] table.in-person tbody tr td:nth-child(3),
            .courses [role="main"] table.in-person tbody tr td:nth-child(4),
            .catalog [role="main"] table.in-person tbody tr td:nth-child(4) {
                text-align: left;
            }

            .courses [role="main"] table.in-person tbody tr td:nth-child(5),
            .catalog [role="main"] table.in-person tbody tr td:nth-child(5) {
                text-align: center;
            }

            .catalog [role="main"] table tbody tr td .fas.fa-circle {
                color: #f8981c;
            }

            .catalog [role="main"] table tbody tr td .fa-check {
                color: #50ac01;
            }

@media all and (min-width: 50em) {
    .courses table,
    .catalog table {
        border-bottom: 4px solid #f8981c;
    }

        .courses table thead th,
        .catalog table thead th {
            background: #003f72;
            color: #fff;
            padding: .5em;
        }

            .courses table thead th:first-child,
            .catalog table thead th:first-child {
                width: 3em;
            }

            .courses table thead th:last-child,
            .catalog table thead th:last-child {
                width: 12em;
            }

        .courses table tbody tr,
        .catalog table tbody tr {
            border-bottom: 1px solid #cbcbcb;
        }

            .courses table tbody tr td,
            .catalog table tbody tr td {
                padding: .5em;
            }

                .courses table tbody tr td:first-child,
                .catalog table tbody tr td:first-child {
                    text-align: center;
                }

    .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;
    }

    .courses .my-courses table tbody tr td:nth-child(3),
    .catalog .my-courses table tbody tr td:nth-child(3),
    .courses .course-list table tbody tr td:nth-child(3),
    .catalog .course-list table tbody tr td:nth-child(3) {
        text-align: left;
    }

    .catalog thead tr th:nth-child(3) {
        text-align: center;
    }

    .catalog tbody tr td:nth-child(3) {
        text-align: center;
    }
}

.message-wrapper {
    padding: 1em;
}

.instructor-wrapper .h-card:before,
.instructor-wrapper .h-card:after {
    content: "";
    display: table;
}

.instructor-wrapper .h-card:after {
    clear: both;
}

.instructor-wrapper .h-card img {
    display: block;
    width: 100%;
    max-width: 13em;
}

.instructor-wrapper .h-card .wrapper {
    font-size: .875em;
    margin-top: 1em;
}

    .instructor-wrapper .h-card .wrapper .label {
        color: #8c9b93;
        text-transform: uppercase;
        letter-spacing: .02em;
    }

.instructor-wrapper .bio h2 {
    font-size: 1.25em;
    color: #005581;
    margin: 1em 0 0 0;
}

.instructor-wrapper .bio p {
    font-size: .875em;
    line-height: 1.4em;
}

@media all and (min-width: 37.5em) {
    .instructor-wrapper .h-card img {
        float: right;
        margin-left: 2em;
    }

    .instructor-wrapper .bio {
        max-width: 30em;
    }
}

.handout {
    background: #f9f9f9;
    text-align: center;
    color: #8c9b93;
    font-size: 1em;
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: calc(50% - 1em);
    max-width: 15em;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .handout img {
        width: 55px;
        margin: 0 auto;
    }

    .handout p {
        margin-top: 1rem;
        line-height: 135%;
        padding: 0 .75rem;
    }

    .handout .view a {
        background: #e3e3e3;
        display: block;
        padding: .5em;
        color: #8c9b93;
        transition: .1s;
    }

        .handout .view a .fas,
        .handout .view a .far {
            font-size: 1rem;
        }

        .handout .view a:hover {
            background: #f8981c;
        }

            .handout .view a:hover .fas,
            .handout .view a:hover .far {
                color: #fff;
            }

.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;
        }
}

.ui-tabs {
    max-width: 70em;
    margin: 2em auto 0 auto;
}

    .ui-tabs .ui-tabs-nav {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start;
        padding: 0 1em;
    }

        .ui-tabs .ui-tabs-nav li {
            border: 1px solid #888;
            border-bottom: none;
            background: #eee;
            border-top-left-radius: .25em;
            border-top-right-radius: .25em;
        }

            .ui-tabs .ui-tabs-nav li.ui-state-active {
                background: #fff;
                box-shadow: 0 1px 0 #fff;
            }

            .ui-tabs .ui-tabs-nav li a {
                display: block;
                padding: .75em 1.5em;
                text-decoration: none;
            }

    .ui-tabs .ui-tabs-panel {
        background: #fff;
        border: 1px solid #888;
        padding: 0 1em 1em 1em;
    }

.assmt-detail-container {
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    left: 1em;
    max-height: calc(100vh - 14em);
    overflow: auto;
    position: fixed;
    top: 13em;
    width: calc(100vw - 2em);
    z-index: 1001;
}

@media all and (min-width: 64em) {
    .assmt-detail-container {
        width: 60em;
        left: calc(50vw - 30em);
    }
}

.assmt-detail-container .header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #50ac01;
    color: #fff;
    padding-top: 1em;
}

    .assmt-detail-container .header h1 {
        font-size: 1.1em;
        width: calc(100% - 30em);
        margin: 0 2em 0 0;
        padding-left: 1rem;
        font-weight: 600;
    }

    .assmt-detail-container .header h2 {
        background: #8c9b93;
        width: 100%;
        margin: 1rem 0 0 0;
        padding: 1rem;
        font-size: 1.1em;
        font-weight: 600;
    }

    .assmt-detail-container .header .close {
        cursor: pointer;
        width: 4em;
        margin-right: 1rem;
        transition: .1s;
    }

        .assmt-detail-container .header .close i[class*='fa'] {
            margin-right: .25em;
        }

    .assmt-detail-container .header .grade {
        width: 9em;
        text-align: center;
    }

    .assmt-detail-container .header .pagination {
        width: 10em;
        margin: 0 2em;
        display: flex;
        justify-content: space-between;
    }

        .assmt-detail-container .header .pagination a {
            color: #fff;
            cursor: pointer;
            transition: .1s;
        }

            .assmt-detail-container .header .pagination a:hover {
                color: #0099cc;
            }

.assmt-detail-container .assessment-results .aa-container .aa-panel ol li {
    margin-bottom: 1rem;
}

.assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: .5rem;
}

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper .custom-select {
        margin: 0;
    }

        .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper .custom-select select {
            padding: .25em 2.5em .25em .25em;
        }

            .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper .custom-select select[readonly],
            .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper .custom-select select[readonly="readonly"] {
                color: #999;
                cursor: not-allowed;
            }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper label {
        margin: 0;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper .feedback-cor,
    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper .feedback-inc {
        border-width: 1px;
        border-style: solid;
        border-radius: .175rem;
        font-size: .875em;
        padding: .125em .5em;
        margin-left: 1rem;
        transition: .15s;
        display: none;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.incorrect::before {
        content: "\f00d";
        color: #ad2317;
        font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
        position: absolute;
        left: -1.125rem;
        top: .125rem;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.incorrect .feedback,
    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.incorrect .feedback-inc {
        color: #fff;
        border-color: #ad2317;
        background: rgba(173, 35, 23, 0.5);
        display: inline;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.incorrect .feedback-cor {
        display: none;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.correct::before {
        content: "\f00c";
        color: #50ac01;
        font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
        position: absolute;
        left: -1.125rem;
        top: .125rem;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.correct .feedback,
    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.correct .feedback-cor {
        border-color: #50ac01;
        background: rgba(80, 172, 1, 0.5);
        display: inline;
    }

    .assmt-detail-container .assessment-results .aa-container .aa-panel .field-wrapper.correct .feedback-inc {
        display: none;
    }

.assmt-detail-container .matchingstatement table thead .match {
    width: 20em;
}

.assmt-detail-container .matchingstatement table tr {
    vertical-align: top;
}

.assmt-detail-container .matchingstatement table select {
    width: 20em;
}

.assmt-detail-container .matchingblocks table tbody tr td {
    vertical-align: top;
}

.assmt-detail-container .matchingblocks table .label {
    display: table-cell;
}

.assmt-detail-container .matchingblocks table .concept {
    padding: 0 .5em;
    background: #eee;
    border-width: 2px;
    border-radius: .175em;
    border-style: solid;
    cursor: move;
}

    .assmt-detail-container .matchingblocks table .concept p {
        margin: .8em 0;
    }

.assmt-detail-container .matchingblocks table .descriptor {
    padding: 0 .5em;
}

.assmt-detail-container .matchingblocks table .descriptor .dropzone {
        padding: 1.5em 0;
        background: #eee;
        border-radius: .175em;
        border-width: 2px;
        border-style: solid;
        position: relative;
        transition: .1s;
    }

.assmt-detail-container .matchingblocks table .descriptor .dropzone::before {
            /*content: "Drag and drop matching concept.";*/
            color: #999;
            position: absolute;
            top: 1em;
            left: 1em;
            font-style: italic;
        }

.assmt-detail-container .matchingblocks table .descriptor .dropzone.ui-droppable-active {
            background: rgba(173, 35, 23, 0.3);
        }

.assmt-detail-container .matchingblocks table .descriptor .dropzone.ui-droppable-active::before {
                display: none;
            }

.assmt-detail-container .matchingblocks table .descriptor .dropzone.dropped {
    padding: .5em 0;
}

    .assmt-detail-container .matchingblocks table .descriptor .dropzone.dropped::before {
        display: none;
    }

    .assmt-detail-container .matchingblocks table .descriptor .dropzone.dropped .concept {
        width: calc(100% - 1em);
        padding: .25em .25em .25em .5em;
        margin: 0 .5em;
        background: #ccc;
    }

.review {
    background: #e4e4e4;
}

    .review h2 {
        align-items: center;
        background: #50ac01;
        color: #fff;
        display: flex;
        font-size: 1rem;
        font-weight: 400;
        justify-content: space-between;
        margin: 0;
        padding: 1rem;
    }

        .review h2 button {
            background: #f6f6f6;
            border: 1px solid #ccc;
            color: #909090;
            text-decoration: none;
            padding: .375em 2em;
            font-size: 1em;
            border-radius: .25em;
            border-bottom-width: 2px;
        }

    .review h3 {
        padding: 1rem;
        background: #8c9b93;
        color: #fff;
        margin: 0;
        font-weight: 400;
        font-size: 1rem;
    }

    .review h4 {
        font-weight: 600;
        text-transform: uppercase;
        color: #003f72;
        font-size: 1rem;
    }

    .review h5 {
        font-size: 1rem;
        font-weight: 400;
        color: #0099cc;
        margin-bottom: .375em;
    }

    .review > div {
        padding: 1rem;
    }

    .review input[type="submit"] {
        margin: .5em;
    }

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

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

            .review input[type="checkbox"] + label::after,
            .review 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;
            }

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

    .review table thead tr th.checkbox {
        text-align: center !important;
    }

    .review table thead tr th {
        font-size: 1rem;
        padding-bottom: .5em !important;
        font-weight: 400 !important;
        background: #e4e4e4 !important;
        color: #005581;
    }

    .review table thead tr .text {
        width: 14em;
    }

    .review table td,
    .review table th {
        display: table-cell;
        text-align: left;
    }

        .review table td.checkbox,
        .review table th.checkbox {
            text-align: center;
        }

    .review table tbody {
        border: 4px solid #fff;
    }

        .review table tbody tr {
            vertical-align: top;
            border: none;
        }

            .review table tbody tr td:not(.text) {
                padding-top: 2em !important;
            }

            .review table tbody tr:nth-of-type(odd) {
                background: #eee;
            }

    .review ~ .details table .grade,
    .review ~ .details table .pf {
        text-align: center;
    }

    .review ~ .details table .date {
        text-align: left;
    }

    .review ~ .details table i[class*="fa-trash"] {
        color: #ad2317;
    }

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

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

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

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

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