@charset "utf-8";
@font-face {
    font-family: 'FontAwesome';
    src: url(/fonts/fontawesome-webfont.eot);
}


/* Material Icons from Google */


/* https://google.github.io/material-design-icons/#icon-font-for-the-web */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/MaterialIcons-Regular.eot);
    /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(/fonts/MaterialIcons-Regular.woff2) format('woff2'), url(/fonts/MaterialIcons-Regular.woff) format('woff'), url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}


/* abeezee-regular - latin */

@font-face {
    font-family: 'ABeeZee';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/abeezee-v13-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('ABeeZee Regular'), local('ABeeZee-Regular'), url('/fonts/abeezee-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/abeezee-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/abeezee-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/abeezee-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/abeezee-v13-latin-regular.svg#ABeeZee') format('svg');
    /* Legacy iOS */
}


/* the-girl-next-door-regular - latin */

@font-face {
    font-family: 'The Girl Next Door';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/the-girl-next-door-v10-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('The Girl Next Door'), local('TheGirlNextDoor'), url('/fonts/the-girl-next-door-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/fonts/the-girl-next-door-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/fonts/the-girl-next-door-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('/fonts/the-girl-next-door-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('/fonts/the-girl-next-door-v10-latin-regular.svg#TheGirlNextDoor') format('svg');
    /* Legacy iOS */
}


/* colour scheme */


/* BLUE */

.header {
    background-color: #3eb0db;
}

ul {
    padding-left: 40px;
}

a:active div.button,
a:hover div.button {
    color: #085C7C 2;
    background-color: white ©;
}

a div.button,
a:visited div.button {
    background-color: #085C7C;
    color: white;
}

#innerpage {
    margin-top: 60px;
    display: flex;
    flex: 1;
}

#companyname {
    color: white;
}

#welcome_name {
    color: white;
}

#welcome_name a,
#welcome_name a:visited {
    color: silver;
}

.printable {
    display: inline-block;
    position: relative;
}

.printable .newbutton {
    top: 5px;
    position: absolute;
    background: #39C;
    color: white;
    left: 14px;
    z-index: 9999999;
    opacity: 0.7;
}

.printable:hover .newbutton {
    opacity: 1.0;
}

.printable:hover .newbutton:hover {
    background: white;
    color: #39C !important;
}

.expired {
    background-color: #dedede;
    color: darkred;
}

.white_faded_back {
    opacity: 0.7;
    background: white;
    padding: 20px;
}


/* summary page cards */

.large-icon {
    display: inline-block;
    float: left;
}

.large-icon i {
    font-size: 600%;
}

.orange-back {
    background-color: orange;
}

.blue-back {
    background-color: #336162;
}

.cyan-back {
    background-color: #00dcff;
}

.fuchsia-back {
    background-color: #ea008f;
}

.lightcyan-back {
    background-color: #d4f5fa;
}

.brightblue-back {
    background-color: blue;
}

.lightgreen-back {
    background-color: hsl(121, 100%, 86%);
}

.green-back {
    background-color: hsla(121, 73%, 57%, 1.00);
}

.darkgreen-back {
    background-color: hsl(121, 79%, 18%);
}

.white-back {
    border: 1px dotted silver;
    background: #f1efef;
    color: #525252;
}

.yellow-back {
    background-color: #eaea00;
}

.gold-back {
    background-color: gold;
}

.gold-back .summarycard_top {
    text-shadow: 1px 1px 5px black;
}

.yellow-back .summarycard_top {}

.lightyellow-back {
    background-color: #ffffb2;
}

.lightyellow-back .summarycard_top {
    text-shadow: 1px 1px 0px grey;
}

.purple-back {
    background-color: #c747b4;
}

.darkpink-back {
    background-color: #f06e6e;
}

.red-back {
    background-color: red;
}

.pink-back {
    background-color: pink;
}

.pink-back .summarycard_top {
    text-shadow: 0px 0px 0px grey;
}

.summarycard {
    height: 186px;
    border-radius: 12px;
}

.summarycard div:last-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.summarycard div:first-child {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.summarycard_top {
    padding: 12px 12px 0px 12px;
    position: relative;
    height: 140px;
    overflow: auto;
    display: flex;
}

.summarycard_top a:visited,
.summarycard_top a:link {
    width: 100% !important;
    color: white !important;
}

.white-back .summarycard_top {
    text-shadow: 0px 0px 27px white;
    position: relative;
    outline: 12px white;
    font-weight: bold;
}

.summarycard_footer {
    clear: both;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.2);
    bottom: 0px;
    width: 100%;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.summarycard_header {
    clear: both;
    padding: 12px;
    background-color: rgba(0, 0, 0, 0.2);
    top: 0px;
    width: 100%;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    font-size: 110%;
    font-weight: bold;
}

div.summarycard_top a {
    display: inline;
    color: white;
}

.white-back div.summarycard_top a,
.white-back div.summarycard_top a:hover,
.white-back div.summarycard_top a:visited,
.lightgreen-back div.summarycard_top a,
.lightgreen-back div.summarycard_top a:hover,
.lightgreen-back div.summarycard_top a:visited,
.lightyellow-back div.summarycard_top a,
.lightyellow-back div.summarycard_top a:hover,
.lightyellow-back div.summarycard_top a:visited {
    color: black !important;
}

div.summarycard_top a:hover {
    color: white;
}

div.summarycard_footer a {
    color: white !important;
    text-decoration: none;
}

.white-back div.summarycard_footer a {
    color: black;
    text-decoration: none;
}

.white-back div.summarycard_footer a:hover {
    color: black;
    text-decoration: underline;
}

.summarycard_footer a:nth-child(2) {
    float: right;
}

.summarycard_footer b {
    float: right;
}

div.summarycard_footer a:hover {
    color: white !important;
    text-decoration: underline;
}

.large-count {
    font-size: 270%;
    font-weight: bold;
    float: right;
    position: absolute;
    right: 10px;
}

.summarycard_top a:first-child {
    display: flex;
    text-overflow: ellipsis;
    overflow: hidden;
}

.summarycard_title {
    float: right;
    clear: right;
    font-size: 120%;
    position: absolute;
    right: 12px;
    top: 66px;
    text-align: right;
}

@media screen and (max-width: 850px) {
    .summarycard_title {
        font-size: 110%;
    }
    .large-icon i {
        zoom: 70%;
    }
    .coursebookimage {
        zoom: 70%;
    }
    .summarycard {
        height: 132px;
    }
    .summarycard_top {
        height: 93px;
    }
}

* {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}


/*{-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-webkit-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}*/

#agent_badge {
    border: 1px dotted silver;
    padding: 8px;
    background-color: cornsilk;
    float: right
}

#agent_ad {
    display: inline;
}

#agent_logo {
    display: inline;
    float: left;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#agent_logo img {
    width: 100%;
}

.profile_table,
.report_filter_table {
    border: 0 solid silver;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.report_filter_table {
    width: auto
}

.right_notes {
    width: 100%;
}

@media screen and (max-width:780px) {
    .right_notes {
        display: block;
        width: 100%;
    }
}

.profile_table td,
.report_filter_table td {
    vertical-align: top;
}

.report_filter_table td {
    padding-left: 12px;
}

.col2 td {
    width: 50%;
}

.col3 td {
    width: 33%;
}

.rightlabel {
    float: right;
    margin-right: 10px;
    color: green;
}

.import_error,
.import_error td {
    background-color: red;
    color: white;
    padding: 4px;
}

.import_new,
.import_new td {
    background-color: #7CBE7C;
    color: white;
    padding: 4px;
}

.import_update,
.import_update td {
    background-color: #BED5E2;
    color: black;
    padding: 4px;
}

.gapped {
    border-collapse: separate;
    border-spacing: 1px !important;
}

.gap_export {
    padding: 4px;
    border: 1px solid rgb(225, 227, 203);
    border-radius: 8px;
    background: lightyellow;
    font-weight: bold;
    white-space: nowrap;
}

.formular * {
    /*vertical-align: middle;*/
}

.etype55 {
    background-color: rgb(186, 231, 118);
    color: black;
}

.etype55 .fc-title {
    color: whitesmoke
}

.summarycard_top h4 {
    display: contents;
    font-size: 130%;
}

.smalllabels {
    width: 100%;
    font-size: 90%;
}

.prevprice {
    color: gray;
}

.strikediag {
    display: inline-block;
    position: relative;
}

.strikediag::before {
    content: '';
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    top: 0.38em;
    bottom: 0.38em;
    background: linear-gradient(to left top, transparent 45.5%, currentColor 47.5%, currentColor 52.5%, transparent 54.5%);
    pointer-events: none;
}

@media screen and (max-width:720px) {
    .profile_table td,
    .report_filter_table td {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        padding: 4px;
        position: relative;
    }
    .col2 td {
        width: 100%;
    }
    .col3 td {
        width: 100%;
    }
    .formular select {}
}

#sp {}

.sp_div1 {
    font-size: 75%;
}

.star-on {
    width: 32px !important;
    height: 32px !important;
    background: url(/images/Star-32.gif) no-repeat;
}

.star-off {
    width: 32px !important;
    height: 32px !important;
    background: url(/images/Star-32-off.gif) no-repeat;
}

#summaryphoto {
    float: left;
    margin-right: 12px;
    margin-top: 4px;
    margin-left: 2px;
}

select {
    counter-reset: line -1;
}

option {
    counter-increment: line;
}

select.linenumbers option:before {
    content: counter(line)". ";
    -webkit-user-select: none;
    width: 20px;
    margin-right: 6px;
    color: grey;
    display: inline-block;
    margin-left: auto;
    text-align: right;
}

select[multiple] {
    min-height: 110px !important;
    min-width: 100% !important;
}

.student_type_10 {
    font-style: italic;
}

.student_progress_table {
    min-width: 50%;
}

.student_progress_table td {
    vertical-align: middle !important;
}

.student_progress_table tr td {
    text-align: center;
    width: 16%;
}

.student_progress_table tr:nth-child(even) {
    background-color: #f0f6f6
}

.student_progress_table tr:nth-child(odd) {
    background-color: #fff
}

.student_progress_table th {
    border-right: 1px solid silver;
    text-align: center;
    background-color: #484848;
    color: whitesmoke;
    height: 39px;
    vertical-align: middle;
}

.student_progress_table tr td:nth-child(1) {
    text-align: left;
    width: auto;
}

.right {
    float: right !important;
}

.text-right {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}

#membersummary {
    float: right;
    border-radius: 18px;
}

@media screen and (max-width:550px) {
    #membersummary {
        position: absolute;
        right: 0px;
        z-index: 999;
    }
}

.material-icons.maindropdown {
    position: relative;
}

a img {
    border: 0;
}

.large_membersummary i.material-icons {
    font-size: 140%;
}

.dashboardheader {
    display: flex;
}

.large_membersummary {
    margin-bottom: 8px;
    flex: 0 0 65%;
    flex-grow: 1;
}

img#ephoto,
img.ephoto {
    width: 36px !important;
    height: 36px !important;
    BORDER-RADIUS: 100% !important;
    min-height: 36px !important;
    margin-right: 8px;
    margin-top: 4px;
    float: left;
}

img#sphoto,
img.sphoto {
    width: 36px;
    height: 36px;
    BORDER-RADIUS: 100%;
}

img.lphoto {
    width: 50%;
    BORDER-RADIUS: 100% !important;
}

img#fphoto,
img.fphoto {
    BORDER-RADIUS: 100%;
    margin-right: 8px;
    margin-bottom: 8px;
}

img.profilephoto150 {
    width: 150px;
    height: 150px;
    box-shadow: 0px 0px 10px silver;
    BORDER-RADIUS: 100%;
}

.card-image.profile {
    height: 190px !important;
}

.card-image.profile img {
    width: 190px !important;
    margin-left: auto;
    margin-right: auto;
}

img#sphotolarge,
img.sphotolarge {
    width: 86px;
    height: 86px;
    BORDER-RADIUS: 100%;
}

 ::selection {
    background: rgba(240, 250, 6, 0.77);
}

.ErrBtn a,
.ErrBtn a:hover {
    color: white !important;
}

.ErrBtn {
    color: white;
    background: blue;
    border-radius: 0;
    padding: 10px;
    font-size: 130%;
    font-weight: bold;
    border: 2px solid white;
    outline: 2px solid blue;
    outline-style: dotted;
    display: table-cell;
}

#passwordbox a {
}

#loginpage {
    min-height: 450px;
    position: relative;
}

#loginform {
    float: right;
    width: 34%;
}

#homepage {
    float: left;
}

.help {
    background: rgb(255, 255, 174);
    border-radius: 8px;
    float: right;
    border: 1px dotted lightgray;
    color: gray;
    padding: 8px;
    font-size: 16px;
}

.help a,
.help a:link,
.help a:visited {
    color: #1c6f98 !important;
}

#mynotes_controls {
    height: 45px;
}

#mynotes_btns a.help.atooltip {
    top: 0px;
}

#mynotes_container .formular {
    padding: 8px;
    display: flex;
    flex-flow: column;
    height: 100%;
}

#mynotes_container .formular .noterow.noteheader {
    flex: 0 1 auto;
    height: 44px;
}

#mynotes_container .formular .noterow.content {
    //flex: 1 1 auto;
}

#mynotes_container .formular .noterow.notefooter {
    flex: 0 1 86px;
}

#mynotes_container .formular .noterow.notefooter center {
    position: relative;
    top: -16px;
}

.sidebox {
    border-bottom: 2px dotted silver;
    padding-top: 4px;
    padding-bottom: 4px;
}

@media screen and (max-width:1045px) {
    #homepage {
        float: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        max-width: 550px;
    }
    #loginform {
        float: none;
        max-width: 364px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

.notifycount {
    background: rgb(213, 5, 5);
    font-weight: normal;
    padding: 0 4px;
    font-size: 100%;
    margin: 4px;
    color: white;
    border-radius: 32px;
}

.notifycount_green {
    background: #4CAF50;
}

.contactcol,
.librarycol {
    margin-left: 5%;
    float: left;
    min-width: 180px;
    margin-bottom: 14px;
    margin-top: 2%;
}

@media screen and (max-width: 850px) {
    .contactcol,
    .librarycol {
        margin-left: 3%;
    }
}

@media screen and (max-width: 630px) {
    .contactcol,
    .librarycol {
        float: none;
        margin-left: auto;
        margin-right: auto;
        width: 204px;
    }
}

#welcome_name a:hover,
#welcome_name a:active {
    text-decoration: underline;
}

.social_login_button {
    display: inline;
}

#companyname {
    width: auto;
    display: inline-block;
    text-align: right;
    font-size: 210%;
    white-space: nowrap;
    padding: 0;
    float: right;
    padding-right: 8px;
    padding-bottom: 20px;
}

#langseldiv {
    padding: 8px;
    float: right;
}

#companylogo {
    width: 100%;
    text-align: left;
}

@media screen and (max-width:800px) {
    #mobilemenu {
        float: right;
        position: absolute;
        right: 24px;
        top: 24px;
        color: white;
        cursor: pointer;
    }
}

@media screen and (min-width:800px) {
    #mobilemenu {
        display: none;
    }
}

#companylogo img {
    width: 100%;
}

#logolarge {
    display: inline;
}

#logosmall {
    display: none;
}

#LangList {
    width: 90%;
    max-width: 200px;
    word-wrap: normal;
}

#LangList {
    width: 80%;
    max-width: 200px;
    word-wrap: normal;
    border: 0px;
    background-color: transparent;
    left: 8px;
    position: relative;
}

#logoutbutton,
#loginbutton {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    float: none;
    max-width: 200px;
    border: 1px solid silver;
    font-size: 130%;
}

#welcome_name {
    float: right;
    width: auto;
    display: inline-block;
    text-align: right;
    font-size: 110%;
    white-space: nowrap;
    padding: 8px;
}

.indented {
    margin-left: 5%;
}

.button1 {
    width: 95% !important;
    /*max-width:243px;*/
}

#material_head {
    display: table-cell;
    width: 100%;
    float: left;
    margin-bottom: 16px;
}

#material_head>div:first-child {
    margin: 4px;
    display: flex;
    position: relative;
}

.material_link_div {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    min-height: 36px;
    vertical-align: middle;
    clear: both;
    cursor: pointer;
}

.material_link_div:hover {
    background-color: rgb(231, 230, 230);
}

#unitheaderbuttons {
    float: right;
}

#newex {
    width: 448px;
    border: 1px solid silver;
    box-shadow: 4px 4px 11px silver;
    background: whitesmoke;
    position: absolute;
    display: inline-block;
}

.smallerzoom {
    -ms-transform: scale(0.7);
    /* IE 9 */
    -ms-transform-origin: 0 0;
    -moz-transform: scale(0.7);
    /* Firefox */
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.7);
    /* Opera */
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.7);
    /* Safari And Chrome */
    -webkit-transform-origin: 0 0;
    transform: scale(0.7);
    /* Standard Property */
    transform-origin: 0 0;
    /* Standard Property */
}


/*unit sumamry*/

.material_title {
    float: left;
    width: 47%;
    min-height: 30px;
    /*47px;*/
    padding-left: 40px;
    margin: 6px;
    display: inline-block;
}

.material_link_div .material_title {
    width: 60%;
}

.sortme .material_title {
    float: none;
    background-position-x: 20px;
    padding-left: 58px;
}

.sortme textarea.text {
    padding-top: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 3px !important;
}

.sortme .controls {
    margin-left: 9px;
    position: relative;
    top: 0px;
    display: inline-block;
    opacity: 0;
}

.sortme:hover .controls {
    opacity: 1;
}

.sortme .section {
    padding-top: 23px;
    min-height: 40PX;
    margin-left: 36px;
}

.sortme p {
    margin: 0;
}

.sectio_sort {
    margin-top: 20px;
}

.sortme .text {
    margin-left: 36px;
    min-height: 36px;
    padding-top: 11px;
    display: inline-block;
    /*width: 80%;*/
}

.sortme .section_controls {
    margin-left: 9px;
    position: relative;
    top: 62px;
    display: inline-block;
    opacity: 0;
}

.sortme:hover .section_controls {
    opacity: 1;
}

.sortme h1 {
    margin-top: 9px;
}

.sortme:hover {
    background: rgb(207, 207, 207);
}

.material_stats {
    width: 36%;
    display: inline-block;
    margin: 8px;
    min-height: 36px;
}


/* for material insertion plugin */

.sortme_wide {
    background-color: rgb(242, 242, 243);
    box-shadow: 2px 2px 8px gray;
    margin: 0px !important;
    padding: 0px !important;
    margin-bottom: 16px !important;
}

.oneMC {
    margin: 12px;
}

#materiallist {
    max-height: 80px;
    overflow-y: scroll;
    border: 1px solid silver;
    font-size: 80%;
}

#materiallist br {
    display: none;
}

#materiallist h2 {
    color: rgb(51, 153, 204);
    font-family: 'Trebuchet MS', Tahoma, verdana, Arial;
    font-size: 17px;
}

#materiallist .material_title {
    min-height: 18px;
    background-size: 16px 16px;
    padding-left: 20px;
}

#materiallist .material_link_div {
    min-height: 18px;
    margin: 3px;
    border: 1px silver solid;
    border-radius: 8px;
    padding: 4px 4px 4px 24px;
    background-color: rgb(247, 247, 247);
    background-position: 4px 5px;
}

#materiallist .material_link_div .del {
    background: url(/images/delete_16.gif);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
}

#materiallist .material_link_div .del:hover {
    background-colour: navy;
}

.btn-group>div.btn>:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0;
}

.stat_info {
    display: inline-block;
    border: 1px solid silver;
    padding: 5px;
    vertical-align: bottom;
    margin: 4px;
}

.delline {
    /*visibility: hidden;*/
    color: grey;
    font-size: 130%;
    position: relative;
    text-align: right;
    float: right;
    padding-left: 12px;
    padding-bottom: 12px;
}

.gridviewcell:hover .delline {
    visibility: visible;
}

.reporttable tr:hover .delline {
    visibility: visible;
}

.reporttable td.text-right {
    text-align: right;
}


/** Course Tree **/

.coursetree ul {
    list-style: none;
}

.coursetree li {
    list-style: none;
    clear: both;
}

.coursetree .row:hover {
    background-color: aliceblue;
}

.coursetree div.row,
.coursetree li ul {
    margin-left: 24px;
    padding: 4px;
}

.coursetree div.row {
    height: 34px;
}

.coursetree div.row:first-child {
    padding-left: 24px;
}

.coursetree div.row>div:first-child {
    padding-left: 24px;
}

.nomargin {
    margin: 0px !important;
}


/**/

@media screen and (max-width: 550px) {
    /*unit sumamry*/
    .material_title {
        float: none;
        width: 100%;
        min-height: 5px;
    }
    .material_stats {
        float: none;
        width: 100%;
    }
    /**/
}

.material_title h2 {
    font-size: 150%;
    display: inline;
}

.h1 {
    color: #39C !important;
    padding: 0 !important;
    display: block;
    font-size: 2em !important;
    -webkit-margin-before: 0.67em;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

input.heading,
textarea.heading {
    color: #39C !important;
    padding: 0 !important;
    font-size: 2em !important;
    font-weight: bold;
    background: white !important;
}

@media screen and (max-width:300px) {
    .material_title h2 {
        font-size: 106%;
    }
    #home h2,
    h2 {
        font-size: 116%;
    }
    .student_progress_table h3 {
        font-size: 78%;
    }
    .mainbody h1,
    .mainbodymin {
        font-size: 100%;
    }
    h2 .text-input,
    h2 select {
        font-size: 66% !important;
    }
}

@media screen and (max-width:450px) and (min-width:300px) {
    .material_title h2 {
        font-size: 150%;
    }
    #home h2,
    h2 {
        font-size: 125%;
    }
    .student_progress_table h3 {
        font-size: 88%;
    }
    .mainbody h1,
    mainbodymin h1 {
        font-size: 160%;
        line-height: 40px;
    }
    h2 .text-input,
    h2 select {
        font-size: 75% !important;
    }
}

.mainbodymin {
    background-color: white;
}

#mainbody {
    background-color: white;
}

