html, body {
    font-family: lato;
    margin: 0;
    padding: 0;
    /*background: #fff;*/
    font-weight: 300;
    color: #000;
    display: block;
    font-size-adjust: none !important;
}

body.debug:after {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    color: white;
    background: #3c3c3c;
}

.grade_detail_content {
    width: calc(100vw - 245px);
}

/*右侧标题样式*/
.topMenu {
    height: 100%;
    width: 99%;
    float: left;
    padding-left: 1%;
}

.report-tab-group{
    width: 100%;
    display: flex;
    align-items: center;
}

.report-tab-group .report-tab-item{
    padding: 0 20px;
    font-size: 22px;
    margin: 20px 0;
}

.report-tab-group .report-tab-item:hover{
    cursor: pointer;
}

.report-tab-group .report-tab-gap{
    border-right: 1px solid #607890;
}

.report-tab-group .report-active a{
    color: #0AD;
}

.report-tab-group .report-active{
    color: #0AD;
}


.subnav, .uncut, .cut, #novopro_screen {
    font-family: 'Lato', Verdana, sans-serif;
}

.srceen_set {
    position: fixed;
    top: 2.4rem;
    right: 4rem;
    z-index: 991;
}

.remove-new-icon {
    content: url('/content/images/icons-png/remove.png');

    display: block;
    width: 20px;
    height: 20px;

}

.icon-retest-icon {
    content: url('/content/images/icons-png/retestPQ.png');

    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;

}

.srceen_set a {
    font-family: 'Lato', Verdana, sans-serif;
    font-size: 18px;
    display: inline-block;
    margin: 0 1.5rem;
    color: #666666;
    font-weight: 300;
}

.doucuments {
    border: 1px solid #0093f1 !important;
    outline: 0 none;
    width: 380px;
    height: 80px !important;
    background: #fff !important;
    font-size: 1.35rem !important;
    color: #0093f1 !important;
    border-bottom: 0.8rem solid #0093f1 !important;
    font-family: "lato";
    font-weight: 400;
}

.thin h1 {
    padding: 10px 0px 0px;
}


/*DEVELOPMENT-HELPER STYLES*/

*[hide] {
    display: none !important;
}

/*body#forceten {
  font-size: 10px !important;
}*/

/*img[src="#"]{
  width: 8rem;
  height: 8rem;
  background: #ccc;
  }*/
#userprofile {
    width: 5.8rem;
    margin-left: 1.4rem;
    height: 5.8rem;
}

.sidenav {
    width: 234px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    display: block;
    background: #092838 !important;
    box-sizing: border-box;
    padding: 2rem 0rem 0rem 0rem;
    overflow: visible;
    z-index: 994;
    padding-top: 2rem;
}

/*fix jquery ui dialog is down after left menu*/
.ui-dialog {
    z-index: 995 !important;
}

.sidenav a {
    color: #fff;
    /*background: white;*/
    box-sizing: border-box;
    /*display: inline-block;*/
    width: 234px;
    font-weight: 300;
    padding-left: 0.85rem;

}

.fontcolors a {
    color: #fff !important;
}

.menubranding_logo {
    /*width: 85px;*/
    /*margin: 0px 0px 0px 15px;*/
}

#create {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    flex-direction: column;
}

.subnav {
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    overflow: hidden;
}

.subnav_heading, .subnav_headinged {
    font-size: 36px;
    font-weight: 300;
    color: #1F2937;
    padding: 1.5rem 0 1.5rem;
    margin: 0;
    float: left;
    font-family: Lato;

}

/**css*/

.subnav_heading a:hover {
    color: #0099ff !important;
}

.subnav_btn {
    display: inline-block;
    line-height: 3.8rem;
    height: 3.8rem;
    padding: 0 2rem;
    color: black;
    background: white;
    text-decoration: none;
    font-size: 1.7rem;
    text-align: center;
    display: inline-block;
    margin: 1.1rem 0 0 1.6rem;
    color: #FA8;
    border: 0.1rem solid #FA8;
    cursor: pointer;
}

.subnav_link {
    display: none;
    line-height: 3rem;
    height: 3rem;
    padding: 0 1.6rem;
    color: black;
    background: white;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    /*margin: 1.1rem 0 0 1.6rem;*/
    color: #0AD;
    cursor: pointer;
    font-weight: 400;
    /*border:1px solid #0AD;*/
    margin-left: 15px;
}

.subnav_borders {
    border: 1px solid #0AD;
}

.subnav_borders_height {
    line-height: 3rem !important;
}

.subnav_link--active {
    /*border: #0BF .1rem solid ;*/
    background: #0BF;
    color: #FFF;
    border-radius: 11px;
    border: none;
}

.screen_wrapper {
    right: 1%;
    top: 1%;
    left: 234px;
    bottom: 1%;
    margin-left: 1%;
    overflow: hidden;
    position: absolute;
}

.screen_wrapper--active {
    display: block;
}

.screen_content {
    position: relative;
    float: left;
    /*padding: 2rem 0 0;*/
    margin: 0;
    height: 95%;
    width: 100%;
    /*overflow: hidden;*/
    /*z-index:992;*/
    overflow-y: auto;
}

/*.ui-dialog{
    z-index:9995 !important;
}
.cke{
    z-index:9998 !important;
}*/
.userbox {
    overflow: visible;
    padding: 0 0px 16px 0;
    margin-top: 0;
}

.userimage-contain {
    position: fixed;
    top: calc(100vh - 90px);
    left: 0;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #4B6471;
}

.userimage-contain {
    width: 90px;
}

.userimage {
    width: 50px;
    height: 50px;
    background: url(../img/user.png) no-repeat center center;
    background-size: contain;
}

#userimage {
    background: url(../img/user.png) no-repeat center center;
    background-size: contain;
}

#userinfo {
    padding: 0 0 0 1rem;
}

.subnav_links:hover {
    color: #2c90ae;
    font-weight: 400;
}

.userbox_profileimg {
    max-width: 130px;
    max-height: 130px;
    display: block;

}

.userbox_name {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    /*margin-top: 140px;*/
    overflow: visible;
    line-height: 1.5rem;
    color: #fff;
    /*padding-left:1.22rem*/
}

#s_name {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
}

.sidenav a.switched {
    font-size: 12px;
    padding-top: 5px;
}


.userbox_name a {
    display: inline;
    padding: 0.5rem 0 0;
    margin-left: 15px;
    color: #fff;
    font-weight: 900;
}

.userbox_name a:hover {
    color: #52C2EA;
}

.userbox_organization {
    font-size: 12px !important;
    color: rgba(255, 255, 255, .49);
    margin: 0 !important;
    font-weight: 800 !important;
    width: 150px;
}

.scrollbar {
    float: left;
    overflow-y: auto;
}

.scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #092838;
    cursor: pointer;
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
    background-color: #092838;
    border-radius: 10px;
    cursor: pointer;
    height: 7px;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #F5F5F5;
    cursor: pointer;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #393737;
    cursor: pointer;
}

.scrollbar_right::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #fff;
    background-color: #fff !important;
    border: 0 none;
    cursor: pointer;
}

.scrollbar_right::-webkit-scrollbar {
    background-color: #fff !important;
    border: 0 none;
    width: 7px;
    cursor: pointer;
}

.scrollbar_right::-webkit-scrollbar-thumb:hover {
    background-color: #888 !important;
}

.scrollbar_left::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #e8e8e8;
    background-color: #e8e8e8 !important;
    border: 0 none;
    cursor: pointer;
}

.scrollbar_left::-webkit-scrollbar {
    background-color: #e8e8e8 !important;
    border: 0 none;
}

.scrollbar_left::-webkit-scrollbar-thumb {
    background-color: #e8e8e8;
    -webkit-box-shadow: inset 0 0 6px #e8e8e8;
}

.scrollbar_left::-webkit-scrollbar-thumb:hover {
    background-color: #e8e8e8;
}

.verticalmenu {
    display: block;
    padding: 12px 0 0 0;
    margin: 0;
    margin-left: 15px;
}

.verticalmenu_link {
    display: block;
    width: 90%;
    line-height: 38px;
    height: 38px;
    padding: 0;
    color: #fff;
    /*background: white;*/
    text-decoration: none;
    text-align: left;
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    /*cursor: pointer;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.verticalmenu_link a {
    font-size: 18px;
}

@media (max-width: 1025px) {
    .srceen_set a {
        /*color: #fff;*/
    }
}


@media (max-height: 769px) {
    /*.verticalmenu_link a{ font-size:18px; }
  .verticalmenu_link{ height:45px; line-height:45px;}*/
    .sidenav {
        padding-top: 0px;
    }

    h3 {
        font-size: 16px !important;
    }

    h4 {
        font-size: 15px !important;
    }
}

.main_contentwrapper {
    padding-top: 6rem;
    display: block;
    overflow: auto;
}

.contentsmenu {
    font-size: 1.2rem;
    line-height: 5.6rem;
    color: #777;
    text-decoration: none;
    height: 5rem;
    width: 14rem;
    display: block;
    background: #172c3a;
    float: left;
    color: #fff;
}

.hamburger {
    line-height: .6rem;
    font-weight: 900;
    display: block;
    width: 4.2rem;
    height: 5rem;
    padding: 1rem;
    font-size: 3rem;
    float: left;
    box-sizing: border-box;

}

.subnav_optionsblock {
    clear: right;
    display: block;
    float: left;
    margin-top: 5px;
}

.topnav {
    border-bottom: .1rem solid #ccc;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 5rem;
    line-height: 5rem;
    background: #172c3a;
    z-index: 99;
}

#mainmenu:target {
    display: block !important;
    top: 0;
    left: 0;
    /*background: rgba(255,255,255,.94);*/
}

/* Utility classes added for updateStatisticBtns.html */
.text-black { color: #000; }
.font-size-14 { font-size: 14px; }
.margin-h-5 { margin: 0 5px; }
.font-weight-bold { font-weight: 500; }
.blue-gradient-button {
    padding: 0px 22px !important;
    background: none;
    color: white;
    border: none;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    min-width: 88px;
    margin-right: 11px;
    border-radius: 10px;
    border-radius: 0;
    font-weight: 500;
    background: #f8f8f8;
    display: inline-block;
    text-align: center;
    border: 1px solid #999;
    color: #333;
    border-radius: 8px;
    font-weight: bold;
}
.blue-gradient-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.mr-5 { margin-right: 5px; }

/* Work status checkbox label highlight to match legacy jQuery behavior */
.custom-checkbox .el-checkbox__label {
    transition: color .15s ease-in-out;
}
/* Match Element UI structure: .el-checkbox__input (contains inner + original input) followed by .el-checkbox__label */
.custom-checkbox .el-checkbox__input.is-checked + .el-checkbox__label,
.custom-checkbox .el-checkbox.is-checked .el-checkbox__label {
    color: #409EFF !important;
}
/* Also color/ fill the inner box when checked */
.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #409EFF !important;
    border-color: #409EFF !important;
}
/* Force the checkmark pseudo-element to be visible when checked (in case other rules override it) */
.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner::after {
    -webkit-transform: rotate(45deg) scaleY(1) !important;
    transform: rotate(45deg) scaleY(1) !important;
    border-color: #FFF !important;
}

#mainmenu {
    padding-top: 0px;
}

#quickcreate {
    font-family: 'Lato', Verdana, sans-serif;
}

