@font-face {
  font-family: sansForgetica;
  src: url(SansForgetica-Regular.otf);
}
@font-face {
  font-family: roboto;
  src: url(roboto/Roboto-Regular.ttf);
}
body {
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    position: absolute;
    font-family: roboto;
    background: #363945;
}

#map_tl,
  #map_tr,
  #map_br,
  #map_bl {
    transition: opacity 0.5s;
  }
        
/* top options bar */
#optionsBar {
  position: absolute;
  right: 50%;
  /*width: 0%;*/
  /* margin: auto; */
  background: #363945;
  transform: translate(50%, 0);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 0 5px #363945;
  display: flex;
}
.optionsBar_no_activity {
  transform: translate(50%, -40px) !important;
  transition: 0.5s;
}
/* bottom about bar */
#aboutBar {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin: auto;
  background: #363945;
  transform: translate(50%, 0);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 5px #363945;
  cursor: default;
  transform-origin: bottom right;
}
.aboutBar_no_activity {
  transform: translate(50%, 40px) !important;
  transition: 0.5s;
}
#aboutContain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(54, 57, 69,0.67);
  display: none;
  justify-content: center;
  align-items: center;
}
#aboutContainArea {
  background-color: white;
  display: flex;
  height: 95%;
  width: 95%;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  position: absolute;
  max-width: 1000px;
}
.aboutContain_iframe {
  position: absolute;
  width: 95%;
  top: 30px;
  bottom: 30px;
}
#iframe_about_info {
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: initial;
  border: none;
}
#about_close {
  color: #363945;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 2px 4px;
  text-decoration: none;
}
li:hover {
  background-color: #363945;
  border-radius: 4px;
  box-shadow: 0 0 5px #363945;
}
.opt_bar_select {
  padding: 2px 4px;
}
.opt_bar_select:hover {
  background-color: #363945;
  border-radius: 4px;
  box-shadow: 0 0 5px #363945;
}

#quadActive {
  background-color: gray;
}

#quadContain {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}

.quadSections {
  display: block;
  opacity: 1.0;
  cursor: pointer;
}

/* quadrant labels */
.m_view_quad_active,
.m_view_label_inactive {
    display: block;
  }
*[id^='cell_lab_pos_'] {
  display: block;
  position: absolute;
  margin: auto;
  background: #363945;
  color: #EFE1CE;
  font-size: 20px;
}
.cellLabel_style {
  padding: 3px 5px;
  cursor: pointer;
}
:is(#cell_lab_pos_tl, #cell_lab_pos_tr) {
  border-radius: 4px;
  box-shadow: 0 0px 5px #363945;
}
:is(#cell_lab_pos_br, #cell_lab_pos_bl) {
  border-radius: 4px;
  box-shadow: 0 0 5px #363945;
}
#cell_lab_pos_tl {
  top: 25px;
  left: 25%;
  transform: translate(-50%, 0);
}
#cell_lab_pos_tr {
  top: 25px;
  right: 25%;
  transform: translate(50%, 0);
}
#cell_lab_pos_br {
  top: calc(100% - 50px);
  right: 25%;
  transform: translate(50%, 0);
}
#cell_lab_pos_bl {
  top: calc(100% - 50px);
  left: 25%;
  transform: translate(-50%, 0);
}
.cellLabel_quest {
  padding: 2px 4px 2px 4px;
  vertical-align: middle;
  cursor: pointer;
}