.passageimg {
    margin: 4px 8px 4px 8px;
    padding: 0px;
    max-width: 98%;
    height: auto;
    vertical-align: baseline;
}

.nav-brand .passageimg {
    width: auto;
    margin: 4px 8px 4px 8px;
    padding: 0px;
    max-width: 98%;
    height: auto;
}

img[align="left"],
img[style*="float: left"],
img[style*="float:left"] {
    margin: 5px 15px 0px 0px;
}

img[align="right"],
img[style*="float: right"],
img[style*="float:right"] {
    margin: 5px 0px 0px 15px;
}

@media screen and (max-width:530px) {
    .passageimg {
        width: 97%;
        margin: 4px 0px 4px 0px;
        padding: 4px 0px 3px 0px;
    }
    figure.image {
        display: block;
        border: 1px dotted silver;
        background: transparent;
        margin: 16px;
        vertical-align: top;
        width: 97%;
    }
}

.header {
    display: inline-block;
    width: 100%;
    padding: 0;
}

.innerheader {
    margin: 0;
}

input[type="radio"],
input[type="checkbox"] {
    margin: 8px;
}

#RightPane input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;
}

input[type=search]:after {
    content: url("/images/magnifying-glass.gif");
}

input[type="datetime-local"] {
    min-width: 275px;
}

.searchbox input {
    font-size: 140%;
    font-weight: bold
}

input.rounded {
    border: 1px solid #ccc;
    font-size: 140%;
    outline: 0;
    -webkit-appearance: none;
    padding: 12px !important;
    width: 100%;
}


/* NEW CSS CHECKBOX */

.formular input[type=checkbox].css-checkbox {
    display: none;
}

.formular input[type=checkbox].css-checkbox+label.css-label {
    padding-left: 29px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 23px;
    vertical-align: middle;
    cursor: pointer;
    background-size: 28px;
}

.formular input[type=checkbox].css-checkbox:checked+label.css-label {
    background-position: 0 -27px;
}

.formular label.css-label {
    background-image: url(/images/green-checkbox.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.formular input[type=image] {
    background: transparent none;
    border: 0 solid;
}

input.rounded:focus {
    /* supported IE8+ and all other browsers tested.
   * optional, but gives the input focues when selected.
   * change to a color that suits your design.
   */
    border-color: #339933;
}

input.rounded.first {
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

input.rounded.last {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
}

h5 {
    font-size: 150%;
    color: #000;
    font-weight: 700;
}

.daterange i:last-child {
    float: right;
    padding-top: 3px;
}

.daterange.text-input {
    width: 230px !important;
}

.daterange .text-input {
    min-width: 230px !important;
    text-align: left !important;
}

.daterange {
    text-align: left !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    padding-top: 8px !important;
}

th:not('.datepicker th') {
    background-color: rgb(234, 234, 234);
    color: #353535;
    font-size: 115%;
    font-weight: 700;
    padding: 4px;
    text-align: center;
}

@media screen and (max-width:580px) {
    th:not('.datepicker th') {
        font-size: 64%;
    }
}

.centered td {
    text-align: center !important;
}

.outerborder {
    outline: 1px solid #39C;
}

.outerborder td,
.outerborder tr {
    border: 0
}

.bordered,
.bordered table,
.bordered td,
.bordered th {
    border: 1px solid #39C;
    border-collapse: collapse;
    padding: 7px !important;
}

.bordered th {
    background-color: aliceblue;
}

div.bordered {
    border: 1px solid #39C;
    border-collapse: collapse;
    padding: 6px;
    float: left;
    margin: 4px;
}

.notallowedcursor {
    cursor: not-allowed !important;
}

.notallowedcursor h2 {
    color: gray;
}

.notallowedcursor .material_title {
    opacity: 0.6;
}

.overlayBackground {
    background-color: #fff;
    opacity: 0.7;
    -moz-opacity: 0.70;
    filter: alpha(opacity=70);
    z-index: 99999;
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

#centeredcontent {
    height: 150px !important;
    text-align: center;
    border: 2px solid #f90;
    border-radius: 22px;
    color: #000;
    font-size: 200%;
    font-weight: 700;
    position: relative;
    left: 0;
    top: 200px;
    z-index: 99999;
    margin-left: auto;
    margin-top: -50px;
    margin-right: auto;
    width: 400px !important;
}

.lle_clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.pagetop {
    width: 100%;
    min-height: 105px
}

.pagetopicon {
    float: left;
    width: 18%;
    min-height: 75px;
    overflow: visible
}

.pagetopcontent {
    float: left;
    width: 70%
}

.expanddiv {
    cursor: pointer;
}

.expanddivwrap {
    border: 1px solid #AAA;
    padding: 4px;
}

.expand_sym {
    width: 45px;
    margin-top: 7px;
    float: left;
    display: inline-block;
    height: 32px;
}

.expand_rounded {
    background: url(../images/expand_rounded.png) no-repeat;
}

.contract_rounded {
    background: url(../images/contract_rounded.png) no-repeat;
}

@media screen and (max-width:580px) {
    .pagetopcontent {
        float: left;
        width: 90%
    }
}

html,
body {
    height: 100%;
    background-color: white;
}

#lle_page {
    margin: 0;
    padding: 0;
    width: 100%;
}

#wholepage {
    flex: 1 0 auto;
    /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    display: flex;
    /* so children can fill height */
}

#lle_head_left {
    position: relative;
    width: 96px;
    float: left;
    margin-left: 0;
    z-index: 100;
    height: 114px;
    left: 0;
}

#lle_head_right {
    position: relative;
    width: 547px;
    float: right;
    left: 0;
    display: inline-block;
    color: #000;
    height: 114px;
    background: url("/images/lle_head_right.png");
}

#lle_head_centre {
    width: 100%;
    float: left;
    position: relative;
    z-index: -2;
    margin: 0 -2px 0 0;
    color: #000;
    height: 114px;
    background: url("/images/lle_head_mid.png") repeat-x;
}

#lle_head_centre p {
    padding: 0 15px;
}

#lle_name {
    position: absolute;
    left: 117px;
    top: 26px;
}

#lle_textsizer {
    border-radius: 6px;
    display: inline;
    border: 1px dotted #999;
    top: 1px;
    position: relative;
    background-color: lightyellow;
    padding: 3px 8px 4px 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 130%;
    cursor: pointer;
}

#lle_lang {
    position: relative;
    left: -91px;
    text-align: right;
    top: 84px;
    width: 180px
}


/*
#RightPane ul li {
    margin: 0 0 0 7px;
    padding: 0;
    font-size: 100%;
    line-height: 150%;
}

#RightPane ul {
    margin: 0 0 0 7px;
    font-size: 100%;
    line-height: 150%;
    list-style-type: disc;
    padding-left: 40px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
    display: flow-root;
}
*/

body {
    /*
    font-family: ABeeZee, Tahoma, verdana, Arial;
    */
    font-size: 12pt;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    /* Avoid the IE 10-11 `min-height` bug. */
}

.minimenuicon {
    float: left;
    width: 60px;
    zoom: 1;
    display: table-cell;
}

.minimenulink {
    width: 70% !important;
}

.minimenucontainer {
    width: 97%
}

.minimenu {
    margin: 4;
    zoom: 1;
    cursor: pointer;
    display: block;
    min-height: 55px;
    padding: 6px;
    width: 97%;
}

.minimenutext,
.bigmenutext {
    display: table-cell;
    width: 100%;
    zoom: 1;
    font-size: 95%;
}

@media screen and (max-width:250px) {
    .minimenutext,
    .bigmenutext {
        display: table;
        width: 100%;
        zoom: 1
    }
}

a:hover .minimenu,
a:hover .bigmenu {
    background: #DDD;
    color: #000
}

.mainbody a:active {
    text-decoration: none
}

.mainbody a:hover,
.mainbody a:visited:hover {
    color: navy;
    text-decoration: underline;
    text-align: left;
}

.mainbody a {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: #039;
    text-align: left;
}

.mainbody a:visited:not(.btn),
.mainbody a:link:not(.btn) {
    color: #039;
}

.minimenubutton {
    width: 74px !important
}

#faqcol {
    float: left;
    width: 60%;
    display: table-cell;
}

@media screen and (max-width: 870px) {
    .mainbody {
        width: 100% !important;
    }
}

@media screen and (max-width: 770px) {
    #faqcol {
        width: 50%;
    }
}

@media screen and (max-width: 640px) {
    #faqcol {
        width: auto;
    }
}

a .minimenu {
    color: black;
    text-decoration: none;
}

.mainbody h3,
.h3,
.h4,
.mainbody h4 {
    color: #39C;
    display: inline;
    margin-bottom: 0;
}

.mainbody h1,
.mainbodymin h1 {
    color: #39C;
    padding: 0 !important;
    margin: 9px 0px;
}

#home h2,
h2 {
    background: none;
    margin-top: 0;
    width: auto;
    height: auto;
    text-indent: 0;
    color: #39C;
}

.sub_title,
.sub_title a {
    color: #39C;
    font-weight: Bold;
    font-size: 123%;
}

#summary td:first-child {
    color: #39C;
    font-weight: Bold;
    font-size: 123%;
    vertical-align: top
}

.unitlink {
    background-color: rgb(240, 240, 240);
    padding: 5px;
    border-radius: 8px;
    border: 1px solid silver;
}

.flag {
    float: left;
    width: 70px;
    min-height: 54px;
    height: 68px;
    overflow: visible;
}

.promoted {
    background: #CEDEDF;
    padding: 8px;
}


/* REPORT TABLE */

.unread {
    font-weight: bold !important;
    background: pink !important;
}

.viewbtn {
    float: none;
    position: absolute;
    top: -12px;
    z-index: 0;
}

.viewbtn a {
    height: 10px;
    border-left: 1px solid silver;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
    padding: 4px 6px 6px 6px;
    display: inline;
    border-radius: 8px 8px 0 0;
    position: relative;
    top: -12px;
    z-index: 0;
    background: #eeeeee;
    color: black !important;
    text-decoration: none !important;
    font-weight: bold;
}

.viewbtn a.selected {
    background-color: white !important;
    border-top: 4px groove orange;
}

.selectform {
    width: 100%;
    text-align: right;
    float: right;
}

.selectformspacer {
    min-height: 36px;
}

span.caret.caret-right {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    position: absolute;
    right: 5px;
    top: 14px;
}

.dropdown-left-open {
    left: -100% !important;
}

.btn-large.settings {
    font-size: 20px;
    max-height: 38px;
    height: 38px;
    border-radius: 4px 0 0 4px;
}

.noborder {
    border: 0 solid silver !important;
}

.warntext {
    float: right;
    background-color: crimson;
    color: white;
    padding: 3px;
    padding-left: 10px;
    padding-right: 12px;
    font-variant: small-caps;
}

.warntext a {
    color: white !important
}

.ellip {
    padding-left: 4px;
    white-space: nowrap;
    margin: 4px;
    height: 8px;
    max-height: 8px;
    background-color: rgb(226, 234, 241);
    overflow: hidden;
    font-size: xx-small;
    padding-right: 4px;
}

.chartdiv {
    padding-top: 16px;
    padding-bottom: 16px;
}

.repid {
    color: rgb(133, 173, 189);
    font-size: 80%;
    float: right;
}

.pageselect {
    width: auto;
    height: 38px;
    float: left;
}

.reporttable {
    margin-right: 3px;
    margin-top: 14px;
}

.red-item {
    color: white;
    background-color: red;
    padding: 2px 6px 2px 6px;
    border-radius: 8px;
}

td.dupcell {
    visibility: hidden;
}

span.sortgroupcount {
    color: white;
    font-size: 82%;
    font-weight: normal;
    float: right;
    background-color: #a9a8a8;
    padding: 2px;
    border-radius: 38px;
    min-width: 22px;
    text-align: center;
}

.reporttable .reportimage {
    max-width: 50px
}

.report_wait {
    width: 0;
    z-index: 99999;
    background-color: #eee;
    opacity: 0.7;
    position: absolute;
    height: 1px;
    overflow: hidden;
}

.range {
    background-color: #eee;
    font-size: 110%;
    ffont-weight: bold;
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 2px;
}

.reportfooter {
    padding-bottom: 20px;
    margin-bottom: 8px;
    margin-top: 30px;
}

.sort_asc {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    /* left arrow slant */
    border-right: 5px solid transparent;
    /* right arrow slant */
    border-bottom: 5px solid white;
    /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
    display: inline-block;
    position: relative;
    top: -4px;
    margin-right: 8px;
}

.sort_asc_black {
    border-bottom: 5px solid black;
}


/* create an arrow that points down */

.sort_desc {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    font-size: 0;
    line-height: 0;
    display: inline-block;
    position: relative;
    top: -4px;
    margin-right: 8px;
}

.sort_desc_black,
.reset .sort_desc_black {
    border-top: 5px solid black !important;
    vertical-align: middle !important;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.sorted {
    font-weight: bold;
}

.sortedth {
    background-color: #adadad;
}

.tableheader .sortedth a:hover,
.tableheader .sortedth a:visited:hover {
    color: white !important;
}

.selectrow {
    background-color: rgba(245, 245, 29, 0.79) !important;
}

.reporttablesingle td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.reporttable th {
    white-space: nowrap;
    /*word-break: break-all;*/
    text-align: left;
}

.reporttable th a {
    width: 100%;
}

.reporttable td,
.reporttablesingle td,
.reporttable th,
.reporttablesingle th {
    /*border-left: 1px solid #ddd;*/
    border-bottom: 0;
    text-align: left;
    cursor: hand;
    cursor: pointer;
    margin: 2px;
    padding-left: 8px;
    padding-right: 8px;
}

.reporttable th,
.reporttablesingle th {
    cursor: default;
    border-bottom: 1px solid silver !important;
}

.reporttablesingle td,
.reporttablesingle th {
    border-left: 0px !important
}

.reporttable td,
.reporttable th {
    border-bottom: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    text-align: left;
    margin: 2px;
    /*border-top: 1px solid silver;*/
    /*height: 30px;*/
    overflow: hidden;
}

.reporttable td.numeric {
    text-align: right;
}

.reporttable tr {
    border-bottom: 1px solid #d6d6d6;
}

.reporttable tr:hover {
    background-color: aliceblue;
}

.reportsort {
    margin-top: 12px;
    padding: 8px;
    font-size: 120%;
    position: relative;
    border-bottom: 2px solid darkgray;
}

.reportsort i {
    width: 28px;
    position: relative;
    background-color: #ffffff;
    height: 26px;
    top: -3px;
    font-size: 140% !important;
    border: 1px solid gray;
    color: gray;
}

.subrepcol span i {
    float: right;
    width: 28px;
    position: relative;
    background-color: #ffffff;
    height: 26px;
    top: -3px;
    font-size: 180% !important;
    border: 1px solid gray;
    color: gray;
    padding-left: 2px;
}

td.subrepcell {
    padding: 0px;
    font-size: 95%;
    border-top: 0px;
}

.subrepcol span {
    position: relative;
    width: 64px;
    display: inline-block;
    max-height: 20px;
    font-size: 80%;
}

.subrepcol {
    width: 44px;
    vertical-align: top;
}

.report.reporttablesingle td:hover,
.reporttablesingle tr:nth-child(even):hover,
.reporttablesingle tr:nth-child(odd):hover {
    background-color: #ddd !important;
}

@media screen and (max-width: 350px) {
    .reporttable td,
    .reporttable tr,
    .reporttable table,
    .reporttable th,
    .reporttable tbody {
        display: table-row;
    }
    .reporttable td td {
        border-left: 0;
        border-bottom: 0;
        width: 100%;
    }
}

.headernotes {
    display: inline-block;
    width: 100%;
}

.rowsperpagediv {
    display: inline;
    margin-right: 11px;
    float: left;
    height: 38px;
    white-space: nowrap;
}

.rowsperpagediv select {
    width: auto;
    height: 38px;
}

.subrepcell {
    border-left: 0px !important;
}

.reporttable tr:nth-child(odd) .column-hover {
    background-color: #eee
}

.reporttable tr.tablesubheader {
    background-color: white !important;
}

.tableheader a {
    color: #353535 !important;
    text-decoration: none !important
}

.tableheader a:hover,
.tableheader a:visited:hover {
    color: #5588aa !important;
    text-decoration: none !important
}

.subtableheader {
    background: transparent;
    font-weight: bold !important;
    border-left: 0 !important;
    padding: 0 !important;
}

.reporttable td.subtableheader {
    padding: 0 !important;
}

.firstcolhead {
    -moz-border-top-left-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;
}

.lastcolhead {
    -moz-border-top-right-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
}

.full {
    border-spacing: 0;
    empty-cells: show;
    border-color: silver;
    font-size: 100%;
    white-space: normal;
    max-width: 100%;
}

.NavBar {
    float: right;
    color: #666;
    display: inline-block;
    font-weight: bold;
}

.navbar-fixed-bottom,
.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1036;
}

.nav-login {
    width: 100px;
    display: inline-block;
    float: right;
}

.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header {
    margin-right: -15px;
    margin-left: 0px;
}

@media (min-width: 768px) {
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
        margin-left: 0px;
    }
    .navbar-nav {
        float: left;
        margin: 0;
        margin-left: 16px;
    }
}

.pg {
    font-size: 100%;
    display: inline;
    background-color: white;
}

.pg a,
.pg a:hover,
.pg a:visited {
    color: #666;
    text-decoration: none;
    padding: 4px;
}

.pg a:hover {
    background-color: #DDD;
}

div.forwardbut,
span.forwardbut {
    background: url(/images/forwardbut.gif) no-repeat scroll 3px 3px;
    color: #090;
    font-size: 144%;
    font-weight: 700;
    height: 62px;
    padding: 17px 0 0 27px;
    width: 243px;
}

.levelcolor0 {
    background-color: white !important;
}

.levelcolor1 {
    background-color: #CEFFE1 !important;
}

.levelcolor2 {
    background-color: #FFFFC6 !important;
}

.levelcolor3 {
    background-color: #F5E1FF !important;
}

.levelcolor4 {
    background-color: #F696AD !important;
}

.levelcolor5 {
    background-color: #B0E4FD !important;
}

.levelcolor6 {
    background-color: #DBDBC8 !important;
}

.levelcolor7 {
    background-color: silver !important;
}

.levelcolor8 {
    background-color: #d2f1bd !important;
}

td {
    text-align: left;
    vertical-align: top;
}

td[class*='styleicon_'],
td[class*='caticon_'],
td[class*='categoryicon32_'] {
    background-position: 5px 5px;
    padding-left: 32px !important;
    background-origin: initial;
    background-size: 19px;
}

span[class*='styleicon_'],
span[class*='caticon_'],
span[class*='categoryicon32_'] {
    padding-left: 38px !important;
    background-origin: initial;
    min-height: 16px;
    display: inline-block;
}

.levelpill {
    padding: 5px;
    height: 34px;
    display: inline-block;
    border-radius: 4px;
}

.levelicon_0:before {
    content: "⬤ ";
    color: lightpink;
}

.levelicon_1:before {
    content: "⬤ ";
    color: green;
}

.levelicon_2:before {
    content: "⬤ ";
    color: yellow;
}

.levelicon_3:before {
    content: "⬤ ";
    color: purple;
}

.levelicon_4:before {
    content: "⬤ ";
    color: red;
}

.levelicon_5:before {
    content: "⬤ ";
    color: blue;
}

.levelicon_6:before {
    content: "⬤ ";
    color: #868677;
}

.levelicon_7:before {
    content: "⬤ ";
    color: black;
}

.styleicon_0 {
    background: url(/images/exercisestyle/0_16.gif) no-repeat;
}

.styleicon_1 {
    background: url(/images/exercisestyle/1_16.gif) no-repeat;
}

.styleicon_2 {
    background: url(/images/exercisestyle/2_16.gif) no-repeat;
}

.styleicon_3 {
    background: url(/images/exercisestyle/3_16.gif) no-repeat;
}

.styleicon_4 {
    background: url(/images/exercisestyle/4_16.gif) no-repeat;
}

.styleicon_5 {
    background: url(/images/exercisestyle/5_16.gif) no-repeat;
}

.styleicon_6 {
    background: url(/images/exercisestyle/6_16.gif) no-repeat;
}

.styleicon_7 {
    background: url(/images/exercisestyle/7_16.gif) no-repeat;
}

.styleicon_8 {
    background: url(/images/exercisestyle/8_16.gif) no-repeat;
}

.styleicon_9 {
    background: url(/images/exercisestyle/9_16.gif) no-repeat;
}

.styleicon_10 {
    background: url(/images/exercisestyle/10_16.gif) no-repeat;
}

.styleicon_11 {
    background: url(/images/exercisestyle/11_16.gif) no-repeat;
}

.styleicon_12 {
    background: url(/images/exercisestyle/12_16.gif) no-repeat;
}

.styleicon_99 {
    background: url(/images/exercisestyle/99_16.gif) no-repeat;
}

.styleicon32_0,
.reset .styleicon32_0 {
    background: url(/images/exercisestyle/0_32.gif) no-repeat;
}

.styleicon32_1,
.reset .styleicon32_1 {
    background: url(/images/exercisestyle/1_32.gif) no-repeat;
}

.styleicon32_2,
.reset .styleicon32_2 {
    background: url(/images/exercisestyle/2_32.gif) no-repeat;
}

.styleicon32_3,
.reset .styleicon32_3 {
    background: url(/images/exercisestyle/3_32.gif) no-repeat;
}

.styleicon32_4,
.reset .styleicon32_4 {
    background: url(/images/exercisestyle/4_32.gif) no-repeat;
}

.styleicon32_5,
.reset .styleicon32_5 {
    background: url(/images/exercisestyle/5_32.gif) no-repeat;
}

