#regions-wrapper {
    width       : 60rem;
    max-width   : 98%;
    margin      : 0 auto;
    padding-top : .5em;
}

#regions {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
}

#regions .region {
    font-size      : 1.3rem;
    text-transform : uppercase;
    color          : #3758a1;
    display        : inline-block;
    width          : 15em;
    margin         : .5em 0;
    display        : flex;
    flex-flow      : row nowrap;
    align-items    : center;
}

#regions .region::before {
    content        : '\f21d';
    font-family    : 'Font Awesome 5 Free';
    font-weight    : bold;
    margin-right   : .5em;
    color          : #f1bd44;
    font-size      : 1.2rem;
    vertical-align : .1em;
}

#regions .region .region-count {
    margin-left : .3em;
    color       : #225e90;
    font-size   : .6em;
    font-weight : bold;
}


.region-map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 67.8%;
    overflow: hidden;
}
.region-map svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.region-map__fill {
    -webkit-transition: fill .25s ease-in-out;
    -o-transition: fill .25s ease-in-out;
    transition: fill .25s ease-in-out;
    stroke: #ffcf4a;
    fill: #3758a1;
}
.region-map__region a.is-fill .region-map__fill, .region-map__region a:hover .region-map__fill {
    fill   : #ffcf4a;
}

#regions-wrapper #regions-school-stats {
    background : linear-gradient(to bottom right, orange, #cb2156, orange);
}


.toggle {
  cursor: pointer;
  display: inline-block;
}

.toggle-switch {
  display: inline-block;
  background: #ccc;
  border-radius: 16px;
  width: 58px;
  height: 32px;
  position: relative;
  vertical-align: middle;
  transition: background 0.25s;
}
.toggle-switch:before, .toggle-switch:after {
  content: "";
}
.toggle-switch:before {
  display: block;
  background: #3758a1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 4px;
  left: 4px;
  transition: left 0.25s;
}
.toggle:hover .toggle-switch:before {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-switch {
  background: #f1bd44;
}
.toggle-checkbox:checked + .toggle-switch:before {
  left: 30px;
}

.toggle-checkbox {
  position: absolute;
  visibility: hidden;
}

.toggle-label {
  margin-left: 5px;
  position: relative;
  top: 2px;
}

@media only screen and (max-width : 50em) {
    #regions-wrapper .buttons-panel .flex-separator {
        display : none;
    }

    #regions-wrapper .buttons-panel {
        justify-content : center;

    }
}