/*==================================================
FOR: Escola Virtual 2.0 Theme
==================================================*/

/*    
    Author     : DMiguel
    /*==========  Mobile First Method  ==========

    Extra Small Devices, Phones 
    @media only screen and (min-width : 480px) {

    }

    Small Devices, Tablets 
    @media only screen and (min-width : 768px) {

    }

    Medium Devices, Desktops 
    @media only screen and (min-width : 992px) {

    }

================================================*/

/*--------------------------------------------------
Resets and overrides 
-------------------------------------------------- */
* {
    outline:0 none !important;    
}

.h1 , h1 {
    font-size: 38px;
}

.h2 , h2 {
    font-size: 28px;
}

.h4 , h4 {
    font-size: 20px;
}

.h5 , h5 {
    font-size: 18px;
}

.h6 , h6 {
    font-size: 16px;
}

.hidden
{
    display:none;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* used in grid  layout for setup grid*/
.center-resp-padding,
.left-resp-padding,
.right-resp-padding{
    padding-right: 0;
    padding-left: 0;    
}

.no-side-padding{
    padding-left: 0;
    padding-right: 0;
}

.no-padding{
    padding: 0;
}

.no-underline{
    text-decoration: none !important;
}

.underline{
    text-decoration: underline !important;
}


ol, ul {
    list-style: none outside none;
    padding: 0;    
}

.mark, mark {    
    background-color: transparent;
}

label{
    font-weight: normal;
}


/*--------------------------------------------------
Links and Types
-------------------------------------------------- */
a{
    color: #000;
    text-decoration: none !important;
}

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

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

a.btn{
    text-decoration : none !important;
}
a.btn:visited{
    color:#fff;
}

/*--------------------------------------------------
Main Layout
-------------------------------------------------- */

html {
    height: auto;
    min-height: 100%;
    position: relative !important;
}

html.noscroll::-webkit-scrollbar{
    display:none;
}

body {
    padding: 0 !important;
    font-family: 'Source Sans Pro Regular', sans-serif; /*any change here  also change in evtours*/
    font-size: 18px;
    background-color: #fff;
    min-width: 750px;
}

body.responsive {
    width: 100%;
    min-width: 320px;
    padding: 0 !important;
    font-family: 'Source Sans Pro Regular', sans-serif; /*any change here  also change in evtours*/
    font-size: 18px;
    background-color: #fff;
}

body.responsive-dashboard {
    width: 100%;
    min-width: 320px;
    padding: 0 !important;
    font-family: 'Source Sans Pro Regular', sans-serif; /*any change here  also change in evtours*/
    font-size: 18px;
    background-color: #EDEDED;
}

body .main{
    margin-top: 70px;
    padding: 50px 0;
    background-color: transparent;
}

body.customer-support {
    min-width: 320px !important;
    background-color: #dedede;
}

.customer-support .main{
    margin-top: 0px;
}

body .main-with-logo{
    background: url('/themeev/img/fundologo.png') #EDEDED no-repeat;
    background-repeat: no-repeat;
    background-position: calc(50% + 300px) -50px;
}

body #empty-dashboard-student.main-with-dashboard-empty-background,
body #empty-subjects-student.main-with-dashboard-empty-background,
body #empty-library-student.main-with-dashboard-empty-background {
    background-position-y: 80px;
}

body .main-with-dashboard-empty-background {
    background: url('/themeev/img/img_fundo_CodeActivation.png') #ededed;
    background-repeat: repeat no-repeat;
    background-position-y: 160px;
    background-color: #ededed;
    min-height: calc(100vh - 70px);
    margin: 70px 0 0 0;
    padding: 20px 0;
}

body .main-with-dashboard-guardian-background {
    margin-top: 70px;
    padding: 20px 0;
    background: url('/themeev/img/img_fundo_CodeActivation.png') #ededed;
    background-repeat: repeat no-repeat;
    background-position-y: 160px;
    min-height: 700px;
}

body .light-color {
    background-color: #fff;
}

.main h1, .main h2, .main h3,.main h4, .main h5, .main h6, .main p{
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
    margin-top: 0;
}

body .main-no-menu{
    padding: 5px 0 20px;
    background-color: rgb(222, 222, 222);
}

/* new tab window close style*/
#btnWindowTabClose {
    color: #fff;
    display: inline-block;
    cursor: pointer;
    margin-top: 15px;
    font-size: 18px;
}

#btnWindowTabClose div.font-icon{
    display: inline-block;          
}

#btnWindowTabClose div.lblWindowTabClose{   
    margin-top: 8px;    
}

#btnWindowTabBack{
    font-family: 'Source Sans Pro light', sans-serif;
    margin-top: 5px;
    font-size: 20px;
    cursor: pointer;
}


/** ==== SUBJECT HEADER BANNER ==== **/
#subjectHeaderBanner {
    z-index: 500;
    position: fixed;
    margin-bottom: 30px;
    height: 70px;
    width: 100%;
    background-image: url('/themeev/img/banner.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 2px 10px #888888;
    -webkit-box-shadow: 0 2px 10px #888888;
    box-shadow: 0px 2px 10px #888888;
}

#subjectHeaderBanner .subjectHeaderBannerImg{    
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
}

#subjectHeaderBanner .white-logo{
    width: 40px;
    padding-top: 15px;
    position: relative;
}

#goBackLinkIcon a div{
    color:#eee ;
    margin-top: 10px;
    position: relative;
}
/** ==== SUBJECT HEADER BANNER  END==== **/

.main-no-menu h1, .main-no-menu h2, .main-no-menu h3,.main-no-menu h4, .main-no-menu h5, .main-no-menu h6, .main-no-menu p{
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.footer-overlay {
    height: auto;
    padding: 15px !important;
    background-color: rgba(0, 0, 0, 0.8);
}

.margin-to-footer-overlay{
    margin-bottom: 110px;
}


/* SECTIONS TITLES */
h1.welcome-title,
h1.gami-info .gami-item{    
    font-size:16px;     
    vertical-align: top; 
    max-height: 20px;  
}

h1.gami-info .gami-item-label,
h1.gami-info .gami-item{    
    padding-left: 5px;
}

h1.gami-info #gami-point{
    padding-left: 10px;
}

