/* Default, unstyled button settings */
.button {
    background: RGB(150, 150, 150);
    color: #ffffff;
}

    .button:hover {
        /*background-color: #8CF;*/
        color: #222;
    }

    .button:active,
    .button.is-checked {
        /*background-color: #28F;*/
    }

    .button.is-checked {
        color: #ffffff;
    }






/* Button style, for each topic */
.button-topic-0 {
    background: RGB(164, 207, 96) url(./images/topic-0c.png) no-repeat;
    background-position: 3px;
    background-size: 30px 30px;
    padding: 12px 12px 12px 45px;
}

    .button-topic-0:hover {
        color: RGB(4, 123, 64) !important;
    }




.button-topic-1 {
    background: RGB(4, 123, 64) url(./images/topic-1c.png) no-repeat;
    background-position: 3px;
    background-size: 30px 30px;
    padding: 12px 12px 12px 45px;
}

    .button-topic-1:hover {
        color: RGB(164, 207, 96) !important;
    }


.button-topic-2 {
    background: RGB(109, 179, 226) url(./images/topic-2c.png) no-repeat;
    background-position: 3px;
    background-size: 30px 30px;
    padding: 12px 12px 12px 45px;
}

    .button-topic-2:hover {
        color: RGB(0,88,140) !important;
    }

.button-topic-3 {
    background: RGB(150, 150, 150) url(./images/topic-3c.png) no-repeat;
    background-position: 3px;
    background-size: 30px 30px;
    padding: 12px 12px 12px 45px;
}

    .button-topic-3:hover {
        color: RGB(64,64,64) !important;
    }

.button-topic-4 {
    background-color: RGB(0,88,140); /* // Medium */
}

.button-topic-5 {
    background-color: RGB(150, 150, 150); /* // Medium */
}
/* End of Buttons */





/* Default, unstyled card settings */
.card {
    /* 	background-color: RGB(245, 246, 247); /* Default to light card */
    /* 	border: none;  */
}

.card-viz {
    /* background-color: #ffffff; */
    /* 	mix-blend-mode: multiply; */
    opacity: 1;
    background-color: #000000;
}

.card-viz-blocker {
    opacity: 1;
}


.card-header {
    font-size: 24pt;
    font-weight: bolder;
    text-align: right;
    color: white;
}

/* Card style for each topic */

.card.card-topic-0 {
    border: 1px solid RGB(164, 207, 96) !important;
}

.card.card-topic-1 {
    border: 1px solid RGB(4, 123, 64) !important;
}

.card.card-topic-2 {
    border: 1px solid RGB(109, 179, 226) !important;
}

.card.card-topic-3 {
    border: 1px solid RGB(150, 150, 150) !important;
}

.card.card-topic-4 {
    border: 1px solid RGB(150, 150, 150) !important;
}

.card.card-topic-5 {
    border: 2px solid RGB(150, 150, 150) !important;
}

.card-topic-0 .card-header {
    background: transparent url(./images/topic-0c.png) no-repeat;
    background-color: RGB(164, 207, 96); /* // Avocado */
    background-position: 4px;
    background-size: 20px 20px;
    padding: 10px 5px 10px 40px;
    line-height: 0px;
    height: 25px;
    border-radius: 0.35em 0.35em 0em 0em;
}

.card-topic-1 .card-header {
    background: transparent url(./images/topic-1c.png) no-repeat;
    background-color: RGB(4, 123, 64); /* // Kelly */
    background-position: 4px;
    background-size: 20px 20px;
    padding: 10px 5px 10px 40px;
    line-height: 0px;
    height: 25px;
    border-radius: 0.35em 0.35em 0em 0em;
}

.card-topic-2 .card-header {
    background: transparent url(./images/topic-2c.png) no-repeat;
    background-color: RGB(109, 179, 226); /* // Carolina */
    background-position: 4px;
    background-size: 20px 20px;
    padding: 10px 5px 10px 40px;
    line-height: 0px;
    height: 25px;
    border-radius: 0.35em 0.35em 0em 0em;
}

.card-topic-3 .card-header {
    background: transparent url(./images/topic-3c.png) no-repeat;
    background-color: RGB(150, 150, 150); /* // Medium */
    background-position: 4px;
    background-size: 20px 20px;
    padding: 10px 5px 10px 40px;
    line-height: 0px;
    height: 25px;
    border-radius: 0.35em 0.35em 0em 0em;
}

