html {
    min-height: 100% !important;
    height: 100% !important;
}

body {margin:0;padding:0;overflow: hidden;font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; }



.container {  display: grid;
  grid-template-columns: 1.3fr 0.4fr;
  grid-template-rows: 0.1fr 2.8fr 0.1fr;
  gap: 0px 0px;
  grid-auto-flow: row dense;
  grid-template-areas:
    "top top"
    "middle middle"
    "bottom bottom";
	min-width: 825px;
}

.top {  display: grid;
  grid-template-columns: 1fr 0.1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "top_left top_right";
  grid-area: top;
  height: 40px;
}

.top_right { grid-area: top_right; 
 height: 40px;
     background: black;
}

.top_left { grid-area: top_left; 
 height: 40px;
}

.middle {  display: grid;
  grid-template-columns: 1fr 300px;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: column;
  align-self: stretch;
  grid-area: middle;
}

.middle_left {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 60px 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "middle_left_top"
    "middle_left_bottom";
  grid-area: 1 / 1 / 2 / 2;
}

.middle_left_top { grid-area: middle_left_top; }

.middle_left_bottom { grid-area: middle_left_bottom; 
	    grid-row: span 2;


}

.middle_right {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "middle_right_top"
    "middle_right_bottom";
  grid-area: 1 / 2 / 2 / 3;
}

.middle_right_top { grid-area: middle_right_top; }

.middle_right_bottom { grid-area: middle_right_bottom; }

.bottom {  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "bottom_left bottom_right";
  align-self: end;
  grid-area: bottom;
  height: 50px;
}

.bottom_right { grid-area: bottom_right; }

.bottom_left { grid-area: bottom_left; }


html, body , .container {
  height: 100%;
  margin: 0;
}



.middle_left_section { grid-area: 1 / 1 / 3 / 3; }

.middle_right_section { grid-area: 1 / 3 / 3 / 4; }

.middle_right_top_section { grid-area: 1 / 3 / 2 / 4; }

.middle_right_bottom_section { grid-area: 2 / 3 / 3 / 4; }

.bottom_section { grid-area: 3 / 1 / 4 / 4; }



.reset-zoom {
	position: absolute;
	top: 50px;
	right: 30px;
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: fixed;
  z-index: 1;
  z-index: 100000000;
  
  margin-left: -50px;
  margin-top: -50px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  z-index: auto;
}

.selectBox {
				border: 1px solid #55aaff;
				background-color: rgba(75, 160, 255, 0.3);
				position: fixed;
			}


 .example {
      flex-shrink: 0;
      width: 300px;
      margin-bottom: 30px;
    }

    .square .clr-field button,
    .circle .clr-field button {
      width: 22px;
      height: 22px;
      left: 5px;
      right: auto;
      border-radius: 5px;
    }

    .square .clr-field input,
    .circle .clr-field input {
      padding-left: 36px;
    }

 .full .clr-field button {
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }


/* For presentation only, no need to copy the code below DEBUG 

.container * {
  border: 1px solid red;
  position: relative;
}

*/