h1.gami-info a{
    height: 17px;
}

h1.welcome-title,
h1.gami-info{
    margin-bottom: 15px;
    max-height: 20px;
}

h1.gami-info .font-icon{
    font-size: 25px;
    vertical-align: text-top;
}
/* gamification area */
h1.gami-info div{
    display: inline-block;
}


h1.section-title,
#search-dropdown h3 {
    font-family: 'Source Sans Pro light', sans-serif;
    font-size: 30px;
    margin-bottom: 20px;
}
ul li.welcome-title{
    width:200px;
}

#subjects-home-studentpbe h1.section-title {        
    margin-bottom: 0px; 
}


h1.section-title .font-icon{
    font-size: 25px;
    padding-left: 10px;
    cursor: help;
}

h1.home-title{
    font-size:20px; 
}

section div.section-options {
    font-family: 'Source Sans Pro Regular';
    /* text-decoration: underline; */
    text-align: right;
    padding-top: 10px;
}

section div.with-option-points {
    margin-right: 10px;
}

.small-body-section{
    font-size:16px;
}

/* SECTIONS TEXT */
p.section-text {
    font-family: 'Source Sans Pro Regular', sans-serif;
    font-size: 18px;
}

p.bigger-text{
    font-size: 20px;
}


/* BORDER OF SECTIONS TITLES */
.bottom-border{
    padding-bottom: 10px;
    border-bottom: 1px solid black;

}

#back-div-btn{
    margin-top:20px;
}



/****** COMPONENTS ************/

.dot-goals {
    border: 3px solid white;
    background: #AAAADA;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    display: inline-block;
    margin-right: 4px;
}

.square-goals {    
    background: #AAAADA;
    width: 15px;
    height: 15px;
    border-radius: 0px;
    display: inline-block;
    margin-right: 4px;
}

.dot-goals-done {
    background: #00CE0A;
}

.dot-goals-notdone {
    background: #EC0002;
}

body .container {
    width: 100%;
    min-width: 320px;
    max-width: 970px;
    padding: 0 32px;    
}

body.responsive .container,
body.responsive-dashboard .container {
    width: 100%;
    min-width: 320px;
    max-width: 970px;
    padding: 0 15px; 
    margin: 0 auto;
}

@media (min-width: 768px) {
    body.responsive .container,
    body.responsive-dashboard .container {
        padding: 0 32px;
    }
}

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


.footer {
    width: 100%;
    height: 200px;
    max-height: 200px;
    background-color: #000000;
    position: absolute;
    bottom: 0;
}

.footer .footer-list-container {
    width: 100%;
    float: left;
    padding: 10px 0;
}
.footer .footer-list-container a ,
.footer .footer-list-container a:hover {
    width: 100%;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    float: left;
}

.footer .footer-list-container a.footer-text {
    padding: 5px 10px 5px 0;
}

.footer .footer-social-icons-container {
    width: 100%;
    float: left;
    padding: 10px 0;
}

