body{

    font-family: sans-serif;
    padding:10px;
    min-width:1650px;
}

.title_table {
    margin-top:5px;
    margin-bottom:10px;
    table-layout:fixed;
    width:100%;
    min-height:365px;
    max-height:365px;


}

.scroll_table {
    height:300px;
    overflow:auto;

}

#info_table {

    width:100%;


}



.title_table td {
    padding:4px;
    vertical-align:top;
}

#info_table td {
    padding:4px;
    font-size: 1.2em;

}

.toolbar {

     width:100%;
    background: #ededed;
    padding:2px;
    border: 1px solid #ededed;
    box-shadow: -1px 1px #dddddd, -2px 2px #dddddd, -3px 3px #dddddd, -4px 4px #dddddd, -5px 5px #dddddd;
    webkit-box-shadow: -1px 1px #dddddd, -2px 2px #dddddd, -3px 3px #dddddd, -4px 4px #dddddd, -5px 5px #dddddd;
    display:inline-block;
    margin-bottom:10px;
    white-space:nowrap;
    overflow:hidden;

}



.toolbar table {
    border:none;
    display:inline-block;
}

.toolbar td {

    overflow:hidden;
    white-space:nowrap;
}


.toolbar select {

    min-width: 275px;
    display:inline-block;

}

.toolbar input[type="radio"] {

    height: 1.5em;
}

.region_title {
    font-size: 2em;
    font-weight:bold;
    transform: translateY(25%);


}

.drop-down-container {

    display:inline-block;
    margin-right:20px;

}

.smalltoolbar {

    height:40px;
    width:100%;
   /* background: #ededed; */
    padding:3px;
  /*  border: 1px solid #ededed;
    box-shadow: -1px 1px #dddddd, -2px 2px #dddddd, -3px 3px #dddddd, -4px 4px #dddddd, -5px 5px #dddddd;
    webkit-box-shadow: -1px 1px #dddddd, -2px 2px #dddddd, -3px 3px #dddddd, -4px 4px #dddddd, -5px 5px #dddddd;
    */
}

td.smalltoolbar {

     background: #ededed;
     border: 1px solid #ededed;
     vertical-align:middle;
    /* box-shadow: -1px 1px #dddddd, -2px 2px #dddddd, -3px 3px #dddddd, -4px 4px #dddddd, -5px 5px #dddddd;
     webkit-box-shadow: -1px 1px #dddddd, -2px 2px #dddddd, -3px 3px #dddddd, -4px 4px #dddddd, -5px 5px #dddddd;
    */
}

.large_title {
    font-size: 1.2em;
    font-weight:bold;
    margin:5px 10px 5px 10px;
    display:inline-block;


}

.small_title {
    font-size: 1.2em;
    margin:5px;
    display:inline-block;
    font-style:italic;

}

.toolbar_title {

    font-size : 1.2em;
    margin: 5px 5px 10px 5px;
    display:block;
    font-weight:bold;

}

td.table_title  {
    background: #ededed;
    border-top: 3px solid white;
    height:40px;
}

div.tab-body {

  padding:0px 0px 60px 0px;
  overflow:hidden;
  min-height:600px;
  display:flex;

}

#focus_comments {

    max-height: 220px;
    min-height:220px;
    width:100%;
    resize:none;
    font-size: 1.2em;
}

#save_comments {

    font-size:1.25em;
    background: #ededed;
    float:right;
    min-width:100px;
    margin-top:6px;

}

.ctrl_label {

    font-size: 1.2em;
    margin: 12px;


}

.ctrl_label div {
    padding:10px;
}

label.disabled {

    color : #888888;
}

span.disabled {

    color: #888888;
}

.series_selector {


    position:absolute;
    white-space: nowrap;
    top:350px;

}

.series_checkbox {

    padding:8px;
}

.series_checkbox input[type="checkbox"] {
    opacity: 0;

}

.flag_img {

    height: 24px;
    vertical-align: middle;
}

.flag_label { //drop down part of select2

    font-size:1.2em ;
    margin-left: 10px;
    vertical-align: middle;

}





.series_checkbox label {

    position:relative;
    font-size:1em;
    display:inline-block;
    transform:translateY(-0.75em);
    padding-left:30px;
    cursor:pointer;

}

.series_checkbox label::before,
.series_checkbox label::after {
    position: absolute;
    display: inline-block;
    cursor:pointer;
}

.series_checkbox label::before{
    height: 24px;
    width: 24px;
    left: 0px;
    top: 0px;
    content: "";
}

.series_checkbox label::after {
    height: 8px;
    width: 16px;
    border-left: 3px solid;
    border-bottom: 3px solid;

    transform: rotate(-45deg);

    left: 3px;
    top: 4px;
    content: none; /*initially hidden */
}

.yearList {

    height:1.5em;
    width:6em;
    font-size: 1.2em;
    float:right;
    margin-right:20px;

}

.axis_edit_box {

    width: 5em;
    font-size: 1.2em;
    float :right;
    margin-right:20px;
    text-align:right;

}
.axis_check_box {


 height: 1.2em;
 width:1.2em;
 margin-left:20px;

}


