/*@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');*/

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    overflow: hidden;
}

.footer {
    /*position: fixed;*/
    bottom: 0;
    right: 0;
    width: 100%;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.icon-import a {
    color: #999966 !important;
    text-align: center;
    font-size: 1.4em;
}

    .icon-import a:hover {
        color: #e5d3a7 !important;
    }

.imported {
    background-color: rgba(0,102,0,0.06) !important;
}

.icon-default {
    color: #333333;
    margin: auto 3px;
    font-size: 1.4em;
}

    .icon-default:hover {
        color: #ededed;
        margin: auto 3px;
        font-size: 1.4em;
    }

.divAddChpt {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
}

    .divAddChpt a {
        color: #333333 !important;
        text-decoration: none;
    }

    .divAddChpt:hover {
        color: #dddddd !important;
        margin: auto 3px;
    }

.icon-defaultDK, .icon-defaultLT, .icon-defaultRed {
    font-size: 1.0em;
}

.icon-defaultDK {
    color: #a8b6bc !important;
    margin: auto 3px;
}

    .icon-defaultDK:hover {
        color: #e3eaed !important;
        margin: auto 3px;
    }

.icon-defaultLT {
    color: #AFAFAF !important;
    margin: auto 3px;
}

    .icon-defaultLT:hover {
        color: #333333 !important;
        margin: auto 3px;
    }

    .icon-defaultLT:active {
        color: #333333 !important;
        margin: auto 3px;
    }

.icon-defaultLTGreen {
    color: #009900 !important;
    margin: auto 3px;
    text-decoration: none;
}

    .icon-defaultLTGreen:hover {
        color: #00ff00 !important;
        margin: auto 3px;
    }

    .icon-defaultLTGreen.disabled {
        color: #cccccc !important;
        pointer-events: none !important;
        cursor: default;
    }

.icon-defaultLTBlack {
    color: #000000 !important;
    margin: auto 3px;
    text-decoration: none;
}

    .icon-defaultLTBlack:hover {
        color: #cccccc !important;
        margin: auto 3px;
    }

    .icon-defaultLTBlack.disabled {
        color: #cccccc !important;
        pointer-events: none !important;
        cursor: default;
    }

.icon-defaultRed {
    color: #DB8D8D !important;
    margin: auto 3px;
}

    .icon-defaultRed:hover {
        color: #cd5a5a !important;
    }

    .icon-defaultRed:active {
        color: #cd5a5a !important;
    }


.icon-check {
    color: #009900;
    text-align: center;
    font-size: 1.4em;
}

.icon-delete {
    color: #cd5a5a;
    margin: auto 3px;
    font-size: 1.4em;
}

    .icon-delete:hover {
        color: #ff8989;
        margin: auto 3px;
        font-size: 1.4em;
    }

.icon-edit {
    color: #005581;
    margin: auto 3px;
    font-size: 1.4em;
}

    .icon-edit:hover {
        color: #3ab3f2;
        margin: auto 3px;
        font-size: 1.4em;
    }

.icon-view {
    color: #009900;
    margin: auto 3px;
    font-size: 1.4em;
}

    .icon-view:hover {
        color: #00ff00;
        margin: auto 3px;
        font-size: 1.4em;
    }

.icon-role-enabled {
    color: #009900;
}

.icon-role-disabled {
    color: #c6c4c4;
}



.content {
    padding-top: 1.1rem;
}

/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}*/

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }



/* ID Breadcrumbs */
.id-breadcrumbs {
    /*width: 100%;*/
   /* padding: 5px;
    display: table;*/
}

    .id-breadcrumbs .block {
        float: left;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        color: #fff;
        font-size: 1em;
        min-width: 200px;
        margin-right: 5px;
    }

    .id-breadcrumbs .module {
        background-color: #adacac;
    }

    .id-breadcrumbs .lesson {
        background-color: #005581;
    }

    .id-breadcrumbs .activityset {
        background-color: #55b70e;
    }

    .id-breadcrumbs .activity {
        background-color: #675281;
    }

    .id-breadcrumbs .module:hover {
        background: #91918F;
        box-shadow: inset 2px -4px 3px 0px rgba(0, 0, 0, 0.08);
    }

    .id-breadcrumbs .lesson:hover {
        background: #013a57;
        box-shadow: inset 2px -4px 3px 0px rgba(0, 0, 0, 0.08);
    }

    .id-breadcrumbs .activityset:hover {
        background: #469701;
        box-shadow: inset 2px -4px 3px 0px rgba(0, 0, 0, 0.08);
    }

    .id-breadcrumbs .activity:hover {
        background: #544964;
        box-shadow: inset 2px -4px 3px 0px rgba(0, 0, 0, 0.08);
    }

    .id-breadcrumbs .divider {
        float: left;
        font-size: 1.5em;
        color: #ccc;
        margin-right: 5px;
        margin-top: 7px;
    }




