/* ***************************** */
/* ******* Container Break - split between main website and tool************** */
/* ***************************** */

.pageheader-break {
    /*background-color: var(--color-whiteshadow); */
    background-color: var(--color-verydark);
    height: 50px;
    width: 100%;
    margin: 0% 0%;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    color: var(--color-white));
    display:  inline-grid;
    text-align: center;
}

.pageheader-break h1 {
    color: var(--color-white);
    font-size: 26px;
    text-align: center;
    padding: 10px 0px 5px 0px;
}

/* ***************************** */
/* ******* Page Header Container ************** */
/* ***************************** */

.pageheader-container {
    /*background-color: var(--color-whiteshadow); */
    background-color: var(--white);
    height: 40px;
    width: 98%;
    margin: 0% 1%;
    padding: 12px 0px 5px 0px;
    overflow: hidden;
    color: var(--white);
    display:  inline-grid;
    text-align: center;
}

.pageheader-container h3 {
    color: var(--color-verydark);
    font-size: 18px;
    text-align: center;
    margin: 1px 1px;
}

.pageheader-container p {
    color:  var(--color-dark);
    font-size: 14px;
    text-align: center;
    margin: 1px 1px;
}

/* ***************************** */
/* ******* Row Container with Background ************** */
/* 1 Column */
/* ***************************** */

.col-1-1 {
  float: left;
  width: 100%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
    
/* ***************************** */
/* ******* Row Container ************** */
/* 2 Columns */
/* ***************************** */
.col-1-2 {
  float: left;
  width: 50%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
    
.col-2-2 {
  float: left;
  width: 50%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
    
/* ***************************** */
/* ******* Row Container ************** */
/* 3 Columns */
/* ***************************** */
.col-1-3 {
  float: left;
  width: 33%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
    
.col-2-3 {
  float: left;
  width: 33%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}

    
.col-3-3 {
  float: left;
  width: 34%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
}
/* ***************************** */
/* ******* Graph Container ************** */
/* ***************************** */
    
.row-container-viz {
    float: left;
    width: 98%;
}

.viz-header {
    /*background-color: var(--color-whiteshadow); */
    background-color: var(--white);
    height: 60px;
    width: 100%;
    margin: 0% 0%;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    color: var(--white);
    display:  inline-grid;
    text-align: center;
    /*border: 1px solid #E6E6E6; */
}
    
.viz-header p{
    color:  var(--color-dark);
    font-size: 12px;
    text-align: center;
    margin: 0px 1px 50px 0px;
}
  
    
.viz-container {
    /*background-color: var(--color-whiteshadow); */
    background-color: var(--white);
    height: 400px;
    width: 99%;
    margin: 0% 0%;
    padding: 0% 0.5% 0% 0.5%;
    overflow: hidden;
    color: var(--white);
    display:  inline-grid;
    text-align: center;
    border: 1px solid #E6E6E6; 
}

/* ***************************** */
/* ******* Select Dropdown ************** */
/* ***************************** */
    
.filter-element-container {
  display: grid;
  place-items: center;
  text-align: center;
  height: 100px;
}
    
.filter-element-container-header {
    background-color: var(--white);
    height: 100px;
    width: 100%;
    margin: 0% 0%;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
    color: var(--white);
    display:  inline-grid;
    text-align: right;
}
    
.filter-element-container-header h1{
    color: var(--color-verydark);
    font-size: 20px;
    text-align: right;
    margin: 25 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
    
.filter-element-container-header p{
    color:  var(--color-dark);
    font-size: 12px;
    text-align: right;
    margin: 0px 0px 30px 0px;
    padding: 0px 0px 0px 0px;
}
    
.filter-dropdown {
    color:  var(--color-dark);
    padding: 5px 5px 5px 5px;
    font-size: 22px;
    font-weight: bold;
    /*
    border-radius: 6px;
    border: 2px solid var(--color-verylight);
    */
    border-top: 2px None var(--color-verylight);
    border-left: 2px None var(--color-verylight);
    border-right: 2px None var(--color-verylight);
    border-bottom: 2px solid var(--color-verylight);
    margin:  5px 5px 5px 5px;
    width:  200px; 
    height:  40px; 
    text-align: center;

    
}

    
.filter-dropdown:hover {
    cursor: pointer;
}
    
    
select option {
  background: var(--color-whiteshadow); 
    font-size: 12px;
  /*
  color: black; 
  box-shadow: inset 20px 20px #f00;
  */
}