html {
  height:100%;
}

.w3-sidebar{
  background: rgba(47, 54, 92,0.95); 
  /* background-color: #1e2130; */
  width: 210pt;
  /* opacity: 0.5; */
  /* rgba(30,33,48,0.9) */
}

body {
  height:100%;
  margin: 0;
  background-color: #dfe0e6;
  /* background-color: wihte, */
}


.noSelection{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}


.divDos1 {
  width: 25%;
  height: 240px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divDos2 {
  width: 75%;
  height: 240px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare {
  width: 50%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare1 {
  width: 30%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare2 {
  width: 40%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare3 {
  width: 60%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare4 {
  width: 20%;
  height: 700px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare5 {
  width: 25%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare6 {
  width: 50%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare7 {
  width: 100%;
  height: 392px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.divSquare8 {
  width: 100%;
  height: 691px;
  float: left;
  background-color: #dfe0e6;
  border: 0.0px solid black;
}


.interDivSquare {
  /* width:   calc(100% - 10px); */
  /* height:  calc(100% - 10px); */
  height:  calc(100% - 10pt);
  padding: 7pt;
  margin:  10pt 5pt 10pt 5pt;
  background-color: white;
  border-radius: 6px;
  background: white;
}


.modal {
  position: fixed;
  z-index: 1002; /* Sit on top, including modebar which has z=1001 */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */

}


.modal-content {
  position: absolute;
  left: 50%;
  top: 21%;
  transform: translate(-50%, -50%);
  width: 50%;
  padding: 30px;
  background-color: white;
}



/* https://community.plotly.com/t/setting-the-size-of-a-loading-component/20978/2 */
.dash-spinner.dash-default-spinner {
    margin: 1rem auto;
    width: 2000px;
    height: 50px;
    text-align: center;
    font-size: 5px;
    margin-left: -50px;
    z-index: 200
}
.dash-default-spinner-rect1,
.dash-default-spinner-rect2,
.dash-default-spinner-rect3,
.dash-default-spinner-rect4,
.dash-default-spinner-rect5{
    background-color: #007bff !important;
    height: 120px !important;
    width: 12px !important;
    display: inline-block !important;
    margin-right: 0.3% !important;
    margin-top: -30px !important;
    z-index: 200
}


/* .center {
  line-height: 350px;
  height: 100%;
  border: 0px solid green;
  text-align: center;
} */


/* If the text has multiple lines, add the following: */
/* .center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
} */