/* Minification failed. Returning unminified contents.
(431,2): run-time error CSS1030: Expected identifier, found ' '
(431,2): run-time error CSS1019: Unexpected token, found ' '
(548,5): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(549,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(558,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(559,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(568,5): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(569,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(578,5): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(579,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(588,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(589,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(634,5): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(635,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(644,5): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(645,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(654,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(655,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(664,5): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(665,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(674,5): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(675,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(684,5): run-time error CSS1019: Unexpected token, found '@keyframes'
(685,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(741,1): run-time error CSS1019: Unexpected token, found '}'
 */
.required-field {
    /*display: flex;*/
    padding-bottom: 1.25rem;
}

    .required-field input {
        margin: 0 .25rem;
        min-width: 125px;
        border: 1px solid #eee;
        border-left: 3px solid;
        border-radius: 5px;
    }

    .required-field input:optional {
        border-left-color: #999;
    }

    .required-field input:required {
        border-left-color: #00ff90;
    }

    .required-field input:invalid {
        border-left-color: #ff0000;
    }

    .required-field select {
        margin: 0 .25rem;
        min-width: 125px;
        border: 1px solid #999;
        border-left: 3px solid;
        border-radius: 5px;
    }

    .required-field select:required {
        border-left-color: #00ff90;
    }

    .required-field select:invalid {
        border-left-color: #ff0000;
    }

    .required-field select:optional {
        border-left-color: #999;
    }

    .required-field textarea {
        margin: 0 .25rem;
        min-width: 125px;
        border: 1px solid #999;
        border-left: 3px solid;
        border-radius: 5px;
    }

        .required-field textarea:required {
            border-left-color: #00ff90;
        }

        .required-field textarea:invalid {
            border-left-color: #ff0000;
        }

        .required-field textarea:optional {
            border-left-color: #999;
        }

#overlay {
    opacity: 0.4;
    position: fixed;
    display: none;
    height: 100%;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    z-index: 5000;
}

    #overlay #spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        z-index: 5001;
        filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(58deg) brightness(106%) contrast(103%);
    }

.adminfield {
    max-width: 400px;
}

.col-form-label {
    font-weight: bold;
}

.clickable {
    cursor: pointer;
}

.blackLineBreak {
    border-top: 1px solid black;
}

.clickable.selected {
    color: blue !important;
    font-weight: bold;
}

.answer {
    background: #30BF3059;
}