.card-topic-4 .card-header {
    background-color: RGB(150, 150, 150); /* // Medium */
}

.card-topic-5 .card-header {
    background-color: RGB(150, 150, 150); /* // Medium */
}


.card-topic-0 .card-name {
    color: RGB(4, 123, 64); /* Kelly */
    font-size: 14pt;
    font-weight: bold;
}

.card-topic-1 .card-name {
    color: RGB(164, 207, 96); /* Avacado */
    font-size: 14pt;
    font-weight: bold;
}

.card-topic-2 .card-name {
    color: RGB(0,75,140); /* Ultra */
    font-size: 14pt;
    font-weight: bold;
}

.card-topic-3 .card-name {
    color: RGB(90, 90, 90); /* Dark */
    font-size: 14pt;
    font-weight: bold;
}

.card-topic-4 .card-name {
    color: RGB(4, 123, 64);
    font-size: 14pt;
    font-weight: bold;
}

.card-topic-5 .card-name {
    color: RGB(4, 123, 64);
    font-size: 14pt;
    font-weight: bold;
}



/* End of card styles */




.card-topic-0 .card-viz-blocker {
    color: RGB(164, 207, 96); /* Avocado */
    font-size: 32pt;
    font-weight: bold;
    /* 	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); */
}

.card-topic-1 .card-viz-blocker {
    color: RGB(4, 123, 64); /* // Kelly */
    font-size: 32pt;
    font-weight: bold;
    /* 	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); */
}

.card-topic-2 .card-viz-blocker {
    color: RGB(109, 179, 226); /* // Carolina */
    font-size: 32pt;
    font-weight: bold;
    /* 	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); */
}

.card-topic-3 .card-viz-blocker {
    color: RGB(150, 150, 150); /* // Medium */
    font-size: 32pt;
    font-weight: bold;
    /* 	text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); */
}

.card-topic-4 .card-viz-blocker {
    color: RGB(150, 150, 150); /* // Medium */
    font-size: 32pt;
    font-weight: bold;
    /* 	text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); */
}

.card-topic-5 .card-viz-blocker {
    color: RGB(150, 150, 150); /* // Medium */
    font-size: 32pt;
    font-weight: bold;
    /* 	text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); */
}





/* Top of the screen, below the hillsboro header */
.filter-header {
    background-color: RGB(0,75,140); /* // Ultra */
    color: #FFFFFF;
}


/* Color behind the buttons in the filter header */
.filter-header-buttons {
    background-color: RGB(0,88,140); /* // Weird color  */
    color: #ffffff;
}

/* Color behind the checkboxes */
.filter-header-checkboxes {
    background-color: RGB(0,88,140); /*  // Weird color */
    color: #ffffff;
}

/* Color of the checkboxes */
.filter-checkboxes {
    background-color: RGB(0,75,140);
    color: #ffffff;
}






/* Modal configuration base */
.modal-title {
    background-color: RGB(164, 207, 96);
    background-position: center;
    background-size: 25px 25px;
    margin-bottom: 10px;
}

/* Modal X in the upper right */
.modal-close-box {
    color: #ffffff;
}


/* Modal button configuration base */
.modal-button {
    background: green;
    color: #ffffff;
}





/* Modal button active styling */
.active {
}


/* Modal configuration for Topic 1 */
.modal-title-topic-0 {
    background: transparent url(./images/topic-0c.png) no-repeat;
    background-color: RGB(164, 207, 96);
    background-position: 4px;
    background-size: 30px 30px;
}

/* Modal X in the upper right for Topic 1 */
.modal-close-box-topic-0 {
    color: #ffffff;
}


/* Modal button configuration for Topic 1 */
.modal-button-topic-0.active {
    background: RGB(164, 207, 96);
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    border: 3px solid RGB(164, 207, 96);
    color: #ffffff;
    width: 100%;
}

.modal-button-topic-0.inactive {
    border: 3px solid RGB(164, 207, 96);
    background: #FFFFFF;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: RGB(164, 207, 96);
    width: 100%;
}





/* Modal configuration for Topic 2 */
.modal-title-topic-1 {
    background: transparent url(./images/topic-1c.png) no-repeat;
    background-color: RGB(4, 123, 64); /* // Kelly */
    background-position: 4px;
    background-size: 30px 30px;
}

