/*  (do not remove this :) */
/*  (not this either :) */

html, body { background: transparent; width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; }

#inputpane { width: 100%; }
#outputpane { display: flex; flex-direction: column; }

/* Style the buttons that are used to open the tab content */
.tab { float: left; min-height: 600px; width: 20%; }
.tab button { background-color: #2b2b2b; border: none; border-top: 1px solid #bcb2a6; color: white; cursor: pointer; font-size: 1em; outline: none; padding: 14px 16px; text-align: left; transition: 0.3s; width: 100%;}
.tab button:first-child { border-top: none;}
.tab button:hover { background-color: #404040; color: #fff; text-shadow: 0 0 1px #fff; }
.tab button.simulate { background-color: #274939; border: none; color: white; cursor: pointer; float: right; font-weight: bold; outline: none; padding: 25px 16px; text-transform: uppercase; transition: 0.3s; }
.tab button.simulate:hover { background-color: #36634e; text-shadow: 0 0 1px #fff; }
.tab button.simulate img { width: 32px; position: absolute; left: 16px; top: 16px; }
.tab button.active,
.tab button.active:hover { background-color: #951b1f; color: #fff; font-weight: bold; text-shadow: none;}

#tabpane { background: #e6e6e6; border: 10px solid #951b1f; float: left; margin: 0; padding: 0 3% 36px; min-height: 600px; width: calc(74% - 20px); }
.tabcontent { display: none; }
.tabcontent label { font-size: 120%; line-height:125%; display: block; margin: 24px 0 6px; }
.tabcontent select { font-size: 1em; }

.tabcontent { animation: fadeEffect 1s; }

.resultstab { display: flex; flex-direction: row; width: 100%; }
.resultstab button { background-color: #2b2b2b; border: none; border-left: 1px solid #bcb2a6; color: white; cursor: pointer; flex: 1; font-size: 1em; outline: none; padding: 5px; text-align: center; transition: 0.3s;}
.resultstab button:first-child { border: none; }
.resultstab button:hover { background-color: #404040; color: #fff; text-shadow: 0 0 1px #fff; }
.resultstab button.active,
.resultstab button.active:hover { background-color: #951b1f; color: #fff; font-weight: bold; text-shadow: none;}

/* Go from zero to full opacity */
@keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } }

.slidecontainer { width: 100%; }
.slider { -webkit-appearance: none; appearance: none; width: 75%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; }
.slider:hover { opacity: 1; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #274939; cursor: pointer; }
.slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #274939; cursor: pointer; }

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

#loader { display: none; position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -40px 0 0 -40px; border: 10px solid #ccc; border-radius: 50%; border-top: 10px solid #4caf50;
  width: 80px; height: 80px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }

.hidden { display: none; }
.noUi-target { width: 90%; }
.nouidiv { margin-bottom: 3em;}
.inactive { opacity: .5; }

.ui-slider .ui-slider-handle { height: 1.4em; width: 2.5em; }
.ui-state-default, .ui-widget-content .ui-state-default { background: #3e745b; border: 1px solid #3e745b; color: #fff; text-align: center; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover,
.ui-state-active, .ui-widget-content .ui-state-active { background: #274939; border: 1px solid #274939; }
.ui-slider-horizontal .ui-slider-handle { font-size: .75em; top: -.3em; }

.rangeSlider { width: 75%; }

/*  */