body
{
    background-color: #302c58 !important;
}

.my_font_color
{
    color: #4effbb;
}

.my_font_h4
{
    font-family: "Raleway", Arial, sans-serif;
    font-style: italic;
    font-size: 14px;
}

.border_under
{
    border-bottom: solid 1px #4effbb;
    max-width: 250px;
}

#wizard_flex_container
{
    display: flex;
    min-height: 100%;
}

#wizard_side_bar
{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    min-width: 300px;
    margin-right: 30px;
    padding: 10px;
}

.wizard_side_bar_border
{
    border-right: solid 1px #4effbb;
}

.my_avatar_style
{
    width: 76px;
    height: 76px;
}

#slider_style
{
    width: 250px;
}

#Avatar_Age_1
{
    position: absolute;
    left: 50px;
}

#Avatar_Age_2
{
    position: absolute;
    left: 130px;
}

#Avatar_Age_3
{
    position: absolute;
    left: 210px;
}

.container_avatar
{
    margin-bottom: 30px;
}

#wizard_content
{
    flex-grow: 3;
}

.my_side_bar_elements
{
    margin-bottom: 20px;
}

.my_highlighted_text
{
    font-size: large;
    font-weight: bold;
    margin: 0px 15px 0px 10px;
}

.my_h2_title
{
    margin: 20px 0px 20px 10px;
}

.my_map_timeline_element
{
    display: flex;
}


.my_map_timeline_element *
{
    margin-right: 10px;
}

.button {
    background-color: #3582d8;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 4px;
    margin: 0 8px 8px 0;
}

.button-narrow
{
    padding: 9px 15px;
}

.checkboxFive {
    width: 25px;
    /*margin: 20px 100px;*/
    position: relative;
    margin-right: 10px;
}

.checkboxFive label {
    cursor: pointer;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
    left: 0;
    background: #eee;
    border:1px solid #ddd;
}

.checkboxFive label:after {
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 6px;
    left: 7px;
    border: 3px solid #333;
    border-top: none;
    border-right: none;

    transform: rotate(-45deg);
}

.checkboxFive label:hover::after {
    opacity: 0.5;
}

.checkboxFive input[type=checkbox]:checked + label:after {
    opacity: 1;
}

.my_checkbox_container
{
    display: flex;
    width: 200px;
    height: 30px;
    margin-left: 10px;
    align-content: center;
}

.my_checkbox_container *
{
    font-size: medium;
}