.selectedAsAnswer {
    background-color: #B9E5FB;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

.slider.stopgo {
    background-color: #a90329 !important;
}

input:checked + .slider.stopgo {
    background-color: #0CCB00 !important;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/* STUFF FROM QUESTION CREATE/DETAILS */
.multChoiceLi {
    margin-bottom: 5px;
}

.blackedCell {
    /*background-color: white;*/
    border: none !important;
}

.headerCell {
    background-color: #043e61;
    border: 1px solid black !important;
    color: #fff;
    background-clip: padding-box;
}

    .headerCell input {
        border-radius: 0;
        color: black;
    }

.dataCell {
    cursor: pointer;
    border: 1px solid black !important;
    background-clip: padding-box;
}

.articleBox {
    border: 1px solid black;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
}

.lockedCell {
    background-color: #ccffdc;
    font-weight: bold;
    border: 1px solid black !important;
    background-clip: padding-box;
}

.clickedCell {
    border: 3px solid black !important;
    background-color: #ffff99;
    background-clip: padding-box;
}

.matrixAnswer {
    font-weight: bold;
    color: orange;
}

.signalingWordAnswerLi {
}

.recallAnswerLi {
    margin-bottom: 20px;
    /*border: 1px solid black;*/
    padding: 5px;
}

.answerText {
    font-size: 15px;
    font-weight: bold;
}

/* Hiding the checkbox, but allowing it to be focused */
.badgebox {
    opacity: 0;
}

    .badgebox + .badge {
        /* Move the check mark away when unchecked */
        text-indent: -999999px;
        /* Makes the badge's width stay the same checked and unchecked */
        width: 27px;
    }

    .badgebox:focus + .badge {
        /* Set something to make the badge looks focused */
        /* This really depends on the application, in my case it was: */
        /* Adding a light border */
        box-shadow: inset 0px 0px 5px;
        /* Taking the difference out of the padding */
    }

    .badgebox:checked + .badge {
        /* Move the check mark back when checked */
        text-indent: 0;
    }

.bottom_buttons {
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
}

.no-bullets {
    list-style-type: none;
}

.canclick {
    cursor: pointer;
}

.wrongAnswer {
    background: #E3000659;
}

.tableHeaderRow {
    text-align: center;
    font-size: 16px;
    background-color: #1b1e24;
    color: #8b91a0;
}

.lineBreakText {
    white-space: pre-wrap;
}

.funkyradio-primary:focus, .focusOutline:focus {
    outline: 2px solid #888;
}


:focus {
    outline: none;
}

.row {
    margin-right: 0;
    margin-left: 0;
}
/* 
    Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
    A quick fix is to change .side-menu to 

    -> position:absolute
    
    and uncomment the code below.
    You also need to uncomment 
    
    -> <div class="absolute-wrapper"> </div> in the html file

    you also need to tweek the animation. Just uncomment the code in that section
    --------------------------------------------------------------------------------------------------------------------
    If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
    This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/
/*.absolute-wrapper{
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #f8f8f8;
    border-right: 1px solid #e7e7e7;
}*/

.side-menu {
    position: fixed;
    width: 300px;
    height: 100%;
    background-color: #043e61;
    border-right: 1px solid #e7e7e7;
    z-index: 10000;
}


    .side-menu .navbar {
        border: none;
        background-color: #043e61;
    }

    .side-menu .navbar-header {
        width: 100%;
        border-bottom: 1px solid #e7e7e7;
    }

    .side-menu .navbar-nav .active a {
        background-color: #fff;
        margin-right: -1px;
        border-right: 5px solid #043e61;
        color: #043e61;
    }

    .side-menu .navbar-nav li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #e7e7e7;
    }

        .side-menu .navbar-nav li a {
            padding: 15px;
            color: #fff;
            background: #043e61;
        }

            .side-menu .navbar-nav li a:hover {
                background: #fff;
                color: #043e61;
            }

            .side-menu .navbar-nav li a .glyphicon {
                padding-right: 10px;
            }

    .side-menu #dropdown {
        border: 0;
        margin-bottom: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        color: #fff;
    }

        .side-menu #dropdown .caret {
            float: right;
            margin: 9px 5px 0;
        }

        .side-menu #dropdown .indicator {
            float: right;
        }

        .side-menu #dropdown > a {
            border-bottom: 1px solid #e7e7e7;
        }

        .side-menu #dropdown .panel-body {
            padding: 0;
            background-color: #2a6c94;
            max-height: 500px;
            overflow-y: auto;
            overflow-x: hidden;
        }

            .side-menu #dropdown .panel-body .navbar-nav {
                width: 100%;
            }

                .side-menu #dropdown .panel-body .navbar-nav li {
                    padding-left: 15px;
                    border-bottom: 1px solid #e7e7e7;
                    /*background: #043e61;*/
                }

. /*side-menu #dropdown .panel-body .navbar-nav li:last-child {
                        border-bottom: none;
                    }*/
.side-menu #dropdown .panel-body .panel > a {
    margin-left: -20px;
    padding-left: 35px;
}

.side-menu #dropdown .panel-body .panel-body {
    margin-left: -15px;
}

    .side-menu #dropdown .panel-body .panel-body li {
        padding-left: 30px;
    }

        .side-menu #dropdown .panel-body .panel-body li:last-child {
            border-bottom: 1px solid #e7e7e7;
        }

.side-menu #search-trigger {
    background-color: #f3f3f3;
    border: 0;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px 18px;
}

.side-menu .brand-name-wrapper {
    min-height: 50px;
    background: #2a6c94;
    border-bottom: 3px solid #043e61;
    height: 115px;
    color: #fff;
}

    .side-menu .brand-name-wrapper .navbar-brand {
        color: #fff;
        display: block;
    }

.side-menu #search {
    position: relative;
    z-index: 1000;
}

    .side-menu #search .panel-body {
        padding: 0;
    }

        .side-menu #search .panel-body .navbar-form {
            padding: 0;
            padding-right: 50px;
            width: 100%;
            margin: 0;
            position: relative;
            border-top: 1px solid #e7e7e7;
        }

            .side-menu #search .panel-body .navbar-form .form-group {
                width: 100%;
                position: relative;
            }

            .side-menu #search .panel-body .navbar-form input {
                border: 0;
                border-radius: 0;
                box-shadow: none;
                width: 100%;
                height: 50px;
            }

            .side-menu #search .panel-body .navbar-form .btn {
                position: absolute;
                right: 0;
                top: 0;
                border: 0;
                border-radius: 0;
                background-color: #f3f3f3;
                padding: 15px 18px;
            }
