/**
 * @copyright MBO Verlag GmbH
 * Härtefall-/Zuzahlungsrechner | IKK Brandenburg und Berlin
 */


/**
 * Font for Icons
 */ 
@font-face {
	font-family: 'rechner';
	src: url('font/rechner.eot?18356468');
	src: url('font/rechner.eot?18356468#iefix') format('embedded-opentype'),
		 url('font/rechner.woff?18356468') format('woff'),
		 url('font/rechner.ttf?18356468') format('truetype'),
		 url('font/rechner.svg?18356468#rechner') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon {
	font-family: "rechner";
	font-style: normal;
	font-weight: normal;
	speak: none;     
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	text-align: center;
	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;     
	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;     
	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-question {
	position: relative;
    top: -2px;
	color:#0d61ad;
	font-size:18px;
	cursor:help;     
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
  font-family: Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.4em;
  background-color:#fff;
  color:#353535;
  margin:0;
  padding:0;
}

img {border:0 none;}

h2 {font-size:1.1em;}
h2.csc-firstHeader {padding:1.2em 0 0 0;}
h3 {font-weight:bold;font-size:.8em;}
h4 {font-size:1.1em;margin: .5em 0;}
h4.ergebnis {font-size:.9em;}

p {
}

table {margin:0;}

hr { margin-bottom: .5em; }

a:link, a:visited, a:focus, a:hover, a:active {
  color:#117ACB;
  text-decoration:none;
}

a.underlinelink {
  text-decoration:underline;
  font-weight:600;
}

#container { 
	max-width: 665px;
    /*margin: 0 auto;*/
    position: relative;
}

#printlink { font-size:12px; margin:12px;}
#printlink img {
 margin-right:0.5em;
 position:relative;
 top:0.2em;
}
.footnote { font-size:12px; line-height: 12px; margin:15px 0;}
.mandatory { font-size:18px;}
.error { color:#ff0000; }

/**
 * Form
 */
.fform, .kostenform {
	margin: 30px 0;
}
fieldset {
	border:0 none;
	margin:0;
	width:100%;
}
.fieldset {
	padding: 12px;
}
div.label,
fieldset.summederausgaben .label {
    border: 0;
    float: left;
    width: 33.33333333%;
    text-align: left;
    font-weight: normal;
    margin: 0;
    padding: 5px 0 0 0;
}
fieldset.summederausgaben .label {
    width: 66.66666667%;
    text-align: right;
    font-weight: bold;
	padding: 7px 10px 0 0;
}
.doubleLabel {
	line-height:1.2em;
	padding: 0 !important;
}
div.input,
fieldset.summederausgaben .input {
    width: 66.66666667%;
    float: left;
}
fieldset.summederausgaben .input {
    width: 33.33333333%;
    float: left;
}
fieldset.summederausgaben {
    margin:30px 0;
}
div.kostenform .inputright {
    width: 50%;
}
.textright { text-align:right; }
.middle { vertical-align:middle; }
.bottom { vertical-align:bottom; }
.strong { font-weight: 600; }
div.flex,
div.flex-right {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
div.flex-right {
  -webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}
div.flex input:not(.vermerk),
div.flex-right input:not(.vermerk) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.vermerklabel {
    margin:5px 5px 5px 0;
}
.addon {
    padding: 6px 12px;
    color: #555;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-left: none;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
input, select {
    display: block;
    width: 100%;
    vertical-align:middle;
    padding: 6px 12px;
    font-family: Arial,Helvetica,sans-serif;
    background-color: #fff;
    color: #555;
    border: 1px solid #cccccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input:focus, select:focus {
    border-color: #f5f5f5;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(245,245,245,0.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(245,245,245,0.6);
}

input.radio {
    width:20px;
	display:inline-block;
	box-shadow:none;
}
.radioLabel {
	vertical-align: middle;
}
input#angehoerige,
input#alg2 {
    width:20px;
    min-height:20px;
    display:inline-block;
    margin: 0 10px 0 0;
}
div.prozent {
    float: left;
    max-width: 50%;
    padding: 6px 12px;
}
div.belastungsgrenze {
    float: right;
    max-width: 50%;
}
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: none;
    border-radius:0px;
    transition: background 0.3s ease-out;    
    border-color: #8c8c8c;
    border-top: 1px solid #909090;
    border-left: 1px solid #b9b9b9;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}
.btn-primary {
    color: #fff;
    background-color: #ccc;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.075);	
	width:50%;
	float:right;
}
.btn-primary:hover {
    border-color: #adadad;
}
.btn-primary:active,
.btn-primary:focus {
    background-color: #07345c;
    border-color: #8c8c8c;
}
.btn-print {
  margin-top: 30px;
}
input[readonly], select[readonly]
{
    cursor: not-allowed;
	background-color: #f1f1f1;
	color: graytext;
}
input[disabled], select[disabled]
{
	background-color: #f5f5f5;
	color: graytext;
}
.grid {
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
}
.grid-row {
    display: table-row;
}
.grid-cell {
	display: table-cell;
	padding-bottom:5px;
	width: 50%;
}
div.resulttext {
    padding: 15px;
    background: #f1f1f1;
    margin: 12px;
}
div.resulttext p {
    background: #fff;
    display: block;
	margin: 0;
    padding: 5px;
    border: 1px solid #cccccc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.table { border: 1px solid #ccc; border-collapse:collapse; overflow:auto; width: 100%; }
.table td { padding: .5em; border: 1px solid #ccc; vertical-align:top; }
.table tr:nth-child(odd) td {
	background-color:#f1f1f1;
}
.ui-dialog-titlebar-close { width: 30px !important; height: 24px !important; top: 40% !important }

/**
 * small Devices
 */

@media only screen and (max-width: 660px) {

	div.input,
	.grid {
    width:100%;
	}
	div.label,
	div.pseudolabel {
    float: none;
    width: 100%;
    margin-bottom: 5px;
    padding-right: 0;
	}
	div.flex.belastungsgrenze {
	margin-top: 15px;	
	}
	div.prozent,
	div.belastungsgrenze	{
    float: none !important;
	}
	.btn-primary {
    float: none;
}
	
	/* Force table to not be like tables anymore */
	.collapsible table, .collapsible thead, .collapsible tbody, .collapsible th, .collapsible td, .collapsible tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.collapsible thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.collapsible tr { border: 1px solid #ccc; }
	
	.collapsible td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 5px; 
	}
	
	.collapsible td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	.entgelt_result.collapsible td:nth-of-type(1):before { content: ""; }
	.entgelt_result.collapsible td:nth-of-type(2):before { content: "Arbeitnehmer"; }
	.entgelt_result.collapsible td:nth-of-type(3):before { content: "Arbeitgeber"; }
	.entgelt_result.collapsible td:nth-of-type(4):before { content: "Gesamt"; }

	
	.collapsible #hr { 
		display:none; 
	}
	
}


@media print {
  .donotprint { visibility: hidden;display:none; }
  #container { margin-right:1.5em; }
  #printtitle {display:block; }
}