/* Global styles */
* {
  margin: 0;
  padding: 0;
  font-family: depot-new-web, sans-serif;
  font-size: 16px;
  color: #dedee6;
  

}

body {
  background: #1F2227;
}

h1 {
  font-size: 2.488rem;
  line-height: 1.2; 
  margin-bottom: 0.8rem; 
}

h2 {
  font-size: 2.074rem;
  line-height: 1.3; 
  margin-bottom: 0.6rem; 
}

h3 {
  font-size: 1.728rem;
  line-height: 1.4; 
  margin-bottom: 0.4rem; 
}

h4 {
  font-size: 1.44rem;
  line-height: 1.5; 
  margin-bottom: 0.3rem; 
}

h5 {
  font-size: 1.2rem;
  line-height: 1.6; 
  margin-bottom: 0.2rem; 
}

p {
  font-size: 0.98rem;
}

li {
  font-size: 0.9rem;
  line-height: 1.6; 
  margin-bottom: 0.2rem; 
}

/* Website styles */
.textblock, .textblock2 {
  padding: 90px 400px;
  background: -webkit-linear-gradient(#1F2227, #22272C);
  background: -o-linear-gradient(#1F2227, #22272C);
  background: linear-gradient(#1F2227, #22272C);
    background-repeat: no-repeat;
    background-size: contain;
  position: relative;
}

.date {
    font-weight: 300;

    margin-bottom: 20px;
}

.textblock2 {

  background: -webkit-linear-gradient(#22272C, #1F2227, #22272C);
  background: -o-linear-gradient(#22272C, #1F2227, #22272C);
  background: linear-gradient(#22272C, #1F2227, #22272C);
    background-repeat: no-repeat;
    background-size: contain;

}
.textblock .twocolumns, .textblock2 .twocolumns {
  column-count: 2;
  column-gap: 50px;
  
}

.textblock h1, .textblock2 h1{
  text-align: center;
  margin-bottom: 20px;
}

.textblock h2, .textblock2 h2 {
  text-align: center;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 40px;
}



.textblock p, .textblock2 p {
  font-size: 1.1rem ;
  line-height: 1.7rem;
  hyphens: auto !important;
     -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  margin-bottom: 1.7rem;
  font-weight: 300;
}

.textblock em, .textblock2 em {
  font-size: 1.1rem;
}

.center {
  text-align: center;
}

.largerScreen {
    display: none;
}

#map {
  background: linear-gradient(to bottom, #22252A 0%, #383C41 25%, #6B6E72 50%, #96989C 75%, #0F0E19 100%);
}

/* Tooltip styles */
.tooltip {
  position: absolute;
  z-index: 200;
  pointer-events: none;
  background: #22252A;
  padding: 15px;
  border-radius: 0 5px 5px 5px;
  font-size: 12px;
  opacity: 0;
  transition: opacity ease-in-out .5s;
  max-width: 300px;
  box-shadow: 0 1px 25px rgba(58, 62, 67, 0.7);
}

.tooltip h4 {
  font-size: 1.2rem;
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: 18px !important;
}

.tooltip p { 
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
}

.tooltip p:not(:last-child) {
  margin-bottom: 10px;
}

.tooltip img {
  
  margin-right: 5px;
}

.tooltip i::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0;
}

.tooltip i.adress::before {
  background: url("../assets/mapmarker.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip i.scholars::before {
  background: url("../assets/scholars.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip i.info::before {
  background: url("../assets/remarks.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip i.denomination::before {
  background: url("../assets/denomination.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip i.girls::before {
  background: url("../assets/girls.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip i.boys::before {
  background: url("../assets/boys.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.tooltip i.annExp::before {
  background: url("../assets/annualExpenditure.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Legend styles */
#legendContainer {
  position: absolute;
  height: auto;
  z-index: 10;
  background: #22252A;
  border-radius: 0 10px 10px 10px;
  margin: 0;  
  transition: all ease-in-out .5s;
  top: 20px;
  left: 20px;
  width: 450px;
  box-shadow: 0 1px 25px rgba(58, 62, 67, 0.7);
  opacity: .93; 
}

#legend {
  position: relative;
  height: auto;
  padding: 20px 20px 45px 20px;
}

#legend h2 {
  margin-bottom: 15px;
}

#legendContainer {
  height: 420px;
  transition: height ease-in-out 0.5s; 
}

#legendContainer:not(.short) {
  height: 495px;
}

#legendContainer.closed {
  height: 90px; 
}

#legendContainer .legendContent {
  opacity: 1; 
  transition: opacity ease-in-out .2s;
}

#legendContainer.closed .legendContent {
  opacity: 0; 
}


#legend .symbolKeys {
  margin: 25px 0px 45px 0px;
  display: flex;
  flex-wrap: wrap;
}

#legend .symbolKey {
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
}

#legend .symbolKey.dot:nth-child(2) {
  margin-left: 43px;
}

#legend #schoolsWithoutGeo {
  margin-left: 25px;
}

.legendToggler {
  transition: all ease-in-out .5s;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(90deg);
  font-style: normal;
  padding: 10px;
  z-index: 10;
}

#legendContainer.closed .legendToggler {
  transform: rotate(-90deg);
}


