body {
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
    color: #444444;
}

ul {
    margin: 0;
}

.site-header .navbar {
    background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
    color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
    font-weight: bold;
}

.content-section {
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 20px;
}

.content-section .media-body {
    overflow-x: auto;
}

.article-title {
    color: #444444;
}

a.article-title:hover {
    color: #428bca;
    text-decoration: none;
}

.article-content {
    white-space: pre-line;
}

.article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
}

.article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
    color: #333;
    text-decoration: none;
}

.children {
    padding-top: 1px;
    margin-top: 4px;
    border-top: 1px solid #e3e3e3
}

.article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.account-img {
    height: 100px;
    width: 100px;
    margin-right: 20px;
    margin-bottom: 16px;
}

.nav-with-image {
    position: relative;
}

.icon-img {
    height: 2.4em;
    width: 2.4em;
    display: inline-block;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu.show {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.dropdown-submenu .dropdown-toggle::after {
    float: right;
    display: inline-block;
    margin-top: .5em;
    margin-left: .255em;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
}

@media (min-width: 768px) {
    .dropdown-submenu.show {
        box-shadow: none;
    }

    .icon-img {
        position: absolute;
        left: -2.3em;
        top: 0;
    }
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0px;
    margin-left: 0px;
}

#main-nav .dropdown-item.active {
    background: none;
    color: #212529;
    font-weight: bold;
}

.calendar {
    width: 100%;
}

.calendar .grid {
    display: grid;
    grid-gap: 0;
    border-top: 1px solid black;
    border-left: 1px solid black;
}

.calendar .grid .weekday {
    display: none;
}

.calendar .day.empty {
    display: none;
}

.calendar .weekday-label {
    display: inline;
}

.calendar .event, .calendar .event a {
    color: #999999;
}

.calendar .event.makeup, .calendar .event.makeup a {
    color: #db7093;
}

.calendar .event.mine, .calendar .event.mine a {
    color: black;
    font-weight: bold;
}

.calendar .event.admin, .calendar .event.admin a {
    color: black;
}

.calendar .event.admin.makeup, .calendar .event.admin.makeup a {
    color: #d00041;
}

.calendar .event.mine.makeup, .calendar .event.mine.makeup a {
    color: #d00041;
}

.calendar .event .all-day {
    color: #2e8b57;
}

.calendar .event .break {
    font-style: italic;
    color: #999999 !important;
}

.calendar .day {
    position: relative;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    padding: 0.3rem;
}

.calendar .day.today {
    background-color: #ffffe0;
}

.calendar .day.last {
    border-bottom-width: 3px;
}

.calendar .grid .day .day-label {
    position: absolute;
    top: 0;
    right: 0.1rem;
}

.calendar h1 {
    text-align: center;
}

.calendar .day.past {
    cursor: pointer;
}

.calendar .day.past:not(.open) .event {
    display: none;
}

.calendar .day.past .day-label {
    color: #cccccc !important;
}

.calendar .day.past .event a {
    color: #cccccc !important;
}

.calendar .day {
    min-height: 2rem;
}

.calendar .delete-button {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
}

.calendar .delete-button .trash-icon {
    fill: #ccc;
}

.calendar .delete-button:hover .trash-icon {
    fill: #c00;
}

.calendar .event a.points-to {
    color: blue;
    text-decoration: underline;
}

@media only screen and (min-width: 530px) {
    .calendar .day.past {
        cursor: default;
    }

    .calendar .day.past .event {
        display: block !important;
    }

    .calendar.grid {
        height: 50rem;
        justify-content: stretch;
    }

    .calendar.weekends .grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 2rem;
        grid-auto-rows: 1fr;
    }

    .calendar.no-weekends .grid {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 2rem;
        grid-auto-rows: 1fr;
    }

    .calendar .grid .weekday {
        display: block;
        font-weight: normal;
        text-align: center;
        line-height: 2rem;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
    }

    .calendar .day.empty {
        display: block;
    }

    .calendar .weekday-label {
        display: none;
    }

    .calendar .day.last {
        border-bottom-width: 1px;
    }
}

.palette label i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.palette label span {
    vertical-align: middle;
}

.palette label[data-value="perfect"] i {
    background-color: #80ff80;
}

.palette label[data-value="works"] i {
    background-color: #ffff80;
}

.palette label[data-value="neutral"] i {
    background-color: #CCCCCC;
}

.palette label[data-value="difficult"] i {
    background-color: #ffc080;
}

.palette label[data-value="impossible"] i {
    background-color: #ff8080;
}

.palette label {
    border: 2px solid white;
    padding: 0.25em;
    width: 8rem;
    white-space: nowrap;
}

.palette label[data-selected="true"] {
    border: 2px solid black;
}

.palette label[data-value="perfect"][data-selected="true"] i {
    background-color: #00FF00;
}

.palette label[data-value="works"][data-selected="true"] i {
    background-color: #FFFF00;
}

.palette label[data-value="neutral"][data-selected="true"] i {
    background-color: #999999;
}

.palette label[data-value="difficult"][data-selected="true"] i {
    background-color: #FF7F00;
}

.palette label[data-value="impossible"][data-selected="true"] i {
    background-color: #FF0000;
}

.inner-container > * {
    vertical-align: middle;
    text-align: left;
}

.inner-container {
    display: inline-block;
    text-align: center;
}

.inner-container input.submit {
    display: block;
}

table.paintable {
    width: auto;
    cursor: default;
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: inline-block;
    touch-action: none;
}

@media (max-width: 340px) {
    .inner-container {
        font-size: 0.9em;
    }

    .palette label {
        width: 6.5rem;
    }
}

.paintable tr,
.paintable td {
    touch-action: none;
    padding: 0.1rem;
}

.paintable.validated td[data-set="undefined"] {
    color: red;
}

.paintable td.excluded {
    background-color: white;
    color: #ccc;
}

.paintable td[data-set="perfect"] {
    background-color: #00FF00;
}

.paintable td[data-set="works"] {
    background-color: #FFFF00;
}

.paintable td[data-set="neutral"] {
    background-color: #999999;
}

.paintable td[data-set="difficult"] {
    background-color: #FF7F00;
}

.paintable td[data-set="impossible"] {
    background-color: #FF0000;
}

.paintable td[data-preview="perfect"] {
    background-color: #80ff80;
}

.paintable td[data-preview="works"] {
    background-color: #ffffc0;
}

.paintable td[data-preview="neutral"] {
    background-color: #CCCCCC;
}

.paintable td[data-preview="difficult"] {
    background-color: #ffc080;
}

.paintable td[data-preview="impossible"] {
    background-color: #ff8080;
}