/* Minification failed. Returning unminified contents.
(5220,27): run-time error CSS1035: Expected colon, found '{'
 */
/***
*   Grid.Mvc stylesheet http://gridmvc.codeplex.com/
*   This file contains default styles for Grid.Mvc.
*/


/* Grid */

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

table.grid-table {
    margin: 0;
}

table.grid-table .grid-wrap {
    padding: 0;
    position: relative;
}

table.grid-table .grid-empty-text {
    color: #666;
}


/* Grid headers */

table.grid-table .grid-header {
    position: relative;
}

table.grid-table .grid-header .sorted-asc .grid-sort-arrow:after {
    content: " \2193";
}

table.grid-table .grid-header .sorted-desc .grid-sort-arrow:after {
    content: " \2191";
}

table.grid-table .grid-header > .grid-header-title {
    width: 100%;
    margin-right: 15px;
}


/* Grid body */

.class-grid-table table td {
    max-width: 58px;
}

table.grid-table tr.grid-row-selected td {
    background: #25A9E0 !important;
    color: #ffffff;
}

table.grid-table tr.grid-row-selected .btn {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: #25A9E0 !important;
}

table.grid-table tr.grid-row-selected .btn:hover {
    background: #ffffff !important;
    color: #25A9E0 !important;
}

/* Grid filtering */

input.grid-filter-input {
    padding: 4px;
    font-size: 13px;
}

table.grid-table .grid-filter {
    position: relative;
    margin-top: 2px;
    float: right;
    width: 10px;
    height: 12px;
}

table.grid-table .grid-filter-btn {
    cursor: pointer;
    display: block;
    width: 10px;
    height: 12px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat;
}

table.grid-table .grid-filter-btn.filtered {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat;
}

table.grid-table .grid-filter-buttons {
    padding: 0;
}

table.grid-table .grid-filter-datepicker {
    font-size: 12px;
}

table.grid-table .grid-filter-datepicker table td {
    padding: 1px!important;
}

table.grid-table .grid-filter-datepicker .ui-datepicker {
    width: auto;
}

table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear {
    white-space: nowrap;
    padding-left: 23px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg==');
    background-position: 3px center;
    background-repeat: no-repeat;
}

table.grid-table .grid-filter-choose.choose-selected {
    background-color: white!important;
    cursor: default;
    color: #999;
}

table.grid-table .grid-popup-additional {
    padding: 3px 0 0 0;
}


/* POP-UP */

.grid-dropdown {
    font-weight: normal;
    left: -102px;
    top: 16px!important;
    min-width: 180px;
}

.grid-dropdown-arrow {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat;
    height: 8px;
    left: 99px;
    position: absolute;
    top: -8px;
    width: 14px;
}

.grid-dropdown-inner {
    padding: 5px 7px;
}

.grid-dropdown ul.menu-list {
    list-style-type: none;
    margin: 3px 0 0 0;
    padding: 0;
}

.grid-dropdown ul.menu-list li a {
    text-decoration: none;
    background-position: 6px center;
    background-repeat: no-repeat;
    display: block;
    padding: 4px 5px;
}

.grid-dropdown ul.menu-list li a:hover {
    background-color: #EEE;
    text-decoration: none;
}

.thicker-bottom-border {
    border-bottom: 4px solid #2e6da4 !important;
}

*,
*:focus,
*:active {
    outline: none!important;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

body {
    min-height: 100%;
    background-color: #F5F5F5;
    overflow-x: hidden;
    overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 700 !important;
    color: black;
}

header {
    margin-bottom: 10px;
}

.navbar-logo {
    height: 34px;
    margin-top: 9px;
    margin-left: -16px;
}

.navbar {
    line-height: 34px;
}

.navbar-default {
    margin: 0 auto;
    background-color: #FFFFFF;
    border: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: 0;
}

.navbar-container,
.steps-footer-container {
    max-width: 1200px;
    margin: 0 auto;    
}

.nav-tabs {
    margin: 11px auto 0;
    float: left;
    border-bottom: none;
    width: max-content;
}

.ask-tempo-span {
    background: linear-gradient(90deg, rgba(15,99,150,1) 0%, rgba(147,120,250,1) 50%, rgba(154,50,242,1) 100%);
    color: white !important;
    border-radius: 5px;
    padding: 10px 20px;
}

.ask-tempo-link {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.ask-tempo-icon{
    padding-left: 5px;
}

.logged-user {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
}

.nav-tabs > li > a {
    margin-right: 0 !important;
    padding: 4px 24px 16px;
    font-weight: 400 !important;
    border: none !important;
    background: transparent !important;
    color: #90a4ae !important;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 28px 0 -9px transparent;
    height: 4px;
}

    .nav-tabs > li > a:hover {
        border: none !important;
        background: transparent !important;
        color: #37474F !important;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 27px 0 -8px #37474F;
        height: 4px;
        font-weight: 900 !important;
    }

        .nav-tabs>li>a:hover,
        .nav-tabs>li>a:focus {
            background: #fff !important;
        }

    .nav-tabs>li.active>a {
        border: none !important;
        background: transparent !important;
        color: #000 !important;
        border-radius: 10px 10px 0 0;
        box-shadow: 0 25px 0 -6px #25A9E0;
        height: 4px;
        font-weight: 900 !important;
        transition: 0.2s all;
    }

.nav-tabs>li.active>a:hover {
    border: none;
}

.navbar .navbar-form {
    margin-left: 0px;
    margin-right: 0px;
    display: inline;
    cursor: pointer;
}

.navbar-username-container {
    color: #404040;
    text-decoration: none;
    margin: 0 0 0 32px;
    display: inline;
    cursor: pointer;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    font-size: .8em;
    z-index: 10;
    right: 0px;
}

.navbar-username {
    color: #404040;
    letter-spacing: .2px;
    margin: 0px;
    padding: 0px 20px;
    white-space: nowrap;
    text-align: left;
    display: block;
}

a.navbar-username:hover {
    background-color: #DDD;
    color: #404040;
}

.navbar-logout {
    position: absolute;
    right: 0;
    top: 3px;
}

.navbar-btn {
    padding: 3px 14px !important;
    text-transform: uppercase;
    font-size: 13px;
    margin: 6px -4px 0 -15px;
    color: #00C853 !important;
    background: transparent !important;
}

.grid-header-title {
    color: #808080;
}
.grid-header-title a:hover {
    border: none !important;
    background: transparent !important;
    color: #37474F !important;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 27px 0 -8px #37474F;
    height: 4px;
    font-weight: 900 !important;
    cursor: pointer;
    text-decoration: none;
    visibility: visible;
    border: none;
}
.grid-header-title:hover .grid-header-title {
    visibility:visible;
}
.renew {
    padding: 3px 14px !important;
    text-transform: uppercase;
    font-size: 13px;
    margin: 6px -4px 0 -15px;
    color: #D50000 !important;
    background: transparent !important;
}

    .renew:hover {
        background: #D50000 !important;
        color: #fff !important;
        border-color: #D50000 !important;
    }

.navbar-btn:hover {
    background: #388E3C !important;
    color: #fff !important;
}

.navbar-brand {
    padding: 0;
}

    .navbar-brand img {
        width: 40px;
    }

.steps-list-container {
    margin: 18px auto 32px;
    height: 48px;
    vertical-align: middle;
    padding: 12px 0;
}
.no-padding-left {
    padding-left: 0px !important;
}
.no-padding-right {
    padding-right: 0px !important;
}
.padding-right-7 {
    padding-right: 7px !important;
}
.no-attempts {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
}
.restricted {
    cursor: not-allowed !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}
.steps-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

    .steps-list>li {
        float: left;
        width: 32.6%;
        margin: 0 1% 0 0;
        border-bottom: 2px solid #B3B3B3;
        text-align: center;
        padding-bottom: 18px;
    }

.steps-list > li:last-child {
    margin: 0 0 0 0;
}

span.step-name {
    color: #37474F !important;
    font-weight: 800 !important;
    position: relative;
    top: 2px;
    left: 8px;
    text-align: left;
}

.steps-list>li.active>.step-name {
    background: transparent !important;
    color: #25A8DF !important;
    font-weight: 900 !important;
}

.steps-list > li.active {
    border-bottom: 2px solid #25A8DF;
}

.steps-list li.active ~ li {
    border-bottom: 2px solid #e7e7e7;
}

.steps-list li.active ~ li span.step-name {
    color: #37474F !important;
    font-weight: 200 !important;
    position: relative;
    top: 2px;
    left: 8px;
    text-align: left;
}

.steps-number {
    display: inline-block;
    height: 24px;
    width: 24px;
    line-height: 24px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background: #37474F;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    padding-right: 1px;
    font-weight: 800 !important;
}

.steps-list>li.active>.steps-number {
    background: #25A8DF;
    color: #fff;
    font-weight: 900 !important;
}

.steps-list li.active ~ li span.steps-number {
    background: #cfd8dc;
    color: #37474f;
    font-weight: 200 !important;
}

div input::placeholder, div textarea::placeholder {
    color: #CCC !important;
    font-weight: 200 !important
}


.steps-form input {
    background: transparent !important;
    border: none;
    color: #37474F;
    font-weight: 700;
    border-bottom: 2px dashed #B0BEC5;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    padding: 0;
    outline: 0 !important;
    box-shadow: none !important;
}

    .steps-form input:focus {
        border-color: #25A9E0;
    }

.steps-form>input.valid {
    border-bottom: 4px solid #00C853 !important;
}

.steps-form textarea {
    border: 2px solid #f5f5f5;
}

    .steps-form textarea:focus {
        border: 2px solid #37474F !important;
    }

    .steps-form textarea,
    .steps-form textarea:focus {
        background: #F5F5F5 !important;
        box-shadow: none;
        resize: none;
        height: 100px;
        font-size: 16px;
        overflow-y: auto;
        padding: 12px 20px;
    }

.start-end-row {
    margin-left: 26%;
}

.end-text {
    margin-left: 37%;
}

.start-text {
    margin-left: -5%;
}

.start-time-input {
    margin-right: 3% !important;
}

.timeline-container {
    float: right;
    margin: 10px -40px 0px 0px !important;
    padding-right: 40px;
    /*margin: 0 6px 0 -6px;*/
}

.date-input {
    width: 20%;
}

.time-input {
    width: 17%;
}

.timeline-container input {
    text-align: center;
    float: left;
    /*margin: 0 1%;*/
}

.timeline-container label {
    float: left !important;
    width: 14px;
}
.timeline-container-timelimit {
    margin-left: -40px;
    padding-right: 40px;
}
    .timeline-container-timelimit input {
        text-align: center;
        float: left;
    }

    .timeline-container-timelimit label {
        float: left !important;
        width: 14px;
    }

.info-container {
    position: relative;
}

.offset-info-container {
    margin-left: -8px;
}

.info-circle {
    position: absolute;
    top: 8px;
}

.info-text {
    position: absolute;
    left: 32px;
    color: #546E7A;
}

#class-nickname {
    margin: 0 0 10px 0;
}

#time-limit-extended {
    float: left;
    margin-left: 2%;
}

    #time-limit-extended label {
        float: left;
        width: 120px;
        margin: 6px 0px 6px 0px;
        border-radius: 4px;
        overflow: auto;
        cursor: pointer;
    }

        #time-limit-extended label span {
            text-align: center;
            padding: 6px 0px;
            display: block;
            font-size: 16px;
        }

        #time-limit-extended label input {
            position: absolute;
            top: -20px;
        }

    #time-limit-extended input:checked + span {
        background-color: #25a9e0;
        color: #ffffff;
    }

    #time-limit-extended .one, #time-limit-extended .two {
        margin-right: 5px;
    }

    #time-limit-extended .one, #time-limit-extended .two, #time-limit-extended .three {
        background-color: #e7f6fd;
        color: #25a9e0;
    }

