#scatterChart {
  height: 420px;  
}

.bottom-spacer {
  margin-bottom: 12px;
}

.dropdown-inline {
  display: inline;
}

.loading-chart {
  width:100%;
  height: 420px;
  padding-top: 200px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #eee;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
 
.loading {
    font-family: sans-serif;
    font-size: 15px;
}
 
circle {
    fill: #333;
}

circle:hover {
	fill: orange;
}

circle.selected {
	fill: red;
	z-index: 999999999999999;
}

.opacity-slider {
  position: absolute;
  top: 10px;
  left: 10px;
}

button.AddToMixture {
  background: #fe6c3a;
  border-color: #f3470d;
}

button.AddToMixture:hover {
  background: #ad1a2c;
  border-color: #ad1a2c;
}

/*
.advanced-search-button {
	position: absolute;
 	right: 0;
} */

fieldset.col-6 {
	display: inline-flex;
	padding-left: 0;
	max-width: 48%;
}

fieldset.col-6 legend, legend, label {
	font-size: .9rem !important;
}

textarea {
	font-size: .9rem;
}


.form-item-mix {
    min-height: 64px;
}

.form-item-mix label, .form-item-intensity-slider label {
    font-size: 1rem !important;
    font-weight: 500;
}


#btn_select_mixA, .mixGroupA { background-color: rgb(31, 119, 180); fill: rgb(31, 119, 180); }
#btn_select_mixB, .mixGroupB { background-color: rgb(255, 127, 14); fill: rgb(255, 127, 14); }
#btn_select_mixC, .mixGroupC { background-color: rgb(44, 160, 44); fill: rgb(44, 160, 44); }

#btn_select_mixA.active { background-color: rgba(31, 119, 180, .2); color: rgb(31, 119, 180);}
#btn_select_mixB.active { background-color: rgba(255, 127, 14, .2); color: rgb(255, 127, 14);}
#btn_select_mixC.active { background-color: rgba(44, 160, 44, .2); color: rgb(44, 160, 44);}

.mix_0_data, #btn_select_mixA, .mixGroupA { background-color: rgba(31, 119, 180, .2); fill: rgb(31, 119, 180); color: rgb(31, 119, 180);}
.mix_1_data, #btn_select_mixB, .mixGroupB { background-color: rgba(255, 127, 14, .2); fill: rgb(255, 127, 14); color: rgb(255, 127, 14);}
.mix_2_data, #btn_select_mixC, .mixGroupC { background-color: rgba(44, 160, 44, .2); fill: rgb(44, 160, 44); color: rgb(44, 160, 44);}

#btn_select_mixA.active { background-color: rgb(31, 119, 180); color: #fff }
#btn_select_mixB.active { background-color: rgb(255, 127, 14); color: #fff }
#btn_select_mixC.active { background-color: rgb(44, 160, 44); color: #fff }

#btn_select_mixA { background-color: #fff; }
#btn_select_mixB { background-color: #fff; }
#btn_select_mixC { background-color: #fff; }



.sm-btn-pad {padding-top:33px;}

.MixedIn_1 { fill: rgb(31, 119, 180); }
.MixedIn_2 { fill: rgb(255, 127, 14); }
.MixedIn_3 { fill: rgb(44, 160, 44); }


.smell-space-cont h2 {
    margin: 0 0 0.5em;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 5px;
    text-shadow: 0 1px 0 #fff;
    font-size: 1em;
    line-height: 1.2;
}

.smell-space-cont .sidebar h2, .smell-space-cont h2 {
	margin-top: 1rem;
    margin-bottom: .5rem;
}

nav {
	color: #fff;
}

.form-group {
    margin-bottom: .45rem !important;
}

#mix-list thead th { 
	box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
	background: #343a40;
	color: #fff;
  font-weight:500;
  background: #fff;
  color: #000;
  line-height :1;
  padding-bottom:.5rem;
  font-size: 1rem;
  box-shadow: none; border: none;
  padding-top: 6px;
}

.sidebar #mix-list th, .sidebar #mix-list td {  
  padding: .5rem .15rem;

}

