@import "bootstrap-drawer";

.control {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  align-items: center;

  .info {
    margin-top: 30px;
    text-align: center;

    .label {
      color: #ccc;
      font-size: 12;
    }

    .status {
      font-size: 14;
      font-weight: bold;
    }

    .status-open {
      color: #66bb6a;
    }
    .status-closed,
    .status-connecting {
      color: #ff9800;
    }
  }

  .confirm-box,
  .opening-box,
  .status-connecting,
  .status-closed {
    display: none;
  }

  .button-wrapper {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;

    .message {
      color: #0288d1;
      margin-bottom: 6px;
    }
  }

  &.opening {
    .opening-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  &.confirm {
    .confirm-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  .confirm-buttons {
    display: flex;
    flex-direction: row;
    flex: 1;

    button:first-child {
      margin-right: 10px;
    }

    .button-confirm-yes {
      background-color: #48bbec;
      border-color: #48bbec;
      color: #fff;
      flex: 1;
      height: 36px;
      border-radius: 8px;
      align-self: stretch;
      justify-content: center;
      width: 100px;
    }

    .button-confirm-no {
      background-color: #eceff1;
      border-color: #eceff1;
      flex: 1;
      height: 36px;
      border-radius: 8px;
      align-self: stretch;
      justify-content: center;
      width: 100px;
    }
  }

  .button-open {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background-color: white;
    border: 1px solid #ccc;

    .icon {
      -webkit-mask: url(/assets/wifi-1e4a4f7f354a33ef68c1f0aa5fcecc514d9ce4aa00b011a21da4df3d6e62263d.svg) no-repeat center;
      mask: url(/assets/wifi-1e4a4f7f354a33ef68c1f0aa5fcecc514d9ce4aa00b011a21da4df3d6e62263d.svg) no-repeat center;
      height: 50px;
    }

    &:disabled {
      color: #bdbdbd;

      .icon {
        background-color: #bdbdbd;
      }
    }
  }

  &.closed {
    .button-open {
      color: #0288d1;

      .icon {
        background-color: #0288d1;
      }
    }

    .status-closed {
      display: block;
    }

    .status-open {
      display: none;
    }
  }

  &.confirm,
  &.opening {
    .button-open {
      display: none;
    }
  }

  &.connecting {
    .status-open,
    .status-closed {
      display: none;
    }

    .status-connecting {
      display: block;
    }
  }
}

/* Spinner */

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash 1.4s ease-in-out infinite,
    colors 5.6s ease-in-out infinite;
}

@keyframes colors {
  0% {
    stroke: #4285f4;
  }
  25% {
    stroke: #de3e35;
  }
  50% {
    stroke: #f7c223;
  }
  75% {
    stroke: #1b9a59;
  }
  100% {
    stroke: #4285f4;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}
/*!
 * Start Bootstrap - Landing Page v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/landing-page)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
 */
body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url(/assets/bg-masthead-9e4331babd7e6ca5bb3e691c0bd8e607c8cf9966d024e2a94dd72434b1fe0635.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
header.masthead .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}
header.masthead h1 {
  font-size: 2rem;
}
@media (min-width: 768px) {
  header.masthead {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  header.masthead h1 {
    font-size: 3rem;
  }
}

.showcase .showcase-text {
  padding: 3rem;
}

.showcase .showcase-img {
  min-height: 30rem;
  background-size: cover;
}

@media (min-width: 768px) {
  .showcase .showcase-text {
    padding: 7rem;
  }
}

.features-icons {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.features-icons .features-icons-item {
  max-width: 20rem;
}
.features-icons .features-icons-item .features-icons-icon {
  height: 7rem;
}
.features-icons .features-icons-item .features-icons-icon i {
  font-size: 4.5rem;
}
.features-icons .features-icons-item:hover .features-icons-icon i {
  font-size: 5rem;
}

.testimonials {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.testimonials .testimonial-item {
  max-width: 18rem;
}
.testimonials .testimonial-item img {
  max-width: 12rem;
  box-shadow: 0px 5px 5px 0px #adb5bd;
}

.call-to-action {
  position: relative;
  background-color: #343a40;
  background: url(/assets/bg-masthead-9e4331babd7e6ca5bb3e691c0bd8e607c8cf9966d024e2a94dd72434b1fe0635.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.call-to-action .overlay {
  position: absolute;
  background-color: #212529;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
}

footer.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.privacy-policy {
  .fa-chart-bar {
    font-size: 30px;
  }

  h2 {
    font-size: 17px;
    font-weight: bold;
    line-height: 21px;
    padding-top: 21px;
  }

  h3 {
    font-size: 13px;
    line-height: 19px;
    font-weight: bold;
    padding-top: 24px;
  }

  h4 {
    font-size: 13px;
    font-weight: bold;
    padding-top: 19px;
    margin-bottom: 0px;
  }
}
/*



 */