/* Main body section */
.side-body {
    margin-left: 310px;
    background: #fff;
}
/* small screen */
@media only screen and (max-width: 768px) {
    .side-menu {
        position: relative;
        width: 100%;
        height: 0;
        border-right: 0;
        border-bottom: 1px solid #e7e7e7;
    }

        .side-menu .brand-name-wrapper .navbar-brand {
            display: inline-block;
        }

        .side-menu .brand-name-wrapper {
            display: none;
        }

    /* Slide in animation */
    @-moz-keyframes slidein {
        0% {
            left: -300px;
        }

        100% {
            left: 10px;
        }
    }

    @-webkit-keyframes slidein {
        0% {
            left: -300px;
        }

        100% {
            left: 10px;
        }
    }

    @keyframes slidein {
        0% {
            left: -300px;
        }

        100% {
            left: 10px;
        }
    }

    @-moz-keyframes slideout {
        0% {
            left: 0;
        }

        100% {
            left: -300px;
        }
    }

    @-webkit-keyframes slideout {
        0% {
            left: 0;
        }

        100% {
            left: -300px;
        }
    }

    @keyframes slideout {
        0% {
            left: 0;
        }

        100% {
            left: -300px;
        }
    }
    /* Slide side menu*/
    /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
    .side-menu-container > .navbar-nav.slide-in {
        -moz-animation: slidein 300ms forwards;
        -o-animation: slidein 300ms forwards;
        -webkit-animation: slidein 300ms forwards;
        animation: slidein 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .side-menu-container > .navbar-nav {
        /* Add position:absolute for scrollable menu -> see top comment */
        position: fixed;
        left: -300px;
        width: 300px;
        top: 43px;
        height: 100%;
        border-right: 1px solid #e7e7e7;
        /*background-color: #f8f8f8;*/
        -moz-animation: slideout 300ms forwards;
        -o-animation: slideout 300ms forwards;
        -webkit-animation: slideout 300ms forwards;
        animation: slideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /* Uncomment for scrollable menu -> see top comment */
    /*.absolute-wrapper{
        width:285px;
        -moz-animation: slideout 300ms forwards;
        -o-animation: slideout 300ms forwards;
        -webkit-animation: slideout 300ms forwards;
        animation: slideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }*/
    @-moz-keyframes bodyslidein {
        0% {
            left: 0;
        }

        100% {
            left: 300px;
        }
    }

    @-webkit-keyframes bodyslidein {
        0% {
            left: 0;
        }

        100% {
            left: 300px;
        }
    }

    @keyframes bodyslidein {
        0% {
            left: 0;
        }

        100% {
            left: 300px;
        }
    }

    @-moz-keyframes bodyslideout {
        0% {
            left: 300px;
        }

        100% {
            left: 0;
        }
    }

    @-webkit-keyframes bodyslideout {
        0% {
            left: 300px;
        }

        100% {
            left: 0;
        }
    }

    @keyframes bodyslideout {
        0% {
            left: 300px;
        }

        100% {
            left: 0;
        }
    }
    /* Slide side body*/
    .side-body {
        margin-left: 5px;
        position: relative;
        -moz-animation: bodyslideout 300ms forwards;
        -o-animation: bodyslideout 300ms forwards;
        -webkit-animation: bodyslideout 300ms forwards;
        animation: bodyslideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .body-slide-in {
        -moz-animation: bodyslidein 300ms forwards;
        -o-animation: bodyslidein 300ms forwards;
        -webkit-animation: bodyslidein 300ms forwards;
        animation: bodyslidein 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    /* Hamburger */
    .navbar-toggle {
        border: 0;
        float: left;
        padding: 18px;
        margin: 0;
        border-radius: 0;
        background-color: #f3f3f3;
    }
    /* Search */
    #search .panel-body .navbar-form {
        border-bottom: 0;
    }

        #search .panel-body .navbar-form .form-group {
            margin: 0;
        }

    .navbar-header {
        /* this is probably redundant */
        position: fixed;
        z-index: 3;
        background-color: #043e61;
    }
    /* Dropdown tweek */
    #dropdown .panel-body .navbar-nav {
        margin: 0;
    }
}

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-text {
    color: #fff !important;
}

.navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-text {
    color: #043e61 !important;
}


    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-text:hover {
        color: #043e61 !important;
    }

#logOffBtn a {
    color: #fff;
}

.reviewed {
    color: #006600;
}

.notreviewed {
    color: #B30000;
    font-weight: bold;
}

.linkColor {
    color: #24557F !important;
}

.alert-info {
    color: #24476A !important;
}

.alert-warning {
    color: #685027 !important;
}

.chosen-single {
    background: initial !important;
    background-color: white !important;
    box-shadow: initial !important;
    height: 32px !important;
    line-height: 32px !important;
    margin: 0 .25rem !important;
    min-width: 125px !important;
    border: 1px solid #999;
    border-left: 3px solid;
    border-radius: 5px !important;
}

.chosen-container-active .chosen-single {
    border-color: #66afe9;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6) !important;
}

.chosen-container-single .chosen-single div {
    padding-top: 5px !important;
}

.clearDistrict {
    background-color: white;
    border: none;
}

    .clearDistrict:focus {
        outline: dotted;
    }

