/*-------------------------------*/
/*- General Styling             -*/
/*-------------------------------*/

.validator
{
    color:red;
}

.badge.badge-pill:hover
{
    cursor:pointer;
}

label {
    font-weight: bold;
    color: #666;
}


.label {
    font-weight: bold;
    color: #666;
}


/**********************************************************/
/*************   HP/MOBILE HEADER        ******************/
/*********************************************************/

.Header {
    background: linear-gradient(90deg, rgb(28,121,228), rgb(14,184,218));
    border-bottom: 1px solid #eee; /*Faint_Grey*/
}

    /* Applies to logo in the header */
    .Header img {
        max-height: 70px;
        filter: brightness(0) invert(1); /* Make logo white */
    }

    .Header .nav-link {
        color: #f8f9fa; /*Playdoh_White*/
    }

        /* Underline only the text when a link in the header is hovered over,
but not when it has the active class. Needed because it looks weird to
have the icon and space between icon and text underlined. */
        .Header .nav-link:not(.active):hover > span {
            text-decoration: underline;
        }

        /* When one of the header links is active, highlight it by adding a
very light gray background */
        .Header .nav-link.active {
            background-color: #f8f9fa; /*Playdoh_White*/
            color: #0623da;
        }


/**********************************************************/
/*************   CONTENT TABLE STYLING   ******************/
/*********************************************************/

.content_outer_wrapper {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.content_wrapper_header {
    color: #fff;
    background-color: #666 !important;
}


/**********************************************************/
/******************   TODO BOX STYLING   ******************/
/*********************************************************/


.green {
    border-color: #42bc9b; /*Minty_Green*/
    color: #42bc9b; /*Minty_Green*/
}

    .green:hover:not(.todo_link_disabled) {
        color: #42bc9b; /*Minty_Green*/
        cursor:pointer;
    }


a.green.todo_link_disabled:hover {
    border-color: #42bc9b; /*Minty_Green*/
    color: #42bc9b !important; /*Minty_Green*/
}

.disabled_grey {
    color: #b7b5b5; /*Grey*/
}

a.disabled_grey:hover {
    color: #b7b5b5; /*Grey*/
}

.green.todo_link_disabled.list-group-item-action:focus, .green.todo_link_disabled.list-group-item-action:hover {
    background-color: transparent !important;
    color: #42bc9b !important; /*Minty_Green*/
}
/**********************************************************/
/*****************  Tooltip Styling  **********************/
/**********************************************************/
.tooltip-inner {
    display: inline-table;
    text-align: left;
    color: #666;
    background-color: #fff;
    border: solid 2px #0056b3;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #0056b3;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #0056b3;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #0056b3;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #0056b3;
}



/*-------------------------------*/
/*- Navigation Styling          -*/
/*-------------------------------*/


nav {
    border-bottom: 1px solid lightgray;
    box-shadow: 0 0 20px lightgray;
}

nav .navbar-nav .nav-item a.nav-link:hover {
    color: #007bff; /*Royal_Blue*/
}

.nav-item.active {
    border-bottom: 2px solid #007bff; /*Royal_Blue*/
}

.navbar-brand img {
    max-width: 200px;
}

/*-------------------------------*/
/*- Calendar Styling            -*/
/*-------------------------------*/

    .symposium_calendar_item
    {
        background-color:#f2f19e; /* Medium Yellow */
    }

	.presentation:hover 
    {
		cursor: pointer;
		color: #d37f5d; /* 70s Orange */
		border-color: #563e75; /* Dark Purple */
	}




/*-------------------------------*/
/*- Timeline Styling            -*/
/*-------------------------------*/

#steps_div {
    margin-top: 10px;
    clear: both;
}

    #steps_div h2 {
        color: #666; /*Grey*/
    }

    #steps_div .step {
        float: left;
        width: 120px;
        text-align: center;
        vertical-align: top;
    }

        #steps_div .step .box {
            width: 90%;
            height: 10px;
            background-color: #ccc; /*Grey*/
            margin: 0 auto;
        }

        #steps_div .step.on .box {
            background-color: #007bff; /*Bright_Blue*/
        }

        #steps_div .step .text {
            width: 90%;
            color: #ccc;
            margin: 0 auto;
        }

        #steps_div .step.on .text {
            color: #007bff; /*Bright_Blue*/
            font-weight: bold;
        }

    #steps_div .page_subtitle {
        color: #6d6d6d;
    }


    #steps_div .small_step_text {
        display: none;
    }

/*-------------------------------*/
/*- Helpful hint Styling            -*/
/*-------------------------------*/

#helpful_hint_container {
    background-image: url(../images/helpful_hint_arrow_blue.png);
    background-repeat: no-repeat;
    background-position: left center;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 300px;
    margin-left: 12px;
    padding-left: 14px;
}

#helpful_hint_content {
    border: 1px solid #0056b3; /*Blue (Link Hover Color)*/
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 10px;
    background-color: #ffffff; /*White*/
}


/**********************************************************/
/**************** Event Detail Styling ********************/
/**********************************************************/

.Content_Title_Grey {
    background-color: #949393;
    padding: 5px 5px 5px 5px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #fff !important;
}


/**********************************************************/
/**************** Enduring Materials Page *****************/
/**********************************************************/

.Hoverable_Conference_Series {
    border: 2px solid #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

    .Hoverable_Conference_Series:hover {
        border: 2px solid #007bff; /*Royal Blue*/
    }


/**********************************************************/
/****************** Certificate Styling ********************/
/**********************************************************/
.Certificate_Title {
    font-family: 'Pinyon Script';
    font-size: 3rem;
}

.Certificate_Frame {
    background: url(../../../../images/certificate_border.svg) repeat;
    border: 1px solid #e7d2a0;
    padding: 50px; /* Padding determines how much of the border is shown */
}

.Certificate_Content {
    background-color: white;
    border: 1px solid #e7d2a0;
    font-family: 'Playfair Display';
    font-size: 1rem;
    line-height: 1.33;
}

.Certificate_Name {
    font-size: 2rem;
}

.Certificate_Disclaimer {
    font-family: sans-serif;
    font-size: .75rem;
    opacity: 0.4;
}


@media (max-width: 768px) {
    /* Increase title and name size on larger screens */
    .Certificate_Content {
        font-size: 1.25rem;
    }

    .Certificate_Name {
        font-size: 3rem;
    }

    .Certificate_Title {
        font-size: 4.5rem;
    }

    /*Minify Timeline*/
    #steps_div .step {
        float: left;
        width: 35px;
        text-align: center;
        vertical-align: top;
        margin-top: 2px;
    }

        #steps_div .step.steps_tiny {
            width: 25px;
        }


    #steps_div h2 {
        font-size: 1.5rem;
    }

    #steps_div h3 {
        font-size: 1rem;
    }

    #steps_div .step .text {
        display: none;
    }

    #steps_div .small_step_text {
        display: block;
        color: #0623da; /*Dark_Blues*/
    }
}