html, body
{
  overscroll-behavior: none;
}

/*  BUTTONS  */
button
{
  outline: 0;
  font-family: 'Arial';
  font-size: 18px;
  font-weight: bold;
  padding: 0.3em 0.8em;
  border: none;
  border-radius: 10px;
  background-color: #555;
  color: white;
  box-shadow: inset 0.05em 0.05em 0.05em 0 rgba(255,255,255,0.5), inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.5);
  z-index: 1;
}

button:active
{
  padding: 0.4em 0.7em 0.2em 0.9em;
  background-color: #414141;
  box-shadow: inset 0.05em 0.05em 0.05em 0 rgba(0,0,0,0.5), inset -0.05em -0.05em 0.05em 0 rgba(255,255,255,0.5);
}

.icon
{
  width: 115px;
}

.sub-icon
{
  margin: 0 10px;
}

.sub-btn
{
  margin: 25px;
}

/* BODY */
body
{
  --border-margin: 0 50px 50px 50px;

  background-image: url('/images/bkgTexture_carbonFiber.jpg');
  height: 100%;
  margin: 0;
  padding: 0;
}

.page-container
{
  max-width: 1280px;
  margin: auto;
}

.call-map-header
{
  display: grid;
  grid-template-columns: 1.7fr 10fr;
  margin: 0px 50px;
  align-items: center;
}

.line
{
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255), rgba(255, 255, 255, 0));
}

.galley-line
{
  margin-right: 30px;
}

.galley-header
{
  display: grid;
  grid-template-columns: 5fr 3fr 2fr;
  margin: 0px 50px;
  align-items: center;
  justify-content: center;
}

.gly-hdr-wLine
{
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  justify-content: center;
}

