@charset "UTF-8";
body,
html {
    width: 100%;
    height: 100%;
}

td.disabled {
    color: gray !important;
}

#wait-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999999;
    background-color: rgba(255, 255, 255, 0.85);
    display: none;
    cursor: wait;
}

#wait-overlay.black {
    background-color: rgba(0, 0, 0, 0.85);
}

a[title="Password Lost and Found"] {
    display: none !important;
}

.green {
    color: green;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.gray {
    color: gray;
}

.grade.bad {
    color: red;
}

.grade.ok {
    color: orange;
}

.grade.good {
    color: green;
}

.maroon {
    color: #a00;
}

.quiz-tools.entry {
    color: #999;
}

.quiz-tools.entry.submitted {
    color: black;
}

.quiz-tools.material-icons {
    color: #999;
    font-size: 1em;
    cursor: pointer;
}

.login {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,474747+39,2b2b2b+76,1c1c1c+91,131313+100 */
    background: #4c4c4c;
    /* Old browsers */
    /* FF3.6-15 */
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #4c4c4c 0%, #474747 39%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    background: white;
    background-image: url(../images/ebook-bg.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.login #nav a {
    display: none;
}

.login #backtoblog a,
.login #nav a {
    color: #fe2902;
    outline: none;
    transition: color 200ms ease;
}

.login #login {
    box-sizing: border-box;
    background-color: white;
    padding: 250px 100px;
    margin: 0;
    left: 0;
    height: 100%;
    width: 50%;
    max-width: 800px;
}

.login form {
    box-shadow: none;
}

.login #backtoblog a:hover,
.login #nav a:hover {
    color: #000;
}

.login #login_error,
.login .message {
    border-left: 4px solid #fe2901;
    border-left: 0;
}

.rrfc-admin-menu-item a {
    color: #0ff !important;
}

.wp-core-ui .button-primary {
    background-color: #fe2901;
    background: #fe2901;
    text-shadow: none;
    box-shadow: none;
    border-radius: 0;
    transition: all 300ms ease;
}

.wp-core-ui .button-primary:hover {
    background-color: #dedede;
    background: #dedede;
    color: #000;
}

.wp-core-ui .button-primary:active,
.wp-core-ui .button-primary:focus {
    background-color: #fe2902;
    background: #fe2902;
    color: #000;
    box-shadow: none;
}

input[type=text]:focus,
input[type=search]:focus,
input[type=radio]:focus,
input[type=tel]:focus,
input[type=time]:focus,
input[type=url]:focus,
input[type=week]:focus,
input[type=password]:focus,
input[type=checkbox]:focus,
input[type=color]:focus,
input[type=date]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=number]:focus,
select:focus,
textarea:focus {
    background-color: #fff;
    background: #fff;
    color: #000;
    border-color: #fe2901;
    box-shadow: none;
}

input[type=checkbox]:checked::before {
    color: #fe2901;
}

.wp-core-ui .button-group.button-large .button,
.wp-core-ui .button.button-large {
    padding: 0 30px 15px;
}

.login h1 a {
    outline: none !important;
    width: 500px;
    max-width: 100%;
    height: 165px;
    background-size: 100% auto;
}

.login p#nav {
    text-align: center;
}

.login p#backtoblog {
    display: none;
}

.role-student #wpadminbar {
    background-color: transparent;
}

.role-student #wp-admin-bar-root-default {
    display: none;
}

.role-student #wp-admin-bar-top-secondary {
    background-color: black;
    padding: 25px;
}

.role-student #adminmenu li .wp-menu-name {
    height: 50px;
}




/** LESSON TOOLS **/

.lesson-tools-form {
    display: block;
    width: 40%;
    max-width: 650px;
    margin: 25px;
}

.lesson-tools-form.alignright {
    margin-right: 100px;
    margin-top: 0;
}

.lesson-tools-form input,
.lesson-tools-form select,
.lesson-tools-form textarea {
    padding: 3px 8px;
    font-size: 1.2em;
    line-height: 100%;
    height: 35px;
    width: 100%;
    outline: 0;
    margin: 10px !important;
}

.lesson-tools-form textarea {
    height: 300px;
    font-size: 0.9em;
    line-height: 1.2em;
}

