/* Minification failed. Returning unminified contents.
(1190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '/'
 */
html {
    background-color: #3a92c8;
    background: -webkit-radial-gradient(circle,#a2dbfd,#3a92c8);
    background: -moz-radial-gradient(circle,#a2dbfd,#3a92c8);
    background: -ms-radial-gradient(circle,#a2dbfd,#3a92c8);
    height: 100%;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: Helvetica,Arial,sans-serif !important;
}

    body.body-overflow-x-hidden {
        overflow-y: hidden;
        height: 100%;
    }

body {
    background: none;
    top: 0 !important;
}

.error-page {
    width: 100%;
    text-align: center;
}

button {
    font-family: Helvetica,Arial,sans-serif;
}

.clear {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.center-float {
    display: table;
    margin: auto;
}

input, button, select, textarea {
    font-family: Helvetica,Arial,sans-serif !important;
}

html.safari legend {
    margin-bottom: 20px;
}

.header {
    height: 60px;
    width: 100%;
    background-color: #252222;
    background-image: url('images/diagonal-white-bg.png');
}

    .header .logo {
        background-image: url('images/bb_logo.png');
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        width: 149px;
        height: 28px;
        margin-left: 20px;
        margin-top: 15px;
    }

html.ecb .header .logo {
    background-image: url('images/ecb_logo.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 104px;
    height: 33px;
    margin-left: 20px;
    margin-top: 15px;
}

@media print {
    .noprint {
        display: none !important;
    }
}

.header .home-button, .top-bar .home-button {
       float: right;
    margin-top: 14px;
    margin-right: 10px;
    padding: 0px;
    padding-left: 5px;
    width: 35px;
    border: solid 2px #3a92c8;
    height: 35px;
    outline: 0;
    color: #3a92c8;
}

    .header .home-button .home-icon, .top-bar .home-button .home-icon {
        background-image: url('images/home_icon.png');
        background-repeat: no-repeat;
        height: 21px;
        width: 24px;
    }

 #logout {
    height: 35px;
    box-sizing: border-box;
    padding: 4px;
    width: 35px;
    margin-right: 10px;
    margin-top: 13px;
     border: solid 2px #3a92c8;
     float: right;
}

.logout-icon {
    background-image: url('images/logout-icon.png');
    background-repeat: no-repeat;
    height: 21px;
    width: 24px;
}

.main-menu .menu-page {
    position: relative;
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
    box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
    border-radius: 0 0 8px 8px;
    background-color: #afd9f2;
    padding: 0;
    min-height: 300px;
    max-width: 600px;
    width:90%;
    margin: auto; /*margin-top: 120px;*/
    padding-top: 20px;
}

    .main-menu .menu-page .items {
        padding-bottom: 40px;
        padding-top: 40px;
    }

    .main-menu .menu-page i {
        color: white;
        text-decoration: none;
        line-height: 46px;
    }

    .main-menu .menu-page .btnMenu {
        display: block;
        margin: auto;
        max-width: 270px;
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 45px;
        line-height: 40px;
        text-align: left;
        background-color: #252222;
        line-height: 40px;
        border-radius: 6px;
        -moz-box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
        -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
        box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
        background-image: url('images/diagonal-white-bg.png');
    }

        .main-menu .menu-page .btnMenu:hover {
            cursor: pointer;
            text-decoration: none;
            background-color: #484646;
        }

.main-menu .menu-title {
    position: relative;
    background-color: #252222;
    padding: 0;
    height: 45px;
    max-width: 600px;
    width:90%;
    margin: auto;
    margin-top: 120px;
    background-image: url('images/diagonal-white-bg.png');
    -moz-box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
    -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
    box-shadow: 2px 2px 3px rgba(0,0,0,.4),inset 0 0 1px rgba(255,255,255,0);
}

    .main-menu .menu-title .teacher-zone-title {
        color: white;
        text-decoration: none;
        font-size: 14px;
        line-height: 45px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.main-menu .teacher-zone-btn-icon {
    background: url('images/teacherzone_icons.png') no-repeat 0px 0px;
    width: 36px;
    height: 36px;
    margin-top: 5px;
    margin-left: 8px;
    float: left;
    margin-right: 10px;
}

    .main-menu .teacher-zone-btn-icon.wb {
        background: url('images/teacherzone_icons.png') no-repeat -36px 0px;
    }

    .main-menu .teacher-zone-btn-icon.lms {
        background: url('images/teacherzone_icons.png') no-repeat -72px 0px;
    }


html .error-page .under-construction {
    background-image: url('images/under_construction_eng.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 181px;
    margin: auto;
    margin-top: 100px;
}

html.ecb .error-page .under-construction {
    background-image: url('images/under_construction_il.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 181px;
    margin: auto;
    margin-top: 100px;
}

.error-page .no-athorization {
    background-image: url('images/access_denied_message.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 181px;
    margin: auto;
    margin-top: 100px;
}

.error-page .access-denied {
    background-image: url('images/access_denied_message.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 181px;
    margin: auto;
    margin-top: 100px;
}

.error-page .internal-server-error {
    background-image: url('images/error_message.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 181px;
    margin: auto;
    margin-top: 100px;
}

.error-page .page-not-found {
    background-image: url('images/page_not_find_message.png');
    background-repeat: no-repeat;
    width: 600px;
    height: 181px;
    margin: auto;
    margin-top: 100px;
}

#word-app-error-page, #QR-error {
    position: relative;
    -webkit-box-shadow: 0 0 15px 2px #303030;
    box-shadow: 0 0 15px 2px #303030;
    border-radius: 8px;
    background-color: white;
    padding: 0;
    min-height: 300px;
    max-width: 600px;
    width: 80%;
    margin: auto;
    margin-top: 80px;
    padding-top: 20px;
}

    #word-app-error-page fieldset, #QR-error fieldset {
        width: 80%;
        margin: auto;
        min-width: 10px;
    }

    #word-app-error-page legend, #QR-error legend {
        color: #3a92c8;
    }

.no-wrapp {
    white-space: nowrap;
}

.footer{margin: auto; text-align: center; height: 40px; width: 100%; background-color: #252222; background-image: url(images/diagonal-white-bg.png); position: fixed; bottom: 0;z-index: 999;}
.footer-link-wrapper { display: inline-block;}
.footer-link-wrapper a {color: white; margin: 0 12px; line-height: 40px; text-decoration: underline; }
#google_translate_element {     position: relative;
    display: inline-block;
    float: right;
    padding-bottom: 10px;
    padding-top: 10px;
}
.goog-te-combo { width: 160px !important;}
.goog-te-banner-frame { display: none;}


/*.adult-controls { min-height: 100px;}
.adult-details #google_translate_element { top: 320px !important;}

.register-activation-code-controls { min-height: 85px;}
.register-activation-code #google_translate_element { top: 542px !important;}
.register-date-of-birth #google_translate_element { top: 270px !important;}*/

.alert-error { margin-bottom: 0px !important;}
.error-wrapper { min-height: 40px;margin-bottom: 10px;}

/*.register-coupon-code-controls { min-height: 85px;}
.register-coupon-code #google_translate_element { top: 376px !important;}*/

#reset-password-page .reset-password-button-wrapper { margin-top: 10px;}
/* Register - login - shelf */
.register-login { position: relative; -webkit-box-shadow: 0 0 15px 2px #303030; box-shadow: 0 0 15px 2px #303030; border-radius: 8px; background-color: white; padding: 0; min-height: 300px; max-width: 600px;
    width: 80%; margin: auto; margin-top: 80px; padding-top: 20px; }
    .register-login article.no-bg { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; }
    .register-login fieldset { width: 80%; margin: auto; min-width: 10px; }
    .register-login legend { color: #3a92c8;line-height: 22px; }

    .register-login .form-horizontal .controls .translation-tooltip div { white-space: nowrap; }
    .register-login .form-horizontal #tooltip-coupon-message { background-color: #ffffff; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); white-space: normal; }
        .register-login .form-horizontal #tooltip-coupon-message div { padding:0 5px 0 5px;}

 .register-login .form-horizontal .control-group label{ display: inline;margin: 0;margin-left: 10px;}
 .form-horizontal .controls { margin-left: 0px;}

 .register-login .form-horizontal .control-label {    display: inline-block;
    width: 140px;
    text-align: left;
    margin: 0;
    margin-bottom: 8px;
    float: left !important;
    padding-top: 5px !important;
 }
 .control-group input[type="text"],.control-group input[type="password"],.control-group select {
        width: 56%;
    }


@media (max-width: 905px) {
  .register-icon ,.popover,.login-icon{ display: none!important;}
}

@media (max-width: 578px) {
    .control-group input[type="text"],.control-group input[type="password"],.control-group select {
        width: 94%;
    }
    .register-login .form-horizontal .control-label { width: 90%;height: 30px;}
    .register-page-form .classcode-optional { height: 15px !important;margin-top: 0px !important;}
}

@media (max-width: 360px) {
    .register-page-form .register-email { height: 50px !important;}
}

@media (max-width: 450px) {
    .register-login { margin-top: 40px;}
}
.library-page { position: relative; margin: auto; margin-top: 35px; width: 100%; display: table; margin-bottom: 30px;}
    .library-page.one-shelf-only { margin-top: 105px !important; }
.header .logout { float: right; color:white; border:none; }
.header .logout.btn { float: right; margin-right: 25px; margin-top: 25px; border: none;  border: solid 2px #3a92c8; margin-top: 19px; height: 16px; line-height: 16px; color:#3a92c8; }
    .header .logout button.home-button { margin-right: 10px !important;}
    .library-page .shelf { width: 802px; /*height:152px;*/ margin:40px auto 20px auto; text-align:center; }
        .library-page .shelf.two-books-only { width:282px; }
        .library-page .shelf .shelf-bottom { background-color: #8dcff6; height: 20px;border: 2px solid #252222;margin-top: 2px;-moz-box-shadow:0px 4px 3px rgba(0, 0, 0, 0.3), inset 0px 0px 1px rgba(255, 255, 255, 0);-webkit-box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3), inset 0px 0px 1px rgba(255, 255, 255, 0);box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3), inset 0px 0px 1px rgba(255, 255, 255, 0); }
        .library-page .shelf .book { float: left; cursor: pointer; margin:auto; }

            .library-page .shelf .book .book-thumb-wrapper {padding: 0 11px 0 11px;width: 108px;height: 152px;position: relative;}
            .library-page .shelf .book .book-thumb-wrapper .book-ver-icon-wrapper {
                background-color: black;
                width: 25px;
                height: 25px;
                position: absolute;
                line-height: 25px;
                border: 2px solid #3a92c8;
                -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
                -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
                box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
                top: -8px;
                right: -2px;
                border-radius: 6px;
                cursor: default;
            }
            .library-page .shelf .book .book-thumb-wrapper .book-ver-icon {
                background-image: url(images/wv-icon.png);
                display: inline-block;
                width: 18px;
                height: 18px;
                vertical-align: middle;
                }
            .library-page .shelf .book:hover .book-thumb-wrapper img.book-thumb, .library-page .book .book-thumb-wrapper img.book-thumb:hover {-moz-box-shadow:0px 0px 3px 3px rgba(0, 0, 0, 0.3), inset 0px 0px 1px rgba(255, 255, 255, 0);-webkit-box-shadow:0px 0px 3px 3px rgba(0, 0, 0, 0.3), inset 0px 0px 1px rgba(255, 255, 255, 0);box-shadow:0px 0px 3px 3px rgba(0, 0, 0, 0.3), inset 0px 0px 1px rgba(255, 255, 255, 0); border: solid 2px white; }
            .library-page .shelf .book .book-thumb-wrapper img.book-thumb { width: 100%; height: 100%; border: 2px solid #252222;box-sizing: content-box; }
    /*.library-page .library-glasses-icon { position: absolute; background-image: url('images/glasses_icon.png'); width: 226px; height: 331px; left: -82px; top: 100px; }*/

.library-page .management-zone-icon-wrapper{}
.header #management-zone-icon{background-position: center;float: right;  background-image: url('images/management-icon.png');height: 30px; width: 30px;margin: 15px 16px 0 0;cursor: pointer;}
.header #management-zone-icon:hover{opacity: 0.7}
.header #user-settings-icon{background-position: center;float: right;  background-image: url('images/user-settings-icon.png');height: 30px; width: 30px;margin: 15px 16px 0 0;cursor: pointer;}
.header #user-settings-icon:hover{opacity: 0.7}

.library-page #no-books-message {
     width: 250px;
    margin: auto;
    background: white;
    text-align: center;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; 
}


html.ecb .demo-filter-container {
    display: none;
}
.library-sub-header input[type=text]::-ms-clear {
    display: none;
}
.library-sub-header {
    background-color: #487fa8;
    min-height: 25px;
    padding: 8px 10px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px; 
    padding: 8px 10px 4px 10px;
}

.library-sub-header .filters-container{
    width: 800px;
    margin: auto;
    text-align: center;
    max-width: 100%
}

.library-sub-header .search-filter-container{
    height: 30px;
    display: inline-block;
    width: 270px;
    max-width: 100%;
}

.library-sub-header .search-book{
    padding: 0;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border-bottom-right-radius:0;
    border-top-right-radius:0;
    width: 80%;
    text-indent: 6px;
}

.library-sub-header .search-book-icon-container{
    height: 100%;
    width: 20%;
    background-color: black;
    max-width: 40px;
    float: left;
    border-radius: 0 5px 5px 0;
    position: relative;
}
.library-sub-header .search-book-icon{
    background-image: url(images/search-icon.png);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.library-sub-header .demo-filter-container{
    display: inline-block;
    margin-left: 16px;
    margin-left: 5px;
    height: 30px;
    vertical-align: bottom;

}
.library-sub-header #demo-filter{
    float: left;
}

.library-sub-header .demo-filter-label{ 
    color: #ffffff;
    float: left;
    margin-left: 5px;
    font-size: 15px;
    margin-bottom: 0;
}

@media (min-width:849px) and (max-width:979px) {/* 5 books*/
    .library-page .shelf { width:672px; }
}
@media  (min-width:719px) and (max-width:848px) {/* 4 books*/
    .library-page .shelf { width: 542px; }
}
@media (min-width: 589px) and (max-width:718px) {/* 3 books*/
    .library-page .shelf { width: 412px; }
}
@media (max-width:588px) {/* 2 books*/
    .library-page .shelf { width: 282px; }
}





/* Class Code --------------------------------------------------------------------------*/
.lib-header #class-code-popup {
    width: 345px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

    .lib-header #class-code-popup .modal-body #class-code-label {
        width: 200px;
        float: left;
    }

    .lib-header #class-code-popup .modal-body #class-code-input {
        width: 100px;
        margin-top: -5px;
    }

    .lib-header #class-code-popup .modal-body #class-code-input.is-error {
        border: 1px solid #F78989;
        -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
        -ms-box-shadow: inset 0px 0px 2px #E91B1B;
        box-shadow: inset 0px 0px 2px #E91B1B;
    }

    .lib-header #class-code-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

    .lib-header #class-code-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

    .lib-header #class-code-popup .close:hover {
        -ms-opacity: 0.8;
        opacity: 0.8;
        -webkit-filter: alpha(opacity=80);
        -moz-filter: alpha(opacity=80);
        -o-filter: alpha(opacity=80);
        filter: alpha(opacity=80);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }

    .lib-header #class-code-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

.lib-header #classCode {
    margin-right: 15px;
}

.lib-header #class-code-popup .modal-body {
    height: 90px;
}

.lib-header #class-code-popup #class-code-modal-body-content {
    margin-top: 30px;
}

.lib-header #class-code-popup .modal-footer {
    padding: 12px 15px;
}

.lib-header #class-code-popup .modal-body #class-code-error-container,
.lib-header #class-code-popup .modal-body #class-code-success-container {
    width: 100%;
    margin: auto;
}

    .lib-header #class-code-popup .modal-body #class-code-error-container #class-code-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

    .lib-header #class-code-popup .modal-body #class-code-success-container #class-code-success-msg {
        width: 100%;
        color: green;
    }