.tableofcontents_headingboxs a:hover {
    cursor: pointer;
    color: #fff !important;
}

.subnavs {
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    overflow: hidden;
    margin: 1% 0;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    justify-content: flex-start;
    padding-left: 1%;
    /*padding-bottom: 10px;*/
}

.editbox {
    position: relative;
    width: 60%;
    float: left;
    /*padding-left: 3%;*/
}

.editboxe {
    /*position: relative;*/
    /*width: 768px;*/
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.subnav_headings {
    font-size: 2.4rem;
    font-weight: 300;
    color: #555;
    margin: 0;
    float: left;
    border: 0 none;
    border-bottom: 0.1rem solid black;
    height: 4.5rem;
    width: 97%;
    white-space: nowrap;
    overflow: hidden;
    /*padding-left: 3%;*/
    background: 0 none;
    font-family: 'Lato', Verdana, sans-serif;
    text-overflow: ellipsis;
    padding-left: 1%;
}

.editimg {
    position: absolute;
    font-size: 1rem !important;
    top: 30px;
    right: 95px;
    color: #000;
}

.editimg:hover {
    color: #000;
}

.editimgone {
    top: 30px;
    right: 54px;
}

.subnav_optionsblocks {
    position: relative;
    width: 35%;
    padding-left: 77px;
    display: flex;
    align-items: center;
}

.subnav-btn-contain{
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
    border-radius: 10px;
    width: 50px;
    height: 35px;
    padding: 10px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subnav-btn-contain:hover{
    cursor: pointer;
}

.subicon{
    width: 32px;
}


#totalScoreDiv {
    display: inline-block;
    font-size: 1rem;
    color: #2f3131;
    font-style: italic;
    /*font-weight: 400;*/
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Lato', Verdana, sans-serif;
    /*margin-left: 80px;*/
}

#totalScore {
    padding-left: 8px;
}

.subnav_links {
    line-height: 3.8rem;
    height: 3.8rem;
    padding: 0 1.61rem;
    background: white;
    text-decoration: none;
    font-size: 1.41rem;
    text-align: center;
    display: inline-block;
    color: #0AD;
    cursor: pointer;
    margin-top: .5rem;
}

.subnav_canvans {
    color: #0AD;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.41rem;
    text-align: center;
    position: absolute;
    width: 60px;
    height: 60px;
    float: left;
    /* right: 50px; */
    left: 0;
}

.subnav_canvans_save {
    color: #0AD;
    cursor: pointer;
    text-decoration: none;
    font-size: 1.41rem;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin-left: -22px;*/
    /*margin-top: -9px;*/
    transform: translate(-50%, -50%);
}

.subnav-save-contain{
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
    border-radius: 10px;
    padding: 11px 20px;
}

.subnav-saving{
    filter: drop-shadow(0px 60px 0px #ffffff);
    position: relative;
    top: -60px;
}

#myCanvas {
    position: relative;
    left: 0px;
    top: 0px;
}

.tableofcontentss-contain {
    width: 27%;
    max-width: 27%;
    float: left;
    height: 100%;
}

.tableofcontentss {
    width: 25%;
    float: left;
    height: 100%;
    background: #e8e8e8;
}

.tableofcontentss-contain .arrow-contain {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    height: 100%;
    width: 4%;
    min-width: 10px;
    float: left;
    background-image: linear-gradient(to right, #ffffff, #edededdb);

}

.tableofcontentss-contain .arrow-contain {
    cursor: pointer;
}

.tableofcontentss-contain .arrow-contain:hover {
    background-image: linear-gradient(to right, #eceaea, #cbcbcbdb);
}

.tableofcontentss-contain .arrow-contain .arrow .icon-open {
    transform: rotate(180deg);
}

.tableofcontents_titles {
    font-size: 1.5rem;
    font-weight: 400;
    padding: 1rem 0 1rem 1rem;
    /*margin: 0px !important;*/
    position: relative;
    font-family: 'Lato', Verdana, sans-serif;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    margin: 10px 0;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px!important;
}

.tableofcontents_titles .edits {
    position: relative;
    /*right: 15px;*/
    /*top: 15px;*/
    color: #0099ff;
    cursor: pointer;
    margin-right:10px;
}

.tableofcontents_titles .addContentDropdown ul li:hover {
    color: #0099ff !important;
}

.tableofcontents_titles a:hover {
    color: #0099ff !important;
}

.tableofcontents_titles .tablecut {
    margin-right: 5px;
    font-family: 'Lato', Verdana, sans-serif;
}

.tableofcontents_titles .dones {
    position: absolute;
    right: 15px;
    color: #0099ff;
    top: 15px;
}

.editorh2 {
    font-family: 'Lato', Verdana, sans-serif;
}

.mianlinks {
    text-align: center;
    z-index: 999;
    padding-top: 120px;
    position: absolute;
    width: 100%;
}

.contentprebox {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 199;
}

.contentbox {
    width: 100%;
    height: 100%;
    z-index: 99;
    position: relative;
}

.mianlinks b {
    font-size: 1rem;
}

.mianlinks #ebookvurl {
    margin-left: 5px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

.mianlinks .white-gradient {
    width: 120px;
    height: 40px;
    margin: 30px 10px 0px 10px;
    border-radius: 10px;
}

.mianlinks #GameType {
    width: 200px;
    height: 40px;
    border-radius: 10px;
    padding-left: 10px;
    margin-left: 5px;
}

.mianlinks #webpageurl {
    width: 500px;
    height: 50px;
    border: 0 none;
    outline: none;
    line-height: 50px;
    font-size: 1rem;
    z-index: 999;
    background: #d9d1bc;
    margin: 12px 0px 0px 5px;
    border-radius: 10px;
    padding-left: 12px;
}

.webpages {
    width: 550px;
    margin: 0px auto;
}

.portrait #root {
    width: 458px;
    height: 696px;
}

.portrait .webpages {
    width: 450px;
}

.portrait .mianlinks {
    padding-top: 262px;
}

.portrait .mianlinks input[type=text] {
    width: 420px !important;
    margin-top: 10px;
}

.webpages .weburl {
    font-size: 17px;
    color: #7b797c;
    display: inline-block;
    float: left;
    margin-left: 8%;
    font-weight: 600;
    letter-spacing: 2px;
}

.utlbot {
    margin-top: 40px;
}

.btnurl {
    float: left;
    width: 42%;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    padding-left: 8%;
    letter-spacing: 2px;
    margin-top: 10px;
}

.btnurl span {
    font-family: 'LatoWebHeavy';
}

.urlimp {
    color: #5eb7ed;
    font-size: 15px;
    letter-spacing: 0px;
    font-family: 'Lato';
    font-weight: 400;
    text-decoration: underline;
}

.browse {
    width: 40%;
    height: 50px;
    border: 0 none !important;
    outline: none;
    line-height: 50px;
    font-size: 1rem !important;
    background: #d9d1bc;
    border-radius: 10px;
    padding-left: 12px;
}

.portrait .btnurl {
    font-size: 14px;
    width: 45%;
}

.portrait .urlimp {
    font-size: 12px !important;
}

