/* Adding Font and color for Report Card Widgets */
body {
    font-family: "Barlow", sans-serif;
    color: #363330;
    padding-bottom: 20px;
}

    body .btn {
        border-radius: 0;
        font-weight: 700;
        border-width: 2px;
    }

    body .btn-outline-primary {
        color: #363330;
        border-color: #003e5a;
        background-color: #fff;
    }

        body .btn-outline-primary:hover,
        body .btn-outline-primary.active,
        body .dropdown.show .btn-outline-primary,
        body .dropdown .btn-outline-primary:active,
        body .pagination .page-item.active .page-link {
            background-color: #003e5a !important;
            border-color: #003e5a !important;
            color: #fff !important;
        }

    body .btn-primary {
        background-color: #003e5a;
        border-color: #003e5a;
        color: #f1b300;
    }

        body .btn-primary:hover {
            background-color: #f1b300;
            border-color: #003e5a;
            color: #363330;
        }

.btn-parcc 
{
    color: #666666;
    background-color: #eeeeee;
    border-color: #eeeeee;
    border-radius: 4px;
    font-size: 1em;
}

.btn-light, .btn-light.dropdown-toggle, .btn-light:hover{
    color: #000;
    background-color: #d4d4d4;
    border-color: #d4d4d4;
    border-radius: 0;
    font-size: 1em;
}

.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle,
.btn-light.active:hover {
    color: #fff;
    background-color: #003e5a;
    border-color: #003e5a;
}

a, a:active, a:focus, a:hover
{
    color: #666666;
}

.btn-parcc.active, 
.btn-parcc.focus, 
.btn-parcc:active, 
.btn-parcc:focus, 
.btn-parcc:hover, 
.open>.dropdown-toggle.btn-parcc 
{
    color: #F8F8F8 !important;
    background-color: #a9a9a9;
    border-color: #a9a9a9;
}

.btn-parcc.active, 
.btn-parcc:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0);
    box-shadow: inset 0 0px 0px rgba(0,0,0, 0);
}

.dropdown-menu{
    padding: 1rem 0.5rem;
}
.dropdown-item.active, .dropdown-item:hover {
    background-color: #DEB53A;
    cursor:pointer;
    border-color:#fff;
    border-radius:25rem!important;  
    margin-bottom: 0.2rem;
    font-weight:600;
}

.btn-default:not(.btn-link)
{
     border-width: 2px;
     border-color: #3A6FCE;
     color: #3A6FCE;
     font-weight: 700;
}

.btn-default:not(.btn-link):hover,
.btn-default:not(.btn-link):focus, .btn-default:not(.btn-link).focus, 
.open > .btn-default.dropdown-toggle
{
    background:none;
    color: #254e96;
    border-color: #254e96;    
}

.btn-default:not(.btn-link):active, .btn-default:not(.btn-link).active
{
    background: #3A6FCE;
    color: #ffffff;
    border-color: #3A6FCE;
}

.relativecontainer
{
    position: relative;
    height:150px;
}

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

.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline{
    margin-left: 1.2em;
}

.options label {
    font-weight: normal;
}