/* Change Class --------------------------------------------------------------------------*/
.lib-header #change-class-popup {
    width: 380px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

    .lib-header #change-class-popup .modal-body #change-class-label {
        width: 230px;
        float: left;
    }

    .lib-header #change-class-popup .modal-body #change-class-input {
        width: 100px;
        margin-top: -5px;
    }

        .lib-header #change-class-popup .modal-body #change-class-input.is-error {
            border: 1px solid #F78989;
            -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
            -ms-box-shadow: inset 0px 0px 2px #E91B1B;
            box-shadow: inset 0px 0px 2px #E91B1B;
        }

    .lib-header #change-class-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

    .lib-header #change-class-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

        .lib-header #change-class-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

    .lib-header #change-class-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

.lib-header #classCode {
    margin-right: 15px;
}

.lib-header #change-class-popup .modal-body {
    height: 90px;
}

.lib-header #change-class-popup #change-class-modal-body-content {
    margin-top: 30px;
}

.lib-header #change-class-popup .modal-footer {
    padding: 12px 15px;
}

.lib-header #change-class-popup .modal-body #change-class-error-container,
.lib-header #change-class-popup .modal-body #change-class-success-container {
    width: 100%;
    margin: auto;
}

    .lib-header #change-class-popup .modal-body #change-class-error-container #change-class-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

    .lib-header #change-class-popup .modal-body #change-class-success-container #change-class-success-msg {
        width: 100%;
        color: green;
    }


/* Add Book --------------------------------------------------------------------------*/
.lib-header #add-book-popup {
    width: 380px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

    .lib-header #add-book-popup .modal-body #add-book-label {
        width: 185px;
        float: left;
    }

    .lib-header #add-book-popup .modal-body #add-book-input {
        width: 150px;
        margin-top: -5px;
    }

        .lib-header #add-book-popup .modal-body #add-book-input.is-error {
            border: 1px solid #F78989;
            -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
            -ms-box-shadow: inset 0px 0px 2px #E91B1B;
            box-shadow: inset 0px 0px 2px #E91B1B;
        }

    .lib-header #add-book-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

    .lib-header #add-book-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

        .lib-header #add-book-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

    .lib-header #add-book-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

    .lib-header #classCode {
        margin-right: 15px;
    }

    .lib-header #add-book-popup .modal-body {
        height: 90px;
    }

    .lib-header #add-book-popup #add-book-modal-body-content {
        margin-top: 30px;
    }

    .lib-header #add-book-popup .modal-footer {
        padding: 12px 15px;
    }

    .lib-header #add-book-popup .modal-body #add-book-error-container,
    .lib-header #add-book-popup .modal-body #add-book-success-container {
        width: 100%;
        margin: auto;
    }

    .lib-header #add-book-popup .modal-body #add-book-error-container #add-book-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

    .lib-header #add-book-popup .modal-body #add-book-success-container #add-book-success-msg {
        width: 100%;
        color: green;
    }

    .lib-header #drop-down-menu-container {
        float: right;
        margin-top: 14px;
        margin-right: 10px;
        cursor: pointer;
    }

    .lib-header #drop-down-menu-container .dropdown-menu{
        background-color: black;
        -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        overflow: hidden;
        background-color: #252222;
        border: solid 2px #3a92c8;
        -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-overflow-scrolling: touch;
        margin-top: 11px;
        margin-left: -146px;
        max-width: 198px;
    }


    .lib-header #drop-down-menu-container .dropdown-toggle {
        background-image: url(images/more-icon.png);
        width: 24px;
        height: 24px;
        display: inline-block;
        margin-top: 4px;
    }



    .lib-header #drop-down-menu-container .dropdown-toggle:hover {
        opacity: 0.5 !important;
        -moz-opacity: 0.50 !important;
    }

    .lib-header #drop-down-menu-container .dropdown-menu li a {
        color: white;
    }


    .lib-header #drop-down-menu-container .dropdown-menu li a:hover{
        clear: both;
    }


.lib-header .modal-header .modal-title { color: white;margin-top: -2px;}


.library-page .shelf .book .book-thumb-wrapper .suggested-book {
    width: 112px;
    height: 156px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
}

