/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Full Page
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

html {
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    background: #808080;
    margin: 0px;
    border-collapse: collapse;
    overflow-x: hidden;
    padding-bottom: 10px;
}

p, h1, h2, h5 {
    padding: 0px;
    margin: 0px;
}

h2 {
    text-align: center;
}

ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Each module is given an invisible row to fill with boxes
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.module {
    padding: 10px 10px 0px 10px;
}

/* The 'box' class indicates the dive that is given the border and background */

.box {
    background: #fefefe;
    border: solid 2px #010101;
    padding: 10px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Within each module, many other rows can exist with a selection of types
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* A 'full' row is a single element spanning the full width */

.full {
    text-align: center;
}

/* A 'double' row contains two columns, equally splitting the width */

.double {
    width: 100%;
    position: relative;
}

.doubleleft, .doubleright {
    vertical-align: top;
    display: inline-block;
    position: relative;
    width: 50%;
}

.left {
    margin-right: 5px;
}

.right {
    margin-left: 5px;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Specific Module Styles
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* DateTime */

#datetime {
    padding: 0px;
}

#datetime-block {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: 10px;
    height: 40px;
    z-index: 1000;
}

div#datetime::after, div#datetime::before {
    position: fixed;
    content: 'content';
    z-index: 999;
    color: rgba(0,0,0,0);
    left: 0px;
    right: 0px;
}
div#datetime::before {
    background: #808080;
    height: 74px;
}

div#datetime::after {
    background-image: linear-gradient(to bottom, rgba(128,128,128,1), rgba(128,128,128,0));
    top: 74px;
    height: 10px;
}

#datetime ul, #datetime h1 {
    display: inline-block;
}

#datetime-sun {
    margin-left: 10px;
    float: right;
}

#datetime-sun img {
    position: relative;
    top: 5px;
    height: 35px;
    filter: invert(100%);
}

#datetime-sun h5 {
    color: #fefefe;
    position: relative;
    top: -20px;
    font-size: 17px;
}

#datetime-gap {
    position: relative;
    height: 74px;
}

/* Camera */

#camera-feed {
    display: none;
    top: 82px;
    left: 10px;
    right: 10px;
    z-index: 900;
    position: absolute;
    font-family: sans-serif;
    font-size: 24px;
}

#camera img {
    width: 100%;
}

img#camera-open {
    float: left;
}

#dismiss-camera {
    top: 20px;
    right: 20px;
    position: absolute;
    z-index: 950;
    float: right;
}

/* MC Status */

.mc_host {
    display: inline-block;
    padding: 10px;
}

/* Weather */

.weather-column {
    vertical-align: middle;
    min-width: 19%;
}

.weather-column ul {
    margin-right: 10px;
}

.weather-wind ul {
    margin-right: 0px;
}

.weather-column li {
    display: grid;
}

#weather h2 {
    font-size: 30px;
}

#weather img {
    margin: auto;
}

#weather-condition img {
    height: 92px;
}

#weather-wind img, #weather-storm img {
    height: 77px;
    filter: invert(100%);
}

.weather-column {
    display: inline-block;
}

/* Goals */

div.goal {
    display: inline-block;
}

#goals img {
    height: 100px;
    padding: 0px 10px;
}

.goal li, .goal b {
    line-height: 18px;
    text-align: center;
    list-style: none;
}

/* Generic Library */

.checked-out, .on-hold, .todo_today, .todo_priority {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.checked-out img, .on-hold img {
    padding-bottom: 10px;
}

p.not-due, p.available {
    color: green;
}

p.due, p.unavailable {
    color: red;
}

p.due-soon {
    color: orange;
}

p.other {
    color: yellow;
}

/* Edmonton Library */

.epl p, .epl b, .todo p, .todo b {
    overflow-x: hidden;
}

#epl_checkouts, #epl_holds {
    padding-bottom: 0px;
}
.epl_desc {
    height: 58px;
    overflow-y: hidden;
}

#epl img {
    float: left;
    height: 124px;
    vertical-align: middle;
    margin: 0px;
    margin-right: 10px;
}

#epl_fines {
    margin-top: 10px;
    overflow: hidden;
}

#epl_fines p, #epl_fines b {
    line-height: 18px;
    display: inline;
}

#epl_fines p {
    float: left;
}

