body {
    background-color: #f8f8f8;
    color: #30323dff;
    font-family: Tahoma, Helvetica, sans-serif;
    font-size: 16pt;

}

body::after {
    content: "";

    background: url("/static/gull.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

#header .pure-menu-link {
    color: #30323dff;
}

#header {
    /*background-color: #a0cdf8;*/
    background-image: linear-gradient(to right, white, #a0cdf8);

}

#header a {
    color: #30323dff;

}

div.flashes {
    margin: .5em;
    padding: .5em;
    background-color: #f8f8f8;
    color: #30323dff;
    border: 1px dotted #30323dff
}

div.flashes ul {
    margin: 0
}

div.reverse {
    background-color: #535456;
    color: #f8f8f8;
}

div.focus {
    background-color: #c5ddfc;
    color: #30323dff;
}

a.reverse {
    color: #f8f8f8;
}

div.aux {
    background-color: lightgrey;
    color: #30323dff;
}

div.group_good {
    background-color: #ccffcc;
    color: #30323dff;
}
div.group_bad {
    background-color: #ffd48e;
    color: orangered;
}


div.note {
    border: solid 1px #30323dff;
    background-color: #f8f8f8;
    color: #30323dff;
    margin: 0;
    padding: .5em;
}

div.unbox {
    background-color: #f8f8f8;
    color: #30323dff;
    margin: .5em;
}

div.box {
    border: solid 1px #30323dff;
    background-color: #f8f8f8;
    color: #30323dff;
    margin: .5em;
}

div.box div.head {
    border-bottom: solid 1px #30323dff;
    padding: .5em;
}

div.box div.body {
    padding: 0 .5em;
    margin: .5em 0
}

table.box_body {
    width: 100%
}

div.box div.foot {
    padding: 0 .5em .5em .5em;
}

div.tile {
    border: solid 1px #30323dff;
    margin: .5em;
    padding: .5em;
}

div.tile a {
    color: blue;
}


div.flag {
    margin: .5em;
    border: solid 1px #30323dff;
}

div.flag_label {
    float: left;
    margin-right: .5em;
    padding: .5em
}

div.flag_content {
    padding: .5em
}


div.page {
    padding: .5em
}

table.ahp_table.wide {
    width: 100%;
}

table.ahp_table th {
    text-align: left;
    padding: .25em .5em;
    vertical-align: top;
}

table.ahp_table td {
    text-align: left;
    padding: .25em .5em;
    vertical-align: top;
}

table.ahp_table th.right, table.ahp_table td.right {
    text-align: right;
}

#page-container {
    position: relative;
    min-height: 100vh;
}

#content {
    min-height: 75vh;
}

#footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Footer height */
}


.pure-form button, input, optgroup, select, textarea {
    margin-bottom: .25em;
}


.fg_med {
    color: #444
}

.fg_dark {
    color: #222
}

.bg_light {
    background: #F8F8F8
}

.bg_dark {
    background: #A9A9A9
}

.bg_hilight {
    background: #CAEBF2
}

.bg_alert {
    background: #FF3B3F
}


.error {
    color: red;
}

.warn {
    color: orange;
}

.warning {
    color: orange;
}

.info {
    color: dodgerblue;
}

.good {
    color: green;
}

.confidential {
    color: black;
    background: lightgrey
}

/* keeps htmx indicator from flashing in on page load as library code is fetched */
.htmx-indicator {
    opacity: 0;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}


.circle {
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 50%;
    font-size: 2em;
    font-weight: bold;
    color: #333;
    text-align: center;
    background: #A9A9A9;
}

/*https://www.learnui.design/tools/data-color-picker.html#divergent*/
.circle.good {
    color: #008000;
    background: #90EE90;
}

.circle.moderate {
    color: #aecba3;
    background: #7fa470;
}

.circle.poor {
    color: #acacac;
    background: #5d5d5d;
}