.library-page .shelf .book .book-thumb-wrapper .suggested-book a.add-suggested-btn {
    color: white;
    background-color: #252222;
    border: 2px solid #3992c8;
    padding: 3px 6px;
    border-radius: 4px;
    white-space: nowrap;
    top: 157px;
    left: 50%;
    font-size: 11px;
    transform: translate(-50%, -50%);
    position: absolute;
    text-decoration: none;
    box-shadow: rgb(33, 150, 243) 0px 0px 0px 0px inset, rgb(33, 150, 243) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}

.library-page .shelf .book .book-thumb-wrapper .suggested-book a.add-suggested-btn:hover {  background-color: #3e3a3a; }

@media (max-width: 480px) {
    #class-code-popup .modal-header .close, #change-class-popup .modal-header .close, #add-book-popup .modal-header .close{
        margin: 0;
    }
}

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

.bookCtrl .footer{ display: none;}

.book-page {
    width: 1024px;
    margin: auto;
    position: relative;
}

    .book-page .top-bar {
        position: fixed;
        margin-top: 0;
        margin: auto;
        top: 0px;
        z-index: 100;
        height: 59px;
        width: 1024px;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-bottom: solid 2px #3a92c8;
        -webkit-box-shadow: 0 0 15px 2px #303030;
        -moz-box-shadow: 0 0 15px 2px #303030;
        box-shadow: 0 0 15px 2px #303030;
    }




        .book-page .top-bar .book-ver-icon-wrapper {
            background-color: #3a92c8;
            width: 23px;
            height: 22px;
            position: relative;
            line-height: 19px;
            margin-right: -9px;
            float: left;
            border-bottom-right-radius: 4px;
        }

        .book-page .top-bar .book-ver-icon {
            background-image: url(images/wv-icon.png);
            display: inline-block;
            width: 18px;
            height: 17px;
            vertical-align: middle;
            margin-left: 2px;
        }


        .book-page .top-bar .logo {
            background-image: url('images/bb_logo.png');
            background-repeat: no-repeat;
            float: left;
            margin: 16px 0 5px 14px;
            width: 24px;
            height: 28px;
        }

html.ecb .book-page .top-bar .logo {
    background-image: url('images/ecb_logo.png');
    background-repeat: no-repeat;
    float: left;
    margin: 16px 0 5px 14px;
    width: 104px;
    height: 33px;
}

.book-page .top-bar .page-navigator .dropdown-menu {
    background-color: #252222;
    min-width: 280px;
    max-width: 420px;
    border: solid 2px #3a92c8;
    background-image: url('images/diagonal-white-bg.png');
    -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
    -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
    position: absolute;
    top: 53px;
    left: -262px;
    max-height: 550px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}

    .book-page .top-bar .page-navigator .dropdown-menu li a div.page-title {
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /*width: 210px;*/
        width: 100%;
    }

    .book-page .top-bar .page-navigator .dropdown-menu li a div.page-number {
        color: #3a92c8;
    }

html.no-touch .book-page .top-bar .page-navigator .dropdown-menu li a:hover, html.no-touch .page-navigator .dropdown-menu li a:focus, html.no-touch .dropdown-submenu:hover a, html.no-touch .dropdown-submenu:focus a {
    text-decoration: none;
    color: #050505;
    background-color: #000;
    background-image: none !important;
    opacity: 0.4 !important;
    -moz-opacity: 0.40 !important;
    filter: alpha(opacity=40) !important;
    cursor: pointer;
}

.book-page .top-bar .page-navigator {
    float: left;
    margin-top: 5px;
    margin-left: -10px;
}

    .book-page .top-bar .page-navigator .current-page {
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        background-color: #252222;
        border: solid 2px #3a92c8;
        height: 35px;
        line-height: 30px;
        text-indent: 10px;
        box-sizing: border-box;
        color: white;
        border-right: solid 1px #3a92c8;
        margin-top: 8px;
        margin-left: 16px;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
        -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        padding: 0;
    }

    .book-page .top-bar .page-navigator .btn-group {
        margin-top: 4px;
    }

        .book-page .top-bar .page-navigator .btn-group .dropdown-toggle, .book-page .top-bar .page-navigator .btn-group.open .dropdown-toggle, .book-page .top-bar .page-navigator .btn-group.open .btn.dropdown-toggle {
            text-shadow: 0 0px 0px rgb(255, 255, 255) !important;
            outline: none;
            margin-right: 2px;
            margin-top: 4px;
            border: solid 2px #3a92c8;
            border-left: 0;
            box-sizing: border-box;
            height: 35px;
            width: 39px;
            -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
            -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
            box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
            padding: 0;
        }

        .book-page .top-bar .page-navigator .btn-group .dropdown-toggle {
            border-radius: 0 !important;
        }

            .book-page .top-bar .page-navigator .btn-group .dropdown-toggle .caret {
                margin-top: 12px;
                border-top: 4px solid #3a92c8;
            }

    .book-page .top-bar .page-navigator .open .dropdown-menu {
        top: 48px !important;
        left: -246px !important;
    }

    .book-page .top-bar .page-navigator .dropdown-menu {
        top: 53px;
        left: -5555px;
        display: block !important;
    }

.book-page .top-bar .goto-page {
    float: left;
    margin-left: 25px;
    margin-top: 4px;
    height: 40px;
    color: white;
}

    .book-page .top-bar .goto-page #goto-page-number {
        margin-top: 10px;
        width: 70px;
        height: 23px;
    }

        .book-page .top-bar .goto-page #goto-page-number.error {
            border: solid 1px red;
        }

.book-page .top-bar .top-bar-btn {
    float: right;
    margin-right: 10px;
    color: white;
    border: none;
}

.top-bar-btn.btn {
    float: right;
    margin-right: 12px; /*margin-top: 25px;*/
    border: none;
    border: solid 2px #3a92c8;
    margin-top: 19px;
    height: 16px;
    line-height: 16px;
    color: #3a92c8;
}

.book-page .top-bar .back-to-library {
    float: right;
    margin-right: 10px;
    margin-top: 13px;
}

    .book-page .top-bar .back-to-library button, .book-page .top-bar-icon-btn {
        border: solid 2px #3a92c8;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        height: 35px;
        width: 35px;
        outline: 0;
        color: #3a92c8;
        padding: 0 10px 0 7px !important;
    }


        .book-page .top-bar .back-to-library button .back-icon {
            background-image: url('images/back-icon.png');
            background-repeat: no-repeat;
            width: 16px;
            height: 19px;
        }

.book-page .pages {
    padding-top: 50px;
}

html.no-touch .book-page .pages .page {
    -webkit-box-shadow: 0 0 15px 2px #303030;
    -moz-box-shadow: 0 0 15px 2px #303030;
    box-shadow: 0 0 15px 2px #303030;
}

.book-page .pages .page {
    z-index: 0;
    / / to set page sound player behind header display: none;
    background-color: white;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 0 15px 2px #303030;
    -moz-box-shadow: 0 0 15px 2px #303030;
    box-shadow: 0 0 15px 2px #303030;
}

    .book-page .pages .page .page-image {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .book-page .pages .page .page-image-cover {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .book-page .pages .page .page-loader {
        width: 54px;
        height: 55px;
        position: absolute;
    }

    .book-page .pages .page .regions .region {
        position: absolute;
        display: block;
        background: url(images/empty.png) repeat;
    }

html.no-touch .book-page .pages .page .regions .region:hover {
    cursor: pointer;
    background-color: rgba(243, 243, 12, 0.4);
    opacity: 0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.book-page .pages .page .regions .region .region-icon {
    width: 46px;
    height: 46px;
    background-repeat: no-repeat;
}

.book-page .pages .page .regions .region.small .region-icon {
    width: 32px;
    height: 32px;
}

.book-page .pages .page .regions .region.hit-area .region-icon {
    display: none;
}

.book-page .pages .page .regions .region .comment {
    position: absolute;
    top: -8px;
    left: -8px;
    background-color: black;
    border-radius: 50%;
    width: 22px;
    height: 22px;
}


    .book-page .pages .page .regions .region .comment .teacher-fb-icon {
        background-image: url(images/feedback-icon-white.jpg);
        background-repeat: no-repeat;
        width: 16px;
        height: 14px;
        display: block;
        line-height: 28px;
        color: #3a92c8;
        margin: auto;
        margin-top: 5px;
    }

    .book-page .pages .page .regions .region .comment.viewed {
        background-color: gray;
    }

#book-page-activity-iframe-div {
    display: none;
    z-index: 9500;
    height: 100%!important;
}

html.touch #book-page-activity-iframe-div {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    overflow: hidden;
}

    html.touch #book-page-activity-iframe-div .activity-iframe {
        border: 0;
        width: 100%;
        height: 100%;
    }

.ui-dialog.activityDialog {
    z-index: 9500;
    top: 50% !important;
    margin-left: 0px;
    margin-left: unset;
    width: 92%!important;
    max-width: 1024px !important;
    height: 90vh !important;
    max-height: 754px;
    transform: translate(-50%, -50%);
    left: 50% !important;
}

#book-page-youtube-popup {
    width: 650px;
    margin: 0;
    top: 10%;
    max-width: 90%;
    left: 50%;
    transform: translate(-50%, 0);
}

    #book-page-youtube-popup .modal-header {
        padding: 10px 0 10px 0;
        position: relative;
        border-bottom: none;
    }

    #book-page-youtube-popup .close {
        position: absolute;
        float: none;
        right: 10px;
        top: 2px;
    }

    #book-page-youtube-popup .modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

    #book-page-youtube-popup iframe {
        width: 640px;
        height: 390px;
        border: none;
        width: 100%;
    }

.book-page #QR-code-popup {
    width: 230px;
    margin: 0;
    left: 50%;
    transform: translate(-50%, 0);
    top: 16% ;
}

    /*#QR-code-popup     #image-player-popup    #text-player-popup */
    .book-page #QR-code-popup .modal-header, .book-page #image-player-popup .modal-header, .book-page #text-player-popup .modal-header, .wb-modal .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }


#no-fb-activities-popup .modal-header {
    cursor: default;
}

.book-page #QR-code-popup .close, .book-page #image-player-popup .close, .book-page #text-player-popup .close, .wb-modal .close {
    position: absolute;
    float: none;
    right: 3px;
    padding: 6px;
    top: -2px;
    color: white;
    opacity: 1;
    outline: none;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    text-shadow: none;
}

    .book-page #QR-code-popup .close:hover, .book-page #image-player-popup .close:hover, .book-page #text-player-popup .close:hover {
        opacity: 0.8;
        filter: alpha(opacity=80);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }

