/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *


 */

body {
  background-color: #B0D8D8;
  text-align: center;
  font-family: "Verdana";
  margin-top: 20px;
}
.application-container {
  font-size: 48pt;
}
.application-container input {
  font-size: 48pt;
  margin-bottom: 1%;
}
.application-container span {
  font-size: 60pt;
}
.status-error {
  color: #C00000;
}
.status-success {
  color: #00A000;
}
.status-dim {
  color: #608080
}
div.sidebar {
  float: left;
  margin: 0px 0px 0px 10%;
}
div.sidebar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px 0px 15px 0px;
}
div.sidebar li {
  padding: 5px;
  background-color: #C0E0E0;
  border: 1px solid #709898;
}
div.sidebar li.header-item {
  border-radius: 7px 7px 0px 0px;
}
div.sidebar li.middle-item {
  border-width: 0px 1px 1px 1px;
  border-bottom-color: #90B8B8;
  border-bottom-style: dashed;
}
div.sidebar li.last-item {
  border-width: 0px 1px 1px 1px;
  border-radius: 0px 0px 7px 7px;
}
div.right-centered {
  width: 60%;
  overflow: hidden;
  margin: auto;
}
.contact-container * {
  font-size: 14px;
}
img {
  max-width: 100%;
  vertical-align: middle;
}
div.work-overtime-datetime {
  font-size: 24pt;
}
div#modal-background {
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
div#modal-date-picker, div#modal-window {
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
div#modal-date-picker table {
  padding: 30px;
}
div#modal-date-picker td {
  padding: 18px 6px;
}
span.sort-arrow {
  opacity: 0.5;
  cursor: pointer;
}