/* Hero
   ========================================================================== */
.hero_container {
    width: 100%;
    height: auto;

    background-color: rgba(203, 246, 248, 1.0); /* GL Turkis */

    display: none; /* iframe setting */
}

.hero_wrapper {
    width: 1200px;
    height: auto;

    margin: 0 auto;

    padding: 25px 5px 75px 5px;
}

.hero_breadcrums {
    width: 100%;
    height: auto;  

    font-size: 0.8em;
}

.hero_image, .hero_text, .hero_headline {
    width: 100%;
    height: auto;

    text-align: center;
}

.hero_image {
    margin-top: 50px;
}

.hero_image img {
    width: 55px;
    height: auto;
}

.hero_image div {
    width: 120px;
    height: 1px;

    margin: 0 auto;
    margin-top: 15px;

    background-color: rgba(157, 157, 156, 1.0); /* Black 50% */
}

.hero_text {
    margin-top: 40px;

    font-size: 0.875em; /* 14 */
    font-weight: 600;
}

.hero_headline {
    font-family: 'GL Condensed';
    font-size: 5.625em; /* 90 */
    font-weight: 300;
    line-height: 1;
}

/* Questionnare
   ========================================================================== */
#icon_profile {
    float: right;

    width: 55px;
    height: auto;

    display: none;
}

.question_header, .question_input, .question_radio {
    position: relative;

    float: left;

    margin-bottom: 25px;
}

.question_header {
    display: flex;
    justify-content: center; /* V */
    align-items: flex-start; /* H */
    flex-direction: column;
    
    width: 240px;
    height: 50px;
    }

.question_header span {
    font-style: italic;
    color: rgba(157, 157, 156, 1.0); /* Black 50% */
}

.question_input, .question_radio {
    width: calc(100% - 240px);
    height: 50px;
}

#error_employment {
    position: relative;
    top: -3px;

    font-size: 0.9em;
    color: rgba(244, 147, 47, 1.0); /* GL Orange */

    display: none;
}

/* Result - All graph 
   ========================================================================== */
#graph_all_container {
    position: relative;
    width: 100%;
    height: 280px;
}

#graph_all_active {
    z-index: 10;

    position: absolute;
    top: 100px;
    left: 0;

    width: 0; /* overwritten by JS */
    height: 75px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */

    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

    -webkit-transition: width 1s ease, height 1s ease; 
    -moz-transition: width 1s ease, height 1s ease; 
    -ms-transition: width 1s ease, height 1s ease; 
    -o-transition: width 1s ease, height 1s ease; 
    transition: width 1s ease, height 1s ease; 
}

#graph_all_p10_index, #graph_all_p50_index, #graph_all_p90_index {
    position: absolute;
    top: 90px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 10px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
}

#graph_all_p10_amount, #graph_all_p50_amount, #graph_all_p90_amount {
    position: absolute;
    top: -3px;
    left: 0; /* overwritten by JS */

    width: 125px;
    height: 50px;

    font-size: 0.85em;
    text-align: center;
    line-height: 1.2;
}

#graph_all_p10_amount div, #graph_all_p50_amount div, #graph_all_p90_amount div {
    display: flex;
    justify-content: center; /* H */
    align-items: center; /* V */

    width: 45px;
    height: 45px;

    margin: 0 auto;
    margin-bottom: 5px;

    font-family: 'GL Condensed';
    font-size: 1.2em;
    font-weight: 700;

    background-color: rgba(203, 246, 248, 1.0); /* GL Turkis */
    border-radius: 23px;
}

#graph_all_p10_subindex, #graph_all_p50_subindex, #graph_all_p90_subindex {
    z-index: 15;
    position: absolute;
    top: 100px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 75px;

    -webkit-transition: background 1s ease; 
    -moz-transition: background 1s ease; 
    -ms-transition: background 1s ease; 
    -o-transition: background 1s ease; 
    transition: background 1s ease; 
}

.graph_subindex_blue { background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */ }
.graph_subindex_brightblue { background-color: rgba(241, 241, 241, 1.0); /* Black 7,5% */ }

#graph_all_i1_index, #graph_all_i2_index, #graph_all_i3_index, #graph_all_i4_index, #graph_all_i5_index, #graph_all_i6_index, #graph_all_i7_index {
    position: absolute;
    top: 175px;
    left: 0; /* overwritten below */

    width: 1px;
    height: 10px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
}

#graph_all_i2_index { left: 16.66%; }
#graph_all_i3_index { left: 33.33%; }
#graph_all_i4_index { left: 49.99%; }
#graph_all_i5_index { left: 66.66%; }
#graph_all_i6_index { left: 83.33%; }
#graph_all_i7_index { left: 99.99%; }

