html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    
}
@media (max-width:768px) {
    .w-md-100 {
        width: 100% !important;
    }
    .badge {
        font-size:1em !important;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

mark {
    padding: 0 !important;
    background-color: palegoldenrod !important;
}

.button-link {
    padding: 6px 10px;
    margin: 10px 0;
    background: #007363;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    font-weight: bold;
    text-decoration: none;
}

    .button-link:hover {
        border: solid 1px #007363;
        text-decoration: none;
        background-color: #fff;
        color: #007363;
    }

.even {
    background-color: rgba(30, 37, 42, 0.05) !important;
}

.odd {
    background-color: rgba(30, 37, 42, 0.1) !important;
}

/* Bin Types*/
.blueBin {
    color: #3260D7;
    border: 2px solid #3260D7;
    text-decoration: none;
    margin-right: 1rem;
}
    .blueBin:hover {
        color: #fff;
        background-color: #3260D7;
        border: 2px solid #3260D7;
        text-decoration: none;
        margin-right: 1rem;
    }

.blackBin {
    color: #000;
    border: 2px solid #000;
    text-decoration: none;
    margin-right: 1rem;
}
.blackBin:hover {
    color: #fff;
    background-color:#000;
    border: 2px solid #000;
    text-decoration: none;
    margin-right: 1rem;
}
.brownBin {
    color: #541D05;
    border: 2px #541D05 solid;
    text-decoration: none;
    margin-right: 1rem;
    
}
.brownBin:hover {
    color: #fff;
    background-color: #541D05;
    border: 2px #541D05 solid;
    text-decoration: none;
    margin-right: 1rem;
}

.hwrc {
    color: #c0570c;
    border: 2px solid #c0570c;
    text-decoration: none;
    margin-right: 1rem;
}

    .hwrc:hover {
        color: #fff;
        background-color: #c0570c;
        border: 2px solid #c0570c;
        text-decoration: none;
        margin-right: 1rem;
    }

.sell {
    color: darkgreen;
    border: 2px solid darkgreen;
    text-decoration: none;
    margin-right: 1rem;
}

    .sell:hover {
        color: #fff;
        border: 2px solid darkgreen;
        background-color: darkgreen;
        text-decoration: none;
        margin-right: 1rem;
    }

.donate {
    color: #008484;
    border: 2px solid;
    border-color: #008484;
    background-color: transparent;
    text-decoration: none;
    margin-right: 1rem;
}

    .donate:hover {
        color: #fff;
        border: 2px solid;
        border-color: #008484;
        background-color: #008484;
        text-decoration: none;
        margin-right: 1rem;
    }

.none {
    color: #e00;
    border: 2px solid #e00;
    text-decoration: none;
    margin-right: 1rem;
}

.none:hover {
    color: #fff;
    background-color: #e00;
    border: 2px solid #e00;
    text-decoration: none;
    margin-right: 1rem;
    }

.compost {
    color: #663300;
    border: 2px solid #663300;
    text-decoration: none;
    margin-right: 1rem;
}

.compost:hover {
    color: #fff;
    background-color: #663300;
    border: 2px solid #663300;
    text-decoration: none;
    margin-right: 1rem;
}
.bulky {
    color: #574C47;
    border: 2px solid #574C47;
    text-decoration: none;
    margin-right: 1rem;
}

    .bulky:hover {
        color: #fff;
        background-color: #574C47;
        border: 2px solid #574C47;
        text-decoration: none;
        margin-right: 1rem;
    }
.recycle {
    color: #007b00;
    border: 2px solid #007b00;
    text-decoration: none;
    margin-right: 1rem;
}

    .recycle:hover {
        color: #fff;
        background-color: #007b00;
        border: 2px solid #007b00;
        text-decoration: none;
        margin-right: 1rem;
    }
.clinical {
    color: #e00;
    border: 2px solid #e00;
    text-decoration: none;
    margin-right: 1rem;
}

    .clinical:hover {
        color: #fff;
        background-color: #e00;
        border: 2px solid #e00;
        text-decoration: none;
        margin-right: 1rem;
    }

.reduce {
    color: #336600;
    border: 2px solid #336600;
    text-decoration: none;
    margin-right: 1rem;
}

.reduce:hover {
    color: #fff;
    background-color: #336600;
    border: 2px solid #336600;
    text-decoration: none;
    margin-right: 1rem;
}
.repair {
    color: #84129b;
    border: 2px solid #84129b;
    text-decoration: none;
    margin-right: 1rem;
}

    .repair:hover {
        color: #fff;
        background-color: #84129b;
        border: 2px solid #84129b;
        text-decoration: none;
        margin-right: 1rem;
    }
.report {
    color: #400cbf;
    border: 2px solid #400cbf;
    text-decoration: none;
    margin-right: 1rem;
}
    .report:hover {
        color: #fff;
        background-color: #400cbf;
        border: 2px solid #400cbf;
        text-decoration: none;
        margin-right: 1rem;
    }
.greenContainer {
    color: #157b0f;
    border: 2px solid #157b0f;
    text-decoration: none;
    margin-right: 1rem;
}

    .greenContainer:hover {
        color: #fff;
        background-color: #157b0f;
        border: 2px solid #157b0f;
        text-decoration: none;
        margin-right: 1rem;
    }



.badge {
    white-space: normal !important;
}
.spContent a {
    color: #007363;
    text-decoration:underline;
}