#audio-video-select {
    float: left;
    margin-left: -18px;
}
#radio-button-select label {
    float: left;
    width: 120px;
    margin: 4px 0px 4px 0px;
    overflow: auto;
    cursor: pointer;
}
        #radio-button-select label span {
            text-align: left;
            padding: 8px 0px;
            display: block;
        }

        #radio-button-select label input {
            position: absolute;
            left: -9999px;
        }
    #radio-button-select input:checked + span img {
        background: url('images/ch-box-1-hov.svg') no-repeat;
        height: 20px;
        width: 20px;
        padding: 10px;
    }
    #radio-button-select img:hover {
        background: url('images/ch-box-1-hov.svg') no-repeat;
        padding: 10px;
    }
#radio-button-select {
    float: left;
    margin-left: -8px;
    margin-top:4px;
}

    #radio-button-select.screen-recording-type {
        margin-top: 0px;
    }

#radio-button-select.screen-recording-type label {
        width: 250px;
        margin: 0px;
}

#radio-button-select.screen-recording-type label span {
        padding: 0px 0px 9px 0px;
    }

#audio-video-select label {
    float: left;
    width: 120px;
    margin: 6px 0px 6px 0px;
    border-radius: 4px;
    overflow: auto;
    cursor: pointer;
}

        #audio-video-select label span {
            text-align:center;
            padding: 10px 0px;
            display:block;
        }

        #audio-video-select label input {
            position:absolute;
            top:-20px;
        }

    #audio-video-select input:checked + span {
        background-color:#00C853;
        color:#ffffff;
    }
#audio-video-select .one, #audio-video-select .two{
    margin-right: 5px;
}
#audio-video-select .one, #audio-video-select .two, #audio-video-select .three {
    background-color: #E3F9EC;
    color: #00C853;
}

#audio-video-select-question label {
    float: left;
    width: 130px;
    margin: 6px 0px 6px 0px;
    border-radius: 4px;
    overflow: auto;
    cursor: pointer;
}

    #audio-video-select-question label span {
        text-align: center;
        padding: 10px 0px;
        display: block;
    }

    #audio-video-select-question label input {
        position: absolute;
        top: -20px;
    }

#audio-video-select-question input:checked + span {
    background-color: #25A9E0;
    color: #ffffff;
}

#audio-video-select-question .one {
    margin-left: 35px;
}

#audio-video-select-question .one, #audio-video-select-question .two, #audio-video-select-question .three {
    margin-right: 10px;
}

#audio-video-select-question .one, #audio-video-select-question .two, #audio-video-select-question .three, #audio-video-select-question .four,
#audio-video-select-question .five, #audio-video-select-question .six, #audio-video-select-question .seven {
    background-color: #E7F6FD;
    color: #25A9E0;
}

#audio-video-select-question .five {
    width: 182px;
    margin: -3px 10px 0 35px;
}

#audio-video-select-question .four {
    width: 145px;
}

#audio-video-select-question .six {
    width: 170px;
    margin: -3px 10px 0 0;
}

#audio-video-select-question .seven {
    width: 179px;
    margin: -3px 10px 0 0;
}

#group-individual {
    float: left;
    margin-left: -18px;
}
#group-individual label {
    float: left;
    width: 183px;
    margin: 6px 0px 6px 0px;
    border-radius: 4px;
    overflow: auto;
    cursor: pointer;
}

    #group-individual label span {
        text-align: center;
        padding: 10px 0px;
        display: block;
    }

    #group-individual label input {
        position: absolute;
        top: -20px;
    }

#group-individual input:checked + span {
    background-color: #25A9E0;
    color: #ffffff;
}

#group-individual .group
{
    margin-right:5px;
}
#group-individual .group, #group-individual .individual {
    background-color: #E7F6FD;
    color: #25A9E0;
}

.question-action-btn svg {
    fill: #fff;
    width: 20px;
    float: left;
    position: relative;
    top: 0px;
    left: -6px;
}

.question-action-btn:hover svg,.question-action-btn:focus svg {
    fill: #25A9E0;
}

.class-title, .assessment-title {
    text-transform: capitalize;
}

    .class-title a, .assessment-title a {
        color: #25A9E0;
        font-weight: 800 !important;
        padding-bottom: 3px;
        border-bottom: 1px solid #B0BEC5;
    }

        .class-title a:hover, .assessment-title a:hover {
            border-bottom: 3px solid #25A9E0;
        }

.assessment-title {
    float: right;
}

.question-form-btn {
    margin: 0 8px 0 0;
}

    .question-form-btn .btn {
        width: 100px;
    }

.limit-form label {
    float: left !important;
    text-align: left !important;
}

.copy-class-section {
    position: absolute;
    top: 78px;
    right: 40px;
    max-width: 240px;
}

.view-link-only {
    border: 2px solid #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none;
    color: #37474F;
    margin-left: 1px
}

.copy-btn {
    height: 34px;
    padding: 4px 12px !important;
    border: 2px solid #25A9E0 !important;
    background: #25A9E0;
    color: #ffffff;
}

    .copy-btn:hover,
    .copy-btn:focus {
        border-color: #25A9E0 !important;
        background: #ffffff;
        color: #25A9E0 !important;
    }

.detail-page-table {
    clear: both;
    margin-top: 16px;
}

.panel {
    box-shadow: none;
    border: none;
    border-radius: 6px !important;
    text-align: center;
    display: inline-block;
    margin: 0 auto !important;
    width: 600px;
}

.panel-group .panel+.panel {
    margin-top: 0;
}

.panel-group {
    border-radius: 8px;
    text-align: center;
    margin: 50px 0 80px;
}

    .panel-group>.panel:last-child .panel-heading {
        background: #ECEFF1 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .panel-group>.panel:last-child .panel-title {
        color: #37474F;
    }

.panel-heading {
    background: #E8F5FB !important;
    border: none !important;
}

.panel-subheading h5 {
    position: relative;
    overflow: hidden;
    color: #90A4AE;
    text-transform: uppercase;
    margin: 6px auto 22px;
}

    .panel-subheading h5 span {
        display: inline-block;
        vertical-align: baseline;
        zoom: 1;
        position: relative;
        padding: 0 16px;
        font-weight: 700 !important;
        font-size: 16px;
    }

        .panel-subheading h5 span:before {
            right: 90%;
        }

        .panel-subheading h5 span:after {
            left: 90%;
        }

        .panel-subheading h5 span:before,
        .panel-subheading h5 span:after {
            content: '';
            display: block;
            width: 10px;
            position: absolute;
            top: 8px;
            border-top: 2px solid #90A4AE;
        }

.panel-title {
    color: #fff;
}

    .panel-title a,
    .panel-title a:hover {
        text-decoration: none !important;
    }

.panel-body {
    border-top: none !important;
}

.panel-body-container {
    max-width: 1100px;
    margin: 0 auto;
}
    .panel-body-container .class-form .absentStudentsDiv label {
        float: left !important;
        text-align: left !important;
        font-size: 16px;
    }
    .panel-body-container .class-form label {
        float: right;
        text-align: right;
        font-size: 16px;
    }

.class-form {
    margin: 24px auto 0;
}

    .class-form>label {
        font-size: 18px;
        margin-right: -18px;
        margin-top: -4px !important;
    }

.upload-box {
    height: 60px;
    width: 60px;
    border: 2px #B0BEC5;
    border-radius: 2px;
    background: #fff;
    float: left;
    margin-top: -15px;
    padding: 0;
    position: relative;
    z-index: 10;
}

    .upload-box:hover {
        background: #25A9E0;
        border: 2px #ffffff;
    }

        .upload-box:hover svg {
            fill: #ffffff;
        }

    .upload-box svg {
        height: 32px;
        fill: #25A9E0;
    }

span.upload-image-name {
    font-size: 11px;
}

.img-upload-preview {
    width: 60px;
    position: absolute;
    top: -15px;
    left: 15px;
    z-index: 12;
    background: #ffffff;
    border-radius: 2px;
}

.steps-footer {
    width: 100%;
    background: #fff;
    height: 60px;
    position: sticky;
    bottom: 0;
    left: 0;
    box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.footer-btn-container {
    position: relative;
    float: right;
    right: 0;
    top: 10px;
    margin-right: 30px;
    display: inline-flex !important;
}

    .footer-btn-container a,
    .footer-btn-container input {
        width: 160px;
    }


/* styles for validation helpers */

.error {
    color: #e80c4d;
}

.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border-bottom: 4px solid #D50000;
    color: #D50000;
}

select.input-validation-error {
    border: 2px solid #D50000;
    color: #D50000;
}

    input[type="text"].input-validation-error:focus,
    input[type="text"].required.error,
    input[type="password"].input-validation-error:focus,
    input[type="email"].input-validation-error:focus,
    select.input-validation-error:focus,
    select.required.error:focus {
        border-bottom: 4px solid #D50000;
        color: #D50000;
        outline: 0;
    }

[data-val-required] {
    background-color: lightgoldenrodyellow!important;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul li {
    display: inline-block !important;
    background-color: #D50000;
    color: white;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
    margin-right: 19px;
    font-weight: 100;
    margin-left: -23px;
    padding: 10px;
}

/* end of styles for validation helpers */

/* styles for tooltips */

.tooltip {
    position: relative;
    display: block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: #28b6e2;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px 10px;
    position: absolute;
    /*z-index: 0;*/
    bottom: 70%;
    left: 8%;
    width: max-content;
    /*margin-left: -60px;*/
     /* Fade in tooltip - takes 1 second to go from 0% to 100% opacity */ 
    opacity: 0;
    transition: opacity 1s;
}

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
        margin-left: -5px;
    }

/* end of styles for tooltips */

/* styles for delete student tooltips */

.delete-student-tooltip {
    position: relative;
    display: block;
}

    .delete-student-tooltip .delete-student-tooltiptext {
        visibility: hidden;
        background-color: #28b6e2;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 10px 10px;
        position: absolute;
        bottom: 70%;
        left: 8%;
        width: 200px;
        opacity: 0;
        transition: opacity 1s;
    }

    .delete-student-tooltip:hover .delete-student-tooltiptext {
        visibility: visible;
        opacity: 1;
        margin-left: -5px;
    }

/* end of styles for tooltips */
.beta {
    width: 37px;
    height: 15px;
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 11px;
    line-height: 11px;
    display: inline-grid;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    border-radius: 2px;
    background: #7874F7;
    top: 8px;
    float: right;
    margin-right: 0px;
    margin-top: -4px;
    margin-bottom: 10px;
    margin-left: 5px;
}

.logo {
    text-align: center;
}

    .logo img {
        margin: 50px 0px 50px 0px;
        text-align: center;
    }

.extempore-container {
    min-height: 100%;
}

#body {
    /*max-width: 1200px;*/
        margin: 0 auto;
    }

    #body .row {
        max-width: 1200px !important;
        margin: 0 auto;
        padding: 3px;
    }
.panel-body-container .row {
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.first-row {
    max-width: 1903px !important;
    background-color: #EBEBEB;
    margin: -10px auto 0 auto;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 7px 10px;
}


.btn[disabled] {
    opacity: 0.5;
}

.btn-success,
.btn-success[disabled] {
    background: #25A9E0;
    border-color: #25A9E0;
    height: 35px;
}

    .btn-success:hover,
    .btn-success:focus {
        color: #ffffff;
        border-color: #388E3C;
        background: #388E3C;
    }

.btn-default,
.btn-default[disabled] {
    border: 2px solid #B0BEC5 !important;
    background: transparent;
    color: #37474F;
    height: 35px;
}

    .btn-default:hover,
    .btn-default:focus {
        background: #B0BEC5;
        color: #37474F;
    }

.btn-primary,
.btn-primary[disabled] {
    color: #ffffff;
    border-color: #25A9E0;
    background: #25A9E0;
}

    .btn-primary:hover,
    .btn-primary:focus {
        color: #25A9E0;
        border-color: #25A9E0;
        background: #fff;
    }

.btn-primary-inverted,
.btn-primary-inverted[disabled] {
    color: #25A9E0;
    border-color: #25A9E0;
    background: #fff;
}

    .btn-primary-inverted:hover,
    .btn-primary-inverted:focus {
        color: #ffffff;
        border-color: #25A9E0;
        background: #25A9E0;
    }

.btn-danger {
    background: #D50000;
    border: 2px solid #D50000;
    color: #fff;
}

    .btn-danger:hover,.btn-danger:focus,.btn-danger:active {
        background: #fff !important;
        border: 2px solid #D50000;
        color: #D50000 !important;
    }
.btnApplyFilter {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 6px 15px !important;
}
#btnApplyFilter {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 8px 15px !important;
    height: 38px !important;
    border-radius: 6px;
}
#btnPublish {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 8px 23px 8px 23px !important;
    margin-left: 20px;
    border-radius: 6px;
    height: 38px !important;
}
#btnSyncGrades {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 8px 23px 8px 23px !important;
    margin-left: 20px;
    border-radius: 6px;
    height: 38px !important;
}
.btnPublish {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 6px 20px !important;
}