.styleicon32_6,
.reset .styleicon32_6 {
    background: url(/images/exercisestyle/6_32.gif) no-repeat;
}

.styleicon32_7,
.reset .styleicon32_7 {
    background: url(/images/exercisestyle/7_32.gif) no-repeat;
}

.styleicon32_8,
.reset .styleicon32_8 {
    background: url(/images/exercisestyle/8_32.gif) no-repeat;
}

.styleicon32_9,
.reset .styleicon32_9 {
    background: url(/images/exercisestyle/9_32.gif) no-repeat;
}

.styleicon32_10,
.reset .styleicon32_10 {
    background: url(/images/exercisestyle/10_32.gif) no-repeat;
}

.styleicon32_11,
.reset .styleicon32_11 {
    background: url(/images/exercisestyle/11_32.gif) no-repeat;
}

.styleicon32_12,
.reset .styleicon32_12 {
    background: url(/images/exercisestyle/12_32.gif) no-repeat;
}

.styleicon32_99,
.reset .styleicon32_99 {
    background: url(/images/exercisestyle/99_32.gif) no-repeat;
}

.categoryicon32_0,
.reset .categoryicon32_0 {
    background: url(/images/category/0_32.gif) no-repeat;
}

.categoryicon32_1,
.reset .categoryicon32_1 {
    background: url(/images/category/1_32.gif) no-repeat;
}

.categoryicon32_2,
.reset .categoryicon32_2 {
    background: url(/images/category/2_32.gif) no-repeat;
}

.categoryicon32_3,
.reset .categoryicon32_3 {
    background: url(/images/category/3_32.gif) no-repeat;
}

.categoryicon32_4,
.reset .categoryicon32_4 {
    background: url(/images/category/4_32.gif) no-repeat;
}

.categoryicon32_5,
.reset .categoryicon32_5 {
    background: url(/images/category/5_32.gif) no-repeat;
}

.categoryicon32_6,
.reset .categoryicon32_6 {
    background: url(/images/category/6_32.gif) no-repeat;
}

.categoryicon32_7,
.reset .categoryicon32_7 {
    background: url(/images/category/7_32.gif) no-repeat;
}

.categoryicon32_8,
.reset .categoryicon32_8 {
    background: url(/images/category/8_32.gif) no-repeat;
}

.categoryicon32_9,
.reset .categoryicon32_9 {
    background: url(/images/category/9_32.gif) no-repeat;
}

.categoryicon32_10,
.reset .categoryicon32_10 {
    background: url(/images/category/10_32.gif) no-repeat;
}

.categoryicon32_11,
.reset .categoryicon32_11 {
    background: url(/images/category/11_32.gif) no-repeat;
}

.categoryicon32_12,
.reset .categoryicon32_12 {
    background: url(/images/category/12_32.gif) no-repeat;
}

.categoryicon32_13,
.reset .categoryicon32_13 {
    background: url(/images/category/13_32.gif) no-repeat;
}

.categoryicon32_14,
.reset .categoryicon32_14 {
    background: url(/images/category/14_32.gif) no-repeat;
}

.categoryicon32_17,
.reset .categoryicon32_17 {
    background: url(/images/category/17_32.gif) no-repeat;
}

.categoryicon32_18,
.reset .categoryicon32_18 {
    background: url(/images/category/18_32.gif) no-repeat;
}

.categoryicon32_19,
.reset .categoryicon32_19 {
    background: url(/images/category/19_32.gif) no-repeat;
}

.categoryicon32_20,
.reset .categoryicon32_20 {
    background: url(/images/category/20_32.gif) no-repeat;
}

.categoryicon32_21,
.reset .categoryicon32_21 {
    background: url(/images/category/21_32.gif) no-repeat;
}

.categoryicon32_22,
.reset .categoryicon32_22 {
    background: url(/images/category/22_32.gif) no-repeat;
}

.categoryicon32_23,
.reset .categoryicon32_23 {
    background: url(/images/category/23_32.gif) no-repeat;
}

.categoryicon32_24,
.reset .categoryicon32_24 {
    background: url(/images/category/24_32.gif) no-repeat;
}

.categoryicon32_25,
.reset .categoryicon32_25 {
    background: url(/images/category/25_32.gif) no-repeat;
}

.categoryicon32_26,
.reset .categoryicon32_26 {
    background: url(/images/category/26_32.gif) no-repeat;
}

.categoryicon32_27,
.reset .categoryicon32_27 {
    background: url(/images/category/27_32.gif) no-repeat;
}

.categoryicon32_28,
.reset .categoryicon32_28 {
    background: url(/images/category/28_32.gif) no-repeat;
}

.categoryicon32_31,
.reset .categoryicon32_31 {
    background: url(/images/category/31_32.gif) no-repeat;
}

.categoryicon32_32,
.reset .categoryicon32_32 {
    background: url(/images/category/32_32.gif) no-repeat;
}

.categoryicon32_33,
.reset .categoryicon32_33 {
    background: url(/images/category/33_32.gif) no-repeat;
}

.categoryicon32_34,
.reset .categoryicon32_34 {
    background: url(/images/category/34_32.gif) no-repeat;
}

.categoryicon32_35,
.reset .categoryicon32_35 {
    background: url(/images/category/35_32.gif) no-repeat;
}

.categoryicon32_40,
.reset .categoryicon32_40 {
    background: url(/images/category/40_32.gif) no-repeat;
}

.categoryicon32_41,
.reset .categoryicon32_41 {
    background: url(/images/category/41_32.gif) no-repeat;
}

.categoryicon32_42,
.reset .categoryicon32_42 {
    background: url(/images/category/42_32.gif) no-repeat;
}

.categoryicon32_99,
.reset .categoryicon32_99 {
    background: url(/images/category/99_32.gif) no-repeat;
}

.categoryicon32_100,
.reset .categoryicon32_100 {
    background: url(/images/category/100_32.gif) no-repeat;
}

.categoryicon32_-1,
.reset .categoryicon32_-1 {
    background: url(/images/category/-1_32.gif) no-repeat;
}


/*study centre category display*/

#leveldisplay {
    padding: 8px;
    border-radius: 8px;
    margin-top: 5px;
    display: inline-block;
}

.category_tile {
    border: 1px #d8d8d8 solid;
    margin: 12px;
    padding: 10px;
    cursor: pointer;
    width: 20%;
    float: left;
    height: 220px;
    background: white;
}

@media screen and (max-width:1200px) {
    .category_tile {
        width: 28%
    }
}

@media screen and (max-width:900px) {
    .category_tile {
        width: 45%
    }
}

@media screen and (max-width:600px) {
    .category_tile {
        width: 95%
    }
}