.galley-header-text
{
  font-family: "Arial";
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.call-map
{
  position: relative;
  margin: 0 50px;
  height: 144px;
  background-image: url('/images/callMap.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.indicator
{
  position: absolute;
  width: 35px;
}

.fwd-lav-ind
{
  bottom: 70%;
  right: 72.5%;
}

.fwd-crew-ind
{
  bottom: 15%;
  right: 63%;
}

.aft-crew-ind
{
  bottom: 15%;
  right: 59.5%;
}

.rh1-ind
{
  bottom: 65%;
  right: 54.5%;
}

.lh1-ind
{
  bottom: 12%;
  right: 54.5%;
}

.rh2-ind
{
  bottom: 65%;
  right: 46.5%;
}

.lh2-ind
{
  bottom: 12%;
  right: 46.5%;
}

.fwd-conf-ind
{
  bottom: 8%;
  right: 41%;
}

.aft-conf-ind
{
  bottom: 8%;
  right: 34%;
}

.fwd-div-ind
{
  bottom: 65%;
  right: 27.5%;
}

.fwd-mid-div-ind
{
  bottom: 65%;
  right: 24.5%;
}

.aft-mid-div-ind
{
  bottom: 65%;
  right: 22%;
}

.aft-div-ind
{
  bottom: 65%;
  right: 19%;
}

.lh3-ind
{
  bottom: 12%;
  right: 26.5%;
}

.lh4-ind
{
  bottom: 12%;
  right: 18.5%;
}

.aft-lav-ind
{
  bottom: 36%;
  right: 12%;
}

.gly-sub-menu-hdr,
.water-level-hdr
{
  text-align: center;
}

.controls,
.galley-sub-menu
{
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  padding: 30px;
  border-radius: 20px;
}

.galley-sub-menu
{
  padding: 30px 10px;
}

.galley-buttons,
.cabin-buttons
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 15px;
  row-gap: 15px;
}

.galley-sub-menu
{
  display: flex;
  flex-direction: column;
  margin: 0 75px;
}

.water-level
{
  text-align: center;
}

.water-level-image
{
  width: 160px;
  border: 3px solid white;
  border-radius: 10px;
}

.bottom-section
{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  column-gap: 30px;
  border: 4px solid rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  height: 135px;
  margin: 40px var(--border-margin);
  padding: 20px 30px;
}

/*  CABIN CONTROLS  */
.sectionHeader
{
  text-align: center;
  font-family: 'Arial';
  font-size: 20px;
  font-weight: bold;
  color: white;
  border: 3px solid white;
  border-radius: 10px;
  padding: 10px 0;
  margin: 5px 0 25px 0;
}

.selectorButtons  /* the <div> containing the buttons */
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 5px;
}

.selector-button
{
  padding: 10px 0;
}

.selector-button:active
{
  padding: 10px 0;
}

.buttons-bd,
.buttons-wBar
{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 20px;
  width: 248px;
  height: 435px;
}

.buttonBD
{
  font-family: 'Arial';
  font-size: 30px;
  font-weight: bold;
  color: white;
  padding: 20px 0;
  margin: 0 20px;
}

.buttonBD:active
{
  padding: 20px 0;
}

.buttons-wBar
{
  text-align: center;
}

.bar-btn
{
  margin: 10px 0;
}

progress[value]
{
  --color: linear-gradient(rgb(110, 198, 110), rgb(0, 255, 0));  /* progress color */
  --background: transparent; /* background color */

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 3px solid rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 50px;
  border-radius: 15px;
  background: var(--background);
  margin-top: 15px;
}
progress[value]::-webkit-progress-bar
{
  border-radius: 12px;
  background: var(--background);
}
progress[value]::-webkit-progress-value
{
  border-radius: 12px;
  background: var(--color);
}


/*  REACTIVE OPTIONS  */
@media screen and (max-width: 1279px)
{
  /* BUTTONS */
  .icon
  {
    width: 80px;
  }

  .sub-icon
  {
    margin: 0 10px;
    width: 110px;
  }
  
  .sub-btn
  {
    margin: 25px;
  }

  /* CALL MAP INDICATORS */
  .indicator
  {
    width: 25px;
  }

  .fwd-lav-ind
  {
    bottom: 75%;
    right: 72%;
  }

  .fwd-crew-ind
  {
    bottom: 30%;
    right: 62.5%;
  }

  .aft-crew-ind
  {
    bottom: 30%;
    right: 59%;
  }

  .rh1-ind
  {
    bottom: 73%;
    right: 54%;
  }

  .lh1-ind
  {
    bottom: 32%;
    right: 54%;
  }

  .rh2-ind
  {
    bottom: 73%;
    right: 46.5%;
  }

  .lh2-ind
  {
    bottom: 32%;
    right: 46.5%;
  }

  .fwd-conf-ind
  {
    bottom: 28%;
    right: 40%;
  }

  .aft-conf-ind
  {
    bottom: 28%;
    right: 33%;
  }

  .fwd-div-ind
  {
    bottom: 73%;
    right: 26.5%;
  }

  .fwd-mid-div-ind
  {
    bottom: 73%;
    right: 23.8%;
  }

  .aft-mid-div-ind
  {
    bottom: 73%;
    right: 20.5%;
  }

  .aft-div-ind
  {
    bottom: 73%;
    right: 17.8%;
  }

  .lh3-ind
  {
    bottom: 32%;
    right: 25.5%;
  }

  .lh4-ind
  {
    bottom: 32%;
    right: 18.8%;
  }

  .aft-lav-ind
  {
    bottom: 50%;
    right: 10.5%;
  }

  /* PAGE BODY */
  .page-container
  {
    max-width: 1024px;
  }

  .galley-header
  {
    grid-template-columns: 2fr 1fr 1fr;
    margin: 0;
  }

  .galley-header-text
  {
    font-size: 20px;
  }

  .galley-header-smaller
  {
    width: 50px;
  }

  .gly-hdr-wLine
  {
    grid-template-columns: 0.75fr 1.5fr;
    margin: 0 50px;
  }

  .galley-line
  {
    margin-right: 10px;
  }

  /*.galley-buttons*/
  .controls
  {
    column-gap: 10px;
    row-gap: 10px;
    padding: 30px;
    margin: 30px 50px;
  }

  .galley-sub-menu
  {
    padding: 10px 0;
    margin: 0;
  }

  .onOff-btns,
  .upDown-btns
  {
    text-align: center;
  }

  .water-level-image
  {
    width: 130px;
  }

  .bottom-section
  {
    column-gap: 20px;
    margin: 0 50px;
  }

  /* CABIN CONTROLS */
  .sectionHeader
  {
    font-size: 14px;
    padding: 10px 0;
    margin: 0 0 10px 0;
  }

  .buttons-bd,
  .buttons-wBar
  {
    row-gap: 0;
    width: 100%;
    height: 354px;
  }

  .buttonBD
  {
    font-size: 24px;
    width: 83%;
    height: 65px;
  }

  .bar-icon
  {
    width: 100px;
  }

  progress[value]
  {
    width: 80%;
    height: 40px;
    margin-top: 20px;
  }
}