:root {
	  
  --tank_width: 200px;
  --tank_height: 600px;
  --floaterDiameter: 56px;
  --starDiameter: 50px;
  --starAnimation: spin 15s linear infinite;
  --waterLevel: 25px;
  
  --resizableArea_width: 230px;
  --resizableArea_minWidth: 230px;

		
       --gutterSm: 0.2rem;
       --gutterMd: 0.3rem;
       --gutterLg: 0.6rem;
       --colorPrimary400: #7e57c2;
       --colorPrimary600: #b7dda4;
       --colorPrimary800: #4527a0;
       --fontFamily: "Dosis", sans-serif;
       --fontSizeSm: 0.6rem;
       --fontSizeMd: 0.8rem;
       --fontSizeLg: 0.95rem;
       --fontSizeXl: 1.4rem;
       --fontSizeXx: 1.8rem;
       --lineHeightSm: 1.1;
       --lineHeightMd: 1.8;
       --transitionDuration: 300ms;
       --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);
  
       --inputPaddingV: var(--gutterSm);
       --inputPaddingH: var(--gutterLg);
       --inputFontSize: var(--fontSizeLg);
       --inputLineHeight: var(--lineHeightMd);
       --labelScaleFactor: 0.9;
       --labelDefaultPosY: 50%;
       --labelTransformedPosY: calc( (var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) * var(--inputLineHeight)) );
       --inputTransitionDuration: var(--transitionDuration);
       --inputTransitionTF: var(--transitionTF);
	      }
		  
  @charset "UTF-8"; 
  @font-face {
     font-family: 'FontAwesome';
       src: url('fonts/fontawesome-webfont.eot');
       src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
	        url('fonts/fontawesome-webfont.woff2') format('woff2'), 
			url('fonts/fontawesome-webfont.woff') format('woff'), 
			url('fonts/fontawesome-webfont.ttf') format('truetype'), 
			url('fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
     font-weight: normal;
     font-style: normal;
       } 

   * { margin: 0; padding: 0; box-sizing: border-box; } 

   body {
      display: flex; justify-content: end; font-size: 16px; background: #fff; font-family: "Inter", sans-serif;
         }
   h1, h2, h3 {
     font-size: 1.0em; margin: 0 0 0.75em; border-bottom: 0; font-weight: 500; color: green;
         }
   h3 {
	font-size: 1.0em; color: #333;
      }
   p {
	 font-size: 14px; margin-bottom: 10px; margin-left: 5px;
     }
    .align-right  {
		text-align: right;
 	     }	
    .align-right p {
		margin-right: 10px;
 	     }

    .workArea {
       display: flex; justify-content: space-between; align-items: center; height: 100vh; width: 100%; min-width: 700px; max-width: 1050px; 
	   margin: 0 auto; overflow: auto;
	      }	

    .statisticArea {
	   display: flex; min-width: var(--resizableArea_minWidth); width: var(--resizableArea_width); padding: 10px 0;

	     }	
		  
	.left, .right {
	  display: flex; flex-direction: column; justify-content: space-between; align-items: start;
	  height: 100vh; width: calc((100% - var(--tank_width) - 80px)/2); max-width: 400px;
      padding: 10px 0; margin: 0 20px;
	   }
	.right { 
	   align-items: end;
	   }
    .container {
      position: relative; width: var(--tank_width); height: var(--tank_height); border: 4px solid #555; border-radius: 5px; 
	  background: #1655ec; overflow: hidden;
         }
	.container::before {
       content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--waterLevel); background: white;
         }
    .track {
      position: absolute; width: 100%; height: 100%; left: -4px; top: -4px;
         }
	.topStar, .bottomStar {
	  position: absolute; display: block; width: var(--starDiameter); height: var(--starDiameter); 
	  margin-top: calc(-1 * var(--starDiameter)/2); margin-left: calc(-1 * var(--starDiameter)/2);
      z-index: 100; opacity: 0.75; animation: var(--starAnimation); transform-origin: center; 
	     }
	 @keyframes spin {
       100% {
          transform: rotate(360deg);
          }
       }
    .floater {
      position: absolute; width: var(--floaterDiameter); height: var(--floaterDiameter);
	  left: calc(-1 * var(--floaterDiameter)/2); top: calc(-1 * var(--floaterDiameter)/2);
      border-radius: 50%; border: 2px solid #ccc;
      display: flex; justify-content: center; align-items: center; overflow: hidden;
      color: white; font-size: 18px; text-shadow: 0px 0px 3px black; font-weight: bold;
         }
	.floater::before {
      content: ""; position: absolute; top: 0; left: 0;
      width: 100%; height: 100%; background: blue; z-index: -2;
         }
    .fill-layer {
      position: absolute; top: 0; width: 100%; height: 0%; background: #fafafa; z-index: -1;
         }
	.input-data, .blowing-data, .output-data  {
      position: relative; min-height: 100px; min-width: 230px; max-width: 360px; width: 100%; margin: 5px 10px; 
	  border: solid 1px #ccc; padding: 8px 10px; border-radius: 5px; 	
	     }
		 
    .input-form__inner  { 
	   overflow: auto; clear: both; 
	     }
	.input-form__field { 
	   position: relative; min-width: 200px; max-width: 240px;
	     }
	.input-form__field span.before, .input-form__field span.after  { 
		display: block; width: 30px; height: 30px; line-height: 30px; text-align: center;  
		position: absolute; top: 1px; left: 4px; font-family: FontAwesome; font-size: 20px; 
		  }
	#saveConfig.saved:hover, #saveConfig.saved:active, #saveConfig.saved {
	  border-radius: 0 3px 3px 0; cursor: auto;
	   }
	#saveConfig.active:hover {
	  background: #eee; border-radius: 0 3px 3px 0; cursor: pointer;
	   }
	#saveConfig.active:active, #saveConfig.active {
	  color: green; border-radius: 0 3px 3px 0; cursor: pointer;
	   }
	.input-form__field span.after { 
	    left: auto; right: 1px; cursor: pointer; 
		  }
	.input-field { 
	   display: block; margin: 30px 0 5px 0; padding: 0 36px; color: inherit; height: 32px; width: 75%; 
       font-size: var(--inputFontSize); line-height: var(--inputLineHeight); border: solid 1px #ccc; transition: box-shadow var(--transitionDuration); 
	      }
    .input-field::placeholder { 
	   color: #909EA5; letter-spacing: normal; 
	      }
    .input-label { 
	    display: block; position: absolute; bottom: var(--labelDefaultPosY); left: 0.5rem; font-size: 0.9em; font-weight: inherit;
		line-height: var(--inputLineHeight); opacity: 0; transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1); transform-origin: 0 0;
		transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF); 
		    }
    .input-label.error { 
	    color: red; 
		    }
	.input-field:placeholder-shown ~ .input-label { 
	    visibility: hidden; z-index: -1; 
		    }
	.input-field:placeholder-shown ~ .before { 
	    color: #ccc; 
		    } 
    .input-field:placeholder-shown ~ .after { 
	   color: #fefefe; 
	        }
    .input-field:not(:placeholder-shown) ~ .input-label, .input-field:focus:not(:placeholder-shown) ~ .input-label {
       visibility: visible; z-index: 1; opacity: 1; transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor));
	   transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms; 
	       }
	.input-field:not(:placeholder-shown) ~ .before, .input-field:focus:not(:placeholder-shown) ~ .before { color: #000; }
    .input-field:not(:placeholder-shown) ~ .after, .input-field:focus:not(:placeholder-shown) ~ .after	{ color: #999; }

    #fullAirVolume, #fullEnergyIn, #fullEnergyOut, .outputParameter  {
       display: inline-block; padding: 5px 10px; border: solid 1px #ccc; border-radius: 3px;	
	    }
	#localAirPressure {
     top: 25%;
       }
	#localTemperatureTop {
	 top: 20%;
	   }
	#localTemperatureBottom {
	  top: auto;
	  bottom: 10%;
	   }

    .leftSensor, .rightSensor {
      position: absolute; right: -40px; top: 75%; width: 80px; height: 50px; border: solid 3px #333; border-radius: 24px; z-index: 100;
      margin-top: -25px; background: #fff; font-size: 24px; text-align: center; line-height: 45px;	
	         }
	.leftSensor {
	  left: -40px; right: auto; top: 50%;
	    }
	.leftSensor span.letter, .rightSensor span.letter {
      font-size: 60%; padding-left: 3px;
	   }	
	   
   /*********************** STATISTIC AREA *******************/

    .statisticArea .vertical-line {
        position: relative; border: solid 1px #ccc; cursor: ew-resize;
	      }		
	.statisticArea .vertical-line::before  { 
		display: block; position: absolute; width: 35px; height: 35px; text-align: center; font-family: FontAwesome; font-size: 20px; 
		left: -17px; top: 50%; margin-top: -17px; content: "\f07e"; background: #fff; color: #999; 
		  }
	.statisticArea .data-box  {
      display: flex; justify-content: space-around; position: relative; float: left; min-height: 50px; max-height: 50px; 
	  min-width: 185px; max-width: 185px; width: 100%; margin: 5px 5px 5px 20px; border: solid 1px #ccc; padding: 8px 10px; border-radius: 5px; 
	     }	   
	#timer {
		font-size: 42px; line-height: 30px;
	      }
	.statisticArea .controlButtons  { 
		display: block; width: 35px; height: 35px; line-height: 34px; text-align: center; font-family: FontAwesome; font-size: 20px; 
		color: #999; 
		  }
	#buttonPlay {
		font-size: 23px; color: green; cursor: pointer;
	      }
	#buttonRecord {
		font-size: 24px; /* color: red; */
	      }
	
  input[type="text"], input[type="number"], textarea.styler {
	min-width: 200px; max-width: 240px; width: 100%; margin-bottom: 5px; padding-right: 9px;
    color: #333; font: 14px Arial,sans-serif; line-height: normal; background-color: #fcfcfc; 
    box-shadow: inset 1px 1px #F1F1F1,0 1px 2px rgba(0,0,0,0.1); 
    border: 1px solid #ccc; border-bottom-color: #B3B3B3; border-radius: 4px;
       }
  input[type="text"]:not([disabled]):hover,  input[type="number"]:not([disabled]):hover, textarea:not([disabled]):hover {
     border-color: #B3B3B3; background-color: #fff;
       }	
  input[name="configName"]{
	  padding-right: 40px;
        }