.centralize {
    margin: auto !important;
}

#viewRooms {
    width: 115px !important;
    background-color: #56C5F7;
    border-color: #56C5F7;
}

#clearFilter {
    width: 100px;
    min-width: 112px;
}
.delete-row svg {
    fill: #37474F;
    height: 20px;
    width: 20px;
    cursor: pointer;
    border: none !important;
    outline: none !important;
}

    .delete-row svg:hover {
        fill: #D50000;
    }

.copy-row svg {
    fill: #37474F;
    height: 20px;
    width: 20px;
    cursor: pointer;
    border: none !important;
    outline: none !important;
}

    .copy-row svg:hover {
        fill: #D50000;
    }

.btn-group>.btn {
    margin-left: 2px !important;
    font-weight: 300 !important;
    background: #fff;
    border-color: #fff;
    color: #37474F;
    font-weight: 400 !important;
    padding: 6px 11.25px;
}

    .btn-group>.btn:hover {
        background: #90a4ae;
        border-color: #90a4ae;
        color: #fff;
    }

.btn-group>.btn-primary {
    background: #263238;
    border-color: #263238;
    font-weight: 700 !important;
    color: #fff;
    padding: 6px 10px;
}

.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
    margin-left: 0 !important;
}

.title {
    margin-top: 0;
    margin-bottom: 20px;
}

.page-header-title {
    padding: 16px 0 24px;
}

    .page-header-title h2 {
        color: #37474F;
        font-size: 20px;
        margin: 0;
        padding: 8px 0 0 0;
        font-weight: 500;
    }

.top-right-cta-section {
    float: right;
}

    .top-right-cta-section span {
        float: right;
        margin: 0 0 0 4px;
    }

        .top-right-cta-section span>a,
        .top-right-cta-section span>.btn {
            float: none;
        }

.subnav {
    margin-bottom: 20px;
}

.action {
    margin-top: 20px;
    margin-bottom: 10px;
    float: right;
}

.modal-footer {
    margin-top: 0px;
}

#ModalLabel {
    margin-top: 0px;
    margin-bottom: 0px;
}

.last-form {
    margin-bottom: 0px;
}

.well {
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 0px !important;
    min-width: 360px;
}

.dlwide {
    margin: auto;
    width: 90%;
    max-width: 800px;
    overflow: auto;
}

/* Keep footer visible while allowing modal body scrolling in wide dialogs.
   Flex chain: .modal-content → #dialogContent → form → .modal-body / .modal-footer */
.dlwide .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.dlwide #dialogContent {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-height: none;
}

.dlwide #dialogContent > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.dlwide .modal-header {
    flex: 0 0 auto;
}

.dlwide .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.dlwide .modal-body .timeline-scroll-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

.dlwide .modal-body .timeline-scroll-area::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

.dlwide .modal-body .timeline-scroll-area::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.dlwide .modal-body .timeline-scroll-area::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .4);
}

.dlwide .modal-body .timeline-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .6);
}

.dlwide .modal-footer {
    flex: 0 0 auto;
}


.labelnormal {
    font-weight: normal;
}

.required {
    background-color: lightgoldenrodyellow!important;
}


.password {
    background-color: lightgoldenrodyellow!important;
}

.active {
    font-weight: bold;
}

#cke_Instructions,
#cke_Objective {
    height: 300px;
}

#cke_1_contents,
#cke_2_contents {
    height: 255px!important;
}

#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
}

#loadingcontent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingspinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
}

.media {
    z-index: 999;
}

.mdbig {
    width: 90%;
    max-width: 800px;
    overflow: auto;
    height: 80%;
    max-height: 600px;
}

.ui-autocomplete-input {
    z-index: 1511;
}

.ui-menu .ui-menu-item a {
    font-size: 12px;
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1510 !important;
    float: left;
    display: none;
    min-width: 160px;
    width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

.ui-menu-item > a.ui-corner-all {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;
    text-decoration: none;
}

.ui-state-hover,
.ui-state-active {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
}

.datepicker {
    z-index: 1512;
}

.grid-popup-widget .form-group {
    margin-right: 0px;
    margin-left: 0px;
}
.grid-filter {
    display: none;
}

.detailsbut a {
    margin-bottom: 12px;
}

.desctext {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-group.assignment-activation-group {
    margin: 0 0 10px 15px;
}

.checkbox-padding {
    padding-left: 5px;
}

.last-form {
    margin-bottom: 10px;
}

.new-line-word {
    white-space: pre-line;
}

.cssHidden {
    display: none;
}

.hscroll {
    overflow-x: auto
}

input[type="radio"] {
    margin-top: -1px;
    vertical-align: middle;
    visibility: hidden;
}

p,
label,
span,
td,
.grid-cell,
.grid-row-selected,
a {
    font-family: 'Lato', sans-serif;
}
.grid-user-icon {
    background-image:url(images/ui-nouserphoto.svg);
    width:100px
}
#gridUserIcon {
    min-width:300px;
    background-position: 15px;
    background-repeat: no-repeat;
    border-right: 1px outset;
    display: flex;
}

#applyFilter {
    border: 2px solid;
    font-weight: 800 !important;
    border-color: inherit;
    letter-spacing: .25px;
}
.grid-header-title>a {
    font-weight:bold;
}
.btn,
button {
    font-family: 'Lato', sans-serif;
}

.modal-body label {
    font-weight: 700 !important;
}

.modal-body .checkbox label {
    font-weight: 500 !important;
}

.noUnderlineLink {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .noUnderlineLink:hover {
        text-decoration: none;
    }

.grid-mvc {
    min-height: 300px;
}

.table-striped>tbody>tr {
    color: #37474F;
}

    .table-striped>tbody>tr:nth-child(even)>td, .table-striped>tbody>tr:nth-child(even)>th {
        background: #ffffff;
    }

    .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {
        background: #ECEFF1;
    }

.table>thead>tr>th {
    border-bottom: none;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 14px 10px;
    border-top: none !important;
    vertical-align: middle;
}

div [data-gridname="gradingGrid"] .table > tbody > tr > td {
    padding: 14px 6px !important; 
}
.error-message {
    margin-left: -37px;
    display: inline;
    color: red;
    font-size: large;
}

a.touch-target {
    padding:9px;
    margin: -9px;
}

.nobullets {
    list-style-type: none;
    margin-bottom: 0px;
    padding: 0;
}

.popup-hover {
    /*background-color: #ddd!important;*/
    text-decoration:none !important;
}

.remove-hyper-link-descr {
    text-decoration:none !important;
}

.width150 {
    width: 150px !important;
}

.ml--3 {
    margin-left: -3px !important;
}

.ml-17 {
    margin-left: 17px !important;
}

.mt-25 {
    margin-top: 25px !important;
}

.renew-position {
    margin-top: 8px;
    padding-top: 6px !important;
}

.right-side-menu {
    float : right !important;
}

.filter-button {
    margin-left: 5px !important;
}

.filter-container {
    width: 500px;
    height: 500px;
    float: left !important;
}

.header-conatainer {
    margin-top: 70px;
    margin-left: 30px;
}

.no-padding {
    padding: 0px!important;
}

.mt--10 {
    margin-top: -10px;
}

.navigation-title {
    font-size: 32px;
    display: inline-block;
    margin-top: 10px;
}

.navigation-subtitle {
    font-size: 18px;
    display: inline-block;
    margin-top: 15px;
}

#contentUploadedFile, #contentAudio, #contentVideo, #contentYoutubePlayer {
    display: flex;
    justify-content:space-between
}

#btnClosePanel.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    color: #25a8df !important;
    text-shadow: 0 1px 0 #ffffff !important;
    font-size: 37px;
    font-weight: normal;
    opacity: 1;
    margin-top: -12px;
}

#btnClosePanel.close:hover {
    cursor: pointer;
    filter: alpha(opacity=70);
    opacity: .7;
}

.upload-img {
    vertical-align: bottom !important;
}

.ap {
    width: fit-content !important;
    float: left;
}

.img-player {
    background: url('images/upl-normal.svg');
    padding: 44px;
    margin-top: 20px;
}

    .img-player:hover {
        background: url('images/upl-hovered.svg');
    }

.panel-upload-box {
    height: 88px;
    width: 88px;
    border: 2px #B0BEC5;
    border-radius: 2px;
    background: #FFFFFF;
    float: left;
    margin: -25px 0 0 50%;
    padding: 0;
}

.panel-upload-box img{
    max-height:88px;
    max-width:88px;
}
.panel-video-text {
    color: #25A8DF !important;
    font-weight: 900 !important;
    font-size: 18px;
    left: 8px !important;
    position: relative;
}

span.panel-video-text {
    left: 8px !important;
}

span.panel-video-duration {
    font-weight: 600 !important;
    position: absolute;
    margin-top: -15px;
    margin-left: -65px;
}

.panel-footer a {
    cursor: pointer;
    text-decoration: none;
}

.btn-panel {
    margin-right: 30px;
    min-width: 170px;
    min-height: 45px;
    font-size: 16px;
}

.panel-footer {
    padding: 25px 15px !important;
    background-color: #E8F5FB !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    text-align: center !important;
}

.panel-footer:hover {
    background-color: #CFECF8 !important;
    cursor:pointer;
}

