/*-----------------Start CSS Login------------------*/
body.loginpage {
    background: #ffffff !important;
}

.webheader {
    background: linear-gradient(to right, #2C2A4A 0%, #4F518C 101%); /*a8dba8 - 79bd9a*/
    height: 200px;
}

.webline {
    background-color: #daa520; /*a8dba8*/
    height: 20px;
}

.webbox {
    background-color: #f8f9f2; /*f2f4ef*/
    min-height: 300px;
    padding: 50px 50px 50px 50px;
    color: #4c4c4c;
}

a.loginpage {
    color: #ff637b; /*ff4858*/
}


a:hover.loginpage {
    color: #f23e5a; /*ff1456*/
}

.mybtn-login {
    background-color: #81c2e9; /*79bd9a*/
    border-color: #81c2e9; /*79bd9a*/
    color: #FFFFFF;
}

    .mybtn-login:hover,
    .mybtn-login:focus,
    .mybtn-login:active,
    .mybtn-login.active,
    .open .dropdown-toggle.mybtn-login,
    .mybtn-login:active:focus,
    .mybtn-login:active:hover,
    .mybtn-login.active:hover,
    .mybtn-login.active:focus {
        background-color: #5590be; /*3b8686*/
        border-color: #5590be; /*3b8686*/
        color: #FFFFFF;
    }

.myfont-subject {
    color: #b8860b; /*7d99b8*/
}

.mylogin-box {
    max-width: 500px;
    z-index: 100;
    margin: 0 auto;
    padding-top: 40px;
    background-color: #fbfcf6 !important; /*f8f9f5 */
}

.img-fluid-vertical {
    display: block;
    width: auto;
    max-height: 100%;
    position: relative;
}

.img-fluid-horizontal {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
}

.mylogo {
    /*width:180px;*/
    margin: 0 auto;
}

.form-control:focus,
.single-line:focus {
    border-color: #81c2e9 !important; /*b3b3b3*/
}

.btn .fa.loginpage {
    font-size: small;
    padding-top: 0px;
}
/*-----------------End CSS Login------------------*/
/*---------------Start CSS Layout-----------------*/
body {
    background: linear-gradient(to bottom, #37345A 0%, #37345A 101%); /*3b8686-79bd9a*/
    color: #424242;
    background-color: #37345A; /*79bd9a*/
    background-size: 100%;
    background-repeat: repeat-x;
    /*color: black !important;*/
}

@media (max-width: 768px) {
    body:not(.mini-navbar) {
        background-color: #f8e5dc;
    }
}

xsmall {
    font-size: 70%;
}

.topic {
    font-size: 24px;
    color: #7186a1;
    padding-bottom: 20px;
}

.text-disable {
    color: #d2d2d2;
}

.form-control {
    border-radius: 3px;
}

    .form-control:focus,
    .single-line:focus {
        border-color: #81c2e9 !important; /*79bd9a*/
    }

.has-success .form-control {
    border-color: #81c2e9; /*79bd9a*/
}

.btn.focus, .btn:focus, .btn:hover {
    color: #ffffff;
    text-decoration: none;
}

.btn-primary {
    background-color: #907AD6;
    border-color: #4F518C;
    color: #FFFFFF;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .open .dropdown-toggle.btn-primary,
    .btn-primary:active:focus,
    .btn-primary:active:hover,
    .btn-primary.active:hover,
    .btn-primary.active:focus {
        background-color: #60a0c7 !important;
        border-color: #60a0c7 !important;
        color: #FFFFFF;
    }

    .btn-primary.btn-outline {
        color: #6db5e1;
    }

        .btn-primary.btn-outline:focus {
            color: #FFFFFF;
        }

    .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary.active[disabled], fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
        background-color: #90c3e2;
        border-color: #90c3e2;
    }

.btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all .5s;
}

.btn-theme1 {
    background-color: #37345A; /*cea8db*/
    border-color: #414274; /*cea8db*/
    color: #ffffff;
}

    .btn-theme1:hover {
        background-color: #907AD6 !important; /*a373b2*/
        border-color: #DABFFF !important; /*af89bc*/
        color: #ffffff;
    }

.ibox-title {
    border-top: 2px solid #daa520; /*a8dba8*/
    /*background-color:#79bd9a;*/
    border-radius: 5px 5px 0px 0px;
    /*color: #daffb6;*/
    color: #b8860b; /*6bb490*/
}

.ibox-content {
    border-radius: 0px 0px 5px 5px;
}

.ibox-tools {
    float: right;
}

    .ibox-tools a {
        cursor: pointer;
        margin-left: 5px;
        /*color: #daffb6 !important;*/
        color: #ff7187; /*6bb490*/
    }

        .ibox-tools a:hover {
            color: #f23e5a; /*008745*/
        }

.unit .ibox-content {
    border-bottom: 1px solid #daa520;
    border-left: 1px solid #daa520;
    border-right: 1px solid #daa520;
}

.unit .ibox-title {
    border-top: 3px solid #daa520;
    border-left: 1px solid #daa520;
    border-right: 1px solid #daa520;
    border-bottom: 1px solid #daa520;
    background-color: #cee2f2;
    border-radius: 5px 5px 0px 0px;
    color: #68a6db;
}

.unit .ibox-tools a {
    color: #68a6db;
}

.unit .ibox-content a {
    color: #68a6db;
}

.assign .ibox-content {
    border-bottom: 1px solid #a370b3;
    border-left: 1px solid #a370b3;
    border-right: 1px solid #a370b3;
}

.assign .ibox-title {
    border-top: 3px solid #a370b3;
    border-left: 1px solid #a370b3;
    border-right: 1px solid #a370b3;
    border-bottom: 1px solid #a370b3;
    background-color: #eee3f1;
    border-radius: 5px 5px 0px 0px;
    color: #a370b3;
}

.assign .ibox-tools a {
    color: #a370b3;
}

.navbar-header .fa {
    font-size: inherit;
}

.btn .fa {
    font-size: small;
    padding-top: 5px;
}

.icon-setting {
    font-size: small;
    margin-left: 10px;
}

    .icon-setting:hover {
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
        cursor: pointer;
    }

#side-menu .nav-header {
    /*background: #3b8686 !important;*/
}