.legendToggler::after {
  content: "«";
}

.legendToggler:hover {
  cursor: pointer;
}


#legend .symbolKey .label {
  display: inline-block;
  position: relative;
  left: -25px;
  font-size: .98rem;
}

#legend .symbolContainer {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  left: -25px;
  margin-right: 10px;
  top: 4px;
  
}

#legend .symbolKey .colorIndicator,
#legend .symbolKey.dot .legendSymbol {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  opacity: .6;
  position: absolute;
  
}

#legend .symbolKey.dot .label:last-child {
  margin-right: 20px;
}

#legend .symbolKey.dot {
  margin-bottom: 25px;
}

.short #legend .symbolKey.dot {
  margin-bottom: 0;
}

#legend .symbolKey.bar .legendSymbol {
  width: 10px;
  height: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: .8;
}

#legend .symbolKey .centerColor {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  opacity: 1;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#legend .symbolKey .barChartColorIndicator {
  display: inline-block;
  width: 40px;
  height: 40px;
}


#mapViz {
  position: relative;
}


.uncertainLocationsGroup {
  fill: white;
}

.centerPoint {
  pointer-events: none;
}

.schoolCircle, .barBase {
  transition: stroke-width ease-in-out .3s;
}


#map {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 800px;
}

.mapContainer {
  position: relative;
}

.mapboxgl-canvas-container {
  cursor: move !important;
}


.topLeftCorner {
  position: absolute;
  z-index: 1;
  width: 50px;
  height: 10px;
  background-color: #22252A;
}

#schoolsWithoutGeo li {
  position: relative;
  list-style-type: none;
  padding-left: 20px;
  text-transform: capitalize;
}

#schoolsWithoutGeo li::before {
  content: "";
  width: 16px;
  height: 16px;
  opacity: .6;
  border-radius: 10px;
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
}

#schoolsWithoutGeo li.sundaySchool::before {
  background: #F2E422;
}

#schoolsWithoutGeo li.daySchool::before {
  background: #FF8B36;
}

#schoolsWithoutGeo li:first-child {
  margin-top: 15px;
}

#schoolsWithoutGeo:hover {
  cursor: default;
}

#sidebar h2 {
  text-transform: capitalize;
  margin-bottom: 15px;
}
#sidebar img {
  height: 12px;
  margin-right: 15px;
}




#popUp {
  opacity: 0;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  padding: 75px 25px 25px 25px  !important;
  background: #22252A;
  padding: 15px;
  border-radius: 8px 0 8px 8px;
  box-shadow: 0 1px 25px rgba(58, 62, 67, 0.7);
  max-width: 400px;
  opacity: .93;
  transition: all ease-in-out .6s;
}

#zoomIcon::before {
  content: "";
  display: inline-block;
  width: 55px;
  height:55px;
  position: absolute;
  right: 0;
  top: 0;
  margin: 5px;
  background: url("../assets/zoom.svg");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 20px;
  margin-top: 15px;
}

#closeBtn {
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 5px;
  transition: all ease-in-out .3s;
  
}