@media (min-width: 1px) {
    .tableofcontents_lists {
        top: 7rem;
    }

    .tableofcontents_addcontents {
        clear: both;
        float: right;
        width: 100%;
        /*margin-top: 1rem;*/
        padding: 1rem 1rem;
        font-weight: 100;
        text-decoration: none;
        font-size: 1.2rem;
        background: #888;
        color: white;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/*.section_lessons{
    font-size:32px !important;
    line-height:34px !important;
}*/
.editorareas {
    flex: 1;
    width: 73%;
    overflow-y: auto;
    /*height: fit-content;*/
    /*height: 100%;*/
    background: #f6f6f6;
    min-width: 655px;
    margin-bottom: 65px;
}

.editindex {
    width: 100%;
}

.list_contents {
    width: 95%;
    margin-top: 40px;
    overflow-y: auto;
}

.list_content {
    width: 100%;
    /*height: 650px;*/
    overflow-y: auto;
    overflow-x: hidden;
    /*position:absolute;*/
    /*top:100px;*/
    white-space: nowrap;
    text-overflow: ellipsis;
    line-break: normal;
}

/*@media screen and (max-height:922px){
    .list_content {
        height:645px;
    }
     .screen_content{height:100% !important;}
}
@media screen and (max-height:798px){
    .list_content{height:520px;}
    .screen_content{height:97% !important;}
  
}
@media screen and (max-height:698px){
    .list_content{height:500px;}
    .screen_content{height:118% !important;}
}*/

.editindex div span {
    /*display: inline-block;*/
    font-size: 1.2rem;
    /*text-align: center;*/
    font-weight: 400;
    /*width: 100%;*/
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*position: relative;*/
    /*top: 20px;*/
}

.editorh2 {
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    padding-top: 5rem;
    color: #000;
}

.editorcenter .editorul {
    width: 652px;
    height: 470px;
    margin: 0px auto;
}

.editorcenter .editorul>div {
    float: left;
    width: 150px;
    height: 150px;
    margin: 0px 12px 12px 0px;
}

.editorcenter .editorul .editaa {
    /*display: inline-block;*/
    /*position: relative;*/
    /*background: url(/img/session.png?v=3) no-repeat;*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    cursor: pointer;
    border-radius: 20px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25));
}

.editaa {
    color: #fff;
    display: inline-block;
    width: 100px;
    height: 80px;
    cursor: pointer;
    position: relative;
    background-size: 90%;
    border-radius: 5px;
}
.editaa .edit-content{
    width: 100%;
    height: auto;
    flex-direction: column;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editaa .edit-content>span {
    width: calc(100% - 20px);
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-top: 12px;
    padding: 0 10px;
    height: 20px;
}

.editaa .switch-content{
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
}
.editaa .switch-content>span {
    width: calc(100% - 20px);
    color: #fff;
    font-size: 13px;
    text-align: center;
    margin-top: 6px;
    padding: 0 10px;
    height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.editorcenter .editorul .editab {
    display: inline-block;
    width: 308px;
    height: 150px;
    background: url(/img/session_btn.png) no-repeat;
    cursor: pointer;
    position: relative;
}

.editorcenter .editorul .editab span {
    color: #0c68bd;
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 100px;
}


.editorcenter .editorul .link-contain {
    background: #ffffff;
}


.editorcenter .editorul .import-ppt-contain {
    background: #BF4D34;
}

.editorcenter .editorul .editorimg13 {
    background-position: 0px -1668px;
}


.editorcenter .editorul .editorimg18 {
    background: url(/img/session.png?v=3) no-repeat;
    cursor: pointer;
    display: inline-block;
    background-position: 0px -1980px;
    width: 222px;
    font-size: 18px;
}

.editorimg00 {
    background-position: 0px -913px;
}

.editorimg02 {
    background-position: 0px -91px;
}

.editorimg03 {
    background-position: 0px -182px;
}

.editorimg04 {
    background-position: 0px -1094px;
}

.tableofcontents_body {
    height: 100%;
}

.tableofcontents_entry {
    font-family: 'Lato', Verdana, sans-serif;
    /*width: 100%;*/
    display: block;
    line-height: 181%;
    font-size: 1.4rem;
    padding: 1rem 0 1rem 1.5rem;
    box-sizing: border-box;
    color: #000;
    min-height: 55px;

    position: relative;
    font-weight: 300;
    border-bottom: 1px solid #d6d2d2;
    margin: 0 5px 10px 5px;
}

.tableofcontents_entry .menu-color-block{
    width: 18px;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
}

.tableofcontents_entry .content-container{
    display: flex;
    align-items: center;
}

.tableofcontents_entry .content_title_input{
    width: 80%;
}

.tableofcontents_entry .content_title_text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.tableofcontents_entry .menu-content-info{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}
.tableofcontents_entry .menu-edit-buttons{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;
}

.SingleChoice-bgColor{
    background-color: #5C7FBB;
}
.MultipleChoice-bgColor {
    background-color: #B17953;
}

.PaintIn-bgColor {
    background-color: #B75C94;
}
.PaintOut-bgColor {
    background-color: #5446C5;
}
.FillBlank-bgColor {
    background-color: #719ECE;
}
.EBook-bgColor {
    background-color: #B76233;
}
.Video-bgColor {
    background-color: #97BE45;
}
.WebPage-bgColor{
    background-color: #AE35B9;
}
.Documentation-bgColor{
    background-color: #62A1EE;
}
.OpenEnded-bgColor {
    background-color: #DAC062;
}

.tableofcontents_entry i {
    font-style: normal;
}

.tableofcontents_entry .closes {
    /*position: absolute;*/
    /*right: 8px;*/
    /*top: 11px;*/
    font-size: 1.2em !important;
    /*font-size: 1.31rem;*/
    line-height: 40px;
    color: #888;
    display: block;

}

.tableofcontents_entry .copys {
    /*position: absolute;*/
    /*right: 48px;*/
    /*top: 24px;*/
    /*font-size: 1.31rem;*/
    line-height: 151%;
    display: block;
    width: 20px;
    height: 22px;
    background: url('/images/copy.png');
}

.tableofcontents_entry .edit {
    /*position: absolute;*/
    /*right: 88px;*/
    /*top: 17.5px;*/
    font-size: 1.6rem;
    line-height: 100%;
    display: block;
    width: 20px;
    height: 22px;
    color: #888888;
    margin-right:5px;
}

.tableofcontents_entry .edit-slide-properties {
    position: absolute;
    right: 0;
    width: 60px;
}

.tableofcontents_entry .copys:hover {
    background: url('/images/copyed.png');
}

.tableofcontents_entry .edit:hover {
    color: #c2baba
}

.tableofcontents_entry .sorts {
    color: #888;
    margin-right: 5px;
}

.tableofcontents_entry .closes:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
    transform-origin: 50%;
    -moz-transform-origin: 50%;
    -webkit-transform-origin: 50%;
    -o-transform-origin: 50%;
}

.tableofcontents_entry:hover {
    color: #000 !important;
    cursor: pointer;
    background: #eeeeee;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.tableofcontents_entry--selected {
    background: #ffffff;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#quickcreate .ipad {
    background: 0 none;
    padding: 0px;
    width: 696px;
    height: 458px;
    position: absolute;
    margin: 10px 0px 0px 10px;
}

.editor_index {
    display: none !important;
}

.addContentDropdown {
    position: absolute;
    top: 30px;
    left: -50px;
    width: 110px;
    /* height: 300px; */
    border-radius: 10px;
    border: 2px solid #A6A6A6;
    font-size: 12px !important;
    font-weight: normal !important;
    background: #f6f6f6;
    padding-top: 5px;
    display: none;
    z-index: 3001;
}

.addContentDropdown ul {
    width: 100%;
    height: 100%;
}

.addContentDropdown ul li {
    float: left;
    text-align: center;
    width: 100%;
    padding: 5%;
    font-size: 1rem;
    font-family: 'Lato', Verdana, sans-serif;
}

.addContentDropdown ul li a {
    color: #000
}

.contenttitle {
    border: 0 none;
    background: 0 none;
    /*border-bottom: 0.1rem solid black;*/
    width: 60%;
    font-size: 1.8rem;
    margin: 2.8rem 2rem 1rem 2rem;
    /*height: 3rem;*/
    display: block;
    font-weight: 400;
    /*padding: 1rem 0 0 2rem;*/
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Lato', Verdana, sans-serif;
}

.contenttitle:empty:before {
    height: 3rem;
    content: 'Enter Title';
    position: absolute;
    bottom: 0;
    left: 1rem;
    display: inline;
    opacity: 0.2;
    font-weight: 200;
    width: 20rem;
    overflow: visible;
    pointer-events: none;
}

.contenttitle:empty:before:hover {
    background: red;
}

.include {
    margin-bottom: 8px;
    float: left;
    width: calc(100% - 15px);
    height: 60px;
    background-color: #092838;
    font-size: 18px;
    color: #fff;
    padding-left: 15px;
}

.include .icons {
    width: 33%;
    height: 60px;
    position: relative;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /*-webkit-justify-content: space-around;
    justify-content: space-around;*/
    -webkit-justify-content: flex-start;
    justify-content: flex-start;

    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.include .icons .icons-contain .question .lesson_models {
    display: none;
    position: absolute;
    width: auto;
    height: auto;
    left: -15px;
    top: 68px;
    z-index: 3000;
}

.include .icons .icons-contain .question .lesson_models a:focus {
    outline: none !important;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container {
    width: 600px;
    height: 120px;
    padding-left: 10px;
    position: relative;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #9D9D9D;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container .blank_page {
    width: 150px;
    border-left: 3px solid #000000;
    padding-left: 10px;
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: column;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container .blank_page .title {
    margin-bottom: 5px;
    color: #000;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container .other_type {
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: column;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container .other_type .title {
    margin-bottom: 5px;
    color: #000;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container:before, .include .icons .lesson_models .lesson_models_container:after {
    position: absolute;
    content: " ";
    top: -38px;
    left: 15px;
    display: block;
    width: 0;
    height: 0;
    border: 18px solid #9D9D9D;
    border-color: transparent transparent #9D9D9D transparent;
    z-index: 111;
}

.include .icons .icons-contain .question .lesson_models .lesson_models_container:after {
    top: -35px;
    left: 15px;
    border-color: transparent transparent #ffffff transparent;
    z-index: 222;
}

.include .switches {
    float: right;
    min-width: 45%;
    /*width: 50%;*/
    height: 60px;
    line-height: 60px;
    text-align: right;
    overflow: hidden;
    padding-right: 15px;
}

.include .icons .icons-contain {
    width: 100%;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;

    color: #fff;
}

.include .root-actions {
    width: 362px;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;

}

.include .item-actions {
    display: none;
    align-items: center;
}

.include .item-actions .icons-contain div {
    cursor: pointer;
}

.include .item-actions .icons-contain div:hover {
    color: #52C2EA;
}

.include .item-actions .icons-contain div:active {
    color: #52C2EA;
}

.include .icons {
    color: #fff;
}

.include .icons .icons-contain .question {
    padding: 3%;
    position: relative;
}

.include .icons .icons-contain .question .question_inactive {
}

.include .icons .icons-contain .question .question_active {
    display: none;
}

.include .icons .icons-contain .addText {
    padding: 3%;
}

.include .icons .icons-contain .addImage {
    padding: 3%;
}

.include .icons .icons-contain .addAnimation {
    padding: 3%;
    color: #fff;
}

.include .icons .icons-contain .addFillBlank {
    padding: 3%;
}

.include .icons .icons-contain .undo {
    padding: 3%;
}

.include .icons .icons-contain .redo {
    padding: 3%;
}

.include .editSlide {
    /*padding: 3%;*/
    margin: 0;
    border: 0;
    height: 60px;
    position: relative;
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    margin-left: 13px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.include .icons .icons-contain .template {
    padding: 3%;
    margin: 0;
    border: 0;
}

.include .icons .icons-contain .property {
    padding: 3%;
    margin: 0;
    border: 0;
}

.include .icons .icons-contain .question .question_inactive {
    width: 18px;
    height: 18px;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -2px -2px;
    cursor: pointer;
}

.include .icons .icons-contain .question .question_inactive:hover, .include .icons .icons-contain .question .question_inactive:active {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -2px -32px;
}

.include .icons .icons-contain .question .question_active {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -2px -32px;
}

.include .icons .icons-contain .text_inactive div {
    width: 23px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -24px -3px;
}

.include .icons .icons-contain .text_inactive div:hover, .include .icons .icons-contain .text_inactive div:active {
    width: 23px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -24px -33px;
}

.include .icons .icons-contain .image_inactive div {
    width: 25px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -52px -3px;
}

.include .icons .icons-contain .image_inactive div:hover, .include .icons .icons-contain .image_inactive div:active {
    width: 25px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -52px -33px;
}

.include .icons .icons-contain .action_inactive div {
    width: 18px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -196px -3px;
}

.include .icons .icons-contain .action_inactive div:hover, .include .icons .icons-contain .action_inactive div:active {
    width: 18px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -196px -33px;
}

.include .icons .icons-contain .fillBlank_inactive div {
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -277px -3px;
}

.include .icons .icons-contain .fillBlank_inactive div:hover, .include .icons .icons-contain .fillBlank_inactive div:active {
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -277px -33px;
}

.include .icons .icons-contain .undo_inactive div {
    width: 22px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -84px -3px;
}

.include .icons .icons-contain .undo_inactive div:hover, .include .icons .icons-contain .undo_inactive div:active {
    width: 22px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -82px -33px;
}

.include .icons .icons-contain .redo_inactive div {
    width: 22px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -112px -3px;
}

.include .icons .icons-contain .redo_inactive div:hover, .include .icons .icons-contain .redo_inactive div:active {
    width: 22px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -112px -33px;
}

.include .edit_slide_inactive div {
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -221px -3px;
}

.include .edit_template_inactive div {
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -304px -3px;
}

.include .edit_slide_inactive div:hover, .include .edit_slide_inactive div:active {
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -221px -33px;
}

.include .icons .icons-contain .setting_inactive div {
    width: 16px;
    height: 14px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -246px -5px;
}

.include .icons .icons-contain .setting_inactive div:hover, .include .icons .icons-contain .setting_inactive div:active {
    width: 16px;
    height: 14px;
    cursor: pointer;
    background: url('/Images/quickCreateIcons.png?v=1') no-repeat -246px -35px;
}


.page-cover {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 2999;
    display: none;
}


.records {
    color: #fff;
    cursor: pointer;
    margin-right: 6px;
}

.recorded {
    color: rgb(52, 158, 219);
}

.recorded span {
    color: rgb(52, 158, 219) !important;
}

.include input {
    cursor: pointer;
}

.include label {
    cursor: pointer;
}

.contenteditor_container {
    clear: both;
    background: #FFFFFF;
    /*width: 720px;*/
    display: block;
    margin-left: 2rem;
    position: relative;
    /*overflow: visible;*/
    /*height: 480px;*/
    width: fit-content;
    height: fit-content;
    border-radius: 10px;
}

.portrait ol {
    width: 388px !important;
    margin: 50px auto !important;
}

.contenteditor_content {
    /*position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;*/
}

.contenteditor_tap {
    position: absolute;
    top: 0;
    left: 0;
    background: #9e9786;
    width: 100%;
    height: 100%;
    z-index: 3;
    border-radius: 10px;
    opacity: 0.9;
}

.contenteditor_tap_txt {
    width: 90%;
    height: 85%;
    top: 50%;
    left: 50%;
    position: absolute;
    border: 5px dashed #c8c4b8;
    border-radius: 10px;
    z-index: 4;
    transform: translateX(-50%) translateY(-50%);
}

.add_item {
    color: #90ff98;
    font-size: 2.2em;
    text-align: center;
    line-height: 45px;
    font-family: LatoWebSemibold;
    font-style: normal;
    margin-top: 170px;
    text-transform: uppercase
}

.portrait .add_item {
    margin-top: 265px;
}

/*DEVELOPMENT-HELPER STYLES*/
*[hide] {
    display: none !important;
}

body#forceten {
    font-size: 12px !important;
}

img[src="#"] {
    width: 8rem;
    height: 8rem;
    background: #ccc;
}

.screen_contents {
    position: relative;
    /*padding: 2rem 0 0;*/
    margin: 0;
    height: 95%;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.screen_contents--actives {
    display: block;
    height: auto;
    width: 100%;
}

.screen_contents img {
    height: 40px;
}

.wel_indextxt {
    width: 42%;
    font-size: 25px;
    line-height: 30px;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 300;
}

.wel_create {
    display: inline-block;
    height: 65px;
    text-align: center;
    line-height: 65px;
    background: #00bbff;
    color: #fff;
    font-size: 25px;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 300;
    border-bottom: 6px solid #028ebb;
    padding: 0px 46px;
}

.section_noLesson {
    position: absolute;
}

.section_normal {
    position: absolute;
    left: 18px;
    width: 96%;
}

#CardImageList h2 {
    font-size: 16px;
    padding: 12px 0px;
    font-weight: 600;
    text-align: center;
}

.lastedited_h {
    font-size: 25px;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 400;
    line-height: 45px;
}

.lessontxt {
    font-size: 25px;
    color: #5bbdd4 !important;
    display: inline-block;
    line-height: 45px;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 400;
}

.lastedted_mian {
    margin-top: 30px;
}

.lastted_left {
    width: 40%;
    float: left;
    margin-right: 2%;
}

.lastedted_mian ul {
    margin: 15px 0px 0px;
    width: 100%;
}

.lastedted_mian li {
    list-style-type: none;
    line-height: 22px;
    margin: 16px 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.lastted_right {
    width: 40%;
    float: left;

}

.subnav_heading a {
    color: #555;
}

.lessontxts {
    font-size: 20px;
    color: #6ea5b2;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 300;
}

.seealllesson {
    font-size: 20px;
    color: #2f5165 !important;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 400;
}

.uploadicon {
    padding-right: 8px !important;
}

.uploadicons {
    font-size: 75px !important;
    color: #63b5e7;
}

.uploadtext {
    color: #5f5f5f;
    height: 50px;
    display: inline-block;
    font-size: 24px;
}

.upload-ppt-container {
    text-align: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.upload-ppt-container .left-container, .upload-ppt-container .right-container {
    width: 28%;
    padding: 0 6%;
    height: 80%;
    position: absolute;
    top: 10%;
    border: 2px solid #000;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
}

.upload-ppt-container .left-container {
    left: 5%;
}

.upload-ppt-container .right-container {
    right: 5%;
}

.container-box h3 {
    font-weight: 600;
    font-size: 15px;
    font-family: Arial;
}

.container-box h2 {
    font-weight: 600;
    font-size: 22px;
    font-family: Arial;
}

.uploadNewIcon {
    display: inline-block;
    background: url(/img/upload.png) no-repeat;
    width: 100px;
    height: 74px;
}

.upload-ppt-container .uploadtext {
    display: none;
}


.dragprofile {
    width: 498px;
    height: 400px;
    border: 1px dashed #ccc;
    margin-top: 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 99;
}

.dragprofile_box {
    position: fixed;
    width: 300px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin: -100px 0px 0px -150px;
    text-align: center;
    padding-top: 20px;
}

.dragprofile_txt {
    display: inline-block;
    font-size: 24px;
    line-height: 36px;
    color: #ccc;
    padding-bottom: 10px;
}

.fileloadimg {
    width: 150px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    background: rgb(0, 153, 255);
    outline: 0 none;
    border: 0 none;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 400;
    color: #fff;
    border-radius: 8px;
}

.fileloadimgs {
    color: #717171;
    font-size: 24px;
    outline: 0 none;
    border: 0 none;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 400;
}

.addborder {
    border: 2px dashed #666666 !important;
    width: 496px;
    height: 398px;

}

/**email*/
.emailbox {
    text-align: center;
    padding: 40px 45px;
}

.emailbox_input {
    margin-left: 5px;
}

.emailbox_lable {
    padding-right: 20px;
}


/**Course Book*/
.courseBokk_submit {
    font-size: 1.1rem;
    display: block;
}

.giant-input {
    display: block;
    font-size: 2.2rem;
    line-height: 4rem;
    padding: 1rem 0;
    background: none;
    border: none;
    border-bottom: .2rem #dca solid;
    background: rgba(255, 255, 255, .49);
    margin: 1rem auto;
    width: 88%;
    text-align: center;
    font-weight: 200;
    font-family: Lato;
    letter-spacing: -.1rem;
}

.puslishered {
    width: 500px;
    margin: 10px auto 0px;
}

.section_title {
    padding: 10px 0px;
    width: 100%;
    font-size: 1.8rem;
    height: auto;
    position: relative;
    display: block;
    font-weight: 400;
    text-align: center;
    color: #000;
}

.section_title:empty:before {
    height: 3rem;
    content: 'Enter Title';
    position: absolute;
    bottom: 0;
    left: 1rem;
    display: inline;
    opacity: .2;
    font-weight: 200;
    width: 20rem;
    overflow: visible;
    pointer-events: none;
}

.section_title:empty:before:hover {
    background: red;
}

.couesebook_textarea {
    font-size: 1.1rem;
    line-height: 1.4rem;
    padding: 1rem;
    background: none;
    border: none;
    border-bottom: .2rem #dca solid;
    background: #fff;
    width: 88%;
    color: #000;
    text-align: left;
    font-family: 'LatoWebLight';
    font-family: Lato;
    height: 13.5rem;
    margin: 3.4rem auto 0;
    position: relative;
    display: block;
}

.course_lessonlist {
    display: block;
    width: 61%;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
    position: relative;
}

.course_settings {
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    /*height:120px;*/
    /*background:#f9f3e5;*/
    /*border-bottom: .2rem #dca solid;*/
    padding: 20px 2%;

    line-height: 30px;
    font-weight: 400;

}

.course_settings_ul, .course_settings_ul_two {
    float: left;
    background: #f9f3e5;
    padding: 40px 6% 35px;
    width: 36%;
    margin: 1%;
    height: 120px;
}

.course_settings_ul li, .course_settings_ul_two li {
    font-size: 14px;
}

.course_settings_ul_two {
    height: 180px;
}

.course_settings_ul_two li .input {
    width: 92%;
}

.course_settings_ul_two li .label {
    padding-left: 5px;
}

.course_settings_ul_two b {
    font-weight: 400;
    line-height: 20px;
    color: #000;
}

.course_settings_ul li, .course_settings_ul_two li {
    color: #000;
}

.course_settings_ul_two .course_settings_ultitle {
    line-height: 36px;
}

.course_settings_ultitle {
    font-size: 18px !important;
}

.showanswers {
    border: 0 none;
    background: none;
}

.lessonlist_span, .sessionList_span, .studentList_span, .preSessionList_span {
    width: 100%;
    display: block;
    height: 3.8rem;
    background: rgba(255, 255, 255, .49);
    font-size: 1.4rem;
    line-height: 3.8rem;
    margin-top: .2rem;
    padding: 0;
    cursor: pointer;
}

.lessonlist_span_title {
    width: 100%;
    display: block;
    height: 3.8rem;
    background: rgba(255, 255, 255, .49);
    font-size: 1.4rem;
    line-height: 3.8rem;
    margin-top: .2rem;
    padding: 0;
}

.lessonlist_span[data-type="Interactive"] .list_converter {
    color: red;
}

.lessonlist_btn_lesson {
    width: 100% !important;
    font-size: 1.8rem !important;
    text-indent: -3rem;
}

.lessonlist_btn:hover {
    color: #fff;
    cursor: pointer;
}

.lessonlist_btn_sidebyside {
    width: 16rem !important;
    font-size: 1.8rem !important;
    display: inline-block;
}

.lessonlist_btn {
    font-size: 2.4rem;
    color: white;
    height: 4rem;
    min-width: 0;
    width: auto;
    padding: 0 2rem;
    display: inline-block;
    clear: both;
    text-align: center;
    line-height: 4rem;
    background: #0AD;
    border-bottom: .4rem solid #08B;
    margin: 0 auto;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 300;
}

.lessonlist_btn_reaction {

    font-size: 14px !important;
    height: 3rem;
    line-height: 3rem;
    margin-top: 10px;

}

.list_move {
    width: 8%;
    height: 3.8rem;
    text-align: center;
    line-height: 3.8rem;
    display: block;
    cursor: pointer;
    float: left;
}

.lesson_title, .session_title, .student_title, .preSession_title {
    width: 80%;
    display: block;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.lesson_percent {
    width: 65%;
    display: block;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.lesson_percent_title {
    display: block;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 500;
    margin-left: 8%;
}

.percent_input {
    line-height: 3rem;
    background: none;
    border: none;
    border-bottom: .2rem #dca solid;
    background: rgba(255, 255, 255, .49);
    width: 10%;
    text-align: center;
    font-weight: 200;
    font-family: Lato;
    letter-spacing: -.1rem;
    margin-right: 1rem;
}

.percent_input_title {
    display: block;
    float: right;
    background: none;
    border: none;
    text-align: center;
    font-weight: 500;
    margin-right: 8%;
}

.certif_common_input {
    line-height: 3rem;
    background: none;
    border: none;
    border-bottom: .2rem #dca solid;
    background: rgba(255, 255, 255, .49);
    width: 30%;
    text-align: center;
    font-weight: 200;
    font-family: Lato;
    letter-spacing: -.1rem;
    margin-right: 1rem;
}

.list_delete {
    width: 8%;
    height: 3.8rem;
    text-align: center;
    line-height: 3.8rem;
    display: block;
    cursor: pointer;
    float: right;
    color: red;
    font-weight: bold;
    font-size: 2.2rem;
}

.list_converter {
    width: 4%;
    height: 3.8rem;
    text-align: center;
    line-height: 3.8rem;
    display: block;
    cursor: pointer;
    float: left;
    font-weight: bold;
    font-size: 2.2rem;
}

.coverpreview {
    width: 24rem;
    height: 36rem;
    background: #777 no-repeat center center; 
    background-size: contain;
    border: .3rem #777 dashed;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    text-align: center;
    padding: 2rem 2.4rem;
    box-sizing: border-box;
}

.course_options {
    width: 100%;
    text-align: center;
    margin: 4rem 0 4rem;
}

.coursebook_form {
    background: #f1e7cc;
    width: 88%;
    margin: 3% auto;
    display: block;
    position: relative;
    overflow: visible;
    overflow: hidden;
    height: auto;
}

.bottom120 {
    visibility: hidden;
    position: relative;
    float: left;
    width: 100%;
    clear: both;
    height: 12rem;
}

#covertext {
    color: white;
    position: relative;
    font-size: 1.6rem;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 32px;
}

.less_addshadow:after {
    content: ' ';
    position: absolute;
    background: #000;
    height: .39rem;
    left: .61rem;
    right: .61rem;
    bottom: -.39rem;
    display: block;
    opacity: .08;
}

#librarysearch {
    /*width: 68rem;*/
    height: 3.8rem;
    display: table;
    /*margin-left: 2rem;*/
    /*float: left;*/

    margin: 2.4em auto;
}

#librarysearch_submit {
    width: 3.1rem;
    height: 3.1rem;
    background: #aaa;
    color: white;
    line-height: 3.2rem;
    text-align: center;
    position: absolute;
    right: .35rem;
    top: .35rem;
    display: block;
    border-radius: 2rem;
}

.librarylist {
    float: left;
    width: 400px;

    margin-top: -35px;
    padding-right: 20px;
}

.librarylist a {
    line-height: 50px;
    font-size: 1.4rem;
}

#searchwithin {
    width: 28rem;
    height: 3.8rem;
    font-size: 1.4rem;
    font-family: Lato;
    padding-left: 1rem;
    border-radius: 2rem;
    border: 0.1rem #ccc solid;
    float: left;
    margin-right: 15px;
}

#schoolFilter {
    float: left;
    width: 28rem;
    height: 3.8rem;
    font-size: 1.4rem;
    font-family: Lato;

}

#schoolFilter .select2-container--default .select2-selection--multiple {
    width: 27.2rem !important;
    min-height: 3.8rem;
    font-size: 1.4rem;
    font-family: Lato;
    border-radius: 2rem;

    padding: 7px 0px;
    padding-left: 0.8rem;
}

/*.select2-container--open .select2-dropdown--below{

width:32rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
width:4rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size:1rem;
}*/
#schoolFilter:focus {
    color: black;
}

#schoolFilter:empty {
    color: #888;
}

#searchwithin:focus {
    color: black;
}

#searchwithin:empty {
    color: #888;
}

a.librarysidebars_entry {
    text-decoration: none;
    color: black;
    font-size: 1.2rem;
    font-weight: 300;
    font-family: 'Lato', Verdana, sans-serif;
}

.librarysidebars_headingbox {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.librarysidebars_title {
    float: left;
    position: relative;
    padding: 2rem 0 0 2rem;
    margin: 0;
    font-weight: 500;
    font-size: 1.2rem;

    color: #000;
}

.librarysidebars {
    width: 25%;
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    padding-bottom: 40px;
    background: #ddd;
    overflow-y: auto;
}

.librarysidebars_entry {
    width: 100%;
    display: inline-block;
    line-height: 151%;
    font-size: 1.41rem;
    padding: 1rem 2rem;
    box-sizing: border-box;
}

.librarysidebars_entry--selected {
    background: #f0f0f0;
    font-weight: 400 !important;


}

.librarysidebars_list {
    width: 100%;
    overflow: auto;
    margin-top: 1rem;
}

@media (min-width: 1px) {

    .librarysidebars_list {
        top: 7rem;
    }

    .librarysidebars_addcontent {
        clear: both;
        float: right;
        width: 100%;
        margin-top: 1rem;
        padding: 1rem 1rem;
        font-weight: 100;
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        background: #888;
        color: white;
        box-sizing: border-box;
    }
}

.librarycontents_wrapper {

    font-family: 'Lato', Verdana, sans-serif;
}

.wysiwygsampleimage {
    height: auto;
    width: 120%;
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}

.librarycontents_view {
    width: 100%;
    display: block;
    position: relative;
    overflow: visible;
    overflow: hidden;
    height: auto;
}

.coursebookeditor_navigation {
    width: 100%;
    display: block;
    float: left;
    text-align: center;
    height: 5.8rem;
    padding-top: 2rem;
}

#lesson_list {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
    position: relative;
}