.sortablePhrase {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid black;
    margin-top: 5px;
    background-color: lightgray;
}

/* THIS IS THE GOLD COLOR BOXES TYPICALLY SEEN BY STUDENT AS INSTRUCTIONS */
.goldBox {
    background-color: #F5C83A;
    border-radius: 6px;
    border: 4px solid #F5C83A;
    box-shadow: 5px 10px 18px rgba(0,0,0,0.75);
    margin-bottom: 20px;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

/* ------------------------------------------------------------*/
/* CSS RELATED TO BOTH TREE TYPES FOR BOTH ADMIN AND STUDENTS */
/* ------------------------------------------------------------*/
.treeButton {
    font-weight: bold;
    font-size: calc(14px + 0.1vw);
    font-variant-caps: all-petite-caps;
    padding-left: 0;
    padding-right: 0;
}

.treeSelected {
    color: black !important;
    transform: scale(1.20);
    transition: 0.5s;
    border: 1px solid white;
}
.treeTopicText {
    color: aquamarine;
}

.treeReasonText {
    color: burlywood;
}

.treeExplanationText {
    color: sandybrown;
}

.treeEndingText {
    color: dodgerblue;
}

.treeTopic {
    background-color: rgba(228, 177, 40, 0.50);
    color: rgba(0, 0, 0, 0.75);
}

.treeReason {
    background-color: rgba(30, 144, 255, 0.50);
    color: rgba(0, 0, 0, 0.75);
}

.treeExplanation {
    background-color: rgba(200, 80, 72, 0.50);
    color: rgba(0, 0, 0, 0.75);
}

.treeEnding {
    background-color: rgba(152, 153, 51, 0.50);
    color: rgba(0, 0, 0, 0.75);
}

.treeDouble {
    background-color: rgba(147, 112, 219, 0.50);
    color: rgba(0, 0, 0, 0.75);
}

.treeReasonAndExplanation {
    background-color: rgba(147, 112, 219, 0.50);
    color: rgba(0, 0, 0, 0.75);
    width: 100%;
}

.treeClick.selected {
    color: blue !important;
    font-weight: bold;
}

.canClick {
    cursor: pointer;
}

.noSelect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.cancelTree {
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
    color: black;
}

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';
    content: "\f077";
    float: right; /* adjust as needed */
    color: gray; /* adjust as needed */
    padding-right: 10px;
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    font-family: 'FontAwesome';
    content: "\f078";
    color: gray; /* adjust as needed */
    padding-right: 10px;
}

.bootbox.modal {
    z-index: 100000;
}



/* ADA Compliance */
.alert {
    color: black;
}

.required-asterisk {
    color: #e31c3d;
}

.required-field input:invalid {
    border-left-color: #e31c3d;
}

.required-field select:invalid {
    border-left-color: #e31c3d;
}

.required-field textarea:invalid {
    border-left-color: #e31c3d;
}

a.accessibility-link {
    color: #205493;
}

    a.accessibility-link:hover {
        color: #0071bc;
    }

.btn-success {
    background-color: #2e8540 !important;
}

    .btn-success:hover {
        background-color: #287237 !important;
    }


.btn-info {
    background-color: #3E5C6F !important;
}

    .btn-info:hover {
        background-color: #354E5F !important;
    }

.skip-to-content-link {
    z-index: 10000;
    position: absolute;
    background-color: #c79121;
    border-radius: 5px;
    padding: 8px;
    top: -40px;
    left: 0px;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
}

    .skip-to-content-link:focus {
        position: absolute;
        left: 0px;
        top: 0px;
        color: white;
        outline-color: transparent;
        -webkit-transition: top .1s ease-in;
        transition: top .1s ease-in;
    }

#pageVideo, #toolboxVideo, #previewVideo {
    width: 65%;
    border: 2px solid black;
    border-radius: 5px;
}

.videoCenterItems {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.videoOverlayContentSize {
    width: 200px;
    height: 200px;
}

#videoPlayButton g, #toolbox-videoPlayButton g {
    transform: translate(10px,190px) scale(0.07,-0.07);
}

#videoPlayButton path, #toolbox-videoPlayButton path {
    fill: white;
    opacity: 0.25;
    stroke: black;
    stroke-width: 20px;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 50px black);
}

#timerContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    text-align: center;
    height: 32px;
    padding: 0px 12px;
    border: 2px solid #A9A9A9;
    border-radius: 6px;
    font-size: 14px;
}

.padding-2 {
    padding-right: 2px;
    padding-left: 2px;
}

.rounded-tab {
    font-family: Montserrat, sans-serif;
    border-radius: 6px 6px 0 0 !important;
}

a:focus {
    outline: none;
}

.disabled {
    opacity: 0.1;
    pointer-events: none;
}