.scorm-form h1 {
    background: #fff;
    color: #005581;
    font-weight: 600;
    font-size: 1.25rem;
    margin-top: 1.5em;
}

    .scorm-form h1 > span {
        font-weight: 600;
    }

    .scorm-form h1 .controls {
        float: right;
        margin-right: 1rem;
        font-size: 1.2rem;
    }

        .scorm-form h1 .controls a {
            display: inline-block;
            margin-left: 1rem;
            cursor: pointer;
            transition: .1s;
            color: #005581;
        }

        .scorm-form h1 .controls.notactive a {
            color: #808080;
        }

        .scorm-form h1 .controls a:hover {
            color: #4c88a6;
        }

        .scorm-form h1 .controls.notactive a:hover {
            color: #808080;
        }

.scorm-form .rz-panel {
    padding: unset;
}

.scorm-form .rz-panel-content-wrapper {
    padding-left: 1.2em;
}

.scorm-form .panel-header {
    width: 100%;
    background-color: #808080;
    color: #ffffff;
    padding: 10px;
}

    .scorm-form .panel-header label {
        text-align: left;
        color: #fff;
        font-size: 1.2em
    }


input[type="file"] {
    width: 100%;
    font-size: 1em;
}

.scmcontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 65.25%;
}

.scmviewer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#buttoncontainer {
    text-align: left;
}

    #buttoncontainer a, button {
        display: inline-block;
        margin-right: 10px;
    }


#fieldwrappercontainer {
    display: block;
}

    #fieldwrappercontainer .fieldcontent {
        padding-right: 10px;
        float: left;
    }

.summaryform {
    width: 100%;
}

.chapterform {
    background-color: rgba(179, 179, 179,0.25);
    border: 2px solid #b3b3b3;
    border-radius: 3px;
    padding-bottom: 20px;
    margin-left: 2em;
}

.lessonform {
    background-color: rgba(0,85,128,0.25);
    border: 2px solid #005581;
    border-radius: 3px;
    padding-bottom: 20px;
    margin-left: 2em;
}

/*.lessonform .resources {
        line-height: 1.3em;*/
/* border: 1px solid #ccc;
        padding: 0.5em;
        border-radius: 0.125em; */
/*}

        .lessonform .resources .fa-images {
            color: #006600;
            margin-right: .75em;
            font-size: 1.8em;
        }

        .lessonform .resources .fa-hiking {
            color: #FFD700;
            margin-right: .75em;
            font-size: 1.8em;
        }

        .lessonform .resources .fa-vest {
            color: #B22020;
            margin-right: .75em;
            font-size: 1.8em;
        }*/

.activitysetform {
    background-color: rgba(99,212,0,0.25);
    border: 2px solid #50ac01;
    border-radius: 3px;
    padding-bottom: 20px;
    margin-left: 2em;
}


.activityform {
    background-color: rgba(163,247,89,0.25);
    border: 2px solid #68df01;
    border-radius: 3px;
    padding-top: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    margin-left: 2em;
}


.activityPlainform {
    background-color: #f9f9f9;
    border: 1px solid #adacac;
    height: 100%;
    display: flex;
    margin-left: 2em;
}

.assetform {
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 3px;
    padding-bottom: 20px;
    margin-left: 2em;
}


select {
    background-image: none;
}

.resources {
    line-height: 1.3em;
    /* border: 1px solid #ccc;
        padding: 0.5em;
        border-radius: 0.125em; */
}

    .resources .icon {
        margin-right: .75em;
        font-size: 1.8em;
    }

    .resources .fa-images {
        color: #006600;
        /* margin-right: .75em;
        font-size: 1.8em;*/
    }

    .resources .fa-hiking {
        color: #FFD700;
        /*       margin-right: .75em;
        font-size: 1.8em;*/
    }

    .resources .fa-vest {
        color: #B22020;
        /* margin-right: .75em;
        font-size: 1.8em;*/
    }