.panel-video {
    width: 45%;
    z-index: 1040;
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.panel-video-title {
    color: #25A8DF;
    text-align: center;
}

.panel-iframe-video {
    padding-bottom: 20px;
}

.panel-steps-form input {
    background: transparent !important;
    border: none;
    color: #37474F;
    font-weight: 700;
    border-bottom: 2px dashed #B0BEC5;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    padding: 0;
    outline: 0 !important;
    box-shadow: none !important;
}

.panel-steps-form {
    padding-left: 0px;
    padding-right: 0px;
}

    .panel-steps-form input:focus, .custom-input input:focus {
        border-color: #25A9E0;
    }

    .panel-steps-form > input.valid, .custom-input > input.valid {
        border-bottom: 4px solid #00C853 !important;
    }

    .panel-steps-form textarea:focus, .custom-input textarea:focus {
        border: 2px solid #37474F !important;
    }

    .panel-steps-form textarea, .custom-input textarea,
    .panel-steps-form textarea:focus, .custom-input textarea:focus {
        background: #F5F5F5 !important;
        box-shadow: none;
        resize: none;
        height: 200px;
        font-size: 16px;
        overflow-y: auto;
        padding: 12px 20px;
        border: 2px solid #B0BEC5;
    }
.panel-steps2-form {
    margin-left: -30px;
    padding-right: 40px;
}
.panel-steps2-form input {
    background: transparent !important;
    border: none;
    color: #37474F;
    font-weight: 700;
    border-bottom: 2px dashed #B0BEC5;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    padding: 0;
    outline: 0 !important;
    box-shadow: none !important;
}

.panel-steps2-form input:focus {
        border-color: #25A9E0;
    }

    .panel-steps2-form > input.valid {
        border-bottom: 4px solid #00C853 !important;
    }

    .panel-steps2-form textarea {
        border: 2px solid #f5f5f5;
    }

        .panel-steps2-form textarea:focus {
            border: 2px solid #37474F !important;
        }

.step2-time-input {
    width: 26%;
}

.crop-item {
    display: flex;
    flex-basis: 45%
}

.crop-item > * + * {
    margin-left: 10px;
}

.step2-crop-input {
    width: 40px !important;
    margin-right: 5px;
}
.step2-time-form {
    display: inline-flex;
    padding-top: 18px;
    margin-left: -25px !important;
}

.step2-crop-form {
    display: inline-flex;
    padding-top: 0px;
/*    margin-left: 0px !important;*/
}

.help-tip img:hover{
    background: url('images/icn-help-hovered.svg');
} 

.help-tip:hover p {
    display: block !important;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}

.help-tip p { /* The tooltip */
    display: none !important;
    text-align: left;
    background-color: #28b6e2;
    padding: 10px;
    width: 190px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1111;
}

.panel-btn-delete {
    background-color: #F70908;
    border-color: #F70908;
    color: #ffffff;
    width: 35%;
    height: 45px;
}
    .panel-btn-delete:hover {
        color: #F70908;
        background-color: #fff;
    }

.disableDiv{
    opacity: 0.7;
    pointer-events: none; 
}

.resetRoom {
    opacity: 1 !important;
    pointer-events: all !important;
    padding-left: 52%;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}


.div-help {
    display: inline-block;
    text-align: left;
    margin-left: 4%;
    margin-top: 1%;
}
.div-help-timelimit {
    display: inline-block;
    text-align: left;
    margin-top: 1%;
}
.span-help {
    padding-top: 7px;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 16px;
}

.span-crop {
   
    margin-bottom: 0;
    font-weight: bold;
    font-size: 16px;
}

.label-center {
    text-align: center !important;
    font-size: 16px;
}

.text-padding {
    margin-left: -30px;
    padding-right: 40px;
}

.textarea-padding {
    padding-left: 25px !important;
}

.width30 {
    width:30% !important;
}

.ml--50 {
    margin-left:-50px !important;
}

.panel-line {
    background-color: #E7F6FD;
    height: 30px;
    margin-left: 40px;
    width: 87% !important
}

.panel-line span {
    font-family: 'Lato', sans-serif;
    font-weight: 700 !important;
    color: #25a9e0;
    text-transform: uppercase;
    vertical-align: -webkit-baseline-middle;
}

.pr-20 {
    padding-right: 20px;
}

.panel-link {
    color: #25A8DF;
    font-weight: 600 !important;
    font-size: 16px;
    padding: 8px 32px;
    cursor: pointer;
}

.panel-link:hover {
    color: #25A8DF;
    opacity:28;
}

.padding10 {
    padding: 10px;
}

.pr-45 {
    padding-right:45px;
}

/*.panel-btn-select {
    background-color: #00C853;
    border-color: #00C853;
    color: #ffffff;
    width: 32%;
    height: 45px;
}
*/
.panel-btn-select {
    background-color: #00C853;
    border-color: #00C853;
    color: #ffffff;
    width: 24%;
    height: 45px;
/*    display: inline-flex;
    justify-content: space-around;
    align-items: center;*/
}

.flex-btns {
    display: flex;
    padding: 0px;
    justify-content: space-between;
}

.panel-btn-choice {
    background-color: #00C853;
    border-color: #00C853;
    color: #ffffff;
    width: 28%;
    height: 38px;
}
.panel-btn-save {
    margin-right: 30px;
    min-width: 80px;
    min-height: 45px;
    font-size: 16px;
}
#btnRecordVideo img, #btnRecordAudio img, #btnSelectFileInPnl img {
    margin: 0 8px 0 -30px;
    vertical-align: middle;
    margin-left:0px;
}

#btnInputYoutubeLink i {
    margin: 0 30px 0 -3px;
    vertical-align: middle;
    margin-left: 0px;
}


#btnRecordVideo span{
vertical-align: middle;
}

.panel-btn-select:hover, .panel-btn-select:focus, .panel-btn-choice:hover, .panel-btn-choice:focus {
    background-color: #ffffff;
    border-color: #00C853;
    color: #00C853;
}
.copy-input {
    width: 800px !important;
    text-align: left !important;
    padding: 15px;
    border: 2px solid #B0BEC5 !important;
}
.copy-btn-done {
    position: absolute;
    right: 223px;
    top: 9px;
    padding: 6px;
    width: 150px;
    background-color: #00C853;
    border-color: #00C853;
    color: #ffffff;
   
}

    .copy-btn-done:hover {
        background-color: #ffffff;
        border-color: #00C853;
        color: #00C853;
    }

.timeline-start-end-label {
    margin-bottom: -20px;
    color: #37474F;
    font-weight: 700;
}
.panel-header {
    padding: 25px 15px !important;
    background-color: #24ABE2 !important;
    border-top-right-radius: 6px !important;
    border-top-left-radius: 6px !important;
    text-align: center !important;
    margin-bottom: 15px;
}

.panel-header span {
    color: #fff;
    font-weight: 800 !important;
    font-size: 30px;
}

.login-form-input {
    height: 50px !important;
    border: 1px solid #EBEDEC;
}

.btn-login {
    margin-right: 20px;
    min-width: 120px;
    min-height: 25px !important;
    font-size: 16px;
}

.ml-35 {
    margin-left: 35px;
}

.mb-5 {
    margin-bottom: 5px;
}

.login-line {
    background-color: #BBCECC;
    height: 1px;
}

.login-link {
    color: #24abe2;
    font-weight: 600 !important;
    letter-spacing: .25px;
}

.dot {
    display: inline-block;
    border-radius: 50%;
    width: 50%;
    background-color: #C1CAD1;
    height: 5px;
    width: 5px;
    margin: 0 2px;
}

input#blue-checkbox {
    width: auto;
    opacity: 0.0000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}

.helper {
    position: absolute;
    top: 4px;
    left: -6px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    user-select: none;
    color: #25a9e0;
}

.helper:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 22px;
    height: 22px;
    transition: transform 0.28s ease;
    border-radius: 3px;
    border: 2px solid #25a9e0;
}

.helper:after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    -webkit-transform: rotate(-45deg) scale(0);
    -moz-transform: rotate(-45deg) scale(0);
    -ms-transform: rotate(-45deg) scale(0);
    transform: rotate(-45deg) scale(0);
    position: absolute;
    top: 12px;
    left: 10px;
}

input#blue-checkbox:checked ~ .helper::before {
    color: #25a9e0;
    background-color: #25a9e0;
}

input#blue-checkbox:checked ~ .helper::after {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

input#gray-checkbox {
    width: auto;
    opacity: 0.0000001;
    position: absolute;
    left: 0;
    margin-left: -20px;
}

.gray-helper {
    position: absolute;
    left: -19px;
    top:-3px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    user-select: none;
    color: #808080;
}

    .gray-helper:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        margin: 4px;
        width: 22px;
        height: 22px;
        transition: transform 0.28s ease;
        border-radius: 3px;
        border: 1px solid #90a4ae;
    }

    .gray-helper:after {
        content: '';
        display: block;
        width: 10px;
        height: 5px;
        border-bottom: 2px solid #90a4ae;
        border-left: 2px solid #90a4ae;
        -webkit-transform: rotate(-45deg) scale(0);
        -moz-transform: rotate(-45deg) scale(0);
        -ms-transform: rotate(-45deg) scale(0);
        transform: rotate(-45deg) scale(0);
        position: absolute;
        top: 12px;
        left: 10px;
    }

input#gray-checkbox:checked ~ .gray-helper::before {
    color: #fff;
    background-color: #fff;
}

input#gray-checkbox:checked ~ .gray-helper::after {
    -webkit-transform: rotate(-45deg) scale(1);
    -moz-transform: rotate(-45deg) scale(1);
    -ms-transform: rotate(-45deg) scale(1);
    transform: rotate(-45deg) scale(1);
}

.checkbox-span {
    min-height: 24px;
    padding-left: 5px;
    cursor: pointer;
    vertical-align: sub;
    min-width: 24px;
}

.square {
    font-size: 11px;
    letter-spacing: 3px;
    vertical-align: text-top;
}

.padding-r4-l6 {
    padding-right: 4px;
    padding-left: 6px;
}

.more-btn-dropdown {
    color: #404040;
    float: right;
    letter-spacing: .2px;
    margin: 3px 0px 10px 20px;
    white-space: nowrap;
    width: 100%;
    text-align: left;
}

.delete-archive:hover span > p {
    display: block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}

.delete-archive span > p { /* The tooltip */
    display: none;
    background-color: #fff;
    padding: 8px 50px 3px 12px;
    width: 150px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1111;
    margin-left: -70px;
}

.copy-share:hover span > p {
    display: block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
}

.copy-share span > p { /* The tooltip */
    display: none;
    background-color: #fff;
    padding: 10px 50px 10px 20px;
    width: 150px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1111;
    margin-left: -120px;
    margin-top: -14px;
}

.login-reset-pass {
    margin: 16px 20px;
    float: left;
    width: 91.66666666666666%;
}

.login-align-center {
    display: inline-block;
    margin: 0 auto !important;
    max-width: 360px;
    text-align: left;
}

.dot-margin {
    margin: 0px 8% !important;
}

.div-align-center {
    text-align: center;
}

.div-no-pad-l {
    padding-left: 0 !important;
}

.div-no-pad-r {
    padding-right: 1px !important;
}

.mob-lock-grid {
    display: inline-grid;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    padding-left: 10px;
    color: #25a9e0
}

.class-name-margin {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.next-margin {
    margin-bottom: 40px;
}

.slider {
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 10px !important;
    background: #d3d3d3 !important;
    outline: none !important;
    -webkit-transition: .2s !important;
    transition: opacity .2s !important;
}
.criterionSlider {
    padding-right: 33px;
    padding-left: 10px;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: #28b6e2;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #28b6e2;
    cursor: pointer;
}

.slider-text-value {
    padding-top: 10px;
    font-weight: bold;
    font-size: 16px;
    margin-left: -25px !important;
    display: inline-flex;
}

.sliderStudents {
    margin: 20px 0;
    display: inline-flex;
    padding-left: 5px;
    padding-right: 5px;
}

.minimumResponseTextbox {
    margin-top: 18px;
    float: left;
}

.durationCustomTextbox {
    position:relative !important;
    left: 0px !important;
    width:65px
}

#SyncDurationCustomTextBox {
    width: calc(100% - 120px) !important;
    font-size: 14px;
}

.durationCustomTextBoxMin {
    display: flex;
}

.durationCustomTextBoxMin > * + * {
        margin-left: 5px;
}

.durationCustomValidation {
    font-size:14px;
}

.minimumResponseValidation {
    padding-top: 22px;
    padding-left: 10px;
    float: left
}

.duraitonCustomValidation {
    padding-top: 22px;
    padding-left: 10px;
    float: left
}

.gptDescription[readonly] {
    cursor:text
}

.generate-description {
    margin-right: 10px;
    margin-top: 10px;
    float: right;
    width: 40px;
    display:none;
}

.startNumber,
.allStudents {
    float: left;
    width: 2vw;
    color: #A0B2B6;
    font-size: 17px;
}

.allStudents {
    text-align: left;
}

.setStudent {
    position: absolute;
    top: -8px;
    left: 50%;
    width: 10px;
    height: 1em;
    text-align: center;
    color: white;
    white-space: nowrap;
    font-size: 18px;
}

.range {
    position: relative;
    float: left;
    width: 100vw;
    padding: 0 7px 0 10px;
    top: 8px;
}

.inputSlider {
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 7px;
    padding: 0;
    border-radius: 10px;
    background: #E7F6FD !important;
    box-sizing: content-box;
}

    .inputSlider:focus {
        outline: none;
    }

    .inputSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 60px;
        height: 25px;
        border: 2px solid #25A9E0;
        border-radius: 25px;
        background: #25A9E0;
    }
    .disabledSlider {
    -webkit-appearance: none;
    display: block;
    width: 100%;
    height: 7px;
    padding: 0;
    border-radius: 10px;
    background: #E8E8E8 !important;
    box-sizing: content-box;
}

    .disabledSlider:focus {
        outline: none;
    }

    .disabledSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 60px;
        height: 25px;
        border: 2px solid #A9A9A9;
        border-radius: 25px;
        background: #A9A9A9;
    }
.btn-active {
    background-color: #00C853;
    color: #ffffff !important;
    border:none !important;
}

.btn-active:hover {
    background-color: #00C853;
    color: #ffffff !important;
    border: none !important;
}

.btn-inactive {
    background-color: #E3F9EC;
    color: #00C853 !important;
    border: none !important;
}

.btn-inactive:hover {
    background-color: #E3F9EC;
    color: #00C853 !important;
    border: none !important;
}