.footer .footer-social-icons-container a.footer-social-icon-facebook {
    width: 55px;
    height: 35px;
    padding: 0 10px;
    background-image: url(/themeev/img/evonfacebookico1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    float: right;
}

.footer .footer-social-icons-container a.footer-social-icon-youtube {
    width: 55px;
    height: 35px;
    padding: 0 10px;
    margin: 0 calc(50% - 55px) 0 0;
    background-image: url('/themeev/img/evonyoutubeico1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35px 35px;
    float: right;
}

@media (min-width: 925px) {
    .footer {
        width: 100%;
        height: 100px;
        max-height: 100px;
        background-color: #000000;
        position: absolute;
        bottom: 0;
    }
    
    .footer .footer-list-container a ,
    .footer .footer-list-container a:hover {
        width: auto;
        font-size: 16px;
        line-height: 25px;
        text-align: left;
    }

    .footer .footer-list-container {
        width: auto;
    }
    
    .footer .footer-social-icons-container {
        width: auto;
    }
    
    .footer .footer-social-icons-container a.footer-social-icon-facebook {
        width: 55px;
        height: 35px;
        padding: 0 10px;
        margin: 0;
        background-size: 35px 35px;
        float: right;
    }

    .footer .footer-social-icons-container a.footer-social-icon-youtube {
        width: 55px;
        height: 35px;
        margin: 0;
        padding: 0 10px;
        background-size: 35px 35px;
        float: right;
    }
}


/*--------------------------------------------------
Secondary layout structures
-------------------------------------------------- */

.row-no-padding [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.container .text-muted {
    margin: 20px 0;
}

.footer > .container ul.footerLinks {
    margin: 20px 0;
    padding: 0;
}

.footer > .container ul.footerLinks a {	
    margin-right: 0px;
    font-size : 17px;
    color: #FFFFFF;	
    opacity: 0.9;
}

.footer > .container ul.footerLinks a:hover{	
    opacity: 1;	
}

.footer > .container ul>li {	
    list-style-type: none;
    float: left;
    margin-right: 12px;
}

.footer > .container ul>li:last-child {
    margin-right: 0;
}

@media screen and (max-width: 767px) {
    .footer > .container ul>li {			
        float: none;		
    }
}

.footer > .container > .social {
    color: #FFFFFF;
    margin: 10px 0;		
    text-align: right;
}

.footer > .container > .social  a{
    margin-left : 20px;
}

.footer > .container > .social  a img{
    opacity : 0.9;
}

.footer > .container > .social  a img:hover{
    opacity : 1;
}


/*ev images*/
span.ev-social-action {
    display : inline-block;
    width : 42px;
    height : 42px;
    background-repeat: no-repeat;
}

.ev-social-facebook {
    background-image : url('/themeev/img/evonfacebookico1.png');
}

.ev-social-youtube {
    background-image : url('/themeev/img/evonyoutubeico1.png');
}


/* EV Section Config */
section.white{
    background-color: #ffffff;
}

section.light {
    background-color: #ededed;
}

section.light-dark{
    background-color: #DEDEDE;
}
section.dark{
    background-color: #333333;
}

section.padded-top {	
    padding-top : 50px;
}

section.padded-bottom {	
    padding-bottom : 30px;
}

section.padded {		
    padding-bottom: 30px;
    padding-top : 30px;
}

p.padded-rigth, div.padded-rigth, font.padded-rigth {
    padding-right: 10px;
}
div.margintop, p.margintop  {
    margin-top: 30px;
}

div.marginleft, p.marginleft, span.marginleft , h4.marginleft {
    margin-left: 30px;
}

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

div.marginright{
    margin-right: 30px;
}

div.mb10 , p.mb10{
    margin-bottom: 10px;
}

div.mt10 , p.mt10{
    margin-top: 10px;
}

div.no-margin {
    margin: 0 !important;
}

section.dark  .page-header, section.light-dark  .page-header {
    border-bottom: none; 
}

section.dark  .page-header, section.light-dark  .page-header {
    border-bottom: 1px solid #878787; 
}

.page-header {
    font-size: 38px;
    margin: 20px 0 20px;
}

p.info {
    padding-top: 30px;
    padding-bottom: 30px;
}

h1.strong, span.strong, td.strong, p.strong  {
    font-family: 'Source Sans Pro Bold';
}

span.invalid {
    color: #cc0000;
}

span.valid {
    color: #8ac50f;
}

span.valid-incomplete {
    color: #FF8300;
}

span.has-error
{
    font-family: 'Source Sans Pro';
    color: #cc0000;
    font-size: 18px;
    font-style: italic;

}

span.highlight, td.highlight, p.highlight, h4.highlight, .h4.highlight{
    color: #cc0000;	
}

span.highlight-blue, td.highlight-blue, p.highlight-blue, h4.highlight-blue, .h4.highlight-blue{
    color: #009de0;	
}

span.cutted , td.cutted {
    text-decoration: line-through;
    color: gray;
}

span.title-helper {
    font-size: 18px;
}

/* breadcrumb */
.page-header .breadcrumb {
    padding: 0;    
    background-color: transparent;
    border-radius: 0;  
    margin-bottom: 0;
}

.page-header .breadcrumb > li + li:before {
    padding: 0 5px;
    color: #ccc;
    content: "\003e";
}
.breadcrumb > .active {
    color: #cc0000;
}

.bottom-line {
    border-bottom: 1px solid #eee;
}

/*--------------------------------------------------
Form elements
-------------------------------------------------- */

/* buttons */
.btn-transparent {
    /* Becuase of the transparency and '.btn' overwright of properties, */
    /* this button color and border-color needs to be costumized in a   */
    /* case by case scenario*/
    color: #000;
    border-color: #000;
    background-color: transparent;
}

.btn-transparent:hover{
    color: #000000;
    border: 1px solid #000000;
    background: #EEEEEE;
}



.btn-danger {
    color: #fff;
    border-color: #cc0000;
    background-color: #cc0000;
/*    background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
    background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);*/
}

.btn-info { 
    border-color: #009de0;
    background-color: #009de0;
/*    background: -moz-linear-gradient(top, #19a8e4 0%, #018dca 100%);
    background: -webkit-linear-gradient(top, #19a8e4 0%,#018dca 100%);
    background: linear-gradient(to bottom, #19a8e4 0%,#018dca 100%);*/
}

.btn-unnoticed { 
    border-color:transparent;
    background-color: #666;
    border-radius: 26px;
    font-family: 'Source Sans Pro bold';
    font-size: 15px;
    line-height: 26px;
    text-transform: uppercase;
    color: #FFF;
    width: 250px;
    height: 50px;
/*    background: -moz-linear-gradient(top, #19a8e4 0%, #018dca 100%);
    background: -webkit-linear-gradient(top, #19a8e4 0%,#018dca 100%);
    background: linear-gradient(to bottom, #19a8e4 0%,#018dca 100%);*/
}

a.btn-info:visited{
    color: #FFF;
}

.btn-transparent-info{
    width: 100%;
    font-family: "Source Sans Pro Bold", sans serif;
    font-size: 16px;
    line-height: 24px;
    color: #EDEDED;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #EDEDED!important;
    border-radius: 4px;
    background: none;
}


/*buttons on fixed footer are larger!!*/
.navbar-fixed-bottom.footer-overlay .btn-info{
    width: 100%;
}

.btn-orange {
    border-color: #fca40c;
    background-color: #fca40c;
/*    background: -moz-linear-gradient(top, #fca40c 0%, #e0920b 100%);
    background: -webkit-linear-gradient(top, #fca40c 0%,#e0920b 100%);
    background: linear-gradient(to bottom, #fca40c 0%,#e0920b 100%);*/
}

.btn-file-custom {
    position: relative;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

input[type="file"] {
    display: block;
}

.btn-file-custom input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.form-control-custom{
    float: none;
    width: 320px !important;
    color: #555;
}
.btn-primary {
    color: #000000;
    border-color: #CFCFCF;

    background-color: #CFCFCF;
/*    background: -moz-linear-gradient(top, #cfcfcf 0%, #9f9f9f 100%);
    background: -webkit-linear-gradient(top, #cfcfcf 0%,#9f9f9f 100%);
    background: linear-gradient(to bottom, #cfcfcf 0%,#9f9f9f 100%);*/
}

.btn-primary:hover {
    color: #000000 !important;
}

.btn-reg{
    width:282px;
    height: 40px;
}

.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
    color: #000000;
    background-color: #FFFFFF;
    border-color: #DCDCDC;
}

/* primeira definição geral os botões do site nas forms... sujeito a alterações */

.btn,
.btn.focus, .btn:focus, .btn:hover
{
    font-family: 'Source Sans Pro Bold';
    height: 44px;
    font-size: 16px;
    border: none;
    color: #FFF;
    
    border-radius: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

}


.btn-user-cancel,
.btn.btn-user-cancel.focus, .btn.btn-user-cancel:focus, .btn.btn-user-cancel:hover
{
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    color: #000;
    display: inline-block;
    
    background-color: #fff;
/*    background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
    background: -webkit-linear-gradient(top, #fff 0%,#e8e8e8 100%);
    background: linear-gradient(to bottom, #fff 0%,#e8e8e8 100%);*/
}

.btn-outline,
.btn-outline:active,
.btn-outline:focus {
    color: #fff; 
    pointer-events: auto;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    text-transform: uppercase;
}


.btn-outline:hover {
    color: #000;
    background-color: #fff;
    border: 2px solid #fff;
}

.btn-user-save { 
    color: #fff; 
    pointer-events: auto;
    
    background-color: #00A1E5;
/*    background: -moz-linear-gradient(top, #19a8e4 0%, #018dca 100%);
    background: -webkit-linear-gradient(top, #19a8e4 0%,#018dca 100%);
    background: linear-gradient(to bottom, #19a8e4 0%,#018dca 100%);*/
} 

.btn-user-save.active, 
.open .dropdown-toggle.btn-user-save { 
    color: #000000; 
    background-color: #FFFFFF; 
} 

.btn-user-save:active, 
.btn-user-save.active, 
.open .dropdown-toggle.btn-user-save { 
    background-image: none; 
}

.btn-user-save.disabled, 
.btn-user-save[disabled] {
    pointer-events: none;
} 

.btn-user-save.disabled, 
.btn-user-save[disabled], 
fieldset[disabled] .btn-user-save, 
.btn-user-save.disabled:hover, 
.btn-user-save[disabled]:hover, 
fieldset[disabled] .btn-user-save:hover, 
.btn-user-save.disabled:focus, 
.btn-user-save[disabled]:focus, 
fieldset[disabled] .btn-user-save:focus, 
.btn-user-save.disabled:active, 
.btn-user-save[disabled]:active, 
fieldset[disabled] .btn-user-save:active, 
.btn-user-save.disabled.active, 
.btn-user-save[disabled].active, 
fieldset[disabled] .btn-user-save.active { 
    background-color: #00A1E5; 
} 

.btn-user-save .badge { 
    color: #00A1E5; 
    background-color: #000000; 
}

.btn-group-lg>.btn, .btn-lg {
    border-radius: 0;	
}

.input-group-addon {
    border-radius : 0;
}

/* forms */
.form-control {
    height: 44px;
    font-size: 18px;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
}

span.birthday-datepicker{
    position: relative;
    margin: -40px 12px 0 0;
    line-height: 40px;
    text-align: right;
    color: #9D9D9D;
    float: left;
    right: -92%;
}

form.with-border .form-control {
    border: 1px solid #EBEBEB;
}

div.has-error .form-control {
    border: 1px solid #cc0000;
}

.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
    color: #cc0000;
}

#modalAccessTitle{
    color: #00A1E5;
    font-size: 22px;
    margin-bottom: 18px;    
}

.modalAccessProducts{
    margin-bottom: 10px;
}

.modalAccessProductsTitle {
    color: #000;
    font-size: 18px;
    font-weight: bold;
    margin-right: 20px;    
}

/* number of found results at list header */
.counter {
    color : gray;
    font-weight: normal;
}

/* selectable list of elements  */
.selectable-icon-list-container{
    min-height: 20px;
    max-height: 300px;
    overflow: auto;
    padding: 5px;
    margin: 10px 0;
    background-color: #ffffff;
    
} 


.selectable-icon-item{
    position: relative;
    display: block;
    padding: 0;
    margin-bottom: 0;
    background-color: transparent;
    line-height: 40px;
}

.selectable-icon-item span {
    min-width: 32px;
}

#modalSaveAndEditResource .selectable-icon-list-container,
#modalSaveResource .selectable-icon-list-container{
    height: 300px;
    overflow: auto;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #888;
    overflow: auto;
}
/********************** Save Reesource modal creation **************************/
#modalSaveResource .selectable-icon-list-container .font-icon{
    color: #00A1E5;
}