.modal {
    width: auto !important;
    margin: 50px 0 !important;
}

#modal-content {
    min-width: 200px;
    min-height: 200px;
}

#modal-content.comments-modal {
    min-width: 1024px;
}

#at-a-glance {}

#at-a-glance thead td {
    padding: 10px;
    font-weight: bold;
    font-size: 1.2em;
}

#at-a-glance tbody tr td {
    padding: 5px;
}

#at-a-glance tbody tr td:first-child {
    text-align: center;
    font-weight: bold;
}

#at-a-glance tbody tr td:nth-child(2),
#at-a-glance tbody tr td:nth-child(3) {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
}

.modal-table thead {
    font-weight: bold;
    font-size: 1.2em;
}

.modal-table thead td {
    text-align: center;
}

.modal-table td {
    padding: 5px;
}

.modal-table tr td.comment-content {
    max-width: 400px;
}

.modal-table tr td.page {
    text-align: center;
    font-weight: bold;
    min-width: 80px;
}

.sep {
    width: 100%;
    height: 5px;
    background-color: #999;
}

.edit {
    display: inline-block;
    margin-right: 10px;
    color: #f90;
    opacity: 0.5;
    cursor: pointer;
    transition: all 200ms ease;
}

.edit.edit-html {
    color: #999;
    pointer-events: none;
}

.edit:hover {
    opacity: 1;
}

.admin-quiz-content {
    width: 100%;
    padding: 20px;
    border: 2px solid black;
    transition: all 400ms ease;
}

.admin-quiz-content p {
    font-weight: bold;
    display: block;
    width: 100%;
    margin: 30px 0 5px 0;
}

.admin-quiz-content p:first-child {
    margin-top: 5px;
}

div.userinfo {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #aaa;
    line-height: 16px;
    font-size: 12px;
    font-weight: bold;
}

div.userinfo .nodata {
    color: red;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
}

div.json-user-id {
    max-height: 25px;
    overflow: hidden;
    margin-top: 15px;
    border: 1px solid #aaa;
    cursor: pointer;
    transition: all 250ms;
    max-width: 90%;
    background-color: #fff;
    padding: 10px;
}

div.json-user-id.open {
    max-height: 500px;
    overflow: auto;
    border: 1px solid green;
}

#import-at-userdata-form p input[type="text"],
#import-at-userdata-form p select {
    width: 100%;
}

p#json-result,
p#json-result-processed {
    box-sizing: border-box;
    width: 100%;
    width: calc(100% - 25px);
    height: 250px !important;
    max-height: 250px;
    overflow-y: auto;
    background-color: white;
    padding: 15px;
}

a.at-uri {
    color: red !important;
}

.warning-uri {
    color: red !important;
    font-weight: bold;
}

ul.user-enrolled-courses {
    margin: 0;
}

ul.user-enrolled-courses li {
    font-size: 0.85em;
    color: black;
    margin: 0;
}

div#admin-user-pagination {
    width: 100%;
    margin-top: 50px;
    text-align: center;
    font-size: 1.2em;
}

div#admin-user-pagination span,
div#admin-user-pagination a {
    display: inline-block;
    margin: 0 5px;
}

table#user-data-table thead tr {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

table#user-data-table thead tr td,
table.user-data-table thead tr td,
table#quiz-data-table thead tr td {
    background-color: #333 !important;
    color: white !important;
    text-align: center;
    font-weight: bold;
}

table#user-data-table tr td,
table.user-data-table tr td,
table#quiz-data-table tr td {
    border-bottom: 1px solid #999;
    padding: 10px;
}



/*table#user-data-table tr:nth-child(odd) td,
table.user-data-table tr:nth-child(odd) td,
table#quiz-data-table tr:nth-child(odd) td {
    background-color: #eee;
}*/

#user-data-table tr.suspended {
    display: table-row;
}

#user-data-table tr.suspended,
#user-data-table tr.suspended td {
    background-color: rgba(33, 33, 33, 0.05) !important;
}

#user-data-table tr.suspended {
    opacity: 0.5 !important;
}

tr.student {
    background-color: rgba(0, 255, 0, 0.3);
}

tr.mentor {
    background-color: rgba(70, 0, 0, 0.2);
}

tr.staff {
    background-color: rgba(0, 0, 255, 0.3);
}