.cat_img {
    width: 100%;
    height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.cat_info {
    margin-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat_info_img {
    width: 32px;
    height: 32px;
    float: left;
    margin-right: 16px;
}

.unitcount {
    font-style: italic;
    color: darkgrey;
}

.category_tile:hover {
    box-shadow: 0px 0px 12px silver;
    padding: 8px;
}

.cat_img_0 {
    background-image: url("/images/category/large/0.jpg");
}

.cat_img_1 {
    background-image: url("/images/category/large/1.jpg");
}

.cat_img_2 {
    background-image: url("/images/category/large/2.jpg");
}

.cat_img_3 {
    background-image: url("/images/category/large/3.jpg");
}

.cat_img_4 {
    background-image: url("/images/category/large/4.jpg");
}

.cat_img_5 {
    background-image: url("/images/category/large/5.jpg");
}

.cat_img_6 {
    background-image: url("/images/category/large/6.jpg");
}

.cat_img_7 {
    background-image: url("/images/category/large/7.jpg");
}

.cat_img_8 {
    background-image: url("/images/category/large/8.jpg");
}

.cat_img_10.maincat3 {
    background-image: url("/images/category/large/10_3.jpg");
}

.cat_img_10 {
    background-image: url("/images/category/large/10.jpg");
}

.cat_img_18 {
    background-image: url("/images/category/large/18.jpg");
}

.cat_img_19 {
    background-image: url(/images/category/large/19.jpg);
}

.cat_img_21 {
    background-image: url("/images/category/large/20.jpg");
}

.cat_img_21 {
    background-image: url("/images/category/large/21.jpg");
}

.cat_img_22 {
    background-image: url("/images/category/large/22.jpg");
}

.cat_img_23 {
    background-image: url("/images/category/large/23.jpg");
}

.cat_img_24 {
    background-image: url("/images/category/large/24.jpg");
}

.cat_img_25 {
    background-image: url("/images/category/large/25.jpg");
}

.cat_img_26 {
    background-image: url("/images/category/large/26.jpg");
}

.cat_img_27 {
    background-image: url("/images/category/large/27.jpg");
}

.cat_img_28 {
    background-image: url("/images/category/large/28.jpg");
}

.cat_img_29 {
    background-image: url("/images/category/large/29.jpg");
}

.cat_img_30 {
    background-image: url("/images/category/large/30.jpg");
}

.cat_img_31 {
    background-image: url("/images/category/large/31.jpg");
}

.cat_img_32 {
    background-image: url("/images/category/large/32.jpg");
}

.cat_img_33 {
    background-image: url("/images/category/large/33.jpg");
}

.cat_img_34 {
    background-image: url("/images/category/large/34.jpg");
}

.cat_img_35 {
    background-image: url("/images/category/large/35.jpg");
}
.cat_img_36 {
    background-image: url("/images/category/large/36.jpg");
}
.cat_img_37 {
    background-image: url("/images/category/large/37.jpg");
}
.cat_img_40 {
    background-image: url("/images/category/large/40.jpg");
}

.cat_img_41 {
    background-image: url("/images/category/large/41.jpg");
}

.cat_img_42 {
    background-image: url("/images/category/large/42.jpg");
}

.cat_img_43 {
    background-image: url("/images/category/large/43.jpg");
}

.cat_img_44 {
    background-image: url("/images/category/large/44.jpg");
}

.cat_img_45 {
    background-image: url("/images/category/large/45.jpg");
}

.cat_img_46 {
    background-image: url("/images/category/large/46.jpg");
}

.cat_img_47 {
    background-image: url("/images/category/large/47.jpg");
}

.cat_img_48 {
    background-image: url("/images/category/large/48.jpg");
}

.cat_img_49 {
    background-image: url("/images/category/large/49.jpg");
}

.cat_img_50 {
    background-image: url("/images/category/large/50.jpg");
}


.cat_img_99 {
    background-image: url("/images/category/large/99.jpg");
}

.cat_img_99.maincat3 {
    background-image: url("/images/category/large/99_3.jpg");
}

.cat_img_100 {
    background-image: url("/images/category/large/100.jpg");
}


/*   */

.rowselected {
    background-color: #ddd !important
}

#results_set .material_title {
    padding-left: 40px;
    min-height: 32px;
    display: inline-block;
}

blockquote {
    background: #F6FD8C;
    border-left: 10px solid #EAA945;
    margin: 1.5em 15px;
    padding: 1.5em 18px;
    quotes: "\201C""\201D""\2018""\2019";
    display: table-cell;
    border-radius: 5px;
}

blockquote:before {
    color: #98660B;
    content: open-quote;
    font-size: 5em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}

blockquote p {
    display: inline;
    font-family: "Times New Roman", serif;
    font-size: 126%;
}

.author {
    float: right;
    color: darkgrey;
    font-style: italic;
    font-weight: bold;
}

.lle_open {
    clear: both;
    position: absolute;
    font-size: 80px;
    left: 5px;
    margin: 0em;
    top: 0;
    color: #39C;
    font-family: times New Roman;
}

.close {
    position: absolute;
    font-size: 80px;
    bottom: -10px;
    right: 5px;
    font-family: times New Roman;
    margin: 0em;
    color: #39C;
}

.left {
    float: left;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

.slider {
    background: none repeat scroll 8px 4px #CDF;
    border-color: silver;
    border-style: groove;
    border-width: 2px;
    display: inline-block;
    height: 3px;
    width: 245px;
}

.slider .knob {
    background: url("/images/sliderpointer.png") repeat scroll 0 0 transparent;
    height: 17px;
    width: 12px;
}

.invalidform {
    background-color: red !important;
    color: white;
    font-size: 140%;
    font-weight: bold;
}

div.info:empty,
span.info:empty {
    display: none
}

div.info,
span.info {
    background: #FFFCF2 url(/images/info_32.png) no-repeat scroll 3px 3px;
    border: 1px solid #AAA
}

div.print_info,
span.print_info {
    background: #FFFCF2;
    border: 1px solid #AAA
}

div.info h2,
span.info h2,
a .minimenu,
a .bigmenu,
.mainbody a:link.rowhighlighter,
.mainbody a:visited.rowhighlighter {
    color: #000
}

div.alert-danger,
span.alert-danger {
    border-left: 7px solid darkred;
}

.alert-danger h2 {
    color: #2e2c2c;
}

div.info,
span.info,
div.download,
div.tip,
span.tip,
div.train,
span.train,
div.print_info,
span.print_info,
div.print_alert,
span.print_alert,
div.print_download,
div.print_tip,
span.print_tip,
div.print_train,
span.print_train {
    margin: 10px 0;
    position: relative;
    padding-left: 30px;
}

div.info {
    padding: 8px 10px 16px 50px;
    display: flow-root;
}

div.info .help {
    top: -28px;
}

div.tip,
span.tip {
    background: #fff5eb url(/images/div_tip.png) 3px 3px no-repeat;
    border-top: 2px dotted #ffb4a0;
    border-bottom: 1px dotted #ffb4a0;
    box-shadow: 3px 3px 16px grey;
    display: flow-root;
}

div.train,
span.train {
    background: #EBFCFF url(/images/div_train.png) 11px 23px no-repeat;
    border: 4px dotted #B2B4B4;
    box-shadow: 0px 0px 7px gray;
    border-radius: 8px;
    padding-left: 57px;
    padding-bottom: 20px;
    display: flow-root;
}

@media screen and (max-width:300px) {
    div.info,
    span.info,
    div.download,
    div.tip,
    span.tip,
    div.train,
    span.train {
        padding: 36px 10px 7px 0;
    }
}

span.note,
span.info,
span.tip,
.unnamed1,
.lle_clearfix,
span.train {
    display: inline-block;
}

.inlineblock {
    display: inline;
    float: left;
    margin: 4px;
    border: 1px solid silver;
    border-radius: 8px;
    padding: 4px;
}

.inlineblock2 {
    display: inline-block;
    float: none;
    margin: 2px 0px 2px 0px;
    border: 1px solid silver;
    border-radius: 8px;
    padding: 4px;
}

.price {
    border-bottom: 4px double black;
    font-weight: bold;
}

.mnths {
    position: relative;
    bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    font-size: 200%;
    font-weight: bold;
}

.leftimg {
    float: left;
}

.cb_export {
    border: 2px solid black;
    min-width: 17px;
    height: 17px;
    display: inline-block;
    text-align: center;
}


/* REORDERING */

.reordervcontinter .reorderv {
    display: inline-block;
}

.reorderv {
    margin: 4px;
    background: #eee;
    border: 2px solid gray;
    width: 80%;
    cursor: pointer;
    padding: 4px;
    text-align: left;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 26px;
}

.correctreorder {
    background: white url(/images/tick.gif) no-repeat scroll left center;
    text-indent: 20px;
    background-position: 4px;
    cursor: default !important;
}

.wrongreorder {
    background: white url(/images/cross.gif) no-repeat scroll left center;
    text-indent: 20px;
    color: red;
    background-position: 4px;
    cursor: default !important;
}

.indent {
    margin-left: 7px;
    /*zoom: 2;*/
}

.top td {
    vertical-align: top;
}


/* proofreading */

.prtable {
    border: 3px solid grey;
}

.prtable td {
    vertical-align: top;
    text-align: left;
    padding: 6px;
    font-family: "Times New Roman", Times, serif;
    font-size: 150%;
}

.prtable td:nth-child(even) {
    font-size: 123%;
    width: 100px;
    color: gray;
    font-style: italic;
}

.prtable tr:nth-child(odd) {
    background-color: #eef;
}

.added {
    text-decoration-line: none;
    color: #009900 !important;
}

.deleted {
    text-decoration: line-through !important;
    color: rgb(153, 0, 0) !important;
    ;
}

.deleted2 {
    text-decoration-line: none !important;
    color: rgb(153, 0, 0) !important;
}

.changed {
    text-decoration-line: none !important;
    color: rgb(0, 0, 255) !important;
}

.pr_text {
    font-family: 'Times New Roman', Times, serif;
    font-size: 145% !important;
}

.mce-i-cloze {
    background: url('/images/exercisestyle/6_16.gif') !important;
}

.mce-i-addicon {
    background: url('/images/add_icon.png') !important;
    background-size: cover !important;
}

.mce-i-delicon {
    background: url('/images/delete-16.gif') !important;
    background-size: cover !important;
}

.mce-i-changeicon {
    background: url('/images/change_icon.gif') !important;
    background-size: cover !important;
}


/* MATCHING PAIRS */

.paircol {
    display: table-row;
}

.mpgraderow {
    display: table-row;
    width: 100%;
}

.mptable {
    display: table;
    width: 100%;
    border-spacing: 20px;
    border-collapse: separate;
}

.mptable td textarea {
    border: 0px;
    resize: none;
    background: transparent;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.mptable tr td:first-child {
    opacity: 0;
    background: white;
    cursor: pointer;
}

.mptable tr:hover td:first-child {
    opacity: 1;
}

.mpword textarea {
    text-align: right;
}

.mpword {
    text-align: right;
    padding: 4px;
    border: 3px solid gray;
    margin-right: 0;
    text-align: right;
    border-right: 1px dotted gray;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    font-size: 180%;
    width: 50%;
    display: table-cell;
}

.mptable td {
    background: #eee;
}

.mpmatch {
    text-align: left;
    padding: 4px;
    border: 3px solid gray;
    margin-right: 0;
    text-align: right;
    border-left: 1px dotted gray;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    font-size: 180%;
    width: 50%;
    display: table-cell;
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.dragsgrade {
    text-align: left;
    left: 0;
    top: 0;
    padding: 4px;
    border: 3px solid gray;
    margin-right: 0;
    border-left: 1px dotted gray;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    font-size: 130%;
    vertical-align: middle;
    width: 50%;
    display: table-cell;
}


/* END */

.pagetitleimage {
    background: url();
    min-height: 60px;
    background-size: cover;
    background-position: center center;
    position: relative;
    display: inline-block;
    width: 100%;
    background-color: #f3f3f380;
    /* background-attachment: fixed; */
    background-blend-mode: lighten;
}

.adminset {
    width: 45%;
    float: left;
    margin-right: 4%;
    -webkit-margin-start: 2px;
    e-webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
}

@media screen and (max-width: 700px) {
    .adminset {
        width: 100%;
        margin-right: 0;
        -webkit-margin-start: 0;
        e-webkit-margin-end: 0;
        -webkit-padding-before: 0;
        -webkit-padding-start: 0;
        -webkit-padding-end: 0;
        -webkit-padding-after: 0;
    }
}


/* search results */

#searchtable span.unit_title {
    float: left;
    padding-left: 40px !important;
    display: inline-block;
    min-height: 30px;
}

.progress_unit {
    float: right;
    width: 135px;
    text-align: right;
    position: absolute;
    right: 0px;
    margin-bottom: -60px;
    min-width: 136px;
    top: 7px;
}

.available_unit {
    float: right;
    display: table-cell;
    width: 135px;
    text-align: right;
    position: relative;
    top: 0px;
    margin-bottom: -60px;
    min-width: 136px;
}

@media screen and (max-width:720px) {
    .available_unit {
        display: inline;
        width: 101px;
    }
}

.formular fieldset {
    padding: 0;
    border: 1px solid #B5B8C8;
    margin-bottom: 12px;
}

.infieldset {
    margin: 8px;
}

.formular fieldset ul li {
    font-size: 160%;
    margin-left: 22px;
}

.formular legend {
    color: #39C;
    font-weight: 700;
    font-size: 170%;
    margin-left: 12px;
    margin-bottom: 18px;
}

.formular fieldset label {
    display: block;
    float: left;
    text-align: inherit;
    width: auto
}

.text-input:hover,
select:hover {
    background-color: aliceblue;
}

label span {
    color: #39c;
    font-weight: 100;
    font-size: 120%;
}

.black label span {
    color: #ccc
}

.adjust {
    max-width: initial !important;
    width: initial !important;
}

.formular input,
.formular select,
.formular textarea {
    display: inline;
    margin-bottom: 5px;
    vertical-align: middle;
    border-bottom: 1px silver solid;
}

.formular textarea {
    min-height: 64px;
    max-width: 97%;
}

.formular .text-input,
.formular select {
    color: #444;
    padding: 4px;
    margin-top: 4px;
    border: 2px solid #B5B8C8;
    border: 0px solid #B5B8C8;
    font-size: 100%;
    margin-bottom: 4px;
    border-bottom: 1px silver solid;
    font-family: ABeeZee, Tahoma, verdana, Arial;
    width: 78%;
    max-width: 300px;
    height: 37px;
    -webkit-border-radius: 0px;
    background-color: transparent;
    border-radius: 0px;
}

h3 .text-input,
h3 select {
    height: 30px !important;
}

h1 .text-input,
h1 select {
    height: 48px !important;
}

h2 .text-input,
h2 select {
    height: 45px !important;
}

.formular select {
    word-wrap: normal !important;
    min-height: 25px;
    margin-top: 1px;
    padding-left: 0px;
    max-height: 48px;
}

.formular.max .text-input,
.formular.max select,
.shrink-to-fit {
    max-width: 100%;
}

.short {
    width: 70px !important;
}

.smallnumber {
    width: 70px !important;
}

.max {
    width: 94% !important;
    max-width: 100% !important;
}

.max2 {
    width: 80% !important;
    max-width: 80% !important;
}

.exercise h1 select {
    min-height: 50px;
}

h1 .qnum span {
    height: 50px;
    font-size: 24px;
}

.exercise h2 select {
    min-height: 45px !important;
    height: 45px !important;
}

h2 .qnum span {
    height: 45px;
    font-size: 24px;
}

.exercise select,
.exercise .selection {
    max-width: 100%;
    width: auto;
    font-weight: bold;
}

.exercise select {
    height: 36px;
}

select.text-input {
    height: 32px;
}

.formular input.text-input {
    margin-top: 1px;
}

.formular .optionlist input.text-input {
    margin: 0px;
    width: 80% !important;
    padding: 8px;
}

.text-input {
    color: #444;
    padding: 4px 4px 3px;
    border: 0px solid #B5B8C8;
    font-size: 120%;
    margin-bottom: 4px;
    margin-right: 4px;
    height: 32px;
    border-bottom: 1px silver solid;
}

@media screen and (max-width:670px) {
    .text-input {
        max-width: 270px;
    }
}

.formular .infos {
    background: #FFF;
    color: #333;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #B5B8C8
}

.formular span.checkbox,
.formular .checkbox {
    display: inline
}

.formular .button {
    text-align: right;
    margin-top: 20px;
    vertical-align: middle;
}

.report_filter_table select {
    width: auto;
}

.submit {
    color: #555;
    float: right;
    text-decoration: none
}

.formular a.submit {
    border: 1px solid #AAA;
    padding: 4px
}

input.button {
    border: 0px solid #AAA;
    padding: 4px 4px 1px;
    font-size: 120%;
    margin-top: 4px
}

.formular input {
    border: 0px solid #AAA;
    padding: 4px;
    vertical-align: middle;
}

.clearboth {
    clear: both;
}

.formular hr {
    clear: both;
    border: 1px #e6e6e6 solid;
    line-height: normal;
}

.formular .fc-error {
    color: #555;
    padding: 4px;
    border: 1px solid #B5B8C8;
    margin-bottom: 15px;
    background: #FFEAEA
}

.gap_example {
    border: 2px solid #B5B8C8 !important;
    font-weight: bold;
    border: 0px solid #AAA;
    padding: 4px;
    vertical-align: middle;
    color: black;
}

.exercise input,
.exercise select {
    border: 2px solid #B5B8C8 !important;
    /* override for gap fills */
    font-weight: bold;
}

.sideblockheading {
    background-color: #F2F2F2;
    border-bottom: none;
    border-top: solid 1px #E2E2E2;
    padding: 4px 5px 5px;
    margin-bottom: 10px;
}

.sideblockheadingimg {
    margin-right: 4px;
}

.sideblockheading h4 {
    display: inline;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold;
}

.sideblockactions {
    float: right
}

.uiSideNav {
    list-style: none outside none !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word;
}

.uiSideNav li {
    position: relative;
    list-style: none outside none !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word;
}

.uiSideNav .item,
.uiSideNav .subitem {
    border-bottom: 1px solid #FFFFFF;
    color: #333333;
    display: block;
    line-height: 13px;
    padding: 3px 8px 4px 28px;
    position: relative;
    text-decoration: none;
}

.uiSideNav span.blue-bubble-float-right {
    float: right;
}

.uiSideNav .loading ul .count,
.uiSideNav .count {
    color: #808080;
}

.uiSideNavCount {
    background-color: #D8DFEA;
    border-radius: 2px 2px 2px 2px;
    color: #3B5998;
    font-weight: bold;
    left: -1px;
    padding: 0 4px;
    position: relative;
}

.uiSideNavCount .countValue {
    color: #3B5998;
}

.fss {
    font-size: 9px;
}

.uiSideNav .item .imgWrap {
    left: 5px;
    position: absolute;
    text-align: center;
    top: 2px;
    width: 18px;
}

.uiSideNav .item:hover,
.uiSideNav .item:active,
.uiSideNav .item:focus,
.uiSideNav .subitem:hover,
.uiSideNav .subitem:active,
.uiSideNav .subitem:focus {
    background-color: #EFF2F7;
    text-decoration: none;
}

.scorebardt {
    font-size: 80%;
    color: #A0A0A0
}

.completebar {
    font-size: 80%;
    color: #A0A0A0;
    width: 60px
}

.scorebarbox {
    border: 1px solid #8E8E8E;
    border-radius: 16px 16px 16px 16px;
    -moz-border-radius: 16px 16px 16px 16px;
    -webkit-border-radius: 16px 16px 16px 16px;
    height: 25px;
    position: relative;
    width: 100%;
    background-color: beige;
    overflow: hidden;
}

.scorebarpc {
    color: #000;
    left: 0;
    top: 12%;
    z-index: 0;
    width: 100%;
    font-size: 91%;
    font-weight: 700;
    position: absolute;
    text-align: center;
    text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    line-height: 1.6em;
}

.scorebar {
    border-radius: 20px 0px 0px 20px;
    -moz-border-radius: 20px 0px 0px 20px;
    -webkit-border-radius: 20px 0px 0px 20px;
    height: 23px;
    left: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    top: 0;
    z-index: 0;
    background: url(/images/progress.jpg) left no-repeat;
    background-size: cover !important;
}

.passed_progress {
    background: url(/images/progress.jpg) left no-repeat;
    background-size: cover !important;
}

.unit_progress {
    background: url(/images/progress_u1.jpg) left;
    background-repeat-x: repeat;
    /* background-repeat-y: no-repeat; */
    background-size: 6px 20px !important;
    border-radius: 0px;
    opacity: 0.8;
    height: 27px;
    position: relative;
    top: -1px;
}

.failed_progress {
    background: url(/images/progress_0.jpg) left no-repeat;
    background-size: cover !important;
}

.pending {
    background: url(/images/progress_1.jpg) left no-repeat;
    background-size: cover !important;
}

.scorebarfill {
    border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -webkit-border-radius: 7px 7px 7px 7px;
    background: url("/images/progress_0") no-repeat scroll left;
    clear: both;
    height: 16px;
    padding: 0;
    width: 70%;
}

.correctcolor {
    color: #093;
}

.wrongcolor {
    color: red;
}

.correct {
    background: url(/images/tick.gif) no-repeat scroll right center;
    color: #090
}

.correct2 {
    background: none;
    color: #090;
    margin: 0;
    min-height: 0;
    padding: 0;
    font-style: italic
}

.wrong {
    background: url(/images/cross.gif) no-repeat scroll right center;
    color: red
}

.wrong_100 {
    /*background: url(/images/cross_100.png) no-repeat scroll right center;*/
    color: red;
}

.wrong_100:before {
    content: '\274c';
}

.correct_100 {
    /*background: url(/images/tick_100.png) no-repeat scroll right center;*/
    color: #090
}

.correct_100:before {
    content: '\2713';
}

.wrong,
.correct {
    margin: 0;
    min-height: 32px;
    padding: 3px 20px 0px 0px !important;
    display: -moz-inline-box;
    margin-right: 10px;
}

.notesbtn {
    float: right;
}

.double {
    line-height: 2;
}


/* ensure space after empty paragraphs */

.double:after {
    content: '.';
    visibility: hidden;
}

.reading:first-letter {
    font-size: 390%;
    float: left;
    color: rgb(93, 117, 148);
    line-height: 35px;
    padding-top: 10px;
    padding-right: 3px;
    font-family: Times, serif, Georgia;
}

.reading {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    font-size: 117%;
    line-height: 186%;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-rule-color: #ccc;
    -moz-column-rule-style: solid;
    -moz-column-rule-width: 1px;
    -webkit-column-rule-color: #ccc;
    -webkit-column-rule-style: solid;
    -webkit-column-rule-width: 1px;
}

.reading p {
    text-indent: 34px;
    margin-top: 14px;
}

.reading p:first-child {
    text-indent: 0px;
    margin-top: 0px;
}

.notepad1 {
    background: url(/images/backgrounds/notepad1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.height-auto {
    height: auto;
}

.fullwidth-widget {
    width: 96%;
    margin: 8px;
}

.postit_yellow {
    background: url(/images/backgrounds/postit_yellow.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_white {
    background: url(/images/backgrounds/postit_white.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_white2 {
    background: url(/images/backgrounds/postit_white2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_pink {
    background: url(/images/backgrounds/postit_pink.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_orange {
    background: url(/images/backgrounds/postit_orange.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_grey {
    background: url(/images/backgrounds/postit_grey.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_green {
    background: url(/images/backgrounds/postit_green.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_darkpink {
    background: url(/images/backgrounds/postit_darkpink.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postit_blue {
    background: url(/images/backgrounds/postit_blue.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 38px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postcard_font {
    font-family: 'The Girl Next Door', cursive;
}

.laptop {
    font-size: 100%;
    background: url(/images/backgrounds/laptop1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 75px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postcard {
    font-size: 130%;
    font-family: 'The Girl Next Door', cursive;
    background: url(/images/backgrounds/postcard.jpg);
    line-height: 186%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding-left: 22px;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.postcard td p {
    margin: 0px;
    padding: 0px;
    line-height: 140%;
}

.postcard td {
    font-size: 130%;
    font-family: 'The Girl Next Door', cursive;
    line-height: 120%;
    vertical-align: top;
}

.postcard_columns {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -moz-column-gap: 40px;
    -webkit-column-gap: 40px;
    width: 500px;
    column-gap: 40px;
}

@media (max-width:780px) {
    .reading {
        -moz-column-count: 2;
        -webkit-column-count: 2;
    }
}

@media (max-width:500px) {
    .reading {
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }
}

.atStart1 {
    cursor: pointer;
}

.atStart {
    text-indent: 12px;
    cursor: pointer;
}

.atStart1,
.atStart2,
.atStart3,
.atStart2plain,
.atStart4,
.atStart5 {
    text-indent: 5px;
    cursor: pointer;
    font-size: 130%;
}

@media screen and (max-width:300px) {
    .atStart1,
    .atStart2,
    .atStart3,
    .atStart2plain,
    .atStart4,
    .atStart5 {
        text-indent: 3px;
        font-size: 110%;
    }
}

.atStartsub,
.atStartsubp {
    cursor: pointer;
    font-size: 100%;
    margin-top: 4px;
}

.atStartsub p,
.atStartsubplain p,
.atStart5 p {
    margin: 0 0 4px 14px;
}

h4.atStart1,
h3.atStart1 {
    height: 34px;
    display: inline !important;
    cursor: pointer;
    text-indent: 0;
}

h4.atStart3,
.handcursor,
h4.atStart5 {
    cursor: pointer;
    font-size: 150%;
}

.rowhighlighter {
    color: #000 !important;
    width: 100% !important
}

.mainbody a:hover.rowhighlighter {
    background: #ddd;
    color: #000;
    width: 100% !important
}

.example {
    color: blue
}

.shadow {
    -moz-box-shadow: 5px 6px 18px #444;
    -webkit-box-shadow: 5px 6px 18px #444;
    box-shadow: 5px 6px 18px #444;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=45, Color='#333')";
    /* For IE 5.5 - 7 */
    filter: progid: DXImageTransform.Microsoft.Shadow(Strength=3, Direction=45, Color='#333');
    margin: 12px;
    border: 1px solid silver;
    z-index: 999;
    max-width: 100%;
}

.phon,
.phon- {
    font-family: gentium, "arial unicode ms", "lucida sans unicode", sans-serif;
    font-size: 190%;
    font-weight: bold;
    cursor: pointer;
}

.phon:before,
.phon:after {
    content: "/";
}

.InsertImage {
    background: url(/images/insert_image_icon.png) no-repeat scroll left center;
    color: black;
    margin: 0;
    min-height: 32px;
    padding: 3px 0 0 20px;
    cursor: hand;
    cursor: pointer
}

.imageonleft {
    margin-right: 12px;
    float: left;
}

.sidepanel hr {
    border-color: #EEE;
    margin: 8px 0 0 6px;
    padding: 7px 6px 3px 5px;
}

.sideblock {
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.bottomborder {
    border-bottom: 1px solid #EEEEEE;
}

.required {
    color: red;
}

img#jokepic,
.marginright {
    margin-right: 8px
}

#material_head {
    /* background-color: rgb(232, 232, 232); */
    display: inline-block;
    width: 100%;
    padding: 0px;
    /* border: 1px solid rgb(207, 207, 210); */
    /* box-shadow: 0 9px 21px #ddd; */
    overflow: hidden;
    margin-bottom: 16px;
    /* border-radius: 9px 9px 0px 0px; */
    margin-top: 8px;
    border-bottom: 4px solid orange;
}

#material_head .available_unit {
    width: 178px;
    right: 0px;
    position: absolute;
    top: 0px;
}

#material_head_table {
    display: inline;
    float: left;
}

.inner_unitheader {
    margin: 6px;
}

.qnum {
    white-space: nowrap;
    display: inline-flex;
}

.Question>span:first-child {
    margin-right: 15px;
}

option[value="-"] {
    color: silver;
}

video {
    width: 535px;
    height: 300px;
}

.qnum span {
    color: white;
    font-size: 12pt;
    cursor: default;
    background-color: #B5B8C8;
    height: 32px;
    display: inline-block;
    border-radius: 8px 0px 0px 8px;
    padding-left: 5px;
    padding-right: 6px;
    margin-top: 0px;
    font-weight: bold;
    margin-left: 1px;
}

h3 .qnum span {
    height: 30px !important;
}

h1 .qnum span {
    height: 48px !important;
}

.qnum span b {
    margin-top: 1px;
    display: inline-block;
    line-height: 1.4;
    vertical-align: middle;
    font-family: ABeeZee, Tahoma, verdana, Arial;
}

h2 .qnum span b {
    margin-top: 6px;
}

h1 .qnum span b {
    margin-top: 7px;
}

h3 .qnum span b {
    margin-top: 4px;
}

#gapeditor .c1 {
    min-width: 56px;
    display: inline-block;
    text-align: -webkit-center;
    vertical-align: middle;
}

.optionlist {
    width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.Questionblock_odd {
    background-color: rgb(242, 242, 243);
    margin: 0;
    padding: 7px;
    overflow-y: hidden;
    overflow-x: hidden;
    min-width: 320px;
}

.Questionblock_even {
    background-color: white;
    padding: 7px;
    overflow-y: hidden;
    overflow-x: hidden;
    min-width: 320px;
}

.answerblock {}

.Questionoption {
    font-size: 130%;
}

.Questionoption input[type="checkbox"]:checked+span,
.Questionoption input[type="radio"]:checked+span {
    color: rgb(51, 53, 145);
    background-color: rgba(255, 255, 0, 0.42);
    /* padding: 4px; */
    border-radius: 8px;
    box-shadow: 1px 0px 9px silver;
    display: inline-block;
}

.Questionoptione {
    line-height: 2em;
}

.Questionoptione input {
    font-size: 120%;
}

.Question {
    font-size: 130%;
    color: #009;
    font-weight: 700;
    line-height: 1.5;
    min-width: 320px;
    display: flex;
}

.ie9 .Questionoption {
    font-size: 12pt;
}

.ie9 .Question {
    font-size: 14pt;
}

input:focus,
select:focus,
textarea:focus,
input:active,
select:active,
textarea:active {
    box-shadow: 0px 0px 0px rgba(43, 106, 252, 1);
    outline: 0px solid silver;
    background-color: #def2fc;
}

.small input[type="checkbox"] {
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
}

input[type="checkbox" i],
input[type="radio" i] {
    -ms-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    -webkit-transform: scale(2);
    transform: scale(2);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: text-bottom;
}

a.qdel {
    float: right;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.ie9 p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

td p {
    margin-top: 0em;
    margin-bottom: 0em;
}

.invis {
    display: none;
    visibility: hidden;
}

a {
    text-decoration: none;
}

#gradebutton {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.gradelink {
    width: 100% !important;
}

.progress-bar {
    background-color: whiteSmoke;
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
    width: 100%;
    max-width: 200px;
    height: 20px;
    position: relative;
    display: block;
}

.progress-bar>span {
    background-color: blue;
    border-radius: 2px;
    display: block;
    text-indent: -9999px;
}


/* MENU */

.menunew a div.button,
.menunew a:visited div.button {
    width: 100%;
    border-bottom: 6px ridge yellow;
    float: none;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}


/* NEW style simple buttons - and reverse colours */

.newbutton:hover {
    background: #39c;
    color: white;
}

.newbutton {
    border: 1px silver solid;
    display: inline-block;
    padding: 8px;
    border-radius: 8px;
    font-size: 126%;
    color: #39C;
    background: white;
    cursor: pointer;
    margin: 4px;
}

.newbutton2:hover {
    background: white;
    color: #39c;
}

.newbutton2 {
    border: 1px silver solid;
    display: inline-block;
    padding: 8px;
    border-radius: 8px;
    font-size: 126%;
    color: white;
    background: #39C;
    cursor: pointer;
    margin: 4px;
}

.ie8 .menunew a div.button,
.ie8 .menunew a:visited div.button {
    width: 122px;
}

@media screen and (min-width: 320px) {
    .menunew a div.button,
    .menunew a:visited div.button {
        width: 100%;
        height: 32px;
    }
}

.button {
    float: left;
    width: 30%;
    /*border-left: 1px solid rgb(135, 146, 162);*/
    font-size: 150%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
    overflow: hidden;
}

.mainbody .button,
.mainbodymin .button {
    border: 1px solid silver;
}

.menunew {
    margin-left: auto;
    margin-right: auto;
    width: 82%;
    float: none;
    max-width: 840px;
    margin-bottom: -3px;
}

.menunew td {
    width: 20%
}

.menunew .button {
    padding-top: 1.2%;
    padding-bottom: 1.2%;
}

@media screen and (max-width: 580px) {
    .menunew {
        margin-left: 0%;
        margin-right: 0%;
        width: 100%;
        float: left;
    }
    #companyname {
        padding-bottom: 0;
    }
    #langseldiv {
        display: none;
    }
    #logolarge {
        display: none;
    }
    #logosmall {
        display: inline;
        padding-left: 8px;
        padding-top: 8px;
        max-width: 168px;
    }
}

a:active div.button,
a:hover div.button {
    text-decoration: none;
}

a div.button,
a:visited div.button {
    text-decoration: none !important;
    font-weight: bold;
    border-radius: 0;
    margin-right: 0;
    margin-top: 0;
    height: auto;
    /*22px;*/
    width: 100%;
    margin-bottom: 0;
    overflow: hidden;
    word-wrap: initial;
    max-width: 200px;
}

.menunewin {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    line-height: 3em;
}

.menunewin a {
    margin-right: 7px;
}

.topmenu {
    font-size: 140%;
    font-weight: bold;
}

.topmenu a,
.topmenu a:visited {
    color: black
}

.midfieldset {
    margin-left: auto;
    margin-right: auto;
    width: 227px;
}

@media screen and (max-width: 320px) {
    #companyname {
        font-size: 150%;
    }
    .button {
        font-size: 93%;
    }
}

@media screen and (max-width: 220px) {
    #companyname {
        font-size: 109%;
    }
}

.menunew a div.menu1 {
    border-bottom-color: pink !important;
}

.menunew a div.menu2 {
    border-bottom-color: #19FA4F !important;
}

.menunew a div.menu3 {
    border-bottom-color: red !important;
}

#RightPane {
    font-size: 100%;
    overflow: hidden;
    max-width: 100%;
}

div#RightPane td {
    //min-width: 100px;
}

.Question p:first-child {
    margin: 0px;
    display: inline;
}


/* matching pairs 
   */

.mp-done,
div#mp-table .mpcol1 .mp-done {
    border: 5px solid black;
    box-shadow: 6px 6px 11px lightgreen;
}

div#mp-table .mpcol1 {
    /*div div:first-child*/
    padding: 1%;
    margin: 1%;
    background: #eee;
    border: 3px solid gray;
    float: left;
    width: 43%;
    cursor: pointer;
    margin-right: 0;
    text-align: right;
    border-right: 1px dotted gray;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

div#mp-table .sort {
    /*div div:nth-child(2) */
    padding: 1%;
    margin: 1%;
    background: #eee;
    border: 3px solid gray;
    float: left;
    width: 43%;
    cursor: pointer;
    margin-left: 2%;
    text-align: left;
    border-left: 1px dotted gray;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

div#mp-table div div {}

.mpcol1 {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 180%;
    padding: 0.5%;
    margin: 0.5%;
    background: #eee;
    border: 3px solid gray;
    float: left;
    width: 43%;
    cursor: pointer;
    margin-right: 0;
    text-align: right;
    border-right: 1px dotted gray;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.sort {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    font-size: 180%;
    padding: 0.5%;
    margin: 0.5%;
    background: #eee;
    border: 3px solid gray;
    float: left;
    width: 43%;
    cursor: pointer;
    margin-left: 2%;
    text-align: left;
    border-left: 1px dotted gray;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.sortgraded {
    margin-left: 0%;
}

@media screen and (min-width: 800px) {
    .sort,
    .mpcol1 {
        font-size: 180%;
    }
}

@media screen and (min-width: 370px) and (max-width: 800px) {
    .sort,
    .mpcol1 {
        font-size: 140%;
    }
}

@media screen and (max-width: 370px) {
    .sort,
    .mpcol1 {
        font-size: 100%;
    }
}

.mp-hover {
    background: yellow !important;
    cursor: pointer;
}

.mp-click {
    background: #FC8383 !important;
    cursor: pointer;
}

.mp-done {
    background: lightgreen !important;
    cursor: pointer;
}

.audiobutton {
    width: 68px;
    height: 68px;
    display: inline-block;
    cursor: pointer;
    border: 0px solid !important;
    padding: 0px !important;
    margin: 0px !important;
}

.audiobutton .i-btn {
    max-width: 68px;
    padding: 0px 9px 0px 7px;
    position: relative;
}

.audiobutton button[atype=standard] {
    width: 68px;
    height: 68px;
}

.audiobutton button[atype=standard].i-btn i {
    font-size: 3.3em !important;
}

.audioprogressbox {
    position: absolute;
    border: 1px solid silver;
    border-radius: 8px;
    opacity: 0;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    width: 100%;
    bottom: 0px;
    left: 0px;
    background: whitesmoke;
    height: 10px;
}

.audioprogress {
    height: 8px;
    background-color: rgb(70, 182, 48);
}

.audiobutton[atype=small] .audioprogressbox {
    top: 32px;
    width: 24px;
    left: 3px;
}

.audiocounter {
    position: absolute;
    top: -5px;
    left: 0px;
    color: white;
    z-index: 0;
    font-size: 106%;
    width: 90%;
    text-align: right;
}

.hiddenplayer {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    left: -999px
}

.writingbox {
    background-attachment: scroll;
    background-image: url(/images/WordProcessor-Word.gif);
    background-repeat: no-repeat;
    border: 2px solid #39C;
    margin-left: auto;
    padding-left: 48px;
    min-height: 150px;
    width: 77%;
    margin-right: auto;
}


/* VIDEO PLAYER */

.video {}

.videowrapper {
    margin: 0 8px 8px 0;
}

@media screen and (max-width: 580px) {
    .videowrapper {
        position: relative;
        padding-bottom: 49.25% !important;
        /* 16:9 was 56.25% */
        padding-top: 25px !important;
        height: 0;
        float: none !important;
    }
    .videowrapper iframe,
    .videowrapper object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.scriptedvideo {
    border: 3px dotted silver;
    background-color: white;
    padding: 8px;
}


/* popout video player upon scroll */

.videoplayer.out {
    position: fixed;
    top: 65px;
}

.videospacer {
    display: none;
}

.videospacer.out {
    min-height: 295px;
    display: block;
}

iframe {
    max-width: 100%;
}

@media screen and (min-width: 1200px) {
    .script {
        font-size: 130%;
        display: table-cell;
        line-height: 190%
    }
}

@media screen and (max-width: 1200px) {
    .script {
        font-size: 130%;
        display: block;
        clear: both;
        line-height: 190%
    }
}

.scripttitle {
    margin-top: -4px;
    border-bottom: 1px dotted grey;
    display: block;
    font-size: 150%;
    color: #39C;
    font-weight: 700;
    margin-bottom: 16px;
    background: url(/images/icons/icon_txt.gif) no-repeat;
    background-position-y: 6px;
    text-indent: 24px;
}


/* proof reading */

.highlightspace a {
    text-decoration: none !important;
    color: #000;
}

.cluesword,
.highlightword a {
    text-decoration: none;
    color: #000;
}

.highlightword a:visited,
.highlightword a:link,
.highlightspace a:visited,
.highlightspace a:link {
    font-family: Times New Roman, Times, Serif !important;
    color: #000;
}

.highlightword a:hover,
.highlightword a:hover:visited {
    background-color: #FF0 !important;
    text-decoration: none;
    color: #000;
    display: inline;
}

.highlightspace a:hover,
.highlightspace a:hover:visited {
    background-color: #FF0 !important;
    border-left: 2px !important;
    border-right: 2px !important;
    border-left-color: #440 !important;
    border-left-style: solid !important;
    border-right-color: #440 !important;
    border-right-style: solid !important;
    text-decoration: none;
    color: #000;
    width: 15px
}

.deletedword {
    text-decoration: line-through !important;
    color: #C00 !important
}

.editpopup {
    background-color: #CFF;
    margin: 8;
    position: fixed;
    top: 40%;
    left: 40%;
    width: 30%;
    height: 140px;
    background: #bff;
    border: thin groove #000
}

#popupchangedword,
#popupinsertedword {
    font-family: Times New Roman, Times, Serif !important;
    color: #000;
    font-size: 145%;
    text-align: center;
    width: 94%;
    margin-top: 8px;
    margin-bottom: 8px;
}

#popupinstruct {
    width: 100%;
    text-align: center;
    display: block;
}

#popuporigword {
    font-family: Times New Roman, Times, Serif !important;
    color: #000;
    font-size: 145%;
    margin: 8px;
    padding: 4PX;
    background-color: beige;
    text-align: center;
    border: 1px solid silver;
}


/* TAB PAGES */

.subtabs a {
    width: 19%;
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#EBE9E9), to(#999999));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #EBE9E9, #999999);
    /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #EBE9E9, #999999);
    /* FF3.6 */
    background-image: -ms-linear-gradient(top, #EBE9E9, #999999);
    /* IE10 */
    background-image: -o-linear-gradient(top, #EBE9E9, #999999);
    /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #EBE9E9, #999999);
    border-right: 1px white solid;
}

.subtabs a:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#EBE9E9));
    /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #999999, #EBE9E9);
    /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #999999, #EBE9E9);
    /* FF3.6 */
    background-image: -ms-linear-gradient(top, #999999, #EBE9E9);
    /* IE10 */
    background-image: -o-linear-gradient(top, #999999, #EBE9E9);
    /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #999999, #EBE9E9);
}

.subtabs a:first-of-type {
    -webkit-border-top-left-radius: 16px;
    -webkit-border-bottom-left-radius: 16px;
    -moz-border-radius-topleft: 16px;
    -moz-border-radius-bottomleft: 16px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.subtabs a:last-of-type {
    -webkit-border-top-right-radius: 16px;
    -webkit-border-bottom-right-radius: 16px;
    -moz-border-radius-topright: 16px;
    -moz-border-radius-bottomright: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.subtabs a div {
    margin: 6px;
    text-align: center;
    font-size: 124%;
    color: #505050;
    display: inline-block;
}

#AdminTab.dynamic-tab-pane-control .tab-row .tab {
    width: 11%;
}

#ProfileTab.dynamic-tab-pane-control .tab-row .tab {
    width: 18%;
}

.dynamic-tab-pane-control-vertical.tab-pane {
    position: relative;
    width: 109%;
    margin-right: 4px
}

.dynamic-tab-pane-control-vertical .tab-row .tab {
    width: 100px;
    height: auto;
    position: relative;
    top: 0;
    display: block;
    float: left;
    overflow: hidden;
    cursor: Default;
    margin-top: auto;
    margin-bottom: auto;
    padding: 8px;
    border: 0;
    z-index: 1;
    text-align: left;
    font-weight: normal;
}

.dynamic-tab-pane-control-vertical .tab-row .tab a {
    color: black
}

.dynamic-tab-pane-control-vertical .tab-row .tab.selected a {
    color: white
}

.dynamic-tab-pane-control-vertical .tab-row .tab.selected {
    background-image: url(/images/bg-blue1.gif) !important;
    background-repeat: no-repeat;
    border-bottom-width: 0;
    z-index: 3;
    font-weight: bold;
    width: 108px;
}

.dynamic-tab-pane-contro-vertical .tab-row .tab a {
    color: Black;
    text-decoration: none;
    cursor: default;
}

.dynamic-tab-pane-control-vertical .tab-row .tab.hover {
    background-repeat: no-repeat;
}

.dynamic-tab-pane-control-vertical .tab-page {
    border: 1px solid black;
    background: black;
    z-index: 2;
    float: left;
    position: relative;
    top: 0;
    color: white;
    filter: progid;
    border-bottom: 0;
    padding: 10px;
    height: 560px;
}

.dynamic-tab-pane-control-vertical .tab-row {
    z-index: 1;
    float: left;
    font-size: 70%;
    font-weight: normal;
    width: 112px;
    padding: 8px 0 8px 8px;
    border: 1px solid black;
    height: 560px;
    background-image: url(/images/back1.gif);
}

.dynamic-tab-pane-control.tab-pane {
    position: relative;
    width: 100%;
    margin-right: -2px
}

.dynamic-tab-pane-control .tab-row .tab {
    width: 16%;
    max-width: 260px;
    height: 27px;
    border: 1px solid #919b9c;
    position: relative;
    top: 3px;
    display: inline;
    float: left;
    overflow: hidden;
    cursor: Default;
    margin: 1px -1px 1px 1px;
    padding: 1px 0 0 3px;
    z-index: 1;
    font-size: 90%;
    font-weight: bold;
    white-space: nowrap;
    background-color: whiteSmoke;
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.dynamic-tab-pane-control .tab-row .tab.selected,
.dynamic-tab-pane-control .tab-row .tab.hover {
    height: 28px;
    border: 1px solid #919b9c;
    background-repeat: no-repeat;
    border-bottom-width: 0 !important;
    z-index: 2;
    margin: -2px -1px 1px 0;
    top: 0;
    font-size: 90%;
    font-weight: bold;
    background-color: white !important;
    border-top: 4px groove orange;
}

.dynamic-tab-pane-control .tab-row .tab a {
    color: Black;
    text-decoration: none;
    cursor: default;
    font-size: 115%;
    font-weight: bold;
    margin-top: 0;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
    height: 28px;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
    border-top: 4px groove orange !important;
    border-bottom-width: 0 !important;
}

.dynamic-tab-pane-control .tab-row .tab.hover a {
    cursor: pointer;
    cursor: hand;
}

.dynamic-tab-pane-control .tab-page {
    clear: both;
    border: 1px solid #919b9c;
    background: #fcfcfe;
    z-index: 2;
    position: relative;
    top: -2px;
    font: 110%;
    color: Black;
    filter: progid;
    padding: 10px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.dynamic-tab-pane-control .tab-row {
    z-index: 1;
    white-space: nowrap
}

@media screen and (max-width: 580px) {
    .dynamic-tab-pane-control .tab-row .tab a {
        color: Black;
        text-decoration: none;
        cursor: default;
        font-size: 100%;
        font-weight: normal;
        margin-top: 1px;
        top: -5px;
        position: relative;
    }
    .dynamic-tab-pane-control .tab-row .tab.selected {
        height: 19px !important;
    }
    .dynamic-tab-pane-control .tab-row .tab {
        height: 17px;
    }
    .dynamic-tab-pane-control .tab-row .tab.hover {
        height: 18px;
    }
}

.mc_option {
    float: left;
    width: 20%;
    margin-left: 1%;
}

.truefalse .mc_option {
    float: left;
    width: 32%;
    margin-left: 1%;
}

@media screen and (max-width: 1150px) {
    .mc_option {
        float: none;
        width: 98%;
    }
}

.spinner {
    position: absolute;
    opacity: 0.9;
    filter: alpha(opacity=90);
    -ms-filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=90);
    z-index: 999;
    background: #fff;
}

.spinner-msg {
    text-align: center;
    font-weight: bold;
}

.spinner-img {
    background: url(/images/spinner.gif) no-repeat;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}


/* Search box */

#searchdiv {
    width: 92%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#searchform {
    display: inline;
}

.search {
    display: inline;
    background: url(/images/icons/icon_search.gif) right no-repeat;
    padding-right: 17px;
}

h7 {
    font-weight: bold;
    background: yellow;
}

#booksmini {
    float: left;
    width: 40%;
}

#yourbook {
    display: table-cell;
    position: relative;
    width: 60%;
    float: left;
}

@media screen and (max-width: 800px) {
    #booksmini {
        float: left;
        width: 100%;
    }
    #yourbook {
        display: block;
        position: relative;
        width: 100%;
        float: left;
    }
}

#commentsblock {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
}

#likeblock {
    max-width: 373px;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

@media screen and (max-width:580px) {
    #commentsblock {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    #welcome_name {
        display: none;
    }
}

audio {
    max-width: 300px;
}

.red {
    border: solid 1px #B50000 !important;
    background-color: #FF9D9D !important;
    font-weight: bold;
}

.green {
    border: solid 1px #DDF0DD !important;
    background-color: #EBFFEB !important;
}

.midgreen {
    border: solid 1px #58a558 !important;
    background-color: #52a252 !important;
}

.blue {
    border: solid 1px #CEE2F2 !important;
    background-color: #F0F5FF !important;
}

.dulled {
    background-color: rgb(216, 213, 213) !important;
    background-color: rgba(216, 213, 213, .5) !important;
}

.card-action a:before {
    content: '\e038';
    font-family: "Material Icons";
    margin-right: 8px;
    font-size: 150%;
    max-height: 20px;
    display: inline-flex;
    color: #70b9c6;
    vertical-align: sub;
    position: relative;
    top: -5px;
}

.card>a {
    width: 100%;
}

.card-ribbon {
    overflow: hidden;
    padding-left: 6px;
}

.ribbon-wrapper {
    width: 125px;
    height: 0;
    position: relative;
    top: 13px;
    right: 0;
    left: -8px;
    z-index: 121;
}

.ribbon {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    left: -36px;
    top: 28px;
    width: 187px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ribbon:before,
.ribbon:after {
    content: "";
    border-top: 3px solid #FF7C0A;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-orange {
    background-color: #FFC860;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFC860), to(#ED9F1D));
    background-image: -webkit-linear-gradient(top, #FFC860, #ED9F1D);
    background-image: -moz-linear-gradient(top, #FFC860, #ED9F1D);
    background-image: -ms-linear-gradient(top, #FFC860, #ED9F1D);
    background-image: -o-linear-gradient(top, #FFC860, #ED9F1D);
    color: #6a6340;
}

.ribbon-orange:before,
.ribbon-orange:after {
    border-top: 3px solid #FFC860;
}

.ribbon-wrapper-green {
    width: 125px;
    height: 0;
    position: relative;
    top: 13px;
    right: 0;
    left: -6px;
    z-index: 121;
}

.ribbon-green {
    font: bold 15px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    left: -36px;
    top: 28px;
    width: 187px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
    background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
    color: #6a6340;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.ribbon-green:before,
.ribbon-green:after {
    content: "";
    border-top: 3px solid #6e8900;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    position: absolute;
    bottom: -3px;
}

.ribbon-green:before {
    left: 0;
}

.ribbon-green:after {
    right: 0;
}

.card_wrapper {
    width: 31%;
    float: left;
    margin: 8px;
    position: relative;
}

.card_wrapper .card-cols2 {
    width: 100%;
    margin: 0px;
}

.delcard {
    position: absolute;
    right: 0px;
    top: 5px;
    z-index: 9;
    width: 50px;
    height: 50px;
    font-size: 200%;
    text-align: center;
    color: grey;
    padding-top: 4px;
    cursor: pointer;
}

.delcard i {
    -webkit-text-stroke: 2px white;
}

.cp {
    background-color: #666;
    color: #FFF;
    font-size: 11px;
    text-decoration: bold;
    display: inline;
    padding: 4px
}

.cp a,
.cp a:hover,
.cp a:visited,
.cp a:link {
    color: #FFF;
    text-decoration: none;
    padding: 4px
}

.company div {
    display: inline-block;
    float: left;
    width: auto;
    text-align: center;
    font-size: 122%;
    border-right: 2px dotted silver;
    padding: 12px;
    line-height: 1em;
    font-weight: bold;
    height: 116px;
    max-height: 140px;
    position: relative;
}

.editformtable {
    position: relative;
    margin-right: 90px;
    margin-left: 32px;
    width: 90%;
}

table.edittable {
    font-size: 80%;
    border-collapse: collapse;
    border: 1px silver solid;
}

table.edittable tr,
table.edittable td,
table.edittable th {
    border: 1px silver solid;
    vertical-align: top;
}

table.edittable select {
    border: 0 solid white;
    margin: 0;
}

table.edittable .text-input {
    margin: 0
}

table.edittable input.text-input,
table.edittable textarea.text-input {
    border: 0 solid white;
    resize: none;
}

table.edittable input.text-input:focus,
table.edittable textarea.text-input:focus {
    border: 0 solid #B5B8C8;
}

table.edittable td.mid_cell {
    vertical-align: middle;
    text-align: center;
}

div.scrolltable {
    width: 100%;
    overflow-x: scroll;
    margin-left: auto;
    margin-right: 30px;
    overflow-y: visible;
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
}

div.scrollreporttable {
    overflow-x: auto;
    margin-right: auto;
    overflow-y: visible;
    padding-bottom: 1px;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
}

.column-hover {
    background-color: #CCC !important;
    opacity: 0.8;
}

.column-head-hover {
    background-color: #444 !important;
    opacity: 0.8;
    color: white;
}

div.colresizer {
    position: absolute;
    height: 130%;
    width: 5px;
    margin-right: -5px;
    top: -4px;
    cursor: w-resize;
    z-index: 10;
    float: right;
    right: -7px;
    border: 1px solid rgb(152, 180, 221);
    border-top: 0px;
    border-bottom: 0px;
}

.outerreportdiv {
    position: relative;
    border-bottom: 1px silver solid;
    border-radius: 8px;
    overflow-x: auto;
}

.reportwrapper {
    display: grid;
}

td.fixedleftcol,
th.fixedleftcol {
    position: absolute;
    left: -1px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
}

table.edittable td.fixedcol {
    position: absolute;
    border: 0 silver solid;
    margin-left: 2px;
    right: -30px;
}

.reportsort span.sortheadertext {
    margin-left: 40px;
}

.sectionexpandimg {
    width: 34px;
    margin: 4px;
    float: left;
    font-size: 200% !important;
    top: 0px;
    position: absolute;
    left: 0px;
    height: 35px;
    color: white;
    background-color: #5588aa;
    padding-right: 4px;
    border-radius: 4px;
}

.expand_right::before {
    content: 'expand_more';
}

.expand_down::before {
    content: 'expand_less';
}

#viewstats {
    position: absolute;
    float: right;
    right: 50px;
}

@media screen and (max-width:650px) {
    #viewstats {
        display: none;
    }
}


/* Message notification notices */

.headmessage {}

.headmessagetext .dropdown {
    float: right;
}

.messagephoto {
    float: left;
    display: table-cell;
    margin: 4px;
}

.headmessagetext {
    margin-left: 12px;
    position: relative;
}

.dropdown-menu>li>a:visited:hover {
    color: white;
}

.authorname {
    font-weight: bold;
    color: #3b5998;
    float: left;
}

.messagefooter {
    font-size: 80%;
    color: #999;
}

.comments {
    display: table;
    width: 100%
}

.comment {
    background-color: #edeff4;
    margin-top: -3px;
    word-wrap: break-word;
    width: 100%;
    margin-bottom: 2px !important;
    display: inline-block;
}

.comment .authorname {
    display: inline;
}

.delcomment {
    z-index: 99;
}

#posting {
    position: absolute;
    width: 72%;
    z-index: 99;
}

.commenttext {
    display: table-cell;
    position: relative;
    left: 12px;
    padding-right: 0px;
    vertical-align: top;
    margin: 5px;
    padding-bottom: 9px;
    width: 950px;
}

.commenttext textarea {
    width: 95%;
    margin-top: 4px;
}

div.comment p {}

.delcomment a {
    background-image: url(/images/delete.png);
    background-repeat: no-repeat;
    height: 15px;
    width: 15px;
    float: right;
    margin: 4px;
}

.delcomment a:hover {
    background-position: left -32px;
}

.post_button {
    margin-top: 8px;
    float: right;
    margin-right: 18px;
    padding: 4px;
}

.postimgthumb {
    border: 0;
    display: inline-block;
    overflow: hidden;
    position: relative;
    float: left;
    margin-right: 10px;
}

.postimgthumb img {
    max-height: 130px;
    max-width: 130px;
}

.urlpostlink i {
    background: url(/images/ytplay.png) no-repeat 0 0;
    bottom: 5px;
    height: 26px;
    left: 5px;
    position: absolute;
    width: 35px;
}

.urlpostlink {
    cursor: pointer;
    background: #f7f7f7;
    border: 1px solid silver;
    position: relative;
    width: 96% !important;
}

.urlposttext {
    position: relative;
    left: 0px;
    color: gray;
    display: table;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    word-wrap: break-word;
    word-break: break-word;
}

.urlposttext>div {
    color: #3b5998;
    font-weight: bold;
    margin-bottom: 4px;
    margin-top: 4px;
}

.urlposttext>div:hover {
    text-decoration: underline;
}

.urlpostdiv {
    margin-top: 10px;
    margin-bottom: 10px;
}


/************************************/


/*  PASSWORD STRENGTH CHECKER */


/********************************/

.password_tooshort,
.password_tooshort0,
.password_weak,
.password_medium,
.password_strong {
    background-attachment: scroll;
    background-position: right 2px;
    background-repeat: no-repeat;
    font-weight: bold;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 20px;
    padding-top: 4px;
    position: relative;
    top: -23px;
    left: 3px;
    color: black;
    text-align: right;
}

.password_tooshort {
    background-image: url(/images/cross.gif);
}

.password_tooshort0 {
    background-image: none;
    padding: 4px 4px 4px 8px;
    text-align: left;
}

.password_weak {
    background-image: url(/images/cross.gif);
}

.password_medium {
    background-image: url(/images/tick.gif);
}

.password_strong {
    background-image: url(/images/tick.gif);
}

.invalid,
.valid {
    background-attachment: scroll;
    background-position: left 2px;
    background-repeat: no-repeat;
    font-weight: bold;
    padding-bottom: 4px;
    padding-left: 20px;
    padding-right: 8px;
    padding-top: 4px;
    position: relative;
    top: 0px;
    left: 0px;
    text-align: left;
}

.invalid {
    background-image: url(/images/cross.gif);
    color: red;
}

.valid {
    background-image: url(/images/tick.gif);
    color: #00aa00;
}

.tip-text {
    display: none;
}

.tip-wrap {
    z-index: 9999;
}

.formular legend {
    color: #39C;
    font-weight: 700;
    font-size: 130%
}

ol {
    counter-reset: li;
    list-style: decimal;
    margin: 0 0 0 7px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    padding-left: 20px;
}

ol ol {
    margin: 0 0 0 2em
}

.rounded-list a {
    position: relative;
    display: block;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    margin: .5em 0;
    padding: .4em;
    left: 15px;
    width: 93%;
}

.rounded-list a:hover:before {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
}

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -2.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: 700;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}


/* ICONIZE */

a[href$='.doc'],
a[href$='.docx'],
a[href$='.rtf'] {
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_doc.gif) no-repeat center left;
}

a[href$='.txt'] {
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_txt.gif) no-repeat center left;
}

a[href$='.pdf'] {
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_pdf.gif) no-repeat center left;
}

a[href$='.xls'],
a[href$='.xlsx'] {
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_xls.gif) no-repeat center left;
}

a[href$='.pps'],
a[href$='.ppt'],
a[href$='.pptx'],
{
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_pps.gif) no-repeat center left;
}

a[href$='.mov'],
a[href$='.wmv'],
a[href$='.mp4'],
a[href$='.avi'],
a[href$='.mpg'] {
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_film.gif) no-repeat center left;
}

a[href$='.mp3'],
a[href$='.wav'],
a[href$='.ogg'],
a[href$='.wma'],
a[href$='.m4a'] {
    padding: 5px 0px 5px 20px;
    background: transparent url(/images/icons/icon_music.gif) no-repeat center left;
}

.nochangeoption {
    color: grey
}

.noneoption {
    color: darkred
}


/* ISSUE TRACKER */

.issue_type_0 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/bug_icon.gif) no-repeat center left;
}

.issue_type_1 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/enhance_icon.gif) no-repeat center left;
}

.issue_type_2 {
    padding-left: 22px !important;
    background: transparent url(/images/Star-16.gif) no-repeat center left;
}

.issue_type_3 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/Dollar.png) no-repeat center left;
}

.issue_type_4 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/education_icon.png) no-repeat center left;
}