body.mini-navbar .nav-header {
    background-color: #daa520;
}

.nav-header {
    background: unset;
}

#side-menu .nav > li {
    background: #4F518C !important; /*3c8786*/
}

    #side-menu .nav > li.active {
        background: #DABFFF !important; /*3c8786*/
    }

.nav-header a {
    color: #daa520; /*8beded*/
}

.nav.metismenu > li.active {
    border-left: 4px solid #7FDEFF; /*00d5b8*/
    background: #4F518C !important; /*3c8786*/
}

.nav.metismenu li > a {
    color: white; /*daffb6*/
    font-weight: unset;
}

    .nav.metismenu li > a.active {
        background: #daa520 !important;
    }

.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus {
    background-color: #414274; /*3c8786*/
    color: #daa520; /*ffffff*/
}

.mini-navbar .nav .nav-second-level {
    background-color: #f9ddd9;
}

.breadcrumb {
    background-color: unset;
}

.breadcrumb-bg {
    background-color: #a4a4a4; /*#cfe1e3*/ /*7d99b8*/
    color: #ffffff; /*#3d8caa;*/ /*ffffff*/
}

.page-heading {
    border-top: 0;
    padding: 0 5px 10px 10px;
    margin: 0px 5px 0px 5px;
    border-radius: 5px;
}

.modal-header {
    border-top: 3px solid #daa520; /*71a2d5*/
    border-radius: 5px 5px 0px 0px;
    /*background-color:#7d99b8;*/
    color: #b8860b; /*71a2d5*/
}