#graph_all_i1_amount, #graph_all_i2_amount, #graph_all_i3_amount, #graph_all_i4_amount, #graph_all_i5_amount, #graph_all_i6_amount, #graph_all_i7_amount {
    position: absolute;
    top: 190px;
    left: 0; /* overwritten by JS */

    width: 75px;
    height: 15px;

    font-size: 0.85em;
    line-height: 1.2;
}

#graph_all_i2_amount { left: calc(16.66% - 38px); text-align: center; }
#graph_all_i3_amount { left: calc(33.33% - 38px); text-align: center; }
#graph_all_i4_amount { left: calc(49.99% - 38px); text-align: center; }
#graph_all_i5_amount { left: calc(66.66% - 38px); text-align: center; }
#graph_all_i6_amount { left: calc(83.33% - 38px); text-align: center; }
#graph_all_i7_amount { left: calc(99.99% - 75px); text-align: right; }

#graph_all_background {
    position: absolute;
    top: 100px;
    left: 0;

    width: 100%;
    height: 75px;

    background-color: rgba(241, 241, 241, 1.0); /* Black 7,5% */

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#graph_all_user_salary {
    position: absolute;
    top: 225px;
    left: 0;

    width: 120px;
    height: 55px;

    padding: 10px 0px;

    font-size: 12px;
    line-height: 1.3;
    text-align: center;

	background-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */

    border-width: 1px;
    border-style: solid;
    border-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
    border-radius: 6px;

    display: none;
}

.graph_all_user_salary:after, .graph_all_user_salary:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";

	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;
}

.graph_all_user_salary:after {
	border-color: transparent;
	border-bottom-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-left: -10px;
}

.graph_all_user_salary:before {
	border-color: transparent;
	border-bottom-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 11px;

	margin-left: -11px;
}

.graph_all_user_salary_arrow_right:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;

	border-color: transparent;
	border-left-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-top: -10px;
}

.graph_all_user_salary_arrow_left:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";

	height: 0;
	width: 0;
	position: absolute;

	pointer-events: none;

	border-color: transparent;
	border-right-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-top: -10px;
}

/* Result - Seniority graph 
   ========================================================================== */
#graph_seniority_container {
    position: relative;
    width: 100%;
    height: 260px;
}

#graph_seniority_active {
    z-index: 10;

    position: absolute;
    top: 100px;
    left: 0;

    width: 0; /* overwritten by JS */
    height: 50px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */

    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

    -webkit-transition: width 1s ease; 
    -moz-transition: width 1s ease; 
    -ms-transition: width 1s ease; 
    -o-transition: width 1s ease; 
    transition: width 1s ease; 
}

#graph_seniority_p10_index, #graph_seniority_p50_index, #graph_seniority_p90_index {
    position: absolute;
    top: 90px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 10px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
}

#graph_seniority_p10_amount, #graph_seniority_p50_amount, #graph_seniority_p90_amount {
    position: absolute;
    top: -3px;
    left: 0; /* overwritten by JS */

    width: 125px;
    height: 50px;

    font-size: 0.85em;
    text-align: center;
    line-height: 1.2;
}

#graph_seniority_p10_amount div, #graph_seniority_p50_amount div, #graph_seniority_p90_amount div {
    display: flex;
    justify-content: center; /* H */
    align-items: center; /* V */

    width: 45px;
    height: 45px;

    margin: 0 auto;
    margin-bottom: 5px;

    font-family: 'GL Condensed';
    font-size: 1.2em;
    font-weight: 700;

    background-color: rgba(203, 246, 248, 1.0); /* GL Turkis */

    border-radius: 23px;
}

#graph_seniority_p10_subindex, #graph_seniority_p50_subindex, #graph_seniority_p90_subindex {
    z-index: 15;
    position: absolute;
    top: 100px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 50px;

    -webkit-transition: background 1s ease; 
    -moz-transition: background 1s ease; 
    -ms-transition: background 1s ease; 
    -o-transition: background 1s ease; 
    transition: background 1s ease; 
}

.graph_subindex_blue { background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */ }
.graph_subindex_brightblue { background-color: rgba(241, 241, 241, 1.0); /* Black 7,5% */ }

#graph_seniority_i1_index, #graph_seniority_i2_index, #graph_seniority_i3_index, #graph_seniority_i4_index, #graph_seniority_i5_index, #graph_seniority_i6_index, #graph_seniority_i7_index {
    position: absolute;
    top: 150px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 10px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
}