.subnav_title a {
    line-height: 3.2rem;
    height: 2.2rem;
    padding: 0 1.61rem;
    color: black;
    background: white;
    text-decoration: none;
    font-size: 1.41rem;
    text-align: center;
    display: inline-block;
    color: #0AD;
    cursor: pointer;
    margin-top: 0.5rem;
}


.coursebook {
    display: block;
    height: 300px;
    width: 200px;
    float: left;
    margin: 12px;
    padding: 10px 8px;
    box-sizing: border-box;
    color: white;
    cursor: pointer;
    background: #777 center center;
    background-size: contain;
}

.coursebook:hover {
    color: #fff;
}

.coursetitle {
    width: 100%;
    font-size: 1.6rem;
    text-align: center;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 300;
    line-height: 1.8rem;
    overflow: hidden;
    max-height: 16.2rem;
    word-break: break-all;
    /*text-overflow: ellipsis;
    display: inline-block;
     display: -webkit-box;
   -webkit-line-clamp: 8;
   -webkit-box-orient: vertical;*/
    /*position:relative;
     margin-right: -1em;
      padding-right: 1em;*/
}

.coursetitle::before {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 0em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
    /*background: white;*/
}

.coursetitle::after {
    content: attr(data-attr);
    position: absolute;
    bottom: 0px;
    right: -20px;
    padding: 0 20px 1px 15px;
}

.courseauthor {
    display: block;
    width: 100%;
    margin: 8px 0;
    font-size: 1rem;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 300;
    line-height: 20px;
    text-align: center;
}

.bookselect {
    width: 20px;
    height: 20px;
    margin: 0px 0px 12px 0px !important;
}

.tableofcontents_entry_error {
    color: red;
    font-weight: 600;
}

.courseBokk_error {
    font-size: 27px !important;
    color: red;
    font-weight: 600;
}

.coursebooked {
    box-shadow: 0 0 3px 3px #615d5d, 0 0 3px 6px #b5adad;
    border-radius: 6px;
    opacity: 0.75;
}

.nasped {
    margin-left: 15px;
}

.betaup {
    position: absolute;
    left: 63px;
    top: -11px;
}

.deletecoursebook {
    margin-top: 5px;
    padding: 15px;
    width: 398px;
    line-height: 22px;
    text-align: center;
}

.deletecoursebookip {
    width: 366px;
    height: 30px;
    margin-top: 15px;
    font-size: 20px;
}

.deletebookerror {

    border: 1px solid red;
}

.acbooktitle {
    font-family: 'Lato', Verdana, sans-serif;
    font-size: 20px;
    padding: 0px 0px 15px;
    line-height: 24px;
}


/*systemadmin下schools的app预览效果*/
.preview_appcolor, #library_bgcolored, #preview_menu {
    width: 320px;
    height: 568px;
    background: #0b191c;
    position: absolute;
    top: 0;
    right: 35%;
    margin: 0px 0px 0px -160px;
    font-family: 'Lato', Verdana, sans-serif;
    font-weight: 400;
    z-index: 99;

}

.userphotos {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 4px solid #6d9058;
    float: left;

}

.preview_title_txt {
    padding: 15px;
    text-align: right;
    height: 50px;
}

.usertxt {
    float: left;
    padding: 25px 0px 0px 10px;
    color: #fff;
    font-size: 15px;
}

#preview_close {
    padding-top: 15px;
    font-size: 25px;
    color: #696041;
    float: right;
}

.user_options, .user_logout {
    display: block;
    font-size: 18px;
    font-style: italic;

}

#user_options {
    color: #6d6540;
    font-size: 16px;
}

.user_logout {
    color: #a59756;
}

#preview_checkboxs {
    border: 2px solid #6d726b;
    background: #4a4132;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    float: left;
}

#preview_checkbox_txt {
    float: left;
    font-size: 20px;
    color: #757a7d;
    border: 2px solid #000;
}

.preview_recommended {
    color: #696355;
    font-size: 12px;
}

.preview_top, #library_top {
    height: 200px;
    width: 100%;

}

.preview_middle {
    width: 100%;
    height: 180px;
    background: #1b2b2a;
    border-bottom: 3px solid #525044;
}

.preview_bototm {
    width: 100%;
    height: 160px;
    background: #3e615d;
}

.preview_self {
    width: 100%;
    height: 80px;
    background: #937c50;
}

#lesson_library, .Instrunctor_led, .Instrunctor_led_textColor, .Self_paced_textColor, #seachbytitle {
    display: block;
    padding: 6px 0px;
    font-size: 18px;
}

#lesson_library {
    color: #6d643b;
}

.Instrunctor_led {
    color: #a28c5d;
}

#seachbytitle {
    color: #6f5c3c;
}

#library_top {
    height: 280px;
}

#library_middle {
    width: 100%;
    height: 288px;
    background: #3e615d;
}

.library_instructor_txt {
    display: block;
    width: 100%;
    height: 50px;
    background: #937c50;
    line-height: 30px;
}

.library_instructed, .library_seflpaced {
    color: #775e35;
    font-size: 20px;
}

.library_selftxt {
    display: block;
    width: 100%;
    height: 110px;
    background: #3e615d;
    line-height: 30px;
}

#library_lessionnametxt {

    color: #fff;
    float: left;
}

#library_complete {

    color: #5d5141;
    float: right;
}


#preview_menu_top {
    background: #205865;
    height: 60px;
    border-bottom: 6px solid #1e4e5a;
}

#preview_meun_txt {
    color: #e2e9b6;
    font-size: 20px;
    float: left;

}

.previewMenuTop {
    border-bottom: 4px solid #000;
}

#preview_inputs {
    float: left;
    font-size: 12px;
    margin-left: 10px;
    width: 180px;
    height: 30px;
    outline: 0 none;
    border: 0 none;
    background: white;
    border-radius: 20px;
    text-align: center;
}

#preview_meun_mian {
    width: 100%;
    height: 508px;
    background: #276677;
}

.coursebook_div {
    width: 72px;
    height: 100px;
    margin: 5px;
    background: #ccc;
    border: 1px solid #000;
    float: left;
    text-align: center;
    padding-top: 20px;
    color: #fff;
}

/*single Choice css**/
.inputTxt, .choiceIput {
    float: left;
}

.optionLi {
    height: auto;
    width: 100%;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    padding: 5px 0px;
    clear: both;
    line-height: 56px;
}

.inputTxt {
    min-height: 56px;
    width: 78%;
    border: 1px solid #eeeeee;
    margin-right: 8px;
    padding-left: 1.2%;
    align-self: center;
    display: flex;
}

.optionLi a {
    color: #606b71 !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    align-self: center;
}

.inputTxt_eidt {
    float: left;
}

.optionLi a:hover {
    cursor: pointer;
    color: #696969;
    font-weight: 600;
}

.choiceIput {
    padding-right: 12px;
    color: #606b71 !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    align-self: center;

}

/*.item{
    float:left; 
}*/
.addOption {
    float: right;
}

.item lable {
    font-size: 1rem;
    font-weight: 400 !important;
    color: #606b71;
}

.addOption {
    position: absolute;
    right: 0px;
    bottom: 10px;
    height: 50px;
    line-height: 41px;
    padding-right: 15px;
}

.addOption a {
    font-size: 1.1rem;
    color: #606b71 !important;
}

.addOption input {
    /*font-size:1rem !important;*/
    font-weight: 500;
    font-family: Lato;
}

.txtEditImageUrl {
    width: 63%;
    height: 30px;
    line-height: 30px;
    border: 0 none;
    border-bottom: 1px solid #ccc;
    margin-right: 10px;
}

.altText {
    border: 0 none;
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    width: 36%;
}

.border, .width, .height {
    border: 0 none;
    border-bottom: 1px solid #ccc;
    height: 30px;
    width: 8%;
    line-height: 30px;
    margin-right: 15px;
}