.issue_type_5 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/clone_icon.png) no-repeat center left;
}

.issue_type_6 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/document_icon.png) no-repeat center left;
}

.issue_type_7 {
    padding-left: 22px !important;
    background: transparent url(/images/issue_type/translation_icon.png) no-repeat center left;
}

.issue_priority_2 {
    background-color: red !important;
    color: white !important;
}

.issue_status_0 {
    background-color: #9F9 !important
}

.issue_status_1 {
    background-color: #FF9 !important
}

.issue_status_2 {
    background-color: #CCC !important;
    color: #666 !important;
}

.issue_status_3 {
    background-color: #699 !important;
    color: white !important;
}

.issue_status_4 {
    background-color: #FC6 !important
}

.issue_status_5 {
    background-color: #0CF !important
}

#editpagelink {
    position: fixed;
    bottom: 0px;
    padding: 8px;
    background: white;
    width: auto;
    border-radius: 12px;
    opacity: 0.8;
}

.gloss p {
    margin-left: 60px;
}

.gloss .indent {
    margin-left: 30px;
}

.indexk {
    background: #58A !important;
    font-size: 250% !important;
    padding: 4px !important;
    margin-bottom: 4px !important;
    color: #FFF !important;
    font-weight: bold !important;
    border-radius: 8px;
    float: left;
    margin-right: 12px;
    width: 30px;
    text-align: center;
}