#closeBtn::before {
  content: "";
  display: inline-block;
  width: 20px;
  height:20px;
  position: absolute;
  right: 0;
  top: 0;
  margin: 5px;
  background: url("../assets/close.svg");
  background-repeat: no-repeat;
  background-size: contain;
  

}



#scatterViz{
  position: relative;
}

text {

  fill: #dedee6;

}

#scatterplot text {
  text-transform: capitalize;
}

#tooltip {
  position: absolute;
  z-index: 200;
  pointer-events: none;
  background: #22252A;
  padding: 15px;
  border-radius: 0 5px 5px 5px;
  font-size: 12px;
  opacity: 0;
  transition: opacity ease-in-out .5s;
  max-width: 300px;
  box-shadow: 0 1px 25px rgba(58, 62, 67, 0.7);
}

.xAxis text, .yAxis text {
  font-size: .65rem;
}

#tooltip i::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0;
}



#tooltip h4 {
  font-size: 1.2rem;
  line-height: 1;
  text-transform: capitalize;
  margin-bottom: 18px !important;
}

#tooltip p { 
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
}

#tooltip p:not(:last-child) {
  margin-bottom: 10px;
}

#tooltip img {
  
  margin-right: 5px;
}

#tooltip i.scholars::before {
  background: url("../assets/scholars.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#tooltip i.info::before {
  background: url("../assets/remarks.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#tooltip i.denomination::before {
  background: url("../assets/denomination.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#tooltip i.girls::before {
  background: url("../assets/girls.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#tooltip i.boys::before {
  background: url("../assets/boys.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#tooltip i.annExp::before {
  background: url("../assets/annualExpenditure.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#tooltip .pupilsRow {
  display: flex;
  flex-direction: row;
}

#tooltip .pupilsRow p:not(:last-child) {
  margin-right: 15px;
}



#scatterPlotContainer {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #343841, #1D2025, #1E2229, #1E2229, #1D2025, #1E2229, #343841);
 
}

#scatterplot {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.centerPoint {
  pointer-events: none;
}

.xAxis,
.yAxis {
  pointer-events: none;
}

.schoolSizeCircle {
  transition: stroke-width ease-in-out .3s;
}

.checkboxGroup {
  position: absolute;
  z-index: 2;
  top: 85px;
  text-align: center;
  right: 90px;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: transparent;
  /* Not removed via appearance */
  margin: 0;
  transition: all ease-in-out .5s;
}

label {
  position: relative;
  
}

input.x-checkbox[type="checkbox"] {
  position: absolute;
  left:0;
  top: 50%;
  transform: translateY(-50%);
}

input.y-checkbox[type="checkbox"] {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
}

input.x-checkbox[type="checkbox"] {
  appearance: none;
  background-color: transparent;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1em;
  height: .6em;
  border: 0.1em solid #DEDEE6;
  cursor: pointer;
  
}

input.x-checkbox[type="checkbox"]:checked {
  background-color: #DEDEE6;
}

input.y-checkbox[type="checkbox"] {
  appearance: none;
  background-color: transparent;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: .6em;
  height: 1em;
  border: 0.1em solid #DEDEE6;
  cursor: pointer;
}

input.y-checkbox[type="checkbox"]:checked {
  background-color: #DEDEE6;
}

.checkboxGroup label:not(:last-of-type) {
  margin-right: 20px;
  padding-left: 40px;
}

.checkboxGroup label:last-of-type {
  padding-left: 22px;
}

span.x-tooltip, 
span.y-tooltip {
  position: absolute;
  top: 40px;
  width: 250px;
  pointer-events: none;
  opacity: 1;
  transition: all ease-in-out .6s;
}

span.x-tooltip {
  left: 9px;
  padding-left: 5px;
}

span.y-tooltip {
  left: 30px;
  padding-left: 5px;
}

span.x-tooltip::after, 
span.y-tooltip::after {
  content: "";
  background-image: url(/assets/axislegendline.svg);
  display: block;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 8px;
}

/*span.x-tooltip::after {
  right: -10px;
}*/

span.y-tooltip::after,
span.x-tooltip::after {
  transform: rotate(90deg);
  left: 0;
}

i.x-shape::before,
i.y-shape::before {
  content: "";
  border: 0.1em solid #DEDEE6;
  display: inline-block;
  margin: 0px 5px;
}

i.x-shape::before {
  width: 1em;
  height: .6em;
}

i.y-shape::before {
  width: .6em;
  height: 1em;
}

#popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  max-width: 420px;
  line-height: 1.5;
  pointer-events: none;
  background: #22252A;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 1px 25px rgba(58, 62, 67, 0.7);
  padding: 70px 5px 30px 25px;
  opacity: 0;
  transition: ease-in-out .3s;
}

#popup::before {
  background: url("../assets/caution.svg");
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  position: absolute;
  left: 25px;
  top: 20px;
}