/********************** Create Assignment Modal **************************/
#modalCreateLesson .form-group {
    padding-left: 0px;
    padding-right: 0px;
}

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


.close {
    opacity: 1;
}

.pointer {
    cursor : pointer;
}

.alert-danger, p.error-msg  {
    font-family: "Source Sans Pro Italic";
    font-size: 18px;
    color: #cc0000;
    background-color: #ffdada;
}

div.errorMessage {
    font-family: "Source Sans Pro Italic";
    font-size: 18px;
    color: #cc0000;
}

p.sucess-msg {
    font-family: "Source Sans Pro Italic";
    font-size: 18px;
    color: green;
}

div.no-side-margin {
    margin-left: 0;
    margin-right: 0;
}

/****************** COMPONENTS *********************/

/* global used input box   */
.special-input-box {
    border: 1px solid grey;
    background-color: #DEDEDE;
    height: 40px;
}

/*           Menu opener "..."              */

.dropdown-input{
    margin: 0;
    border-radius: 0;
    padding: 20px 30px;
    right: -1px;
    -moz-box-shadow: 0 2px 10px #888888;
    -webkit-box-shadow: 0 2px 10px #888888;
    box-shadow: 0px 2px 10px #888888;
    border: none;
    position: absolute;
    top: inherit;
    right: 0;
    z-index: 1000;
    display: none;    
    width: 350px;        
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;

}

.dropdown-menu{
    margin: 0;
    border-radius: 0;
    padding: 30px 30px;
    right: -1px;
    -moz-box-shadow: 0 2px 10px #888888;
    -webkit-box-shadow: 0 2px 10px #888888;
    box-shadow: 0px 2px 10px #888888;
    border: none;
}

.dropdown-menu li{
    padding: 5px 0;
    font-family: 'Source Sans Pro Regular';
    font-size: 18px;
}

/* header specific css for enabling ellipsis behavior on header menu*/
.dropdown-menu li a{
    padding: 0;
}

.dropdown button.menu-opener{
    border: 0;
    font-weight: bold;
    font-size: 30px;
    line-height: 30px;
    background-color: transparent;
    padding: 0;
}

/******************************************/
/*** Menu Actions "gravar | cancelar"  ***/
/******************************************/

ul.pipeMenu li{
    display: inline-block;
    line-height: 33px; /*altura do h1.section-title*/
    cursor: pointer; 
}