#countdown {
    font-family: monospace;
    font-size: 170%;
    font-weight: bold;
    background-color: darkred;
    text-align: center;
    color: wheat;
    padding: 8px;
    width: 103px;
    margin-left: auto;
    margin-right: auto;
}

.videocenter {
    margin-left: auto;
    margin-right: auto;
    max-width: 425px
}

.videoleft,
.videoright,
.videonone {
    max-width: 425px
}

.small {
    font-size: 70%
}

.reportchoice {
    width: initial !important;
    color: #39C !important;
    font-weight: bold;
    max-width: 100% !important;
    border: 1px silver solid !important;
}

.unit_progress_cell {
    width: 49%;
    padding-right: 12px;
}

#sortablesection,
#sortablesection_mat {
    position: inherit;
    list-style: none !important;
}

#sortablesection {
    border: 1px solid silver;
    margin-top: 1px !important;
    line-height: 22.8571px;
    min-height: 100px;
}

#sortablesection li,
#sortablesection_mat li {
    list-style: none !important;
    cursor: pointer;
}

body.mceContentBody {
    color: #000;
    font-family: "Trebuchet MS", Tahoma, verdana, Arial;
    font-size: 14px;
    margin: 4px !important;
    padding-bottom: 0px !important;
}

#tinymce p {
    margin: 0px;
}

body.mceContentBody,
#tinymce {
    overflow-y: hidden;
    padding: 0px;
    margin: 4px;
}

.mce-tinymce {}

.mce-panel {}

.mce-menu {
    font-size: 12px !important;
}

.mce-panel {
    width: 98%;
}

.coursehead {
    display: block;
    background-color: beige;
    border: 1px solid gray;
    margin: 5px;
    padding: 4px;
}

#insertedmainouter {
    border-top: 1px dotted;
    margin-top: 8px;
    padding: 8px;
    background-color: beige;
}

.reldiv {
    position: relative;
    position: relative;
    top: -29px;
    margin-top: 0px;
    padding-top: 22px;
}

.phonetic {
    font-family: "Lucida Sans Unicode", "Times New Roman", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.box1 {
    border: double black 5px;
    padding: 10px;
    border-radius: 8px;
    font-family: "Comic Sans MS", cursive;
}

.box2 {
    min-width: 250px;
    width: 100%;
    border: 2px solid #a0a0a0;
    border-radius: 5px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.minimenu p {
    margin-top: 2px;
    margin-bottom: 2px;
}

.ytstats_block {
    background-color: aliceblue;
    padding-top: 4px;
    padding-bottom: 4px;
}

.selectloader {
    background: url(/images/loader.gif) no-repeat !important;
    background-size: 461px !important;
    background-origin: border-box !important;
    background-position: -15px -4px !important;
}

.topalign td,
.topalign th {
    vertical-align: top;
}

tr.notavailable td {
    color: darkgrey;
    background-color: rgb(243, 243, 243);
    cursor: default;
}

tr.notavailable .unit_available {
    color: darkred;
    font-size: 109%;
}

table.notavailable {
    color: gray;
}

#searchtable td img {
    display: inline;
    vertical-align: middle;
}

#searchtable td h3 {
    display: inline;
}


/* school LLE appears differently in report column */

.schoolid_1 {
    color: grey;
    font-style: italic;
}

.right_options {
    float: right;
    position: relative;
    display: inline;
    right: 48px;
    top: 8px;
}

input[type=checkbox]:checked~.remove-check {
    display: none;
}

input[type=checkbox]:checked~.show-check {
    display: block;
}

.show-check {
    display: none;
}

.colorselect div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(/images/select.png) center;
}


/* *************** ON OFF BUTTON *************************************** */


/**
 * iOS 6 style switch checkboxes
 * by Lea Verou http://lea.verou.me
 */

 :root input[type="checkbox"].ios-switch {
    /* :root here acting as a filter for older browsers */
    position: absolute;
    opacity: 0;
    box-sizing: content-box;
    margin: 0px;
}

 :root input[type="checkbox"].ios-switch+div {
    display: inline-block;
    vertical-align: middle;
    width: 3em;
    height: 1em;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 999px;
    margin: 0 .5em;
    background: white;
    background-image: linear-gradient(rgba(0, 0, 0, .1), transparent), linear-gradient(90deg, hsl(210, 90%, 60%) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-origin: border-box;
    background-clip: border-box;
    overflow: hidden;
    transition-duration: .4s;
    transition-property: padding, width, background-position, text-indent;
    box-shadow: 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset;
    font-size: 150%;
    /* change this and see how they adjust! */
    box-sizing: content-box;
}

 :root input[type="checkbox"].ios-switch:checked+div {
    padding-left: 2em;
    width: 1em;
    background-position: 0 0;
    box-sizing: content-box;
}

 :root input[type="checkbox"].ios-switch+div:before {
    content: 'On';
    float: left;
    width: 1.65em;
    height: 1.65em;
    margin: -.1em;
    border: 1px solid rgba(0, 0, 0, .35);
    border-radius: inherit;
    background: white;
    background-image: linear-gradient(rgba(0, 0, 0, .2), transparent);
    box-shadow: 0 .1em .1em .1em hsla(0, 0%, 100%, .8) inset, 0 0 .5em rgba(0, 0, 0, .3);
    color: white;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .3);
    text-indent: -2.5em;
    text-align: initial;
    top: 2px;
    position: relative;
}

 :root input[type="checkbox"].ios-switch.yesno+div:before {
    content: 'Yes';
}

 :root input[type="checkbox"].ios-switch:active+div:before {
    background-color: #eee;
}

 :root input[type="checkbox"].ios-switch:focus+div {
    box-shadow: 0 .1em .1em rgba(0, 0, 0, .2) inset, 0 .45em 0 .1em rgba(0, 0, 0, .05) inset, 0 0 .4em 1px rgba(255, 0, 0, .5);
}

 :root input[type="checkbox"].ios-switch+div:before,
 :root input[type="checkbox"].ios-switch+div:after {
    font: bold 60%/1.9 sans-serif;
    text-transform: uppercase;
}

 :root input[type="checkbox"].ios-switch+div:after {
    content: 'Off';
    float: left;
    text-indent: .5em;
    color: rgba(0, 0, 0, .45);
    text-shadow: none;
}

 :root input[type="checkbox"].ios-switch.yesno+div:after {
    content: 'No';
}

 :root input[type="checkbox"].yesno+div:before {
    content: 'Yes';
}

 :root input[type="checkbox"].yesno+div:after {
    content: 'No';
}


/* END OF ON OFF BUTTON */


/* reset to LLE css in tinymce popup windows */

.mce-container-body .full * {
    font-family: 'Trebuchet MS', Tahoma, verdana, Arial !important;
    white-space: normal;
}

.mce-container-body .reset * {
    white-space: normal;
}

.reset th {
    font-size: 18px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    margin: 2px;
}

.reset td {
    vertical-align: middle;
}

.reset sort_desc_black {
    vertical-align: middle;
    border-collapse: separate;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: solid;
    border-left-width: 5px;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: solid;
    border-right-width: 5px;
    border-top-color: rgb(0, 0, 0);
    border-top-style: solid;
    border-top-width: 5px;
    vertical-align: middle;
}

.mce-container-body .reset {
    font-size: 14px !important;
    white-space: normal;
}

.mce-container-body b {
    font-weight: bold;
}

.mce-container-body h7 {
    font-weight: bold;
    background: yellow;
}


/* END */

.img24 {
    height: 24px !important;
    width: 24px !important;
}

.reset td:first-child {
    width: 24px !important;
}

.mat4units {
    float: right !important;
    width: 90% !important;
}

.archivecol {
    margin-left: 16px;
    padding: 12px;
    min-width: 185px;
    background-color: azure;
    border: 1px silver solid;
    display: table;
    margin-top: 16px;
    border-radius: 12px;
}

.lazyload {
    background: url(/images/ajax-loader2.gif) center center no-repeat #eee;
}

#membersummary:hover {
    background-color: rgba(66, 133, 244, 0.59);
}

a.dropbtn {
    border-radius: 19px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    right: 0;
}


/* Links inside the dropdown */

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a b {
    float: right;
    font-weight: normal;
    color: gray;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
    text-decoration: none;
    background-color: #f1f1f1
}

.dropdown-content .material-icons {
    float: left;
    position: relative;
    top: -4px;
}

.dropdown-content t {
    float: left;
    margin-left: 12px;
}

.dropdown-content a {
    color: #222 !important;
    min-height: 16px;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.dropdown.inline {
    display: inline-block;
}

.show {
    display: block;
    z-index: 999;
}

.material-icons {
    vertical-align: middle;
}

#lle_content {
    line-height: 1.4;
}

#lle_contentwrap {
    width: 100%;
    position: relative;
    overflow: auto;
    margin-top: 52px;
}

#students span {
    background-color: #eee;
    padding: 16px;
    margin: 8px;
    display: inline-block;
    border-radius: 8px;
}

#students span button {
    padding: 4px;
    border-radius: 100%;
    width: 27px;
}

@media print {
    #innerpage {
        margin-top: 0px;
    }
    .fc-right,
    .fc-left {
        display: none;
    }
    .noprint,
    .noprint * {
        display: none !important;
    }
    body {
        -webkit-print-color-adjust: exact;
    }
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }
    .mainbody {
        background-color: white;
    }
    .nobreak {
        page-break-inside: avoid !important;
    }
    button {
        display: none !important;
    }
    .pagetitleimage {
        background-color: rgb(233, 233, 233) !important;
    }
    .pagetitleimage h1,
    .pagetitleimage h1 a {
        color: black !important;
    }
    a::after {
        content: "" !important;
    }
    #arrowchat_mobiletab {
        display: none !important;
    }
}

.email {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    color: green;
    font-size: 130%;
}

.email:after {
    content: "\f0e0";
}

.attending:before {
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    color: green;
    font-size: 130%;
    content: "\f274";
    margin-right: 8px;
}

.su {
    background-color: hsla(168, 97%, 77%, 1.00);
}

.suh {
    background-color: hsla(193, 19%, 48%, 1.00);
    color: white;
}

.sh {
    background-color: hsla(280, 93%, 78%, 1.00);
}

.shh {
    background-color: hsla(283, 25%, 45%, 1.00);
    color: white;
}

.sg {
    background-color: hsla(39, 85%, 74%, 1.00);
}

.sgh {
    background-color: hsla(41, 21%, 39%, 1.00);
    color: white;
}

.SB {
    background-color: hsla(64, 91%, 68%, 1);
}

.sbh {
    background-color: hsla(52, 62%, 28%, 1.00);
    color: white;
}

.sd {
    background-color: hsla(136, 90%, 84%, 1.00)
}

.sdh {
    background-color: hsla(145, 14%, 37%, 1.00);
    color: white;
}

.se {
    background-color: hsla(216, 100%, 85%, 1.00);
}

.seh {
    background-color: hsla(222, 30%, 31%, 1.00);
    color: white;
}

.sc {
    background-color: hsla(359, 79%, 70%, 1.00)
}

.sch {
    background-color: hsla(0, 51%, 52%, 1.00);
    color: white;
}

#mytable td {
    vertical-align: top;
    padding: 8px;
}

#mytable {
    margin: 16px;
}

.audio_just_none {
    float: none
}

.audio_just_left {
    float: left;
    margin-right: 12px !important;
}

.audio_just_right {
    float: right;
    margin-left: 12px !important;
}

.colorSelector div {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    background: url(/js/colorpicker/images/select.png) center;
}

.colorSelector {
    position: relative;
    width: 36px;
    height: 36px;
    background: url(/js/colorpicker/images/select.png);
    cursor: pointer;
    display: inline-block;
    top: 10px;
    margin: 0px;
    padding: 0px;
}

#member_name {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 130px;
    text-align: left;
    position: relative;
    top: 6px;
}

.membermenu img {
    display: inline-block;
}

.sm-clean li li {
    margin-top: 0px;
}


/*Responsive Sty: ;les*/

@media (max-width:850px) {
    .mce-toolbar {
        display: none !important;
    }
}

@media all {
    .page-break {
        display: none;
    }
}

@media print {
    .page-break {
        display: block;
        page-break-before: always;
    }
}

figure.image img {
    margin: 8px 8px 0 8px;
    max-width: initial !important;
}

figure.image {
    display: inline-block;
    border: 1px dotted silver;
    background: transparent;
    margin: 12px;
    vertical-align: top;
}

figure.image figcaption {
    margin: 6px 8px 6px 8px;
    text-align: center;
    font-size: 150%;
}

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

.hide {
    display: none;
}

.formular .number {
    width: 90px;
    text-align: right;
}

.reporttable input[type="number" i] {
    width: 100px;
}


/* for sidebar info */

sb {
    display: none
}


/* for add groups */

.addgroup div {
    width: 100%;
    display: table;
}

.addgroup table {
    float: left;
}


/*.addgroup span {
	display: table-cell;
    width: 90%;
}
*/

.addgroup select {
    width: 99% !important;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 50%;
    padding-top: 2px;
}

.btn-circle.btn-lg {
    width: 50px;
    height: 50px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 50%;
}

.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.33;
    border-radius: 50%;
}


/* NAVBAR */

.navbar-brand {
    padding: 0px 0px;
}


/* navbar */

.navbar-default {
    background-color: #3eb0db;
    border-color: none;
    background-image: none;
}


/* Title */

.navbar-default .navbar-brand,
.navbar-default .navbar-brand img {
    margin: 0px;
    padding: 0px;
}


/* Link */

.navbar-default .navbar-nav>li>a {
    color: white;
    font-weight: bold;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #cecece;
    background: hsl(0, 0%, 34%);
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus {
    color: black;
    background-color: #E7E7E7;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: black;
    background-color: #D5D5D5;
}


/* Caret */

.navbar-default .navbar-nav>.dropdown>a .caret,
.navbar-default .navbar-nav>.dropdown>a:hover .caret,
.navbar-default .navbar-nav>.dropdown>a:focus .caret {
    border-top-color: white;
    border-bottom-color: white;
    margin-left: 8px;
}

.navbar-default .navbar-nav>.active>a .caret,
.navbar-default .navbar-nav>.active>a:hover .caret,
.navbar-default .navbar-nav>.active>a:focus .caret {
    border-top-color: black;
    border-bottom-color: black;
}

.navbar-default .navbar-nav>.open>a .caret,
.navbar-default .navbar-nav>.open>a:hover .caret,
.navbar-default .navbar-nav>.open>a:focus .caret {
    border-top-color: black;
    border-bottom-color: black;
}


/* Mobile version */

.navbar-default .navbar-toggle {
    border-color: #DDD;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}

.navbar-fixed-bottom .navbar-collapse,
.navbar-fixed-top .navbar-collapse {
    max-height: 400px;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 6px 12px;
    margin-top: 6px;
    margin-right: 8px;
    margin-bottom: 0px;
    border: 0px solid transparent;
}

@media (max-width: 830px) {
    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: black;
        background: white;
    }
    li#membermenu {
        float: right;
        width: 100%;
        max-width: 100% !important;
    }
    #membermenu a {
        padding-top: 8px;
        padding-bottom: 8px;
        text-overflow: ellipsis;
        max-width: 100% !important;
        white-space: nowrap;
        overflow: hidden;
    }
}

@media (min-width: 768px) {
    .navbar-nav>li>a {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

#membermenu a {
    padding-top: 8px;
    padding-bottom: 8px;
    text-overflow: ellipsis;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
    background: #3eb0db;
    color: white;
}

.dropdown-menu>li>a {
    display: block;
    padding: 9px 20px;
}

@media (min-width: 979px) {
    ul.nav li.dropdown:hover>ul.dropdown-menu {}
}

#radioplayer img {
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 16px;
}

#radioplayer video {
    height: 50px;
    width: 100%;
}

#radioplayer {
    padding: 16px;
    border-radius: 8px;
    background-color: gold;
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 0px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: table;
    display: -webkit-inline-box;
    font-size: 90%;
}

.badge-danger {
    background-color: #d43f3a;
}

.badge-warning {
    background-color: #d58512;
}

.badge-success {
    background-color: #398439;
}

.badge-info {
    background-color: #269abc;
}

.badge-inverse {
    background-color: #333333;
}

.New-gd {
    background-color: #acf4ac !important;
    border: 2px solid green;
}

.rsslogo {
    width: 200px;
}

ul.taggle_list {
    margin: 0px !important;
    padding: 0px !important;
}

#podcastplayer video {
    height: 50px;
    width: 100%;
}

#podcastplayer {
    padding: 16px;
    border-radius: 8px;
    background-color: gold;
    display: flow-root;
}

.podcastitem img,
#episode_description img {
    border-radius: 8px;
    width: 100%;
    float: left;
    margin-right: 12px;
    margin-bottom: 8px;
    max-width: 100px;
}

.podcastitem {
    margin-left: 10%;
    cursor: pointer;
}

.podcast_description {
    color: gray;
}

#podcastplayer .fullvideo {
    height: 300px;
    width: 100%;
}

.englishtype_1 {
    padding-left: 38px !important;
    background: url(/images/flags_gif/unitedkingdom_small.gif) no-repeat 0px 6px;
    display: flow-root;
    height: 28px;
    padding-top: 5px;
    color: darkgrey;
    float: right;
    position: absolute;
    top: 1px;
    right: 1px;
}

.englishtype_2 {
    padding-left: 38px !important;
    background: url(/images/flags_gif/usa_small.gif) no-repeat 0px 6px;
    display: flow-root;
    height: 28px;
    padding-top: 5px;
    color: darkgrey;
    float: right;
    position: absolute;
    top: 1px;
    right: 1px;
}

.englishtype_3 {
    padding-left: 38px !important;
    background: url(/images/flags_gif/australia_small.gif) no-repeat 0px 6px;
    display: flow-root;
    height: 28px;
    padding-top: 5px;
    color: darkgrey;
    float: right;
    position: absolute;
    top: 1px;
    right: 1px;
}


/* Colouring exercise */

.area {
    position: absolute;
    z-index: 0;
    cursor: pointer;
    background-color: #e2e2e2;
}

.area_grade {
    position: absolute;
    z-index: 100;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: flex;
}

.area_grade:before {
    align-content: center;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 270%;
    justify-content: center;
    -webkit-text-stroke: 1px white;
    text-shadow: 0px 0px 9px white;
}

.frontimage {
    z-index: 100;
    position: relative;
    pointer-events: none;
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
}

.colouring {
    width: 100%;
    background-color: #e2e2e2;
}

.editb {
    border: 3px black dotted;
}

.palette div {
    display: inline-block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: #e3e3e3 6px solid;
    z-index: 2;
    border-radius: 50%;
    margin-right: 10px;
}

palette span div {
    margin-left: auto;
    margin-right: auto;
}

.palette span {
    display: inline-block;
    text-align: center;
    margin-right: 12px;
    margin-bottom: 22px;
    border: 1px dotted silver;
    padding: 8px;
}