.border:hover, .width:hover, .height:hover, .altText:hover, .txtEditImageUrl:hover {
    border-bottom: 1px solid #62a9e1;
    cursor: pointer;
}

.txtEditBgImageUrl, .txtEditBgAudio {
    border: 0 none;
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
}

.txtEditBgImageUrl {
    width: 45%
}

.txtEditBgAudio {
    width: 61%
}

.withClearFunctions {
    width: 12%;
    height: 28px
}

.btnBrowser, .btnBrowserAudio, .btnEditImageBrowser {
    color: #606b71;
}

.btnBrowser:hover, .btnBrowserAudio:hover, .btnEditImageBrowser:hover {
    font-weight: 600;
}

#editOptionImageEdit span, .fillBlankProperties span {
    color: #555555;
}

.ui-widget-content-selected {
    background-image: linear-gradient(to bottom, #f5f5f5, #cfd1cf) !important;

}

.lineHeight, .fb_font_size {
    height: 24px;
    padding-left: 5px;
}

.lineHeight {
    margin-right: 5px;
}

.fb_font_size {
    margin-left: 10px;
}

.inputTxt div {
    float: left;
    display: flex;
    width: 95%;
    min-height: 56px;
    border-bottom: 1px solid #a8b4bd;
    cursor: pointer;
    margin-right: 5px;
    font-size: 22px;

}

.inputTxt div span {
    align-self: center;
}

.inputTxt div:empty:before {
    content: attr(placeholder);
    color: #606b71;
}

.inputTxt div:focus:before {
    content: none;
}

.inputTxt div:hover {
    border-bottom: 1px solid #62a9e1;
}

.filecheckbox {
    position: absolute;
    top: 2px;
    left: 5px;
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 1px solid #000;
    outline: none;
}

#animationName {
    border: 0 none;
    min-width: 24%;
    border-bottom: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
}

.animationType, .animationSelect {
    width: 24%;
    height: 30px;
    line-height: 30px;
    border: 0px none;
    border-bottom: 1px solid #ccc;
}

.deign_tab {
    font-size: 14px;
    font-weight: 600;
}

.animationTab {
    margin-top: 10px;
}

.animationTab td {
    height: 30px;
    line-height: 30px;
}

.animationTab input {
    border: 0 none;
    /*height:30px;*/
    line-height: 30px;
    border-bottom: 1px solid #ccc;
}

/**Library*/
.library_active {
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 82px;
    z-index: 13;
}

.library_title {
    float: left;
}

.libray_mian {
    top: 82px;
    left: 0;
    right: -44px;
    bottom: 0;
    position: absolute;
    overflow: auto;
    box-sizing: border-box;
}

.libray_mianbox {
    overflow: hidden;
    display: block;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.top40 {
    height: 40px;
    opacity: 0;
    width: 100%;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}

.library_box {
    display: block;
    height: 190px;
    width: 120px;
    background: #777;
    float: left;
    margin: 10px;
    color: white;
    position: relative;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-sizing: border-box;
    overflow: hidden;
}

.library_box:after {
    height: 4px;
    background: rgba(0, 0, 0, 0.14);
    width: 100%;
    position: absolute;
    bottom: -4px;
    display: block;
    content: ' ';
}

.library_dilog {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.5;
    z-index: 33;
}

.library_dilog_box {
    width: 760px;
    height: 580px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background: #fff;
    z-index: 35;
    font-family: 'Lato', Verdana, sans-serif;
}

.library_close {
    position: absolute;
    top: -35px;
    padding-left: 20px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.library_close a {
    color: #fff;
    font-weight: 300;

}

.library_close span {
    padding-left: 15px;
}

.library_left {
    width: 50%;
    height: 100%;
    float: left;
    background-color: #0AD;
    background-repeat: no-repeat;
    background-size: contain;
    color: #fff;
}

.library_right {
    width: 50%;
    height: 100%;
    float: left;
}

.library_R_menu {
    padding: 10px 20px;
    height: 18px;
}

.library_R_menu a {
    color: #6e7174;
    padding: 0px 15px;
    font-weight: 600;
    font-size: 15px;
}

.library_R_contet {
    position: relative;
    height: 460px;
    overflow-y: auto;
}

.library_R_ul {
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 18px;
}

.library_R_ul .library_Rli {
    line-height: 35px;
}

.library_R_ul .library_Rli i {
    color: #c6cacd;
    font-style: normal;
    display: inline-block;
    min-width: 18px;
    float: left;
}

.library_R_ul, .library_R_ul {
    padding: 12px 0px 0px 30px;
}

.library_R_ul .library_Rli span {
    padding-left: 8px;
    color: #000;
}

.library_R_ul_span {
    width: 80%;
    font-size: 16px;
    line-height: 28px;
}

.library_footer {
    width: 100%;
    background: #cbcbcb;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
}

.library_footer a {
    padding-left: 35px;
    color: #535353;
    font-weight: 600;
}

.srceen_seted {
    float: right;

}

.library_topnav_contents a {
    font-size: 16px;
    float: left;
    display: block;
    width: 8em;
    text-decoration: none;
    line-height: 44px;
    font-weight: 200;
    color: #00aadd;
    cursor: pointer;
}

.library_topnav_layout a {
    font-size: 16px;
    float: left;
    display: block;
    text-decoration: none;
    line-height: 44px;
    font-weight: 200;
    color: #00aadd;
    cursor: pointer;
    margin: 0 1.5rem;
}

.library_topnav_contents {
    height: 44px;
    left: 22px;
    display: block;
    position: absolute;
    top: 33px;
    width: 400px;
}

.library_topnav_layout {
    position: absolute;
    top: 33px;
    right: 20px;

}

.coursebooktitle {
    width: 100%;
    padding: 24px 8px 7px;
    font-size: 18px;
    text-align: center;
    display: block;
    box-sizing: border-box;
    margin: 0;
    outline: 0;
    font-weight: 400;
    word-break: break-all;
    overflow: hidden;
}

.coursebookauthor {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
    font-size: 11px;
    box-sizing: border-box;
    margin: 0;
    outline: 0;
    overflow: hidden;
}

#view {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.lessons_library {
    overflow-x: hidden;
    display: block;
    top: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.library_scroller {
    top: 82px;
    left: 0;
    right: -44px;
    bottom: 0;
    position: absolute;
    overflow: auto;
    background: #937c50;
}

.lessons_selfpaced {
    display: block;
    width: 100%;
    height: auto;
    background: #1b2b2a;
    overflow: hidden;
}

.lessons_library h2 {
    font-size: 42px;
    font-weight: 100;
    font-style: italic;
    padding-left: 20px;
    font-family: 'LatoWebThin';
}

.selfpaced_heading {
    position: relative;
    height: 64px;
    background: #1b2b2a;
    display: block;
    float: left;
    clear: both;
    line-height: 64px;
    color: #998;
    width: 100%;
}

.lessons_library_contents a {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    word-wrap: ellipsis;
    white-space: nowrap;
    color: #ccc;
    padding-left: 20px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400;
}

.lessons_instructorled {
    display: block;
    width: 100%;
    height: auto;
    background: #937c50;
    overflow: hidden;
}

.instructorled_heading--inplace {
    position: relative;
    height: 64px;
    background: #937c50;
    display: block;
    float: left;
    clear: both;
    line-height: 64px;
    color: #652;
    width: 100%;
}

.bottom20 {
    height: 120px;
    opacity: 0;
    width: 100%;
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    border: none;
}

.instructorled_heading {
    position: absolute;
    bottom: 0;
    height: 64px;
    background: #937c50;
    left: 0;
    right: 0;
    line-height: 64px;
    color: #652;
    opacity: 1;

}

.instructorledBtn {
    bottom: 0px;
}

.instructorledTop {
    top: 144px;
}

.instructorled_heading:before {
    position: absolute;
    top: -8px;
    height: 8px;
    left: 0;
    right: 0;
    content: ' ';
    display: block;
    background: rgba(0, 0, 0, .16);
}

.selfpaced_heading--uptop {
    position: absolute;
    top: 82px;
    height: 64px;
    background: #1b2b2a;
    left: 0;
    right: 0;
    line-height: 64px;
    color: #998;
}

.library_txt {
    overflow: hidden;
    display: block;
    width: 50%;
    text-align: center;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
}

.library_txted {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;

}

.page_maskeds {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99;
}

.page_maskeds .page_maskimg {
    overflow: hidden;
    display: block;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    color: #5f5e5e;
    font-size: 16px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 2px solid #9ebbe5 !important;
}

.helpicon {
    padding-left: 10px;
    font-family: Lato;
    font-weight: 100 !important;
    cursor: pointer;
}

.help_ts {
    font-family: 'Lato';
    font-weight: 300 !important;
    color: #3f3f3f;
}

.folder_box {
    position: absolute;
    position: fixed;
    z-index: 999300;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.folder_black {
    background: rgba(0, 0, 0, .45);
    position: absolute;
    z-index: 89;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.folder_file {
    height: 90%;
    width: 90%;
    min-width: 705px;
    position: absolute;
    min-width: 640px;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px;
    box-sizing: border-box;
    display: block;
    z-index: 99;
    background: #fff !important;
    color: white;
    border-color: #191919;
    font-family: Lato !important;
}

.filemodal {
    padding: 0px !important;
}

.filemodal .modal-bg div:first-child {
    padding-top: 0px !important;
}

.paginate_button.current {
    background: #0BF !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.coluMain {
    /*background: #dedede;*/
    box-sizing: border-box;
    height: 53px;
    /*padding-top:10px;*/
}

.coluHeaderMain{
    box-sizing: border-box;
}

.tabmianbox {
    position: absolute;
    width: 100%;
    overflow: hidden;
}

.RestPasswordTab td {

    padding: 20px 0px;

}

.RestPasswordTab td b {
    font-family: Lato;
    font-weight: 400;
}

.RestPasswordTab label, .RestPasswordTab span {
    line-height: 30px;
}

.tabs.ui-tabs.ui-widget.ui-widget-content.ui-corner-all {
    border: 0 none !important;
}

.ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix {
    border-top: 0 none !important;

}

.fieldset-section-headings {
    padding: 0 12px 0;
    height: 50px;
    margin: 0;
    background: #dfdfdf;
    position: relative;
    border-top: 1px solid #c2bfbf;
}

.fieldset-section-headings h2 {
    color: #000;
    font-size: 14px;
    line-height: 50px;
}

.button-flat {
    padding: 0px 22px;
    background: none;
    color: white;
    border: none;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    min-width: 88px;
    margin-right: 11px;
    border-radius: 10px;
    border-radius: 0;
    font-weight: 500;
    background: #f8f8f8;
    display: inline-block;
    text-align: center;
}

.red-gradient, .white-gradient {
    padding: 0px 22px !important;
    background: none;
    color: white;
    border: none;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    min-width: 88px;
    margin-right: 11px;
    border-radius: 10px;
    border-radius: 0;
    font-weight: 500;
    background: #f8f8f8;
    display: inline-block;
    text-align: center;
}

.red-flat, .red-gradient {
    color: #955;
    border: 1px solid #955;
    border-radius: 8px;
}

.blue-flat, .white-gradient {
    border: 1px solid #999;
    color: #333;
    border-radius: 8px;
}

.fieldset-section {
    margin: 0;
    padding: 0;
    display: block;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
}

.form-saveoptions {
    box-sizing: border-box;
    padding: 14px 0 0 11px !important;
    height: 69px;
    background: #f2f2f2 !important;
}

.blue-gradient {
    padding: 0px 22px !important;
    background: none;
    color: white;
    border: none;
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    min-width: 88px;
    margin-right: 11px;
    border-radius: 10px;
    border-radius: 0;
    font-weight: 500;
    background: #f8f8f8;
    display: inline-block;
    text-align: center;
    border: 1px solid #0BF;
    color: #0BF;
    border: 1px solid #999;
    color: #333;
    border-radius: 8px;
}

.fieldset {
    border-bottom: 1px solid #e0e0e0;
}

.subtitle {
    font-weight: 400;
    font-size: 16px;
    margin-left: 18px;
    color: #555;
    padding: 1.5rem 0 0rem;
    font-family: Lato;
}

.preview img {
    height: auto !important;
}

/* Larger than mobile */
@media (max-width: 1485px) {
    #totalScoreDiv {
        /*padding-right: 13rem;*/
    }
}

@media (max-width: 1380px) {
    #totalScoreDiv {
        /*padding-right: 10rem;*/
    }
}

@media (max-height: 800px) {
    .contenttitle {
        margin: 0.5rem 2rem;
    }

    #totalScoreDiv {
        /*margin: 0;*/
    }

    .editorh2 {
        padding-top: 3rem;
    }
}

@media (max-width: 1281px) {
    .course_settings_ul, .course_settings_ul_two {
        width: 80%;
    }

    html {
        font-size: 4px;
    }

    .uncut {
        display: inline-block !important;
    }

    .cut {
        display: none !important;
    }

    .grade_detail_content {
        width: 95vw;
    }

    .twin, .trio, .cinco {
        width: 100%;
    }

    .screen_wrapper {
        left: 4rem;
        top: 2rem;
        padding: 5rem 0 5rem 0;
    }

    body.debug:after {
        content: 'debug: 1px';
    }

    .screen_wrapper {
        left: 130px !important;
    }

    #totalScoreDiv {
        /*padding-right: 1rem;*/
    }
}

