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

.px-2{
  padding: 0.25em 1em;
}

.mb-2 {
    margin-bottom: 1rem;
}

.d-none {
    display: none !important;
}

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

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


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

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 2px; /* have to add it so that clientheight is computed correctly */
    padding: 15px 0 0 0; /* once margin-top: - 9px is added to adjust the top tiles */
}

    .child-cards .child-card {
        float: left;
        position: relative;
        width: 256px;
        height: 210px;
        margin: 0 15px 15px 0;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
        color: #363330;
        text-decoration: none;
    }

    .child-cards a:hover {
        top: 1px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    .child-cards a:active {
        top: 0;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    }

    .child-cards .child-card p {
        margin: 0;
        position: absolute;
        display: block;
        width: 100%;
    }

        .child-cards .child-card p.image {
            top: 0;
            left: 0;
        }

        .child-cards .child-card p.text {
            top: 138px;
            left: 0;
            vertical-align: text-bottom;
            padding: 0 15px 0 15px;
        }

    .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 .child-card:not([data-type="partition"]) div.explanation {
        padding: 0 15px;
    }    

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

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

    .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 div.explanation span:nth-child(2) {
        font-size: 0.3em;
        margin-top: -8px;
    }

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

    .child-cards .child-card .canvas .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] .image: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] .image: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] > .explanation,
    .child-cards .child-card[source2=sber] .image:not([data-type='infographic']) .explanation {
        font-size: 0.9em;
        font-weight: bold;
        color: #000;
        min-height: 45px;
    }

    .child-cards .child-card[source2=essadesignation] p.text,
    .child-cards .child-card[source2=climatesurvey] p.text {
        font-size: 1.5vw;
    }

    @media screen and (max-width: 480px) {
        .child-cards .child-card[source2=essadesignation] p.text,
        .child-cards .child-card[source2=climatesurvey] p.text {
            font-size: 3.5vw;
        }
    }

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

/* Covid-19 Banner */
.covid-banner {
    background-color: #003e5a;
    min-height: 45px;
    color: white;
    font-size: 16px;
    margin: -5px -5px 0 -5px;
    padding: 0.5em;
}

    .covid-banner p {
        margin-bottom: 0px;
        font-weight: bold;
    }

    .covid-banner svg {
        float: left;
        margin-right: 0.35em;
    }