body {
  font-family: Roboto, Trebuchet MS, Helvetica, Arial, sans-serif;
  background-color: lightyellow;
  padding: 10px 15px; }

h1 {
  color: #444444;
  margin-bottom: 15px; }

h2 {
  color: teal;
  margin-bottom: 10px; }

.actions {
  margin-left: -2px; }
  .actions.top {
    padding-top: 10px; }

.btn {
  display: inline-block;
  margin: 2px 2px;
  padding: 5px 10px 5px 10px;
  background-color: lightgrey;
  color: black;
  border: none;
  text-decoration: none;
  vertical-align: inherit;
  font-family: inherit; }
  .btn:hover {
    opacity: 0.8; }
  .btn.btn-md {
    padding: 6px 15px 6px 15px;
    font-size: 1rem; }
  .btn.btn-positive {
    background-color: lightgreen;
    color: black; }
  .btn.btn-negative {
    background-color: orangered;
    color: white; }
  .btn.btn-last {
    background-color: darkmagenta;
    color: white; }
  .btn.btn-primary {
    background-color: darkcyan;
    color: white; }
  .btn.btn-default {
    background-color: grey;
    color: white; }

.pagy.nav {
  margin-top: 15px; }
  .pagy.nav a {
    display: inline-block;
    margin: 2px 2px;
    padding: 5px 10px 5px 10px;
    background-color: lightgrey;
    color: black;
    border: none;
    text-decoration: none;
    vertical-align: inherit;
    font-family: inherit; }
    .pagy.nav a:hover {
      opacity: 0.8; }
    .pagy.nav a.current {
      font-weight: bold; }
      .pagy.nav a.current:hover {
        opacity: 1; }

a.logout {
  position: relative;
  top: -3px;
  margin-left: 15px;
  font-size: 20px;
  text-decoration: none;
  color: inherit; }
  a.logout:hover {
    opacity: 0.8; }

a.settings {
  position: relative;
  top: -3px;
  margin-left: 5px;
  font-size: 15px;
  text-decoration: none;
  color: inherit; }
  a.settings:hover {
    opacity: 0.8; }

input.duration-input {
  width: 60px; }

table.default-quota th {
  text-align: left; }

table.default-quota th, table.default-quota td {
  padding-right: 15px; }

table.default-quota td.note {
  vertical-align: top;
  font-size: 14px; }

.title-remaining {
  display: inline-block;
  color: darkslategray;
  border: solid 1px gray;
  padding: 0 10px;
  margin-left: 10px;
  background-color: floralwhite;
  font-size: smaller;
  box-shadow: lightgray 2px 2px; }

.remaining {
  display: inline-block;
  color: darkslategray;
  border: solid 1px gray;
  padding: 0 10px;
  background-color: floralwhite;
  box-shadow: lightgray 2px 2px;
  margin-bottom: 5px; }

.pauses span.range {
  display: inline-block;
  border: solid 1px dimgray;
  background-color: floralwhite;
  padding: 0 7px;
  border-radius: 4px; }
  .pauses span.range.current {
    color: crimson;
    border-color: crimson;
    background-color: mistyrose;
    font-weight: bold; }
    .pauses span.range.current.disabled {
      border-color: dimgray;
      color: rosybrown; }
  .pauses span.range + span.range {
    margin-left: 15px; }

.remove-tag {
  position: relative;
  display: inline-block;
  padding: 3px 5px 3px 7px;
  margin-right: -7px;
  color: dimgray;
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
  vertical-align: 12%; }
  .remove-tag:hover {
    opacity: 0.8; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */