/* CSS for visualisations sub-pages: 04-people.html in templates\visual\docs\sections\  */
/*CSS for page layout*/
div.section-body-2{	
	display:grid; 
	grid-template-columns:auto auto; 
	grid-column-gap:4em;
	}
#alluvial-container {
	display:grid;
	grid-template-columns: 60% 40%;
	margin-top:1em;
	background-color:#fff;
	padding:20px 20px;
	box-shadow: 0 4px 12px  rgba(64,60,67,.16)/*0 1px 3px rgba(0,0,0,0.12), 0 1px 5px 			rgba(0,0,0,0.24)*/;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
#alluvial-container:hover {
	box-shadow: 0 3px 6px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
/*CSS for chart elements*/
#container {
	width:100%;
}
.inline-block-child {
      display: inline-block;
   }
.cat-labels {
      font-size: larger;
      font-family: 'Roboto', sans-serif;
      color:#fff;
}
.highcharts-data-label {}

.highcharts-title {
      display: none;
}
/*CSS for dropdown and button elements*/
#parent {
   padding-bottom:12px;
   padding-left:12px;
   background-color:#fff;
   grid-column:auto / span 2;
}
button {
      /* Styling of both buttons*/
      color: #fff;
      font-size:1em;
      margin-left: 1em;
      margin-right:1em;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 2em;
      padding-right: 2em;
      box-shadow: 0px 5px 5px -2.5px #9abac1;
      border: 0.5px solid #4e767e;
      border-radius: 2.5px;
      background: #55828b;
	}
button:hover {
      box-shadow: 0px 10px 10px -5px #9abac1;
    }
label {
      /* Styling of labels of the dropdowns*/
      font-family: 'Roboto', sans-serif;
      font-size: 14px;
      color: #474747;
    }
select {
      /* Styling of both dropdowns*/
      font-family: 'Roboto', sans-serif;
      color: #474747;
      padding-top: 4px;
      padding-bottom: 4px;
      border: 1px solid #ddd;
      border-radius: 2.5px;
    }
/*CSS for supplementary author data section*/
#author-data{
	margin-top:1em;
	margin-left:1em;
	}
#author-data-1{
	border:1px solid #fafafa;
	background-color:#fafafa;
	padding:12px;
	font-size:14px;
	line-height:2;
}
#author-data-2{
	border:1px solid #fafafa;
	background-color:#fafafa;
	padding:12px;
	margin-top:1.5em;
	font-size:14px;
	line-height:2;
}
span.hw {
	font-style:italic;
	}
.wrapper {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  background-color: #fafafa;
  color: #333;
  padding:14px;
  font-size:14px;
  line-height:2.1;
}
.row {
 grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 40% 30% 30%;
 }