.yearRange {

    height:2em;
    position:absolute;
    transform: translate(-50,0);
}

.yearRange select {

    width:5em;
    font-size: 1em;
}



option{
    font-size: 16px;
    padding: 8px;

}



.axisLabel {

    font-size: 1.2em;
    stroke: black;
    color:black;
    font-family: sans-serif;

}

.pieLabelText {

    font-size: 1.25em;
    color:black;
    font-weight:bold;
    font-family: sans-serif;

}

.prefLabel {

    font-size: 3em;
    stroke:black;
    fill:white;
    font-weight:bold;
    stroke-width:2;
    font-family: sans-serif;

}

.prefIcon {

  font-size: 5em;
  stroke:black;
  fill:white;
  font-weight:bold;
  stroke-width:2;
  font-family: sans-serif;

}

.axis {

    fill: none;
    stroke: #808080;
    font-size: 1.0em;
    color:black;
}

.legend-box {

    fill:none;

}

.legend-items text {
    font-family: sans-serif;
}

.tick text {
    fill: black;
    font-family: sans-serif;
}



line {
    shape-rendering: crisp-Edges;
    stroke: black;
}

.dataLine {

    stroke-width: 3;
    fill:none;
}

.vcLine {

    stroke: red;
    stroke-width: 2;
    fill:none;
    stroke-dasharray: 5,2;
}

.vcText {

    fill:red;
    font-size: 1em;
    font-family: sans-serif;

}

.medLine {

    stroke: green;
    stroke-width: 2;
    fill:none;
    stroke-dasharray: 5,2;
}

.medText {

    fill:green;
    font-size: 1em;
    font-family: sans-serif;

}



.flex-container {
    display: flex;
    flex-direction: row;
    align-items:top;
    flex-wrap:nowrap;
}

.box rect {

    stroke: black;
    stroke-width: 1;

}

.box line {

    stroke: black;
    stroke-width: 1;

}

table {

    border-width:0px;
}

.tooltip {

    position:absolute;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    padding:5px;
    font-size: 1.25em;
    max-width:500px;

}

.ctrl-section-title {

    font-size: 1.2em;
       margin:35px 5px 25px 20px;
}

.indented-ctrl-label {

    font-size: 1.2em;
    margin:20px 20px 20px 30px;

}

.option_box {

    font-size: 1.2em;
    margin:25px 5px 25px 10px;


}

.option_box  div {

    padding:5px;
}

.option_box input {

    height: 1.2em;
    width:1.2em;
    vertical-align: middle;
}

.option_box label {

    vertical-align: middle;
    margin-left:8px;
}

/* toggle switch from www.w3schools.com/howto/howto_css_switch.asp*/

 .switch {
    width: 60px;
    height: 34px;
    position: relative;
    display: inline-block;
    margin-top:10px;
    margin-left:15px;
 }

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 34px;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

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

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

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

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

.barLabel , .barTotal {

    font-size: 0.9em;
    font-family: sans-serif;
}

path.boundaries {

    /*main map of drc*/
    stroke-width: 1px;
    stroke: white;
    fill: gray;
    opacity : 1;

}

path.boundaries.selected {
    stroke-width:3;

}

path.former_province_boundaries, path.current_province_boundaries, path.coord_boundaries, path.country_boundaries {

    stroke-width: 3;
    stroke: black;
    opacity: 1;
    fill: none;

}

path.ha_boundaries {

  stroke-width: 2;
  stroke: white;
  opacity: 1;
  fill: none;
}


text.years {     /*colour bar labels*/

    font-size: 1.25em;
    font-family: sans-serif;
    transform : translateY(0.25em);

}

rect.colours { /*colour bar boxes */

    opacity :1;

}

button.action_button {

    background-color: #ededed;
  //  border: none;
 //   color: white;
    cursor: pointer;

}

button.action_button:focus {

  //  border:none;
    outline:0;
}

button.action_button:hover {

    border: 2px solid steelblue;
    -webkit-box-shadow: 0 0 3px 3px steelblue;
    -moz-box-shadow: 0 0 3px 3px steelblue;
    box-shadow: 0 0 3px 3px steelblue;

}


#logout_btn {

    background: url("../img/logout.png") left center no-repeat;
    border-radius:24px;
    height:48px;
    width:48px;
    margin:4px;
    border:none;

}

#logout_btn::hover {

    border:solid;

}

#save_btn {

    background: url("../img/save.png") center center no-repeat;
    top:0;
    float:right;
    border-radius:18px;
    height:36px;
    width:36px;
    margin:2px 6px 2px 2px;

}

fieldset {

    margin: 20px;
    border-radius: 10px;
    border: none;

}

.map_ctrl_group {

    margin: 20px 20px 20px 10px;
    border-radius: 10px;
    border: none;
    padding: 5px;

}

path.boundaries.data_region_clicked {

    stroke-width: 5;
    stroke: red;

}