.product-box {
    cursor: pointer;
}

.product-price {
    background-color: #81c2e9;
}

.product-imitation {
    font-size: 30px;
    padding: 70px 0;
    color: #90bad3;
}

.panel-theme1 {
    border-top: 3px solid #fbc1d2; /*a8dba8*/
}

    .panel-theme1 > .panel-heading {
        color: #ff7187; /*6bb490*/
    }

.panel-miniquiz {
    padding: 20px 20px 20px 20px;
    font-size: 18px;
}

    .panel-miniquiz > .panel-heading {
    }

    .panel-miniquiz > .panel-body {
    }

.footable-header {
    background-color: #a4a4a4; /*#cfe1e3;*/ /*86a9c7*/
    color: #ffffff; /*#3d8caa;*/ /*ffffff*/
}

.footable-empty td {
    padding-top: 30px !important;
    font-size: 18px !important;
}

.table.table-miniquiz {
    margin-bottom: 0px;
}

.pace .pace-progress {
    background: #fbc1d2;
}

.fontQuizSize {
    font-size: 15px !important;
}

.radio.choice {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.dd-handle.passbox {
    background: #e3ffda;
}

.dd-handle a {
    color: #545454 !important;
}

.dd-handle.nopass {
    background: #fde8e8;
}

.datepicker {
    z-index: 2100 !important;
}

.progress-bar {
    background-color: #fbc1d2;
}

button.close {
    font-size: 30px;
}

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

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

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

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

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-top-5 {
    margin-top: 5px;
}

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

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-50 {
    margin-top: 50px;
}

.padding-10 {
    padding: 10px;
}

.padding-20 {
    padding: 20px;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-20 {
    padding-top: 20px;
}

.padding-top-30 {
    padding-top: 30px;
}

.padding-top-40 {
    padding-top: 40px;
}

.feed-element:hover {
    background-color: #f7f7f7;
}


#student-activity .feed-element {
    margin-top: 10px !important;
    padding: 15px;
}

#student-activity .feed-activity-list {
    padding-left: 50px;
}

    #student-activity .feed-activity-list .feed-element {
        border-bottom: solid #e7eaec 0.3px;
        border-right: solid #e7eaec 0.1px;
        border-left: solid #e7eaec 0.1px;
    }

#student-activity .feed-element {
    margin-top: 0px !important;
    height: 150px !important;
}

.panel-default > .panel-heading {
    color: white;
    /*background-color: #4e85b8;
    border-color: #4e85b8;*/
}

#assess-modal .inmodal .modal-header {
    padding: 0px !important;
    text-align: center;
}

.notify {
    cursor: pointer;
}

.user-profile-picture {
    max-height: 120px;
    margin: auto;
}

.img-logo-login {
    display: block;
    width: 650px;
    max-width: 70%;
    height: auto;
    margin: auto;
}

.grey-bg {
    background-color: #c7c7c7;
    color: black;
}

.green-bg {
    background-color: rgb(66, 183, 84);
    color: white;
}

.vertical-timeline-content.active {
    background: rgb(225, 238, 251) !important;
}

    .vertical-timeline-content.active:before {
        border-color: transparent rgb(225, 238, 251) transparent transparent;
    }

.vertical-timeline-content.lock {
    background: #1ab394 !important;
    color: white !important;
}

    .vertical-timeline-content.lock:before {
        border-color: transparent #1ab394 transparent transparent;
        color: white !important;
    }

.vertical-timeline-content p {
    margin-left: 40px;
}

.bootstrap-tagsinput {
    width: 100% !important;
    font-size: 14px !important;
}

.tag.label {
    font-size: 13px !important;
}

.inmodal .modal-loading {
    background: #f8fafb;
}

.modal-loading {
    padding: 20px 30px 30px 30px;
}

.modal-xlg {
    width: 1024px;
}

.user-img {
    max-width: 150px;
}

.pointer {
    cursor: pointer;
}