.selected_cblock {
    border: 6px double white !important;
    background-image: url(/images/whitebrush.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.selected_area {
    border: 3px #ff0000 dashed;
    box-shadow: 1px 0px 40px black;
}


/* Colouring blocks */

.colour_0 {
    background-image: url(/images/noentry.png);
    background-size: cover;
}

.colour_0.selected_cblock {
    border: 6px double black !important;
    background-image: url(/images/blackbrush.png);
}

.colour_1 {
    background-color: black;
}

.colour_2 {
    background-color: white;
}

.colour_2.selected_cblock {
    border: 6px double black !important;
    background-image: url(/images/blackbrush.png);
}

.colour_3 {
    background-color: red;
}

.colour_4 {
    background-color: orange;
}

.colour_5 {
    background-color: yellow;
}

.colour_6 {
    background-color: green;
}

.colour_7 {
    background-color: blue;
}

.colour_8 {
    background-color: purple;
}

.colour_9 {
    background-color: hsl(31, 76%, 24%);
}

.colour_10 {
    background-color: grey;
}

.colour_11 {
    background-color: hsla(327, 100%, 88%, 1.00);
}

.colour_12 {
    background-color: gold;
    background-image: url("/images/colours/textures/gold.jpg");
}

.colour_12.selected_cblock {
    border: 6px double black !important;
    background-image: url("/images/colours/textures/gold.jpg");
    background-size: auto;
    background-repeat: repeat;
}

.colour_13 {
    background-color: silver;
    background-image: url("/images/colours/textures/silver.jpg");
}

.colour_13.selected_cblock {
    border: 6px double black !important;
    background-image: url("/images/colours/textures/silver.jpg");
    background-size: auto;
    background-repeat: repeat;
}

.colour_14 {
    background-color: white;
    background-image: url("/images/colours/textures/spots.jpg");
}

.colour_14.selected_cblock {
    border: 6px double black !important;
    background-image: url("/images/colours/textures/spots.jpg");
    background-size: auto;
    background-repeat: repeat;
}

.colour_15 {
    background-color: white;
    background-image: url("/images/colours/textures/stripes.jpg");
}

.colour_15.selected_cblock {
    border: 6px double black !important;
    background-image: url("/images/colours/textures/stripes.jpg");
    background-size: auto;
    background-repeat: repeat;
}

.colour_16 {
    background-image: url("/images/colours/textures/wood_vintage.png");
}

.colour_16.selected_cblock {
    border: 6px double black !important;
    background-image: url(/images/colours/textures/wood_vintage.png) !important;
    background-size: auto;
    background-repeat: repeat;
}

.colouringquestion {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.colouring img {
    z-index: 0;
    opacity: 0;
    width: 100%;
}

.outercoloring {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.outercoloring.edit {
    border: 1px dashed silver;
    min-width: 100%;
    min-height: 200px;
}

.handle {
    display: none;
}

.edit .handle {
    width: 16px;
    background: black;
    height: 16px;
    display: inline-block;
    position: absolute;
    bottom: 0px;
}


/* End of colouring exercise */


/* Picture connect question */

.picconnectquestion .images>div,
.imgadd {
    width: 100px;
    height: 100px;
    border: 6px solid silver;
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    margin: 8px;
}

.images {
    display: inline-block;
}

.selected_img {
    border: 6px double black !important;
}

.picconnectquestion canvas {
    position: absolute;
    background: transparent;
    opacity: 0.4;
    pointer-events: none;
    z-index: 101;
}

.imgadd {
    color: gray;
    text-align: center;
}

.imgadd i.material-icons {
    font-size: 370%;
    margin-top: 8px;
}

.images img {
    width: 100%;
    height: 100%;
}

.picconnectquestion .images>div:hover .delpic {
    display: inline-block;
}

.delpic {
    display: none;
    position: relative;
    left: 62px;
    top: -27px;
    background: white;
    border: 1px solid black;
    border-radius: 8px;
    width: 24px;
    height: 24px;
}


/* End of Picture connect question */

.main-nav:after {
    clear: both;
    content: "\00a0";
    display: block;
    height: 0;
    font: 0px/0 serif;
    overflow: hidden;
}

.nav-brand {
    margin: 0;
    float: left;
    width: 240px;
    color: #fff;
    position: absolute;
    top: 0px;
}

.nav-brand div {
    white-space: nowrap;
}

.nav-brand a {
    background-image: url(/images/logo_menu.png);
    display: block;
    color: transparent;
    font-size: 0px;
    font-weight: normal;
    line-height: 17px;
    text-decoration: none;
    width: 200px;
    height: 60px;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#main-menu {
    clear: both;
}

@media (min-width: 830px) {
    #main-menu {
        clear: none;
    }
}


/* Mobile menu toggle button */

.main-menu-btn {
    float: right;
    margin: 6px 10px;
    position: relative;
    display: inline-block;
    width: 29px;
    height: 50px;
    text-indent: 29px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* hamburger icon */

.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
    position: absolute;
    top: 50%;
    left: 2px;
    height: 2px;
    width: 24px;
    background: #fff;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

.main-menu-btn-icon:before {
    content: '';
    top: -7px;
    left: 0;
}

.main-menu-btn-icon:after {
    content: '';
    top: 7px;
    left: 0;
}


/* x icon */

#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon {
    height: 0;
    background: transparent;
}

#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon:before {
    top: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#main-menu-state:checked~.main-menu-btn .main-menu-btn-icon:after {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* hide menu state checkbox (keep it visible to screen readers) */

#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view */

#main-menu-state:not(:checked)~#main-menu {
    display: none;
}

#main-menu-state:checked~#main-menu {
    display: block;
    overflow: scroll;
    height: 100%;
}

ul#main-menu {
    background: transparent;
    margin-left: 0px;
}

@media (min-width: 830px) {
    /* hide the button in desktop view */
    .main-menu-btn {
        position: absolute;
        top: -99999px;
    }
    /* always show the menu in desktop view */
    #main-menu-state:not(:checked)~#main-menu {
        display: block;
    }
    .sm-clean li {
        border-top: 0;
        margin-top: 9px;
    }
    .sm hr {
        margin: 5px;
        border: 1px solid silver;
    }
    .sm-clean>li.active {
        background-color: #757575;
        border-radius: 4px;
    }
    .sm-clean a,
    .sm-clean a:hover,
    .sm-clean a:focus,
    .sm-clean a:active,
    .sm-clean a.highlighted {
        color: #ffffff;
    }
    .sm-clean>li#membermenu>ul:before,
    .sm-clean>li#membermenu>ul:after {
        left: 101px;
    }
    .sm-clean>li#membermenu>ul:after {
        left: 100px;
    }
    .sm-clean a span.sub-arrow {
        border-color: #ffffff transparent transparent transparent;
    }
    ul#main-menu {
        margin-left: 240px;
    }
    .nav-brand {
        position: absolute;
    }
    ul#main-menu {
        background: transparent;
        height: auto;
        overflow: visible;
    }
    .pagetitleimage {
        min-height: 150px;
    }
}

ul#main-menu {
    background: transparent;
}

li#membermenu {
    float: right;
    max-width: 160px;
}

nav.main-nav {
    background: #3eb0db;
}

nav.main-nav,
.navbar-default,
footer {
    background-color: #1e9bc1;
    min-height: 60px;
}

.sm-clean a,
.sm-clean a:hover,
.sm-clean a:focus,
.sm-clean a:active {
    color: #ffffff;
    font-family: inherit;
}

.btn-tiny {
    width: 33px;
    padding-left: 3px !important;
    border-radius: 50%;
    height: 33px;
    padding-top: 3px;
}

.btn-tiny i.far {
    font-size: 130%;
    top: 3px;
    position: relative;
    left: 2px;
}

.btn-transparent {
    background: transparent;
    background-color: transparent;
}

.addgroup select {
    width: 75% !important;
    max-width: 75% !important;
}


/* 4 column add group */

.addgroup_4 input.text-input,
.addgroup_4 label,
.addgroup_4 select {
    max-width: 20% !important;
    width: 20% !important;
    display: inline-block;
}


/* 2 column add group */

.addgroup_2 input.text-input,
.addgroup_2 label {
    max-width: 45%;
    width: 45%;
    display: inline-block;
}


/* show line delete button only on row hover
.addgroup div:hover button {
    display: inline;
}
.addgroup div button {
    display: none;
}
 */


/* file operations listing - see lookups for file op codes */

.file_op_0 {
    background-color: white !important;
}


/* INSERT ADD */

.file_op_1 {
    background-color: hsla(125, 92%, 85%, 1.00) !important;
}

.op_1:before {
    content: "\f055";
    font-family: "Font Awesome 5 Pro";
    padding-right: 7px;
    color: green;
}


/* AMEND CHANGE*/

.file_op_2 {
    background-color: #dae6ff !important;
}

.op_2:before {
    content: "\f044";
    font-family: "Font Awesome 5 Pro";
    padding-right: 7px;
    color: #174fd0;
}


/* DELETE REMOVE */

.file_op_3 {
    background-color: #FF9D9D !important;
}

.op_3:before {
    content: "\f056";
    font-family: "Font Awesome 5 Pro";
    padding-right: 7px;
    color: red;
}


/* VIEWED */

.file_op_4 {
    background-color: #FFFFD2 !important;
}

.op_4:before {
    content: "\f06e";
    font-family: "Font Awesome 5 Pro";
    padding-right: 7px;
    color: grey;
}

.file_op_5 {
    background-color: beige !important;
}

.smalllabels label {
    margin-bottom: 0px;
}

.coursebookimage {
    float: left;
    margin-bottom: 12px;
    margin-right: 12px;
    height: 100px;
}

.cardleft {
    min-width: 100px;
    border-right: 1px dotted silver;
}

.progresstitle {
    position: absolute;
    text-align: center;
    width: 100px;
    top: 70px;
    font-size: 80%;
}

.fullframe {
    width: 100%;
    border: 0px;
    flex: 1;
}


/* FOOTER ********************** */

footer {
    background-color: #3eb0db;
    color: white;
    flex-shrink: 0;
    /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    clear: both;
    font-size: 80%;
}

footer a,
footer a:visited {
    color: white;
}

footer a:hover,
footer a:active {
    text-decoration: underline;
}

.bottomfooter {
    background-color: #555;
    width: 100%;
    display: table;
    text-align: center;
    min-height: 80px;
}

.footerline {
    border: 4px solid #39C;
}

#footerlinks {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 140%;
}

#footerlinks {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    font-size: 140%;
}

@media screen and (max-width: 850px) {
    footer {
        font-size: 57% !important;
    }
    #footerlinks {
        width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 1000px) {
    .flex .bordered {
        width: 48% !important;
    }
}

@media screen and (max-width: 630px) {
    #footerlinks {
        width: 90%;
        margin-left: 3%;
        margin-right: 3%;
    }
    footer {
        font-size: 57% !important;
        height: 18px;
        overflow: hidden;
    }
    .flex .bordered {
        width: 99% !important;
    }
}

footer h1 {
    font-size: 140%;
}

span.memberpill {
    border-radius: 36px;
    background: #f2f2f2;
    display: inline-block;
    padding: 8px;
    border: 1px dotted silver;
    margin-right: 16px;
    margin-bottom: 16px;
}

.certificate_card {
    width: 23%;
    cursor: pointer;
    display: inline-block;
    margin: 8px;
    border: 1px solid #d9d6d6;
    padding: 4px;
}

.certificate_card img {
    width: 100%;
}

.min400 {
    min-width: 250px;
    display: flow-root;
}

background {
    display: block;
}

.backgroundcover {
    background-size: cover;
    background-repeat: no-repeat;
    padding: 16px;
    border-radius: 12px;
}

.backgroundcontain {
    background-size: contain;
    background-repeat: no-repeat;
    padding: 16px;
    border-radius: 12px;
}

.backgroundrepeat {
    background-size: auto;
    background-repeat: repeat;
    padding: 16px;
    border-radius: 12px;
}


/* tabs Material design style*/

.nav-tabs {
    border-bottom: 2px solid #DDD;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-width: 0;
}

.nav-tabs>li>a {
    border: none;
    color: #666;
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
    border: none;
    color: #4285F4 !important;
    background: transparent;
}

.nav-tabs>li>a::after {
    content: "";
    background: #4285F4;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: -1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
    transform: scale(1);
}

.tab-nav>li>a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}

.scroller {
    height: 60px;
    overflow-x: auto;
    width: 100%;
    display: flex;
}

.scroller ul.tabcardstabs {
    flex: none;
}

.scroller:after {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255, 1) 90%);
    width: 10%;
    height: 50px;
}

.tab-pane {
    padding: 15px 0;
}

.tab-content {
    padding: 20px
}

.tickcross {
    font-family: 'Material Icons';
    font-size: 24pt;
}

.tickcross i,
.tickcross span {
    font-family: 'Material Icons';
    font-size: 21pt !important;
}

.tickcross div {
    font-size: 29px;
    line-height: 69%;
}


/* DOCUMENT report view */

.documentcard {
    padding: 8px;
    margin: 8px;
    cursor: pointer;
    border: 1px #e6e6e6 solid;
}

.documentcard i {
    color: darkgrey;
}

.documentcard>a:first-child {
    float: left;
    display: table-cell;
}

.documentcard .cell {
    display: table-cell;
}

.documentcard img {
    width: 150px;
    margin: 0px 8px 8px 0px;
    display: table-cell;
    float: left;
}

.documentcard .descr {
    color: #555555;
}

.documentcard .doctype {
    font-size: 80%
}

.documentcard h3 {
    margin-bottom: 8px;
    display: inline-block;
    margin-top: 0px;
}

.pagetitleimage h1 {
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 12px black;
    position: relative;
    top: 6px;
    background-color: #33333321;
    width: 100%;
    padding-left: 20px !important;
    height: auto;
    min-height: 44px;
    display: inline-block;
}

@media screen {
    .pagetitleimage h1 a {
        color: white !important;
        text-decoration: none !important;
    }
}

.bannercontent>div:first-child {
    margin: 3px 20px;
    float: left;
    width: 70%;
}

.bannercontent b {
    text-shadow: 0px 0px 8px white;
}

.coursebg {
    background-position: center center !important;
    background-size: cover !important;
}

.insetpage {
    display: flow-root;
    width: 90%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.completelabel {
    position: relative;
    top: -50px;
    text-align: center;
    font-size: 14px;
    min-width: 104px;
    color: #333;
}

.progressradial_late {
    border-radius: 100%;
    height: 104px;
    min-width: 104px;
    background-color: #fde3c1;
    border-radius: 100% !important;
}

.coursebookimage canvas {
    background-color: #fde3c1;
    border-radius: 100%;
}

.sortablelist div:before {
    content: "\21D5";
    cursor: ns-resize;
    background: #eeeeee;
    padding: 5px;
}

.sortablelist div {
    margin-left: 20px;
}

.unit_toolbar {
    position: absolute;
    right: 115px;
    display: flex;
}

.unit_toolbar div {
    cursor: pointer;
    position: relative;
    top: 7px;
    color: #ffffff;
    text-shadow: 0px 0px 2px black;
    display: inline;
}

.unit_toolbar div i.fas {
    font-size: 220%;
    padding-top: 4px;
}

#fav.on {
    color: #f15937;
}

.unit_toolbar div i {
    font-size: 280%;
}

ul.nav.sidebar-nav li i {
    width: 32px;
}

ul.nav.sidebar-nav li i.fab {
    top: 5px;
    position: relative;
}

ul.nav.sidebar-nav li i.fa {
    position: relative;
    top: 5px;
}

#main-menu li i {
    width: 26px;
    font-size: 24px;
}


/* Calendar */

.dark .fc-list-heading-main {
    color: ghostwhite;
}

.fc-view.fc-listMonth-view.fc-list-view.fc-widget-content {
    border: 0;
}

.fc-view-container a {
    display: block;
}

.fc-day-header a {
    text-align: center;
}

.fc-day-header a:hover {
    text-align: center;
}

.fc-event-container .fc-title {}

.fc-event-container .fc-time {}

.fc-unthemed td.fc-day+.fc-today {
    background: #edfb57;
    border: 2px dotted grey;
    height: 100%;
    display: flex;
    text-align: right;
    border-radius: 2px;
}

td.fc-day-top+.fc-today:after {
    content: ' ';
    text-align: center;
    margin-top: 2px;
    width: 96%;
    display: block;
    background: yellow;
    margin: 3px;
    border-radius: 2px;
}

.fc-nonbusiness {
    background: #8c8c8c;
}

.fc-bgevent {
    background: #dcdcdc;
    opacity: .3;
}

.fc-state-active,
.fc-state-down {
    background-color: #3eb0db;
    color: white;
}

.fc-allow-mouse-resize a,
.fc-allow-mouse-resize .fc-list-item-time {
    color: black !important;
}

.fc-list-heading-main {
    font-size: 150%;
}

.fc-list-heading .fc-widget-header {
    padding-left: 0px;
    padding-top: 20px;
    background-color: transparent;
}

.fc-list-heading .fc-widget-header {
    background-color: transparent !important;
}

.unit_complete {
    float: left;
    margin-bottom: 12px;
    margin-right: 12px;
    height: 100px;
    margin-left: 10%;
    margin-top: 10%;
}

.unit_available {
    position: absolute;
    right: 5px;
    top: 17px;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    height: 24px;
}


/* help page */

.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex .bordered {
    width: 32%;
    border: 1px solid silver;
    box-shadow: 1px 1px 8px silver;
    border-radius: 4px;
    padding: 0px !important;
}

.flex .bordered h1 {
    background-color: silver;
    color: white;
    padding: 8px !important;
    margin-top: 0px;
}

.overdue {
    background-color: #de1c1c;
    color: white;
}

.overdue::after {
    content: ' *';
}

#unitsearch::placeholder {
    color: red;
}

button.ui-button-icon-only {
    max-width: 2.4em;
    overflow: hidden;
}

.unit_summary h1 {
    clear: both;
    padding-top: 20px !important;
}

.card>a.minimenulink {
    width: 100% !important;
}


/* for lle4+ use with old clone pages */

.lle4 #companylogo {
    display: none;
}


/* for pop marking grades */

#admingradehead {
    background: #519c4f;
    display: block;
    margin: 0px;
    z-index: 9;
    padding: 8px;
    color: white;
}

.withbtn {
    margin-bottom: 0px !important;
    width: 100% !important;
    height: 32px !important;
}

.spaced td {
    text-align: left;
    margin: 0px;
    padding: 0px;
    padding-right: 20px;
    vertical-align: top;
}

.fancybox-inner {
    min-height: 350px !important;
}

.fancybox-container {
    z-index: 1992 !important;
}

.fancybox-content {
    max-height: 100% !important;
}

.btn-group {
    min-width: 90px !important;
}

.c-schedule {
    margin: 1em;
    padding: .5em;
    background-color: #efefef;
    display: flex;
}

.c-schedule-type {
    padding-right: .5em;
    border-right: 1px solid #666;
    min-width: 85px;
}

.c-schedule-options {
    padding-left: .5em;
}

.jobstatus {
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 7px;
    border-radius: 4px;
    margin: 10px 0px;
    display: inline-block;
}

.jobstatus0 {
    background-color: green;
}

.jobstatus1 {
    background-color: red;
}

.jobstatus2 {
    background-color: blue;
}

div#log {
    margin: 0px 60px;
    background: #ececec;
    padding: 12px;
    border: 1px solid silver;
    height: 300px;
    overflow-y: scroll;
}

.large-icon img {
    border-radius: 12px;
    margin-right: 22px;
}


/* Kids stuff */

.kidsmenu {
    float: left;
    width: 33%;
    max-width: 90%;
}

.kidsmenu>a {
    width: 100%;
}

.kidsitem {
    border: 10px solid #3edbc7;
    border-radius: 20px;
    height: 50vh;
    background-size: cover;
    color: white;
    font-size: 70px;
    text-align: center;
    text-shadow: 2px 2px 22px black;
    font-weight: bold;
    margin-right: 20px;
    margin-bottom: 20px;
}

a.kidsitem {
    text-align: center !important;
    color: white !important;
}

.kidslearn {
    background-image: url(/images/kids/learn1.jpg);
    border: 10px solid #64db3e;
}

.kidsplay {
    background-image: url(/images/kids/play1.jpg);
    border: 10px solid #dd72ff;
}

.kidsdo {
    background-image: url(/images/kids/do1.jpg);
    border: 10px solid #ffd672;
}

.kidsmenu>a:hover {
    text-decoration: none;
}

.summarycard.widget_kids {
    mask-image: url(/images/backgrounds/cloud2.svg);
    -webkit-mask-box-image: url(/images/backgrounds/cloud2.svg);
}

td .passageimg {
    max-width: fit-content;
}


/* gamification */

.locked_row img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.locked_row td {
    color: silver;
    cursor: not-allowed;
}

