.unit-icon-container{
    border:1px solid #eee;
    cursor:pointer;
}
.unit-icon-container:hover{
    background:#eee;
}

.unit-completion{
    background-image:url(/assets/img/unit_icons/unit_completion-new.png);
}

.unit-stars{
    position:absolute;
    top:2px;
    height:100%;
    width:100%;
    background-image:url(/assets/img/unit_icons/unit_stars.png);
}
.unit-icon {
    position:relative;
    height:128px;
    width:106px;
    margin-left: auto;
    margin-right: auto;
    background-repeat:no-repeat;
}

.unit-icon-title {
    font-size:14px;
}

.unit-completion{
    height:128px;
}

.unit-descript-btn{
    display:inline-block;
    margin-top:20px;
}

.esa-bar {

    width: 100%;
    min-width:985px;
    min-height: 70px;
    max-width: 1024px;
    border-radius: 0px;
    border: 0px;
    margin-bottom: 0px;
    padding-top: 2px;
    background-image: url(../img/user/innerheader.png);
    color: #1591c4;
}

.section-bar {
    background-image: url(/assets/img/portal/class-header-bg.png);
    color: #FFFFFF;
    padding: 10px;
    padding-left: 70px;
    font-size: 28px;
    font-weight: 300;
    border-bottom: 2px solid #FFFFFF;
}

.section-breadcrumb{
    color:#FFFFFF;
    font-size:12px;
}

.section-breadcrumb a{
    color:#FFFFFF;
    font-size:12px;
}

.section-box{
    vertical-align:top;
    cursor:pointer;
    display:inline-block;
}

.section-box-left{
    margin:0px;
    display:inline-block;
    vertical-align:top;
    background:url(../img/user/class/section-left.png);
    width:17px;
    height:67px;
}

.section-box-mid{
    padding-top:15px;
    padding-left:10px;
    padding-right:10px;
    line-height:1;
    color:#CCCCCC;
    font-size:14px;
    margin:0px;
    display:inline-block;
    vertical-align:top;
    background:url(../img/user/class/section-mid.png);
    background-repeat:repeat-x;
    height:67px;
}

.section-box-mid a{
    color:#FFFFFF;
}

.section-name{
    font-size:20px;
    color:#FFFFFF;
}

.section-box-right{
    margin:0px;
    display:inline-block;
    vertical-align:top;
    background:url(../img/user/class/section-right.png);
    width:32px;
    height:67px;
}

.unit-category {
    width: 80%;
    font-size: 24px;
    background: rgba(255,255,255,1);
    text-align: center;
    color: #000000;
    padding: 10px;
    margin: auto;
}

.modal-dialog {
    width:auto;
    max-width: 1000px;
}

.esa-class{
    margin:auto;
    padding:5px;
    padding-left:90px;
    margin-bottom:20px;
    width:250px;
    height:80px;
    background-image:url(../img/user/class/class-icon.png);  
    background-repeat:no-repeat;
}

.esa-program-link{
    cursor:pointer;
    display:block;
    width:100%;
    font-size:42px;
    margin:auto;
    margin-bottom:10px;
    margin-top:10px;
    padding:5px 10px 5px 10px;
    border-radius:15px;
    color:#FFFFFF;
    text-align:center;
}

.subject-inactive{
    font-size:40px;
    font-weight:bold;
    color:#CCCCCC;
    cursor:pointer;
}

.students{
    background-image:url(../img/user/class/student-header-icon.png);  
    background-repeat:no-repeat;
}

.account{
    background-image:url(../img/user/account/account-header-icon.png);  
    background-repeat:no-repeat;
}

.marks{
    background-image:url(../img/user/reports/marks-header-icon.png);  
    background-repeat:no-repeat;
}

.student-signin {
    position:relative;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    padding-top: 20px;
    width: 300px;
    height: 150px;
    margin: 20px;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    background: rgba(255,255,255,1);
    background-repeat: no-repeat;
    -webkit-box-shadow: 7px 7px 0px -1px rgba(0,0,0,.5);
    -moz-box-shadow: 7px 7px 0px -1px rgba(0,0,0,.5);
    box-shadow: 7px 7px 0px -1px rgba(0,0,0,.5);
}

.student-btns {
    display: inline-block;
}

.esa-student-btn{
    background:none;
    font-size:20px;
    color:#3399cc;
}

input[type='checkbox']{
    width:20px;
    height:20px;
    margin-top:15px;
    margin-right:5px;
}

.form-txt-small{
    font-size:14px;
    margin-top:-10px;
    color:#333333;
}