/* Description windows */
:is(#cellLabel_des_tl, #cellLabel_des_tr, #cellLabel_des_br, #cellLabel_des_bl) {
  box-sizing: border-box;
  display: none;
  position: absolute;
  width: 45%;
  height: 45%;
  background-color: white;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 0 5px #363945;
  overflow: hidden;
  max-width: 96%;
  min-width: 20%;
  max-height: 96%;
  min-height: 20%;
}
#desc_lab_resize_tl {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 2px 2px 0;
  cursor: nw-resize;
}
#desc_lab_resize_tr {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 0 2px 2px;
  cursor: ne-resize;
}
#desc_lab_resize_br {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 0 0 2px;
  cursor: se-resize;
}
#desc_lab_resize_bl {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 2px 0 0;
  cursor: sw-resize;
}
#cellLabel_des_tl {
  left: 2%;
  top: 2%;
}
#cellLabel_des_bl {
  left: 2%;
  bottom: 2%;
}
#cellLabel_des_tr {
  right: 2%;
  top: 2%;
}
#cellLabel_des_br {
  right: 2%;
  bottom: 2%;
}
#cellLabel_des_tr .switch,
#cellLabel_des_br .switch {
  left: 14px;
}
*[id^='descr_title_'] {
  width: 100%;
  text-align: center;
  padding: 4px 0;
}
hr {
  color: #EFE1CE;
}
*[id^='descr_info_'] {
  box-sizing: border-box;
  margin: 0 20px 0 20px;
  overflow-y: auto;
  position: absolute;
  top: 54px;
  bottom: 40px;
  font-family: sansForgetica;
  left: 0;
  right: 0;
  overflow-wrap: break-word;
}
.descr_info_hr {
  position: absolute;
  bottom: 20px;
  left: 8px;
  right: 8px;
}

*[id^='descr_close'] {
  color: #363945;
  position: absolute;
  top: 10px;
  cursor: pointer;
}
#descr_close_l {
  left: 14px;
}
#descr_close_r {
  right: 14px;
}


/* quadrants */
.holds-iframe {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}
[class*="l_x"],
[class*="r_x"] {
  position: absolute;
  /*background: #363945; /* dark */
  background: #EFE1CE; /* light */
  border-radius: 20px;
}
[class*="l_x"] :nth-child(1), 
[class*="r_x"] :nth-child(1) {
  border-radius: 20px;
}
[class*="l_x"] :nth-child(1):nth-child(1), 
[class*="r_x"] :nth-child(1):nth-child(1) {
  outline: none;
}
.tl_x1 {
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
}
.tl_x2 {
  top: 4px;
  left: 4px;
  right: calc(50% + 2px);
  bottom: 4px;
}
.tl_x3 {
  top: 4px;
  left: 4px;
  right: calc(50% + 2px);
  bottom: 4px;
}
.tl_x4 {
  top: 4px;
  left: 4px;
  right: calc(50% + 2px);
  bottom: calc(50% + 2px);
}
.tr_x1 {
  display: none;
}
.tr_x2 {
  top: 4px;
  left: calc(50% + 2px);
  right: 4px;
  bottom: 4px;
}
.tr_x3 {
  top: 4px;
  left: calc(50% + 2px);
  right: 4px;
  bottom: calc(50% + 2px);
}
.tr_x4 {
  top: 4px;
  left: calc(50% + 2px);
  right: 4px;
  bottom: calc(50% + 2px);
}
.bl_x1 {
  display: none;
}
.bl_x2 {
  display: none;
}
.bl_x3 {
  display: none;
}
.bl_x4 {
  top: calc(50% + 2px);
  left: 4px;
  right: calc(50% + 2px);
  bottom: 4px;
}
.br_x1 {
  display: none;
}
.br_x2 {
  display: none;
}
.br_x3 {
  top: calc(50% + 2px);
  left: calc(50% + 2px);
  right: 4px;
  bottom: 4px;
}
.br_x4 {
  top: calc(50% + 2px);
  left: calc(50% + 2px);
  right: 4px;
  bottom: 4px;
}

/* quadrant seperators */
#seperator_vertical {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-width: 0 2px 0 2px;
  box-shadow: 
    0 0 0 4px #363945, 
    0 0 5px 5px #EFE1CE;
}
#seperator_horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translate(0,-50%);
  border-width: 2px 0 2px 0;
  box-shadow: 
    0 0 0 4px #363945, 
    0 0 5px 5px #EFE1CE;
}
#seperator_border_top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border: 2px solid #363945;
  /*border-width: 0 0 2px 0;
  box-shadow: 
    0 0 0 4px #363945, 
    0 0 5px 5px #EFE1CE;*/
}
#seperator_border_right {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 0;
  border: 2px solid #363945;
  /*border-width: 0 0 0 2px;
  box-shadow: 
    0 0 0 4px #363945, 
    0 0 5px 5px #EFE1CE;*/
}
#seperator_border_bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border: 2px solid #363945;
  /*border-width: 2px 0 0 0;
  box-shadow: 
    0 0 0 4px #363945, 
    0 0 5px 5px #EFE1CE;*/
}
#seperator_border_left {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border: 2px solid #363945;
  /*border-width: 0 2px 0 0;
  box-shadow: 
    0 0 0 4px #363945, 
    0 0 5px 5px #EFE1CE;*/
}
#separatordiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 10px;
  transform-origin: top left;
}
.separatordiv_no_activity {
  display: none;
}