/******************************/
/*** ACTIONS OVER PICTURES  ***/
/******************************/


.action-icon-position { 
    position: absolute;
    right: 10px;
    top: 10px; 
}

.action-icon-bkg{    
    z-index: 20;
    width: 35px;
    height: 35px;
    background: white;
    border-radius: 50%;
    display: inline-block;    
}

.action-icon-bkg:hover{
    cursor:pointer;
}

.action-icon-faded:before{
    color:#CDCBCC;
}

.action-opac-area{
    z-index: 1;
    position: absolute;
    width:100%; 
    padding-left:15px;
    padding-right:15px;
    height:100%;
    background-color:black;                         
    opacity: 0.60;    
    /*linear-gradient( rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55) )*/
}

.action-opac-text{
    color :white;
    position: absolute;
    left: 20px;
    bottom: 20px;   
    z-index:30;
    /*display:none; */
    font-size: 16px;
}

.action-opac-text label{
    top: 12px;
    position: relative;
}

.action-icon:before{
    font-size: 40px;    
    position: relative;
    right: 2px;
    top: -11px;
    font-weight: 600;
} 

.action-icon.f-icon-drag:before{
    font-weight: normal;
    left:-2px;
}

/* Pop preview */
.pop-preview .popover{
    border: 0px;
    width: auto;
    max-width: none;
    top: 42px !important;
    left: 58px !important;
    padding: 0px;
}

.pop-preview .popover .popover-content{
    padding: 0px;
}

.pop-preview .popover .popover-content div{
    width: 200px;
    height: 150px;
    overflow: hidden;
    margin: 0 auto;
}

.pop-preview .popover .popover-content div img{
    right: 25%;
    position: relative;
}
.pop-preview .arrow{
    display: none;
}

/******          Modal    **************************/
/* modals */
.modal{
    margin: 120px auto 0 auto;
    padding: 0 !important;
    /*width: 750px;*/
    border: none;
}

.modal-open {
    overflow: hidden;
}

/* bugfix #180129 due to tour overlapping modals */
/* WARNING: Loader gif has to have z-index bigger than this defined in
   evmain.js in $.blockUI.defaults.css properties */
.modal-open .modal {
    z-index: 1103;
}

.modal .modal-dialog{
    margin: 0 auto;
}

.modal-dialog .modal-clean{ 
    background-color: #fff !important;
}

.modal .modal-dialog .modal-content{
    padding: 30px 0 50px 0;
    width: 100%;
    background-color: #EBEBEB;
    border-radius: 0;
}

.modal .modal-dialog .modal-content .modal-header {
    padding: 0 25px 0 50px;
    font-family: 'Source Sans Pro Bold', sans-serif;
    border-bottom: none;
}

.modal .modal-dialog .modal-content .modal-header .f-icon-close{
    background: none;
    border: none;
    font-size: 40px;
    line-height: 40px;
    text-align: right;
    padding: 0;
}

.modal-dialog .modal-header .modal-title{
    margin-top: 45px;
    color: #000;
}

.modal-dialog .modal-title{
    margin-top: 30px;
    font-family: 'Source Sans Pro Bold', sans-serif;
    color: #000;
}

.modal .modal-dialog .modal-content .modal-body {
    margin: 30px 0 50px 0;
    padding: 0 50px;
}

.modal-dialog .modal-content .modal-body .modal-text{
    margin-bottom: 30px;
}

.modal-dialog .modal-content .modal-body .modal-scroll-view {
    padding: 15px;
    width: 100%;
    height: auto;
    max-height: 250px;
    background-color: white;
    border-width: 1px;
    border-style: solid;
    border-color: #c1c1c1;
    /*overflow-y: auto;*/
}

.modal-dialog .modal-content .modal-body .modal-scroll-view .checkbox{
    margin: 0 0 12px 0;
    width: 100%;
    height: 25px;
}

.modal-dialog .modal-content .modal-body .modal-scroll-view .checkbox:last-of-type{
    margin: 0;
}

.modal .modal-dialog .modal-content .modal-body .form-group{
    margin-top: 50px;
    margin-bottom: 0;
    padding: 0;
    height: auto;
}

.modal .modal-dialog .modal-content .modal-body .form-group:first-child{
    margin-top: 0;
}

.modal .modal-dialog .modal-content .modal-body .form-group input[type="text"]{
    padding: 0 20px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-shadow: none;
}

.modal .modal-dialog .modal-content .modal-body .form-group .radio{
    margin: 7px 0;
    padding: 0;
    height: 26px;
}

.modal .modal-dialog .modal-content .modal-body .form-group select{
    
    border-style: solid;
    border-width: 1px;
    border-color: #cdcdcd;
    border-radius: 0px;    
}

.modal .modal-dialog .modal-content .modal-body .form-group .f-icon-arrow-down{
    position: relative;
    margin: -40px 12px 0 0;
    line-height: 40px;
    text-align: right;
    color: #9d9d9d;
}

.modal .modal-dialog .modal-content .modal-body .f-icon-arrow-down,
.modal .modal-dialog .modal-responsive-content .f-icon-arrow-down {
    position: relative;
    margin: -40px 12px 0 0;
    line-height: 40px;
    text-align: right;
    color: #9d9d9d;
}

.modal .modal-dialog .modal-content .modal-body .date-picker-left,
.modal .modal-dialog .modal-responsive-content .date-picker-left {
    padding-right: 16px;
}

.modal .modal-dialog .modal-content .modal-body .date-picker-right{
    padding-left: 16px;
}

.modal .modal-dialog .modal-content .modal-footer {
    padding: 0 50px;
    height: auto;
    border-top: none;
}

/*Small Devices, Tablets */
@media only screen and (max-width : 768px) {

    .modal .modal-dialog .modal-content .modal-footer div{
        padding: 0;    
    }
    
    .modal .modal-dialog .modal-content .modal-footer .btn{
        margin-bottom: 20px;    
        width: 100%;   
    }

    .modal .modal-dialog .modal-content .modal-footer label{
        margin-bottom: 20px;    
    }
}


/* tables */

