/**********************************/

/* Simulator dialog */

/**********************************/

/* #simulatorDialog {
  background: #009922;
  position: relative;
} */

.ui-dialog {
  padding: 0 !important;
  outline: 0 none;
}

.ui-dialog .ui-dialog-titlebar {
  border-radius: 0;
  font-size: 1em;
}

.ui-dialog .ui-dialog-content {
  border: 10;
  overflow: auto;
  background: #B4C3CB;
}

/* Dialog's close button. */

.ui-dialog .ui-dialog-titlebar-close, .ui-icon-closethick {
  border: 0px !important;
  background-color: transparent !important;
  /* The image must be of the same width and height specified below. */
  background-image: url(../../../assets/images/simulator/close_simulator.png) !important;
  width: 25px !important;
  height: 25px !important;
}

/* Hides close button. */

/*.no-close .ui-dialog-titlebar-close {
  display: none;
}*/

.ui-widget-header {
  border: 0;
  border-radius: 0;
  color: #B4C3CB;
  background: #B4C3CB;
}

/**********************************/

/* Simulator canvas               */

/**********************************/

.homeFont {
  text-align: center;
  /* font-size: 16px; */
  color: white;
  /* TODO: color */
}

*:focus {
  outline: none;
}

/* Simulator. */

#simulatorDiv {
  width: 90%;
  height: 90%;
  z-index: 1;
}

.canvas-position {
  position: absolute;
  left: 1%;
  right: 0%;
  top: 1%;
  bottom: 0%;
}

.canvas-size {
  width: 105%;
  height: 104%;
  touch-action: none;
}

.div-canvas-position {
  position: absolute;
}

#loadingDataDiv {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* height: 25%; */
  overflow: auto;
  text-align: center;
  color: black;
}

/* Debug. */

#fps {
  position: absolute;
  right: 10px;
  top: 80px;
  width: 75px;
  height: 20px;
  z-index: 1;
  background-color: orange;
  text-align: center;
  font-size: 16px;
  color: white;
}