@charset "utf-8";
/* CSS Document */

/*html, body {
    height: 100%;
}*/

body.surveybuilder {
    padding-top: 8rem;
    padding-bottom: 20px;
    background-color: #fafafa;
    /*background-color: hotpink;*/
}

body {
    /*background-color: lightpink;*/
    /*padding-bottom: 2rem;*/
    /*display: flex;
    flex-direction: column;*/
    padding-top: 65px;
}
/*main {
    flex: 1 0 auto;
}
footer {
    flex-shrink: 0;
}*/
.navbar-brand {
    width: 8rem;
}

.utility-nav .nav-item.active .btn-outline-secondary {
    color: #fff;
    border-color: #0BB3FB;
    background-color: #0BB3FB;
}
.utility-nav .nav-item.active .btn-outline-secondary:hover {
    /*color: #fff;
    border-color: #0BB3FB;*/
    background-color: #0BB3FB;
}

/*.global-nav .nav-item {
    padding: 0 .5rem;
}

.global-nav .nav-item a {
    color: #777777;
}

    .global-nav .nav-item:hover a {
        color: black;
        border-bottom: 3px solid #CCC;
        text-decoration: none;
    }

    .global-nav .nav-item.active a {
        color: #0082bb;
        border-bottom: 3px solid #0BB3FB;
    }*/

/*#Nav-Mobile {
    background-color: #fafafa;
}

    #Nav-Mobile .nav-link {
        border-top: 1px solid #dadada;
        border-right: 1px solid #dadada;
        color: #555;
    }

        #Nav-Mobile .nav-link:last-child {
            border-right: none;
        }

        #Nav-Mobile .nav-link.active {
            color: #0082bb;
            font-weight: bold;
        }*/

.text-primary {
    color: #0082bb !important;
}
.text-StudyTitle {
    text-transform: uppercase;
}

.hero-1,
.hero-2 {
    background-color: #9bcb51;
    color: white;
    border-top: 1px solid #9bcb51;
    border-bottom: 1px solid #9bcb51;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, .65);
}
.hero-2 h4 {
    padding: 1rem 0;
    margin: 0;
}

#logo-chr {
    filter: invert(78%) sepia(92%) saturate(2054%) hue-rotate(182deg) brightness(95%) contrast(101%);
    /*fill: orange;*/
}

#warning-ie {
    display: none;
}

.ie11 #warning-ie {
    display: block;
}


/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    html, body {
        height: 100%;
    }

    body {
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1 0 auto;
    }

    footer {
        flex-shrink: 0;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    /*.hero-1 {
		background-color: transparent;
	}*/
    
    
    .hero-1 {
        background-color: #9bcb51;
        /*background-image: url("https://picsum.photos/350/350");*/
        /*background-image: url("https://via.placeholder.com/350x350.png?text=An+image+goes+here");*/
        background-image: url("images/gardening.jpg");
        background-repeat: no-repeat;
        background-position: left;
        background-size: contain;
    }
    /*.hero-2 {
        background-color: transparent;
        border: transparent;
    }
        .hero-2 h4 {
            background-color: #9bcb51;
            border: 1px solid #9bcb51;
            padding: 1rem .75rem;
        }*/
    
    .content-general {
        font-size: 1.15rem;
        font-weight:400;
    }
    .separator-home {
        border-left: 1px solid #dadada;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    body {
        padding-top: 93px;
    }

    .navbar-brand {
        width: 12rem;
    }
    header {
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
        border-bottom: 1px solid #dee2e6;
    }
    .global-nav .nav-item {
        padding: 0 .5rem;
    }

        .global-nav .nav-item a {
            color: #777777;
            border-bottom: 3px solid #FFF;
        }

        .global-nav .nav-item:hover a {
            color: black;
            border-bottom: 3px solid #CCC;
            text-decoration: none;
        }

        .global-nav .nav-item.active a {
            color: #0082bb;
            border-bottom: 3px solid #0BB3FB;
        }
    .hero-1,
    .hero-2 {
        background-color: transparent;
        background-image: none;
        border: none;
    }

        .hero-1 > div > .row {
            background-color: #9bcb51;
            /*background-image: url("https://via.placeholder.com/350x350.png?text=An+image+goes+here");*/
            background-image: url("images/gardening.jpg");
            background-repeat: no-repeat;
            background-position: left;
            background-size: contain;
            border: 1px solid #9bcb51;
            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
        }
        /*.hero-2 .card {
            background-color: #9bcb51;
            border-color: #9bcb51;
        }*/
    .hero-2 {
        background-color: transparent;
        border: transparent;
    }

        .hero-2 h4 {
            background-color: #9bcb51;
            border: 1px solid #9bcb51;
            padding: 1rem .75rem;
        }
}


.title-section {
    padding: 0 0 2px 0;
    border-bottom: 4px solid #666;
}

    .title-section h1 {
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        font-size: 1.75rem;
        margin: 0;
        color: #595959;
    }




.required:after {
    content: " (required)";
    font-weight: bold;
    color: red;
    /*font-size: 12pt;*/
    padding-left: 2px;
    font-style: italic;
}


.requiredcb:after {
    content: " (required - pick from calendar)";
    font-weight: bold;
    color: red;
    /*font-size: 12pt;*/
    padding-left: 2px;
    font-style: italic;
}


/*
=============================================
Default CSS; Remove Later
=============================================
*/

/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/