.circle.bad {
    color: #333;
    background: #797979;
}

/*.circle.risk_good {*/
/*    color: #556970;*/
/*    background: #ADD8E6;*/
/*}*/

/*.circle.risk_moderate {*/
/*    color: #5b5c5e;*/
/*    background: #c1c3c7;*/
/*}*/

/*.circle.risk_poor {*/
/*    color: #8c655d;*/
/*    background: #f7b3a6;*/
/*}*/

/*.circle.risk_bad {*/
/*    color: #550707;*/
/*    background: #da1e1e;*/
/*}*/


.risk_good {
    color: #88827c;
    background: #fff2e7;
}

.risk_moderate {
    color: #886751;
    background: #f6b992;
}

.risk_poor {
    color: #7c4029;
    background: #ea7a4e;
}

.risk_bad {
    color: #6b0e0e;
    background: #da1e1e;
}

.health_good {
    color: #5b965b;
    background: #90ee90;
}

.health_moderate {
    color: #9b9b67;
    background: #e8e799;
}

.health_poor {
    color: #987043;
    background: #f1b26a;
}

.health_bad {
    color: #6b0e0e;
    background: #da1e1e;
}


.triangle {
    width: 3.464em;
    height: 3em;
    font-size: 2em;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 4.4em;
    position: relative;
    background: #A9A9A9;
}

.triangle_left, .triangle_right {
    width: 50%;
    height: 100%;
    background: white;
}

.triangle_left {
    -webkit-shape-outside: polygon(0 0, 0% 0%, 0% 0%);
    shape-outside: polygon(0 0, 0% 0%, 0% 0%);
    float: left;
    -webkit-clip-path: polygon(-1% 0, 100% 0%, -1% 100%);
    clip-path: polygon(-1% 0, 100% 0%, -1% 100%);
}

.triangle_right {
    -webkit-shape-outside: polygon(0 0, 0% 0%, 0% 0%);
    shape-outside: polygon(0 0, 0% 0%, 0% 0%);
    float: right;
    -webkit-clip-path: polygon(0 0, 101% 0%, 101% 100%);
    clip-path: polygon(0 0, 101% 0%, 101% 100%);
}


.triangle.good {
    color: green;
    background: lightgreen;
}

.triangle.moderate {
    color: steelblue;
    background: lightblue;
}

.triangle.poor {
    color: saddlebrown;
    background: darkorange;
}

.triangle.bad {
    color: #550707;
    background: #da1e1e;
    background: rgba(197, 197, 197, 0.4);
}

div.dash_section {
    margin: 1em 0 0 1em
}

.state_button {
    width: 3em;
}

.close {
    cursor: pointer;
    width: 30px;
    height: 30px;
    text-align: center;
    align-content: center;
    line-height: 30px;
    border: 1px solid black;
    font-size: 18px;
    font-weight: normal;
    background: rgba(255, 255, 255, .7);

    z-index: 3;
    position: absolute;
    top: 5px;
    left: clamp(0px, calc(100% - 30px - 5px), calc(700px - 30px - 5px));
}


/* table mods (these moved to ahp2 also) */
table.ahp_table.wide {
    width: 100%;
}

table.ahp_table th {
    text-align: left;
}

table.ahp_table td {
    text-align: left;
}

table.ahp_table.compact th {
    padding: .25em .25em;
    vertical-align: top;
}

table.ahp_table.compact td {
    text-align: left;
    padding: .25em .25em;
    vertical-align: top;
}

table.ahp_table.tight td {
    text-align: left;
    padding: 0 .25em 0;
    vertical-align: top;
}

table.ahp_table.minimal td {
    text-align: left;
    padding: 0;
    vertical-align: top;
}


table.ahp_table th.right {
    text-align: right;
}

table.ahp_table td.right {
    text-align: right;
}

table.ahp_table th.center {
    text-align: center;
}

table.ahp_table td.center {
    text-align: center;
}