.left-nav .toggleNav,
.prereq-list .toggleNav {
    background: #6f6f6f;
    color: #fff;
    border-bottom-right-radius: 4px;
    border-left: 2px solid #fff;
    border-top-right-radius: 4px;
    cursor: pointer;
    padding: 0.75em 0.25em;
    position: absolute;
    right: -1.5em;
    text-align: center;
    top: 1em;
    transition: 0.2s;
    width: 1.5em;
}

    .left-nav .toggleNav:hover,
    .prereq-list .toggleNav:hover {
        background: #919191;
    }

    .left-nav .toggleNav.big, .prereq-list .toggleNav.big {
        background: #6f6f6f;
        color: #fff;
        border-bottom-right-radius: 4px;
        border-left: 2px solid #fff;
        border-top-right-radius: 4px;
        cursor: pointer;
        padding: 0.75em 1.25em;
        position: absolute;
        right: -1.5em;
        text-align: center;
        top: 1em;
        transition: 0.2s;
        width: 1.5em;
        height: 200px;
    }

.course-nav .course-toggle {
    border-bottom-right-radius: 4px;
    border-left: 2px solid #fff;
    border-top-right-radius: 4px;
    cursor: pointer;
    padding: 0.75em 0.25em;
    width: 1.5em;
}


.toggletext {
    content: "Controls";
    display: inline-block;
    text-transform: uppercase;
    font-style: italic;
    transform: rotate(-90deg);
    transform-origin: 100% 100%;
    margin-left: -4.5em;
    margin-top: .5em;
    font-size: 1rem;
    color: #fff;
    opacity: 0.5;
}


.field-group.filters {
    border: 1px solid #ccc;
    font-size: 1rem;
    padding: .5rem;
    background: #f6f6f6;
    /*justify-content: space-between;*/
}

    .field-group.filters .field-wrapper {
        margin: 0 0 .375em 0;
        margin-right: 0;
    }

        .field-group.filters .field-wrapper .label {
            margin-right: .5em;
        }

        .field-group.filters .field-wrapper:not(.radios) > label {
            margin: 0 .5rem 0 0;
        }

        .field-group.filters .field-wrapper.radios {
            position: relative;
        }

            .field-group.filters .field-wrapper.radios label {
                border-collapse: collapse;
            }

                .field-group.filters .field-wrapper.radios label:first-of-type {
                    border-top-left-radius: 3px;
                    border-bottom-left-radius: 3px;
                }

                .field-group.filters .field-wrapper.radios label:last-of-type {
                    border-top-right-radius: 3px;
                    border-bottom-right-radius: 3px;
                }

            .field-group.filters .field-wrapper.radios input {
                visibility: hidden;
                position: absolute;
                left: -999em;
                width: 0;
                height: 0;
            }

                .field-group.filters .field-wrapper.radios input + label {
                    background: #f8981c;
                    color: #fff;
                    cursor: pointer;
                    padding: .25em .5em;
                    border: 1px solid #774504;
                    text-shadow: 1px 1px 0 #774504;
                }

                .field-group.filters .field-wrapper.radios input:checked + label {
                    background: #c27006;
                }

.btnUpload {
    background-color: #eee;
    border-radius: .25em;
    border: 1px solid #bbb;
    color: #779688;
    font-size: 1em;
    padding: .45em 1.2em .45em 1.2em;
    text-shadow: 1px 1px 0 #fff;
}

.pickercontainer {
    transition: unset;
    float: unset;
    margin-right: unset;
    width: unset;
    margin: 1em;
}


.page-wrapper [role="main"] #assets {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: auto;
    grid-gap: .75em;
    padding: 1em;
    align-items: stretch;
}

    .page-wrapper [role="main"] #assets figure {
        background: #eee;
        margin: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

        .page-wrapper [role="main"] #assets figure .image {
            height: 10em;
        }

            .page-wrapper [role="main"] #assets figure .image img {
                height: auto;
                width: auto;
                display: block;
                margin: 0 auto;
                max-height: 100%;
                max-width: 100%;
            }

@media all and (min-width: 37.5em) {
    .page-wrapper [role="main"] #assets {
        grid-template-columns: repeat(3, auto);
    }
}