.table > tbody > tr .subgrid-row-selected > td {
    border-top: 2px solid #25a9E0 !important;
    border-bottom: 2px solid #25a9E0 !important;
}
#StudentGrid table.grid-table tr.grid-row-selected td {
    background: #28aae2 !important;
    color: white;
}

#QuestionGrid table.grid-table tr.grid-row-selected td {
    background: #28aae2 !important;
    color: white;
}
#RoomGrid table.grid-table tr.grid-row-selected td {
    background: #28aae2 !important;
    color: white;
}

#StudentGrid table.grid-table tr.grid-row td {
    background: #ffffff;
    padding: 10px 0px;
}

#QuestionGrid table.grid-table tr.grid-row td {
    background: #ffffff;
    padding: 8px 0px 10px 0px;
}
#RoomGrid table.grid-table tr.grid-row td {
    background: #ffffff;
    padding: 8px 0px 10px 0px;
}
#StudentGrid table.grid-table tr.grid-row {
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
}

#QuestionGrid table.grid-table tr.grid-row {
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
}

#RoomGrid table.grid-table tr.grid-row {
    border-bottom: 1px solid #ccc;
    padding-top: 5px;
    padding-bottom: 5px;
}
.gridHeader {
    margin-top: 2px;
    background-color: #ffffff;
    height: 110px;
    border-bottom: 1px solid #ccc;
    padding-left: 10px;
    padding-top: 15px;
}

.span-header-text {
    display: block;
    color: #808080;
    text-align: right
}

.no-padding-bottom{
    padding-bottom: 0px !important;
}
.grading-form-control {
    width: 150px;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.organization-dropdown {
    width: 300px;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff !important;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.language-dropdown {
    width: 300px;
    height: 35px;
    padding: 6px 12px;
    font-size: 14px;
    margin-left:-15px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff !important;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

#otherLang {
    margin-top: 10px;
}

.rubric-dropdown {
    width: 250px;
    height: 30px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff !important;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.btn-search {
    background-image: url(images/icn-search.svg);
    background-position: 5px;
    background-size: 20px;
    background-repeat: no-repeat;
    width: 235px;
    font-size: 15px;
    padding: 2px 10px 7px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    display: inline-block;
    height: 35px;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    float:right;
}


.myInput {
    background-image: url(images/download.png);
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 42px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    display: inline-block;
}

.sort {
    padding: 12px 20px 12px 42px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    display: inline-block;
}

.gray-color{
    color: #808080;
}
.blue-color {
    color: #25A9E0;
}
.btn-next {
    width: 70px !important;
    font-size: 25px !important;
    padding-top: 0px;
    padding-bottom: 0px;
    /*float: right !important;*/
}
.organizeByStudents {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0px;
    margin-right: 10px !important;
}
.organizeByQuestions {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0px;
}
.padingLeftRight-0 {
    padding-left:0px !important;
    padding-right: 0px !important;
}
.detailMargin {
    margin-top: -100px;
}
.detailMarginRoom {
    margin-top: -40px;
}
.previewVideo {
    display: block;
    object-fit: contain;
    width: 290px;
    left: 0px;
    position: absolute;
    border-radius: 4px;
}
.record-feedback {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    margin-bottom: 90px;
}
.studentText {
    float:right; 
    margin-right:18px; 
    margin-top:10px;
}
    .rowQuestionStudents{
        display:initial;
    }

.congratulations-title {
    font-size: 24px;
    display: inline-block;
    margin-top: 10px;
}
.horizontal-scroll {
    overflow-x: auto !important;
    white-space: nowrap !important;
}
.grading-slider-text-value {
    font-weight: bold;
    font-size: 16px;
    margin-left: -25px !important;
    display: inline-flex;
}
.label-width {
    width: 150px !important;
}
.label-width2 {
    width: 190px !important;
}

.default-rubric {
    float: left;
    margin-left: -8px;
    margin-top: 4px
}

.treeview {
    width: 90%;
    margin-top: 60px;
    border: 2px solid #B0BEC5 !important;
    border-radius: 4px;
    height: 150px;
    overflow-y: auto;
    margin-left: 15px;
    overflow-x: auto;
}

/*.treeview .subtree {
    margin-left: 0px !important;
}*/

.treeview #subtree-0,
.treeview #subtree-1 {
    margin-left: 0px !important;
}

.treeview li:not(:has(ul)) {
    margin-left: 15px !important;
}

.treeview li:not(:has(ul)) > ins {
    display: none !important;
}

.treeview .tree-node > #icon-0 {
    display: none;
}

.treeview .tree-node > #checkbox-0 {
    margin-left: 18px;
}

.roomsGridHeader {
    margin-top: 2px;
    background-color: #ffffff;
    height: 40px;
    border-bottom: 1px solid #25a9E0;
    padding-left: 12px;
    padding-top: 10px;
    font-weight: 600;
}

.babble-play {
    color: white;
    background: #28b6e2;
    width: 32px !important;
    height: 32px !important;
    padding-left: 7px;
    padding-top: 5px;
    border-radius: 20px;
}

.babble-restricted {
    color: white;
    background-image: url('images/ui-restricted.svg');
    width: 32px !important;
    height: 32px !important;
    padding-left: 7px;
    padding-top: 5px;
    border-radius: 20px;
}

.play-btn {
    width: 16px !important;
    position: relative !important;
    height: 16px !important;
    margin-top: -11px;
    background-image: url('images/btn-pause.svg');
    margin-left: 3px;
    background-repeat: no-repeat;
}
.pause-btn {
    width: 16px !important;
    position: relative !important;
    height: 16px !important;
    margin-top: -11px;
    margin-left: 3px;
    background-image: url('images/btn-play.svg') !important;
    background-repeat: no-repeat;
}

.trash-video {
    float: left;
    margin-left: 10%;
    margin-right: -10px;
    margin-top: 40px;
}
.video-player {
    margin-top: 10%;
    margin-left: 4%;
    max-width: 400px;
    background-color: black;
    object-fit: contain;
}
.audio-player-mobile {
    width: 100% !important;
    margin-left: 15px;
    margin-top: 20px;
}
#QuestionGrid [data-gridname=gradingStudentGrid] table.grid-table tr.grid-row td {
    background: #E7F6FD;
}

#StudentGrid [data-gridname=gradingQuestionGrid] table.grid-table tr.grid-row td {
    background: #E7F6FD;
}

#GridLocked table td{
    background-color: rgba(255, 0, 0, 0.07) !important;

}
.resetMultiIncompleteLink:hover, .hideMultiIncompleteLink:hover {
    cursor: pointer;
    text-decoration: none;
}
.padding-left-12.grid-header {
    padding-left: 12% !important;
}
.padding-left-12.grid-header div {
    color: #428bca !important;
}
.padding-left-8.grid-header {
    padding-left: 8% !important;
}
.padding-left-8.grid-header div {
    color: #428bca !important;
}
.padding-left-11.grid-header {
    padding-left: 11% !important;
}
.padding-left-11.grid-header div {
    color: #428bca !important;
}
.padding-left-14.grid-header {
    padding-left: 14% !important;
}
.padding-left-14.grid-header div {
    color: #428bca !important;
}

#GridLocked .grid-table tbody {
    max-height: 250px;
    overflow-y: scroll;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
#GridLocked .grid-table thead, #GridLocked .grid-table tbody, #GridLocked .grid-table tr, #GridLocked .grid-table td, #GridLocked .grid-table th {
    display: block;
}

    #GridLocked .grid-table tbody tr td {
        float: left;
        height: 60px;
        border-bottom: 1px solid #ddd;
    }
        #GridLocked .grid-table tbody tr td span {
            vertical-align: -webkit-baseline-middle;
        }
    #GridLocked .grid-table thead tr th {
        float: left;
    }
    .width-30 {
        width: 30%;
    }
    .width-25 {
        width: 25%;
    } 
    .width-20 {
        width: 20%;
    }
    .width-15{
        width: 15%;
    }
    .width-10 {
        width: 10%;
    }
    .width-5{
        width: 5%;
    }
    .width-3 {
        width: 3%;
    }
    .width-1 {
        width: 1%;
    }
    .width-7 {
        width: 7%;
    }
    .width-8 {
        width: 8%;
    }
    .dragdropmargin{
        margin-left:-3%;
    }

    #LtiStudentsInfo .table > tbody > tr > td {
        padding: 10px 10px !important;
    }
    .addAssessment{
        margin-left: -6.5% !important;
        margin-top: 3px;
    }
    .theme-small {
        font-size: 22px;
    }
    .theme-medium {
        font-size: 32px;
    }
    .theme-blue {
        color: #25a9e0;
    }
   .theme-dark-blue {
    color: rgb(15, 99, 150);
    }
    .theme-gray {
        color: #616567;
    }
    .theme-white {
        color: white;
    }
    .theme-red {
        color: #F70908;
    }
    .position-right{
        text-align: right;
    }
    /*.plus {
        display: block;
        height: 32px;
        width: 32px;
        font-size: 47px;
        text-align: center;
        line-height: 25px;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: lighter;
        background-color: transparent;
        border: 2px solid #25A9E0;
        border-radius: 4px;
        font-style: normal;
    }


    .plus::before {
        display: block;
        content: '+';
    }*/

.grid-cell-bold {
    font-weight:bold
}

    .addClass {
        margin-left: -3%;
        margin-top: 5px
    }

    .green-class{
        color: #00C853;
        font-size: 16px;
    }

    .white-class{
        color: white;
        font-size: 16px;
    }

    .blue-class {
        color: #25a9e0;
        font-size: 16px;
    }
.star {
    font-size: 20px;
    color: #25a9e0;
}
.star-padding{
    padding-left: 30%;
}
.star-div-height {
    line-height: 25px;
}
.star-div {
    line-height: 25px;
    margin-left: 16%;
    padding-right: 0px;
}
.star-text {
    color: #90a4ae;
    font-weight: 700;
    font-size: 12px;
}
.circle-steps {
    font-size: 7px;
    color: #92D4EF;
}
.circle-steps-active {
    font-size: 7px;
    color: #25A9E0;
}
#close-intro{
    opacity:1 !important;
    margin-top: 10px;
}
.img-intro {
    content: url('images/intro-popup-close-normal.svg');
}
.img-intro:hover {
    content: url('images/intro-popup-close-hover.svg');
}
.intro-modal-header {
    min-height: 80px;
}
.intro-modal-label {
    margin-top: 10px !important;
    margin-bottom: 0px !important;
}
.intro-btn-next {
    color: #ffffff;
    border-color: #25a9e0;
    background: #25a9e0;
    width: 150px;
}
    .intro-btn-next:hover {
        color: #25a9e0 !important;
        border-color: #25a9e0;
        background: #ffffff;
    }
.intro-btn-back {
    color: #ffffff;
    border-color: #00D6A8;
    background: #00D6A8;
    width: 150px;
    float: left;
}
    .intro-btn-back:hover {
        color: #00D6A8 !important;
        border-color: #00D6A8;
        background: #ffffff;
    }
.intro-modal-footer {
    background-color: #F5F5F5;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.intro-language-card {
    background: #E9F6FC;
    color: #25a9e0;
    border: none;
    width: 20%;
    margin-right: 5%;
    height: 75px;
    margin-bottom: 2px;
    border-radius: 15px;
    font-family: 'Fredoka One';
    letter-spacing: 1.25px;
    font-size: 15px;
    font-weight: 500 !important;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding-top: 26px;
}
    .intro-language-card:first-child{
        margin-left: 5%;
    }
    .intro-language-card-active {
        border: 3px solid #25a9e0;
        color: #25a9e0;
    }
.intro-language-card:hover {
    border: 3px solid #25a9e0;
    color: #25a9e0;
}
.intro-dropdown {
    width: 71%;
    height: 40px;
    border: 3px solid #25a9e0;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1.428571429;
    color: #000;
    vertical-align: middle;
    background-color: #E9F6FC !important;
    background-image: none;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    font-weight: 600; 
}
.languages-div {
    text-align:center;
}
.done-step-btns {
    text-transform: uppercase;
    width: 180px;
}
.intro-modal-dialog {
    margin: auto;
    width: 43%;
    padding-top: 105px !important;
}