#graph_seniority_i2_index { left: 16.66%; }
#graph_seniority_i3_index { left: 33.33%; }
#graph_seniority_i4_index { left: 49.99%; }
#graph_seniority_i5_index { left: 66.66%; }
#graph_seniority_i6_index { left: 83.33%; }
#graph_seniority_i7_index { left: 99.99%; }

#graph_seniority_i1_amount, #graph_seniority_i2_amount, #graph_seniority_i3_amount, #graph_seniority_i4_amount, #graph_seniority_i5_amount, #graph_seniority_i6_amount, #graph_seniority_i7_amount {
    position: absolute;
    top: 165px;
    left: 0; /* overwritten by JS */

    width: 75px;
    height: 15px;

    font-size: 0.85em;
    line-height: 1.2;
}

#graph_seniority_i2_amount { left: calc(16.66% - 38px); text-align: center; }
#graph_seniority_i3_amount { left: calc(33.33% - 38px); text-align: center; }
#graph_seniority_i4_amount { left: calc(49.99% - 38px); text-align: center; }
#graph_seniority_i5_amount { left: calc(66.66% - 38px); text-align: center; }
#graph_seniority_i6_amount { left: calc(83.33% - 38px); text-align: center; }
#graph_seniority_i7_amount { left: calc(99.99% - 75px); text-align: right; }

#graph_seniority_background {
    position: absolute;
    top: 100px;
    left: 0;

    width: 100%;
    height: 50px;

    background-color: rgba(241, 241, 241, 1.0); /* Black 7,5% */

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#graph_seniority_user_salary {
    position: absolute;
    top: 200px;
    left: 0;

    width: 120px;
    height: 55px;

    padding: 10px 0px;

    font-size: 12px;
    line-height: 1.3;
    text-align: center;

	background-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */

    border-width: 1px;
    border-style: solid;
    border-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
    border-radius: 6px;

    display: none;
}

.graph_seniority_user_salary:after, .graph_seniority_user_salary:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;

	content: " ";
	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;
}

.graph_seniority_user_salary:after {
	border-color: transparent;
	border-bottom-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-left: -10px;
}

.graph_seniority_user_salary:before {
	border-color: transparent;
	border-bottom-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 11px;

	margin-left: -11px;
}

.graph_seniority_user_salary_arrow_right:after {
	left: 100%;
	top: 50%;

	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;

	position: absolute;

	pointer-events: none;
	border-color: transparent;
	border-left-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-top: -10px;
}

.graph_seniority_user_salary_arrow_left:after {
	right: 100%;
	top: 50%;

	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;

	border-color: transparent;
	border-right-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-top: -10px;
}

#graph_seniority_user_salary_input {
    position: relative;
    margin-top: 40px;
}


/* Result - Age graph 
   ========================================================================== */
#graph_age_container {
    position: relative;
    width: 100%;
    height: 260px;
}

#graph_age_active {
    z-index: 10;

    position: absolute;
    top: 100px;
    left: 0;

    width: 0; /* overwritten by JS */
    height: 50px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */

    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

    -webkit-transition: width 1s ease; 
    -moz-transition: width 1s ease; 
    -ms-transition: width 1s ease; 
    -o-transition: width 1s ease; 
    transition: width 1s ease; 
}

#graph_age_p10_index, #graph_age_p50_index, #graph_age_p90_index {
    position: absolute;
    top: 90px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 10px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
}

#graph_age_p10_amount, #graph_age_p50_amount, #graph_age_p90_amount {
    position: absolute;
    top: -3px;
    left: 0; /* overwritten by JS */

    width: 125px;
    height: 50px;

    font-size: 0.85em;
    text-align: center;
    line-height: 1.2;
}

#graph_age_p10_amount div, #graph_age_p50_amount div, #graph_age_p90_amount div {
    display: flex;
    justify-content: center; /* H */
    align-items: center; /* V */

    width: 45px;
    height: 45px;

    margin: 0 auto;
    margin-bottom: 5px;

    font-family: 'GL Condensed';
    font-size: 1.2em;
    font-weight: 700;

    background-color: rgba(203, 246, 248, 1.0); /* GL Turkis */

    border-radius: 23px;
}

#graph_age_p10_subindex, #graph_age_p50_subindex, #graph_age_p90_subindex {
    z-index: 15;

    position: absolute;
    top: 100px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 50px;

    -webkit-transition: background 1s ease; 
    -moz-transition: background 1s ease; 
    -ms-transition: background 1s ease; 
    -o-transition: background 1s ease; 
    transition: background 1s ease; 
}