@media all and (min-width: 50em) {
    .page-wrapper [role="main"] #assets {
        grid-template-columns: repeat(4, auto);
    }
}

@media all and (min-width: 68.75em) {
    .page-wrapper [role="main"] #assets {
        grid-template-columns: repeat(5, auto);
    }
}

#assets.search-results figure {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

    #assets.search-results figure > div {
        height: 10em;
    }

        #assets.search-results figure > div img {
            height: auto;
            width: auto;
            display: block;
            margin: 0 auto;
            max-height: 100%;
            max-width: 100%;
        }

    #assets.search-results figure .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #bbb;
    }

        #assets.search-results figure .icon i[class*='fa'] {
            text-shadow: 1px 1px 0 #ffffff;
            color: #3b7980;
        }

    #assets.search-results figure .video-embed iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    #assets.search-results figure figcaption > div {
        padding: .5em .5em .5em .75em;
    }

        #assets.search-results figure figcaption > div h2 {
            color: #5f7b6e;
            text-transform: uppercase;
            font-size: 1rem;
            margin: 0 0 .25em 0;
            letter-spacing: .02em;
        }

        #assets.search-results figure figcaption > div p {
            margin: 0;
        }

        #assets.search-results figure figcaption > div.media-usage p {
            word-break: break-all;
        }

            #assets.search-results figure figcaption > div.media-description p.condensed,
            #assets.search-results figure figcaption > div.media-usage p.condensed {
                height: 2.35em;
                overflow: hidden;
            }

                #assets.search-results figure figcaption > div.media-description p.condensed.expanded,
                #assets.search-results figure figcaption > div.media-usage p.condensed.expanded {
                    height: auto;
                    overflow: visible;
                }

        #assets.search-results figure figcaption > div.media-description .more,
        #assets.search-results figure figcaption > div.media-usage .more {
            font-size: 1em;
            color: #779688;
            display: block;
            text-align: right;
            cursor: pointer;
        }

    #assets.search-results figure figcaption .media-name {
        background: #779688;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
        margin: 0;
    }

    #assets.search-results figure figcaption .button {
        background: #779688;
        display: inline-block;
        border-color: #779688;
        margin: .75em .5em .5em .5em;
        color: #eee;
        cursor: pointer;
        text-shadow: none;
        align-self: end;
    }

        #assets.search-results figure figcaption .button:hover {
            background: #495e55;
        }

#assets.search-results .no-results {
    padding: 10em 0;
    text-align: center;
    color: #555;
    width: 100%;
    grid-column-start: 1;
    grid-column-end: span 5;
}

