* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f3f3f3;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: #18f;
}
a:visited {
  color: #18f;
}
a:hover {
  color: #039;
}

button, input[type=submit], .btn {
  border-radius: 50px;
  border: 1px solid #18f;
  font-size: 1rem;
  padding: 6px 12px;
  background: white;
  outline: none;
  cursor: pointer;
}
button:hover, input[type=submit]:hover, .btn:hover {
  color: white;
  background: #18f;
}
button:hover .material-icons:first-child:last-child, input[type=submit]:hover .material-icons:first-child:last-child, .btn:hover .material-icons:first-child:last-child {
  color: grey;
}

input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel] {
  display: block;
  width: 100%;
  margin: 16px auto;
  padding: 8px 16px;
  font-size: 1rem;
  border: 1px solid #aaa;
  border-radius: 50px;
  outline: none;
  background: white;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus {
  border-color: #18f;
}

textarea {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid #aaa;
  padding: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  border-radius: 4px;
}
textarea:focus {
  border-color: #18f;
}

hr {
  border: none;
  height: 2px;
  background-color: grey;
  margin: 16px 0;
}

.wrapper {
  width: 100%;
  padding: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.schedule-top-wrapper {
  width: 100%;
  padding: 16px;
  margin: 0;
  height: 136px;
  position: relative;
}

.wrapper-2-col {
  width: 100%;
  padding: 16px;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 30% 70%;
  height: calc(100vh - 200px);
}
.wrapper-2-col .grid-col.top {
  grid-column: 1/span 2;
  grid-row: 1/span 1;
}
.wrapper-2-col .grid-col.left {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}
.wrapper-2-col .grid-col {
  grid-column: 2/span 1;
  grid-row: 1/span 1;
  padding: 0 16px;
  height: 100%;
  overflow-y: auto;
}

i.material-icons {
  position: relative;
  top: 6px;
}
i.material-icons.up {
  top: 2px;
}

header#top-bar {
  height: 64px;
  width: 100%;
  background-color: #18f;
  box-shadow: 0 -50px 10px 50px rgba(0, 0, 0, 0.3);
  padding: 0 16px;
  display: flex;
  flex-direction: row;
}
header#top-bar a#home-link {
  flex-grow: 1;
  line-height: 64px;
  font-size: 32px;
  color: white;
  font-weight: bold;
}
header#top-bar .material-icons {
  position: relative;
  top: 5px;
  padding-right: 5px;
}

nav#main-nav {
  display: none;
}

@media (min-width: 600px) {
  nav#main-nav {
    display: initial;
  }
  nav#main-nav a {
    display: inline-block;
    color: white;
    padding: 0 16px;
    height: 64px;
    line-height: 64px;
  }
  nav#main-nav a:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}
#mobile-nav-btn {
  position: absolute;
  left: -9999px;
}

#mobile-nav-btn + label {
  display: none;
}

nav#mobile-nav {
  display: none;
}

@media (max-width: 599px) {
  #mobile-nav-btn + label {
    display: block;
    border: 1px solid white;
    border-radius: 4px;
    background: none;
    height: 32px;
    margin-top: 16px;
    outline: none;
    color: white;
    padding: 5px 8px;
    cursor: pointer;
  }
  #mobile-nav-btn + label:active {
    transform: scale(1.05);
  }

  nav#mobile-nav {
    display: none;
    position: absolute;
    top: 64px;
    right: 0px;
    background: white;
    width: 180px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  nav#mobile-nav a {
    display: block;
    color: #18f;
    padding: 0 16px;
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
  nav#mobile-nav a:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  #mobile-nav-btn:checked ~ #mobile-nav {
    display: block;
  }

  #mobile-nav-btn:checked + label {
    background: white;
    color: #18f;
  }
}
.card {
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  background: white;
  padding: 16px 16px 16px 16px;
}
.card > h3 {
  margin: 0;
}
.card.selectable {
  border: 2px solid transparent;
  cursor: pointer;
}
.card.selectable.selected {
  border: 2px solid #18f;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.3);
}

.msgcard {
  width: 100%;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
  color: white;
}
.msgcard.success {
  background-color: #0b5;
}
.msgcard.error {
  background-color: #b22;
}

#splash {
  background: #18f;
  color: white;
  font-size: 3rem;
  text-align: center;
  line-height: 200px;
}

@media (max-width: 440px) {
  #splash {
    font-size: 2rem;
    line-height: 80px;
  }
}
.login-area {
  margin: 48px auto;
  width: 100%;
  max-width: 480px;
}

ul {
  list-style: none;
  padding: 0;
}
ul li {
  line-height: 48px;
  display: flex;
  flex-direction: row;
}
ul li .main-text {
  display: block;
  padding-left: 12px;
  color: black;
  flex-grow: 1;
}
ul li a.main-text {
  padding-right: 12px;
}
ul li a.main-text:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
ul li .end-btn {
  display: inline-block;
  flex-grow: unset;
  width: 48px;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
ul li:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}
ul li.endpad {
  padding-right: 12px;
}

ul.shift-list.users li {
  cursor: pointer;
}
ul.shift-list.users li[data-shift-picked] {
  font-weight: bold;
}
ul.shift-list.users li[data-shift-picked] > .selection-indicator {
  width: 24px;
}

ul.shift-list:not(.users) li span.shift-option {
  cursor: pointer;
}
ul.shift-list:not(.users) li span.shift-option:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

ul.shift-list {
  user-select: none;
}
ul.shift-list li:not(:first-child) {
  border-top: 1px solid lightgrey;
}
ul.shift-list li:nth-child(odd) {
  background: none;
}
ul.shift-list li.priority-2 {
  background-color: rgba(255, 255, 0, 0.25);
}
ul.shift-list li.priority-3 {
  background-color: rgba(255, 170, 0, 0.25);
}
ul.shift-list li span.date {
  display: inline-block;
  width: 85px;
}
ul.shift-list li span.time {
  display: inline-block;
  width: 105px;
  font-size: 0.8rem;
}
ul.shift-list li span.shift-option {
  display: inline-block;
  margin-left: 8px;
  border-radius: 50%;
  border: 1px solid grey;
  height: 44px;
  margin-top: 2px;
  width: 44px;
  line-height: 44px;
  text-align: center;
}
ul.shift-list li span.shift-option.picked {
  background-color: #18f;
  color: white;
}
ul.shift-list li .selection-indicator {
  display: inline-block;
  height: 100%;
  width: 16px;
  background: none;
}
ul.shift-list li[data-shift-status="1"] .selection-indicator {
  background-color: green;
}
ul.shift-list li[data-shift-status="2"] .selection-indicator {
  background-color: darkorange;
}
ul.shift-list li[data-shift-picked] > .selection-indicator {
  background-color: #18f;
}


/*# sourceMappingURL=style.css.map*/