:root {
    --fcg-green: #81bb4e;
    --go-to-grey: #dddddd;
    --highlight-orange: #ff8c28;
}

/* https://github.com/garrettboatman/ForTheWolf/blob/master/fonts/Futura-Medium.woff */
@font-face {
    font-family: SourceCodePro-Black;
    src: url('/Fonts/SourceCodePro/SourceCodePro-Black.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Inconsolata-Light;
    src: url('/Fonts/Inconsolata/Inconsolata-Light.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Inconsolata-Medium;
    src: url('/Fonts/Inconsolata/Inconsolata-Medium.ttf');
    font-weight: normal;
}

@font-face {
    font-family: IBM-Plex-Mono-Regular;
    src: url('/Fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: IBM-Plex-Mono-SemiBold;
    src: url('/Fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf');
    font-weight: normal;
}

@font-face {
    font-family: IBM-Plex-Mono-Bold;
    src: url('/Fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Jost-Regular;
    src: url('/Fonts/Jost/Jost-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: Jost-SemiBold;
    src: url('/Fonts/Jost/Jost-SemiBold.ttf');
    font-weight: normal;
}







/* UTILITIES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    /* border-style: dotted; */
    margin-bottom: 100px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}





#title {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Bold;
    text-align: center;
    font-size: 40px;
    padding: 20px;
}

#date-time {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Regular;
    text-align: center;
    margin: 20px auto 20px auto;
    padding: 20px;
}

#date {
    font-size: 20px;
}

#current-time {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Regular;
    font-size: 20px;
    /* margin: 20px; */
    /* padding: 20px; */
}

#mainDiv {
    /* border-style: dotted; */
    /* font-family: IBM-Plex-Mono-Bold; */
    text-align: center;
    margin: 40px auto 120px auto;
    padding: 10px;
}

#brokerDiv {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Bold;
    margin: 10px auto 40px auto;
    padding: 10px;
}

#dataDiv {
    /* border-style: dotted; */
    margin: 10px auto 10px auto;
    padding: 10px;
}

#statusDiv {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Regular;
    /* margin: 10px auto 10px auto;
    padding: 10px; */
}

#moisture1Div, #moisture2Div, #moisture3Div {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Regular;
    /* margin: 10px auto 10px auto;
    padding: 10px; */
}

#manualDiv {
    /* border-style: dotted; */
    margin: 20px auto 10px auto;
}

#waterInput {
    /* border-style: dotted; */
    padding: 8px 12px;
}

#waterButton {
    /* border-style: dotted; */
    padding: 8px 12px;
}

#note {
    margin: 10px;
    font-size: 12px;
    text-decoration: underline;
}

#hiddenText {
    font-family: IBM-Plex-Mono-Regular;
    font-size: 12px;
}

#historyDiv {
    font-family: IBM-Plex-Mono-Regular;
    font-size: 12px;
}

#canvas-container {
    width: 100%;
    text-align: center;
}

#calCanvas {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: inline;
    width: 800px;
}



/* ---------- FOOTER ---------- */
footer {
    /* border-style: dotted; */
    font-family: IBM-Plex-Mono-Regular;
    /* position: fixed; */
    /* left: 0; */
    bottom: 0;
    width: 100%;
    /* margin: 20px auto 20px auto; */
    padding: 20px;
    color: black;
    text-align: center;
    font-size: 8px;
}

/* ---------- ---------- ---------- */