@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


html {
    font-size: 14px;
}

body {
    font-family: 'Open Sans', sans-serif;
}


a{
    color: #8fbf4b;
    text-decoration: underline;
}

.page-link {
    color: #8fbf4b;
}

a:hover,.page-link:hover {
    color: #698c33;
}

.page-item.active .page-link {
    background-color: #8fbf4b;
    border-color: #8fbf4b;
}

.page-link:focus {
    box-shadow: none;
    color: #8fbf4b;
}

h1, h2, h3, h4, h5, h6, thead th, .select-headline {
    color: #5b3c37;
    font-weight: 700;
}

.select-headline{
    margin-bottom: 0;
}

.row {
    row-gap: 10px;
}

.navbar-toggler:focus{
    box-shadow: none;
}

.navbar-light .navbar-toggler {
    border: none;
    padding: 0;
}

.active-selected::marker {
    color: #8fbf4b;
}

.max-600{
    max-width: 600px;
}

.headline-right {
    text-align: right;
    font-size: 1.375rem;
}

.back-button {
    background-color: #5b3c37;
    padding: 2px 10px 4px 30px;
    top: 2px;
    border-radius: 100px;
    text-decoration: none;
    color: #fff;
    position: relative;
}

.back-button::before {
    content: "";
    width: 17px;
    height: 17px;
    top: 4px;
    left: 10px;
    position: absolute;
    background-image: url(/arrow_back_ios_white.svg);
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: left;
}

.back-button:hover {
    background-color: #8fbf4b;
    color: #fff;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.average-score.darkgreen {
    color: #1B5E20;
    font-weight: bold;
}
.average-score.green {
    color: #388E3C;
    font-weight: bold;
}
.average-score.yellowgreen {
    color: #C0CA33;
    font-weight: bold;
}
.average-score.orange {
    color: #FFA000;
    font-weight: bold;
}
.average-score.red {
    color: #D32F2F;
    font-weight: bold;
}
.average-score.darkred {
    color: #8B0000;
    font-weight: bold;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}



/* Farm page */

section {
    
    max-width: 700px;
    margin: 0 auto;
}

.info-box {
    padding: 20px;
    text-align: center;
    min-height: 140px;
    display: grid;
    align-items: center;
    border-radius: 8px;
    position: relative;
}

.info-box h3,
.info-box p {
    margin-bottom: 0;
    line-height: 1;
}

.info-box p {
    margin-top: -20px;
}

.info-box-row {
    margin-bottom: 16px;
    margin-right: -8px;
    margin-left: -8px;
}

.info-box-col {
    padding-right: 8px;
    padding-left: 8px;
}

.info-box::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 12px;
    height: 50px;
    width: 50px;
}

.info-box-1 {
    background-color: #87605d;
    color: #fff;
}

.info-box-1 * {
    color: #fff;
}

.info-box.info-box-1::before {
    background: url(../Images/icons/Boviwalk-icons-white-01.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.info-box-2 {
    background-color: #8fbf4b;
    color: #fff;
}

.info-box-2 *{
    color: #fff;
}

.info-box-2::before {
    background: url(../Images/icons/Boviwalk-icons-white-02.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.info-box-3 {
    background-color: #ff6d22;
    color: #fff;
}

.info-box-3 * {
    color: #fff;
}

.info-box.info-box-3::before {
    background: url(../Images/icons/Boviwalk-icons-white-03.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.info-box-4 {
    background-color: #f4efe9;
    color: #5b3c37;
}

.info-box-4 * {
    color: #5b3c37;
}

.info-box-4::before {
    background: url(../Images/icons/Boviwalk-icons-brown-04.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.bottom-nav-bar {
    background-color: #5b3c37;
    border-radius: 100px;
    padding: 8px 40px;
    margin: 0 16px;
    position: sticky;
    bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
}

.bottom-nav-bar a {
    height: 48px;
    width: 48px;
    border-radius: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
}

.active-bottom-nav-bar,
.bottom-nav-bar a:hover {
    background-color: #ceb59d;
}

.fill-green {
    filter: invert(73%) sepia(70%) saturate(376%) hue-rotate(37deg) brightness(87%) contrast(85%);
}

.tab-icon {
    height: 40px;
    width: auto;
}
@media (min-width: 992px) {
    .tab-icon {
        height: 64px;
    }
}

/* Tiles page */

.square{
    aspect-ratio: 1/1;
}

.tile {
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 0;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    background-color: hsl(30, 70%, 50%);
    color: #fff;
}

.tile * {
    color: #fff;
}

.tile-header {
    min-height: 3em;
    padding: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    text-align: center;
    font-weight: bold;
}

.tile-content {
    text-align: center;
    font-weight: bold;
    font-size: clamp(1.6rem, 2.5vw, 3rem);
}

.tile-text-med {
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 1.8rem);
}

.tile-text-small {
    font-weight: bold;
    font-size: clamp(0.5rem, 2.5vw, 1.2rem);
}

.tile-text-tiny {
    font-weight: bold;
    font-size: clamp(0.3rem, 2.5vw, 0.8rem);
}

.tile-vertical-split {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.tile-vertical-split-left {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-right: 2px solid rgba(0, 0, 0, 0.1);
}
.tile-vertical-split-right {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-left: 2px solid rgba(0, 0, 0, 0.1);
}

.tile-horizontal-split {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr 3fr;
}

.tile-horizontal-split-top {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tile-horizontal-split-bottom {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tile-row {
    margin-bottom: 12px;
    margin-right: -8px;
    margin-left: -8px;
}

.tile-col {
    padding-right: 6px;
    padding-left: 6px;
}

.tile-progress {
    margin: 0 auto;
}

.tile-link .info-box {
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.60);
    /*border: 5px solid rgba(0, 0, 0, 0.3);*/
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tile-link:hover .info-box {
    transform: translateY(-4px);
}

.tile-blue       { background-color: #4A90E2; }
.tile-teal       { background-color: #5FB3B3; }
.tile-green      { background-color: #7BB661; }
.tile-olive      { background-color: #9CA768; }
.tile-brown      { background-color: #A6785C; }
.tile-orange     { background-color: #D9996B; }
.tile-coral      { background-color: #D87C6B; }
.tile-purple     { background-color: #9B7AB0; }
.tile-lavender   { background-color: #A98CCB; }
.tile-pink       { background-color: #D89AB0; }
.tile-sand       { background-color: #C9B78C; }
.tile-slate      { background-color: #6E7D8C; }