/* Misc
   ========================================================================== */
.textcolor_green { color: rgba(35, 148, 72, 1.0) !important; /* Green */ }
.textcolor_red { color: rgba(189, 0, 47, 1.0) !important; /* Red */ }
.text_left { text-align: left; }

#introduction {
    padding: 0px;
    margin-bottom: 50px;

    background-color: transparent;
}

/* Questionare
   ========================================================================== */
.column_flex_container {
    display: flex;
    justify-content: space-between;

    padding: 0px;
}

.column_flex_content {
    width: calc(50% - 25px);
    height: auto;

    text-align: center;
}

.column_flex_content img {
    width: 50px;
    height: auto;

    margin-bottom: 10px;
}

.column_flex_content p {
    font-size: 0.8em;
}

.column_flex_content:hover {
    cursor: pointer;
}

.column_flex_container_position {
}

.column_flex_content_position {
    width: calc(14% - 10px);
    height: auto;
}

.column_flex_content_salary {
    text-align: left;
}

#sector_vvs, #sector_chimney {
    text-align: center;
}

.section_regular, .section_apprentice {
    width: 100%;
    height: auto;

    display: none;
}

#hourly_salary_value, #monthly_salary_value {
    width: 75%;

    margin-right: 10px;
}

/* Map
   ========================================================================== */
#section_map {
    width: 80%;
    height: auto;

    margin: 0 auto;
}

#bor_map_svg {
    width: 100% !important;
    height: auto !important;
    margin: 0;
}

.st0{fill:#d5d5d5;}
.st1{fill:#dfdfdf;}
.st2{fill:#cacaca;}
.st3{fill:none;stroke:#B2BBBB;stroke-width:0.5;stroke-miterlimit:10;}


text, .st4 {
    font-family: 'Squada One', Impact, Arial, sans-serif;
    font-size: 1.1em;

    text-transform: uppercase;
    /*text-shadow: 0px 0px 4px #FFFFFF;*/

    color: #333333;
    fill: #333333;
    }

#Bornholm_1_:hover, #Nordjylland_1_:hover, #Oestjylland_1_:hover, #Vestjylland_1_:hover, #Sydjylland_1_:hover, #Fyn_3_:hover, #Sydsjaelland_1_:hover, #Nordsjaelland_1_:hover, #Koebenhavn_1_:hover, #City_1_:hover {
    cursor: pointer;
}

#Nordjylland:hover, #Vestjylland:hover, #Oestjylland, #Sydjylland:hover, #Fyn:hover, #Koebenhavn:hover, #City:hover, #Nordsjaelland:hover, #Sydsjaelland:hover, #Oestjylland:hover, #Bornholm:hover {
    cursor: pointer;
}

.active {
	-webkit-transition: fill 0.25s ease;
	-moz-transition: fill 0.25s ease;
	-o-transition: fill 0.25s ease;
	transition: fill 0.25s ease;

    fill: #c13d43 !important; /* BOR Red */
}

.svg_text_small {
    font-size: 0.9em;
}

/* Result - Headlines
   ========================================================================== */
.result_headline {
    display: table;
    margin: 0 auto;

    color: rgba(193, 61, 67, 1.0); /* BOR Red */
    font-weight: bold;
    font-style: normal;
    font-size: 2.25em;
    text-align: center;
}

.result_subheadline {
    display: table;
    margin: 0 auto;

    line-height: 0.8; /* Remove unwanted top/bottom spacing */
    font-size: 1.25em;
    text-align: center;
}

.result_subheadline:nth-child(2) {
    line-height: 1.2; /* Increase gab when two */
}


/* Result - Salary
   ========================================================================== */
.result_container {
    position: relative;

    margin-top: 50px;
}

.result_percentages {
    position: relative;

    display: none;
}

.result_texts {
    z-index: 15;
    position: relative;
    height: 200px;
}

.result_mobile_wrapper {
    position: relative;
}

.result_25_text, .result_50_text, .result_75_text {
    position: absolute;
    width: 140px;
    height: 200px;

    font-weight: 300;
    font-size: 0.9em;
    text-align: center;
    line-height: 1.2;

    /*background-color: rgba(83, 97, 110, 0.25); /* Grey */
}

.result_25_text {
    left: calc(25% - 70px); 
    padding: 100px 5px 0px;

    background-image: url("/images/percent_25.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_50_text {
    left: calc(50% - 70px);
    padding: 63px 5px 0px;

    background-image: url("/images/percent_50.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_75_text {
    left: calc(75% - 70px);
    padding: 100px 5px 0px;

    background-image: url("/images/percent_75.png");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.result_25_text b, .result_50_text b, .result_75_text b {
    font-size: 1.2em;
    font-weight: bold;
}

.result_25, .result_50, .result_75, .result_100 {
    float: left;
    height: 75px;    
}

.result_boxes {
    position: relative;

    margin-top: -6px;
}

.result_boxes img {
    display: none;
}

.result_25 {
    background-color: rgba(218, 139, 142, 1.0); /* 25 percent */
    width: 25%;

    -webkit-border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px;
    -o-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    -o-border-bottom-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.result_50 {
    background-color: rgba(205, 100, 105, 1.0); /* 50 percent */
    width: 25%;
}

.result_75 {
    background-color: rgba(193, 61, 67, 1.0); /* 75 percent */
    width: 25%;
}

.result_100 {
    background-color: rgba(162, 53, 56, 1.0); /* 100 percent */
    width: 25%;

    -webkit-border-top-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -o-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    -o-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#result_user {
    position: relative;

    width: 100%;
    height: 50px;

    display: none;
}

#result_userbox {
    position: absolute;
    top: 10px;
    left: 6px;

    padding: 5px 15px;

    font-size: 0.8em;
    text-align: center;
    line-height: 1.1;

	background-color: rgba(238, 247, 247, 1.0); /* BOR Blue Light */

	border-width: 1px;
    border-style: solid;
    border-color: rgba(83, 97, 110, 0.25); /* Grey */

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;

    /*box-shadow: 0px 0px 5px rgba(41, 41, 41, 0.33);*/
}

#result_userbox:after, #result_userbox:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#result_userbox:after {
	border-color: transparent;
	border-bottom-color: rgba(238, 247, 247, 1.0); /* BOR Blue Light */
	border-width: 10px;
	margin-left: -10px;

}

#result_userbox:before {
	border-color: transparent;
	border-bottom-color: rgba(83, 97, 110, 0.25); /* Grey */
	border-width: 11px;
	margin-left: -11px;
}

#result_input {
    position: relative;

    margin-top: 40px;
}

#progressed_salary, #progressed_price {
    float: right;

    width: 50px;
    height: auto;

    margin-top: 22px;
}

#progressed_salary:hover, #progressed_price:hover {
    cursor: pointer;
}

