@charset "UTF-8";
/*
 SCSS style sheet for HA dnsmasq-dhcp addon
 If you are reading this comment inside the .css file, please be aware that the .css file is autogenerated,
 any change there will be lost when docker image is rebuilt.

 NOTE: portions of this file have been taken from https://codepen.io/serhatbek/pen/bGyVLpM?editors=1111
*/
/* define colors */
:root {
  --btn-text-inactive: #101927;
  --background-tab: #f7f7f7;
  --btn-text-active: #2955ac;
  --btn-text-hover: #d4ddee;
  --background-mono-text: lightgrey;
  --text-color: black;
  --background-color: white;
}

body {
  background-color: white;
  color: black;
  font-family: "Roboto", "Mono", sans-serif;
  font-weight: 500;
}

/* be dark-mode friendly */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --btn-text-inactive: #e0e0e0;
    --background-tab: #222;
    --btn-text-active: #64b5f6;
    --background-mono-text: #444;
    --text-color: white;
    --background-color: #121212;
  }
  body {
    background-color: black;
    color: white;
  }
  .dataTable > tbody > tr > td > a {
    color: var(--btn-text-active);
  }
}
/* styles used in the UI */
.topLevel {
  margin-left: 10px;
  color: var(--text-color);
}

.uiSettings {
  text-align: right;
}

.liveIndicator > img {
  vertical-align: middle;
}

.solidBorder {
  border: 1px solid;
}

.monoText {
  font-family: monospace;
  background-color: var(--background-mono-text);
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

.boldText {
  font-weight: bold;
}

.container {
  width: 100%;
  margin: 0 auto;
}

/*
a[href*="http"]::after {
    content: '⎋';
    display: inline-block;
    transform: rotate(90deg);
    margin-inline-start: var(--space1);
    vertical-align: middle;
    font-size: 0.75em;
}*/
.footer {
  margin-top: 20px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}

/* modern checkbox */
.checkbox-wrapper .modernCheckbox {
  appearance: none;
  background-color: #dfe1e4;
  border-radius: 72px;
  border-style: none;
  flex-shrink: 0;
  height: 20px;
  margin: 0;
  position: relative;
  width: 30px;
}

.checkbox-wrapper .modernCheckbox::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.checkbox-wrapper .modernCheckbox,
.checkbox-wrapper .modernCheckbox::after {
  transition: all 100ms ease-out;
}

.checkbox-wrapper .modernCheckbox::after {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 14px;
}

.checkbox-wrapper input[type=checkbox] {
  cursor: default;
}

.checkbox-wrapper .modernCheckbox:hover {
  background-color: #c9cbcd;
  transition-duration: 0s;
}

.checkbox-wrapper .modernCheckbox:checked {
  background-color: #6e79d6;
}

.checkbox-wrapper .modernCheckbox:checked::after {
  background-color: #fff;
  left: 13px;
}

.checkbox-wrapper :focus:not(.focus-visible) {
  outline: 0;
}

.checkbox-wrapper .modernCheckbox:checked:hover {
  background-color: #535db3;
}

/* tabs implementations */
.btn {
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  background: transparent;
  outline: transparent;
  border: transparent;
  color: var(--btn-text-inactive);
  transition: 300ms all ease-in-out;
  cursor: pointer;
  transform: scale(1);
}
@media only screen and (max-width: 576px) {
  .btn {
    padding: 10px 8px;
  }
}
.btn.active {
  color: var(--btn-text-active);
  position: relative;
  /* make the active item slightly bigger to emphasize it's the active tab */
  transform: scale(1.1);
}
.btn.active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: var(--btn-text-active);
  position: absolute;
  bottom: -2px;
  left: 0;
  transform: scale(1);
}
.btn:hover {
  color: var(--btn-text-active);
  background-color: var(--btn-text-hover);
  /* make the hovered item slightly bigger to emphasize it's the hovered tab */
  transform: scale(1.1);
}

.tabs {
  background-color: var(--background-tab);
  border-radius: 8px;
  padding: 16px 16px 16px 16px;
}
.tabs__pills {
  border-bottom: 2px solid rgba(var(--btn-text-inactive), 0.2);
}
.tabs__panels {
  padding: 20px 0;
}
.tabs__panels > div {
  width: 100%;
  display: none;
  gap: 20px;
}
.tabs__panels > div > figure {
  max-width: 400px;
  width: 100%;
  flex-shrink: 0;
}
@media only screen and (max-width: 992px) {
  .tabs__panels > div > figure {
    margin: 0 auto;
  }
}
.tabs__panels > div > figure img {
  width: 100%;
  display: block;
}
.tabs__panels > div > div > h4 {
  font-size: 24px;
  margin: 10px 0;
}
.tabs__panels > div > div > p {
  line-height: 1.8;
}
.tabs__panels > div.active {
  display: block;
}

/*# sourceMappingURL=dnsmasq-dhcp.css.map */