path.prov_clicked {

    stroke-width: 5;
    stroke: red;
    visibility:visible;
}

#nocases {
    font-family: sans-serif;
}

#hatch {
    font-family: sans-serif;
}

.file_missing_msg{

    font-size: 2em;
    margin: 100px 0px 0px 120px;
    color:darkred;

}

.footer {

    border-top: 10px solid white;
    background-color: rgb(240,240,240);
    height:52px;
    text-align:center;

}

.footer_flag {

    margin-top: 8px;
    cursor: pointer;
    width:36px;
    height:36px;


}

.logo {

    width: 64px;
    height:64px;
    margin:2px 10px 2px 2px;

}

.slider_div {
    background: #dddddd;
    border-radius:8px;

}

.slider_div .ui-slider-range {
    background: #dddddd;

}

#login_name {

 font-size: 1.4em;
 font-family: sans-serif;
 color : #125070;

}

.info_box {

    font-size:1.2em;
    padding : 10px;

}

#tandcDlg  {
        font-size : 1.4em;
}

.citation {

    font-size: 1.2em;
    padding: 20px;
    font-style: italic;

}


#linkbox {

    margin-left:20px;
    font-size:1.2em;
    font-style:sans-serif;
    display:inline-block;

}

#linkbox div {
    padding:5px;
}

#linkbox a {

cursor: pointer;
color : #0007ff;

}

.linkbox a:hover {

color : #1212aa;

}

.dropdown {

    display:inline-block;
    cursor:pointer;
    position:relative;
    top:-32px;


}

.drop-down-menu {

    display:inline-block;
    cursor:pointer;
    top:-16px;


}



.dropbtn {

    border:none;
    padding:6px;
    font-size:1.2em;
    width:140px;
    font-weight:bold;
    display:inline-block;

}


.dropdown-content {

    display:none;
    position:absolute;
    background-color: #ededed;
    min-width:150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1;
    font-weight:normal;
    font-size:1.2em;


}


.dropdown-content a {

    padding: 6px 8px;
    display:block;
    text-decoration:none;
    color:black;

}

.dropdown-content a:hover {

    background-color: #ddd;

}

.dropdown:hover .dropdown-content {display:block;}

.dropdown:hover .dropbtn {background: #ddd;}

.drop-down-menu:hover .dropdown-content {display:block;}

.drop-down-menu:hover .dropbtn {background: #ddd;}

img.info-icon {

        width: 24px;
        height:24px;
        margin-right:12px;
        position:relative;
        top:12px;

}

.info-icon-txt {
/*Draws a grey circle round content*/
  border: 4px solid grey;
  padding-left:5px;
  padding-right:5px;
  border-radius:12px;
  font-family:serif;
  font-size:14px;
  font-weight:900;
  color:grey;
  background-color:white;

}


.stratList {

  height:1.5em;
  width: 415px;
margin-left: 24px;
margin-bottom:24px;


}

.strat-selector {

  height: 250px;
  width: 300px;
  background-color: white;
  margin-top: 20px;
  margin-bottom: 20px;
  border-style: solid;
  border-width: 1px;
  font-size:1em;

}

.strat-selector input[type="checkbox"] {

      width:24px;
      height:24px;

}

.strat-selector td {

  padding:4px;
}

.licence-logo {

      float:right;
      padding-top:8px;

}

.licence-logo img {

      height:80px;

}

#lastrow {

    background-color: #e0f3f8;

}


.strat-sel-box {

  padding:16px;
  display:table;
  width:90%;
}

.strat-sel-box select {

  float : right;
  overflow-y: auto;
  padding:4px;
}

.strat-sel-box option {

    font-size: 1.2em;
    padding: 0px;

}

.strategy-table  {

  border:none;
  margin-left:12px

}

.strategy-table td {

      vertical-align: top;
      padding:4px;

}

.strategy-table option {

    font-size:1em;
    padding:0px;
  }

  .strategy-table select {

    overflow:hidden;
    padding:4px;
    width:100%;
  }

  .warning {

    padding:4px;
    font-size:1.2em;
  }

  .warning img {
    heigth:32px;
    width:24px;

  }

  .warning td {
    vertical-align:top;
  }

  table.series-selector {

    table-layout:fixed;
  }

  table.series-selector th {

    font-weight:normal;
    vertical-align: bottom;
  }

  .with-tooltip{

      text-decoration: underline dashed blue;


  }

  .vega-embed {

    box-shadow: none !important;

  }

  .legend-icon {
    font-weight:bold;
    font-size:1em;
    margin-left:1em;
  }

  /*files captures stuff */

  .flies-captured-wrapper {

    position: relative;
    width: fit-content;

  }

  .flies-captured-container {

    background: #fff;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    min-height: 450px;
}

 .status-message {

    inset: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5em;
    padding: 1.5em;
    color: #333;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
    z-index: 5;
 }

 .custom-legend {
    position:absolute;
    top: 10px;
    right: 10px;
    background: #ffffffc2;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 1.25em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    pointer-events: none;
    z-index: 10;
}