#section_progressed_salary, #section_progressed_price {
    display: none;
}

/* Benefits
   ========================================================================== */
.benefit_item {
    float: left;

    width: calc(50% - 25px);
    height: 85px;
}

.benefit_item:nth-of-type(even) {
    margin-left: 45px;
}

.benefit_item img {
    float: left;

    width: 38px;
    height: auto;

    margin-top: 3px;
    margin-right: 10px;
}

.benefit_desc {
    width: calc(100% - 60px);
    float: right;

    text-transform: lowercase;
}

.benefit_percentage {
    font-family: 'Segoe UI Bold', 'Helvetica Neue Bold', Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;

    color: rgba(193, 61, 67, 1.0); /* BOR Red */
}


/* Result - Contact Form
   ========================================================================== */
.question_header {
    float: left;

    width: 175px;
    min-height: 60px;

    line-height: 2em;
    font-size: 14px;
}

.question_input {
    float: right;

    width: calc(100% - 175px);
    min-height: 60px;
}

/* Help
   ========================================================================== */
.helpbox_icon {
    position: relative;
    top: 1px;

    display: inline-block;

    width: 40px;
    height: 40px;

    color: rgba(34, 34, 34, 0.5); /* Grey */
    text-align: center;

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

.helpbox_icon p {
    line-height: 2.4em;
}

.helpbox_icon:hover {
    cursor: pointer;
}

.helpbox_info {
	z-index: 25;
	position: absolute;
	top: 0px;
	right: 75px;

	width: 300px;
	height: auto;
	padding: 10px;

    background-color: rgba(255, 255, 255, 1.0); /* White */
    font-size: 0.95em;

	-webkit-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.35);
	-moz-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.35);
	-o-box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.35);
	box-shadow: 1px 1px 5px 0px rgba(50, 50, 50, 0.35);
    border: 1px solid;
	border-color: rgba(227, 227, 226, 1.0); /* 20% black */

	display: none;
}