.book-page #QR-code-popup.modal-body, .book-page #image-player-popup.modal-body, .book-page #text-player-popup.modal-body {
    max-height: inherit !important;
    padding: 5px;
}


/*#image-player-popup */
#image-player-popup.modal, #text-player-popup.modal {
    text-align: center;
    left: 50%;
    top: 12%;
    z-index: 50;
    margin-left: 0px !important;
    margin-left: unset !important;
    transform: translate(-50%,0);
}

#image-player-popup.modal {
    max-width: 90%;
    min-width: 105px;
}




@media screen and (max-width: 767px) {
     #text-player-popup.modal {
        width: 90%;

    }
}

    #image-player-popup .modal-body, #text-player-popup.modal .model-body {
        padding: 1px;
        max-height: 354px !important;
        transition: all 1s ease;
    }

#image-player-popup .modal-header, #text-player-popup .modal-header {
    padding-right: 30px;
    text-align: left;
}

#image-player-popup .modal-footer {
    padding: 7px 9px 7px;
}

    #image-player-popup .modal-footer .next-prev-btn {
        background-color: #3a92c8;
        height: 34px;
        width: 34px;
        line-height: 34px;
        outline: none;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        border: 2px solid #ffffff;
        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 1px rgba(255, 255, 255, 0.7);
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 1px rgba(255, 255, 255, 0.7);
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 1px rgba(255, 255, 255, 0.7);
        padding: 0;
        padding-top: 1px;
    }

        #image-player-popup .modal-footer .next-prev-btn.disabled {
            opacity: 0.5;
            cursor: default;
        }

.no-touch #image-player-popup .modal-footer .next-prev-btn:hover {
    background-color: #3f7ebb;
}

#image-player-popup .modal-footer #next-img-btn {
    background: url(../content/images/image-player-sprite.png) no-repeat -20px 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 2px;
}

#image-player-popup .modal-footer .next-prev-btn.prev {
    float: left;
}

#image-player-popup .modal-footer .next-prev-btn.next {
    float: right;
}

#image-player-popup .modal-footer #prev-img-btn {
    background: url(../content/images/image-player-sprite.png);
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: -2px;
}

#image-player-popup .modal-header .modal-title {
    color: white;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#image-player-popup #image-wrapper {
    min-width: 100px;
    min-height: 100px;
}

#image-player-popup #img-loader {
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 50%;
    margin-top: -27px;
}

@media screen and (max-width: 5000px) {
    #image-player-popup {
        width: auto;
    }
}

@media screen and (min-width: 651px) and (max-width: 900px) {
    #image-player-popup {
        max-width: 80%;
        margin: auto;
    }
}

@media screen and (max-height: 650px) {
    #image-player-popup .modal-body {
        max-height: 240px !important;
    }
}

@media screen and (min-height: 651px) and (max-height: 800px) {
    #image-player-popup .modal-body {
        max-height: 420px !important;
    }
}

@media screen and (min-height: 801px) and (max-height: 1000px) {
    #image-player-popup .modal-body {
        max-height: 600px !important;
    }
}

@media screen and (min-height: 1001px) and (max-height: 5000px) {
    #image-player-popup .modal-body {
        max-height: 800px !important;
    }
}



/*#image-player-popup ---------------- End*/

#text-player-popup .modal-header {
    color: white;
    font-size: 18px;
    line-height: 20px;
}

#text-player-popup #curr-text {
    text-align: left;
}

.ui-widget-overlay {
    opacity: .8;
    -moz-opacity: 0.50;
    filter: alpha(opacity=50);
    background: none;
    background-color: black;
}

.ui-dialog {
    position: fixed !important;
    width: 980px !important;
    top: 70px /*!important*/;
    left: 50% /*!important*/;
    margin-left: -495px;
}

    .ui-dialog .ui-dialog-content {
        overflow: hidden;
        padding: 0;
        width: 100% !important;
        height: 554px !important;
    }

    .ui-dialog .ui-dialog-titlebar {
        display: none;
    }

        .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
            display: none;
        }

    .ui-dialog .activity-iframe {
        border: 0px;
        width: 100%;
        height: 100%;
    }

/* Class Code --------------------------------------------------------------------------*/
.book-page #class-code-popup {
    width: 345px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

    .book-page #class-code-popup .modal-body #class-code-label {
        width: 200px;
        float: left;
    }

    .book-page #class-code-popup .modal-body #class-code-input {
        width: 100px;
        margin-top: -5px;
    }

        .book-page #class-code-popup .modal-body #class-code-input.is-error {
            border: 1px solid #F78989;
            -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
            -ms-box-shadow: inset 0px 0px 2px #E91B1B;
            box-shadow: inset 0px 0px 2px #E91B1B;
        }

    .book-page #class-code-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

    .book-page #class-code-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

        .book-page #class-code-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

    .book-page #class-code-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

.book-page #classCode {
    margin-right: 15px;
}

.book-page #class-code-popup .modal-body {
    height: 90px;
}

.book-page #class-code-popup #class-code-modal-body-content {
    margin-top: 30px;
}

.book-page #class-code-popup .modal-footer {
    padding: 12px 15px;
}

.book-page #class-code-popup .modal-body #class-code-error-container,
.book-page #class-code-popup .modal-body #class-code-success-container {
    width: 100%;
    margin: auto;
}

    .book-page #class-code-popup .modal-body #class-code-error-container #class-code-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

    .book-page #class-code-popup .modal-body #class-code-success-container #class-code-success-msg {
        width: 100%;
        color: green;
    }


/* Change Class --------------------------------------------------------------------------*/
.book-page #change-class-popup {
    width: 380px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

    .book-page #change-class-popup .modal-body #change-class-label {
        width: 230px;
        float: left;
    }

    .book-page #change-class-popup .modal-body #change-class-input {
        width: 100px;
        margin-top: -5px;
    }

        .book-page #change-class-popup .modal-body #change-class-input.is-error {
            border: 1px solid #F78989;
            -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
            -ms-box-shadow: inset 0px 0px 2px #E91B1B;
            box-shadow: inset 0px 0px 2px #E91B1B;
        }

    .book-page #change-class-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

    .book-page #change-class-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

        .book-page #change-class-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

    .book-page #change-class-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

.book-page #classCode {
    margin-right: 15px;
}

.book-page #change-class-popup .modal-body {
    height: 90px;
}

.book-page #change-class-popup #change-class-modal-body-content {
    margin-top: 30px;
}

.book-page #change-class-popup .modal-footer {
    padding: 12px 15px;
}

.book-page #change-class-popup .modal-body #change-class-error-container,
.book-page #change-class-popup .modal-body #change-class-success-container {
    width: 100%;
    margin: auto;
}

    .book-page #change-class-popup .modal-body #change-class-error-container #change-class-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

    .book-page #change-class-popup .modal-body #change-class-success-container #change-class-success-msg {
        width: 100%;
        color: green;
    }


/* Add Book --------------------------------------------------------------------------*/
.book-page #add-book-popup {
    width: 380px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

    .book-page #add-book-popup .modal-body #add-book-label {
        width: 185px;
        float: left;
    }

    .book-page #add-book-popup .modal-body #add-book-input {
        width: 150px;
        margin-top: -5px;
    }

        .book-page #add-book-popup .modal-body #add-book-input.is-error {
            border: 1px solid #F78989;
            -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
            -ms-box-shadow: inset 0px 0px 2px #E91B1B;
            box-shadow: inset 0px 0px 2px #E91B1B;
        }

    .book-page #add-book-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

    .book-page #add-book-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

        .book-page #add-book-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

    .book-page #add-book-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

.book-page #classCode {
    margin-right: 15px;
}

.book-page #add-book-popup .modal-body {
    height: 90px;
}

.book-page #add-book-popup #add-book-modal-body-content {
    margin-top: 30px;
}

.book-page #add-book-popup .modal-footer {
    padding: 12px 15px;
}

.book-page #add-book-popup .modal-body #add-book-error-container,
.book-page #add-book-popup .modal-body #add-book-success-container {
    width: 100%;
    margin: auto;
}

    .book-page #add-book-popup .modal-body #add-book-error-container #add-book-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

    .book-page #add-book-popup .modal-body #add-book-success-container #add-book-success-msg {
        width: 100%;
        color: green;
    }



.karaoke-regions-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

    .karaoke-regions-container .k-region.show {
        opacity: 0.3;
        filter: alpha(opacity=30) !important;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    }

    .karaoke-regions-container .k-region {
        position: absolute;
        border-bottom: 2px solid;
        border-bottom-color: orange;
        box-sizing: border-box;
        opacity: 0;
        filter: alpha(opacity=0) !important;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        position: absolute;
        background-color: yellow;
        cursor: pointer;
    }

#top-bar-karaoke-player-container {
    float: left;
    margin-left: -4px;
    margin-top: 13px;
    position: static;
    display: block;
}

#karaokeOnOffBtn {
    background: url(images/karaoke-highlight-sprite.png) no-repeat -4px -3px;
    width: 24px;
    height: 23px;
    float: left;
    margin-left: 9px;
    font-size: 12px;
    margin-top: 3px;
    cursor: pointer;
}

    #karaokeOnOffBtn.karaokeOff {
        background: url('images/karaoke-highlight-sprite.png') no-repeat -36px -3px;
    }

/* advanced sound player overrides*/
#top-bar-karaoke-player-container .jp-audio div.jp-type-single div.jp-interface {
    height: 31px;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

#top-bar-karaoke-player-container div.jp-audio ul.jp-controls {
    padding: 2px 0px 0 10px;
}

#top-bar-karaoke-player-container div.jp-audio div.jp-type-single div.jp-progress {
    top: 7px;
    height: 10px;
    left: 115px;
    width: 110px;
}

#top-bar-karaoke-player-container div.jp-audio div.jp-type-single div.jp-time-holder {
    top: 17px;
    left: 109px;
    width: 120px;
}

#top-bar-karaoke-player-container a.jp-play, #top-bar-karaoke-player-container a.jp-pause {
    width: 23px;
    height: 23px;
    background-size: 100%;
}

#top-bar-karaoke-player-container a.jp-stop, a.jp-previous, #top-bar-karaoke-player-container a.jp-next {
    width: 23px;
    height: 23px;
    margin-top: 0px;
    background-size: 100%;
}