.sidebar #mix-list th { text-align: center; }

.sidebar #mix-list thead th {  
  font-size: 1em;
}

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

#mix-list th { color: #333; background-color: transparent; }
#mix-list td { border-bottom: 1px solid #dee2e6; }

.sidebar { border-right: 1px solid lightgray; }

.in-mix {
	display: inline-flex;
}

.table-hover tbody tr:hover {
    color: #fff;
    background-color: rgba(0,0,0,.9);
}

form.smell-space-advancedform {
  position:relative;
}

#edit-footer-buttons { 
/*  position: sticky;
  bottom:0; */
  padding:12px;
  width: 190px;
  margin-top: 12px; 
  z-index: 60000;
}

#edit-footer-buttons.js-is-sticky {
  background: #eee;
  background: linear-gradient(to bottom, #ECECEC 50%, #D1D1D1 100%);
  background: linear-gradient(to bottom, #ECECEC 50%, #A1A1A1 100%);
  border:1px solid #ddd;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
} 

#edit-footer-buttons.js-is-sticky::after {
  border-bottom-left-radius: 32px;
  border-width: 0 0 1px 1px;
  background: #000;
}

#navbar-brand-name .navbar-brand { color: #ad1a21; font-size: 1.7rem; line-height: 1.8rem; display: block; margin: 0; padding: 0;}
#navbar-brand-name .site-name-slogan { color: #ef8764; }

.navbar-nav li a {
    color: #ad1a21 !important;
}

.navbar-nav li a:hover {
    color: #ef8764 !important;
}

#edit-pcxvalues {
	display: none; 
}

.basic_descript {
	display: block;
}

.basic_descript a {
  color: #ad1a21;
  font-style: italic;
  text-decoration: none;
}

#chart-container #edit-descriptions{
  display: none;
}

.form-control, .select2, .select2 .select2-selection__rendered {
  font-size: .95rem !important;
}
	
.mix_exp_add { display: none; }
.mix_exp_add path { fill: #000; }

  #power-gauge g.arc {
    fill: steelblue;
  }

  #power-gauge g.pointer {
    fill: #e85116;**
    stroke: #b64011;
  }
  
  #power-gauge g.label text {
    text-anchor: middle;
    font-size: 14px;
    font-weight: bold;
    fill: #666;
  }

  .gauge_display {
    display: inline-flex;
  }

  .in-mix.badge {
    margin: 3px 4px;
    float: left;
  }

  .in-mix a {
    color: #fff;
    font-size:12px;
    line-height: 24px;
    margin-right: 3px;
  }

  .in-mix a:hover {
    color: #ffc107;
    font-size:12px;
    line-height: 24px;
    text-decoration: none;
  }

  .in-mix .close {
    color: #fff;
  }

  .mixRate {
    background: #ffc107;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-left: 1px solid #000;
    color: #000;
    padding: 1px;    
  }

  .mixMix {
    background: #ffc107;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left: 1px solid #000;
    color: #000;
    padding: 1px;
  }


.js-form-item-intensity-slider {
    min-height: 70px;
    padding-top: 8px;
}

.rangeslider-wrap {
    padding-top: 100px;
}

