cna_charting/static/styles/main.css

:root {
    --dark-black: #333333;
    --black: #444444;
    --bg-color: #f7f7f7;
    --primary-color: #323834;
    --faded-color: #747a7c;
    --blue: #2980b9;
    --orange: #9b6f45;
    --darkblue: #242e34;
    --gray: #bdc3c7;
    --light-gray: #e5ebef;
    --green: #44bd42;
    --light-green: #beefbd;
    --yellow: #e4ce0f;
    --light-blue: #3299df;
    --faded-blue: #9fccea;
    --faded-dark-blue: #77a4c2;
}


html {
    font-size: 112.5%;
}

body {
    background-color: var(--bg-color);
    color: var(--primary-color);
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
}
p {
    margin-bottom: 1rem;
}
h1,
h2,
h3,
h4,
h5 {
    color: var(--black);
    margin: 3rem 0 1.38rem;
    font-family: "Lato", sans-serif;
    line-height: 1.3;
    text-rendering: optimizeLegibility;
}
h1 {
    margin-top: 0;
    font-size: 1.802rem;
}
h2 {
    font-size: 1.602rem;
}
h3 {
    font-size: 1.424rem;
}
h4 {
    font-size: 1.266rem;
}
h5 {
    font-size: 1.125rem;
}
small {
    font-size: 0.889rem;
}

a {
    color: var(--blue);
    cursor: pointer;
    white-space: nowrap;
}

hr {
    margin: 0;
    border: 0.8px solid var(--gray);
}


/* FORMS  */
input[type=text],
input[type=number],
input[type=date],
input[type=time],
input[type=password],
input[type=search],
textarea, select {
    border: 0.2rem solid var(--gray);
    padding: 0.3rem;
    font-family: inherit;
    font-size: 1rem;
    outline: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

input[type=radio], input[type=checkbox] {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

textarea {
    resize: none;
}


label {
    display: block;
}

input[type=checkbox], label {
    cursor: pointer;
}

input[type=checkbox] {
    height: 1rem;
    width: 1rem;
}

li label {
    display: inline-block;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--blue) !important;
}

button {
    border: none;
    background-color: var(--blue);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    cursor: pointer;
}

form p:not(.form__submit) {
    display: grid;
    grid-template-columns: 0.5fr 2fr;
    gap: 1rem;
    justify-items: start;
}

input[type=checkbox],
input[type=radio] {
    height: 1.5rem;
    width: 1.5rem;
}

input[type="submit"],
.action-button {
    font-weight: 700;
    padding: 0.2rem 1rem;
    border: none;
    font-size: 1rem;
    background-color: var(--blue);
    color: white;
    cursor: pointer;
    text-decoration: none;
    border-radius: 3.75rem;
}

.destroy {
    background-color: red;
}


/*// BLOCK ELEMENTS*/
main,
aside {
    max-width: 58rem;
    margin: 0 auto;
}

/*// Data list*/

dl dt {
    font-weight: bold;
    font-style: italic;
}

/*// TABLES*/

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 1.3em;
    border: 1px solid var(--gray);
}

table a {
    white-space: normal;
}

thead tr td {
    font-weight: bold;
}

td,
th {
    text-align: left;
    font-size: 0.85em;
    padding: 2px 10px;
    border-bottom: 1px solid;
    border-color: var(--gray);
    text-align: center;
}

footer {
    padding: 3rem;
}


/* NAV */
nav {
    text-align: center;
    margin: 1rem 0;
}

nav *:not(:last-child) {
    margin-right: 1rem;
}


/* The Modal (background) */
.modal-menu {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-menu__content {
    background-color: #fefefe;
    margin: 5vh auto;
    padding: 20px;
    border: 1px solid #888;
    max-width: 40rem;
}

.modal-menu__list {
    column-count: 2;
    column-gap: 1rem;
}
.modal-menu__list ul li {
    break-inside: avoid;
}

.modal-menu__content li {
    list-style-type: none;
    margin: 0.5rem 0;
}

.modal-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.modal-menu__content li a {
    /*text-decoration: none;*/
    color: #2980b9;
}

.modal-menu__item {
    display: grid;
    grid-template-columns: 0.2fr 1fr;
    align-items: center;
    gap: 0.5rem 0.125rem;
}

/* The Close Button */
.close-modal {
    color: #aaa;
    font-size: 2rem;
    line-height: 0;
    font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}




.entry {
    margin-bottom: 1rem;
}

.entry__item {
    display: grid;
    grid-template-columns: 2fr 0.125fr;
    column-gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.046rem solid var(--gray);
}



.chart {
    max-width: 58rem;
    padding: 1rem;
    background-color: white;
    border: 0.0625rem solid var(--gray);
    margin-bottom: 1.5rem;
}

.chart__item {
    margin-bottom: 1rem;
    border-bottom: 0.046rem solid var(--gray);
}
.chart__item h4 {
    margin-bottom: 0;
}
.chart__item p {
    margin-top: 0.25rem;
}
.chart__heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}



.fa-frown {
    color: #7d8026;
}

.fa-lungs,
.fa-life-ring,
.fa-heartbeat {
    color: red;
}

.fa-tint {
    color: #cac70a;
}
.fa-poo {
    color: #8a420e;
}
.fa-utensils {
    color:  green;
}
.fa-syringe {
    color: var(--blue);
}
.fa-meh {
    color: orange;
}