.media-wrapper {
    background: #fafafa;
    font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
}


    .media-wrapper .media {
        grid-template-columns: 50% 25% 25%;
        justify-items: stretch;
    }

    .media-wrapper .meta {
        grid-template-columns: 100%;
    }

        .media-wrapper .meta p {
            margin: 0;
        }

        .media-wrapper .meta .field-group {
            margin: 1em 0;
        }

    .media-wrapper .actions {
        /* display: flex;*/
        padding: 1em;
    }

        .media-wrapper .actions .field-group {
            margin-right: .5em;
        }

    .media-wrapper h2 {
        color: #779688;
        font-weight: 400;
    }

    .media-wrapper a {
        color: #4c9aa2;
        transition: .1s;
    }

        .media-wrapper a:hover {
            color: #8bc3c9;
        }

    .media-wrapper p {
        font-size: 1em;
    }

    .media-wrapper button {
        background-color: #eee;
        border-radius: .25em;
        border: 1px solid #bbb;
        color: #779688;
        font-size: 1em;
        padding: .45em 1.2em .45em 1.2em;
        text-shadow: 1px 1px 0 #fff;
    }

        .media-wrapper button .fas,
        .media-wrapper button .far,
        .media-wrapper button .fad {
            margin-right: .25em;
        }

        .media-wrapper button:hover {
            background-color: #ddd;
        }

        .media-wrapper button[disabled],
        .media-wrapper button[disabled="disabled"] {
            border-color: #ddd;
            color: #b1c2ba;
            cursor: not-allowed;
        }

            .media-wrapper button[disabled]:hover,
            .media-wrapper button[disabled="disabled"]:hover {
                background-color: #eee;
            }

    .media-wrapper .hotbtn {
        background: #779688;
        border-color: #779688;
        color: #eee;
        text-shadow: none;
    }


    .media-wrapper .label {
        color: #586674;
        text-transform: uppercase;
        font-size: .75em;
        letter-spacing: .02em;
        margin-bottom: .125em;
    }

    .media-wrapper .table {
        font-size: 1em;
        width: 100%;
    }

        .media-wrapper .table thead th {
            background: #779688;
            color: #fff;
            padding: .5em;
            font-weight: 400;
            text-align: left;
        }

            .media-wrapper .table thead th:nth-child(n+2) {
                text-align: center;
            }

        .media-wrapper .table tfoot {
            background: rgba(119, 150, 136, 0.2);
            font-size: 1em;
        }

            .media-wrapper .table tfoot td {
                padding: 1em .5em;
            }

        .media-wrapper .table tbody tr {
            vertical-align: middle;
        }

            .media-wrapper .table tbody tr:nth-last-of-type(even) {
                background: rgba(119, 150, 136, 0.3);
            }

            .media-wrapper .table tbody tr td {
                padding: .5em;
            }

                .media-wrapper .table tbody tr td:nth-child(n+2) {
                    text-align: center;
                }

    .media-wrapper .field-group {
        display: flex;
        flex-direction: column;
        margin-top: .5em;
        position: relative;
    }

        .media-wrapper .field-group label {
            color: #586674;
            text-transform: uppercase;
            font-size: .75em;
            letter-spacing: .02em;
            margin-bottom: .125em;
        }

            .media-wrapper .field-group label sup {
                color: red;
            }

        .media-wrapper .field-group.horiz {
            flex-direction: row;
            justify-content: space-between;
        }

            .media-wrapper .field-group.horiz label {
                width: 10em;
            }

            .media-wrapper .field-group.horiz > *,
            .media-wrapper.field-group.horiz .ms-options {
                width: calc(100% - 11rem);
                right: 0;
                left: auto;
            }

            .media-wrapper .field-group.horiz ol {
                padding: .45em 1.2em .45em 1.5em;
                font-size: 1em;
                color: #444;
                border-radius: .25em;
                border: 1px solid #bbb;
                margin: 0;
            }

                .media-wrapper .field-group.horiz ol li {
                    margin-bottom: .125em;
                }

        .media-wrapper .field-group.add label {
            color: green;
        }

        .media-wrapper .field-group button {
            align-self: flex-start;
        }

    .media-wrapper .media {
        display: grid;
        grid-template-columns: 35% 40% 25%;
        grid-gap: 1em;
        width: 100%;
        padding: 1em;
        justify-items: start;
        align-items: start;
    }

        .media-wrapper .media .media-info {
            width: 100%;
        }

            .media-wrapper .media .media-info .field-group {
                margin-top: 1em;
            }

                .media-wrapper .media .media-info .field-group label[for*="media"] {
                    text-transform: none;
                    margin: .25em 0 .25em .5em;
                    font-size: 1em;
                    letter-spacing: 0;
                    color: #555;
                }

                    .media-wrapper .media .media-info .field-group label[for*="media"]:last-of-type {
                        margin-bottom: 1em;
                    }

                    .media-wrapper .media .media-info .field-group label[for*="media"] input {
                        margin-right: .25em;
                    }

                .media-wrapper .media .media-info .field-group.file.hidden,
                .media-wrapper .media .media-info .field-group.url.hidden,
                .media-wrapper .media .media-info .field-group.embedded.hidden,
                .media-wrapper .media .media-info .field-group.vimeo.hidden,
                .media-wrapper .media .media-info .field-group.azure.hidden {
                    visibility: hidden;
                    height: 0;
                    overflow: hidden;
                    margin: 0;
                    transition: .1s;
                }

                .media-wrapper .media .media-info .field-group.url textarea {
                    height: 4em;
                }

            .media-wrapper .media .media-info .media-name-list label {
                display: flex;
                justify-content: space-between;
            }

                .media-wrapper .media .media-info .media-name-list label > span {
                    flex: 2;
                }

                .media-wrapper .media .media-info .media-name-list label .fas {
                    margin-left: .5em;
                }

            .media-wrapper .media .media-info button {
                width: auto;
            }

        .media-wrapper .media .media-preview {
            width: 100%;
        }

            .media-wrapper .media .media-preview iframe {
                width: 100% !important;
            }

            .media-wrapper .media .media-preview img {
                display: block;
                width: 100%;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            }

        .media-wrapper .media .file-info table tr td {
            padding: .3em .25em;
        }

            .media-wrapper .media .file-info table tr td.content {
                font-size: 1em;
            }

    .media-wrapper .meta {
        display: grid;
        grid-template-columns: 66% 33%;
        grid-gap: 1em;
        padding: 1em;
    }

        .media-wrapper .meta h2 {
            grid-column-start: 1;
            grid-column-end: span 2;
        }

        .media-wrapper .meta .field-group.url {
            position: relative;
        }

            .media-wrapper .meta .field-group.url input {
                padding-right: 2.5em;
            }

            .media-wrapper .meta .field-group.url::after {
                content: "\f0c5";
                position: absolute;
                font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
                right: .5em;
                top: .4em;
                font-weight: 300;
                color: #aaa;
            }

        .media-wrapper .meta .media-details .buttons {
            justify-content: flex-start;
        }

            .media-wrapper .meta .media-details .buttons button {
                margin: 0 .5em;
                width: auto;
            }

        .media-wrapper .meta .media-type .approver .field-wrapper:first-of-type {
            width: calc(100% - 7.5em);
            flex-direction: column;
        }

            .media-wrapper .meta .media-type .approver .field-wrapper:first-of-type input {
                width: 100%;
            }

        .media-wrapper .meta .media-type .approver .field-wrapper:last-of-type {
            margin-top: 1.5em;
            width: 7em;
            justify-content: flex-end;
            display: flex;
        }

            .media-wrapper .meta .media-type .approver .field-wrapper:last-of-type label {
                /*text-align: right;*/
                margin-right: .5em;
            }