.locked_text:before {
    color: grey;
    font-family: "Font Awesome 5 Pro";
    content: "\f023";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

.locked_tile {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    cursor: not-allowed;
    opacity: 0.6;
}

.buy_tile {
    cursor: pointer;
}

.bought_tile {
    cursor: not-allowed;
}

.bought_text:before {
    color: green;
    cursor: not-allowed;
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

.buy_text:before {
    color: gold;
    cursor: not-allowed;
    font-family: "Font Awesome 5 Pro";
    content: "\f51e";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

span#coincount {
    font-size: 260%;
    font-weight: bold;
    color: brown;
    border: gold 2px dotted;
    display: inline-block;
    border-radius: 100%;
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: middle;
    line-height: 120px;
}

.coin_price {
    font-size: 100%;
    font-weight: bold;
    color: brown;
    border: #eccb17 2px dotted;
    display: inline-block;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    line-height: 46px;
    background-color: gold;
    float: right;
}

.modal.fade {
    opacity: 1;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    transform: translate(0);
}

.modal-title {
    font-size: 120%;
    font-weight: bold;
}

.modal-header {
    background-color: aliceblue;
}

.outercoloring.edit.zoom {
    position: absolute;
    top: 0;
    left: 0;
}

.zoomcontainer {
    width: 100%;
    overflow: scroll;
    position: relative;
    height: 900px;
}

.scenechoice {
    float: left;
    width: 150px;
    min-height: 100px;
    display: inline-block;
    color: white;
    overflow: hidden;
    margin-left: 12px;
}

span.card-title {
    font-size: 100% !important;
    display: block;
    position: absolute;
    bottom: 0px;
    width: 150px;
    padding-left: 8px;
}

.scenechoice a {
    width: 100%;
    height: 93px;
    color: white !important;
}

.card-image.object {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.object-hilite {
    -webkit-filter: drop-shadow(2px 2px 4px #cacaca) drop-shadow(-2px 2px 4px #cacaca) drop-shadow(2px -2px 4px #cacaca) drop-shadow(-2px -2px 4px #cacaca);
    filter: drop-shadow(2px 2px 4px #cacaca) drop-shadow(-2px 2px 4px #cacaca) drop-shadow(2px -2px 4px #cacaca) drop-shadow(-2px -2px 4px #cacaca);
}

.sidebar-nav .fas {
    vertical-align: middle;
}

#coincountmenu {
    position: relative;
    top: -62px;
    text-align: center;
    width: 100%;
    display: inline-block;
    color: white;
    background-color: red;
}

#map-canvas {
    height: 600px;
    width: 100%;
}

.gm-svpc,
.gm-style-mtc {
    display: none;
}

table {
    border-spacing: 0px;
    border-collapse: separate;
}

span #inlinelevelid {
    display: inline;
    width: 50%;
    float: right;
    position: relative;
    top: -9px;
    background: transparent;
    text-align-last: right;
    color: white;
}

#audiorecorder {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    height: 170px !important;
    display: block;
}

.attend_0 {
    background-color: red !important;
}

.attend_1 {
    background-color: lime !important;
}

.attend_2 {
    background-color: #53e0e4 !important;
}

.attend .attend_0:hover,
.attend .attend_1:hover,
.attend .attend_2:hover {
    opacity: 0.8;
    background-position: 0px -33px;
}

.attend_0.active {
    color: white;
}

@media screen and (max-width:670px) {
    .summarycard_title {
        font-size: 100;
        top: 58px;
    }
    .floating-btn {
        position: fixed;
        bottom: 12px;
        z-index: 1200;
        width: 40px;
        height: 40px;
        right: 12px;
        border-radius: 50%;
    }
    .headernotes {
        display: none;
    }
    .pricepill {
        height: 24px !important;
    }
}


/* signup form */

.regform {
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    border: 1px solid silver;
    background: #bdbdbd26;
    padding: 24px;
}

.regform h1 {
    text-align: center;
}

a.btn,
a.btn:hover {
    color: white;
    text-decoration: none;
}


/* STAR RATING SYSTEM */

.rating {
    float: left;
}


/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
    follow these rules. Every browser that supports :checked also supports :not(), so
    it doesn’t make the test unnecessarily selective */

.rating:not(:checked)>input {
    position: absolute;
    //top: -9999px;
    left: -999px;
    clip: rect(0, 0, 0, 0);
}

.rating:not(:checked)>label {
    float: right;
    width: 1em;
    /* padding:0 .1em; */
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 250%;
    /* line-height:1.2; */
    color: #ddd;
}

.rating:not(:checked)>label:before {
    content: '★ ';
}

.rating>input:checked~label {
    color: dodgerblue;
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
    color: dodgerblue;
}

.rating>input:checked+label:hover,
.rating>input:checked+label:hover~label,
.rating>input:checked~label:hover,
.rating>input:checked~label:hover~label,
.rating>label:hover~input:checked~label {
    color: dodgerblue;
}

.rating>label:active {
    position: relative;
    top: 2px;
    left: 2px;
}


/* Emotions */

.q_emotion i {
    font-size: 300%;
}

.q_emotion div {
    text-align: center;
    border: 1px solid transparent;
    padding: 8px;
    border-radius: 8px;
    overflow: hidden;
}

.q_emotion .e_sad {
    color: red;
}

.q_emotion .e_ok {
    color: blue;
}

.q_emotion .e_happy {
    color: green;
}

.q_emotion input[type="radio"] {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.q_emotion .selected {
    border: 1px solid;
    background-color: #f9f9f9;
}

.table1 tr td:first-child {
    background-color: #f0f7f9;
}


/* jquery ui tabs styling */

.tabcard2 {
    display: none;
}

.tabcard2.ui-widget.ui-widget-content {
    border: 0px;
}

.tabcard2 .ui-widget-header {
    border: 0px;
    border-bottom: 2px solid #DDD;
    background: transparent;
}

.tabcard2 .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 0px solid #c5c5c5;
    background: transparent;
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: transparent;
}

.tabcard2.ui-widget {
    font-family: inherit;
}

.tabcard2 .ui-tabs-tab a:focus {
    outline: none;
}

.multiselect {
    line-height: 2.5em;
}

.ui-tabs-tab .fas {
    font-size: 110%;
    position: relative;
    top: 2px;
    padding-bottom: 6px;
}


/*
    .ui-tabs .ui-tabs-nav li {
        border: 1px solid silver;
        border-radius: 8px 8px 0px 0px;
        top: 2px;
        position: relative;
    }
    
    .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
        background: dodgerblue;
        color: white !important;
        width: 100%;
    }
    
    .ui-tabs .ui-tabs-nav li.ui-tabs-active {
        margin-bottom: -1px;
        padding-bottom: 3px;
        top: 0px;
    }
    */

.ui-tabs.ui-tabs-vertical {
    padding: 0;
    width: 42em;
}

.ui-tabs.ui-tabs-vertical .ui-widget-header {
    border: none;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
    float: left;
    width: 10em;
    background: #CCC;
    border-radius: 4px 0 0 4px;
    border-right: 1px solid gray;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    width: 100%;
    margin: 0.2em 0;
    border: 1px solid gray;
    border-width: 1px 0 1px 1px;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    position: relative;
    right: -2px;
    z-index: 2;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
    display: block;
    width: 100%;
    padding: 0.6em 1em;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
    cursor: pointer;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
    padding-bottom: 0;
    border-right: 1px solid white;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
    margin-bottom: 10px;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
    float: left;
    width: 28em;
    border-left: 1px solid gray;
    border-radius: 0;
    position: relative;
    left: -1px;
}


/* Translation page */

#translation_table {
    width: 100%;
}

#translation_table td,
#translation_table th {
    padding: 8px;
}

#translation_table tbody tr:nth-child(odd) {
    background-color: #f1f1f1;
}

.settings {
    background-color: #f1f1f1;
}

#translation_table tbody td:nth-child(1) {
    width: 28%;
    font-weight: bold;
    background: #1e82da24;
}

#translation_table tbody td:nth-child(2) {
    width: 36%;
}

#translation_table tbody td:nth-child(3) {
    width: 36%;
    background-color: #0080001f;
}

#translation_table textarea,
#translation_table input {
    width: 100%;
    max-width: 100%;
}

#translation_table th {
    font-size: 120%;
    background-color: grey;
    color: white;
}

#translation_table th small {
    font-size: 70%;
    color: deepskyblue;
}

#translation_table input:read-only {
    width: auto;
    background: transparent;
    font-weight: bold;
    margin-top: 4px;
    color: black;
}


/* Stripe code Stripe element Stripe.com payment handler*/

.StripeElement {
    background-color: white;
    /*padding: 8px 12px;*/
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}


/* spinner */

.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.spinner-path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
    0% {
        stroke: #4285F4;
    }
    25% {
        stroke: #DE3E35;
    }
    50% {
        stroke: #F7C223;
    }
    75% {
        stroke: #1B9A59;
    }
    100% {
        stroke: #4285F4;
    }
}

@keyframes colors {
    0% {
        stroke: #4285F4;
    }
    25% {
        stroke: #DE3E35;
    }
    50% {
        stroke: #F7C223;
    }
    75% {
        stroke: #1B9A59;
    }
    100% {
        stroke: #4285F4;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

textarea[readonly],
input[readonly]:not(.comboTreeInputBox),
select[readonly] {
    color: #aba9a9 !important;
    background-color: #f3f3f3 !important;
}

select#currency,
select#u_currency {
    width: 40%;
}

input#cost,
input#u_cost {
    width: 50%;
}

.settings input,
.settings select {
    background: white !important;
}

.scrolldesc {
    width: 100%;
    border: 1px solid silver;
    height: 200px;
    overflow-y: scroll;
}

.code {
    font-family: monospace !important;
    width: 100% !important;
    max-width: 100% !important;
}

.pricepill {
    background: #4094ef;
    padding: 2px 4px;
    height: 34px;
    display: inline-block;
    color: white;
    border-radius: 4px;
    font-size: 120%;
}


/* SHOPPING CART */

.cart b.count {
    color: white;
    background-color: red;
    font-size: 10px;
    padding: 0px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 5px;
    top: 7px;
    height: 16px;
    width: 16px;
}

#main-menu .cart {
    float: right;
}

.cart li {
    padding: 16px;
}

.small_cart img {
    width: 32px;
    height: 32px;
}

#fullcart img {
    width: 64px;
    height: 64px;
}

.small_cart .row {
    //min-height: 3em;
    margin-bottom: 4px;
}

#fullcart .small_cart .del button {
    top: 10px;
    font-size: 110%;
    padding: 6px 12px;
    position: relative;
}

.small_cart .row:hover {
    background: #f1f1f1;
}

#fullcart #checkoutbtn {
    display: none;
}

.small_cart .del i {
    font-size: 120% !important;
}

#fullcart .row {
    //min-height: 3em;
    margin-bottom: 8px;
    font-size: 114%;
}

.small_cart .del,
.small_cart .del button {
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 0px;
    right: 6px;
}

.small_cart .row {
    //min-height: 3em;
}

.small_cart small {
    font-size: 60%;
}

.total-row,
.total-row td {
    border-top: double silver;
    line-height: 2em;
}

.container.small_cart {
    width: 100%;
}

@media (min-width: 830px) {
    .sm-clean>li>ul.rightmenu:before,
    .sm-clean>li>ul.rightmenu:after {
        right: 30px !important;
        left: 270px;
    }
}

.widemenu {
    max-width: 427px !important;
    left: -18px !important;
    width: 430px !important;
}


/* order status colours */


/* in cart */

.orderstatus1:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f07a";
    padding-right: 4px;
    vertical-align: middle;
}

.orderstatus1 {
    color: rgb(1, 130, 204);
    background-color: white;
    padding: 5px;
    border-radius: 4px;
}


/* created */

.orderstatus2:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f07a";
    padding-right: 4px;
    vertical-align: middle;
}

.orderstatus2 {
    color: rgb(204, 133, 1);
    background-color: white;
    padding: 5px;
    border-radius: 4px;
}


/* pending */

.orderstatus3:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f017";
    padding-right: 4px;
    vertical-align: middle;
}

.orderstatus3 {
    color: black;
    background-color: rgb(238, 241, 22);
    padding: 5px;
    border-radius: 4px;
}


/* paid, fulfilled */

.orderstatus4:before,
.orderstatus6:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    padding-right: 4px;
    vertical-align: middle;
}

.orderstatus4,
.orderstatus4 {
    color: #03b503;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
}


/* cancelled, returned */

.orderstatus5:before,
.orderstatus7:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f00d";
    padding-right: 4px;
    vertical-align: middle;
}

.orderstatus5,
.orderstatus7 {
    color: #b50f03;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
}


/* Invoice */

.invoice {
    font-size: 70%;
    margin-top: 50px;
    margin-bottom: 100px;
    top: 100px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.invoice_title {
    font-size: 220%;
}

.invoice .full {
    width: 100%;
}

.invoice_address {
    border-top: 3px solid orange;
    text-align: right;
}

.invoice #fullcart img {
    width: 32px;
    height: 32px;
}


/* top right border triangle for promotions*/

.top-right-triangle {
    border-left: 120px solid transparent;
    border-right: 120px solid green;
    border-bottom: 120px solid transparent;
    height: 0;
    width: 0;
    position: absolute;
    right: 0px;
    z-index: 2;
}

.top-right-triangle span {
    transform: rotate(45deg);
    width: 220px;
    height: 220px;
    white-space: nowrap;
    position: absolute;
    color: white;
    right: -118px;
    text-align: center;
    top: -2px;
    font-size: 120%;
}

.card.medium.popular1 {
    border: 4px solid green;
}

.show0 {
    display: none;
}

span.top-right-triangle.popular0 {
    display: none;
}

.display-table {
    display: table;
}


/* ads for placement test, courses, events */

.simplebox {
    max-width: 400px;
    z-index: 1;
    border-radius: 16px;
    width: 96%;
    margin: 12px;
    border: 1px solid silver;
    height: 380px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-align: left;
    min-width: 300px;
}

.simplebox_content {
    padding: 20px;
}

.simplebox h2 {
    color: black;
}

.placement_simplebox::after {
    background-image: url(/images/steps.jpg);
}

.courses_simplebox::after {
    background-image: url(/images/courses/gf4.jpg);
}

.simplebox::after {
    content: "";
    background-size: cover;
    border-radius: 16px;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

.simplebox_footer {
    position: absolute;
    bottom: 0;
    background: #2b2b2b2e;
    display: block;
    width: 100%;
    height: 50px;
    padding: 16px;
}

.simplebox_footer a {
    color: black !important;
    font-size: 110%;
}

#logform {
    max-width: 400px;
    text-align: center;
    padding: 20px;
    background-color: white;
    border-radius: 16px;
    width: 96%;
    margin: 12px;
    border: 1px solid silver;
    display: inline-block;
}

.loginbtn {
    font-size: 220%;
    font-weight: bold;
}

.simplebox_header {
    position: relative;
    font-size: 150%;
    background: #00c1ff73;
    display: block;
    width: 100%;
    height: 50px;
    padding: 16px;
    font-weight: bold;
    padding-top: 10px;
}

.simplebox.courses_simplebox {
    max-width: 828px;
}

.simplebox.events_simplebox {
    max-width: 828px;
}

.events_simplebox::after {
    background-image: url(/images/events/type22.jpg);
}


/* Radio */

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    visibility: visible;
    opacity: 1 !important;
    transition: visibility 0s, opacity 0s;
    color: black !important;
    font-size: 160%;
    top: 5px !important;
}

.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3 {
    width: 100%;
    max-width: 100%;
    height: 0;
    display: initial !important;
}

.video-js .vjs-control-bar {
    color: black !important;
    font-size: 160%;
    top: 5px !important;
}

.video-js .vjs-fullscreen-control {
    display: none !important;
}

.video-js .vjs-picture-in-picture-control {
    display: none !important;
}

div#timerdiv {
    border-radius: 8px;
    border: 1px solid silver;
    padding: 8px;
    font-size: 130%;
    font-weight: bold;
}


/* Menu tree eg on Help/Training page*/

.menutree>li {
    border: 1px solid silver;
    list-style: none;
    border-radius: 8px;
    margin: 8px;
    overflow: hidden;
}

.menutree>li>a {
    font-size: 150%;
    background-color: darkgray;
    color: white !important;
    padding: 8px;
    display: block;
}

.menutree .submenu {
    margin: 12px;
}

.menutree i {
    width: 34px;
    text-align: center;
}

.menutree li {
    list-style: none;
}


/* image upload  eg account pages*/

div.uploaded_image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

div.uploaded_image:before {
    position: absolute;
    z-index: 9999;
    content: '+';
    color: green;
    font-size: 800%;
    font-family: monospace;
    width: 100%;
    border: 1px solid silver;
    vertical-align: middle;
    height: 100%;
    text-align: center;
    background: #ffffff96;
    padding-top: 16px;
    border-radius: 8px;
    pointer-events: none;
    display: none;
}

div.uploaded_image:hover:before {
    display: block;
}

div.uploaded_image,
div.existing_image {
    width: 100%;
    position: relative;
    max-width: 200px;
    height: 200px;
    float: left;
    margin-right: 12px;
    margin-bottom: 12px;
    background-size: cover;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    display: flex;
    vertical-align: middle;
    align-items: center;
    border: 1px silver solid;
}

div.existing_image div {
    width: 100%;
    position: absolute;
    height: 200px;
    background-size: cover;
    border-radius: 8px;
}

.upload_prog {
    font-weight: bold;
    font-size: 120%;
    color: white;
    text-shadow: black 2px 2px 10px;
    background: #0000007a;
    border-radius: 8px;
    display: table;
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
}

.existing_image a {
    display: contents;
}

.existing_image a:hover:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f019";
    font-size: 180%;
    z-index: 2;
    text-align: center;
    color: black;
    text-decoration: none !important;
    background: white;
    width: 44px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.existing_image i {
    position: absolute;
    right: -10px;
    font-size: 170%;
    top: -10px;
    display: none;
    text-shadow: white 0px 0px 11px;
    background: white;
    border-radius: 50%;
    padding: 3px;
}

.existing_image:hover i {
    display: block;
}

.existing_docs .filetitle,
.existing_docs .filesize,
.existing_docs .filedate {
    display: none;
}

.existing_docs.rows .existing_image {
    display: table-row;
}

.existing_docs.rows {
    display: table;
    width: 100%;
}

div.existing_docs.rows .existing_image {
    display: table-row;
    position: initial;
    float: none;
    white-space: nowrap;
    height: 52px;
}

div.existing_docs.rows div {
    float: none;
    height: 48px;
    position: initial;
    display: inline-block;
    text-align: left;
    padding: 12px;
}

div.existing_docs.rows .filetitle {
    width: 45%;
    color: black;
    background: transparent;
}

.existing_docs.rows .existing_image .fileimg {
    width: 48px;
    display: inline-block;
    float: left;
}

div.existing_docs.rows .filesize {
    width: 30%;
}

div.existing_docs.rows .filedate {
    width: 20%;
}

div.existing_docs.rows .existing_image:hover i {
    display: none;
}

.existing_docs .filetitle {
    display: block;
    position: absolute;
    bottom: 0px;
    color: white;
    height: 50px;
    text-align: center;
    background: linear-gradient(top, transparent, rgba(0, 0, 0, 0.89));
    background: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.89));
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.89));
    background: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.89));
}

.existing_docs.rows+div {
    display: none;
}


/* question editor */

.draghandle {
    width: 32px;
    height: 32px;
    background-color: silver;
    padding: 8px;
    cursor: grab;
    margin-right: 8px;
    height: min-content;
    display: inline-flex;
}

.draghandle:before {
    content: '\f7a4';
    font-weight: 900;
    font-family: "Font Awesome\ 5 Pro";
    color: white;
    text-shadow: 0px 2px 1px grey;
}

.editable.text-input {
    height: fit-content;
}

.questiontext,
.answertext {
    min-height: 24px;
}

.questiontext p,
.answertext p {
    min-height: 24px;
    margin: 0px;
    padding: 0px;
}

.question {
    padding: 16px;
    width: 100%;
}

.qheader {
    margin-bottom: 8px;
}

.toolbox {
    border: 1px solid silver;
    border-radius: 8px;
    overflow: hidden;
    width: 200px;
    float: left;
    margin-right: 12px;
}

#toolbar {
    border: 1px solid grey;
    background-color: silver;
}

.amv th {
    font-size: 70%;
    padding-right: 8px;
}

.tools {
    padding: 20px;
}

.tools i {
    width: 20px;
}

.qsettings {
    padding: 12px;
    background: #fbffd7;
    margin-bottom: 16px;
    border: 2px solid silver;
    border-radius: 8px;
}

.tools a,
.tools a:visited,
.tools a:any-link {
    color: black;
    text-decoration: none;
    line-height: 2em;
}

.toolbox>div:first-child {
    font-size: 150%;
    background-color: darkgray;
    color: white !important;
    padding: 8px;
    display: block;
}

.imageq {
    max-width: 100%;
    width: 50%;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    min-width: 100px;
    border: 1px dotted silver;
}

ol.sortable ol {
    margin: 0px;
}

ol.sortable li {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    /* Chrome, Safari */
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
    display: inline-block;
}


/* slider */

span.ui-slider-handle.ui-corner-all.ui-state-default {
    background-color: #3b8aff;
    border: 1px solid silver;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    top: -7px;
}

.sliderc {
    border-radius: 50px;
}

div.ui-slider-range.ui-corner-all.ui-widget-header {
    background-color: rgb(233, 233, 233);
}

.hostanimation {
    width: 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 80vh;
    pointer-events: none;
    z-index: 99999;
}

.orderline_header,
.orderline_header th {
    border-bottom: 1px solid silver;
    color: #969595;
    font-weight: bold;
}

.stickyhead {
    border-spacing: 9px;
}
table.stickyhead thead {
    position: sticky;
    inset-block-start: 61px;/* top of page allowing for menu */
    z-index: 9;
}
.stickyhead .card-cols2 {
    width: 100%;
    min-width: 350px;
    padding-right: 12px;
    margin: 0px;
}

.stickyhead tr.tablesubheader {
    background-color: silver;
}
.stickyhead tr.tablesubheader h2 {
    color: white;
    margin: 4px;
}

.cardnew{
width: 90%; max-width: 300px; border: 1px solid #ccc; padding: 16px; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); margin-bottom: 20px;
}

.containernew {
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
}


.coursetitle {
    display: block;
    background: #ffffffb3;
    height: fit-content;
    border-radius: 8px;
    padding: 4px;
}

.passageimgslick, #passageimgslick
{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

@media screen and (max-width: 885px) {
    .exercise_0 table { border-collapse:collapse;
                      padding:0px;
                      border: 1px solid #39c;
        width:99.9% !important
                      }
    .exercise_0 table tr {
        border-right: 1px solid #39c !important;
    }
        
    .exercise_0 td, .exercise_0 th {
        display: block;
        border-style : hidden !important;
        width:100% !important;
    } 
    .exercise_0 td:not(:first-child){
        margin-left:30px;
    } 

    .exercise_0 .bordered,.exercise_0  .bordered table,.exercise_0  .bordered td,.exercise_0  .bordered th {
        padding:0px !important;
    }
}

.forgotten {
    font-size: 18pt;
    margin: 24px;
}