#top-bar-karaoke-player-container a.jp-stop {
    margin-left: 5px;
}

#top-bar-karaoke-player-container div.jp-audio {
    width: 237px;
}

.book-page .top-bar #drop-down-menu-container {
    float: right;
    margin-top: 14px;
    margin-right: 10px;
    cursor: pointer;
}

    .book-page .top-bar #drop-down-menu-container .dropdown-menu, .book-page .top-bar #family-books-menu-container .dropdown-menu, .book-page .top-bar #teacher-fb-menu-container .dropdown-menu {
        background-color: black;
        -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        overflow: hidden;
        background-color: #252222;
        border: solid 2px #3a92c8;
        -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px rgba(255, 255, 255, 0);
        -webkit-overflow-scrolling: touch;
        margin-top: 11px;
        margin-left: -146px;
        max-width: 198px;
    }

.book-page .top-bar #teacher-fb-menu-container .dropdown-menu {
    overflow-y: auto;
    max-height: 550px;
}

.book-page .top-bar #drop-down-menu-container .dropdown-toggle {
    background-image: url(images/more-icon.png);
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-top: 4px;
}




.book-page #family-books-menu-container .family-book-btn, .book-page #teacher-fb-menu-container .teacher-fb-btn {
    border: solid 2px #3a92c8;
    height: 23px;
    line-height: 23px;
    color: #3a92c8;
}

.book-page #teacher-fb-menu-container .teacher-fb-btn-icon {
    position: static;
}



.book-page #family-books-menu-container .family-book-btn {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
}




.book-page #teacher-fb-menu-container .teacher-fb-icon {
    background-image: url('images/feedback-icon.png');
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
}

.book-page #teacher-fb-menu-container .teacher-fb-btn .teacher-fb-icon {
    display: inline-block;
    vertical-align: middle;
}

.book-page #teacher-fb-menu-container .teacher-fb-badge {
    background-color: #3a92c8;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    font-size: 11px;
    position: absolute;
    top: -9px;
    right: -10px;
    line-height: 21px;
}





.book-page .top-bar #family-books-menu-container .dropdown-menu {
    margin-top: 15px;
    margin-left: -62px;
    float: none;
    max-width: none;
    width: 199px;
    overflow-x: hidden;
}

.book-page .top-bar #teacher-fb-menu-container .dropdown-menu {
    margin-top: 15px;
    margin-left: -45px;
    float: none;
    max-width: none;
    width: 248px;
}

.book-page .top-bar #teacher-fb-menu-container.wb-icon-mode .dropdown-menu {
    margin-left: -217px;
}


.book-page #family-books-menu-container, .book-page #teacher-fb-menu-container {
    float: right;
    margin-right: 12px;
    margin-top: 13px;
    color: #3a92c8;
}

.book-page .top-bar.no-dropdown-menu #teacher-fb-menu-container {
}

    .book-page .top-bar.no-dropdown-menu #teacher-fb-menu-container.wb-icon-mode {
        margin-top: 15px;
        margin-right: 26px;
    }



.book-page #family-books-menu-container .btn-group, .book-page #teacher-fb-menu-container .btn-group {
    font-size: 14px;
}


.book-page .top-bar #family-books-menu-container .dropdown-menu li, .book-page .top-bar #teacher-fb-menu-container .dropdown-menu li {
    color: white;
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

    .book-page .top-bar #family-books-menu-container .dropdown-menu li:hover, .book-page .top-bar #teacher-fb-menu-container .dropdown-menu li:hover {
        background-color: #000;
        background-image: none !important;
        opacity: 0.4 !important;
        -moz-opacity: 0.40 !important;
        filter: alpha(opacity=40) !important;
        cursor: pointer;
    }

    .book-page .top-bar #family-books-menu-container .dropdown-menu li a:hover {
        background-color: #000;
        background-image: none !important;
        opacity: 0.4 !important;
        -moz-opacity: 0.40 !important;
        filter: alpha(opacity=40) !important;
        cursor: pointer;
    }




.book-page .top-bar #drop-down-menu-container .dropdown-toggle:hover {
    opacity: 0.5 !important;
    -moz-opacity: 0.50 !important;
}

.book-page .top-bar #drop-down-menu-container .dropdown-menu li a {
    color: white;
}


    .book-page .top-bar #drop-down-menu-container .dropdown-menu li a:hover,
    /*imageSlider overrides*/
    #imageSlider-wrapper {
        clear: both;
    }

#imageSlider.modal-dialog {
    left: 0;
    top: -50px;
    outline: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    display: inline-block;
    max-width: 900px;
    z-index: 1020;
    text-align: center;
}

#imageSlider .fade.in {
    opacity: 1;
    filter: alpha(opacity=100) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#imageSlider .fade {
    opacity: 0;
    filter: alpha(opacity=0) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

#imageSlider.modal-dialog {
    left: 0;
    top: -50px;
    outline: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    display: inline-block;
    max-width: 900px !important;
    z-index: 1020;
}

#imageSlider .modal-body {
    max-height: 360px !important;
    overflow: auto;
    padding: 0;
    z-index: 1;
    padding: 0px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

#imageSlider .modal-header {
    cursor: move;
    padding: 6px;
    color: white;
    border-bottom: 2px solid #FFFFFF;
    background-color: #252222;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

#imageSlider .close {
    width: 32px;
    height: 32px;
    margin-top: -4px;
    background: transparent;
    color: white;
    border: 0;
    cursor: pointer;
    opacity: 1;
    filter: alpha(opacity=100) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    font-family: Helvetica, Arial, sans-serif;
    float: right;
}

#imageSlider .modal-title {
    text-align: left;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    margin-left: 10px;
}

#imageSlider .modal-footer button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    height: 32px;
    padding: 6px 8px;
    background-color: #252222;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    border: 2px solid #ffffff;
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 1px rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 1px rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 0px 1px rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

    #imageSlider .modal-footer button.modal-prev {
        float: left;
    }

    #imageSlider .modal-footer button .icon {
        display: block;
        background: url("images/arrows.png") no-repeat -20px 0;
        width: 16px;
        height: 16px;
    }

    #imageSlider .modal-footer button.modal-prev .icon {
        background: url("images/arrows.png") no-repeat 0px 0;
        margin-left: -2px;
    }

    #imageSlider .modal-footer button.modal-next .icon {
        margin-right: -2px;
    }

#imageSlider .modal-footer {
    margin-top: 0px;
    padding: 6px 10px 6px;
}

@media screen and (max-width: 5000px) {
    #imageSlider.modal-dialog {
        width: auto;
    }
}

@media screen and (max-height: 465px) {
    #imageSlider .modal-body {
        max-height: 240px !important;
    }
}

@media screen and (min-height: 651px) and (max-height: 800px) {
    #imageSlider .modal-body {
        max-height: 500px !important;
    }
}

@media screen and (min-height: 801px) and (max-height: 1000px) {
    #imageSlider .modal-body {
        max-height: 600px !important;
    }
}

@media screen and (min-height: 1001px) and (max-height: 5000px) {
    #imageSlider .modal-body {
        max-height: 800px !important;
    }
}

.no-touch #imageSlider .close:hover {
    opacity: 0.8;
    filter: alpha(opacity=80) !important;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    cursor: pointer;
}

.no-touch #imageSlider .modal-footer button:hover {
    color: white;
    background-color: #353232;
}



@media (max-width: 1024px) {
    .book-page {
        width: 100%;
    }

        .book-page .top-bar {
            width: 100%;
            left: 0px;
        }
}

@media (max-width: 480px) {
    #QR-code-popup .modal-header .close, #class-code-popup .modal-header .close, #change-class-popup .modal-header .close, #add-book-popup .modal-header .close, #text-player-popup .modal-header .close, #image-player-popup .modal-header .close {
        margin: 0;
    }
}

@media screen and (max-width: 820px) {
    .book-page .top-bar .logo {
        display: none;
    }

    .book-page .top-bar .page-navigator {
        margin-left: 0;
    }

        .book-page .top-bar .page-navigator .open .dropdown-menu {
            left: -201px !important;
        }

    .book-page #family-books-menu-container .family-book-btn {
        max-width: 120px;
    }
}

@media screen and (max-width: 600px){
    .book-page #teacher-fb-menu-container .teacher-fb-btn {padding: 4px 8px;}
    .book-page #teacher-fb-menu-container .teacher-fb-btn .teacher-fb-title {display:none;}
    .book-page #family-books-menu-container .family-book-btn {padding: 4px;}
    .book-page #teacher-fb-menu-container .dropdown-menu { left: -127px !important;}

}

@media screen and (max-width: 450px) {
    .book-page .top-bar .page-navigator {
        margin-left: -10px;
    }

        .book-page .top-bar .page-navigator .current-page {
            width: 140px;
        }

        .book-page .top-bar .page-navigator .open .dropdown-menu {
            left: -151px !important;
        }

    .book-page #teacher-fb-menu-container .teacher-fb-btn {padding: 4px 8px;}
    .book-page #teacher-fb-menu-container .teacher-fb-btn .teacher-fb-title {display:none;}
    .book-page #family-books-menu-container .family-book-btn {padding: 4px;}
    .book-page #teacher-fb-menu-container .dropdown-menu { left: -127px !important;} 
}


@media screen and (max-width: 365px) {


    .book-page .top-bar .page-navigator .current-page {
        width: 96px;
    }

    .book-page .top-bar .page-navigator .open .dropdown-menu {
        left: -102px !important;
    }
}


.book-page .modal-header .modal-title { color: white;margin-top: -2px;}
/*#region Login */
/*#login-page { margin:0; padding:0;}*/
#login-page #add-book-button {
    margin-right: 8px;
}
#login-page #register-button { margin-right: 8px; }
#login-page .login-icon { background-image: url('images/login_icon.png'); width: 185px; height: 224px; left: -122px; top: 100px; position: absolute; }

#login-page .form-horizontal .controls { position: relative; }
    #login-page .form-horizontal .new-user { margin-top: 32px; }
     .bb #login-page .form-horizontal .new-user { margin-top: 20px; }
        #login-page .form-horizontal .forgot-password{ margin-top: 18px; }