.graph_subindex_blue { background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */ }
.graph_subindex_brightblue { background-color: rgba(241, 241, 241, 1.0); /* Black 7,5% */ }

#graph_age_i1_index, #graph_age_i2_index, #graph_age_i3_index, #graph_age_i4_index, #graph_age_i5_index, #graph_age_i6_index, #graph_age_i7_index {
    position: absolute;
    top: 150px;
    left: 0; /* overwritten by JS */

    width: 1px;
    height: 10px;

    background-color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
}

#graph_age_i2_index { left: 16.66%; }
#graph_age_i3_index { left: 33.33%; }
#graph_age_i4_index { left: 49.99%; }
#graph_age_i5_index { left: 66.66%; }
#graph_age_i6_index { left: 83.33%; }
#graph_age_i7_index { left: 99.99%; }

#graph_age_i1_amount, #graph_age_i2_amount, #graph_age_i3_amount, #graph_age_i4_amount, #graph_age_i5_amount, #graph_age_i6_amount, #graph_age_i7_amount {
    position: absolute;
    top: 165px;
    left: 0; /* overwritten by JS */

    width: 75px;
    height: 15px;

    font-size: 0.85em;
    line-height: 1.2;
}

#graph_age_i2_amount { left: calc(16.66% - 38px); text-align: center; }
#graph_age_i3_amount { left: calc(33.33% - 38px); text-align: center; }
#graph_age_i4_amount { left: calc(49.99% - 38px); text-align: center; }
#graph_age_i5_amount { left: calc(66.66% - 38px); text-align: center; }
#graph_age_i6_amount { left: calc(83.33% - 38px); text-align: center; }
#graph_age_i7_amount { left: calc(99.99% - 75px); text-align: right; }

#graph_age_background {
    position: absolute;
    top: 100px;
    left: 0;

    width: 100%;
    height: 50px;

    background-color: rgba(241, 241, 241, 1.0); /* Black 7,5% */

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

#graph_age_user_salary {
    position: absolute;
    top: 200px;
    left: 0;

    width: 120px;
    height: 55px;

    padding: 10px 0px;

    font-size: 12px;
    line-height: 1.3;
    text-align: center;

	background-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */

    border-width: 1px;
    border-style: solid;
    border-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
    border-radius: 6px;

    display: none;
}

.graph_age_user_salary:after, .graph_age_user_salary:before {
	bottom: 100%;
	left: 50%;

	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;
}

.graph_age_user_salary:after {
	border-color: transparent;
	border-bottom-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-left: -10px;
}

.graph_age_user_salary:before {
	border-color: transparent;
	border-bottom-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 11px;

	margin-left: -11px;
}

.graph_age_user_salary_arrow_right:after {
	left: 100%;
	top: 50%;
	border: solid transparent;

	content: " ";
	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-left-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-top: -10px;
}

.graph_age_user_salary_arrow_left:after {
	right: 100%;
	top: 50%;
	border: solid transparent;

	content: " ";
	height: 0;
	width: 0;

	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-right-color: rgba(243, 223, 255, 1.0); /* GL Lyserød */
	border-width: 10px;

	margin-top: -10px;
}

#graph_age_user_salary_input {
    position: relative;
    margin-top: 40px;
}

/* Help
   ========================================================================== */
.helpicon {
    position: relative;

    display: inline-block;

    margin-left: 5px;
}

.helpicon:hover {
    cursor: pointer;
}

.helpbox {
	z-index: 25;
	position: absolute;
	top: 50px;
	left: 0px;

	width: 700px;
	height: auto;
	padding: 25px 35px 25px 25px;

    color: rgba(28, 34, 55, 1.0) !important; /* GL Mørkeblå */
    font-style: normal !important;
    font-weight: 400 !important;

    background-color: rgba(255, 255, 255, 1.0); /* White */
	box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.35);

    border-style: solid;
    border-width: 1px;
	border-color: rgba(227, 227, 226, 1.0); /* 20% black */

    border-radius: 6px;

	display: none;
}

.helpbox .close {
    z-index: 25;

    position: absolute;
    top: 5px;
    right: 14px;

    height: auto;

    color: rgba(28, 34, 55, 1.0); /* GL Mørkeblå */
    font-style: normal;
    font-size: 28px;
    font-weight: 400;

    margin-top: 0px;

    transition: color 0.25s ease;
}

.helpbox .close:focus, .helpbox .close:hover {
    color: rgba(0, 0, 0, 1.0); /* Black */

    text-decoration: none;
    cursor: pointer;
}