/* Modal X in the upper right for Topic 2 */
.modal-close-box-topic-1 {
    color: #ffffff;
}


/* Modal button configuration for Topic 2 */
.modal-button-topic-1.active {
    background-color: RGB(4, 123, 64); /* // Kelly */
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    border: 3px solid RGB(4, 123, 64);
    color: #ffffff;
    width: 100%;
}

.modal-button-topic-1.inactive {
    border: 3px solid RGB(4, 123, 64);
    background: #FFFFFF;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: RGB(4, 123, 64);
    width: 100%;
}




/* Modal configuration for Topic 3 */
.modal-title-topic-2 {
    background: transparent url(./images/topic-2c.png) no-repeat;
    background-color: RGB(109, 179, 226); /* // Carolina */
    background-position: 4px;
    background-size: 30px 30px;
}

/* Modal X in the upper right for Topic 3 */
.modal-close-box-topic-2 {
    color: #ffffff;
}


/* Modal button configuration for Topic 3 */
.modal-button-topic-2.active {
    background: RGB(109, 179, 226);
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    border: 3px solid RGB(109, 179, 226);
    color: #ffffff;
    width: 100%;
}

.modal-button-topic-2.inactive {
    border: 3px solid RGB(109, 179, 226);
    background: #FFFFFF;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: RGB(109, 179, 226);
    width: 100%;
}



/* Modal configuration for Topic 4 */
.modal-title-topic-3 {
    background: transparent url(./images/topic-3c.png) no-repeat;
    background-color: RGB(150, 150, 150); /* // Medium */
    background-position: 4px;
    background-size: 30px 30px;
}

/* Modal X in the upper right for Topic 4 */
.modal-close-box-topic-3 {
    color: #ffffff;
}


/* Modal button configuration for Topic 4 */
.modal-button-topic-3.active {
    background: RGB(150, 150, 150);
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    border: 3px solid RGB(150, 150, 150);
    color: #ffffff;
    width: 100%;
}

.modal-button-topic-3.inactive {
    border: 3px solid RGB(150, 150, 150);
    background: #FFFFFF;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: RGB(150, 150, 150);
    width: 100%;
}





/* Modal configuration for Topic 4 */
.modal-title-topic-4 {
    background: transparent url(./images/population_icon_2.png) no-repeat;
    background-color: RGB(150, 150, 150); /* // Medium */
    background-position: 4px;
    background-size: 30px 30px;
}

/* Modal X in the upper right for Topic 4 */
.modal-close-box-topic-4 {
    color: #ffffff;
}


/* Modal button configuration for Topic 4 */
.modal-button-topic-4.active {
    background: green;
    border: 3px solid green;
    color: #ffffff;
    width: 100%;
}

.modal-button-topic-4.inactive {
    border: 3px solid green;
    background: #FFFFFF;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: green;
    width: 100%;
}




/* Modal configuration for Topic 4 */
.modal-title-topic-5 {
    background: transparent url(./images/population_icon_2.png) no-repeat;
    background-color: RGB(150, 150, 150); /* // Medium */
    background-position: center;
    background-size: 25px 25px;
}

/* Modal X in the upper right for Topic 4 */
.modal-close-box-topic-5 {
    color: #ffffff;
}


/* Modal button configuration for Topic 4 */
.modal-button-topic-5.active {
    background: green;
    color: #ffffff;
    border: 3px solid green;
    width: 100%;
}

.modal-button-topic-5.inactive {
    border: 3px solid green;
    background: #FFFFFF;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    color: green;
    width: 100%;
}












#page_footer {
    padding: 30px 10px 13px;
    font-size: 82%;
    background: #003082;
    text-align: center;
    min-height: 130px;
}

    #page_footer #footercolumn {
        color: #FFFFFF;
        font-family: inherit;
        min-height: 130px;
        padding: 0;
        position: relative;
    }

    #page_footer .footer_nav {
        margin-bottom: 10px;
        text-align: center;
    }

        #page_footer .footer_nav a {
            white-space: nowrap;
            text-transform: uppercase;
            color: #FFFFFF;
            text-decoration: none;
            margin-right: 10px;
        }




    #page_footer a {
        color: #ffffff;
    }

        #page_footer a:hover {
        }