@import "normalize";
@import "skeleton";

// And the TireFire® bits
@import "tirefire/fonts";
@import "tirefire/basics";
@import "tirefire/alerts";
@import "tirefire/timers";
@import "tirefire/nav";
@import "tirefire/dots";
@import "tirefire/tooltips";

.controls a,
.controls form {
    margin-right: 2px;
}

.file,
.printer,
.key,
.job {
  margin-top: 4px;
}

.file .details,
.printer .details,
.key .details,
.job .details {
  div {
    margin-right: 10px;
  }
  .controls {
    margin-left: auto;
    display: flex;
  }
}

// Hide the header name if we're on a mobile device
@media (max-width: 550px) {
  .logo .name {
    display: none;
  }
}

label {
  margin-right: 10px;
}

.mb-1 {
  margin-bottom: 10px;
}

.mb-2 {
  margin-bottom: 20px;
}

.mr-auto {
  margin-right: auto;
}

.u-flex1 {
  flex: 1;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-flex-break {
  flex-basis: 100%;
}

.u-overflow-elipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 550px) {
  .file, .printer, .key, .job {
    flex-direction: column;
    margin-bottom: 10px;

    .controls {
      margin-right: auto;
      margin-left: unset;
    }
  }
}

.row.webcams {
  display: flex;
  justify-content: space-between;

  img {
    border-radius: 10px;
    border: 2px solid $black;
    object-fit: cover;
  }

  .webcam {
    padding-right: 10px;
  }

  .webcam:last-child {
    padding-right: 0px;
  }
}

input[type='text'], input[type='password'], select {
  width: 100%;
}

input[type="image"] {
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  // border: 1px solid #bbb;
  cursor: pointer;
  // box-sizing: border-box;
}

.row.bubble {
    border-radius: 4px;
    border: 1px solid $black;
}

.u-mv-auto {
  margin-top: auto;
  margin-bottom: auto;
}