/* Larger than mobile */
@media (min-width: 240px) {
    html {
        font-size: 7px;
    }

    .modal {
        padding: 1rem 1rem;
    }

    body.debug:after {
        content: 'debug: 240px';
    }
}

/* Larger than mobile */
@media (min-width: 420px) {
    html {
        font-size: 8px;
    }


    body.debug:after {
        content: 'debug: 420px';
    }
}


/* Larger than tablet */
@media (min-width: 1281px) {


    html {
        font-size: 12px;
    }

    .screen_wrapper {
        left: 130px !important;
        top: 1rem;
        padding: 2rem 0 0;
    }

    .uncut {
        display: none !important;
    }

    .cut {
        display: inline-block !important;
    }

}

@media (min-width: 960px) {
    .trio .cut {
        display: inline !important;
    }


}

.fieldset label {
    font-family: 'LatoWeb' !important;
    font-weight: 400 !important;
}

.Limtiprompt {
    width: 280px;
    height: 120px;
    background: #000;
    position: absolute;
    top: 150px;
    left: 400px;
    z-index: 99;
}

.prompt {
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

/*错误信息不自动换行*/
.formError .formErrorContent {
    white-space: nowrap;
}

/**evnent*/
.event_tabmianbox {
    width: 50%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -25%;
    z-index: 9;
}

.eventbox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    height: auto;
    background: #f2f2f2;
    border: 1px solid #678db0;
    width: 94%;
    padding: 40px 2% 10px;
    border-radius: 10px;
    z-index: 10
}

.eventTitle {
    font-size: 28px;
    color: #6a9aa2;
    font-weight: 400;
    text-align: center;
    line-height: 28px;
}

/*手机端的显示布局*/
@media screen and (max-width: 1281px) {
    .event_tabmianbox {
        width: 50%;
        margin-left: -25%;
    }
}

@media screen and (max-width: 768px) {
    .view-model-contain {
        margin-right: 5px;
    }
    
    .event_tabmianbox {
        width: 90%;
        margin-left: -45%;
    }

    #main-guest .field-block.button-height {
        padding-left: 10px;
    }

    #child-guest .field-block.button-height {
        padding-left: 10px;
    }

    .event-box #btnSubmit {
        margin-left: 10px !important;
    }

}

@media screen and (max-width: 600px) {
    .eventbox {
        top: 0px;
        transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
    }
}

@media screen and (max-height: 650px) {

    .eventbox {
        top: 0px;
        transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
    }

    .button-height .button, .button-height .input {
        margin-top: 8px !important;
    }
}

/*弹出框中内容的行高*/
.modal-content span {
    line-height: 22.4px;
}

/*设置默认input:text, select的默认宽度*/
input[type='text'].input, input[type='password'].input {
    min-width: 300px;
}

input.datepicker {
    min-width: 80%;
}

.select > select,
.selectMultiple > select {
    min-width: 317px;
}

/*设置所有的checkbox鼠标指针都是手形*/
.checkbox {
    cursor: pointer;
}

/*在分辨率小的情况下，表格中操作列上下有空隙*/
tbody .button-group.compact a {
    margin: 2px 0px;
}

/*tbody .button-group.compact a:first-child{
    margin-left: 0;
    margin-top: 0;
}

tbody .button-group.compact a:last-child{
    margin-right: 0;
    margin-bottom: 0;
}*/

/*表格排序列，鼠标悬停，鼠标手指状*/
th.sorting_desc, th.sorting_asc {
    cursor: pointer;
}

.nowrap {
    white-space: nowrap;
}

/*表格中更改状态的弹出框的样式 Start*/
tbody td .btn-group {
    position: relative;
    /*display: inline-block;*/
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
}

tbody td .btn-group .button {
    margin-top: -5px;
    margin-bottom: -3px;
    margin-left: 5px;
    padding: 0 8px;
    height: 21px;
    line-height: 21px;
    cursor: pointer;
}


tbody td .dropdown-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 100%;
    width: 120px;
    display: none;
    border: 1px solid #cccccc;
    background: #ffffff;
    z-index: 99;
}

tbody td .dropdown-menu li {
    border-bottom: 1px solid #cccccc;
    padding: 0px 0px;
    height: 25px;
    width: 120px;
    line-height: 22px;
    text-align: center;
    font-family: arial, helvetica, sans-serif;
}

tbody td .dropdown-menu li:last-child {
    border-bottom: none;
}

tbody td .btn-group.open button {
    background: #e6e6e6;
    border-color: #adadad;
}

tbody td .btn-group.open .dropdown-menu {
    display: block;
}

/*表格中更改状态的弹出框的样式 end*/


/*表格上方的过滤选择，如lesson表格上方的老师过滤列表 Start*/

.filter-options{
    /*font-style: italic;*/
    font-size: 14px;
    font-weight: 400;
    color: #64748B;
    padding: 4px 8px;
    background-color: transparent;
    text-decoration: none;
}

.filter-options a:hover {
    color: #0E7490;
    background-color: transparent;
    text-decoration: none;
}

.filter-options a {
    color: #64748B;
    background-color: transparent;
    text-decoration: none;
    position: relative;
    margin: 0 4px;
}

.filter-options .select-privilege {

    font-weight: 600;
    color: #0E7490;
    border-bottom: 2px solid #0E7490;
    padding-bottom: 3px;
    text-align: center;
    position: relative;
}

.filter-options .separator:before {

    content: "|";
    margin: 0 2px;
    color: #CBD5E1;
    font-style: normal;
    font-weight: normal;
    position: absolute;
    left: -10px;
}

/*表格上方的过滤选择，如lesson表格上方的老师过滤列表 end*/

/*去掉表格中的Action的边框,并修改一些样式*/
.button-group a.button {
    border: none;
    padding: 0 4px;
    font-size: 20px;
    width: auto;
}

/*表格上方的过滤选择，如lesson表格上方的老师过滤列表 end*/

/*全屏预览 start*/
.fullScreen {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .61);
    z-index: 1005;
    display: none;
    top: 0;
    left: 0;
}

.fullScreen-content {
    position: fixed;
    text-align: center;
    width: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 1008;
    padding: 2% 0;
}

.fullScreen-content img {
    margin: 0px auto;
    max-width: 100%;
    max-height: 900px;
}

.fullScreen_fa {
    float: right;
    padding-right: 2%;
    cursor: pointer;
    color: #fff;
    padding-top: 1%;
    font-size: 24px !important;
}

.fullScreen_fa:hover {
    color: #3c476b;
}

/*全屏预览 end*/

/*等待窗口*/
.waiting-container {
    /*visibility: visible;*/
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999400;
    background-color: #353535;
    opacity: 0.7;
}

.waiting-container img, .waiting-container .waiting-text {
    z-index: 999991;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -64px 0px 0px -64px;
}

/*等待窗口*/

/*表格行可选中里，光标是手指状*/
table.selection tbody tr {
    cursor: pointer;
}

table .button:before {
    color: #69aa46;
}

.eql-icon:before {
    color: #69aa46;
}

table .button.fa-ban:before {
    color: #dd5a43;
}

/*同意书文字样式*/
.ack-txt {
    margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #666 !important;
}

.ack-link-txt {
    font-size: 13px !important;
    text-decoration: underline;
    color: blue;
}

.help-icon {
    width: 15px;
    height: 15px;
    margin-bottom: 2px;
    cursor: pointer;
}

#new-table {
    width: 100%;
    height: auto;
    background: #fff;
    margin-top: 44px;
    display: flex;
    /*justify-content: space-evenly;*/
    flex-wrap: wrap;
    padding-top: 20px;

}

#new-table .student-card-contain {
    width: 320px;
    height: 320px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(192, 197, 233, 0.6);
    border-radius: 5px;
    margin: 10px 30px 10px 0;
    position: relative;
}

#new-table .student-card-contain .student-id {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 15px;
    text-indent: 15px;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.3px;
    color: #121212;
}

#new-table .student-card-contain .student-info-contain {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 8px;
}

#new-table .student-card-contain .student-info-contain .student-headimg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

#new-table .student-card-contain .student-info-contain .student-headimg img {
    border-radius: 50%;
    width: 70px;
    height: 70px
}

#new-table .student-card-contain .student-info-contain .student-basic-info {
    width: 70%;
    height: auto;
    padding-right: 10px;
}

#new-table .student-card-contain .student-info-contain .student-basic-info ul {
    margin-left: 0 !important;
}

#new-table .student-card-contain .student-info-contain .student-basic-info ul li {
    display: flex;
    align-items: center;
}

#new-table .student-card-contain .student-info-contain .student-basic-info .info-title {
    width: 190px;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #000000;
    display: inline-block;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px 0;
}

#new-table .student-card-contain .student-info-contain .student-basic-info .info-title .button {
    color: #69aa46;
}

#new-table .student-card-contain .student-info-contain .student-basic-info .info-content {
    font-size: 14px;
    letter-spacing: 0.3px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
    display: inline-block;
    margin-left: 10px;
}

#new-table .student-card-contain .student-info-contain .student-basic-info .info-content:hover {
    cursor: default;
}

#new-table .student-card-contain .action-contain {
    width: 100%;
    height: auto;
    margin-top: 15px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 15px;
}