table.ev-table tr {
    line-height: 70px;
    min-height: 70px;
    height: 70px;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top : none;
    border-bottom : 1px solid #eee;
    min-height: 60px;
    height: auto;
}

.table>tbody>tr>td.small, .table>tbody>tr>th.small, .table>tfoot>tr>td.small, .table>tfoot>tr>th.small, .table>thead>tr>td.small, .table>thead>tr>th.small {
    width : 40px;
}

.table>tbody>tr>td.center, .table>tbody>tr>th.center, .table>tfoot>tr>td.center, .table>tfoot>tr>th.center, .table>thead>tr>td.center, .table>thead>tr>th.center {
    vertical-align : middle;
}



/* Result lists */
div.list-search {
    border-bottom : 1px solid #eee;
    display: block;
    height: auto;
    overflow: auto;
    padding-bottom: 10px;
}

ul.list {
    width: 100%;
    padding: 0;
    clear: both;
}

div.list-more {
    border-top : 1px solid #eee;
    margin-top: 40px;
    margin-bottom: 20px;
    width : 100%;
    clear: both;
    height: auto;
    overflow: auto;
    padding-top: 10px;
}

ul.list>li {
    min-height: 60px;
    height : auto;
    overflow : auto;	
    list-style-type: none;
    padding-top : 10px;
    padding-bottom : 10px;
    border-bottom: 1px solid #eee;	
}

ul.list>li>div.icon {
    height : 100%;
    width: 40px;
    float: left;
    margin-right: 10px;
}

ul.list>li>div.icon img {
    height: 40px;
    width: 40px;
}

ul.list>li>div.desc {
    height : 100%;	
    width: 80%;
    float: left;
}

@media screen and (max-width: 767px) {
    ul.list>li>div.desc {		
        width: 60%;		
    }
}

ul.list>li>div.actions {
    height : 100%;	
    float: right;
}

ul.list>li>div.actions img {
    float : left;
    margin-left:  10px;
}

code {
    font-size: 80%;
}

/*ev images*/
span.ev-img-action {
    display : inline-block;
    width : 44px;
    height : 44px;
    background-repeat: no-repeat;
    cursor: pointer;
}

span.ev-img-action-small {
    display : inline-block;
    width : 30px;
    height : 30px;
    background-repeat: no-repeat;
    cursor: pointer;	
}

.ev-img-collapse {
    background-image : url('/themeev/img/ev-collapse.png');
}

.ev-img-expand {
    background-image : url('/themeev/img/ev-expand.png');
}

.ev-img-remove-item{
    background-image : url('/themeev/img/ev-remove-item.png');
}

.ev-img-close{
    background-image : url('/themeev/img/v09_bt_close.png');
}

.ev-img-check{
    background-image : url('/themeev/img/ev-check.png');
}


/* box */
.ev-box {
    min-height: 100px;
    background-color: #FFFFFF;
    overflow : auto;
    padding: 20px;	
    margin: 10px 0 10px;
}

.ev-box .h4, .ev-box h4 {
    font-family : 'Source Sans Pro Bold';
    color: #cc0000;	
}

.ev-box .content {
    margin-top: 10px;
    margin-bottom: 10px;
}

.separator-top
{
    border-top: 1px solid #878787;
}

.separator
{
    border-bottom: 1px solid #878787;
}

.authorization
{
    margin-top: 74px;
}



/* customization of boostrap + awesome-bootstrap-checkbox */


.big-checks .checkbox label::before {
    width: 44px;
    height: 44px;
    border-radius: 0;
    border: none;
}

.big-checks .checkbox input[type="checkbox"]:checked + label::after {
    background-image: url('/themeev/img/v09_bt_check.png');
    background-position: 32% 50%;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    content : "";
}

.big-checks .checkbox label::after {
    margin-left: -15px;
    color: gray;
}

.big-checks .checkbox label {
    padding-left: 35px;
}

.big-checks .checkbox {
    padding-top: 18px;
}

.big-checks-no-padding .checkbox{
    padding-top:0px;
    margin-top: 0px;
}

/* square big radios */
.big-square-radios .radio label::before {
    border-radius: 0;
    width: 44px;
    height: 44px;    
    border: none;
}

section.light-dark  .big-square-radios .radio label::before, .modal-content .big-square-radios .radio label::before {
    background-color: white; 
}

.big-square-radios .radio input[type="radio"]:checked + label::after {
    background-image: url('/themeev/img/v09_bt_check.png');
    background-position: 32% 50%;
    width: 44px;
    height: 44px;
    background-repeat: no-repeat;
    content : "";
}

.big-square-radios .radio input[type="radio"]:checked + label::after {
    font-size: 30px;
}

.big-square-radios input[type="radio"].styled:checked + label:after {
    font-family: 'FontAwesome';
    content: "\f00c";
}

.big-square-radios .radio label::after {
    margin-left: -15px;
    color: gray;	
    -webkit-transition: initial;
    transition: initial;
}

.big-square-radios .radio input[type="radio"]:checked + label::after {
    background-color: transparent;
}

.big-square-radios .radio label {
    padding-left: 35px;
}

.big-square-radios .radio {
    padding-top: 18px;
}

/*circle background radio*/
.big-square-radios.circle .radio input[type="radio"]:checked + label::after {
    background-image: url('/themeev/img/v09_bt_radio2.png');
    /* background-position: 32% 50%; */
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    content: "";
    left: -5px;
    top: 0;
}

.big-square-radios.circle .radio label::before {
    background-image: url('/themeev/img/v09_bt_radio1.png');
    /*background-position: 75% 69%; */
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    content : "";
}

section.light-dark  .big-square-radios.circle .radio label::before, .modal-content .big-square-radios.circle .radio label::before {
    background-color: transparent; 
}

.big-square-radios.circle .radio label {
    padding-left: 20px;
}

.big-square-radios.nopadding .radio label {
    padding-left: 0;
}

.big-square-radios.nopadding .radio {
    padding-top: 0;
}

/* ==== ERROR PAGES ==== */

section#errors {
    height: 100%;
    min-height: 100vh;
    background-color: #FFF;
    font-family: 'Source Sans Pro regular';
}