.data-count-author-1, .data-count-author-2{
	text-align:center;
}
.column-B, column-C {
	text-align:center;
}
/*CSS for instructions paragraph*/
div.chart-instructions {
	box-shadow:none;
}
#select-container-B.hidden,
#author-data-2.hidden {
  display:none;
}
span.hidden {
  visibility: hidden;
}
.bolded-author-data {
  font-weight: bold;
}
*{
  /*margin: 0;*/
  box-sizing: border-box;
}
.select-box,.select-boxB{
  width: 350px;
  display: flex;
  flex-direction: column;
}
.select-box,.select-boxB:focus {outline:none;}
.selected,.selectedB{
  border: 1px solid #ddd;
  border-radius: 2.5px;
  user-select: none;
  background-color: white;
  margin-bottom: 5px;
  color:#444;
  position: relative;
  order: 0;
  height: 40px;
}
.selected::after,
.selectedB::after{
  float:right;
  margin-top: 5px;
  margin-right: 10px;
  content:'' ;
  display: inline-block;
  border: 15px solid transparent;
  border-top-color: #55828b;
  margin-left:10px ;
  transition: all 0.1s;
}
.select-box .options-container.active + .selected::after{
  transform: rotateX(180deg);
  margin-top: -10px !important;
}
.select-boxB .options-containerB.activeB + .selectedB::after{
  transform: rotateX(180deg);
  margin-top: -10px !important;
}
.select-box .options-container, 
.select-boxB .options-containerB{
  background: white;
  border: 2px solid #ddd;
  color: #fafafa;
  width: 100%;
  transition: all 0.4s;
  border-radius: 5px;
  display: none;
  order: 1;
  position: absolute;
}
#select-container-B{
  transition: all 0.1s;
}
.select-box .options-container.active{
  margin-top: 50px;
  display: block;
  height: 400px;
  width: 350px;
  overflow-y: scroll;
  z-index: 75;
}
.select-boxB .options-containerB.activeB{
  margin-top: 50px;
  display: block;
  height: 400px;
  width: 350px;
  overflow-y: scroll;
  z-index: 75;
}
/*.select-box .options-container::-webkit-scrollbar,
.select-boxB .options-containerB::-webkit-scrollbar{
  width: 10px;
  scrollbar-color:auto;
  border-radius: 0 5px 5px 0;
}
.select-box .options-container::-webkit-scrollbar-thumb,
.select-boxB .options-containerB::-webkit-scrollbar-thumb{
  background:#c2c2c2 /*#55828b*//*;
  border-radius: 3px 3px 3px 3px;
}*/
.Auth-Name{
  font-size: 14px;
  line-height:1.5;
  color:#000;
}
.Auth-counts{
  font-size: 14px;
  font-weight: lighter !important;
  color:#70757a;
}
.selectedA{
  cursor:not-allowed !important;
}
.selectedB,
.selected{
  padding: 8px;
  cursor: pointer;
  font-size: 14px;
  list-style-type: none;
}
.select-box .option,.selectedA,.disabled-optionB, 
.select-boxB .option, .selected-optionB{
  padding: 4px 8px 4px 8px;
  cursor: pointer;
  font-size: 14px;
  list-style-type: none;
}
.select-box .option:hover,
.select-boxB .option:hover{
  background: #55828b;
}
.option:hover>span{
  color:#fafafa;
}
.select-box .option,.selectedA,
.select-boxB .option,.disabled-optionB, .selected-optionB{
  margin-left: -40px;
}
.disabledA{
  pointer-events: none;
  cursor:not-allowed !important;
  opacity:0.4;
}
.disabled-optionB{
  cursor:not-allowed !important;
  opacity:0.4;
  pointer-events: none;
}
.selectedA{
  opacity:0.4;
  cursor:not-allowed !important; 
  pointer-events: none;
}
.selected-optionB{
  opacity:0.4;
  cursor:not-allowed !important;
  pointer-events: none;
}
@media only screen and (max-width:1200px){
#alluvial-container {
	display:inline-block;
	width:100%;
	}
.Auth-Name {
  	font-size: 16px;
  	line-height:2;
	}
.Auth-counts {
  	font-size: 16px;
  	line-height:2;
	}
div.section-body-2{	
	display:grid; 
	grid-template-columns:100%;
	}
.intro-para{margin-bottom:2em;}
}
@media only screen and (min-width:884px) and (max-width:923px){
#Authors-B,
#Authors-A {width:280px;}
}
@media only screen and (max-width:883px){
button {
	margin-left:0em; 
	margin-top:1em; 
	margin-bottom:1em;
	}
}
@media only screen and (max-width:654px){
#alluvial-container {
	width:100%;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	}
#parent {
	padding-left:2px;
	margin:auto;
	}
.inline-block-child {
	width:100%;
	}
.select-box{
	width:100%;
	display:flex;
	flex-direction:column;
	}
.select-boxB {
	width:100%;
	display:flex;
	flex-direction:column;
	}
.select-box .option,.selectedB,
.selected,.selectedA,.disabled-optionB, 
.select-boxB .option, .selected-optionB{
	padding-top:8px;
	padding-left:8px;
	padding-bottom:0px;
	padding-right:0px;	
	}
.select-box .options-container.active{
  	width:87%;
	}
.select-boxB .options-containerB.activeB {
	width:87%;
	}
.Auth-Name {
  	font-size: 16px;
  	line-height:2;
	}
.Auth-counts {
  	font-size: 16px;
  	line-height:2;
	}
#author-data {
	margin:0;
	}
}