/*
  SYNOPSIS:
    (from within project root directory)
      sassc scss/main.scss public/css/style.css
*/
/* Base CSS Variables */
:root {
  --background-color: #fff;
  --text-color: #000;
  --hover-text-color: #555;
  --hover-bg-color: #eee;
  --accent-color: #3498db;
  --divider-color: #e5e5e5;
  --current-day-bg: #ffcdd2;
  --calendar-cell-bg: #f5f7f8;
  --leave-cell-bg: #9fbb58;
  --leave-cell-color: #61686b;
  --secondary-background-color: #f8f9fa; }

/* Theme: Day (Light) */
body.theme-day {
  --background-color: #fefefe;
  --text-color: #1c1c1c;
  --hover-bg-color: #e0e0e0;
  --hover-text-color: #333333;
  --accent-color: #3498db;
  --divider-color: #dcdcdc;
  --calendar-cell-bg: #ffffff;
  --leave-cell-bg: #9fbb58;
  --current-day-bg: #ffdd57;
  --secondary-background-color: #f8f9fa;
  --leave-cell-color: #61686b; }

/* Theme: Night (Dark) */
body.theme-night {
  --background-color: #1a1a1a;
  --text-color: #e0e0e0;
  --hover-bg-color: #333333;
  --hover-text-color: #ffffff;
  --accent-color: #4caf50;
  --divider-color: #444444;
  --calendar-cell-bg: #2b2b2b;
  --current-day-bg: #7b1fa2;
  --secondary-background-color: #2c2c2c;
  --leave-cell-bg: #4caf50;
  --leave-cell-color: #ffffff; }

/* Theme: Ocean */
body.theme-ocean {
  --background-color: #031b3c;
  --text-color: #e0f7fa;
  --hover-bg-color: #045b8e;
  --hover-text-color: #ffffff;
  --accent-color: #0573a6;
  --divider-color: #4a90e2;
  --calendar-cell-bg: #0a3d6b;
  --current-day-bg: #0692be;
  --secondary-background-color: #052c5c;
  --leave-cell-bg: #0573a6;
  --leave-cell-color: #ffffff; }

/* Theme: Nature */
body.theme-nature {
  --background-color: #e8f5e9;
  --text-color: #2e7d32;
  --hover-bg-color: #81c784;
  --hover-text-color: #ffffff;
  --accent-color: #388e3c;
  --divider-color: #a5d6a7;
  --calendar-cell-bg: #c8e6c9;
  --current-day-bg: #43a047;
  --secondary-background-color: #c8e6c9;
  --leave-cell-bg: #66bb6a;
  --leave-cell-color: #ffffff; }

/* Theme: Volcano */
body.theme-volcano {
  --background-color: #3e2723;
  --text-color: #ff8a65;
  --hover-bg-color: #ff5722;
  --hover-text-color: #ffffff;
  --accent-color: #e64a19;
  --divider-color: #6d4c41;
  --calendar-cell-bg: #4e342e;
  --current-day-bg: #d84315;
  --secondary-background-color: #4e342e;
  --leave-cell-bg: #ff5722;
  --leave-cell-color: #ffffff; }

/* Theme: Sky */
body.theme-sky {
  --background-color: #e3f2fd;
  --text-color: #1976d2;
  --hover-bg-color: #bbdefb;
  --hover-text-color: #ffffff;
  --accent-color: #2196f3;
  --divider-color: #90caf9;
  --calendar-cell-bg: #bbdefb;
  --current-day-bg: #42a5f5;
  --secondary-background-color: #bbdefb;
  --leave-cell-bg: #64b5f6;
  --leave-cell-color: #ffffff; }

/* Base styles and variables */
body {
  font: 14px "Open Sans", Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  padding-top: 20px;
  padding-bottom: 20px; }

a {
  color: var(--accent-color); }

/* Typography */
.text-bigger {
  font-size: 16px; }

/* Spacing */
.no-bottom-space {
  margin-bottom: 0px; }

.large-bottom-space {
  margin-bottom: 300px; }

.form-group {
  margin-bottom: 20px; }
  .form-group .help-block {
    font-style: italic; }

/* Progress bars */
.progress.bigger {
  height: 38px; }
  .progress.bigger .progress-bar {
    line-height: 38px; }

/* Labels */
.label.label-plain {
  font-weight: normal; }

.label.bigger {
  font-size: large; }

/* Breadcrumbs */
.breadcrumb {
  background: none;
  padding-right: 0;
  padding-left: 0; }

/* Header */
.header h3 {
  padding-bottom: 19px;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px; }

/* Footer */
.footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--divider-color); }

/* Popovers */
.popover {
  min-width: 300px;
  background-color: var(--background-color);
  color: var(--text-color);
  border-color: var(--divider-color); }
  .popover .popover-title {
    background-color: var(--secondary-background-color);
    color: var(--text-color);
    border-bottom: 1px solid var(--divider-color); }
  .popover .popover-content {
    background-color: var(--background-color);
    color: var(--text-color); }
  .popover.top > .arrow {
    border-top-color: var(--divider-color); }
    .popover.top > .arrow:after {
      border-top-color: var(--background-color); }
  .popover.right > .arrow {
    border-right-color: var(--divider-color); }
    .popover.right > .arrow:after {
      border-right-color: var(--background-color); }
  .popover.bottom > .arrow {
    border-bottom-color: var(--divider-color); }
    .popover.bottom > .arrow:after {
      border-bottom-color: var(--background-color); }
  .popover.left > .arrow {
    border-left-color: var(--divider-color); }
    .popover.left > .arrow:after {
      border-left-color: var(--background-color); }

/* Calendar styles */
.calendar_month {
  width: 100%; }
  .calendar_month td {
    background-color: var(--calendar-cell-bg);
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px; }
  .calendar_month thead {
    text-align: center;
    font-weight: bolder; }

div.month_container {
  height: 250px; }

.team-view-table {
  width: 100%; }
  .team-view-table td {
    padding-top: 5px;
    padding-bottom: 5px; }

td.team-view-header {
  height: 43px;
  text-align: center; }

td.calendar_cell {
  width: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  position: relative;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px; }
  td.calendar_cell span {
    position: relative;
    left: 9px;
    top: -1px;
    display: block;
    text-align: center;
    z-index: 10; }

td.current_day_cell {
  background: var(--current-day-bg);
  color: var(--text-color); }

td.weekend_cell {
  background: var(--secondary-background-color); }

td.bank_holiday_cell {
  background: var(--accent-color);
  color: var(--text-color); }

td.leave_cell {
  background: var(--leave-cell-bg);
  color: var(--leave-cell-color);
  font-weight: bolder; }

td.leave_cell_pended {
  background: #ffcba4;
  color: var(--text-color);
  font-weight: bolder; }

/* Modals */
.modal-dialog {
  max-width: 450px; }

/* Truncation */
.left-column-cell {
  text-overflow: ellipsis;
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block; }

/* Headers */
.main-row_header {
  border: none;
  font-weight: normal;
  color: #5ba4e5;
  letter-spacing: -0.01em;
  font-size: 19px;
  line-height: 1.15em;
  text-align: left;
  padding-top: 30px;
  padding-bottom: 30px; }

/* Feeds */
.feed-calendar-big {
  font-size: 450px;
  color: #f8f8f8; }

.feed-calendar-big-picture-holder {
  text-align: center; }

p.description-paragraph {
  padding-top: 20px;
  padding-left: 15px; }

div.feeds-holder {
  margin-top: 20px; }

/* Leave type statistics */
.top-leave-type-statistics {
  text-align: center; }
  .top-leave-type-statistics dt {
    font-size: 75px;
    color: #61686b;
    font-weight: 100;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px; }
  .top-leave-type-statistics dd {
    font-size: 16px; }

.secondary-leave-type-statistics {
  font-size: 16px; }
  .secondary-leave-type-statistics dt {
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e5e5e5; }
  .secondary-leave-type-statistics dd {
    padding-left: 10px;
    padding-right: 10px; }

.calendar-section-caption {
  text-align: center;
  font-size: 1.2em; }

.setting-general-2nd-column {
  padding-left: 30px; }

/* Mobile fix for modal scrolling */
@media (max-width: 768px) {
  body.modal-open {
    position: fixed; } }

/* Selected items in lists */
.selected-item {
  background: #f5f7f8;
  font-weight: bolder; }

/* Holiday Type Colour Picker */
.input-group-addon.color-picker {
  padding: 0; }
  .input-group-addon.color-picker .picker {
    border: 0;
    padding: 0; }

/* Navbar styles */
.navbar-collapse .navbar-nav > li > a {
  transition: background-color 0.3s ease, color 0.3s ease;
  padding: 10px 15px;
  border-radius: 4px;
  margin: 5px 2px; }
  .navbar-collapse .navbar-nav > li > a:hover, .navbar-collapse .navbar-nav > li > a:focus {
    background-color: var(--hover-bg-color);
    color: var(--hover-text-color); }

.navbar-collapse .navbar-nav .navbar-form .btn-info {
  transition: background-color 0.3s ease, color 0.3s ease; }
  .navbar-collapse .navbar-nav .navbar-form .btn-info:hover, .navbar-collapse .navbar-nav .navbar-form .btn-info:focus {
    background-color: var(--hover-bg-color);
    color: var(--hover-text-color); }

/* Form controls */
.form-control,
.list-group,
.datepicker-days,
.container-fluid:hover {
  color: var(--text-color);
  background-color: var(--background-color); }
  .form-control:hover, .form-control:focus,
  .list-group:hover,
  .list-group:focus,
  .datepicker-days:hover,
  .datepicker-days:focus,
  .container-fluid:hover:hover,
  .container-fluid:hover:focus {
    color: var(--hover-text-color);
    background-color: var(--hover-bg-color); }