/*.tabs-container > .nav > li.active {
    border-left: 4px solid rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0)!important;
}*/

.social-feed-box-teacher {
    /* padding: 15px; */
    border: 1px solid #e7eaec;
    background: #337ab7;
    margin-bottom: 15px;
    color: white !important;
}

.modal-lg {
    width: 95% !important;
}

.modal-md {
    width: 80% !important;
}

.modal-hf {
    width: 50% !important;
}

.max-width-70 {
    max-width: 70px;
}

.max-width-80 {
    max-width: 80px;
}


.max-width-100 {
    max-width: 100px;
}

.fa-circle {
    font-size: small;
    padding-top: 3px !important;
}
/*---------------End CSS Layout-----------------*/

@media (max-width: 767px) {
    .go-to-left {
        text-align: left !important;
    }

    .go-to-center {
        text-align: center !important;
    }
}

.text-smaller {
    font-size: smaller;
}

.padding-right-10 {
    padding-right: 10px;
}
/*col*/
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1800px) {
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }

    .col-xl-12 {
        width: 100%;
    }

    .col-xl-11 {
        width: 91.66666667%;
    }

    .col-xl-10 {
        width: 83.33333333%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-8 {
        width: 66.66666667%;
    }

    .col-xl-7 {
        width: 58.33333333%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-5 {
        width: 41.66666667%;
    }

    .col-xl-4 {
        width: 33.33333333%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-2 {
        width: 16.66666667%;
    }

    .col-xl-1 {
        width: 8.33333333%;
    }

    .col-xl-pull-12 {
        right: 100%;
    }

    .col-xl-pull-11 {
        right: 91.66666667%;
    }

    .col-xl-pull-10 {
        right: 83.33333333%;
    }

    .col-xl-pull-9 {
        right: 75%;
    }

    .col-xl-pull-8 {
        right: 66.66666667%;
    }

    .col-xl-pull-7 {
        right: 58.33333333%;
    }

    .col-xl-pull-6 {
        right: 50%;
    }

    .col-xl-pull-5 {
        right: 41.66666667%;
    }

    .col-xl-pull-4 {
        right: 33.33333333%;
    }

    .col-xl-pull-3 {
        right: 25%;
    }

    .col-xl-pull-2 {
        right: 16.66666667%;
    }

    .col-xl-pull-1 {
        right: 8.33333333%;
    }

    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-push-12 {
        left: 100%;
    }

    .col-xl-push-11 {
        left: 91.66666667%;
    }

    .col-xl-push-10 {
        left: 83.33333333%;
    }

    .col-xl-push-9 {
        left: 75%;
    }

    .col-xl-push-8 {
        left: 66.66666667%;
    }

    .col-xl-push-7 {
        left: 58.33333333%;
    }

    .col-xl-push-6 {
        left: 50%;
    }

    .col-xl-push-5 {
        left: 41.66666667%;
    }

    .col-xl-push-4 {
        left: 33.33333333%;
    }

    .col-xl-push-3 {
        left: 25%;
    }

    .col-xl-push-2 {
        left: 16.66666667%;
    }

    .col-xl-push-1 {
        left: 8.33333333%;
    }

    .col-xl-push-0 {
        left: auto;
    }

    .col-xl-offset-12 {
        margin-left: 100%;
    }

    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-xl-offset-9 {
        margin-left: 75%;
    }

    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-xl-offset-6 {
        margin-left: 50%;
    }

    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-xl-offset-3 {
        margin-left: 25%;
    }

    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-xl-offset-0 {
        margin-left: 0;
    }
}

}

.m-r-md {
    margin-right: 20px;
}

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

.btn-school {
    background-color: #fbc1d2;
    border-color: #fbc1d2;
    color: #ffffff;
}

.btn-default {
    color: slategrey !important;
    background: white;
    border: 1px solid #e7eaec;
}

.panel-default > .panel-heading {
    color: slategrey !important;
}