#separatordivheader {
  padding: 0;
  cursor: move;
}

#separator_img {
  display: block;
  opacity: 1.0;
  cursor: move;
  border-radius: 50%;
  box-shadow: 0 0 5px #363945;
  transform-style: preserve-3d;
  transform-origin: center;
}

/* corner pull tabs */
/* The side navigation menu */
#mySidenav {
  width: auto;
  /* visibility: hidden; */
  background-color: rgb(255, 255, 255);
  display: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 10px 10px 10px 0;
  box-sizing: border-box;
  transition: 0.5s;
  flex-direction: row;
}
#mySidenav > div {
  width: 100%;
  display: block;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}

:is(.sidenav_tl, .sidenav_tr, .sidenav_bl, .sidenav_br) {
  height: calc(48% - 60px); /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */ 
  overflow-x: hidden;
  padding: 0;
  background-color: #C0AB8E;
}
.sidenav_tl {
  top: 1%; /* Stay at the top */
  left: 0;
  top: 60px;
}
.sidenav_tr {
  top: 1%; /* Stay at the top */
  right: 0;
  direction: rtl;
  top: 60px;
}
.sidenav_br {
  bottom: 1%; /* Stay at the top */
  right: 0;
  direction: rtl;
  bottom: 60px;
}
.sidenav_bl {
  bottom: 1%; /* Stay at the top */
  left: 0;
  bottom: 60px;
}

/* The navigation menu links */
:is(.sidenav_tl, .sidenav_tr, .sidenav_bl, .sidenav_br) a, dd {
  padding: 8px;
  text-decoration: none;
  font-size: 15px;
  color: #363945;
  display: block;
  cursor: pointer;
  /*transition: 0.3s;*/
}
dd:hover {
  background-color: #EFE1CE;
  border-radius: 10px;
}
#mySidenav dt {
  font-weight: bolder;
  position: sticky;
  top: 0px;
  background-color: white;
  padding: 15px 0 2px 0;
}
#mySidenav dl {
  margin-left: 10px;
  margin-top: 0;
}
#mySidenav dd {
  margin-left: 20px;
}
.menu_cell_type {
  border-bottom: 2px solid black;
}
.menu_cell_subtype {
  padding-left: 10px; 
  position: sticky; 
  top: 38px;
}


:is(.sidenav_tr, .sidenav_br) dl {
  direction: ltr;
}
:is(.sidenav_tr, .sidenav_br) {
  box-shadow: 0 0 5px #363945;
  border-radius: 10px 0 0 10px;
  display: flex;
}
:is(.sidenav_tl, .sidenav_bl) {
  box-shadow: 0 0 5px #363945;
  border-radius: 0 10px 10px 0;
  display: flex;
}
/* When you mouse over the navigation links, change their color */
:is(.sidenav_tl, .sidenav_tr, .sidenav_bl, .sidenav_br) a:hover {
  background-color: #EFE1CE;
}

/* Position and style the close button (top right corner) */
:is(.sidenav_tl, .sidenav_tr, .sidenav_bl, .sidenav_br) .closebtn {
  padding: 2px 8px 2px 8px;
  position: static;
  top: 0;
  right: 50px;
  font-size: 25px;
  margin-left: 0;
}
.closebtn a {
  color: #f1f1f1;
}

