/* logo grey: #4c4c4c light-grey: #afafaf orange: #ff9100 green: #078e5e */

*, h1, h2, h3, h4, h5, h6 { font-family: 'Sarabun', Helvetica, Arial, sans-serif; }
body { background-color: #2C3E50; font-size: 16px; }
.row { background-color: #fff; }

a { cursor: pointer; }

.button, .button:link, .button:visited { background-color: #ff9100; color: #fff; transition: all ease 0.5s; border-radius: 4px; font-size: 0.8rem; padding: 0.65rem 0.65rem 0.65rem 0.65rem; }
.button:hover, .button:active { background-color: #ff5e00; color: #fff; }
.button.secondary, .button.secondary:link, .button.secondary:visited { background-color: #4c4c4c; color: #fff; }
.button.secondary:hover, .button.secondary:active { background-color: #afafaf; color: #fff; }
.button.terciary, .button.terciary:link, .button.terciary:visited { background-color: #2C3E50; color: #fff; }
.button.terciary:hover, .button.terciary:active { background-color: #003a8b; color: #fff; }
.button.danger, .button.danger:link, .button.danger:visited { background-color: #eee; color: #666; }
.button.danger:hover, .button.danger:active { background-color: #E74C3C; color: #fff; }
.button.text-only, .button.text-only:link, .button.text-only:visited { background-color: #fff; color: #555; }
.button.text-only:hover, .button.text-only:active { background-color: #fff; color: #333; text-decoration: underline; }
.button.icon-only, .button.icon-only:link, .button.icon-only:visited { background-color: #d2d2d2; color: #222; font-size: 0.825rem; padding: 0.25rem; }
.button.icon-only:hover, .button.icon-only:active { background-color: #4f6c89; color: #bbb; }
.button.toggle { background-color: #d4e1ef; color: #64717e; }
.button.toggle.selected { background-color: #2C3E50; color: #eee; }

.button.nav, .button.nav:link, .button.nav:visited { font-size: 0.675rem; padding: 0.5rem; background-color: #fff; border-bottom: solid 1px #afafaf; color: #afafaf; border-radius: 0; }
.button.nav:hover, .button.nav:active { background-color: #666; border-bottom-color: #666; color: #fff; }

.back-button, .back-button:link, .back-button:visited { display: inline-block; background-color: #eee; color: #666; font-size: 0.825rem; padding: 0.25rem 0.5rem; margin-right: 0.5rem; border-radius: 4px; vertical-align: text-bottom; }
.back-button:hover, .back-button:active { background-color: #2C3E50; color: #fff; }

#toolbar .button, #toolbar .button:link, #toolbar .button:visited { background-color: #fff; border-bottom: solid 1px #2C3E50; color: #666; border-radius: 0; }
#toolbar .button:hover, #toolbar .button:active { background-color: #666; color: #fff; border-bottom: solid 1px #666; }
#toolbar .button.selected { background-color: #ff9100; color: #fff; border-bottom: solid 1px #ff9100; }

#toolbar .button.exit:hover, #toolbar .button.exit:active { background-color: #E74C3C; color: #fff; border-bottom: solid 1px #E74C3C; }

h3.title { font-weight: bold; color: #078e5e; margin-bottom: 0.5rem; }
h3.title span.data { display: inline-block; margin-left: 1rem; background-color: #eee; color: #4c4c4c; padding: 4px 8px; font-size: 0.675rem; border-radius: 4px; }
label { font-size: 0.675rem; text-transform: uppercase; color: #afafaf; font-weight: bold; }
label + span { font-size: 0.8rem; }
input, select { font-size: 0.825rem !important; }

div.feature-info { background-color: #fff; padding: 0.5rem 1rem; position: relative; text-align: center; border-bottom: dashed 1px #ccc; }
div.feature-info label { font-weight: bold; color: #2C3E50; margin-top: 1rem; }
div.feature-info label + span { font-size: 0.8rem; color: #444; }

@media only screen and (min-width: 1024px) {
    div.feature-info { text-align: left; border-left: dashed 1px #ccc; border-bottom: none; }
}

div.prompt h4.what { font-size: 1.4rem; font-weight: bold; margin: 2rem 0; text-align: center; }
div.prompt span.icon-container { display: block; padding: 0.25rem; font-size: 1.3rem; text-align: center; border-radius: 1.2rem; width: 2.4rem; height: 2.4rem; margin: 1rem auto; }
div.prompt p { font-size: 1rem; color: #444; margin: 1rem 2rem; text-align: center; }
div.prompt .form-actions { text-align: center; margin-top: 1rem; }

div.prompt.danger h4.what { color: #E74C3C; }
div.prompt.danger span.icon-container { background-color: #E74C3C; color: #fff; }

div.prompt.empty h4.what { color: #999; }
div.prompt.empty span.icon-container { background-color: transparent; color: transparent; }

div.prompt.first-use h4.what { color: #2C3E50; }
div.prompt.first-use span.icon-container { background-color: transparent; color: #2C3E50; }

div.prompt.yay h4.what { color: #2ECC71; }
div.prompt.yay span.icon-container { background-color: #2ECC71; color: #fff; }

div.feature-assist { background-color: #fff; padding: 0.5rem 1rem; position: relative; text-align: center; border-bottom: dashed 1px #ccc; }
div.feature-assist span.icon-container { display: inline-block; font-size: 2.25rem; color: #ff9100; }
div.feature-assist h3.feature-title { font-weight: bold; font-size: 1rem; text-transform: uppercase; color: #2C3E50; }
div.feature-assist p { font-size: 0.8rem; color: #444; }

@media only screen and (min-width: 1024px) {
    div.prompt h4.what { font-size: 2.4rem; font-weight: bold; text-align: left; margin: 1rem 0; }
    div.prompt span.icon-container { padding: 0.25rem; font-size: 2.4rem; border-radius: 2rem; width: 4rem; height: 4rem; display: inline-block; margin: 1rem 0; }
    div.prompt p { font-size: 1.25rem; margin: 1rem 0 1rem 0; text-align: left; }
    div.prompt .form-actions { text-align: left; }

    div.feature-assist { text-align: right; }
}

#appContainer { background-color: #fff; }
#appSidebar { background-color: #eee; border-right: solid 5px #2C3E50; height: 100vh; }
#appSidebar.Dashboard { border-right-color: #2C3E50; }
#appSidebar.Transactions { border-right-color: #eed824; }
#appSidebar.Checks { border-right-color: #2ECC71; }
#appSidebar.Utils { border-right-color: #ff9100; }
#appSidebar.UserDetails { border-right-color: #afafaf; }
#appSidebar .logo { margin-bottom: 3rem; }
#appSidebar .menu a { text-align: center; margin-bottom: 1rem; font-size: 0.725rem; color: #2C3E50; padding: 0.5rem; }
#appSidebar .menu a.selected { color: #fff; }
#appSidebar .menu a.Dashboard.selected { background-color: #2C3E50; }
#appSidebar .menu a.Checks.selected { background-color: #2ECC71; }
#appSidebar .menu a.Transactions.selected { background-color: #eed824; }
#appSidebar .menu a.Utils.selected { background-color: #ff9100; }
#appSidebar .menu a.UserDetails.selected { background-color: #afafaf; }
#appSidebar .menu a i { display: block; font-size: 1.6rem; margin-bottom: 0.5rem; }
#appPage.Dashboard { background-color: #fefefe; }
#appPage.Checks { background-color: #fefffe; }
#appPage.Transactions { background-color: #fefffe; }
#appPage.Utils { background-color: #fefffe; }
#appPage.UserDetails { background-color: #fefffe; }

@media only screen and (min-width: 1300px) {
    #appSidebar .menu a { font-size: 0.825rem; }
}

#shadowContainer { box-shadow: 0px 6px 10px rgba(33,33,33,0.8); }
#header { background-color: #f5f5f5 !important; }
#appMessage { text-align: center; }
#toolbar { display: none; }
#footer { background-color: #34495E !important; border-top: solid 4px #2ECC71; margin-top: 2rem; }
.view { display: none; }
#content { min-height: 600px; }
.list { margin: 0.75rem 0; }
.row.form-actions { margin-top: 1rem; }

.view-v2 { display: none; }
.view-v2.visible { display: block }
.view-v2 .title { font-size: 1.4rem; font-weight: bold; color: #2C3E50; text-align: left; }
.view-v2 .subtitle { font-size: 1.25rem; font-weight: bold; color: #4c4c4c; text-align: left; }
.view-v2 .panel { border-bottom: solid 1px #cacaca; }
.view-v2 .panel .title { color: #4c4c4c; font-size: 1.25rem; font-weight: bold; text-align: left; }
.view-v2 .grid-header { font-size: 0.625rem !important; color: #444; text-transform: uppercase; margin-top: 1rem; }

@media only screen and (min-width : 1300px) {
    .view-v2 { margin-top: 1rem; }
    .view-v2 .title { margin-bottom: 2rem; }
    .view-v2 .subtitle { margin-bottom: 1rem; }
    .view-v2 .panel { padding-bottom: 2rem; }
    .view-v2 .panel .title { margin-bottom: 1rem; }
}

.dashboard-check { padding-bottom: 0.75rem; padding-top: 0.75rem; font-size: 0.875rem; }
.dashboard-check:not(:last-child) { border-bottom: dashed 1px #eee; }
.dashboard-check i.status { display: inline-block; margin-right: 0.25rem; font-size: 0.5rem; vertical-align: middle; }
.dashboard-check span.sparks { font-size: 2.3rem; line-height: 2rem; color: #afafaf; border-left: solid 1px #eee; border-right: solid 1px #eee; }
.dashboard-check span.date { font-size: 0.725rem; }
.dashboard-check span.check-type { font-size: 0.725rem; background-color: #afafaf; color: #333; text-transform: uppercase; font-weight: bold; padding: 3px 6px; border-radius: 3px; }
.dashboard-check span.check-type.http { background-color: #ff9100; color: #111; }
.dashboard-check span.check-type.poke { background-color: #2C3E50; color: #fff; }
.dashboard-check span.check-type.small { font-size: 0.575rem; padding: 1px 4px 2px 4px; font-weight: normal; }

.dashboard-poke { font-size: 0.725rem; padding-bottom: 0.5rem; padding-top: 0.25rem; }
.dashboard-poke:not(:last-child) { border-bottom: dashed 1px #eee; }
.dashboard-poke i.status { display: inline-block; margin-right: 0.75rem; }
.dashboard-poke span.date { font-size: 0.725rem; }

.dashboard-transaction { padding-bottom: 0.75rem; padding-top: 0.75rem; font-size: 0.875rem; }
.dashboard-transaction:not(:last-child) { border-bottom: dashed 1px #eee; }
.dashboard-transaction i.status { display: inline-block; margin-right: 0.25rem; font-size: 0.5rem; vertical-align: middle; }
.dashboard-transaction span.sparks { font-size: 2.3rem; line-height: 2rem; color: #afafaf; border-left: solid 1px #eee; border-right: solid 1px #eee; }
.dashboard-transaction span.date { font-size: 0.725rem; }

.dashboard-tracking { padding-bottom: 0.5rem; padding-top: 0.25rem; font-size: 0.725rem; }
.dashboard-tracking:not(:last-child) { border-bottom: dashed 1px #eee; }
.dashboard-tracking i.status { display: inline-block; margin-right: 0.75rem; font-size: 1rem; }
.dashboard-tracking span.step { padding: 2px 6px; color: #fff; font-size: 0.725rem; font-weight: bold; border-radius: 3px; }
.dashboard-tracking span.date { font-size: 0.725rem; }
.dashboard-tracking span.date.big { font-size: 0.825rem; font-weight: bold; }

#progress { height: 10px; }
#progress span { background-color: #2ECC71; height: 5px; transition: width ease-out 0.3s; display: none; }
.nanobar { height: 10px !important; }
.nanobar .bar { background: #267dd1; box-shadow: 0 2px 5px #336ea9; height: 5px; margin: 0 auto; }

.no-items { text-align: center !important; }

.item { padding-bottom: 1rem; padding-top: 1rem; border-top: solid 1px #eee; background-color: #fdfdfd; }
.item:last-child { border-bottom: solid 1px #eee; }
.item .name, strong.name { font-size: 0.925rem; font-weight: bold; }
.item .name.disabled, strong.name.disabled { color: #afafaf; text-decoration: line-through; }
.item .text, p.text { font-size: 0.825rem; font-weight: normal; color: #666; }
.item .text-2, p.text-2 { font-size: 0.725rem; font-weight: normal; color: #666; }
.item .actions i { font-size: 1rem; color: #95A5A6; display: inline-block; margin-right: 0.5rem; padding: 5px; cursor: pointer; border-radius: 5px; }
.item .actions i:hover { background-color: #95A5A6; color: #fff; }

.item.item-poke { padding-bottom: 0.4rem; padding-top: 0.4rem; }

.item-disabled { text-decoration: line-through; }

code.poke-detail-contents { padding: 0.5rem 1rem; font-size: 0.825rem; line-height: 0.875rem; display: block; }
code.id { border-radius: 3px; }
code.id span { font-family: Consolas,"Liberation Mono",Courier,monospace !important; }
div.code-sample { background-color: #2C3E50; box-shadow: 5px 5px 0 #ff9100; padding: 0.5rem; font-size: 0.725rem; }
div.code-sample code { background-color: transparent; color: #fff; white-space: pre; border: none; }

.filters-wrapper { background-color: #eee; border-radius: 3px; font-size: 0.725rem !important; }
.filters-wrapper div.dates input { margin-bottom: 0; font-size: 0.725rem !important; height: 1.8rem; text-align: center; border: none; }
.filters-wrapper div.dates a { padding: 0.3rem 0.5rem !important; color: #444; display: block; }
.filters-wrapper ul.pagination { margin-bottom: 0; }
.filters-wrapper ul.pagination a { margin-bottom: 0; padding: 0.25rem 0.5rem !important; }
.filters-wrapper ul.pagination a.disabled { pointer-events: none; }
.filters-wrapper ul.levels { padding-top: 2px; margin-bottom: 0; list-style-type: none; }
.filters-wrapper ul.levels li { display: inline-block; margin-right: 0.2rem; padding-top: 2px; }
.filters-wrapper ul.levels li span.level { cursor: pointer; }
.filters-wrapper ul.levels li span.level.filtered-out { background-color: #fff; border-color: #666; }

.alert { display: inline-block; padding: 8px 12px; font-size: 0.825rem; }
.alert.success { background-color: #2ECC71; color: #fff; }
.alert.error { background-color: #E74C3C; color: #ffd4cf; }

.alert.regex { display: inline-block; border-radius: 3px; padding: 4px 8px; font-size: 0.825rem; line-height: 1.6rem; }
.alert.regex.match { background-color: #2ECC71; color: #fff; }
.alert.regex.no-match { background-color: #E74C3C; color: #ffd4cf; }

.tabs-title > a { padding: 1rem 1rem; color: #2C3E50; }
.tabs-title > a[aria-selected=true] { background-color: #2C3E50; color: #fff; }

#ulAlerts { margin: 1rem 0 !important; }
#ulAlerts li { font-size: 0.875rem; list-style-type: none; padding: 0.5rem; border-top: solid 1px #eee; background-color: #fdfdfd; }
#ulAlerts li:last-child { border-bottom: solid 1px #eee; }
#ulAlerts li strong { display: inline-block; margin-left: 0.75rem; }
#ulAlerts li span.ago { display: inline-block; margin-left: 0.75rem; font-size: 0.6rem; color: #888; }
#ulAlerts li p { margin: 0.75rem 0; }

#ulPingHistory { margin: 1rem 0 !important; }
#ulPingHistory li { margin-right: 0.5rem; display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.725rem; color: #fff; font-weight: normal; }
#ulPingHistory li.ping-result { margin-right: 0.5rem; display: inline-block; padding: 0.25rem 0.5rem; color: #fff; font-weight: normal; }
#ulPingHistory li.ping-result.OK { background-color: #2ECC71; color: #fff; }
#ulPingHistory li.ping-result.ERROR { background-color: #E74C3C; color: #ffd4cf; }

#modal { border-top: solid 10px #E74C3C; }
#modal h3.title { color: #2C3E50; font-size: 1.4rem; }
#modal p { font-size: 0.975rem; color: #666; }
#modal a { display: inline-block; min-width: 4rem; }

/*ul.pagination { list-style-type: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
ul.pagination li { display: inline-block; user-select: none; }
ul.pagination li a { color: #666; padding: 0.25rem 0.4rem; font-size: 0.825rem; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
ul.pagination li a:hover, ul.pagination li a:active, ul.pagination li a.current { background-color: #2C3E50; color: #fff; }*/

.mjml-mail-message h1 { color: #ff9100; font-weight: bold; font-size: 2.4rem; }
.mjml-mail-message p { color: #2C3E50; font-size: 1.2rem; line-height: 2.2rem; }
.mjml-mail-message small { color: #4c4c4c; }
.mjml-mail-message span.check { display: inline-block; font-size: 0.975rem; word-break: keep-all; }
.mjml-mail-message span.red { color: #E74C3C; font-weight: bold; }
.mjml-mail-footer small { color: #eee; }

.pika-button, .pika-button:hover { border-radius: 0px !important; }
.is-inrange .pika-button { background: #efac52; }

.switch-paddle { border-radius: 20px; }
.switch-paddle:after { border-radius: 20px; left: .5rem; top: .375rem; width: 1.25rem; height: 1.25rem; }
input:checked ~ .switch-paddle { background-color: #2C3E50; }
input:checked ~ .switch-paddle:after { left: 2.3rem; }

i.status.OK, i.status.ISUP { color: #2ECC71; }
i.status.WARN { color: #ff9100; }
i.status.ERROR { color: #E74C3C; }
i.status.UNKNOWN { color: #afafaf; }
i.status.INFO { color: #3fbad9; }
i.status.STARTUP { color: #87e7ff; }
i.status.SHUTDOWN { color: #003a8b; }
i.status.FATAL, i.status.ISDOWN { color: #222; }
i.status.DISABLED { color: #eee; }
i.status.TRACK { color: #222; }

span.status { text-align: center; font-size: 0.675rem; padding: 2px 6px; display: block; border-radius: 4px; font-weight: bold; }
span.status.inline { display: inline-block; }
span.status.OK, span.status.ISUP { background-color: #2ECC71; color: #fff; }
span.status.WARN { background-color: #ff9100; color: #676767; }
span.status.ERROR { background-color: #E74C3C; color: #feeae8; }
span.status.UNKNOWN { background-color: #ECF0F1; color: #888; }
span.status.INFO { background-color: #3fbad9; color: #2C3E50; }
span.status.STARTUP { background-color: #87e7ff; color: #003a8b; }
span.status.SHUTDOWN { background-color: #003a8b; color: #87e7ff; }
span.status.FATAL, span.status.ISDOWN { background-color: #222; color: #E74C3C; }
span.status.DISABLED { background-color: #eee; color: #fff; }
span.status.TRACK { background-color: #222; color: #ff9100; }

span.message { font-size: 0.825rem; color: #444; display: block; margin-bottom: 1rem; }
span.message.error { color: #E74C3C; }

a.clickable { cursor: pointer; }
a.clickable:hover { font-weight: bold; }

span.indicator { font-size: 0.825rem; line-height: 0.725rem; color: #666; display: block; margin-top: 0.2rem; }
small.indicator-label { color: #999; font-size: 0.6rem; }
.big span.indicator { font-size: 2rem; line-height: 1.6rem; }
.big small.indicator-label { font-size: 1rem; }

@media only screen and (min-width : 1300px) {
    span.indicator { font-size: 1rem; }
    small.indicator-label { color: #999; font-size: 0.625rem; }
}

span.indicator.active { }
span.indicator.OK { color: #26b462; }
span.indicator.ERROR { color: #E74C3C; }
span.indicator.WARN { color: #ff9100; }
span.indicator.SHUTDOWN { color: #003a8b; }
span.indicator.ISDOWN { color: #222; }

span.pokrscore { font-size: 0.825rem; font-weight: bold; display: inline-block; padding: 0rem 0.4rem 0.1rem 0.4rem; background-color: #2C3E50; color: #fff; border-radius: 3px; }

@media only screen and (min-width: 1300px) {
    span.pokrscore { font-size: 1rem; font-weight: bold; display: inline-block; padding: 0.2rem 0.6rem; background-color: #2C3E50; color: #fff; border-radius: 3px; }
}

span.pokrscore.A { background-color: #26b462; }
span.pokrscore.B { background-color: #258e7b; }
span.pokrscore.C { background-color: #298ae8; }
span.pokrscore.D { background-color: #cae00b; }
span.pokrscore.E { background-color: #ff9100; }
span.pokrscore.F { background-color: #E74C3C; }

.sparks.OK { color: #26b462 !important; }
.sparks.ERROR { color: #E74C3C !important; }
.sparks.WARN { color: #ff9100 !important; }
.sparks.SHUTDOWN { color: #003a8b !important; }

.transaction-success { color: #2ECC71; }
.transaction-fail { color: #E74C3C; }

.step-success { background-color: #2ECC71; color: #fff; }
.step-fail { background-color: #E74C3C; color: #fff; }

.refresh-indicator { padding: 3px 8px; border-radius: 3px; display: inline-block; font-size: 0.725rem; }
.refresh-indicator.waiting { background-color: #ddd; color: #444; }
.refresh-indicator.soon { background-color: #ff9100; color: #2C3E50; }
.refresh-indicator.in-progress { background-color: #26b462; color: #fff; }

div.combined-indicator { }
div.combined-indicator span:first-child { border-radius: 3px 0 0 3px; display: inline-block; padding: 3px 6px; font-size: 0.725rem !important; border-right: solid 1px #fff; text-align: center; }
div.combined-indicator span:last-child { border-radius: 0 3px 3px 0; display: inline-block; padding: 3px 6px; font-size: 0.725rem !important; text-align: center; }
div.combined-indicator.half span { width: 50%; }
div.combined-indicator span.button { vertical-align: unset; margin: unset; border: unset; line-height: unset; }

div.data-dimension-chart { white-space: nowrap; }
div.data-dimension-chart span { display: inline-block; background-color: #2C3E50; color: #fff; text-align: left; padding: 2px 4px; font-size: 0.775rem; }
div.data-dimension-chart span:nth-child(0) { background-color: #2C3E50; }
div.data-dimension-chart span:nth-child(1) { background-color: #3e5771; }
div.data-dimension-chart span:nth-child(2) { background-color: #507192; }
div.data-dimension-chart span:nth-child(3) { background-color: #698aac; }
div.data-dimension-chart span:nth-child(4) { background-color: #89a4be; }
div.data-dimension-chart span:nth-child(5) { background-color: #aabdd0; }
div.data-dimension-chart span:nth-child(6) { background-color: #ff9100; }
div.data-dimension-chart span:nth-child(7) { background-color: #ffa733; }
div.data-dimension-chart span:nth-child(8) { background-color: #ffbd66; }
div.data-dimension-chart span:nth-child(9) { background-color: #ffd399; }
div.data-dimension-chart span:nth-child(10) { background-color: #ffe9cc; }
div.data-dimension-chart span:nth-child(11) { background-color: #fff; color: #2C3E50; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    #header { background-color: #222 !important; }
    .row { background-color: #555; }
    a { color: #cacaca; }
    .view-v2 .title { color: #ff9100; }
    .view-v2 .subtitle { color: #afafaf; }
    .view-v2 .grid-header { color: #eee; }
    .view-v2 .panel { border-bottom-color: #666; }
    input, select, textarea { background-color: #bbb !important; }
    #appSidebar { background-color: #222; border-right: solid 5px #ff9100; }
    #appSidebar .menu a { color: #ff9100; }
    #appPage.Dashboard { background-color: #333; }
    #appPage.Checks { background-color: #444; }
    #appPage.Transactions { background-color: #444; }
    #appPage.Utils { background-color: #444; }
    #appPage.UserDetails { background-color: #444; }
    span.indicator.ISDOWN { color: #eee; }
    span.indicator.SHUTDOWN { color: #eee; }
    .dashboard-check { color: #fff; }
    .dashboard-poke { color: #fff; }
    .dashboard-transaction { color: #fff; }
    .dashboard-tracking { color: #fff; }
    .dashboard-check:not(:last-child) { border-bottom-color: #666; }
    .dashboard-poke:not(:last-child) { border-bottom-color: #666; }
    .dashboard-transaction:not(:last-child) { border-bottom-color: #666; }
    .dashboard-tracking:not(:last-child) { border-bottom-color: #666; }
    .refresh-indicator.waiting { background-color: #222; color: #fff; }
    .back-button, .back-button:link, .back-button:visited { background-color: #666; color: #eee; }
    .filters-wrapper { background-color: #3c3c3c; color: #fff; }
    .filters-wrapper div.dates a { color: #eee; }
    div.feature-info { background-color: #555; }
    div.feature-info label { color: #ddd; }
    div.feature-info label + span { color: #fff; }
}