#resetButton {
  background-color: transparent;
  appearance: none;
  transition: transform 3s;
  cursor: pointer;
  margin-top: 15px;
  margin-left: 60px;
  padding-left: 20px;
  display: inline;
}

#resetButton::before {
  content: "";
  background: url("../assets/reset_zoom.svg");
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all .6s;
  margin-right: 10px;
 position: relative;
 top: 4px;
}

#SPlegend {
  position: absolute;
  width: 415px;
  left: 25px;
  top: 25px;
  background: #22252A;
  box-shadow: 0 -1px 25px rgba(58, 62, 67, 0.7);
  border-radius: 0 10px 10px 10px;
  opacity: .93;
  padding: 20px 20px 35px 20px
}



.SPsymbolKeys {
  margin-top: 20px;
  padding-left: 4px;
}

.SPsymbolKeys p {
  display: inline-block;
  position: relative;
  padding-left: 35px;
}

.SPsymbolKeys p:not(:last-of-type) {
  margin-right: 80px;
}

.SPsymbolKeys p.SPsundaySchool::before,
.SPsymbolKeys p.SPdaySchool::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.SPsymbolKeys p.SPsundaySchool::before {
  background: url("../assets/SPsundayschool.svg"); 
}

.SPsymbolKeys p.SPdaySchool::before {
  background: url(../assets/SPdayschool.svg);
}

.rotate-animation::before {
  animation: rotate .6s ease-in-out forwards;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-indicator span {
  display: block;
  width: 10px;
  height: 10px;
  margin: 10px;
  background-color: #dedee6;
  border-radius: 50%;
  opacity: 0.5;
  animation: scrollAnimation 1s infinite;
}

@keyframes scrollAnimation {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
}


/* "Mobile" */
@media (max-width:1630px) {
    body {
      
        background: -webkit-linear-gradient(#22272C, #1F2227, #22272C);
        background: -o-linear-gradient(#22272C, #1F2227, #22272C);
        background: linear-gradient(#22272C, #1F2227, #22272C);

    }
    
    .textblock, .textblock2 {
        background: transparent;
    }
    
    .largerScreen {
        font-style: italic;
        display: flex;
        position: relative;
        margin: 40px 0 20px 0;
    }
    
    .largerScreen h4 {
        position: absolute;
        margin-left: 130px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .largerScreen .iconContainer i::before {
        content: "";
        width: 85px;
        height: 85px;
        display: inline-block;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background: url("../assets/SPsundayschool.svg");
        animation: scale 4s ease-in-out infinite;
    }
    
    
    
    #mapViz, 
    #scatterViz {
        display: none;
    }
    
    @keyframes scale {
        0% {
            transform:scale(1);
        }
        50% {transform:scale(1.3);}
        100% {transform:scale(1);}
    }
}

@media (max-width:1210px) {
    .twocolumns {
        column-count: 1 !important;
        column-gap: 0 !important;
    }
    
    .center, h1, h2, h3 {
        text-align: left !important;
    }
    
    .textblock, .textblock2 {
        padding: 60px 25vw;
    }
}

@media (max-width:768px) {
    .textblock, .textblock2 {
        padding: 30px 15vw;
    }
}

@media (max-width:375px) {
    body {
        width: 375px;
    }
    
    .textblock, .textblock2 {
        padding: 30px 5vw;
    }
}