#login-page .form-horizontal .incorrect-username-password {
     z-index:2000;
    text-align: center;
    padding: 8px;
}
    
/*#endregion Login */

.ecb .popover-content { direction: rtl;text-align: right; }


#login-button {background: #3b8ec2;color: white;text-shadow: none;}
#login-button:hover {background: #51a5da;}
/*#region Login */
.register-page #register-back-button, .register-page-form #register-back-button,
.register-page-form #register-dateofbirth-continue-button,
.register-page-form #register-button {
    margin-right: 8px;
}


.register-page-form {
    padding-bottom: 12px;
    margin-bottom: 20px;
}

    .register-page-form .register-icon, .register-page .register-icon {
        background-image: url('images/register_icon.png');
        width: 349px;
        height: 350px;
        left: -196px;
        top: 78px;
        position: absolute;
        z-index: 100;
    }

    .register-page-form .control-group {
        position: relative;
        z-index: 101;
    }

    .register-page-form .confirm-policy-checkbox {
        margin-left: 10px;
        margin-top: 0px;
    }
/*#endregion Login */

.language-change-page {
    position: relative;
    -webkit-box-shadow: 0 0 15px 2px #303030;
    box-shadow: 0 0 15px 2px #303030;
    border-radius: 8px;
    background-color: white;
    padding: 0;
    min-height: 300px;
    width: 600px;
    margin: auto;
    margin-top: 120px;
    padding-top: 20px;
}

#language-changed-lbl {
    text-align: center;
    font-size: 18px;
    margin-top: 60px;
}

#content {
    height: 100%;
}

.article-container {
    height: calc(100% - 60px);
    overflow-y: auto;
}

.not-visible{visibility: hidden;}
.register-page-form #register-date-of-birth-container #register-date-of-birth-error-msg {
    color: red;
    float: left;
}
.register-page-form .register-adult-dob-dropdown {
    width: 26%;
    margin: 11px 10px 20px 0;
}

.register-page-form #register-date-of-birth-title {
    cursor: default;
}

.register-page-form .classcode-optional {
    clear: both;
    line-height: 0px;
    font-size: 12px;
    margin-top: 4px !important;
    color: #3a92c8;
}
#recover-confirmation-page .form-horizontal .control-label,#reset-password-page .form-horizontal .control-label {
    cursor: default
}
#recover-confirmation-page #min-max-length-error-message.alert ,#recover-confirmation-page #password-do-not-match-error-message.alert {
    padding: 3px;
    margin-bottom: -12px;
        margin-top: 10px;
}

.register-page-form .shop-info-header { margin-bottom: 12px;}
.register-page-form .form-horizontal .shop-info-inputs .control-group  { margin-bottom: 12px;}
.register-page-form .shop-info-footer { margin-bottom: 12px;}

.reset-password { position: relative; -webkit-box-shadow: 0 0 15px 2px #303030; box-shadow: 0 0 15px 2px #303030; border-radius: 8px; background-color: white; padding: 0; min-height: 300px; width: 600px; margin: auto; margin-top: 120px; padding-top: 20px; }
    .reset-password article.no-bg { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; }
    .reset-password fieldset { width: 400px; margin: auto; }
    .reset-password legend { color: #3a92c8; }

    .reset-password .form-horizontal .controls .translation-tooltip div { white-space: nowrap; }
    .reset-password .form-horizontal #tooltip-coupon-message { background-color: #ffffff; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); white-space: normal; }
        .reset-password .form-horizontal #tooltip-coupon-message div { padding:0 5px 0 5px;}

         .reset-password .form-horizontal .control-label { text-align: left;}
#reset-password-page #contiune-btn { margin-right: 8px;}
#recover-confirmation-page #reset-btn { margin-right: 8px;}

@media (max-width: 480px) {
    .reset-password .form-horizontal .control-label { float: left; width: 160px; padding-top: 5px; }
    .reset-password .form-horizontal .controls { margin-left: 180px; }
}

@media (max-width: 600px) {
    .reset-password { width: 90%; }
}

#management-page-reset-password .form-horizontal .control-group{ margin: 5px 0;}

#management-page-reset-password article { position: relative; -webkit-box-shadow: 0 0 15px 2px #303030; box-shadow: 0 0 15px 2px #303030; border-radius: 8px; background-color: white; padding: 0; min-height: 300px; max-width: 655px;width: 80%; margin: auto; margin-bottom: 60px; margin-top: 80px; padding-top: 20px; }
#management-page-reset-password article.no-bg { background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; }
#management-page-reset-password fieldset { width: 92%; margin: auto; min-width: 10px; }
#management-page-reset-password legend { color: #3a92c8;line-height: 22px; }

#management-page-reset-password #find-by-username, #management-page-reset-password  #find-by-activation-code, #management-page-reset-password  #find-by-email , #management-page-reset-password  #find-by-class-code  {float: left; margin: 8px 10px auto auto;}
#management-page-reset-password .find-by-label{margin: 4px 20px auto auto; float: left;}
#management-page-reset-password #find-by-text { margin-top: 5px;width: 90% !important;}
#management-page-reset-password .search-by-label-wrapper { display: inline-block;}
#management-page-reset-password .search-by-wrapper { display: inline-block;}
#management-page-reset-password .search-by-group-wrapper { text-align: center;}

#management-page-reset-password .search-by-label { font-weight: bold;}

#management-page-reset-password .search-container {display: inline-block;vertical-align: text-bottom;margin-left: 8px;}

#management-page-reset-password .action-group{margin: 5px}
#management-page-reset-password .controls.disabled label,#management-page-reset-password .controls.disabled input[type="text"]{opacity: .4;background-color: #ffffff;}
#management-page-reset-password .controls.disabled input[type="text"]{cursor: default}
#management-page-reset-password .controls.disabled input[type="text"]:focus{border:1px solid #cccccc;box-shadow: none}

#management-page-reset-password #search-result{ display: none;}
#management-page-reset-password #search-result #no-match-found{text-align: center;color: red;font-weight: bold;display: none;}
#management-page-reset-password #search-result #match-found{display: none; padding: 0 20px;}
#management-page-reset-password #search-result #match-found .result-contain-username{white-space: nowrap;overflow: hidden;box-sizing:border-box;text-overflow: ellipsis;margin-bottom: 5px;height: 30px;}
#management-page-reset-password #search-result #match-found .result-contain-books{margin-bottom: 5px;}
#management-page-reset-password #search-result #match-found  .result-contain{/*float: left;width: 48%*/margin-right: 5px; white-space: nowrap;overflow: hidden;box-sizing:border-box;text-overflow: ellipsis;margin-bottom: 5px;height: 30px;}
#management-page-reset-password #search-result #match-found span{width: 200px;display: inline-block;}

#management-page-reset-password #successfully-reset-contain{ display: none;font-weight: bold;text-align: center;padding-top: 40px;}
#management-page-reset-password.successfully-reset #successfully-reset-contain .action-group{margin:25px;}
#management-page-reset-password.successfully-reset #successfully-reset-contain{ display: block;}
#management-page-reset-password.successfully-reset #successfully-reset-contain #successfully-reset-contain-message{ display: block;margin: auto;text-align: center}
#management-page-reset-password.successfully-reset #successfully-reset-contain #successfully-reset-contain-message .display-label{ font-weight: normal}
#management-page-reset-password.successfully-reset #successfully-reset-contain .user-reset-name{width: 100%; white-space: nowrap;overflow: hidden;box-sizing: border-box;text-overflow: ellipsis;}
#management-page-reset-password.successfully-reset #search-wrapper {
    display: none;
}
#management-page-reset-password.successfully-reset .label-container{     margin: auto;margin-top: 20px;margin-left: 167px;}
#management-page-reset-password.successfully-reset .first-name-container{  padding: 0 0 10px 0;}
#management-page-reset-password.successfully-reset .username-container{    padding: 10px 0 10px 0}

#management-page-reset-password #search-result.nomatch, #management-page-reset-password #search-result.match{display:block}
#management-page-reset-password #search-result.nomatch #no-match-found{display:block}
#management-page-reset-password #search-result.match #match-found{ display:block;}
#management-page-reset-password #search-result .reset-button-wrapper{ clear: both;padding: 8px 0 20px 0;}
#management-page-reset-password #search-result .reset-button-wrapper .btn {margin: 4px 0;}
#management-page-reset-password.successfully-reset .reset-label-value {white-space: nowrap;max-width:218px;overflow: hidden;margin-left: 5px;vertical-align:  middle;text-overflow: ellipsis;display: inline-block;}

#management-page-reset-password #search-result #match-found .label-header { display: inline-block;width: 100px;vertical-align: top;font-weight: bold;}
#management-page-reset-password #search-result #match-found .inputs { display: inline-block;}
#management-page-reset-password #search-result #match-found .books-wrapper {
    max-height: 100px;
    overflow: auto;
    width: calc(100% - 104px);
}
#management-page-reset-password #search-result #match-found .book-wrapper { width: 430px;}
#management-page-reset-password #search-result #match-found .book-wrapper .bookName {
    width: calc(100% - 81px);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

#management-page-reset-password #search-result #match-found .book-wrapper .bookExpiryDate {width: 70px;text-align: right;vertical-align: top;}
#management-page-reset-password #search-result #match-found .update-user-details-error-message { visibility:hidden;height: 40px;color: red;text-align: center;width: 100%;margin-top: 8px;}

.visShow { visibility: visible !important;}
.visHide { visibility: hidden !important;}

#management-page-reset-password #search-result #match-found .codes-wrapper {
    max-height: 100px;
    overflow: auto;
    width: calc(100% - 104px);
}

#management-page-reset-password #search-result #match-found #not-registered { text-align: center;color: red;font-weight: bold;}
#management-page-reset-password #search-result #match-found #not-registered { display: none;}
#management-page-reset-password #search-result #match-found.not-registered #not-registered { display: block;margin-bottom: 20px;}
#management-page-reset-password #search-result #match-found.not-registered .result-contain-username { display: none;}
#management-page-reset-password #search-result #match-found.not-registered .result-contain { display:none}
/*#management-page-reset-password #search-result #match-found.not-registered .result-contain-books { display:none}*/
#management-page-reset-password #search-result #match-found.not-registered .reset-button-wrapper { display: none;}



