html {scroll-behavior: smooth;}
*:focus-visible{
outline: 2px solid crimson !important; 
scroll-margin-top: 85vh !important;
}

  .hidden {
visibility: hidden;


}

  .hidden2 {
visibility: hidden;


}

.displayed{
  width: 100%;
  justify-content: center;
  height:100vh;


  
}



                .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #010056;
}

input:focus + .slider {
  box-shadow: 0 0 1px #010056;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Table of contents */
.colourheader, .toc {
  background: #010056;
  color: white;
  padding: 6vh;
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.toc ul {
  list-style-type: disc;
  padding-left: 25px;
  margin-top: 5px;
}

.toc li {
  margin-bottom: 6px;
  font-weight: normal;
}

.toc a {
  color: white;
  text-decoration: none;
  font-weight: normal;
}

.toc a:hover {
  text-decoration: underline;
}

.toc h1 {
  margin-top: 25px;
  margin-bottom: 25px;
  font-size: 2.2em;
  font-weight: bold;
  text-align: center;
  padding-bottom: 10px;
  letter-spacing: 1px;
}

.toc h3 {
  display: inline;
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
}

/* Expandable text button */
.detail-toggle-btn {
  display: inline-block !important;

  /* allow wrapping */
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word;   /* ensures long text wraps */

  /* reset sizing constraints that prevent wrapping */
  width: auto;
  flex: 0 1 auto !important;

  box-sizing: border-box;

  /* styling */
  color: white;
  border: 1px solid white;
  background-color: transparent;
  font-weight: 500;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: left;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.detail-toggle-btn:hover,
.detail-toggle-btn:focus,
.detail-toggle-btn:active {
  color: white !important;
  border-color: white !important;
  background-color: transparent !important;
  outline: none;
  box-shadow: none;
}


.detail-toggle-btn-black {
  color: black !important;
  border-color: black !important;
  background-color: transparent !important;
}
.detail-toggle-btn-black:hover,
.detail-toggle-btn-black:focus,
.detail-toggle-btn-black:active {
  color: black !important;
  border-color: black !important;
  background-color: transparent !important;
}




                  /* GLOBALS */

                    html, body {
                        position: relative;
                        width: 100%;
                        height: 100%;
                      }


                @media screen and (min-width: 768px){


                    body {
                      color: #222;
                      background-color: #fff;
                      margin: 0;
                      padding: 0;
                      -webkit-box-sizing: border-box;
                      box-sizing: border-box;
                      font-family: Arial, Helvetica, sans-serif;
                      font-size: 18px;
                      line-height: 1.5;
                      word-wrap: break-word;
                    }
                    
                }
                
                  @media screen and (max-width: 767px){


                    body {
                      color: #222;
                      background-color: #fff;
                      margin: 0;
                      padding: 0;
                      -webkit-box-sizing: border-box;
                      box-sizing: border-box;
                      font-family: Arial, Helvetica, sans-serif;
                      font-size: 15px;
                      line-height: 1.5;
                      word-wrap: break-word;
                    }
                    
                }
                  
                  header, section, nav, footer, figure, caption { /* This places text in center of various elements */
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover;
                  margin: 0;
                  padding: 0;
                }

                footer {
                  margin: 60px 0 0 0;
                }
                
                /* These are the default heading styles */
                @media screen and (max-width: 767px){
                
                  
                .text-big {
                  font-size: 15px;
                  margin: 10px 0;
                }
                
                .text-article{
                  font-size: 15px;
                  margin: 10px 0;
                }
                  
                }
                
                @media screen and (min-width: 768px){
                
                  
                                 .text-big {
                  font-size: 15px;
                  margin: 20px 0;
                }
                
                    .text-article{
                  font-size: 15px;
                  margin: 10px 0;
                }
                
                
                }
                
                
                
                /* These are the default paragraph, image and blockquote styles */


                p {
                  margin: 0 0 0 0;
                }

                img {
                  max-width: 100%;
                  height: auto;
                  vertical-align: middle;
                }

                blockquote {
                  margin: 30px 0 6px 0;
                  font-size: 30px;
                  color: #777;
                }

                small {
                  font-size: 14px;
                }
                
                
                /* CLASSES */
                .header {
                  background-color: #f4f4f4;
                  position: fixed;
                  top: 0;
                  left: 0;
                  right: 0;
                  height: 2vh;
                  display: flex;
                  align-items: center;
                  justify-content: space-between; /* space between jump-link and logo */
                  z-index: 10;
                  padding: 0 15px;
                }
                
                /* Jump link on the left */
                .jump-link {
                  font-size: 16px;
                  white-space: nowrap;
                }
                
                /* Responsive adjustments */
                @media (max-width: 767px) {
                  .header {
                    padding: 0 10px;
                  }
                
                  .jump-link {
                    font-size: 10px;
                    margin-right: 10px;
                  }
                
                  .logo-img {
                    height: 5vh;
                  }
                }


                  
                /* This is for fixed background images sometimes visible between content */
                

                @media screen and (min-width: 768px){

                .bigfixedimage{
                height: 93vh;
                width:100%;
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size:cover;cover;

                border-radius: 25px;}
                
                .bigfixedimage2{
                height: 93vh;
                width:100%;
                background-attachment: relative;
                background-position: center;
                background-repeat: no-repeat;
                                background-size:cover;cover;

                border-radius: 25px;}
                
                }
                
                @media screen and (max-width: 767px){

                .bigfixedimage{
                height: 30vh;
                background-position: center;
                background-repeat: no-repeat;
                background-size:cover;auto;
                border-radius: 25px;}
                
                .bigfixedimage2{
               height: 30vh;
                               width:100%;

                background-position: center;
                background-repeat: no-repeat;
                background-size:cover;auto;
                border-radius: 25px;}
                
                }
                
                
                
                @media screen and (min-width: 768px){

                        
                /* This is a colour panel */
                .colourheader{
                color: #fff;
                background-color: #010056;
                background-image: none;
                background-attachment: fixed;
                /*min-height: 93vh;*/
                border-radius: 25px;
                }
                
                .colourheader2{
                color: black !important;
                background-color: #F36617 !important;
                background-image: none;
                background-attachment: fixed;
                /*min-height: 93vh;*/
                border-radius: 25px;
                }
                
                .colourheader3{
                color: black;
                background-color: #F4F4F4;
                background-image: none;
                background-attachment: fixed;
                /*min-height: 93vh;*/
                border-radius: 25px;
                }
                  
                /* This pads element so it is a smaller block within contaiing element, eg to make text start closer to center */

                .paddeddiv{
                position: relative;
                box-sizing: border-box;
                padding: 40px 0;
                /*min-height: 85vh;*/
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                max-width: 980px;
                margin: 0 24px;
                }
                  
                }
                
                @media screen and (max-width: 767px){

                        
                /* This is a colour panel */
                .colourheader{
                color: #fff;
                background-color: #010056;
                background-image: none;
                background-attachment: fixed;
                /*min-height: 30vh!important;*/
                border-radius: 25px;
                }
                
                .colourheader2{
                color: black !important;
                background-color: #F36617 !important;
                background-image: none;
                background-attachment: fixed;
                /*min-height: 30vh!important;*/
                border-radius: 25px;
                }
                
                .colourheader3{
                color: black;
                background-color: #F4F4F4;
                background-image: none;
                background-attachment: fixed;
                /*min-height: 93vh;*/
                border-radius: 25px;
                }
                
                
                .paddeddiv{
                position: relative;
                box-sizing: border-box;
                padding: 10px 0;
                min-height: 25vh;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                max-width: 980px;
                margin: 0 24px;
                }  
                  
                  
                }
                
                

               .col-medium {
                width: 100%;
                max-width: 680px;
                margin: 0 24px;
                }
 

                .text-indent {
                  margin-left: 30px;
                }
 
.selectize-input { font-size: 16px; line-height: 16px;}
.selectize-dropdown { font-size: 16px; line-height: 16px; } 

.sankey-link:hover { fill-opacity: 0.75 !important; }

.plotly .hoverlayer .hovertext { fill-opacity: 1 !important; stroke-opacity: 1 !important; }

/* Allow scrolling on mobile over graphs */
.scrolly {
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
}

.scrolly figure.sticky {
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

.plotly-scrolling-over {
  touch-action: pan-y !important;
  overflow-y: auto;
}

.scrolly .maindrag,
.scrolly .angulardrag,
.scrolly .radialdrag,
.scrolly .radialdrag-inner {
    pointer-events: none !important;
}

/* Make cut 1 over time larger on mobile screen*/
@media screen and (max-width: 767px){
  .scrolly figure.sticky {
    height: 60vh !important;
    top: 10vh !important;
  }

  .scrolly figure.sticky .plotly {
    height: 100% !important;
  }
}