/*    @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700);    */
html,
body {
  height: 100%;
}
.border-primary {
  border-width: 3px!important;
  padding: 3px;
  border-color: #28d1fa!important;
}
.inner-container {
  height: 100%;
  min-height: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.outer-container {
  height: 100%;
  min-height: 100%;
  padding: 10px;
}
#network_status {
  float: right;
  font-size: 0.75em;
}
/* Circular buttons code, from: https://www.geeksforgeeks.org/how-to-get-circular-buttons-in-bootstrap-4 */
.btn-circle.btn-sm {
  width: 30px;
  height: 30px;
  padding: 6px 0px;
  border-radius: 15px;
  font-size: 8px;
  text-align: center;
}
.btn-circle.btn-md {
  width: 50px;
  height: 50px;
  padding: 7px 10px;
  border-radius: 25px;
  font-size: 10px;
  text-align: center;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 12px;
  text-align: center;
}
.yaw,
.yaw:active,
.yaw:visited,
.yaw:hover {
  background-color: #a28be7 !important;
  border-color: #a28be7 !important;
}
.yaw:focus,
.yaw:active:focus {
  background-color: #4b0082 !important;
  border-color: #4b0082 !important;
  outline-color: red;
  box-shadow: 0 0 0 0.2rem #a28be7;
}