.pull_tl_corner {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.pull_tl {
  display: block;
  background: #363945;
  position: absolute;
  top: 25%;
  left: 10px;
  transform: translate(0, -50%);
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 0 5px #363945;
}
.pull_tr {
  display: block;
  background: #363945;
  position: absolute;
  top: 25%;
  right: 10px;
  transform: translate(0, -50%);
  cursor: pointer;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 5px #363945;
}
.pull_br {
  display: block;
  background: #363945;
  position: absolute;
  bottom: 25%;
  right: 10px;
  transform: translate(0, 50%);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 5px #363945;
  cursor: pointer;
}
.pull_bl {
  display: block;
  background: #363945;
  position: absolute;
  bottom: 25%;
  left: 10px;
  transform: translate(0, 50%);
  cursor: pointer;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 5px #363945;
}
.fade_pull_tab_TL {
  transform: translate(-30px, -50%);
  transition: 0.5s transform;
}
.fade_pull_tab_TR {
  transform: translate(30px, -50%);
  transition: 0.5s transform;
}
.fade_pull_tab_BR {
  transform: translate(30px, 50%);
  transition: 0.5s transform;
}
.fade_pull_tab_BL {
  transform: translate(-30px, 50%);
  transition: 0.5s transform;
}


/* The switch - the box around the slider */
.switch {
  position: absolute;
  display: inline-block;
  width: 36px;
  height: 20px;
  top: 10px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  /*-webkit-transition: .4s;
  transition: .4s;*/
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 1px;
  bottom: 2px;
  background-color: #EFE1CE;
  /*-webkit-transition: .4s;
  transition: .4s;*/
}

input:checked + .slider {
  background-color: #363945;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.switch_tl {
  right:14px;
}



.elem_overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  height: 400px;
}


/* GOTO Quads */
#go_to_quad_tl,
#go_to_quad_tr,
#go_to_quad_br,
#go_to_quad_bl {
  position: absolute;
  height: 40px; 
  width: 40px;
  cursor: pointer;
}
.m_view_quad_active,
.m_view_quad_inactive {
  display: none;
}
[id^='go_to_quad_'] > img {
  height: 100%;
  width: 100%;
  border-radius: 10px 10px 10px 20px;
  box-shadow: 0 0 5px #363945;
}
#go_to_quad_tl {
  top: 8px; left: 8px;
  transform: rotate(90deg);
}
#go_to_quad_tr {
  top: 8px; right: 8px;
  transform: rotate(180deg);
}
#go_to_quad_br {
  bottom: 8px; right: 8px;
  transform: rotate(-90deg);
}
#go_to_quad_bl {
  bottom: 8px; left: 8px;
  transform: rotate(0);
}



/* show only one (tl) quadrant for small screens in portrait */
@media screen and (max-width: 700px), (max-height: 700px) {
  .m_view_quad_active,
  .m_view_label_active {
    display: block;
  }
  .m_view_quad_inactive,
  .m_view_label_inactive {
    display: none;
  }
  .m_view_map_active {
    display: block;
  }
  .m_view_map_inactive {
    display: none;
  }
  #optionsBar {
    display: none;
  }
  #aboutBar {
    scale: 1.5;
  }
  #map_tl,
  #map_tr,
  #map_br,
  #map_bl {
    top: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    left: 4px !important;
  }
  #cellLabel_des_tl,
  #cellLabel_des_tr,
  #cellLabel_des_bl,
  #cellLabel_des_br {
    top: 66px;
    bottom: 66px;
    right: 2%;
    left: 2%;
    width: auto;
    height: auto;
  }
  #separatordiv {
    display: none;
  }
  #mySidenav {
    top: 15%;
    height: 70%;
  }
  #about_info div.container-fluid {
    padding: 15px;
  }
  #cell_lab_pos_tl,
  #cell_lab_pos_bl {
    left: 50%  !important;
    top: 25px !important;
  }
  #cell_lab_pos_tr,
  #cell_lab_pos_br {
    right: 50% !important;
    top: 25px !important;
  }
  *[id^='desc_lab_resize_'] {
    display: none;
  }
  #descr_close_l,
  #descr_close_r {
    right: unset;
    left: 14px;
  }
  #cellLabel_des_tr .switch,
  #cellLabel_des_br .switch {
    left: unset;
    right: 14px;
  }
  .pull_tl,
  .pull_tr {
    top: 50% !important;
    height: 80px;
  }
  .pull_br,
  .pull_bl {
    bottom: 50% !important;
    height: 80px;
  }
  .fade_pull_tab_TL {
    transform: translate(0px, -50%);
  }
  .fade_pull_tab_TR {
    transform: translate(0px, -50%);
  }
  .fade_pull_tab_BR {
    transform: translate(0px, 50%);
  }
  .fade_pull_tab_BL {
    transform: translate(0px, 50%);
  }
}