.instructions {
    margin: .5em;
    border: 2px solid #ffbb38;
    background: rgba(255, 187, 56, 0.5);
    border-radius: .25em;
    display: flex;
    align-items: flex-start;
    padding: .5em;
    justify-content: space-between;
}

    .instructions ul {
        padding: 0 1.5rem;
        width: calc(100% - 5.5em);
        margin: 0;
    }

    .instructions a {
        width: 5.5em;
        background: #ffbb38;
        padding: .25em;
        text-align: center;
        cursor: pointer;
        transition: .1s;
    }

        .instructions a:hover {
            background: #d18a00;
            color: #fff;
        }


.main-nav ul li .btnclassSelected {
    background: #f8981c;
    color: #ffffff;
}

/* ==========================================================================
   DATA TABLE OVERRIDES STYLES
   ========================================================================== 
*/
/** datatable container */
.content-dt {
    margin-top: 50px;
    padding: 20px;
    border: 2px solid #c6c4c4;
    border-radius: 6px;
    background-color: #ffffff;
    min-height: 500px;
}

#tblData, .tblBasic {
    color: #005581;
    font-size: .9em;
}

    #tblData thead tr th {
        color: #888888;
        font-weight: 700;
    }

        #tblData thead tr th:first-of-type {
            color: #005581;
            font-weight: 700;
        }

    #tblData tbody tr td.iconcell {
        font-size: .7em;
    }

    #tblData tbody tr:hover {
        background-color: #d9f2f7 !important;
    }

    #tblData tbody tr {
        background-color: #ffffff !important;
    }

        #tblData tbody tr .odd {
            background-color: #ffffff !important;
        }

#tblData_length.dataTables_length {
    margin-bottom: 20px;
}

#tblData_filter.dataTables_filter {
    margin-bottom: 20px;
}

    #tblData_filter.dataTables_filter label input {
        border-color: #cccccc;
        border-radius: 6px;
        border-style: solid;
    }

.tblBasic thead tr th {
    color: #888888;
    font-weight: 700;
}

    .tblBasic thead tr th:first-of-type {
        color: #005581;
        font-weight: 700;
    }

.tblBasic tbody tr td.iconcell {
    font-size: .7em;
}

.tblBasic tbody tr:hover {
    background-color: #d9f2f7 !important;
}

.tblBasic tbody tr {
    background-color: #ffffff !important;
}

    .tblBasic tbody tr .odd {
        background-color: #ffffff !important;
    }


table.dataTable thead th {
    border-bottom: 1px solid #c6c4c4;
}