.options label + label{
    margin-left: 1.2em;
}
/*-- tile visualization --*/
    .child-cards {
        margin: -5px 0 0 0;  /*have to add it so that clientheight is computed correctly */
        padding: 0.5rem 1rem 0.5rem 0.05rem;  /*once margin-top: - 9px is added to adjust the top tiles */
    }

        .child-cards .child-card.card {
            min-width: 30%;                    
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease-in-out;
            margin: 0.5rem;
            color: #363330; 
        }

    .child-cards .child-card.card::after {
        content: '';
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        opacity: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transition: opacity 0.3s ease-in-out;
        top: 0;
    }

    .child-cards .child-card.card:hover,
    .child-cards .child-card.card:focus, 
    .child-cards .child-card.card.focus {
        transform: scale(1.05, 1.05);
    }

    .child-cards .child-card.card:hover::after,
    .child-cards .child-card.card:focus::after,
    .child-cards .child-card.card.focus::after {
        opacity: 1;
    }

    .child-cards .child-card.card .card-img {
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .child-cards .child-card.card.covid {
        border-top: solid 1px #003e5a;
        border-left: solid 1px #003e5a;
        border-right: solid 1px #003e5a;
        border-bottom: solid 1px #003e5a;
    }

    .child-cards .child-card.card.covid .card-img {        
        height: calc(100% - 1.5em);
    }

    .child-cards .child-card.card.covid .card-img-overlay {
        padding-bottom: 2.5rem;
    }

    .child-cards .child-card.card.covid .card-footer {
        background-color: #003e5a;           
        padding:0;           
        margin:0;        
        border-top: 0;
        width: calc(100% + 0.05em);
        overflow: hidden;
    }
 
    .child-cards .child-card.card.covid .card-footer span {
        font-size:0.83em; /*reduce font size to fit it into a single line*/
        font-weight: bold;
        color: #fff;
        margin:0 0.5em;
    }

    .child-cards .child-card.card:not(.covid) .card-footer {
       display:none;
    }

    .child-cards .child-card .card-img[data-type="bar+xylabels"] .axis .tick {
        display: block;
    }

        .child-cards .child-card .card-img[data-type="bar+xylabels"] .axis .tick text {
            font-weight: bold;
        }

    .child-cards .child-card .card-img[data-type="bar+xylabels"] .axis.x
    .tick {
        opacity: 0.5;
    }
     
    @media (min-width: 768px) {
        .child-cards .child-card.card{
            max-width: 33%;
        }
    }
    @media (min-width: 576px) {
        .child-cards .child-card.card:not(.covid) {
            margin-bottom: 2rem;
        }

        .child-cards .child-card.card:not([data-source2=climatesurvey]):not([data-source2=essadesignation]) .card-img:not([data-type=bar]),
        .child-cards .child-card.card[data-source2=essadesignation]:not(:first-child) .card-img,
        .child-cards .child-card.card:not(:first-child) .card-img[data-type=bar] {
            width: calc(100% + 0.35em);
        }
    }

    .child-cards .child-card .card-img-overlay {
        top: auto;
        padding: 0.9rem;
    }
/*
    .child-cards .child-card .card-img-overlay .card-title {
        background-color: rgba(256, 256, 256, 0.7);
        padding: 5px;
        display: inline-block;
        width: calc(100% + 0.9rem);
    }
    */
.child-cards .child-card[data-source2=feederschools] .card-img-overlay,
.child-cards .child-card[data-source2=essaschools] .card-img-overlay,
.child-cards .child-card[data-source2=essadesignation] .card-img-overlay,
.child-cards .child-card[data-source2=sifamountreceived] .card-img-overlay,
.child-cards .child-card[data-source2=climatesurvey] .card-img-overlay,
.child-cards .child-card[data-source2=evidencebasedfunding] .card-img-overlay,
.child-cards .child-card[data-source2=sber] .card-img-overlay {
    padding-top: 0.25rem;
    padding-left: 1rem;
    top: 0;
}

.child-cards .child-card[data-source2=pupilcertstaffratio] .card-img-overlay {
    padding: 0.5rem 1.25rem;
}
.child-cards .child-card[data-source2=essadesignation] div.explanation,
.child-cards .child-card[data-source2=climatesurvey] div.explanation {
    padding: 0; /*overriding default 0 15px*/
    overflow: hidden;
}


    .child-cards .child-card[data-source2=essadesignation] div.explanation span:nth-child(1),
    .child-cards .child-card[data-source2=schooltitle1] div.explanation span:nth-child(1),
    .child-cards .child-card[data-source2=climatesurvey] div.explanation span:nth-child(1) {
        font-size: 3vw;
        min-height: 65px;
        line-height: 1.1em;
    }

    @media (max-width: 575px){
        .child-cards .child-card[data-source2=essadesignation] div.explanation span:nth-child(1),
        .child-cards .child-card[data-source2=schooltitle1] div.explanation span:nth-child(1),
        .child-cards .child-card[data-source2=climatesurvey] div.explanation span:nth-child(1) {
            font-size: 6vw; 
        }

    }
.child-cards .child-card[data-source2=essadesignation] div.explanation span:nth-child(2),
.child-cards .child-card[data-source2=climatesurvey] div.explanation span:nth-child(2) {
    margin-top: 0;
    background-color: #F5F3F3;
    padding: 5px 15px;
    height: 125px;
}

 

    .child-cards .child-card[data-source2=essadesignation] div.explanation i,  
    .child-cards .child-card[data-source2=climatesurvey] div.explanation i {
        clear: both;
        display: block;
        padding: 0 15px;
        font-size: 0.4em;
        font-style: normal;
        font-weight: 700;
    }

    .child-cards .child-card text.label
    {
        font-weight:700;
    }


.child-cards .child-card .card-img[data-type="essaschools"] text.label {
    font-size: 14px;
}

    .child-cards .child-card .label-circle text{
        font-size: 0.85em;
        font-weight: 700;
        color: #fff;
    }

    .child-cards .child-card > :not([data-type='bar']) text.point-label tspan,
    .child-cards .child-card text.axis-label tspan {
        text-anchor: middle;
    }

        .child-cards .child-card text.point-label tspan:nth-child(1) {
            font-weight: bold;
        }

        .child-cards .child-card text.point-label tspan:not(:first-child),
        .child-cards .child-card text.axis-label tspan {
            font-size: 0.8em;
        }

    .child-cards p.text span {
        clear: both;
        display: block;
    }

        .child-cards p.text span.title {
            font-weight: 700;
        }

        .child-cards p.text span.tag {
            font-size: .85em;
        }

.child-cards div.explanation {
    color: #363330 !important;
    font-weight: 400;
    font-size: 2.8em;
}
   

    .child-cards g.series {
        stroke-width: 0.2em;
    }

.child-cards .studentdiscipline div.explanation span:nth-child(2n+1),
.child-cards .cte div.explanation span:nth-child(2n+1)
/*, .child-cards .smisnapshot div.explanation span:nth-child(2n+1) */ {
    padding-right: 30px;
    font-size: 38px;
    margin-bottom: -13px;
}

.child-cards .studentdiscipline div.explanation span:nth-child(2n),
.child-cards .cte div.explanation span:nth-child(2n)
/*, .child-cards .smisnapshot div.explanation span:nth-child(2n)*/ {
    font-size: 14px;
    font-weight: bold;
}

.child-cards .smisnapshot div.explanation,
.child-cards .supportpersonnel div.explanation{
    font-size: 1em;
}

    .child-cards .smisnapshot div.explanation span:nth-child(2n),
    .child-cards .supportpersonnel div.explanation span:nth-child(2n) {
        display: inline-block;
        font-size: 0.83em;
        font-weight: normal;
    }

    .child-cards .supportpersonnel div.explanation span:nth-child(2n){
         font-size: 1em;
    }

        .child-cards .smisnapshot div.explanation span:nth-child(2n + 1),
        .child-cards .supportpersonnel div.explanation span:nth-child(2n + 1) {
            font-size: 1.5em;
            margin-right: 5px;
            font-weight: bold;
            display: inline-block;
        }

.child-cards .smisnapshot + .card-img-overlay,
.child-cards .supportpersonnel + .card-img-overlay {
    margin-bottom: -20px;
}
    .child-cards .smisnapshot + .card-img-overlay .card-title,
    .child-cards .supportpersonnel + .card-img-overlay .card-title {
        font-size: 1.1rem;
    }

.child-cards .supportpersonnel div.explanation div {
    padding: 2px 5px;
    margin: 6px 10px;
    font-weight: bold;
}

.child-cards.school .supportpersonnel div.explanation div {
    background-color: #fcf0cc;
}

.child-cards.district .supportpersonnel div.explanation div {
    background-color: #e9f1d6;
}

.child-cards.state .supportpersonnel div.explanation div {
    background-color: #e3eeeb;
}

    .child-cards div.explanation span 
    {
    display: block;
    clear: both;
    font-size: 0.8em;
}


    .child-cards div.explanation span.non-value {
        line-height: 1em;
        word-wrap: normal;
        overflow-wrap: normal;
    }

    .child-cards [data-type="partition"] div.explanation span:not(.non-value):first-child{
        white-space:pre;
    }
    .child-cards .image:not([data-type='evidencebasedfunding']) div.explanation span.non-value{
        width:60px;
        font-size:0.5em;
        margin-bottom: 8px; /*offset the next span sibling margin-top*/
    }

    .child-cards [data-type='evidencebasedfunding'] .explanation .non-value {
        color: #5E5450;
        font-weight: 400;
        font-size: 2.8em;       
    }

    .child-cards [data-type='partition'] .explanation .non-value{
        font-size: 0.75em;
    }

    .child-cards div.explanation span:nth-child(2) {
        font-size: 0.3em;
        margin-top: -8px;      
    }

    .child-cards [data-type="partition"] div.explanation span:nth-child(2){
        line-height: 1.1em;
    }

.child-cards path.brick.square {
    stroke-width: 1;
    stroke-linejoin: round;
}

    .child-cards .child-card .target,
    .evidencebasedfunding .canvas .target,
    .sber .canvas .target {
        stroke-dasharray: 5,5;
        stroke-dashoffset: 5;
        stroke: #000;
    }

    .child-cards .child-card .canvas .point.top,
    .evidencebasedfunding .canvas .point.top,
    .sber .canvas .point.top {
        stroke-linecap: butt;
        stroke-width: 4;
    }

    .child-cards .child-card .axis g.tick,
    .evidencebasedfunding .axis g.tick {
        display: none;
    }

    .child-cards .child-card .axis path.domain,
    .evidencebasedfunding .axis path.domain {
        stroke: #ccc;
    }

    .child-cards .child-card[source2^=achievementgap] text.text-label tspan:nth-child(2), .tile-icon {
        font-family: "FontAwesome";
    }

    .child-cards .child-card[data-source2=evidencebasedfunding] text.point-label,    
    .child-cards .child-card[data-source2=sber] .card-img:not([data-type='infographic']) text.point-label,
    .evidencebasedfunding text.point-label,
    .sber text.point-label {
        word-wrap: normal;
        text-anchor: end;
        font-size: 1em
    }

        .child-cards .child-card[data-source2=evidencebasedfunding] text.point-label tspan,       
        .child-cards .child-card[data-source2=sber] .card-img:not([data-type='infographic']) text.point-label tspan,
        .evidencebasedfunding text.point-label tspan,
        .sber text.point-label tspan {
            text-anchor: start;
        }

    .child-cards .child-card[data-source2=evidencebasedfunding] .explanation,    
    .child-cards .child-card[data-source2=sber] .card-img .explanation {
        font-size: 0.9em;
        font-weight: bold;
        color: #000;
        min-height: 45px;
    }

    .child-cards .child-card .card-img[data-type='infographic'] text.point-value {
        font-size: 2.5em;       
    }

    .child-cards .child-card .card-img[data-type='infographic'] .non-value text.point-value{
        font-size: 2.5em;
    }

    .child-cards .child-card[data-source2="sif"] .explanation span:not(.non-value) {
        font-size: 0.4em;
    }

    .child-cards .child-card[data-source2="sif"] .explanation span i {
        font-weight: 700;
        font-style: normal;
        font-size: 1em;
    }

    .no-data-label{
        display:none;
    }
     
/*-- end of tile visualization --*/
/* -- table sort feature --*/
th {
    cursor: pointer;
}

    th[data-format]::after {
        font-family: "Font Awesome 5 Free", "FontAwesome";
        font-weight: 900;
        content: "\00a0";
        white-space: pre;
        margin-left: 0.5em;
    }

.sel-col.desc::after{
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    content: "\f161";
    margin-left: 0.5em;
}

.sel-col.asc::after,
th[data-format]:not(.sel-col):hover::after {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    content: "\f160";
    margin-left: 0.5em;
}
/* -- end of table sort feature */

.mover {
    position: absolute;
    pointer-events: none;
    width: 279px;
    padding: 10px 10px;
    z-index: 1001;
}

.mover .row .header {
    font-weight: bold;
    font-size: 1.2em;
}

.mover .row .cell {
    font-weight: bold;
    margin: 1em 0;
}

.mover .row .cell div {
    margin: 0.5em 0;
}

.mover .row .cell:not(:last-child){
    border-right: solid 1px #b4b4b4;
}

.mover.wide{
    width: 350px;
}

    .mover.wide .row .cell:nth-child(4n + 1) {
        border-right: 0;
    }

    .mover.wide .row .cell {
        
        margin: 0;
    }

.lgi {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.mo-state > :not(.hover) {
    opacity: 0.2;
}

.table-display table > thead > tr > th {
    background-color: #b4b4b4;
    color: #fff;
    font-weight: 900;
    border-bottom: solid 5px #fff;
    border-top: solid 5px #fff;
    min-width: 125px;
}


.table-display table > tr > td:nth-child(2) {
    border-left: solid 5px #fff;
}

.table-display table > thead > tr > th:nth-child(2) {
    border-left: solid 5px #fff;
}

.table-display table > tbody > tr > td.header {
    background-color: #eeeeee;
    font-weight: bold;
    border-bottom: solid 1px #fff;
}

.table-display table > tbody > tr > td.color {
    padding: 0;
    min-width: 15px;
    width: 15px;
    border-bottom: solid 1px #fff;
}


.table-display table > tbody > tr > td:not(.color):not(.header) {
    text-align: center;
    border-right: solid 2px #b4b4b4;
    border-bottom: solid 1px #b4b4b4;
}

.table-display table > tbody > tr:last-child > td {
    border-bottom: solid 1px #b4b4b4;
}


.table-display .table th.border-left,
.table-display .table td.border-left {
    border-left: solid 5px #fff !important;
}

.table-display .table th.border-bottom,
.table-display .table td.border-bottom {
    border-bottom: solid 1px #b4b4b4 !important;
}

.table-display .table th.bg-transparent {
    background-color: transparent;
}

.loading
{
    text-align:center;
    height:100%;
    width:100%;
}
 
#loader
{
    width:85px;
    height:100px;
    margin:10px auto;
}
 
@keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}

@-o-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}