.rangeslider {
  position: relative;
  height: 4px;
  border-radius: 5px;
  width: 100%;
  background-color: gray;
}
  
  .rangeslider__handle {
    transition: background-color .2s;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border-radius: 100%;
    background-color: #0099FF;
    touch-action: pan-y;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    z-index: 3;
    top: -8px;
    box-shadow: 0 1px 3px rgba(black, .5),
                inset 0 0 0 2px white;
  }
  

  .rangeslider__handle__value {
    color:#fff;
    text-align: center;
    line-height: 21px;
    font-size:13px;
  }  

  .rangeslider__handle:after {
    height: 28px;
    width:28px;
  }
    /*
  }
  .rangeslider__handle__value {
      transition: background-color .2s, 
                  box-shadow .1s,
                  transform .1s;
      box-sizing: border-box;
      width: 90px;
      text-align: center;
      padding: 10px;
      background-color: #0099FF;
      border-radius: 5px;
      color: white;
      left: -35px;
      top: -55px;
      position: absolute;
      white-space: nowrap;
      border-top: 1px solid darken(#0099FF, 10%);
      box-shadow: 0 -4px 1px rgba(black, .07),
                  0 -5px 20px rgba(black, .3);
  }
        
  .rangeslider__handle__value:before {
        transition: border-top-color .2s;
        position: absolute;
        bottom: -10px;
        left: calc(50% - 10px);
        content: "";
        width: 0; 
        height: 0; 
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid;
        border-top-color: #0099FF;
  }
      */


  .rangeslider__value:after {
        content: " cm";
  }
  
  .rangeslider__fill {
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    background-color: #0099FF;
    border-radius: 5px;
  }
  
  .rangeslider__labels {
    position: absolute;
    width: 100%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
  }
  
  .rangeslider__labels__label {
      font-size: 0.75em;
      position: relative;
      padding-top: 15px;
      color: gray;
  }    


   .rangeslider__labels .rangeslider__labels__label:last-child {
      text-align: right;
    }

  @media (max-width: 1190px) {
    .rangeslider__labels__label {
       max-width: 42px;
    } 

   .rangeslider__labels .rangeslider__labels__label:nth-child(3) {
          overflow-wrap: break-word;
         text-align: center;
     }

     .js-form-item-intensity-slider {
        min-height: 90px;
     }
  }

  .rangeslider__labels__label:before {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        width: 1px;
        height: 9px;
        border-radius: 1px;
        background-color: rgba(99,99,99, .5);
  }
      
  .rangeslider__labels__label:first-child:before,
  .rangeslider__labels__label:last-child:before { 
        height: 12px;
        width: 2px;
  }
      
      .rangeslider__labels__label:first-child:before { background-color: #0099FF }
      .rangeslider__labels__label:last-child:before { background-color: gray }
      
      .rangeslider__labels__label:first-child { transform: translateX(0%) }
      .rangeslider__labels__label:first-child:before { transform: translateX(0%); left:0; }

      .rangeslider__labels__label:last-child { transform: translateX(0%) }
      .rangeslider__labels__label:last-child:before { transform: translateX(0%); left:100%; }

    }
  }
  
  // active state
  .rangeslider.rangeslider--active {
    .rangeslider__handle {
      .rangeslider, *      { background-color: lighten(#0099FF, 10%) }
      *:before  { border-top-color: lighten(#0099FF, 10%) }
    }
    
    .rangeslider__handle__value { 
      transform: translateY(-5px);
      box-shadow: 0 -3px 2px rgba(0,0,0, .04),
                  0 -9px 25px rgba(0,0,0, .15);
    }
  }

.mixture-group .mixtureName {
	padding-right: 0px;
  font-weight: 600; 
  font-size: 12px;
  display:block; 
  text-align: left; 
  margin-right: 5px;
  float: left;
}

.mixture-group .mixtureDescription{
	padding-left: 0px; 
  text-align: left;
  font-weight: 400; 
  font-size: 12px;
  margin-right: 5px;
  float: left;
  clear: left;
}

.mixture-group .mixtureDescription a {
  border-bottom: 1px dashed #fff;
}

.mixture-group .mixtureDescription a:hover {
  border-bottom: 1px solid #ffc107;
}

#edit-csv-file--description {
	margin-top:6px;
}

form.webform-submission-form  { max-width: 900px; } 

#block-footerdescription p {
  max-width: 260px;
}

#block-footerdescription a {
  text-decoration: underline;
}

.miniDesc {
  font-size:16px;
}

#myDiv { margin-bottom: 25px; }

.form-item-formula-items-0-is-component-a-dilution {
  text-align: center;
}

.extra-fields {
  color:#000;
}

.extra-fields  a {
  color: #000; border-bottom: dotted #000 1px;
}

.extra-fields  a:hover {
  color: #0062cc; border-bottom: dotted #0062cc 1px;
}

.site-name-slogan {
	position: absolute;
    top: 40px;
    left: 120px;
    color: #ad1a21;
}