.intro-modal-content {
    border-radius: 20px;
}

.intro-modal-header {
    min-height: 80px;
}
.preferences-tooltip {
    width: 400px !important;
}
.choice-tooltip {
    width: 100px !important;
}
.multiple-choice-line {
    border-top: 2px solid #25A8DF;
    margin-top: 20px;
    float: right;
    margin-right: 20px;
    text-align: left;
}
.multiple-choice-line-popup {
    border-top: 2px solid #25A8DF;
    margin-top: 20px;
    width: 95%;
    float: right;
    margin-right: 14px;
    text-align: left;
}
.add-choice-span {
    float: right;
    padding-top: 10px;
    font-size: 18px;
    border: 2px solid #25a8df;
    border-radius: 40px;
    padding: 5px 17px !important;
    width: 135px;
    background-color: #25A8DF;
    color: #fff;
    margin-right: 21px;
}
.add-choice-span:hover {
    text-decoration: none;
    background-color: #fff;
    color: #25A8DF;
    animation: none;
}
.btn-save {
    margin-right: 20px;
    min-width: 70px;
    min-height: 35px;
    font-size: 16px;
}

.number-field {
    height: 35px !important;
    width: 100%;
    padding: 4px 11px !important;
    border-radius: 5px;
}

.language-field {
    height: 35px !important;
    width: 79%;
    padding: 6px 11px 4px 11px !important;
    border-radius: 5px;
    font-size: 14px !important;
    display:none;
}
.multiple-choice-div {
    text-align: center;
    width: 95%;
    margin: auto;
    min-height: 80px;
    background-color: white;
    border-radius: 9px;
}
.multiple-choice-video {
    text-align: center;
    width: 95%;
    margin: auto;
    height: 180px;
    background-color: white;
    border-radius: 9px;
}
.multiple-counter {
    font-size: 30px;
    font-weight: 800;
    color: #c9ead7;
    margin: auto -30px;
}
.grading-textarea {
    resize: none;
    border: none;
    color: black;
    font-weight: 600;
    display: block;
    width: 100%;
    padding: 0px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    vertical-align: middle;
    background-color: #ffffff;
    background-image: none;
    border-radius: 4px;
    overflow: hidden;
    pointer-events: none;
}
.multiple-checkbox {
    height: 45px;
    width: 45px;
    -webkit-appearance: none;
    background-color: #e3f9ec;
    border: 1px solid #e3f9ec;
    padding: 9px;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    margin: auto 10px auto 0px !important;
    pointer-events: none;
}
    .multiple-checkbox:checked {
        background-color: #00c853;
        border: 1px solid #00c853;
        color: #fff;
    }
        .multiple-checkbox:checked:after {
            content: '\2714';
            font-size: 36px;
            position: absolute;
            top: -4px;
            left: 6px;
            color: #fff;
        }

.multiple-checkbox-wrong {
    height: 45px;
    width: 45px;
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    padding: 9px;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    margin: auto 10px auto 0px !important;
    pointer-events: none;
}
.multiple-checkbox-wrong:checked {
    background-color: #C20000;
    border: 1px solid #C20000;
}
        .multiple-checkbox-wrong:checked:after {
            content: '\2716';
            font-size: 36px;
            position: absolute;
            top: -4px;
            left: 6px;
            color: #fff;
        }
.multiple-points {
    margin-right: 25px;
    margin-bottom: 50px;
    float: right;
}
.audio-MC {
    width: 81%;
    margin: auto 2% auto 0px;
    height: 50px;
}
.image-MC {
    margin: auto 0 auto 0;
    float: left;
    display: flex;
}
     .image-MC img {
        height: 170px;
    }

.video-MC {
    margin: auto 0 auto 0;
    float: left;
    display: flex;
}
.video-MC video{
    height: 170px;
}
.choice-right-panel {
    display: grid;
    height: 130px;
}
.margin-text-choice{
    margin-left: 4%;
}
.margin-create-exercise {
    margin-left: -2%;
    margin-right: -2%;
}
.margin-create-exercise .help-tip p {
    margin-left: 10%;
}
.right-panel-position {
    margin-left: 50px;
    margin-top: 5px;
}
#rubricViewRoom {
    margin-top: 10px;
    table-layout: fixed;
}

    #rubricViewRoom tr {
        width: 100%;
        height: 36px; /* match td:not(:first-child) width */
    }

        #rubricViewRoom tr td:not(:first-child) {
            text-align: center;
            width: 350px; /* match tr height */
        }

        #rubricViewRoom tr td:first-child {
            font-weight: 700 !important;
            width: 100px;
            font-size: 16px;
        }

        #rubricViewRoom tr td:nth-last-child(2) {
            font-weight: 700 !important;
            width: 45px;
            font-size: 16px;
            text-align: right;
        }

        #rubricViewRoom tr td:last-child {
            font-weight: 700 !important;
            width: 170px;
            font-size: 16px;
            text-align: right;
        }

#deleteRoomAttempt {
    float: right;
    vertical-align: middle;
    display: inline-block;
    font-size: 16px;
    margin-right: -60px;
    margin-top: 10px;
}

#rubricView {
    margin-top: 32px;
    table-layout: fixed;
}

    #rubricView tr {
        width: 100%;
        height: 36px; /* match td:not(:first-child) width */
    }

        #rubricView tr td {
            background: #f5f5f5 !important;
        }
        #rubricView tr td:not(:first-child) {
            text-align: center;
            width: 350px; /* match tr height */
        }

        #rubricView tr td:first-child {
            font-weight: 700 !important;
            width: 100px;
            font-size: 16px;
        }

        #rubricView tr td:nth-last-child(2) {
            font-weight: 700 !important;
            width: 45px;
            font-size: 16px;
            text-align: right;
        }

        #rubricView tr td:last-child {
            font-weight: 700 !important;
            width: 170px;
            font-size: 16px;
        }

.text-counter {
    font-size: 17px;
    color: #25a9e0 !important;
    font-weight: 700;
}

#studentPortfoliosDiv table thead th {
    background-color: #7ddda4 !important;
    color: white !important;

}

#studentPortfoliosDiv table thead th a {
    color: white !important;
}
    #studentPortfoliosDiv table thead th:first-child {
        border-top-left-radius: 10px;
    }
    #studentPortfoliosDiv table thead th:last-child {
        border-top-right-radius: 10px;
    }

.new-span {
    width: 36px;
    height: 17px;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 11px;
    display: inline-grid;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    border-radius: 25px;
    background: #00c853;
    top: 0px;
    float: right;
    margin-right: 36px;
    margin-top: -12px;
}
.google-signin {
    margin-right: 20px;
    min-height: 25px !important;
    font-size: 16px;
    width: 90%;
    color: #25A9E0;
    border-color: #25A9E0;
    background: #fff;
    border: 2px solid;
    font-weight: 600 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 7px 10px;
    border-radius: 4px;
    margin-bottom: 0;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
}
    .google-signin:hover, .google-signin::after, .google-signin:active, .google-signin:focus {
        color: #25A9E0 !important;
        text-decoration: none !important;
    }


.apple-signin {
    margin-right: 20px;
    min-height: 25px !important;
    font-size: 16px;
    width: 90%;
    color: #25A9E0;
    border-color: #25A9E0;
    background: #fff;
    border: 2px solid;
    font-weight: 600 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 7px 10px;
    border-radius: 4px;
    margin-bottom: 0;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
}

.apple-signin:hover, .apple-signin::after, .apple-signin:active, .apple-signin:focus {
        color: #25A9E0 !important;
        text-decoration: none !important;
}


.classlink-signin {
    margin-right: 20px;
    min-height: 25px !important;
    font-size: 16px;
    width: 90%;
    color: #0a4d7f;
    border-color: #0a4d7f;
    background: #fff;
    border: 2px solid;
    font-weight: 600 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 7px 10px;
    border-radius: 4px;
    margin-bottom: 0;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
}
    .classlink-signin span {
        font-family: 'Helvetica Neue LT Std', sans-serif;
        font-weight: bold;
    }
    .classlink-signin:hover, .classlink-signin::after, .classlink-signin:active, .classlink-signin:focus {
        color: #0a4d7f !important;
        text-decoration: none !important;
    }


.edlink-signin {
    margin-right: 20px;
    min-height: 25px !important;
    font-size: 16px;
    width: 90%;
    color: #009978;
    border-color: #009978;
    background: #fff;
    border: 2px solid;
    font-weight: 600 !important;
    border-color: inherit;
    letter-spacing: .25px;
    padding: 7px 10px;
    border-radius: 4px;
    margin-bottom: 0;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
}

    .edlink-signin span {
        font-family: 'Lato', sans-serif;
        font-weight: bold;
    }

    .edlink-signin:hover, .edlink-signin::after, .edlink-signin:active, .edlink-signin:focus {
        color: #006b53 !important;
        text-decoration: none !important;
    }


.notLinkedAssessment {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-family: Roboto, "Helvetica Neue", sans-serif !important;
}

.btn-commons {
    margin-right: 47px;
    min-width: 150px;
    min-height: 38px;
    font-size: 14px;
    color: white;
    background-color: #43e5b6;
    border-color: #43e5b6;
}
    .btn-commons:hover, active {
        color: #43e5b6 !important;
        border-color: #43e5b6 !important;
        background: #fff !important;
    }
.new-commons {
    background-color: #43e5b6;
    margin-top: 7px !important;
    margin-left: 35px !important;
    height: 25px;
    width: 38px;
    padding-left: 5px;
    padding-top: 2px;
    color: white;
    font-size: 14px;
    border-radius: 7px;
}
.multiselect-container {
    overflow: scroll !important;
    max-height: 190px !important;
    max-width: 380px;
}
    .multiselect-container .active .checkbox {
        background-color: #25a9e0 !important;
        width: 100%;
    }
.absentStudentsDiv .multiselect {
    max-width: 380px !important;
}
.assessment-timeline {
    padding-left: 50px;
    color: #37474F;
    font-weight: 700;
    margin-bottom: -15px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 18px;
}

    .switch input {
        display: none;
    }

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

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

input[type="checkbox"]:checked + input[type="hidden"] + .toggle-slider,
input[type="checkbox"]:checked + .toggle-slider {
    background-color: #25A9E0;
}

input[type="checkbox"]:focus + input[type="hidden"] + .toggle-slider,
input[type="checkbox"]:focus + .toggle-slider {
    box-shadow: 0 0 1px #25A9E0;
}

input[type="checkbox"]:checked + input[type="hidden"] + .toggle-slider:before,
input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(38px);
}

.preferences-div {
    margin: 6px 0px 8px 0px;
}

.preferences-span {
    color: #808384;
    font-size: 15px;
}

.preferences-link {
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
}

.question-choice-title {
    color: #37474F !important;
    font-weight: 600 !important;
}
/* Rounded sliders */
.toggle-slider.round {
    border-radius: 34px;
}

    .toggle-slider.round:before {
        border-radius: 50%;
    }

