/**********************************************************/
/*****************  Tooltip Styling  **********************/
/**********************************************************/
.tooltip-inner {
    display: inline-table;
    text-align: left;
    color: #666;
    background-color: #fff;
    border: solid 2px #0eb7da;
    max-width: 600px;
}

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

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

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

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


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

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

    #steps_div h1 {
        color: #0eb7da; /*Light_Blue*/
    }

    #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: #0eb7da; /*Light_Blue*/
        }

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

        #steps_div .step.on .text {
            color: #0eb7da; /*Light_Blue*/
            font-weight: bold;
        }

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



    #steps_div .small_step_text {
        display: none;
    }



@media (max-width: 768px) {
    #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*/
    }
}



/**********************************************************/
/********************  Quote Styling **********************/
/**********************************************************/
blockquote {
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}
    /* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
    blockquote:before {
        font-family: Georgia, serif;
        position: absolute;
        font-size: 6em;
        line-height: 1;
        top: 0;
        left: 0;
        content: "\201C";
    }

    blockquote:after {
        font-family: Georgia, serif;
        position: absolute;
        /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
        float: right;
        font-size: 6em;
        line-height: 1;
        right: 0;
        bottom: -0.5em;
        content: "\201D";
    }

    blockquote footer {
        padding: 0 2em 0 0;
        text-align: right;
    }

    blockquote cite:before {
        content: "\2013";
    }


/**********************************************************/
/******************  TODO Box Styling ********************/
/**********************************************************/

.todo_link > h5 {
    color: #0623da; /*Dark_Blues*/
}

.todo_link:hover {
    background-color: #0eb7da; /*Light_Blue*/
    color: #fff; /*White*/
}

.todo_link_disabled:hover {
    background-color: #fff; /*White*/
    cursor: default;
}

.green {
    border-color: rgba(0,0,0,.125) !important; /*Dark_Green*/
    color: #00b620 !important; /*Dark_Green*/
}


.green:hover:not(.todo_link_disabled) {
    color: #fff !important; /*White*/
}


a.green.todo_link_disabled:hover {
    border-color: #1dd448; /*Dark_Green*/
    color: #00b620; /*Dark_Green*/
}

.todo_link_active {
    background-color: #0eb7da; /*Light_Blue*/
    color: #fff; /*White*/
}

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

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



/**********************************************************/
/****************** 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 (min-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;
    }
}


/******************************
/**** NEW STYLES           ****
******************************/

textarea {
    resize: both !important;
}

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