table.dataTable.no-footer {
    border-bottom: 1px solid #c6c4c4;
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0px;
    font-size: .9em;
}


.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

    .table tbody {
        vertical-align: middle;
    }

    .table td {
        padding: .75rem;
    }

.table-bordered {
    border: 1px solid #dee2e6;
}

.tralt {
    background-color: #f2f2f2;
}



/** Notfication */

/** this is the bell **/
.notificationsnone {
    color: #da7e07 !important;
    background-color: transparent !important;
    font-size: 1.7em;
    padding: unset !important;
    margin-top: .4em
}

    .notificationsnone:hover {
        color: #3AD7FA !important;
        background-color: transparent !important;
        font-size: 1.7em;
        padding: unset !important;
        margin-top: .4em
    }

.notificationssome {
    color: #3BB528 !important;
    background-color: transparent !important;
    font-size: 1.7em;
    padding: unset !important;
    margin-top: .4em
}

    .notificationssome:hover {
        color: #3AD7FA !important;
        background-color: transparent !important;
        font-size: 1.7em;
        padding: unset !important;
        margin-top: .4em
    }

.commentbreadcrumbs {
    margin: 1rem auto 0.5em auto;
    /* max-width: 1200px; */
}

.submissions .commentbreadcrumbs {
    margin: 2rem;
}

    .submissions .commentbreadcrumbs a {
        color: #666;
        font-size: .75rem;
        text-decoration: none;
    }

    .submissions .commentbreadcrumbs .fas {
        color: #666;
        margin: 0 .5em;
        font-size: .8rem;
    }

    .submissions .commentbreadcrumbs a {
        font-size: 1em;
    }

.submissions .submissions-container {
    display: flex;
    height: 65vh;
}

.submissions-container div {
    flex-grow: 4;
}

[role="main"] .reviewer {
    padding-top: 0;
}

    [role="main"] .reviewer .comment-wrapper {
        background: #fff;
        /* margin: 1em 0 0 2em;*/
        padding: .5em;
        /*  border: 1px solid #adacac;*/
    }

        [role="main"] .reviewer .comment-wrapper h1 {
            color: #005581;
            font-weight: 400;
            font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
            font-size: 2.125em;
        }

        [role="main"] .reviewer .comment-wrapper h3 {
            font-family: 'Open Sans', sans-serif, Verdana, Geneva, Tahoma;
            font-size: 1em;
            margin-bottom: .125em;
        }

        [role="main"] .reviewer .comment-wrapper h4 {
            font-weight: 400;
            font-size: .875em;
            margin: 0;
        }

        [role="main"] .reviewer .comment-wrapper .prev-comments {
            background: #e4e4e4;
            max-height: calc(100vh - 100px);
            overflow: scroll;
            padding: .5em;
            /* border: 1px solid #e4e4e4;*/
        }

            [role="main"] .reviewer .comment-wrapper .prev-comments .comment {
                background: #fff;
                padding: .5em;
                border: 1px solid #ccc;
                margin-bottom: .5em;
            }

                [role="main"] .reviewer .comment-wrapper .prev-comments .comment h3 {
                    margin-top: 0;
                }

                [role="main"] .reviewer .comment-wrapper .prev-comments .comment p {
                    font-size: .875em;
                    line-height: 1.4;
                    padding-left: 3em;
                }

                    [role="main"] .reviewer .comment-wrapper .prev-comments .comment p:first-of-type {
                        position: relative;
                    }

                        [role="main"] .reviewer .comment-wrapper .prev-comments .comment p:first-of-type::before {
                            /*content: "\f10d";*/
                            font-family: 'Font Awesome 6 Pro', "Font Awesome 6 Free";
                            font-size: 1.25em;
                            color: #ccc;
                            font-weight: bold;
                            position: absolute;
                            display: inline-block;
                            left: 1em;
                        }

.reviewer .buttons {
    margin-top: 1em;
    display: flex;
    justify-content: flex-end;
}

    .reviewer .buttons input {
        margin-right: .5em;
    }

.list-group2 {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.25rem;
}

    .list-group2 .list-group-item2 {
        position: relative;
        display: block;
        padding: 0.5rem 1rem;
        color: #212529;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.125);
    }


.main-nav ul li a {
    margin: 0 .25em 0 0;
}