/* Style the accordion panel. Note: hidden by default */

.center {
  text-align: center;
}

body {
  font-family: 'Helvetica', 'Arial', sans-serif;
}

hr {
  border-color: #ddd;
}

hr.major {
  border-top-width: 3px;
}

#top-bar {
  padding: 1em;
  background-color: #eee;
  border-bottom: 1px #ddd solid;

  .container {
    display: flex;
    justify-content: space-between;
  }

  #logo-container {
    display: flex;
    align-items: center;
  }

  #logo-text {
    font-weight: light;
    font-size: 1.5em;
    color: black;
  }

  #logo-img {
    height: 1.5em;
    vertical-align: text-bottom;
    margin-right: 0.3em;
  }
}

#wifi-wrapper {
  &[state='none'] {
    margin-bottom: 2em;

    #wifi-status-bar {
      display: none;
    }
  }

  &[state='waiting'] {
    #wifi-connect {
      display: none;
    }
    #wifi-status-spinner {
      display: block;
    }
  }

  &[state='list'] {
    #wifi-connect {
      display: block;
    }
    #wifi-status-spinner {
      display: none;
    }
    #wifi-selector {
      display: block;
    }
  }

  &[state='idle'],
  &[state='connected'] {
    #wifi-connect {
      display: block;
    }
    #wifi-status-spinner {
      display: none;
    }
  }

  .button-flat {
    height: 2.5rem;
    line-height: 2.5rem;
  }

  #wifi-status-bar {
    border-bottom: 1px #ddd solid;
    margin-bottom: 2em;
    margin-top: 0;
    padding: 0.5rem 0;
    font-size: 1.3rem;
    background-color: #fffdc9;

    .container {
      display: flex;
      justify-content: space-between;
      height: 2em;
    }

    #wifi-status-text {
      margin: auto 0;
    }

    .button-outline#wifi-connect {
      margin: 0;
      border-color: #606c76;
      color: #606c76;
      font-weight: normal;
      border-width: 1px;
      text-transform: none;

      .sk-fading-circle {
        padding: 15% auto;
        margin-right: 1rem;
        vertical-align: text-bottom;
        display: inline-block;

        & .sk-circle:before {
          background-color: #fff;
        }
      }

      &:hover {
        border-color: #1e65a7;
        color: #1e65a7;
      }
    }

    #wifi-status-wrapper {
      vertical-align: middle;
      margin: auto 0;
    }

    #wifi-status-spinner {
      margin: auto 0;
      .sk-fading-circle {
        padding: 15% auto;
        margin-right: 1.5rem;
        display: block;
      }
    }
  }
  #wifi-selector {
    padding: 1em;
    border-bottom: 1px #ddd solid;
    margin-bottom: 2em;
    margin-top: -2em;
    display: none;

    .container {
      max-height: 60vh;
      overflow: scroll;
    }

    button {
      margin: 0;
    }

    #wifi-close {
      width: 100%;
    }
  }
}

#fw_url, #fw_file {
  display: none;
}

.narration {
  font-size: small;
  font-style: italic;
  line-height: 150%;
  width: 80%;
  margin: 0 auto;
}

#device-info td.changed::before {
  content: '⚠️';
  /* background-color: yellow; */
}

/**
* Flash Debug Log Table START
*/
#flash-status p {
  margin: 0;
}

#flash-status button {
  display: none;
  color: rgba(30, 101, 167, 0.8);
}

#flash-status tr[state='fail'] button {
  display: block;
}

#flash-status .secondary {
  font-size: small;
}

#flash-status div.emoji {
  text-align: center;
}

#flash-status tr {
  color: #606c76;
}

#flash-status tr[state='inactive'] {
  color: #cccccc;
}

#flash-status tr .emoji,
#flash-status tr .loader,
#flash-status tr .update {
  display: none;
}

#flash-status tr[state='success'] .success,
#flash-status tr[state='fail'] .fail,
#flash-status tr[state='warn'] .warn,
#flash-status tr[state='done'] .done {
  display: block;
}

#flash-status tr[state='running'] .loader,
#flash-status tr[state='retry'] .loader {
  display: block;
}

#flash-status tr[state='retry'] .loader.sk-fading-circle .sk-circle:before {
  background-color: #f1b900;
}

#flash-status tr[state='retry'] .update,
#flash-status tr[state='done'] .update,
#flash-status tr[state='warn'] .update,
#flash-status tr[state='fail'] .update {
  display: block;
  font-size: small;
  /* font-weight: bold; */
}

#flash-status tr[state='retry'] .update,
#flash-status tr[state='warn'] .update {
  color: #ff8800;
}

#flash-status tr[state='fail'] .update {
  color: red;
}

/**
* Loading Spinner START
**/
.sk-fading-circle {
  margin: 0 auto;
  width: 1.5em;
  height: 1.5em;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 0.375em;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
  -ms-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
  -ms-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
  -ms-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes sk-circleFadeDelay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
/**
  * Loading Spinner END
  **/
/**
* Flash Debug Log Table END
*/

/**
* Milligram Overrides START
*/
.container {
  max-width: 80rem;
}

h3 {
  font-weight: normal;
  font-size: 2.5em;
  margin-bottom: 1.25em;
}

.button-blue {
  background-color: #1e65a7;
  border-color: #1e65a7;
}

.button-blue.button-clear,
.button-blue.button-outline {
  background-color: transparent;
  color: #1e65a7;
}

.button-blue[disabled]:focus,
.button-blue[disabled]:hover {
  background-color: #1e65a7;
  border-color: #1e65a7;
}

.button-action {
  width: 100%;
}

select:focus {
  border-color: #1e65a7;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%231e65a7" d="M0,0l6,8l6-8"/></svg>')
    center right no-repeat;
}

input[type='text']:focus {
  border-color: #1e65a7;
}

a {
  color: #1e65a7;
}
/**
* Milligram Overrides END
*/

/**
* Debug Console START
*/
.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  transition: 0.4s;
}

.debug-log[hidden],
#flash-status tr[state='fail'] button[hidden] {
  display: none;
}

#debug-log {
  height: 500px;
  min-height: 500px;
  overflow-y: scroll;
  text-align: left;
  background-color: #333;
  padding: 0em 1em;
}

#debug-log pre {
  background-color: transparent;
  border: none;
  margin: 1em 0em;
  white-space: pre-wrap;
  color: white;
  display: block;
  font-family: 'Courier New', Courier, monospace;
}

/* Colors available: black/red/green/yellow/blue/magenta/cyan/white */
.ansi-white-fg {
  color: white;
}

.ansi-yellow-fg,
.ansi-bright-yellow-fg {
  color: yellow;
}

.ansi-bright-green-fg,
.ansi-green-fg {
  color: greenyellow;
}

.ansi-red-fg,
.ansi-bright-red-fg {
  color: red;
}

.ansi-magenta-fg {
  color: magenta;
}

.ansi-cyan-fg {
  color: cyan;
}
/**
* Debug Console END
*/

/**
* Modal START
*/
/* https://codepen.io/timothylong/pen/HhAer */
.modal-window {
  position: fixed;
  background-color: rgba(30, 101, 167, 0.8);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal-window > div {
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em;
  background: white;
  border-radius: 1rem;
}
.modal-window header {
  font-weight: bold;
}
.modal-window h1 {
  font-size: 150%;
  margin: 0 0 15px;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}
.modal-close:hover {
  color: black;
}
/**
* Modal END
*/
