/* Mobile view - flip  your screen
   ========================================================================== */
#flipper {
    padding: 0px 50px;
    text-align: center;

    display: none;
}

#flipper img {
    width: 50vw;
    margin: 0 auto;
}

/* Jobcompare extras
   ========================================================================== */
.job_input {
    width: 100px;
    margin-right: 0.35em;
}

.job_radio {
    width: 15px;
    margin-right: 0.35em;
}

.job_radio_padding {
    width: 15px;
    margin-left: 35px;
    margin-right: 0.35em;
}

.jobcolumn_active {
    background-color: rgba(245, 240, 235, 1.0); /* DM Beige */
}

/* Jobcompare Header
   ========================================================================== */
.jobcolumn_header_01, .jobcolumn_header_02, .jobcolumn_header_03 {
    position: relative;
    display: flex;
    align-items: center;

    float: left;
    height: 40px;
    padding: 0px 15px; 

    font-weight: 600;
    text-transform: uppercase;
}

.jobcolumn_header_01 {
    width: 50%;
    padding: 0px 15px 0px 0px; 
}

.jobcolumn_header_02, .jobcolumn_header_03 {
    width: 25%;
    font-weight: 600;
}

.jobcolumn_header_02 img, .jobcolumn_header_03 img {
    width: 20px;
    margin-right: 7px;
}

/* Jobcompare
   ========================================================================== */
.jobcolumn_01, .jobcolumn_02, .jobcolumn_03 {
    position: relative;
    display: flex;
    align-items: center;

    float: left;
    height: 50px;

    padding: 0px 15px;
}

.jobcolumn_01 {
    width: 50%;
    padding: 0px 15px 0px 0px; 
}

.jobcolumn_01 h3 {
    margin-top: 20px;
}

.jobcolumn_02, .jobcolumn_03 {
    width: 25%;
}

/* Jobcompare Line
   ========================================================================== */
.jobcolumn_01_line, .jobcolumn_02_line, .jobcolumn_03_line {
    position: relative;
    float: left;
    height: 10px;
    border-bottom: 1px solid;
	border-color: rgba(227, 227, 226, 1.0); /* 20% black */
}

.jobcolumn_01_line {
    width: 50%;
}

.jobcolumn_02_line, .jobcolumn_03_line {
    width: 25%;
}

/* Jobcompare footer
   ========================================================================== */
.jobcolumn_footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    height: 60px;
    width: 100%;
}

/* Jobcompare result
   ========================================================================== */
#timestamp, #dm_logo {
    display: none;
}

.result_header {
    float: left;
    width: 50%;

    min-height: 35px;
    }

.result_header img {
    width: 15px;
    height: auto;
    margin-right: 5px;
    margin-top: -4px;
    }

.result_difference {
    float: left;
    width: 50%;

    min-height: 35px;
    text-align: right;
}

.result_spacer {
    float: left;
    width: 100%;
    }

.result_icons {
    float: left;
    width: 100%;
    min-height: 25px;
    line-height: 2em;
    margin-bottom: 10px;
    }

#result_left {
    float: left;
    width: 60%;
    min-height: 300px;
}

#result_right {
    float: right;
    width: 40%;
    min-height: 300px;
}

#result_report {
    float: left;
    width: 100%;

    margin-top: 15px;
}

#result_report p {
    margin-bottom: 1.625em;
}

/* Chart
   ========================================================================== */
#canvas-holder {
    width: 100%;
    height: auto;

    padding-top: 25px;
}

/* Navigation - Bottom
   ========================================================================== */
.navigation_icons {
    /*float: left;*/
    display: inline-block;
    width: 100%;
    height: 36px;
    margin-right: 25px;
}

.navigation_icons:last-of-type {
    margin-right: 0px;
}

.navigation_icons a {
    line-height: 3em;
}

.dmdot {
    float: left;
    width: 36px;
    margin-top: 6px;
    margin-right: 15px;
}


/* Help boxes
   ========================================================================== */
i {
    position: relative;

    top: 0px;    
    margin-left: 10px;
}

i:hover {
    color: rgba(205, 50, 70, 1.0); /* DM Medium Red */
    cursor: pointer;

	-webkit-transition: color 0.25s ease;
	-moz-transition: color 0.25s ease;
	-o-transition: color 0.25s ease;
	transition: color 0.25s ease;
}

.icon_helpbox {
    padding-left: 8px;
    width: 15px;
    height: auto;
}

#icon_employment, #icon_maternity_status {
    position: relative;

    top: 7px;
}

#helpbox_employment, #helpbox_salary, #helpbox_pension, #helpbox_pension_own, #helpbox_bonus,
#helpbox_workhours, #helpbox_actual_hours, #helpbox_overtime, #helpbox_caredays, #helpbox_senior_days,
#helpbox_holiday, #helpbox_holiday_extra, #helpbox_holiday_other,
#helpbox_phone, #helpbox_companycar, #helpbox_other, #helpbox_healthinsurance, #helpbox_newsletter,
#helpbox_child_illness, #helpbox_child_illness_days, #helpbox_maternity_status, #helpbox_maternity_full_dad, #helpbox_maternity_part_mom {
	z-index: 25;
	position: absolute;
	top: 50px;
	/*left: 420px;*/
	left: 25px;

	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;
}

/* Sections and inputs
   ========================================================================== */
#section_caredays, #section_senior, #section_parent_mom, #section_parent_dad {
    display: none;
}

/* Comment Form
   ========================================================================== */
.comment_header {
    position: relative;

    float: left;
    width: 30%;
    min-height: 75px;
    line-height: 2em;
}

.comment_input {
    position: relative;

    float: right;
    width: 69%;
    min-height: 75px;
}

#contact button {
    float: right;
}

#contact input, #contact select {
    background-color: rgba(245, 240, 235, 1.0); /* DM Beige */
}

#navigation_icons_print {
    text-align: center;
}