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

  --menuHeight: 10%;
  /*--menuHeight: 12%;*/
  /*--menuHeight: 100;*/
  --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='https://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);
}


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

#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%;
  text-align:center;
}

/*-----
#menu li div:nth-child(1) {
  width:50%;
  height:60%;
}

#menu li div:nth-child(2) {
  height:40%;
}
-----*/

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

/*#menu a,*/
#menu li div:nth-child(2) {
  color: #212529;
  text-decoration: none;
  font-size: 1.1rem;
  text-align: center;
  /*font-size: 1.5rem;*/
  /* font-size: 2vh; */
}

#menu .active,
/*#menu .active a,*/
#menu .active div:nth-child(2) {
  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;
}

#id_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 li {
    height: 100%;
  }

/*-----
  #menu li div:nth-child(1) {
    width:40%;
    height:40%;
  }

  #menu li div:nth-child(2) {
    height:60%;
  }

  #menu a {
    font-size: 1.0rem;
  }
-----*/

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

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

/*-----
@media only screen and (max-height: 428px) {

  #menu li {
     height: 20%;
  }

  #menu li div:nth-child(1) {
    width:35%;
    height:35%;
  }

  #menu li div:nth-child(2) {
    height:65%;
  }

  #menu a {
    font-size: 0.9rem;
  }
}
-----*/

/* ************************************************************************************************************************************************************************ */
/* 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='https://www.w3.org/2000/svg' viewBox='0 0 20 20'%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[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);
}

.message-page,
.page-loader {
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  /*height: 50%;*/
  /*background: rgba(128, 128, 128, 0.3);*/
  background: rgba(128, 128, 128, 0.6);
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 2000;
  /*overflow: scroll;*/
}
.message-box,
.page-loader-box {
  /*width: 320px;*/
  /*width: 800px;*/
  /*width: 33%;*/
  max-width: min(90%,1200px);
  min-width: 20%;
  max-height: 80%;
  background-color: white;
  border-radius: 4px;
  margin-top: 40px;
  padding: 20px;
  /* justify-content: center;
  align-items: center;
  position: fixed; */
  text-align: left;
  overflow: auto;
}
.message-page button {
  margin-top: 15px;
}

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

/*#modal-submit .modal-header,
#modal-submit .modal-body,
#modal-submit .modal-footer {
   padding: 0.5rem 0.5rem;
}

#modal-submit h5 {
   font-size: 1.1rem;
   margin-bottom: 0.3rem;
}

#modal-submit button {
   font-size: 0.9rem;
   padding: 0.19rem 0.38rem;
}

#modal-submit .btn-close {
   margin-right: 0;
}

#modal-submit label {
   font-size: calc(var(--bs-body-font-size)*0.9);
   padding: calc(0.12rem + 1px) 0;
}

#modal-submit .form-control {
   font-size: 0.9rem;
   padding: 0.19rem 0.38rem;
}

#modal-submit .container-fluid {
   padding: 0 0.5rem;
}

#modal-submit .mb-1 {
   margin-bottom: 0.15rem !important;
}

#modal-submit .mb-3 {
   margin-bottom: 0.6rem !important;
}

#modal-submit .my-3 {
   margin-top: 0.6rem !important;
   margin-bottom: 0.6rem !important;
}*/

.modal-dialog .modal-header,
.modal-dialog .modal-body,
.modal-dialog .modal-footer {
   padding: 0.5rem 0.5rem;
}

.modal-dialog h5 {
   font-size: 1.1rem;
   margin-bottom: 0.3rem;
   line-height:1;
}

.modal-dialog button {
   font-size: 0.9rem;
   padding: 0.19rem 0.38rem;
}

.modal-dialog .btn-close {
   margin-right: 0;
}

.modal-dialog label {
   font-size: calc(var(--bs-body-font-size)*0.9);
   padding: calc(0.12rem + 1px) 0;
}

.modal-dialog .form-control,
.modal-dialog .form-select {
   font-size: 0.9rem;
   padding: 0.19rem 0.38rem;
}

.modal-dialog .container-fluid {
   padding: 0 0.5rem;
}

.modal-dialog .mb-1 {
   margin-bottom: 0.15rem !important;
}

.modal-dialog .mb-3 {
   margin-bottom: 0.6rem !important;
}

.modal-dialog .my-3 {
   margin-top: 0.6rem !important;
   margin-bottom: 0.6rem !important;
}

li {
   cursor: pointer;
}

.btn {
   display: inline !important;
}

@media only screen and (max-width: 576px) {

.modal-dialog .modal-header,
.modal-dialog .modal-body,
.modal-dialog .modal-footer {
   padding: 0.15rem 0.5rem;
}

.modal-dialog h5 {
   font-size: 1.0rem;
   margin-bottom: 0.09rem;
   line-height:1;
}

.modal-dialog label {
   font-size: calc(var(--bs-body-font-size)*0.9);
   padding: calc(0.03rem + 0px) 0;
}

.modal-dialog .form-control,
.modal-dialog .form-select {
   font-size: 0.9rem;
   padding: 0.09rem 0.38rem;
}

.modal-dialog .mb-1 {
   margin-bottom: 0.05rem !important;
}

.modal-dialog .mb-3 {
   margin-bottom: 0.07rem !important;
}

.modal-dialog .my-3 {
   margin-top: 0.2rem !important;
   margin-bottom: 0.2rem !important;
}

.modal-dialog .mt-1 {
   margin-top: 0.07rem !important;
   margin-bottom: 0.07rem !important;
}

.submenu-content .p-2 {
   padding: 0.15rem 0.5rem !important;
}

.submenu-content .col-form-label {
   padding-top: 0;
   padding-bottom: calc(0.125rem + 0px);
   line-height: 1;
}

.submenu-content .form-control,
.submenu-content .form-select,
.submenu-content .btn,
.submenu-content .list-group-item {
   padding: 0.15rem 0.38rem;
}

.submenu-content .my-2 {
   margin-top: 0.15rem !important;
   margin-bottom: 0.15rem !important;
}

}