@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');

*{margin:0;padding:0;}
body{font-family:'Source Sans Pro',sans-serif;margin-bottom:20px;}

:root {
    --light: #ddd;
    --darker-light: #222;
    --lighter-light: #fafafa;
    --shaded-light: #ccc;
    --dark: #222;
    --darker-dark: #111;
    --lighter-dark: #ddd;
    --shaded-dark:#999;
    --red: #a03000;
    --lighter-red: #fffdfc;
    --darker-red: #7e3a3a;
    --shaded-red: #e1c1b0;
    --blue: #4141aa;
    --lighter-blue: #f8fbff;
    --darker-blue: #1e1e57;
    --shaded-blue: #a7b7dd;
    --green: #008000;
    --lighter-green: #fbfffb;
    --darker-green: #004500;
    --shaded-green: #bcdaba;
}
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {min-height: 100%;}

#content {overflow:auto;
    padding-bottom: 50px;}  /* must be same height as the footer */

footer {position: relative;
    margin-top: -50px; /* negative value of footer height */
    height: 50px;
    clear:both;text-align:center}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

h1,h2,h3,h4,h5 {margin:10px auto 18px;}
p{margin:4px auto 10px;}

textarea {width:700px;border-radius:5px;padding:10px 12px;}
div.textareaContainer {position:relative;}
p#note{border-radius:5px;padding:10px 11px;font-size:12px;border-left:3px solid red;}
p#note h1{font-size:14px;margin:7px auto 8px;}
input.inputSelectCombo {border-radius:5px;width:187px}
select.inputSelectCombo  {border-radius:5px;border-top-left-radius:0px;border-bottom-left-radius:0px;margin-left:-80px;width:80px;height:30px;padding-left:7px;}
div.placeholder {padding:6px 7px;font-size:14px;height:22px;border-radius:7px;width:400px;}
div.placeholder span.entry {margin-right:17px;}
div.placeholder span.entry span.value {display:inline-block;margin:1px 5px 0 1px ;height:10px;line-height:11px;padding:5px 8px;border-radius:3px;}
div.placeholder span.entry span.data {position:relative;top:-1px;}

hr{margin:20px 0;border:none;height:10px;}

/* Layout */
section.card{display:flex;clear:both;flex-direction:row;border-radius:5px;min-height:100px;margin-bottom:20px;}
section.card.horizontal {flex-direction:column;}
section.card.vertical {flex-direction:row;}
section.card.boxes {height:125px;margin:10px auto 12px;}
section section.vSeperator{min-height:100px;width:1px;float:left;}
section section.hSeperator{width:100%;height:1px;margin:15px 0;}
section.card section.third {width:33%;float:left;margin-right:-1px;}
section.card section.third.double {width:67%;margin-right:-3px;}
section.layout {height:100px;margin-bottom:20px;}
section.layout section.third.double{width:65%;margin-right:1.5%;}
section.layout section.third {width:33%;float:left;}
section.layout section.third div.content{width:100%;clear:both}
section.card.box{height:100px;width:100px;float:left;padding:7px 12px 9px;}
section.content{padding:11px 20px;}
section.inline {clear:none!important;}

/* Indicator */
div.indicator {font-size:14px;display:inline-block;border-radius:10px;width:65px;padding:2px 10px 2px;margin-left:6px;margin-bottom:12px;}
div.indicator span.dot{height:7px;width:7px;border-radius:50%;display:inline-block;position:relative;top:-1px;margin-right:3px;}