tr.mentor td {
    color: maroon;
}

tr.student td {
    color: green;
}

tr.staff td {
    color: blue;
}

tr.admin {
    background-color: #666 !important;
}

tr.admin td,
tr.admin td * {
    color: white;
    background-color: #666 !important;
}

span.user-tools-drop-course {
    display: inline-block;
    color: red;
    text-decoration: underline;
    cursor: pointer;
    margin: 0 10px;
}

.user-tools-btn {
    margin-top: 25px;
}

#user-tools-enroll-courses-options div {
    margin-top: 5px;
}

.userdata-highlights,
.userdata-scribbles {
    color: #aaa !important;
}

.userdata-info.userdata-highlights,
.userdata-info.userdata-scribbles {
    cursor: pointer;
    text-decoration: underline;
    color: blue !important;
}

table.userdata-table tr.header td {
    font-weight: bold;
    text-align: center;
}

table.userdata-table tr td {
    padding: 5px 10px;
}

table.userdata-table tr td:first-child,
table.userdata-table tr td:last-child {
    color: #aaa;
}

#acf-questions table.acf-input-table:first-child>tbody>tr:nth-child(odd) td {
    background-color: #f4f4f4;
}

#acf-questions table.acf-input-table:first-child>tbody>tr:nth-child(even) td {
    background-color: #fff;
}

#acf-questions table.acf-input-table:first-child>tbody>tr .repeater td {
    background-color: #fff;
}




/**
 * Staff Role classes for wp-admin 
 */

.role-staff #wp-admin-bar-wp-logo,
.role-staff #wp-admin-bar-site-name {
    display: none;
}

.role-staff #adminmenu div.wp-menu-name {
    padding: 10px 0;
    text-align: center;
}

.role-staff #adminmenu li {
    text-align: center;
    padding: 25px 0;
}

.role-staff #adminmenu li.wp-has-current-submenu {
    padding: 25px 0 0 0;
}

.role-staff #adminmenu .wp-submenu li {
    padding: 10px 0;
}

.role-staff #adminmenu .wp-has-current-submenu,
.role-staff #adminmenu li.current,
.role-staff #adminmenu li.current * {
    background: #555 !important;
}

.role-staff #adminmenu div.wp-menu-image {
    float: none;
    display: inline-block;
    width: 60px;
    margin-bottom: -10px;
    height: auto;
}

.role-staff #adminmenu .wp-has-current-submenu .wp-submenu {
    background-color: #222;
    padding: 0;
}

.role-staff #adminmenu .wp-has-current-submenu .wp-submenu li.current,
.role-staff #adminmenu .wp-has-current-submenu .wp-submenu li.current * {
    background-color: #333 !important;
}

.role-staff #adminmenu .wp-submenu a {
    color: white !important;
}

.role-staff #adminmenu .dashicons,
.role-staff #adminmenu .dashicons-before:before {
    font-size: 60px;
    width: 60px;
    height: 60px;
}

.role-staff #adminmenu li.wp-menu-separator,
.role-staff #adminmenu #collapse-menu,
.role-staff #wp-admin-bar-quiz-tools,
.role-staff #wp-admin-bar-user-tools {
    display: none;
}

.user-tools-action {
    color: #ff2900 !important;
    text-decoration: underline;
    cursor: pointer;
}

.user-role-toggle {
    text-decoration: underline;
    cursor: pointer;
}

tr.suspended {
    display: none;
}

tr.suspended.visible {
    display: table-row;
}

tr.suspended td {
    background-color: rgba(255, 0, 0, 0.5) !important;
}

.toggle-suspended-view {
    color: #ff2900;
    text-decoration: underline;
    font-weight: normal;
    cursor: pointer;
}

td.user_email {
    text-align: center;
}


/* Narrow Browser Windows and Smartphones in both orientations. *************************************************************/

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .login #login {
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.95);
        padding: 50px 20px;
        margin: 0;
        left: 0;
        width: 100%;
    }
    .wp-core-ui .button-group.button-large .button,
    .wp-core-ui .button.button-large {
        padding: 10px 30px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1600px) {
    .login #login {
        padding: 150px 100px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 680px) {
    .login #login {
        padding: 25px;
    }
}