.list-table-button-group .ai-advisor-btn{
    width: 28px;
    height: 28px;
    display: inline-block;
    background: url('/Images/pq/ai_advisor_icon.png') center center/contain no-repeat;
}

.ai-advisor-virtual-btn{
    background-image: url("/Images/pq/ai_advisor_panel.gif") !important;
}

.list-table-button-group .ai-advisor-btn:hover{

}


#new-table .student-card-contain .action-contain .ai-advisor-btn {
    width: 40px;
    height: 40px;
    display: inline-block;
    background: url('/Images/pq/ai_advisor_icon.png') center center/contain no-repeat;
}

#new-table .student-card-contain .action-contain .ai-advisor-btn:hover {

}

#new-table .student-card-contain .action-contain .action-txt {
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: #000000;
    margin-right: 7px;
}

#new-table .student-card-contain .action-contain a {
    display: inline-block;
    font-size: 12px;
    /*margin: 0 1px;*/
    color: #69aa46;
    border: none;
    font-size: 20px;
}

#new-table .student-card-contain .action-contain .pen-icon {
    /*background: url('/Images/student-actions.png') no-repeat -26px -5px;*/
    width: 14px;
    height: 20px;
    font-size: 22px;
    display: flex;
    align-items: center;
}

#new-table .student-card-contain .action-contain .del-icon {
    background: url('/Images/trash.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

#new-table .student-card-contain .action-contain .file-icon {
    background: url('/Images/file.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

#new-table .student-card-contain .action-contain .key-icon {
    background: url('/Images/key.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

#new-table .student-card-contain .action-contain .deactive-icon {
    background: url('/Images/deactivate.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

.report-count-number {
    position: absolute;
    left: 70%;
    top: -13px;
    background-color: #69AA46;
    color: #fff;
    line-height: 20px;
    width: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
}

/*新的添加按钮*/
.new-add-button {
    width: 55px;
    height: 55px;
    background: #5D5FEF;
    border-radius: 50%;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    border: none;
    text-align: center;
    line-height: 57px;
    margin: 0 10px;
    display: block;
}

.new-add-button:hover {
    cursor: pointer
}


.new-add-button-system {
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 23px;
    margin: 0 10px 5px 10px;
    background: #5D5FEF;
    border-radius: 50%;
    font-weight: bold;
    color: #fff;
    border: none;
    text-align: center;
    display: block;
}

.new-add-button-system:hover {
    cursor: pointer
}


/*view model*/
.view-model-contain {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 25px;
}

.view-model-contain .view-title {
    font-size: 16px;
    color: #000000;
    margin-right: 12px;
}

.view-model-contain .view-icon {
    color: #09121F;
    font-size: 18px;
    margin: 0 4px;
}

.view-model-contain .table-view-inactive {
    background: url('/Images/table-view-inactive.png') center center/contain no-repeat;
    width: 20px;
    height: 18px;
}

.view-model-contain .list-view-inactive {
    background: url('/Images/list-view-inactive.png') center center/contain no-repeat;
    width: 18px;
    height: 18px;
}

.view-model-contain .table-view-active {
    background: url('/Images/table-view-active.png') center center/contain no-repeat;
    width: 20px;
    height: 18px;
}

.view-model-contain .list-view-active {
    background: url('/Images/list-view-active.png') center center/contain no-repeat;
    width: 18px;
    height: 18px;
}

.list-view-buttons {
    display: flex;
    align-items: center;
}

#list-table {
    width: 100%;
    height: auto;
    background: #fff;
    margin-top: 44px;
    display: flex;
    /*justify-content: space-evenly;*/
    flex-wrap: wrap;
    /*padding-top:20px;*/
    flex-direction: column;
}

#list-table .students-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(192, 197, 233, 0.6);
}

#list-table .students-list .students-item {
    width: 12%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain {
    width: 100%;
    height: 40px;
    box-shadow: 0px 0px 10px rgba(192, 197, 233, 0.6);
    border-radius: 4px;
    margin: 10px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#list-table .list-content-contain .list-item-first span {
    width: calc(100% - 50px);
    padding: 0 10px;
}

#list-table .list-item {
    width: 12%;
    height: 40px;
    text-align: center;
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 40px;
}

#list-table .list-item .button {
    color: #69aa46;
}

#list-table .student-avatar {
    line-height: 4px !important;
}

#list-table .list-item .list-color-block{
    width: 40px;
    height: 40px;
    border-radius: 4px 0px 0px 4px;
}

#list-table .list-item-first .list-color-block{
    width: 40px;
    height: 40px;
    border-radius: 4px 0px 0px 4px;
}

#list-table .list-item-first .list-color-block .list-check{
    margin: 0!important;
}

#list-table .list-item-first span{
    width: calc(100% - 40px);
}

#list-table .list-item .list-color-block .list-check{
    margin:0!important;
}


#list-table .list-item img {
    height: 35px;
}

#list-table .list-content-contain .actions a {
    display: inline-block;
    font-size: 12px;
    margin: 0 1px;
    color: #69aa46;
    border: none;
    font-size: 20px;
}

#list-table .actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

#list-table .actions a {
    border: none;
    text-align: center;
    border: none;
}

#list-table .actions .pen-icon {
    /*background: url('/Images/student-actions.png') no-repeat -26px -5px;*/
    width: 14px;
    height: 20px;
    font-size: 22px;
    display: flex !important;
    align-items: center;
}

#list-table .actions .del-icon {
    background: url('/Images/trash.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

#list-table .actions .file-icon {
    background: url('/Images/file.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

#list-table .actions .key-icon {
    background: url('/Images/key.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

#list-table .actions .deactive-icon {
    background: url('/Images/deactivate.png') center center/contain no-repeat;
    width: 14px;
    height: 20px;
}

table .deactive-icon {
    background: url('/Images/deactivate.png') center center/contain no-repeat !important;
    width: 14px !important;
    height: 20px !important;
}

.list-table-button-group{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}

#list-table .actions .user-icon {
    /*background: url('/Images/student-actions.png') no-repeat -209px -4px;*/
    /*width: 14px;*/
    /*height: 21px;*/
}

.actions .shop-icon {
    margin-left: -4px;

}


.pq-report-icon {
    display: block;
    width: 18px !important;
    height: 20px;
    background: url('/Images/pq/mq-logo-large.png') center center/contain no-repeat;
}

.academic-pq-report-icon {
    display: block;
    width: 18px !important;
    height: 20px;
    background: url('/img/pdf2.png') center center/contain no-repeat;
}

#list-table .teachers-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(192, 197, 233, 0.6);
}

#list-table .list-item-teacher .button {
    color: #69aa46;
}

#list-table .teachers-list .teachers-item {
    width: 14.5%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-item-teacher {
    width: 14.5%;
    text-align: center;
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 40px;
    padding-right: 10px;
}

#list-table .list-item-teacher .list-color-block {
    width: 40px;
    height: 40px;
    border-radius: 4px 0px 0px 4px;
}

#list-table .list-color-block {
    float: left;
}

#list-table .envelope-icon:hover {
    cursor: pointer;
}

#list-table .lesson-content-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(192, 197, 233, 0.6);
}

#list-table .lesson-content-list .lesson-content-item {
    width: 14.5%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .lesson-content-item {
    width: 14.5% !important;
}

#list-table .lesson-content-list .templateEmail-content-item {
    width:20%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .templateEmail-content-item {
    width: 20% !important;
}

.lesson-card-contain {
    width: 380px;
    height: 200px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(192, 197, 233, 0.6);
    margin-right: 60px;
    margin-bottom: 30px;
    border-radius: 4px;
}


.lesson-card-contain .lesson-title-contain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    line-height: 60px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.lesson-card-contain .lesson-title-contain .lesson-title-txt {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    margin-left: 10px;
}

.lesson-card-contain .lesson-title-contain .lesson-title-avatar {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.lesson-card-contain .lesson-title-contain .lesson-title-avatar img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.lesson-card-contain .lesson-content-contain {
    width: 100%;
    height: calc(100% - 60px);
    padding: 20px;
}

#btnImport {
    width: 65px;
    height: 42px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: none;
    padding: 0 !important;
    background: url('/Images/importIcon.png') center center/contain no-repeat;
    background-size: 24px;
    margin-right: 18px;
}

#btnDelete {
    width: 65px;
    height: 42px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: none;
    padding: 0 !important;
    background: url('/Images/trash-grey.png') center center/contain no-repeat;
    background-size: 26px 25px;
    margin-right: 18px;
}

#btnDownload, #btnExport {
    width: 65px;
    height: 42px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: none;
    padding: 0 !important;
    background: url('/Images/download.png') center center/contain no-repeat;
    background-size: 24px;
    margin-right: 18px;
}


#list-table .lesson-content-list .session-item{
    width: 10%;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #000000;
}

#list-table .list-content-contain .session-item {
    width: 10% !important;
}

#list-table .list-content-contain .session-item .block-text{
    display: inline-block;
    width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#list-table .lesson-content-list .certificate-item {
    width: 20%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .certificate-item {
    width: 20% !important;
}

#list-table .lesson-content-list .class-group-item {
    width: 16.7%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .class-group-item {
    width: 16.7% !important;
}

#list-table .lesson-content-list .student-group-item {
    width: 16.7%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .student-group-item {
    width: 16.7% !important;
}

#list-table .lesson-content-list .attendance-item {
    width: 14%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .attendance-item {
    width: 14% !important;
}

#list-table .list-content-contain .attendance-status {
    overflow: inherit!important;

}

#list-table .lesson-content-list .report-class-item {
    width: 12.5%;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
}

#list-table .list-content-contain .report-class-item {
    width: 12.5% !important;
}


.dataTable {
    border-spacing: 0 10px !important;
    border: none !important;
    border-collapse: separate;
}

.dataTable thead tr{
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    box-shadow: 0 0 10px rgb(192 197 233 / 60%);
    border-radius: 4px;
}

.dataTable tbody tr {
    box-shadow: 0 0 10px rgb(192 197 233 / 60%);
    border-radius: 4px;
    height: 40px;
}

.dataTable th, .dataTable td{
    border:none !important;
    text-align: center;
}

.dataTable td{
    font-size: 14px !important;
    height: 40px;
    line-height: 40px;
    padding: 0 !important;
    color:#000 !important;
    overflow: hidden;
}

/* 首列色条 + 标题：避免文字溢出叠到下一列 */
.dataTable td:first-child .spanTextTD{
    max-width: calc(100% - 28px);
}

.dataTable .list-color-block{
    width: 20px !important;
    height: 100%;
    border-radius: 4px 0 0 4px;
    float: left;
}

.dataTable .td-radius{
    border-radius: 4px 0 0 4px;
    width: 14px;
}

.dataTable input[type=radio], .dataTable input[type=checkbox]{
    margin: 0;
}

.flex-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}
.flex-h-center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex-v-center{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
}

/*公共的message图标*/
.common-msg-contain{
    width: 20px;
    height: 16px;
    border-radius: 5px 5px 5px 0;
    background-color: #79BE5D;
    position: relative;
    bottom: 7px;
}

.common-msg-contain .common-msg-content{
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 18px;
    line-height: 8px;
    /* letter-spacing: 1px; */
    text-align: center;
}

.common-msg-contain .common-msg-angle{
    position: absolute;
    left: 0;
    bottom: -6px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #79BE5D;
    border-right: 6px solid transparent;
}