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

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

    body .btn-outline-primary {
        color: #003e5a;
        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: #003e5a;
        }

.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: #363333; 
        }

    .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 {
        transform: scale(1.05, 1.05);
    }

    .child-cards .child-card.card:hover::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;
    }
     
    @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([source2=climatesurvey]):not([source2=essadesignation]) .card-img:not([data-type=bar]),
        .child-cards .child-card.card[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;
    }

.child-cards .child-card[source2=feederschools] .card-img-overlay,
.child-cards .child-card[source2=essaschools] .card-img-overlay,
.child-cards .child-card[source2=essadesignation] .card-img-overlay,
.child-cards .child-card[source2=sifamountreceived] .card-img-overlay,
.child-cards .child-card[source2=climatesurvey] .card-img-overlay,
.child-cards .child-card[source2=evidencebasedfunding] .card-img-overlay,
.child-cards .child-card[source2=sber] .card-img-overlay {
    padding-top: 0.25rem;
    padding-left: 1rem;
    top: 0;
}

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


    .child-cards .child-card[source2=essadesignation] div.explanation span:nth-child(1),
    .child-cards .child-card[source2=schooltitle1] div.explanation span:nth-child(1),
    .child-cards .child-card[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[source2=essadesignation] div.explanation span:nth-child(1),
        .child-cards .child-card[source2=schooltitle1] div.explanation span:nth-child(1),
        .child-cards .child-card[source2=climatesurvey] div.explanation span:nth-child(1) {
            font-size: 6vw; 
        }

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

 

    .child-cards .child-card[source2=essadesignation] div.explanation i,  
    .child-cards .child-card[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 .label-circle text{
        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: #5E5450;
        font-weight: 400;
        font-size: 2.8em;
    }
   

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

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

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

    .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[source2=evidencebasedfunding] text.point-label,    
    .child-cards .child-card[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[source2=evidencebasedfunding] text.point-label tspan,       
        .child-cards .child-card[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[source2=evidencebasedfunding] .explanation,    
    .child-cards .child-card[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[source2="sif"] .explanation span:not(.non-value) {
        font-size: 0.4em;
    }

    .child-cards .child-card[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;
}

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

.sel-col.asc::after {
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    content: "\f0de";
    margin-left: 0.5em;
}
/* -- end of table sort feature */

.mover {
    position: absolute;
    pointer-events: none;
    width: 250px;
    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;
}

.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;
}


.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;
    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;
}

.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;}
}

.cssanimations #loader .bar
{
	float:left;
	margin:0px 2px;
	width:10px;
	height:50px;
	background:#999;
}
.cssanimations #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;
}

.cssanimations #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;
}

.cssanimations #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;
}

.cssanimations #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;
}
.cssanimations #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;
}
.cssanimations #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;
}

.no-cssanimations #loader,
.no-cssanimations #loader .bar
{
    display:none;
}

.no-cssanimations .loading
{
    height:100px !important;         
    position:absolute;
    top:0;
    left:0;
    width:100%;    	
    background:transparent url("../Images/loading.gif") no-repeat center !important;
}

/* -- 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;
   } 
 
}