#management-page-reset-password #extend .action-group { margin-top: 23px;}
#management-page-reset-password #myFile {line-height: 18px;width: 90%;margin-top: 2px;outline: none;}
#management-page-reset-password #extend-code-message { text-align: center;margin-top: 10px;height: 30px;}
#management-page-reset-password #extend-code-message.upload-success {color: green;}
#management-page-reset-password #extend-code-message.upload-error {color: red;}
#management-page-reset-password #img-loader { display: none;}
#management-page-reset-password #img-loader {position: absolute;left: 50%;margin-left: -30px;top: 50%;margin-top: -44px;}
#management-page-reset-password .blanket {
    display: block;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    filter: alpha(opacity=20);
    background-color: #000;
    position: fixed;
    display: none;
    top: 0;
    left: 0
}

#management-page-reset-password .nav-tabs .nav-item.singleTab .active {
    border: none;
    border-bottom: 1px solid #ddd;
    color: #3a92c8;
    font-size: 21px;
    padding: 0;
}

@media screen and (max-width: 765px) {
    #management-page-reset-password.successfully-reset .label-container {margin-left: 20%; }
#management-page-reset-password.successfully-reset .reset-label-value {width:165px;}
} 

#management-page-reset-password #change-class-popup #change-class-reset-btn {
    background-position: center;
    float: right;
    background-image: url(images/reset-icon.png);
    height: 23px;
    width: 23px;
    margin: -1px 90px 0 0;
    cursor: pointer;
}

#management-page-reset-password .modal-header .modal-title { color: white;margin-top: -2px;}
#management-page-reset-password #change-class-popup {
    width: 500px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

#management-page-reset-password #change-class-popup .modal-body #change-class-label {
        width: 230px;
        float: left;
    }

#management-page-reset-password #change-class-popup .modal-body #change-class-input {
        width: 100px;
        margin-top: -5px;
    }

#management-page-reset-password #change-class-popup .modal-body #change-class-input.is-error {
            border: 1px solid #F78989;
            -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
            -ms-box-shadow: inset 0px 0px 2px #E91B1B;
            box-shadow: inset 0px 0px 2px #E91B1B;
        }

#management-page-reset-password #change-class-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

#management-page-reset-password #change-class-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

#management-page-reset-password #change-class-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

#management-page-reset-password #change-class-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

#management-page-reset-password #classCode {
    margin-right: 15px;
}

#management-page-reset-password #change-class-popup .modal-body {
    height: 250px;
}

#management-page-reset-password #change-class-popup #change-class-modal-body-content {
    margin-top: 30px;
}

#management-page-reset-password #change-class-popup .modal-footer {
    padding: 12px 15px;
}

#management-page-reset-password #change-class-popup .modal-body #change-class-error-container,
#management-page-reset-password #change-class-popup .modal-body #change-class-success-container {
    width: 100%;
    margin: auto;
}

#management-page-reset-password #change-class-popup .modal-body #change-class-error-container #change-class-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

#management-page-reset-password #change-class-popup .modal-body #change-class-success-container #change-class-success-msg {
        width: 100%;
        color: green;
    }

#management-page-reset-password #change-class-popup .modal-body #change-class-search-result-container .change-class-header {
    display: inline-block;
    width: 100px;
    vertical-align: top;
    font-weight: bold;
}

#management-page-reset-password #change-class-popup .modal-body #change-class-search-result-container .change-class-info {
    display: inline-block;
}

#management-page-reset-password .search-result-change-class-wrapper .change-class-components-wrapper { display: inline-block;}

#management-page-reset-password .search-result-change-class-wrapper .change-class-components-wrapper .component-wrapper .component-name {width: 300px;display: inline-block;}

#management-page-reset-password .search-result-change-class-wrapper .change-class-components-wrapper {
    max-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100% - 104px);
}

#management-page-reset-password .user-settings-data-wrapper { display: block !important;}
#management-page-reset-password .user-settings-data-wrapper #match-found { display: block !important;}


#management-page-reset-password .user-settings-data-wrapper #user-settings-error-container,
#management-page-reset-password .user-settings-data-wrapper #user-settings-success-container {
    width: 100%;
    margin: auto;
}

#management-page-reset-password .user-settings-data-wrapper #user-settings-error-container #user-settings-error-msg {
    width: 100%;
    color: red;
    font-size: 12px;
}

#management-page-reset-password .user-settings-data-wrapper #user-settings-success-container #user-settings-success-msg {
    width: 100%;
    color: green;
}


/************class management **************/
#classes-data-wrapper .autocomplete-input { width: 350px;}
#classes-data-wrapper .input-container .input-header{ font-weight: bold;display: inline-block;width: 120px;}
#classes-data-wrapper .input-container { margin-bottom: 10px;}

/************* school popup****************************/


#management-page-reset-password #school-popup {
    width: 550px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

#management-page-reset-password #school-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

#management-page-reset-password #school-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        margin: 0;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

#management-page-reset-password #school-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

#management-page-reset-password #school-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

#management-page-reset-password #school-popup .modal-body {
    height: 170px;
}

#management-page-reset-password #school-popup #school-modal-body-content {
    margin-top: 30px;
}

#management-page-reset-password #school-popup .modal-body .school-input .label-header {
    width: 100px;
    display: inline-block;
}

#management-page-reset-password #school-popup .modal-body .school-input .inputs {
    display: inline-block;
}

#management-page-reset-password #school-popup .modal-body .school-input .inputs input {
    width: 380px;
}


#management-page-reset-password #school-popup .modal-footer {
    padding: 12px 15px;
}

#management-page-reset-password #school-popup .modal-body #school-error-container,
#management-page-reset-password #school-popup .modal-body #school-success-container {
    width: 100%;
    margin: auto;
}

#management-page-reset-password #school-popup .modal-body #school-error-container #school-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

#management-page-reset-password #school-popup .modal-body #school-success-container #school-success-msg {
        width: 100%;
        color: green;
    }


/************* teacher popup****************************/


#management-page-reset-password #teacher-popup {
    width: 550px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

#management-page-reset-password #teacher-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

#management-page-reset-password #teacher-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        margin: 0;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

#management-page-reset-password #teacher-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

#management-page-reset-password #teacher-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

#management-page-reset-password #teacher-popup .modal-body {
    height: 280px;
}

#management-page-reset-password #teacher-popup #teacher-modal-body-content {
    margin-top: 0px;
}

#management-page-reset-password #teacher-popup #teacher-modal-body-content .input-header {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 10px;
}

#management-page-reset-password #teacher-popup #teacher-modal-body-content #teacher-existing-autocomplete {
    margin-left: 104px;
    width: 384px;
}

#management-page-reset-password #teacher-popup .modal-body .teacher-input .label-header {
    width: 100px;
    display: inline-block;
}

#management-page-reset-password #teacher-popup .modal-body .teacher-input .inputs {
    display: inline-block;
}

#management-page-reset-password #teacher-popup .modal-body .teacher-input .inputs input {
    width: 380px;
}


#management-page-reset-password #teacher-popup .modal-footer {
    padding: 12px 15px;
}

#management-page-reset-password #teacher-popup .modal-body #teacher-error-container,
#management-page-reset-password #teacher-popup .modal-body #teacher-success-container {
    width: 100%;
    margin: auto;
}

#management-page-reset-password #teacher-popup .modal-body #teacher-error-container #teacher-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

#management-page-reset-password #teacher-popup .modal-body #teacher-success-container #teacher-success-msg {
        width: 100%;
        color: green;
    }


#management-page-reset-password #teacher-popup #teacher-unlink-btn {
    float: left;
}

.ui-autocomplete { z-index: 9999 !important;}


/************* teacher class popup****************************/


#management-page-reset-password #teacher-class-popup {
    width: 550px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

#management-page-reset-password #teacher-class-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

#management-page-reset-password #teacher-class-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        margin: 0;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

#management-page-reset-password #teacher-class-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

#management-page-reset-password #teacher-class-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

#management-page-reset-password #teacher-class-popup .modal-body {
    height: 360px;
}

#management-page-reset-password #teacher-class-popup #teacher-class-modal-body-content {
    margin-top: 0px;
}

#management-page-reset-password #teacher-class-popup .modal-body .class-input .label-header {
    width: 100px;
    display: inline-block;
}

#management-page-reset-password #teacher-class-popup .modal-body .class-input.components {
    margin-bottom: 30px;
    min-height: 100px;
}
#management-page-reset-password #teacher-class-popup .modal-body .class-input.components .label-header {
    vertical-align: top;
}
#management-page-reset-password #teacher-class-popup .modal-body .class-input.qty .label-header {
    width: 200px;
}


#management-page-reset-password #teacher-class-popup .modal-body .class-input .inputs {
    display: inline-block;
}

#management-page-reset-password #teacher-class-popup .modal-body .class-input .inputs input {
    width: 380px;
}

#management-page-reset-password #teacher-class-popup .modal-body .class-input.components .inputs input {
    width: 15px;
}

#management-page-reset-password #teacher-class-popup .modal-body .class-input.qty .inputs input {
    width: 275px;
}


#management-page-reset-password #teacher-class-popup .modal-body .class-input.components .inputs label {
    display: inline-block;
    vertical-align: middle;
    margin: 3px 0 0 0;
}


#management-page-reset-password #teacher-class-popup .modal-body .class-input .inputs select {
    width: 393px;
}


#management-page-reset-password #teacher-class-popup .modal-body .class-input.change-teacher .label-header {
    width: 120px;
}

#management-page-reset-password #teacher-class-popup .modal-body .class-input.change-teacher .inputs select {
    width: 368px;
}


#management-page-reset-password #teacher-class-popup .modal-footer {
    padding: 12px 15px;
}

#management-page-reset-password #teacher-class-popup .modal-body #teacher-class-error-container,
#management-page-reset-password #teacher-class-popup .modal-body #teacher-class-success-container {
    width: 100%;
    margin: auto;
}

#management-page-reset-password #teacher-class-popup .modal-body #teacher-class-error-container #teacher-class-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

#management-page-reset-password #teacher-class-popup .modal-body #teacher-class-success-container #teacher-class-success-msg {
        width: 100%;
        color: green;
    }


#management-page-reset-password #teacher-class-popup #teacher-add-class-delete-btn {
    float: left;
}

