:root {
  /* --maxMenuWidth: 80px; */
  --menuWidthLG: min(80px, 8.3333333333%);
  --submenuWidthLG: 0px;
  --webglLeftOffset: calc(var(--menuWidthLG) + var(--submenuWidthLG));
  --webglWidthLG: calc(100% - var(--webglLeftOffset));

  --menuHeight: 10%;
  --submenuHeight: 0%;
  --webglBottomOffset: calc(var(--menuHeight) + var(--submenuHeight));
  --webglHeight: calc(100% - var(--webglBottomOffset));
}

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

body,
html {
  margin: 0;
  padding: 0;

  height: 100%;

  overflow: hidden;
}

.hidden {
  display: none !important;
}

*:focus {
  outline: 0;
}

/* For Accordion */
/* ************************************************************************************************************************************************************************ */

.btn-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
  border: 0;
}

.btn-toggle:hover,
.btn-toggle:focus {
  color: rgba(0, 0, 0, 0.85);
  background-color: #d2f4ea;
}

.btn-toggle::before {
  width: 1.25em;
  line-height: 0;
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
  transition: transform 0.35s ease;
  transform-origin: 0.5em 50%;
}

.btn-toggle[aria-expanded="true"] {
  color: rgba(0, 0, 0, 0.85);
}
.btn-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.card:hover {
  background-color: #e9ecef;
  transition: all 0.3s ease !important;
  transform: scale(1.1) !important;
}

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

#menu {
  height: 100%;
  /* max-width: var(--maxMenuWidth); */
  width: var(--menuWidthLG);
  /* position: absolute; able to overlapping */
  user-select: none;
}

#menu li {
  list-style-type: none;
  height: 15%;
}

#menu li:hover:not(.active) {
  background-color: #e9ecef;
  color: #495057;
}

#menu a {
  color: #212529;
  text-decoration: none;
  font-size: 1.0rem;
  line-height: 1em;
  display: block;
  text-align: center;
  /* font-size: 2vh; */
}

#menu .active,
#menu .active a {
  background-color: #0d6efd;
  color: #fff;
}

#menu svg {
  font-size: 3rem;
}

div[id^="submenu"] {
  height: 100%;
  width: var(--submenuWidthLG);
  /* margin-left: min(var(--maxMenuWidth), 8.3333333333%); */
  /* margin-left: var(--menuWidthLG); */
  background-color: rgb(255, 255, 255, 0.9);
}

.submenu-content {
  overflow-y: auto;
  overflow-x: hidden;
}

#webgl-container {
  /* width: max(91.6666666667%, calc(100% - var(--maxMenuWidth))); */
  width: var(--webglWidthLG);
  height: 100%;
  touch-action: none;
}

.toast-container {
  z-index: 10000;
}

.toast {
  background-color: #ffcc35;
}

/* Large & Medium devices (laptops/desktops/ipad, 576px and down) */
@media only screen and (max-width: 576px) {
  #menu {
    height: var(--menuHeight);
    width: 100%;
    max-width: 100%;
    position: absolute;
  }

  #menu a {
    font-size: 0.8rem;
  }

  #menu li {
    height: 100%;
  }

  div[id^="submenu"] {
    height: var(--submenuHeight);
    width: 100%;
    bottom: 10%;
    margin-left: 0px;
    position: absolute;
  }

  #webgl-container {
    width: 100%;
    height: var(--webglHeight);
    /* avoid 300ms delay on iphone (disable double tap to scale) */
  }
}

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

.message-page,
.page-loader {
  top: 0;
  left: 0;
  display: flex;

  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.3);

  align-items: center;
  justify-content: center;
  position: fixed;

  z-index: 2000;
}

.message-box,
.page-loader-box {
  width: 320px;
  background-color: white;
  border-radius: 4px;
  margin-top: 40px;
  padding: 20px;
  /* justify-content: center;
  align-items: center;
  position: fixed; */
  text-align: center;
}

.left-align {
  text-align: left;
}

.message-page button {
  margin-top: 15px;
}

.text-info {
  color: rgb(6, 76, 50, 1) !important;
}

/* ************************************************************************************************************************************************************************ */
/* Avoid quote-modal z-index to high and cover the pac-contaiiner */
.pac-container {
  z-index: 10000 !important;
}

#confirm-modal {
  z-index: 10001 !important;
}

input[name="roof-colorbond-colour"]:checked ~ label,
input[name="wall-colorbond-colour"]:checked ~ label {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M6 10l3 3l6-6'/%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

input[value="tba"] ~ label,
input[value="tba"] ~ label {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M 7 7 l 6 6 Z M 7 13 l 6 -6'/%3e%3c/svg%3e") !important;
}

input[name="roof-colorbond-colour"] ~ label:hover,
input[name="wall-colorbond-colour"] ~ label:hover {
  border: 2px solid rgba(0, 0, 0, 0.35);
}

input[name="roof-colorbond-colour"] ~ label,
input[name="wall-colorbond-colour"] ~ label {
  border: 2px solid rgb(255, 255, 255);
}