section#errors .container-table {
    display: table;
    height: 100% !important;
    min-height: 100vh;
}

section#errors img.img-responsive {
    margin: 10px auto 0 auto;
}

section#errors p.error-title {
    margin: 20px 0;
    font-size: 20px;
    font-family: 'Source Sans Pro Bold';
    line-height: 24px;
}

section#errors p.error-help {
    margin: 0 0 20px 0;
    font-size: 18px;
    line-height: 22px;
}

section#errors p.error-help a {
    text-decoration: underline !important;
}

section#errors .vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}

section#errors button {
    min-width: 100px;
    margin: 10px 0;
}

@media screen and (min-width: 500px) {
    section#errors p.error-title {
        margin: 5px 0;
       
    }
        
}


/** ================== CREATE ASSIGNMENT MODAL ================== **/
#modalCreateAssignment .selectable-icon-list-container{
    max-height: 200px;
    overflow: auto;    
}

#modalCreateAssignment .selectable-icon-list-container .font-icon{
    color: #00A1E5;
}

#modalCreateAssignment .selectable-icon-list-container {
    max-height: 200px;
    margin: 0;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #888;
    overflow: auto;
}

/***************** Referencial Material Creation modal *********************/
#modalCreateRefMaterial .selectable-icon-list-container{
    max-height: 300px;
    overflow: auto;    
}

#modalCreateRefMaterial .selectable-icon-list-container .font-icon{
    color: #00A1E5;
}


/*************************** Assignment ************************************/
#task-creation .task-bold-title{
    font-family: 'Source Sans Pro Bold',sans-serif;
    font-size: 18px;
    color:#000000;        
}


#task-creation label#lb-allow-upload{
    padding-top: 7px;
}

#task-creation .tasks-body{
    padding-top:20px;
    padding-bottom: 10px;
}

#task-creation .resource-label{    
    padding-top: 15px;    
}

#task-creation.edition-mode .resource-label{    
    text-decoration: underline;    
}


#task-creation> .tasks-body{
    background-color: white;
}

#task-creation ul {
    margin-top: 20px;
}

#task-creation .chk-all-students-tasks, 
#task-creation .chk-leaf-student-tasks{
    height: 40px;

}

#task-creation .chk-leaf-student-tasks:last-child{
    border-bottom:1px solid #D2D2D2;
    margin-bottom: 20px;

}

#task-creation .task-class-student>input[type="checkbox"]{ 
    margin-right: 17px;

} 


#task-creation #createNewTask{
    width: 126px;
    height: 40px;
}

#task-creation #cancelNewTask{
    width: 126px;
    height: 40px;
    background-color:transparent;
}

#task-creation label{ 
    font-size: 18px;
    color: #000000;  
    text-align: left;
}

#task-creation .panel-heading label {
    padding-left: 0px;
    padding-right: 15px;
}

#task-creation .footer-button {
    min-width: 155px;
    padding-left: 30px;
    padding-right: 0px;
}

/* ICONS CLASS*/
.pc-icon-black{
    background-image: url("/themeev/img/pc-monitor-black.png");    
    background-repeat: no-repeat;
    height: 39px;
}
.pc-icon-grey{
    background-image: url("/themeev/img/pc-monitor-grey.png");    
    background-repeat: no-repeat;
    height: 39px;
}

.line-input-size {
    line-height: 44px;
}

/* SELECT BOX
------------- */
.select-box {
    position: relative;
    float: left;
    width: 100%;
}
.select-box .icon {
    height: auto;
    background-image: none;
}
.select-box .select-text,
.select-box .select-search {
    
    font-weight: normal;
    line-height: 20px;
    padding: 11px 10px;
    border: 1px solid #a9a9a9 !important;
    background-color: #ffffff;
    margin: 0;
    outline: none;
    cursor: pointer;
    text-align: left;
    border-radius: 0;
    text-transform: none;
    color: #555;
    /* color: rgba(0,0,0,0.5); */
    /* text-shadow: 0 0 0 #141414; */
}
.select-box .select-search {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.select-box .select-search:not(.collapsed) {
    opacity: 1;
    z-index: 9;
}
.select-box .icon[data-toggle="collapse"][aria-expanded="true"]:after {
    z-index: 10;
}
.select-box .collapse,
.select-box .collapsing {
    position: absolute;
    top: 44px;
    box-shadow: 3px 3px 10px #c7c5c2;
    max-height: 225px;
    overflow-y: hidden;
    z-index: 2;
}
*:not(.touchevents) .select-box .collapse,
*:not(.touchevents).select-box .collapsing {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.select-box .select-box-options label {
    
    font-size: 16px;
    font-weight: normal;
    line-height: 21px;
    padding: 11px 10px;
    border-bottom: 1px solid #d9d9d9;
    margin: 0;
    background-color: #e7e7e7;
    padding-left: 40px;
    cursor: pointer;
}
.select-box .select-box-options input:checked + label,
.select-box .select-box-options input:checked + label.remove-focus.focus,
.select-box .select-box-options label.focus {
    /*background-color: #000;
    color: #fff;*/
}
.select-box .select-box-options input:checked + label.remove-focus {
    background-color: #e7e7e7;
    color: #141414;
}

.select-box .select-box-options label:hover {
    background-color: #e7e7e7;
    color: #141414;
}
.select-box *[aria-expanded="true"] ~ .select-box-alpha {
    display: block !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 1;
}

/****************************/
/** Teacher Add Book Modal **/
/****************************/

@media (max-width: 600px) {
    #modalTeacherAddBook .modal-responsive-header .modal-responsive-title {
        padding: 0 0 0 10px;
    }

    #modalTeacherAddBook .modal-responsive-header .close {
        padding: 0 10px 0 0;
    }

    #modalTeacherAddBook .modal-responsive-content {
        padding: 0 10px;
    }
}

 #modalTeacherAddBook .book-option {
    border-style: solid;
    border-width: 1px;
    border-color: #cdcdcd;
    border-radius: 0px;    
}

@media (min-width: 600px) {
    #modalTeacherAddBook #addNewBook {
        float: right;
    }
}

/** RESPONSIVE TEXT  ALIGMENT  **/