/* Tables */
table.data {width:100%;border:1px solid #dfdfdf;color:#303030;border-radius:5px;font-size:14px;padding:4px;line-height:27px;}
table.layout {width:100%;color:#303030;border-radius:5px;font-size:15px;line-height:37px;letter-spacing:0.1px;}
table thead tr {background:#eee;width:100%;line-height:33px;}
table tbody tr:nth-child(even) {background:#efefef;}
table thead tr th:first-of-type {border-top-left-radius:5px;}
table thead tr th:last-of-type {border-top-right-radius:5px;}
table tbody tr:last-of-type td:first-of-type {border-bottom-left-radius:5px;}
table tbody tr:last-of-type td:last-of-type {border-bottom-right-radius:5px;}
table td, table th {padding:3px 12px 4px;}
table th{font-size:15px;text-align:left;padding:3px 12px 3px;padding-right:16.5px;padding-bottom:4px;}
table th:hover {cursor:pointer;padding-right:12px;padding-bottom:3px;}
table th:hover:after {content:"\25BC";position:relative;color:#303030;font-size:70%;color:gray;top:-0.5px;left:7px;padding-right:2px;margin-right:-8px;cursor:context-menu;}
table th.down:after, table th.up:after {padding-left:5px;color:#656565;}
table th.down:after{content: "\2193";}
table th.up:after{content: "\2191";}
div.tableFooter {text-align:right;padding-top:2px;min-width:360px;}
div.tableFooter input{box-shadow:0 0 4px #ddd;color:#787878;height:26px;font-size:13px;padding:4px 7px;border-radius:4px;cursor:pointer;margin-right:5px;}
div.tableFooter input[type=text]{width:15px;text-align:center;font-size:12px;height:16px;position:relative;top:-1px;margin:0 1px;}
div.blackBox{color:white;padding:20px;width:400px;height:50px;border-radius:8px;border:1px solid #555;margin-bottom:20px;background:linear-gradient(180deg,#1e1e1e,#121212);}

/* Themes */
body.light {background:#fcfcfc;}
body.light form input {background:#fafafa;border:1px solid #ccc;box-shadow:0px 0px 7px #ddd;}
body.light textarea {border:1px solid #ccc;}
body.light div#note {border-left:3px solid red;background:white;}
body.light select.inputSelectCombo {border:1px solid #ccc;}
body.light div.placeholder {color:white;background:#333;}
body.light div.placeholder span.entry span.value {color:#333;background:white;}
body.light section.card {border:1px solid #ccc;box-shadow:0px 0px 7px #ddd;}
body.light section.card section.vSeperator{border-right:1px solid #ccc;box-shadow:0px 0px 7px #ddd;}
body.light section.card section.hSeperator{box-shadow:0px 0px 7px #ddd;border-top:1px solid #ccc;}
body.light div.indicator {color:#404040;border:1px solid #ccc;}
body.light div.indicator.on span.dot{background:green;}
body.light div.indicator.off span.dot{background:red;}
body.light table.data{border:1px solid #dfdfdf;color:#303030;}
body.light table.layout {color:#303030;}
body.light table thead tr {background:#eee;}
body.light table tbody tr:nth-child(even) {background:#efefef;}
body.light table th:hover:after {color:#303030;color:gray;}
body.light table th.down:after, body.light table th.up:after {color:#656565;}
body.light div.tableFooter input {box-shadow:0 0 4px #ddd;color:#787878;}
body.light div.blackBox{background:linear-gradient(180deg,#1e1e1e,#121212);color:white;}
body.light div.trumbowyg-editor {color:black;}

body.dark {background:#000000;color:#cfcfcf;}
body.dark form label {color:white;}
body.dark form input {color:white;background:#050505;border:1px solid #333333;box-shadow:0px 0px 7px #333;}
body.dark textarea {border:1px solid #ccc;}
body.dark div#note {border-left:3px solid red;background:white;}
body.dark select.inputSelectCombo {border:1px solid #ccc;}
body.dark div.placeholder {color:black;background:#ccc;}
body.dark div.placeholder span.entry span.value {color:#ccc;background:black;}
body.dark section.card {border:1px solid #333;box-shadow:0px 0px 7px #444;}
body.dark section.card section.vSeperator{border-right:1px solid #333;box-shadow:0px 0px 7px #444;}
body.dark section.card section.hSeperator{box-shadow:0px 0px 7px #444;border-top:1px solid #333;}
body.dark div.indicator {color:#cfcfcf;border:1px solid #444;}
body.dark div.indicator.on span.dot{background:green;}
body.dark div.indicator.off span.dot{background:red;}
body.dark table th:before {font-size:11px;line-height:12px;content:"\22EE";padding-right:2px;color:#111;margin-right:-8px;}
body.dark table.data{border:1px solid #404040;color:#cfcfcf;}
body.dark table.layout {color:#dfdfdf;}
body.dark table thead tr {background:#1f1f1f;}
body.dark table tbody tr:nth-child(even) {background:#1f1f1f;}
body.dark table th:hover:after {color:#303030;color:gray;}
body.dark table th.down:after, body.light table th.up:after {color:#656565;}
body.dark div.tableFooter input {box-shadow:0 0 4px #222;color:#787878;}
body.dark div.blackBox{background:linear-gradient(180deg,#e1e1e1,#dedede);color:black;}
body.dark div.trumbowyg-editor {color:white;}

body.red {background:#ffffff;color:#a00000;}
body.red form label {color:#a00000;}
body.red form input {color:#a00000;background:#f2e9e9;border:1px solid #eaaaaa;box-shadow:0px 0px 7px #f2e9e9;}
body.red textarea {border:1px solid #eaaaaa;background:#f2e9e9;}
body.red div#note {border-left:3px solid red;background:white;}
body.red select.inputSelectCombo {border:1px solid #ccc;}
body.red div.placeholder {color:#eaeaea;background:#cc5555;border:1px solid #e22222;}
body.red div.placeholder span.entry span.value {color:#cc4444;background:#eaeaea;}
body.red section.card {border:1px solid #eaaaaa;box-shadow:0px 0px 7px #ffffff;}
body.red section.card section.vSeperator{border-right:1px solid #eaaaaa;box-shadow:0px 0px 7px #f2e9e9;}
body.red section.card section.hSeperator{box-shadow:0px 0px 7px #f2e9e9;border-top:1px solid #eaaaaa;}
body.red div.indicator {color:#eaaaaa;border:1px solid #e99999;}
body.red div.indicator.on span.dot{background:green;}
body.red div.indicator.off span.dot{background:red;}
body.red table.data{border:1px solid #eaaaaa;color:#a00000;}
body.red table.layout {color:#a00000;}
body.red table thead tr {background:#f2e9e9;}
body.red table tbody tr:nth-child(even) {background:#f2e9e9;}
body.red table th:hover:after {color:#e99999;color:red;}
body.red table th.down:after, body.light table th.up:after {color:#f2e9e9;}
body.red div.tableFooter input {box-shadow:0 0 4px #f2e9e9;border:1px solid #eaaaaa;color:#a00000;background:#f2e9e9;}
body.red div.blackBox{background:linear-gradient(180deg,#cc3333,#cc3333);color:#eaeaea;border:1px solid #f2e9e9;}
body.red div.trumbowyg-editor {color:#cc3333;}

body.blue {background:#ffffff;color:#1f3b55;}
body.blue form label {color:#1f3b55;}
body.blue form input {color:#1f3b55;background:#d3e9fc;border:1px solid #5885ad;box-shadow:0px 0px 7px #9abad6;}
body.blue textarea {border:1px solid #5885ad;background:#9abad6;}
body.blue div#note {border-left:3px solid blue;background:white;}
body.blue select.inputSelectCombo {border:1px solid #ccc;}
body.blue div.placeholder {color:#eaeaea;background:#315f88;border:1px solid #3b668c;}
body.blue div.placeholder span.entry span.value {color:#315f88;background:#eaeaea;}
body.blue section.card {border:1px solid #5885ad;box-shadow:0px 0px 7px #ffffff;}
body.blue section.card section.vSeperator{border-right:1px solid #5885ad;box-shadow:0px 0px 7px #9abad6;}
body.blue section.card section.hSeperator{box-shadow:0px 0px 7px #9abad6;border-top:1px solid #5885ad;}
body.blue div.indicator {color:#4475a0;border:1px solid #3b668c;}
body.blue div.indicator.on span.dot{background:green;}
body.blue div.indicator.off span.dot{background:red;}
body.blue table.data{border:1px solid #4475a0;color:#1f3b55;}
body.blue table.layout {color:#1f3b55;}
body.blue table thead tr {background:#d3e9fc;}
body.blue table tbody tr:nth-child(even) {background:#d3e9fc;}
body.blue table th:hover:after {color:#3b668c;color:blue;}
body.blue table th.down:after, body.light table th.up:after {color:#9abad6;}
body.blue div.tableFooter input {box-shadow:0 0 4px #9abad6;border:1px solid #5885ad;color:#1f3b55;background:#d3e9fc;}
body.blue div.blackBox{background:linear-gradient(180deg,#315f88,#315f88);color:#eaeaea;border:1px solid #9abad6;}
body.blue div.trumbowyg-editor {color:#315f88;}

body.green {background:#ffffff;color:#486b48;}
body.green form label {color:#486b48;}
body.green form input {color:#486b48;background:#d9fcd7;border:1px solid #5aad58;box-shadow:0px 0px 7px #9ad6a4;}
body.green textarea {border:1px solid #5aad58;background:#9ad6a4;}
body.green div#note {border-left:3px solid blue;background:white;}
body.green select.inputSelectCombo {border:1px solid #ccc;}
body.green div.placeholder {color:#eaeaea;background:#69b776;border:1px solid #5aad58;}
body.green div.placeholder span.entry span.value {color:#358235;background:#eaeaea;}
body.green section.card {border:1px solid #5aad58;box-shadow:0px 0px 7px #ffffff;}
body.green section.card section.vSeperator{border-right:1px solid #5aad58;box-shadow:0px 0px 7px #9ad6a4;}
body.green section.card section.hSeperator{box-shadow:0px 0px 7px #9ad6a4;border-top:1px solid #5aad58;}
body.green div.indicator {color:#75c770;border:1px solid #5aad58;}
body.green div.indicator.on span.dot{background:green;}
body.green div.indicator.off span.dot{background:red;}
body.green table.data{border:1px solid #75c770;color:#486b48;}
body.green table.layout {color:#486b48;}
body.green table thead tr {background:#d9fcd7;}
body.green table tbody tr:nth-child(even) {background:#d9fcd7;}
body.green table th:hover:after {color:#5aad58;color:blue;}
body.green table th.down:after, body.light table th.up:after {color:#9ad6a4;}
body.green div.tableFooter input {box-shadow:0 0 4px #9ad6a4;border:1px solid #5aad58;color:#486b48;background:#d9fcd7;}
body.green div.blackBox{background:linear-gradient(180deg,#40b83d,#40b83d);color:#eaeaea;border:1px solid #9ad6a4;}
body.green div.trumbowyg-editor {color:#40b83d;}

@media only screen and (max-width: 500px) {
    body, div#header, div#content {margin:10px;}
    body div.placeholder, div.blackBox, body textarea{width:auto;}
    section.content{overflow-y:scroll;}
    section.card.boxes{}
    section.card.boxes {display:block;overflow-y:auto!important;clear:both;height:auto!important;}
    section.card.boxes section.content {display:block;width:auto;clear:both;height:160px;margin-bottom:10px;border-radius:10px;}
    section.card.boxes section.vSeperator{height:1px;width:100%;min-height:auto;}
    body.light section.card.boxes section.vSeperator{border-bottom:1px solid #ccc;}
    body.dark section.card.boxes section.vSeperator{border-bottom:1px solid #333;}
    body.red section.card.boxes section.vSeperator{border-bottom:1px solid #cc3333;}
    body.blue section.card.boxes section.vSeperator{border-bottom:1px solid #315f88;}
    body.green section.card.boxes section.vSeperator{border-bottom:1px solid #40b83d;}
    section.card:has(section.third){display:block;border:none;box-shadow:none;}
    section.card section.third section.content:has(section.content){padding:0!important;}
    section.card section.vSeperator{border:none!important;}
    section.card section.third{clear:both;width:100%!important;margin-bottom:20px;}
    section.content{padding:0;}
    section.box{padding:11px 12px;}


}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", Verdana, Arial, Helvetica, sans-serif;
}

header {
    text-align: center;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

.dark-section {
    background: #111;
    color: #ddd;
    margin-top: 50px;
    padding: 50px 0 100px;
}

.dark-section .title {
    font-weight: normal;
    text-align: center;
    font-size: 32px;
    margin: 20px 0 50px;
}

.form-submit {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    padding: 7px 13px;
    margin-right: 17px;
    float: right;
}

.trumbowyg {
    margin-bottom: 32px;
}

h2 {
    font-size: 26px;
}

h1 + pre,
h2 + pre,
h3 + pre,
h4 + pre {
    margin-top: -20px;
}

p {
    margin-top: 0;
}

:root {
    --tbw-cell-vertical-padding: 4px;
    --tbw-cell-horizontal-padding: 8px;
    --tbw-cell-line-height: 1.5em;
}


th,
td {
    height: calc(var(--tbw-cell-vertical-padding) * 2 + var(--tbw-cell-line-height));
    min-width: calc(var(--tbw-cell-horizontal-padding) * 2);
    padding: var(--tbw-cell-vertical-padding) var(--tbw-cell-horizontal-padding);
}

thead {
    background: #FFFFFF;
}
.fa-long-arrow-left:before {
    content: "«";
}
.fa-long-arrow-right:before {
    content: "»";
}
span.older {
    float:right;
}

.pagination{display:inline-block;padding-left:0;margin:7px 0;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#727374;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus{color:#727374;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus{z-index:2;color:#fff;cursor:default;background-color:#727374;border-color:#727374}.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:hover,.pager li>a:focus{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}a.label:hover,a.label:focus{color:#fff;text-decoration:none;cursor:pointer}.label:empty{display:none}.btn .label{position:relative;top:-1px}
body.dark .pagination>li>span{color:#ccc;background-color:#000;border:1px solid #333}
.pagination>li>span:focus{color:#ccc;background-color:#111;border-color:#222}
body.dark .pagination>.active>span:focus{color:#000;background-color:#ccc;border-color:#ddd}
body.dark .pagination>.disabled>a:focus{color:#aaa;background-color:#000;border-color:#333}
body.dark .pager li>a,body.dark .pager li>span{background-color:#000;border:1px solid #333;}
body.dark .pager li>a:hover,body.dark.pager li>a:focus{background-color:#111}
body.dark .pager .disabled>a,body.dark .pager .disabled>a:hover,body.dark .pager .disabled>a:focus,body.dark .pager .disabled>span{color:#aaa;background-color:#000}
body.dark .label{color:#000;}
body.dark a.label:hover,body.dark a.label:focus{color:#000;}
body.dark .pagination > li > a,body.dark .pagination > li > span,body.dark .pagination > li > a:hover,body.dark  .pagination > li > span:hover,body.dark  .pagination > li > a:focus,body.dark .pagination > li > span:focus {color:#aaa;background-color:#111;border-color:#333}