#epl_fines b {
    float: right;
}

/* Ottawa Library */

.opl p, .opl b, .todo p, .todo b {
    overflow-x: hidden;
}

#opl_checkouts, #opl_holds {
    padding-bottom: 0px;
}
.opl_desc {
    height: 58px;
    overflow-y: hidden;
}

#opl img {
    float: left;
    height: 124px;
    vertical-align: middle;
    margin: 0px;
    margin-right: 10px;
}

#opl_fines {
    margin-top: 10px;
    overflow: hidden;
}

#opl_fines p, #opl_fines b {
    line-height: 18px;
    display: inline;
}

#opl_fines p {
    float: left;
}

#opl_fines b {
    float: right;
}

/* Tangerine Investments */

#equity_growth, #balanced_income {
    padding-left: 0px;
    padding-right: 0px;
}

#tangerine img {
    position: relative;
    width: 100%;
}

#tangerine ul {
    width: 100%;
    text-align: center;
}

#tangerine li {
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
}

/* Remind Calendar */

#rem_cal {
    padding: 0px;
}

#rem-table {
    border: none;
    position: relative;
    z-index: 10;
    width: 100%;
}

td.rem-mon-cell {
    text-align: center;
    position: relative;
    line-height: 0px;
    padding: 0px;
    height: 0px;
}

.rem-past, .rem-empty {
    background-color: #dbdbdb;
}

.rem-present {
    background-color: #323232;
    color: #fefefe;
}

.rem-present img {
    filter: invert(100%);
}

#remind li {
    position: relative;
    z-index: 20;
    overflow-x: hidden;
    list-style: none;
}
#remind b, p.rem-week-number, p.rem-number, img.moon, #remind ul {
    padding-right: 2px;
    display: inline-grid;
}
#remind ul {
    margin: 0px;
    padding: 0px;
}

tr.rem-mon-row, td.rem-mon-cell, .rem-mon-row h2 {
    position: relative;
    border: none;
}
.rem-mon-row td {
    border-bottom: none;
}
.rem-mon-row h2 {
    font-size: 40px;
    margin: 0px;
    color: rgba(128,128,128,0.7);
    z-index: 0;
    margin: 0px;
    line-height: 0px;
    top: 60px;
}

#rem-table td {
    z-index: 10;
    border-collapse: collapse;
}
.rem {
    padding: 0px;
}
#rem-table {
    border-collapse: collapse;
}

/* SMS */

#sms-list {
    padding-bottom: 0px;
}

#sms-list h2 {
    margin-bottom: 10px;
}

.sms-row {
    text-align: left;
}

.sms-row span {
    display: inline-block;
}

span.sms-from {
    line-height: 39px;
    padding-left: 0px;
    margin-left: 0px;
}

span.sms-msg {
    padding: 10px 10px;
    margin: 0px 10px 10px 10px;
    border-radius: 20px;
    background: #cdcdcd;
}

.sms-new span.sms-msg {
    background: #9f9;
}

span.sms-time {
    line-height: 39px;
    padding-left: 0px;
    float: right;
}

/* OTHER */
.rem-cal {
  /*width: 1060px;*/
  border-collapse: collapse;
}
.rem-past, .rem-present, .rem-future {
  border: solid 1px #010101;
}
.rem-cal-hdr, .rem-empty, .rem-small-calendar, .rem-past, .rem-present, .rem-future {
  min-width: 14.28%;
  width: 14.29%;
  vertical-align: top;
  margin: 0px;
}
.rem-empty, .rem-small-calendar, .rem-past, .rem-present, .rem-future {
  height: 120px;
  overflow-y: hidden;
}
p.rem-entry {
    margin: 0px;
    margin-bottom: 2px;
    display: inline-block;
}
.rem-past p, .rem-present p, .rem-future p, {
  display: inline;
}
.rem-daynumber, img.phase-0, img.phase-1, img.phase-2, img.phase-3 {
    float: left;
}

#rem_cal img {
    height: 18px;
}

.rem-daynumber {
    margin-right: 5px;
    font-weight: bold;
}
.rem-dow-0 {
    border-left: none;
}
.rem-dow-6 {
    border-right: none;
}
.rem-week-5 td {
    border-bottom: none;
}
.remind p {
    display: inline;
}