/* =========================
   Internet Sound Group
   ========================= */

#internetSoundGroup {
  display: flex !important;
  /* override inline-flex */
  position: absolute !important;
  /* ensure absolute positioning */
  top: 5vh !important;
  /* original vertical anchor */
  left: 2vw !important;
  /* left side */
  transform: none !important;
  /* remove centering transform */
  flex-direction: column !important;
  /* vertical stacking */
  align-items: flex-start !important;
  gap: 0 !important;
  /* tight buttons */
  user-select: none;
  z-index: 10;
  /* make sure above other elements */
}

#internet,
#soundToggle,
#internetCheckToggle {
  display: block !important;
  /* vertical stacking */
  margin: .7em 0 0 0 !important;
  padding: 0.4em 0.8em !important;
  /* small padding for tight layout */
  font-size: 1.9vh !important;
  /* match other controls */
  border: 1px solid grey !important;
  border-radius: 4px !important;
  line-height: 1;
  background: transparent;
  /* color: inherit; */
  color: white;
  cursor: pointer;
}

#internet.internet-ok {
  color: greenyellow;
  font-weight: bolder;
}

#internet.internet-not-ok {
  color: red;
}


/* =========================
   Internet Form Modal
   ========================= */
#internetForm {
  display: none;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: black;
  color: white;
  padding: 8px 12px;
  border: 1px solid red;
  font-family: Arial, sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  z-index: 10;
  user-select: text;
}

#internetForm label {
  display: block;
  margin-bottom: 6px;
  font-weight: normal;
  color: red;
  user-select: none;
}

#internetForm input[type="text"] {
  width: 100%;
  font-size: 14px;
  padding: 4px 6px 4px 10px;
  box-sizing: border-box;
  margin-top: 10px;
  background: black;
  border: 1px solid red;
  color: white;
  font-family: Arial, sans-serif;
  user-select: text;
}

#internetForm input[type="number"] {
  width: 100%;
  font-size: 14px;
  padding: 4px 6px 4px 10px;
  box-sizing: border-box;
  margin-top: 10px;
  background: black;
  border: 1px solid red;
  color: white;
  font-family: Arial, sans-serif;
  user-select: text;
}

#internetForm label:nth-child(3) {
  margin-top: 15px;
}

#internetForm button#internetFormCloseBtn {
  display: block;
  margin-top: 8px;
  padding: 6px 12px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background: black;
  border: 1px solid red;
  color: red;
  cursor: pointer;
  user-select: none;
}

.internetFormBtns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.internetFormBtns button {
  flex: 1;
  font-size: 14px;
  font-family: Arial, sans-serif;
  padding: 6px 12px;
}

#internetFormCloseBtn {
  color: red;
}

#internetFormSaveBtn {
  color: white;
}