#teacher-class-add-class-wrapper { text-align: center;margin-top: 8px;}
#teacher-classes-wrapper .input-header {vertical-align: top;font-weight: bold;}
#teacher-classes { margin-top: 5px;}

#teacher-classes-grid #tbl-classes thead th.name { width: 140px;text-align: left;}
#teacher-classes-grid #tbl-classes thead th.code { width: 80px;text-align: left;}
#teacher-classes-grid #tbl-classes thead th.year { width: 60px;text-align: left;}
#teacher-classes-grid #tbl-classes thead th.book { width: 100px;text-align: left;}
#teacher-classes-grid #tbl-classes thead th.student { width: 60px;text-align: left;}
#teacher-classes-grid #tbl-classes thead th.edit { width: 60px;text-align: left;}

#teacher-classes-grid #tbl-classes tbody .name { white-space: nowrap;overflow: hidden;box-sizing:border-box;text-overflow: ellipsis;margin-bottom: 5px;height: 30px;width: 140px;line-height: 30px;}
#teacher-classes-grid #tbl-classes tbody .book { white-space: nowrap;overflow: hidden;box-sizing:border-box;text-overflow: ellipsis;margin-bottom: 5px;height: 30px;width: 150px;line-height: 30px;}

#teacher-classes-grid #tbl-classes {text-indent: 5px;width:100%}
#teacher-classes-grid #tbl-classes thead th {border: 1px solid #b7b7b7;text-indent: 5px;}
#teacher-classes-grid #tbl-classes tbody td {border: 1px solid #b7b7b7;text-indent: 5px;}

#teacher-classes-grid #tbl-classes tbody tr:nth-child(odd) {background: #e2e2e2}


/************* teacher class students popup****************************/

#management-page-reset-password #teacher-class-students-popup {
    width: 650px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

#management-page-reset-password #teacher-class-students-popup .modal-header {
        position: relative;
        cursor: move;
        background: #252222;
        background-image: url('images/diagonal-white-bg.png');
        border-radius: 4px 4px 0 0;
        height: 16px;
        border-bottom: solid 2px #3a92c8;
    }

#management-page-reset-password #teacher-class-students-popup .close {
        position: absolute;
        float: none;
        right: 3px;
        padding: 6px;
        top: -2px;
        margin: 0;
        color: white;
        -ms-opacity: 1;
        opacity: 1;
        outline: none;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -ms-text-shadow: none;
        text-shadow: none;
    }

#management-page-reset-password #teacher-class-students-popup .close:hover {
            -ms-opacity: 0.8;
            opacity: 0.8;
            -webkit-filter: alpha(opacity=80);
            -moz-filter: alpha(opacity=80);
            -o-filter: alpha(opacity=80);
            filter: alpha(opacity=80);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        }

#management-page-reset-password #teacher-class-students-popup.modal-body {
        max-height: inherit !important;
        padding: 5px;
    }

#management-page-reset-password #teacher-class-students-popup .modal-body {
    height: 330px;
}

#management-page-reset-password #teacher-class-students-popup #teacher-class-modal-body-content {
    margin-top: 0px;
}

#management-page-reset-password #teacher-class-students-popup .modal-footer {
    padding: 12px 15px;
}


#teacher-class-students-grid #tbl-class-students thead th.code { width: 120px;text-align: left;}
#teacher-class-students-grid #tbl-class-students thead th.user-name { width: 140px;text-align: left;}
#teacher-class-students-grid #tbl-class-students thead th.login-name { width: 140px;text-align: left;}
#teacher-class-students-grid #tbl-class-students thead th.start-date { width: 90px;text-align: left;}
#teacher-class-students-grid #tbl-class-students thead th.end-date { width: 90px;text-align: left;}

#teacher-class-students-grid #tbl-class-students tbody .user-name { white-space: nowrap;overflow: hidden;box-sizing:border-box;text-overflow: ellipsis;margin-bottom: 5px;height: 30px;width: 160px;line-height: 30px;}
#teacher-class-students-grid #tbl-class-students tbody .login-name { white-space: nowrap;overflow: hidden;box-sizing:border-box;text-overflow: ellipsis;margin-bottom: 5px;height: 30px;width: 160px;line-height: 30px;}

#teacher-class-students-grid .class-name-header { display: inline-block;font-weight: bold;}
#teacher-class-students-grid .class-name { display: inline-block;}
#teacher-class-students-grid #tbl-class-students { margin-top: 10px;}
#teacher-class-students-grid #tbl-class-students tbody tr:nth-child(odd) {background: #e2e2e2}

#teacher-class-students-grid #tbl-class-students {border: 1px solid #b7b7b7;text-indent: 5px;}

.ui-autocomplete { z-index: 9999 !important;}


#management-page-reset-password #generatecode .generate-code-data-wrapper .label-header { display: inline-block;width: 100px;vertical-align: top;font-weight: bold;}
#management-page-reset-password #generatecode .generate-code-data-wrapper .inputs { display: inline-block;max-height: 210px;overflow: auto;width: 450px; }
#management-page-reset-password #generatecode .generate-code-data-wrapper .input-group { margin-bottom: 10px;}
#management-page-reset-password #generatecode .generate-code-data-wrapper .generate-code-book-components .label-header { vertical-align: top;}
#management-page-reset-password #generatecode .generate-code-data-wrapper .generate-code-book-components .inputs input { width: 15px;}
#management-page-reset-password #generatecode .generate-code-data-wrapper .generate-code-book-components .inputs label {display: inline-block;vertical-align: middle;margin: 3px 0 0 0;}


#management-page-reset-password #generatecode #generate-code-error-container,
#management-page-reset-password #generatecode #generate-code-success-container {
    width: 100%;
    margin: auto;
}

#management-page-reset-password #generatecode #generate-code-error-container #generate-code-error-msg {
    width: 100%;
    color: red;
    font-size: 12px;
}

#management-page-reset-password #generatecode #generate-code-success-container #generate-code-success-msg {
    width: 100%;
    color: green;
}

#management-page-reset-password #generatecode #generate-code-data-wrapper { min-height: 200px;}

#management-page-reset-password #generatecode .generate-code-new-codes{max-height: 200px;width: 450px;overflow: auto;background-color: #F0F9FF;}

#management-page-reset-password #generatecode .generate-code-new-code-wrapper {border-top: 1px solid #0088cc;padding-top: 16px;}

#management-page-reset-password #generatecode .generate-code-book-components .components-wrapper {background-color: #F0F9FF;}




#management-page-reset-password #free-up-code-popup {
    width: 500px;
    margin: 0;
    transform: translate(-50%,0);
    left: 50%;
    max-width: 90%;
    top: 16%;
}

#management-page-reset-password #free-up-code-popup .modal-body .free-up-code-header {
    display: inline-block;
    font-weight: bold;
    width: 100px;
}

#management-page-reset-password #free-up-code-popup .modal-body .data {
    display: inline-block;
}

#management-page-reset-password #free-up-code-popup .modal-body .free-up-code-components-wrapper {
    display: inline-block;
    height: 100px;
    overflow: auto;
    width: 360px;
}

#management-page-reset-password #free-up-code-popup .modal-body .free-up-code-components-header {
    vertical-align: top;
}
#management-page-reset-password #free-up-code-popup .modal-body .input-wrapper {
    margin-top: 10px;
}



#management-page-reset-password #free-up-code-popup .modal-body #change-class-input.is-error {
    border: 1px solid #F78989;
    -webkit-box-shadow: inset 0px 0px 2px #E91B1B;
    -ms-box-shadow: inset 0px 0px 2px #E91B1B;
    box-shadow: inset 0px 0px 2px #E91B1B;
}

#management-page-reset-password #free-up-code-popup .modal-header {
    position: relative;
    cursor: move;
    background: #252222;
    background-image: url('images/diagonal-white-bg.png');
    border-radius: 4px 4px 0 0;
    height: 16px;
    border-bottom: solid 2px #3a92c8;
}

#management-page-reset-password #free-up-code-popup .close {
    position: absolute;
    float: none;
    right: 3px;
    padding: 6px;
    top: -2px;
    color: white;
    -ms-opacity: 1;
    opacity: 1;
    outline: none;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -ms-text-shadow: none;
    text-shadow: none;
}

#management-page-reset-password #free-up-code-popup .close:hover {
    -ms-opacity: 0.8;
    opacity: 0.8;
    -webkit-filter: alpha(opacity=80);
    -moz-filter: alpha(opacity=80);
    -o-filter: alpha(opacity=80);
    filter: alpha(opacity=80);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

#management-page-reset-password #free-up-code-popup.modal-body {
    max-height: inherit !important;
    padding: 5px;
}

#management-page-reset-password #free-up-code-popup .modal-body {
    height: 230px;
}

#management-page-reset-password #free-up-code-popup .modal-footer {
    padding: 12px 15px;
}

/*#management-page-reset-password #free-up-code-popup .modal-body #free-up-code-error-container,
#management-page-reset-password #free-up-code-popup .modal-body #free-up-code-success-container {
    width: 100%;
    margin-top: 10px;

}*/

#management-page-reset-password #free-up-code-popup .modal-body #free-up-code-error-container #free-up-code-error-msg {
        width: 100%;
        color: red;
        font-size: 12px;
    }

#management-page-reset-password #free-up-code-popup .modal-body #free-up-code-success-container #free-up-code-success-msg {
        width: 100%;
        color: green;
    }

#management-page-reset-password .code-wrapper {
    margin-bottom: 5px;
    height: 26px;
    line-height: 26px;
}


#management-page-reset-password .code-info-btn {
    border-radius: 50%;
    font-size: 12px;
    padding: 0px 8px;
    color: white;
    border: none;
    text-shadow: none;
    background: #0088cc;
    outline: none;
    margin-right:5px
}

#management-page-reset-password .code-info-btn:hover { opacity:0.7;}

#management-page-reset-password .code-free-up-btn {
    padding: 2px 5px;
    font-size: 12px;
    line-height: 20px;
    background: #ff3b3b;
    color: white;
    margin-left: 10px;
    text-shadow: none;
}


#management-page-reset-password .class-code-search{ margin-bottom: 15px;}
.cookiebanner {    
    min-height: 30px !important;z-index: 9999 !important;
}

.cookiebanner-close {float: right;padding-left: 5px;cursor: pointer;}