/*
 * Responsive text aligning
 * http://ohryan.ca/2014/08/14/set-responsive-text-alignment-bootstrap-3/
 */
.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

/* used for truncating content by heigh and line-height */
.ellipsis {
    width:100%;
    display:inline-block;  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;          
}
/** See: https://knackforge.com/blog/manoj/multi-line-ellipsis-using-simple-css   */
.ellipsis-multi-line {
    /* Over flow hidden hides the text if it is more than N lines  */
    overflow: hidden;
    /* To set '...' in absolute position */
    position: relative; 
    /* Use this value to count block height */
    line-height: 1.2em;
    /* Max-height = line-height (1.2) * lines max number (2) */
    max-height: 2.4em; 
    /* If the last visible word doesn't adjoin right side then this will fix the problem */
    text-align: justify !important;  
    /* place for '...' */
    padding-right: 40px;
    padding-left: 1em;
}

    /* create the ... */
.ellipsis-multi-line:before {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 20px;
    bottom: 0;
}

    /* hide ... if we have text, which is less than or equal to max lines */
.ellipsis-multi-line:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 20px;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
    background: white;
}




/* Loading blink style */
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
        opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
        opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
        opacity: .2;
    }
}

.loading-blink {
    font-size: 25px;
}

.loading-blink span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.loading-blink span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.loading-blink span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}



@media (max-width: 991px) {
    .modal .modal-dialog .modal-content .modal-body .date-picker-right,
    .modal .modal-dialog .modal-content .modal-body .date-picker-lef,
    .modal .modal-dialog .modal-responsive-content .date-picker-left {
        padding-right: 0px;
        padding-left: 0px;
    }    
}

#shareWithTeachers.selectable-icon-list-container {
    min-height: 290px;
    max-height: 400px;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #888;
    overflow: auto;
}

#popup_container.testSubmission{
    top: 40px !important;
}


/** ============== GENERIC STYLES BOXES WITH INFO  ============== **/
/* USED: ORDER HISTORY, DEVICES  */
.box-info-container .box-info{
    font-size:16px;
    line-height: 22px;  
 } 

.box-info-container .box-info .empty-content-msg,
.box-info-container .box-info .title-featured{    
    font-family: 'Source Sans Pro Bold';   
    color: #009DE0;  
    line-height: 20px;  
}

.box-info-container .box-info .empty-content-msg{
    line-height: 30px;
}

/* USED: MYACOUNT, ORDER HISTORY, DEVICES  */

.box-info{
    background-color: #FFF;    
    padding: 12px 20px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.16);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
}

.box-info .box-info-title {
    margin: 0 0 10px 0;
}

.box-info .box-info-title h2{
    width: calc(100% - 28px);
    font-family: "Source Sans Pro Light";
    color: #009DE0;
    font-size: 28px;
    line-height: 28px;
    float: left;
    cursor: pointer;
}

.box-info .box-info-title .box-info-toggle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    float: right;
}

.box-info .box-info-description {
    margin: 0;
    color: #333;
    font-family: "Source Sans Pro Regular";
    font-size: 16px;
    line-height: 18px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    display: inline-block;
}

.box-info .box-info-description.vanished {
    color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.box-info .text{
    margin: 0;
    font-family: "Source Sans Pro Regular";
    font-size: 16px;
    line-height: 20px;
    color: #333;
    display: inline-block;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {    
    h1.welcome-title,
    h1.gami-info{
        margin-bottom: 30px;
    }
    h1.welcome-title,
    h1.gami-info .gami-item{    
        font-size:18px;    
        
    }
    /* used in grid  layout for setup grid*/
    .left-resp-padding{
        padding-left: 16px;         
        padding-right: 0px;         
    }

    .right-resp-padding{
        padding-right: 16px; 
        padding-left: 0px;         
    }
    .center-resp-padding{
        padding-left: 8px;         
        padding-right: 8px; 
    }

    /** ============== GENERIC STYLES BOXES WITH INFO  ============== **/   
    /* USED: ORDER HISTORY, DEVICES  */
    .box-info-container .box-info{
        font-size:18px;
        line-height: 20px;  
    } 
    
    .box-info-container .box-info .empty-content-msg{
        line-height: 20px;
    }
    /* USED: MYACOUNT, ORDER HISTORY  */
    .box-info{
        padding: 30px 40px;
    }
    
    .box-info .box-info-title h2 {
        width: calc(100% - 30px);
        padding: 0 10px 0 0;
        margin: 0;
        font-size: 30px;
        line-height: 30px;
    }
    
    .box-info .box-info-title .box-info-toggle {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .box-info .box-info-description {
        font-size: 18px;
        line-height: 20px;
    }

    .box-info .text{
        font-size: 18px;
        line-height: 30px;    
    }

    .box-info .warning{
        font-size: 18px;
        line-height: 22px;
    }
}

/* === BLOCK UI === */
.blockUI {
    z-index: 1200 !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/***********************  PLUS Base CONTAINER ******************/
/* Used to add:
 - Classes
 - Subjects 
 - Books  
*/

.plus-item .plus-container{    
    border: 1px solid  rgb(205, 205, 205);
    position: relative
}

.plus-item .plus-container .f-icon-plus{   
    color: rgb(205, 205, 205);
    font-size: 55px;
    margin: 0; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
/* BOOKS */    
.book-list .book-item.plus-item .plus-container {   
   height: 200px; /* book max-height: 360px; */   
}
/* Classes */
#classesList .plus-item .plus-container{
    height: 268px;
}
/* Subjects */
#subjectsList  .plus-item .plus-container{
    height: 150px;
}


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
/* BOOKS */    
    .book-list .book-item.plus-item .plus-container {   
        height: 220px; /* book max-height: 360px; */   
    }
}


/* desktop */
@media only screen and (min-width : 992px) {   
    /*BOOKS*/    
    .book-list .book-item.plus-item{
        width: 23.5%;        
    }

    .book-list .book-item.plus-item .plus-container{
        height: 250px; /* book max-height: 280px; */   
    }

    /*Classes*/       
}

/***********************  PLUS Base CONTAINER END ******************/