.esa-form-btn-1{
    display:inline-block;
    font-size:16px;
    color:#FFFFFF;
    background:#267eb1;
    border-radius:10px;
    padding: 5px 20px 5px 20px ;
    margin-top:15px;
}
.navbar-default .navbar-toggle .icon-bar{
    background-color:#FFF;
}
.dropdown-menu{
    background-color: #8eb226;
    font-size:14px;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{
    background-color: #a2c739;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
    background-color: #8eb226;
}

.record-unit-completion{
    border-bottom:1px solid #CCC;
    padding:10px;
    padding-left:20px;
    margin-bottom:10px;
    min-width:700px;
    overflow-x:auto;
}

.unit-report{
    padding:20px;
}

.report-container{
    max-width:100%;
    overflow-x:auto;
}

.dummy-scroll{
    max-width:100%;
    overflow-x:auto;
}

.report-block{

}

.marks-legend{
    font-size:14px;
    border: 1px solid #CCCCCC;
    padding:5px;
}

.report-legend-text{
    display:inline-block;
    vertical-align:middle;
    height:20px;
    font-size:12px;
    margin-right:15px;
}

.report-legend-completion{
    display:inline-block;
    width:20px;
    height:20px;
    background:#a2ff00;
    -webkit-box-shadow: 2px 2px 0px -1px rgba(137,139,153,1);
    -moz-box-shadow: 2px 2px 0px -1px rgba(137,139,153,1);
    box-shadow: 2px 2px 0px -1px rgba(137,139,153,1);
    margin-right:5px;
}

.report-legend-average{
    display:inline-block;
    width:20px;
    height:20px;
    background:#fda702;
    -webkit-box-shadow: 2px 2px 0px -1px rgba(137,139,153,1);
    -moz-box-shadow: 2px 2px 0px -1px rgba(137,139,153,1);
    box-shadow: 2px 2px 0px -1px rgba(137,139,153,1);
    margin-right:5px;

}

.report-legend-marks{
    display:inline-block;
    width:20px;
    height:20px;
    background:#EEEEEE;
    background-image:url(../img/user/reports/report-legend-marks.png);
    margin-right:5px;
}

.report-legend-certificate{
    display:inline-block;
    width:20px;
    height:20px;
    background:#EEEEEE;
    background-image:url(../img/user/reports/report-legend-certificate.png);
    margin-right:5px;
}

.report-legend-report{
    display:inline-block;
    width:20px;
    height:20px;
    background:#EEEEEE;
    background-image:url(../img/user/reports/report-legend-card.png);
    margin-right:5px;
}

.report-legend-launch{
    display:inline-block;
    width:20px;
    height:20px;
    background:#EEEEEE;
    background-image:url(../img/user/reports/report-legend-launch.png);
    margin-right:5px;
}


.unit-report-bar{
    padding-top:10px;
    border:2px solid #CCCCCC;
    vertical-align:top;
    display:inline-block; 
    width:90px;
    background:#EEEEEE;
    text-align:center;
    margin-bottom:20px;
}

.unit-report-progress-bg{
    display:inline-block; 
    vertical-align:top;
    width:25px;
    height:300px;
    background:#DDDDDD;
}

.unit-report-progress{
    width:100%;
    background:#a2ff00;
    text-align:center;
    overflow:hidden;
    -webkit-box-shadow: 2px 3px 0px -1px rgba(137,139,153,1);
    -moz-box-shadow: 2px 3px 0px -1px rgba(137,139,153,1);
    box-shadow: 2px 3px 0px -1px rgba(137,139,153,1);
}

.unit-report-average-bg{
    display:inline-block; 
    vertical-align:top;
    margin-left:0px;
    width:25px;
    height:300px;
    background:#DDDDDD;
}

.unit-report-average{
    background:#fda702;
    width:100%;
    overflow:hidden;
    text-align:center;
    -webkit-box-shadow: 2px 3px 0px -1px rgba(137,139,153,1);
    -moz-box-shadow: 2px 3px 0px -1px rgba(137,139,153,1);
    box-shadow: 2px 3px 0px -1px rgba(137,139,153,1);
}

.unit-report-title{
    font-size:12px;
    height:40px;
    line-height:1;
    color:#CCCCCC;
}

.unit-completion-value{
    font-size:11px;
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

.unit-marks{
    width:100%;
    height:30px;
    margin-top:12px;
    margin-bottom:12px;
    text-align:center;
    font-size:12px;
    color:#333333;
}

.unit-certificate{
    width:100%;
    height:30px;
    text-align:center;
    font-size:12px;
    color:#CCCCCC
}

.unit-time{
    width:100%;
    height:40px;
    text-align:center;
    font-size:12px;
    color:#267eb1;
    padding-top:15px;
}

#student-avatar {
    width: 210px;
    height: 230px;
    text-align: center;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
}

.student-avatar {
    width: 100px;
    height: 100px;
    margin-top: -10px;
}

.img-picker {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
}

.img-picker img {
    width: 100px;
    height: 100px;
}

.room {
    background-image: url(/assets/img/portal/floor-bg.png);
    background-repeat: repeat-y;
    min-height: 560px;
}

.class {
    background-image: url(/assets/img/portal/class-bg.png);
    background-repeat: no-repeat;
    min-height: 560px;
}

@media (min-width: 100px) { 
    .navbar-brand {
        padding: 0; 
        padding-left:20px; 
        height:75px;
    }
}

@media (max-width: 100px) { 
    .navbar-brand {
        padding: 0; 
        display:none;
    }
}

.nav_logo{
    float:left;	
}

.navbar-nav>li>a,
.navbar-nav li a{
    color:#FFFFFF !important;
    text-decoration: none;
    font-size:18px;
    padding-bottom:0px;
    padding-left:0px;
    padding-right:20px;
}

.navbar-default .navbar-toggle .icon-bar{
    background-color:#1591c4;
    border:1px solid #1591c4;
}

.dropdown-menu{
    background-color: #8eb226;
    font-size:14px;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{
    background-color: #a2c739;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus{
    background-color: #8eb226;
}

.add-student-btn{
    display:block;
    width:150px;
    color:#FFFFFF;
    font-weight:bold;
    background-color: #0d79b8;
    border-radius:20px;
    border:2px solid #FFFFFF;
    padding:4px;
    text-align:center;
    margin-right:10px
}

@media (min-width: 100px) { 
    .navbar-brand {
        padding: 0; 
        padding-left:20px; 
        height:75px;
    }
}

@media (max-width: 100px) { 
    .navbar-brand {
        padding: 0; 
        display:none;
    }
}