.custom-field {
    height: 35px !important;
    width: 77%;
    padding: 4px 9px !important;
    border-radius: 5px;
}
/*desktop view*/
@media (min-width:768px) {
    .desktopView {
        display: inline;
    }

    .desktopView-flex {
        display: flex;
    }

    .mobileView {
        display: none;
    }

    .desktopView-block {
        display: block;
    }

    .mobileContentView {
        display: none;
    }
}
@media (min-width:1200px) and (max-width: 1441px) {
    .intro-modal-dialog {
        margin: auto;
        width: 60% !important;
    }
}
/*tablet view*/
@media (min-width:768px) and (max-width: 991px) {
    .stars-width {
        width: 20% !important;
    }
    .menu-width {
        width: 80% !important;
    }
    #rubricViewRoom tr td:not(:first-child) {
        text-align: center;
        width: 290px; /* match tr height */
    }

    #rubricViewRoom tr td:nth-last-child(2) {
        font-weight: 700 !important;
        width: 45px;
        font-size: 16px;
        text-align: right;
    }

    #rubricViewRoom tr td:last-child {
        font-weight: 700 !important;
        width: 200px;
        font-size: 16px;
        text-align: right;
    }
}
/*tablet view*/
@media (min-width:768px) and (max-width: 1199px) {
    .star-div{
        margin-left: 8%;
    }
    .star-padding{
        padding-left:0px;
    }
    .ml-30-tablet{
        margin-left: 30px!important;
    }     
    
    .step2-time-input {
        width: 30px !important; 
        margin-right: 5px;
    }

    .step2-crop-input {
        width: 10px !important;
        margin-right: 5px;
    }

    .footer-btn-container {
        top: 10px !important;
        margin-right: 20px !important;
        text-align: center !important;
        right: 0;
        float:none !important;
        display: block !important;
    }   
    .ClearApplyFilter{
        display:flex !important;
    }
    .clearFilter{
        margin-top:-0.5px;
    }
    .btnApplyFilter {
        margin-top:-1px;
    }
    .navbar-default{
        width:960px;
    } 
    .avatarImg {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    object-fit: cover;
} 
    #gradingGrid{
          word-break:break-all;
        width:740px;
    }
    #assesment-thumbnail {
        margin-top:-80px;
        padding-top:20px;
    }
    #assesment-name {
        margin-left:-70px;
        margin-top:70px;
    }
    #students{
        margin-right:380px;
        margin-top:-150px;
        padding-top:19px;
    }
    .rowQuestionStudents{
        display:inline-grid;
    }
    .navbar-default {
        width:100%;
    }
    .btn-search {
        margin-left: 0px !important;
        float: right !important;
    }
  
    #question{
        margin-top:50px!important;
    }
    .studentText {
    float:right; 
    margin-right:18px; 
    margin-top:10px;
    padding-top:25px;
}
    .detailMargin {
        margin-top: 0px;
        background-color: whitesmoke;
    }

    .audio-player-mobile {
        width: 70% !important;
        margin-left: 18px;
        margin-top: 20px;
    }

    .trash-audio-mob {
        margin-left: 11%;
        margin-top: 35px;
    }
    .trash-audio-ios {
        margin-left: 11%;
        margin-top: 20px;
    }
    .modal-dialog {
        width: 80% !important;
        margin: auto;
    }
    .addAssessment {
        margin-left: -12.5% !important;
    }
    .addClass {
        margin-left: 0;
        margin-top: 3px
    }
    .intro-modal-dialog {
        margin: auto;
        width: 80% !important;
    }
    .done-step-btns {
        text-transform: uppercase;
        width: 165px;
    }
    .navbar-username-container{
        width: 110%;
    }
    .right-panel-position {
        margin-left: 20px;
        margin-top: 5px;
    }

    #rubricViewRoom tr td:first-child {
        font-weight: 700 !important;
        width: 150px;
        font-size: 16px;
    }
    #rubricViewRoom tr td:not(:first-child) {
        text-align: center;
        width: 400px; /* match tr height */
    }

    #rubricViewRoom tr td:nth-last-child(2) {
        font-weight: 700 !important;
        width: 45px;
        font-size: 16px;
        text-align: right;
    }

    #rubricViewRoom tr td:last-child {
        font-weight: 700 !important;
        width: 270px;
        font-size: 16px;
        text-align: right;
    }
}


/*mobile view*/
@media (max-width:767px) {

    .desktopView-flex {
        display: none;
    }

    .mobileContentView {
        display: contents;
    }

    .preferences-tooltip {
        width: 330px !important;
        margin-left: -217px;
    }
    .btn-search {
        float: left;
    }

    .desktopView {
        display: none
    }

    .mobileView {
        display: inline;
    }

    .desktopView-block {
        display: none;
    }

    .FileMobileView {
        margin-left: -10px;
    }

    #divTmpAudio {
        margin-left: 0px !important;
    }

    .viewButtonMobile {
        width: 87%;
        margin-left: 25px;
        margin-top: 10px;
    }

    .hline {
        width: 100%;
        height: 1px;
        background: #C8C8C8
    }

    .btn-search-mobile {
        margin-left: 1px;
        margin-top: 10px;
        background-image: url(images/icn-search.svg);
        background-position: 5px;
        background-size: 20px;
        background-repeat: no-repeat;
        width: 100%;
        font-size: 15px;
        padding: 2px 10px 7px 40px;
        border: 1px solid #ddd;
        display: inline-block;
        height: 35px;
        border-radius: 4px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    }

    #gridUserIconMobile {
        min-width: 300px;
        background-position: 15px;
        background-repeat: no-repeat;
        border-right: 1px outset;
        display: flex;
    }

    .page-header-title {
        padding: 16px 20px 24px;
    }

    .class-grid-item {
        font-size: large;
        font-weight: bold;
    }

    #btnApplyFilterMobile {
        background-image: url(images/btn-ok-mobile.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        height: 36px;
        margin-top: -35px;
        float: right;
    }

    .buttons {
        flex-direction: column-reverse;
    }

    .labelDueDate {
        color: #A0A0A0;
        margin-left: 24px;
    }

    .status {
        margin-left: 25px;
        color: #A0A0A0;
    }

    .statusMobile {
        margin-left: 25px !important
    }

    .published {
        margin-left: 25px;
        color: #A0A0A0;
    }

    .pull-right-btnSuccess {
        margin-bottom: -20px;
        margin-left: 10px;
        margin-right: 230px;
    }

    #teacherMobileId {
        width: 132px;
    }

    #classMobileId {
        width: 110px;
        margin-right: 10px;
        margin-left: 125px;
        margin-top: -50px;
    }

    #teacherMobileId.form-control {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #classMobileId.form-control {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    #applyFilterMobile {
        background-image: url(images/btn-ok-mobile.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        width: 30px;
        height: 34px;
        float: right;
        margin-top: -69px;
        margin-right: 34px;
    }

    #btnApplyFilterMobileGrading {
        background-image: url(images/btn-ok-mobile.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        width: 30px;
        margin-right: 60px;
        height: 37px;
    }

    #clearFilterMobile {
        background-image: url(images/btn-cancel-mob.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        width: 30px;
        float: right;
        margin-right: -35px;
        margin-top: -69px;
        margin-right: 1px;
    }


    #btnclearFilterMobileGrading {
        background-image: url(images/btn-cancel-mob.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        width: 30px;
        float: right;
        margin-bottom: 10px;
        margin-right: 27px;
        margin-top: -35px;
    }

    #exportExcel {
        margin-top: -115px;
        width: 155px;
        margin-left: -10px;
    }

    .buttonsMobile {
        margin-right: -10px;
    }

    .grid-cell-mobile {
        background-color: #FFFFFF;
    }

    #filterClassMobile {
        width: 60%;
    }


    .align-center {
        display: block;
        margin: 0 auto !important;
    }

    .btnClassCreate {
        width: 150px;
        float: right;
    }

    .manage-class-label {
        font-weight: bold !important;
    }

    .skill-area-grid {
        margin-left: 10px;
        margin-right: 10px;
        padding-left: 5px;
    }

    .user-navbar-class-container {
        color: #404040;
        text-decoration: none;
        margin: 0 0 0 0px;
        cursor: pointer;
        position: fixed;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 2px;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        font-size: 1.2em;
        z-index: 10;
        right: 70px;
    }

    .user-navbar-class-ul {
        list-style-type: none;
        width: 165px;
        margin-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

        .user-navbar-class-ul li {
            margin: 5px 0;
        }

            .user-navbar-class-ul li a {
                color: black !important;
            }

    .navbar-class-container {
        color: #404040;
        text-decoration: none;
        margin: 0 0 0 0px;
        cursor: pointer;
        position: fixed;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 2px;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        font-size: 1.2em;
        z-index: 10;
        right: 70px;
    }

    .navbar-class-ul {
        list-style-type: none;
        width: 165px;
        margin-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;
    }

        .navbar-class-ul li {
            margin: 5px 0;
        }

            .navbar-class-ul li a {
                color: black !important;
            }

    .dot-margin {
        margin: 0px 6% !important;
    }

    .btn-login {
        margin-right: 20px;
        min-width: 100px;
        min-height: 25px !important;
        font-size: 16px;
    }

    .login-link {
        font-size: 12px;
    }

    .ml-17 {
        margin-left: 17px !important;
        margin-right: 17px !important;
    }

    .well {
        min-width: 310px;
    }

    .class-edit-info {
        margin-left: 20px;
    }

        .class-edit-info label {
            color: #37474F;
            font-size: 18px;
            margin-left: 10px;
        }

    .upload-box {
        margin-top: 0px !important;
    }

    .class-edit-info-username {
        margin-left: 90px;
        padding-right: 30px;
        font-size: 18px;
    }

    .class-edit-info-icon {
        margin-left: 20px;
    }


    .skill-area-edit-title {
        font-size: 20px;
        margin-bottom: 10px;
        margin-left: 20px;
    }

    .skill-area-edit-invite-url {
        margin-top: 20px;
    }

        .skill-area-edit-invite-url input {
            float: left;
        }

        .skill-area-edit-invite-url button {
            float: right;
            margin-right: 15px;
        }

    .skill-area-edit-ass-info-panel {
        margin-top: 15px;
    }

        .skill-area-edit-ass-info-panel span {
            margin-top: 7px;
            margin-left: -5px;
        }

    .skill-area-edit-ass-grid-title {
        font-size: 18px;
        font-weight: bold;
        float: left;
    }

    .skill-area-edit-create-ass-btn {
        float: right;
    }

    .skill-grid {
        margin-left: 15px;
        margin-right: 15px;
    }

    .grid-row-bold-text {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 5px;
    }

    .grid-row-gray-text {
        color: #90a4ae !important;
    }

    #skillsGridMobile .grid-header-title span {
        color: #428bca;
        font-size: 17px;
        margin-left: 5px;
    }

    #assignedUsersGridMobile tbody tr.grid-row {
        height: 80px;
    }

    .lrm-15-mobile-grid {
        margin-left: 15px;
        margin-right: 15px;
    }

    .skill-area-edit-student-label {
        font-size: 18px;
        font-weight: bold;
        margin-left: 20px;
    }

    #assignedUsersGridMobile .grid-header-title span {
        color: #428bca;
        font-size: 17px;
        margin-left: 5px;
    }

    .skill-area-edit-footer {
        z-index: 3;
    }

    .img-store {
        width: 136px;
        height: 42px;
        display: block;
        margin: 0 auto;
    }

    .grading-mobile {
        padding: 0px 30px;
    }

        .grading-mobile div {
            padding: 10px 0;
        }

        .grading-mobile span {
            color: #428bca;
            text-decoration: none;
            font-size: 18px;
            margin: 20px 0;
        }



    .header-mobile .navbar-default {
        height: 60px;
    }

    .navbar-icon-mobile {
        margin-top: 5px;
        margin-left: 25px;
    }

    .navbar-hamburger-menu {
        width: 20px;
        height: 20px;
        margin-top: 12px;
        margin-left: 10px;
    }

    .navbar-right-side-menu {
        width: 30px;
        height: 30px;
        margin-top: 12px;
        margin-right: 10px;
    }

    .navbar-right-side-upgrade-label {
        margin: 4px 20px 0 0px;
    }

    .sidenav nav ul li a {
        margin: 20px 0 20px 11px;
    }

    .sidenav nav ul li.active a {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .navbar-right-group-elements {
        margin-right: 15px;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 15;
        top: 0;
        left: 0;
        background-color: #FFFFFF;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 40px;
    }

        .sidenav a {
            text-decoration: none;
            font-size: 18px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }

        .sidenav .closebtn {
            position: absolute;
            color: #44A9E0;
            top: -5px;
            right: 15px;
            font-size: 36px;
            margin-left: 50px;
        }

    .mobileView .navbar-username-container {
        margin-top: 14px;
        font-size: 16px;
        margin-right: 20px;
        width: 55%;
    }

        .mobileView .navbar-username-container ul li a {
            margin-right: 28px;
        }

    .renew-position {
        margin-left: 0px;
    }

    span.step-name {
        display: none;
    }

    .steps-list {
        list-style: none;
        margin: 0 auto;
        text-align: center;
    }

        .steps-list > li {
            width: 50px;
            display: inline-block;
            float: none;
            border-bottom: 0px;
        }

            .steps-list > li.active {
                border-bottom: 0px;
            }

        .steps-list li.active ~ li {
            border-bottom: 0px;
        }

    div > #btnSelectFile {
        display: none;
    }

    div > #footerOne {
        display: none;
    }

    .panel {
        width: 100%;
    }

    .panel-group {
        margin: 20px 0 40px;
        min-width: 200px;
    }

        .panel-group .panel {
            border-radius: 0px !important;
        }

    .panel-steps-form {
        padding-left: 40px;
        padding-right: 40px;
    }

    .panel-body-container .class-form label {
        float: left;
        text-align: right;
        font-size: 18px;
    }

    .navigation-subtitle {
        margin-left: 25px;
        margin-right: 25px;
    }

    .class-name-margin {
        margin-top: 0px;
        margin-bottom: 20px;
    }

    .next-margin {
        margin-bottom: 10px;
    }

    .div-help {
        width: 80% !important;
        float: left !important;
        margin-left: 6%;
    }

    .timeline-start-end-label {
        display: none;
    }

    #AssessmentDescription {
        display: none;
    }

    .text-padding {
        margin-left: 25px;
        max-width: 710px;
        margin-top: 20px;
        margin-bottom: -10px;
        padding-right: 35px;
    }

    .date-input {
        width: 40% !important;
        margin-left: 15px !important;
    }

    #radio-button-select {
        margin-left: 10%;
        margin-top: 0px;
    }

    #HideAllParameters {
        margin-top: 10px;
    }

    .bottom-left {
        float: left !important;
    }

    .inline {
        display: inline-block;
        float: right;
    }

    #radio-button-select label {
        width: 105px;
    }

    /*.att {
        width: 80px !important;
    }*/

    .default-rubric {
        float: left;
        margin-left: -8px;
        margin-top: 4px
    }


    .step2-time-form {
        padding-top: 15px;
        float: left;
    }

    .panel-line {
        margin-left: 0px;
        width: 100% !important;
    }

    .first-radio-button {
        margin-right: -20px !important;
    }

    .padding10 {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .time-input {
        width: 20%;
    }

    #audio-video-select {
        margin-left: 35px;
        width: 82%;
    }

        #audio-video-select label {
            width: 32%;
        }

    #group-individual {
        margin-left: 35px;
    }

        #group-individual label {
            width: 145px;
        }

    .padding-l22 {
        padding-left: 22px;
    }

    .timeline-container {
        margin-left: 10px !important;
    }

    .div-reverse {
        display: inline-flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .row-reverse {
        display: inline-flex;
        flex-direction: row-reverse;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .fileupload {
        /*width: 55%;*/
        margin-left: 10px;
        float: left;
        max-width: 160px;
    }

    .nextwidth {
        min-width: 140px;
    }

    .back-position {
        margin-right: -40px;
        text-align: left;
        width: 50%;
        margin-bottom: -10px;
        margin-top: 10px;
    }

    .btn-panel {
        font-size: 14px;
    }

    .save-span {
        min-width: 104px;
        margin-right: 0px;
        max-width: 170px;
    }

    .next-span {
        width: 40%;
        margin-right: 20px !important;
    }

    .top-right-cta-section span {
        float: right;
        margin: 0 2% 0 2%;
    }

    .archive-gird-mobile {
        margin-left: 15px;
        margin-right: 15px;
    }

    #HideAllParameters > div {
        float: none;
    }

    #ShowAllParameters > div {
        float: none;
    }

    #AddCriterion > div {
        float: none;
    }

    #skillsGridMobile .grid-cell a {
        color: inherit;
    }

    .info-message {
        margin: 0 2px 0 2px !important;
        text-align: center !important;
    

    .footer-btn-container {
        text-align: center !important;
        display: inline-block !important;
    }

        .footer-btn-container a, .footer-btn-container input {
            width: 130px;
        }

    .align-left {
        padding: 0px 0px 0px 2px !important;
        float: left !important;
    }

    .align-right {
        padding: 0px 2px 0px 0px !important;
        float: right !important;
    }

    .mobileView .lrm-15-mobile-grid .grid-footer {
        height: 150px;
    }

    .step2-time-input {
        width: 30px !important;
        margin-right: 5px;
    }

    .step2-time-input {
        width: 50px !important;
        margin-right: 5px;
    }

    .step2-crop-input {
        width: 35% !important;
        margin-right: 5px;
    }

    .btn-next {
        width: 45% !important;
    }

    .span-header-text {
        line-height: 14px;
        font-size: 12px;
        margin-top: 10px;
        margin-right: 5px;
    }

    .organizeByStudents {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-right: 0px !important;
    }

    .organizeByQuestions {
        padding-left: 0px !important;
        padding-right: 0px !important;
        margin-right: -17px !important;
    }

    .organizeByCheck {
        min-width: 100% !important;
    }

    .gridHeader {
        height: 125px !important;
    }

    .detailMargin {
        margin-top: 0px;
    }

    .padding0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    #deleteAttempt {
        padding-top: 10px !important;
        display: inline-table !important;
        margin-top: 3px;
    }

    .description-form-control {
        background-color: #f5f5f5 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        -webkit-transition: none !important;
        transition: none !important;
        border: none !important;
    }

    .previewThumbnail {
        margin: 15px auto 0 !important;
        width: 280px !important;
    }

    #submitFeedback {
        margin-top: 0px !important;
    }

    #submitFeedbackShiftNext {
        margin-top: 0px !important;
    }

    .displayFlex {
        display: flex !important;
    }

    #rubricView {
        width: 100% !important;
    }

        #rubricView tr {
            display: inline-grid !important;
            margin-bottom: 30px !important;
        }

            #rubricView tr td {
                background: #f5f5f5 !important;
            }

                #rubricView tr td:not(:first-child) {
                    width: 100% !important;
                    padding: 0px !important;
                }

    .slider-text-value {
        float: right !important;
    }

    #gradeBox {
        width: 100% !important;
        margin-top: 40px;
    }

    .column #audioSeeker {
        margin-left: 0px !important;
        width: 100% !important;
    }

    .record-feedback {
        margin-bottom: 0px;
        width: 100% !important;
    }

    #MobileDetailPanel td {
        background: #f5f5f5 !important;
    }

