html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.loader {
  height : 8px;
  width  : 36px; /* (6 * <margin: 2px>) + (3 * <width: 8px>) */
}

.loader-box {
  display                   : inline-block;
  height                    : 8px;
  width                     : 8px;
  margin                    : 0px 2px;
  background-color          : rgb(0,146,255);
  animation-name            : fadeOutIn;
  animation-duration        : 500ms;
  animation-iteration-count : infinite;
  animation-direction       : alternate;
}

.loader-box:nth-child(1) { animation-delay: 250ms; } /* (1/2) * <animation-duration: 500ms */
.loader-box:nth-child(2) { animation-delay: 500ms; } /* (2/2) * <animation-duration: 500ms */
.loader-box:nth-child(3) { animation-delay: 750ms; } /* (3/2) * <animation-duration: 500ms */

@keyframes fadeOutIn {
  0%   { background-color : rgba(0,146,255,1); }
  100% { background-color : rgba(0,146,255,0); }
}

.client-access-control-enabled {
  color: #198754;
}

.client-access-control-disabled {
  color: red;
}

.client-delete-control {
  color: red;
}

.client-control {
  float: right;
  margin: 3px;
}

.upload-order-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.upload-order-action {
  border: 1px solid gray;
  color: gray;
  background-color: white;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.upload-order-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}