@-ms-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}

@-moz-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}

@-webkit-keyframes load{
0%{height:10px;
    margin:20px 2px;}
  50%{height:50px;
    margin:0px 2px;}
  100%{height:10px;margin:20px 2px;}
}

 #loader .bar
{
	float:left;
	margin:0px 2px;
	width:10px;
	height:50px;
	background:#999;
}

#loader .bar:nth-child(1){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
}

#loader .bar:nth-child(2){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.2s;
   -moz-animation-delay:.2s;
    -ms-animation-delay:.2s;
     -o-animation-delay:.2s;
        animation-delay:.2s;
}

#loader .bar:nth-child(3){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.4s;
   -moz-animation-delay:.4s;
    -ms-animation-delay:.4s;
     -o-animation-delay:.4s;
        animation-delay:.4s;
}

#loader .bar:nth-child(4){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.6s;
   -moz-animation-delay:.6s;
    -ms-animation-delay:.6s;
     -o-animation-delay:.6s;
        animation-delay:.6s;
}
#loader .bar:nth-child(5){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:.8s;
   -moz-animation-delay:.8s;
    -ms-animation-delay:.8s;
     -o-animation-delay:.8s;
        animation-delay:.8s;
}
#loader .bar:nth-child(6){
/*animation*/
-webkit-animation:load 1s linear infinite;
   -moz-animation:load 1s linear infinite;
    -ms-animation:load 1s linear infinite;
     -o-animation:load 1s linear infinite;
        animation:load 1s linear infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
} 
 
/* -- styling for result tables*/
.result table > thead > tr > th[colspan]
{
   text-align: center; 
}

.result tr > td[end-group] + td[start-group],
.result tr > th[end-group] + th[start-group],
.result tr > td[start-group],
.result tr > th[start-group],
.result tr > td[end-group] + td,
.result tr > th[end-group] + th {  
   border-style: solid dashed;
   border-color: #ddd;
   border-width: 0 0 0.1em 0.15em;
}

.result tr:last-child > td[start-group],
.result tr:last-child > td[end-group] + td {
    border-bottom: 0;
}
.result thead tr:last-child > th[start-group],
.result thead tr:first-child > th[end-group] + th:not([start-group]) {
    border-bottom: 2px #ddd solid;
}

@media print
{
    .child-cards .child-card {
        page-break-inside: avoid;
        border: 1px solid rgb(235, 232, 231);
    }

   .table
   {
       font-size:0.8em;
   } 
 
}

.dropDown.show {
    z-index: 100;
}

.parent-contentpane {
    min-height:450px;
}