/*    .panel-btn-select {
        background-color: #00C853;
        border-color: #00C853;
        color: #ffffff;
        width: 30%;
        height: 45px;
    }*/

    .panel-btn-select {
        background-color: #00C853;
        border-color: #00C853;
        color: #ffffff;
        width: 25%;
        height: 45px;
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
    }


    /*#btnRecordVideo img, #btnRecordAudio img, #btnSelectFileInPnl img {*/
  /*      margin: 0 14px 0 -15px;
        vertical-align: middle;
        margin-left: -10px;*/
    /*}*/

    .rubric-text {
        padding-right: 0px !important;
    }

    .criterionSlider {
        padding-right: 0px;
        padding-left: 25px;
    }

    .grading-slider-text-value {
        float: right !important;
    }

    #StudentGrid, #QuestionGrid, #RoomGrid {
        padding-bottom: 62px;
    }

    .sliderStudents {
        padding-left: 40px;
    }

    .minimumResponseTextbox {
        padding-left: 40px;
    }

    .durationCustomTextbox {
        padding-left: 40px;
    }

    .label-width {
        width: 180px !important;
    }

    .label-width2 {
        width: 210px !important;
    }

    #add-audio-btn {
        margin-left: 0px !important;
    }

    .trash-video {
        float: left;
        margin-left: 10%;
        margin-right: -10px;
        margin-top: 10%;
    }

    .video-player {
        margin-top: 10%;
        margin-left: -7%;
        max-width: 400px;
        background-color: black;
        object-fit: contain;
    }

    .audio-player-mobile {
        width: 100% !important;
        margin-left: -20%;
        margin-top: 20px;
    }

    .trash-audio-mob {
        margin-left: 11%;
        margin-top: 35px;
    }

    .trash-audio-ios {
        margin-left: 11%;
        margin-top: 20px;
    }

    .roomDiv {
        float: none !important;
    }

    .intro-modal-dialog {
        margin: auto;
        width: 102% !important;
    }

    .intro-language-card {
        width: 25%;
    }

    .languages-div {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .intro-dropdown {
        width: 95% !important;
    }

    .done-step-btns {
        text-transform: capitalize;
        width: 75px;
        margin-left: 3px !important;
    }

    .done-step-btns#viewAsStudent {
        width: 140px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .multiple-choice-line {
        border-top: 2px solid #25A8DF;
        margin-top: 20px;
        float: right;
        margin-right: 4%;
    }
    .multiple-choice-div {
        width: 100%;
    }
    .multiple-counter {
        font-size: 20px;
        margin: auto -40px auto -20px;
    }
    .audio-MC {
        width: 69%;
        margin: auto 2% auto 6%;
    }
    .image-MC {
    }
    .image-MC img {
        height:140px;
        max-width: 210px;
    }
    .multiple-choice-video{
        width: 100%;
        height: 160px;
    }
    .video-MC video {
        height: 140px;
        max-width: 210px;
    }
    .choice-right-panel {
        display: none;
    }
    #uploaded-choice-div {
        margin-left: 3%;
        padding-left: 14px;
        padding-right: 10px;
    }
    .panel-btn-delete{
        width: 47%;
    }
    .margin-create-exercise{
        margin-left: 0px;
        margin-right: 0px;
    }

    .margin-text-choice {
        margin-left: 0px;
    }

    .margin-btns {
        margin-left: 4%;
    }



    #deleteRoomAttempt {
        float: right;
        vertical-align: middle;
        display: inline-block;
        font-size: 16px;
        margin-right: -30px;
        margin-top: -30px;
    }
    #rubricViewRoom tr td:not(:first-child) {
        text-align: center;
        width: 550px; /* match tr height */
    }

    #rubricViewRoom tr td:first-child {
        font-weight: 700 !important;
        width: 100px;
        font-size: 16px;
    }

    #rubricViewRoom tr td:nth-last-child(2) {
        font-weight: 700 !important;
        width: 45px;
        font-size: 16px;
        text-align: right;
    }

    #rubricViewRoom tr td:last-child {
        font-weight: 700 !important;
        width: 170px;
        font-size: 16px;
        text-align: right;
    }

    #rubricView tr.mobileContentView {
        margin-bottom: 35px !important;
    }
}
@media(min-width: 400px) and (max-width: 767px) {
    .div-reverse {
        display: inline-flex;
        flex-direction: inherit;
    }

    .nextwidth {
        min-width: 140px;
    }

    .top-right-cta-section span {
        float: right;
        margin: 0 0px 0 4px;
    }

    .back-position {
        margin-right: -60px;
        margin-left: -10px;
        margin-top: 0px;
    }

    .align-left {
        padding: 0px 0px 0px 10px !important;
        float: left !important;
    }

    .align-right {
        padding: 0px 20px 0px 0px !important;
        float: right !important;
    }

    .width30 {
        width: 50% !important;
    }

}

 @media (min-width :460px) and (max-width: 767px) {
    .date-input {
        width: 17% !important;
        margin-left: 0px !important;
    }

    .timeline-container {
        margin-left: 35px !important;
    }

    .criterionSlider {
        padding-right: 10px;
        padding-left: 25px;
    }
    .text-padding {
        padding-right: 40px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .mac-os ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 8px;
        height: 8px;
    }

    .mac-os ::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 4px;
    }

    .mac-os ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .4);
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }

    .mac-os ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .6);
    }
}
@supports (-webkit-overflow-scrolling: touch) {
    .bootstrap-timepicker-widget table td input {
        width: 36px !important;
    }
}


/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url('https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url('https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'), url('https://fonts.gstatic.com/s/lato/v13/ObQr5XYcoH0WBoUxiaYK3_Y6323mHUZFJMgTvxaG2iE.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local('Lato Bold'), local('Lato-Bold'), url('https://fonts.gstatic.com/s/lato/v13/H2DMvhDLycM56KNuAtbJYA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black'), url('https://fonts.gstatic.com/s/lato/v13/R4a6fty3waPci7C44H8AjvY6323mHUZFJMgTvxaG2iE.woff2') format('woff2');
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    src: local('Lato Black'), local('Lato-Black'), url('https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* Center Bootstrap modals */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}