/**
 * Generals
 */ 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-size: 1rem;
    background-color: transparent;
    color: #212529;
    margin: 0;
    padding: 0;
}
div, h1, h2, h3, h4, p, span {
    text-align: left;
    font-size: 16px;
    font-size: 1rem;
}
a, ol li a, ul li a {
    color: #0177a0;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
}
a:hover {
    text-decoration: underline;
}

.dialog {
    background-color: #f6f6f6;
    color: #212529;
	position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.dialog h3 {
    font-size: 1.25rem;
	font-weight: bolder;
    color: #212529;
    margin: 1.5rem auto 0.875rem auto;
}
svg.info {
	position: relative;
	top: -5px;
	left: 5px;
	width: 1em;
    height: 1em;
	cursor:help;     
}
svg.close {
    position: absolute;
    top: 30px;
    right: 30px;
	width: 1.5em;
    height: 1.5em;
	cursor:pointer; 
}
svg.close, svg.info {
    display: inline-block;
    font-size: inherit;
    overflow: visible;
    vertical-align: -.125em;
	color: #0177a0;
	overflow: visible;
}
svg.close:hover, svg.info:hover {
    color: #01b0ec;
}

form {
    padding: 0px;
    margin: 0px;
}
img {
    border: 0px;
}
h1 {
	font-family:"Open Sans", sans-serif;
    font-size: 26px;
    color: #0177a0;
    font-weight: normal;
}
h2 {
	font-family:"Open Sans", sans-serif;
    font-size: 24px;
    font-size: 1.500rem;
    color: #0177a0;
    font-weight: normal;
}
h3 {
	font-family:"Open Sans", sans-serif;
    font-size: 20px;
    font-size: 1.250rem;
    color: #0177a0;
    font-weight: normal;
}
ol, ul {
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    padding: 0 0 0 5px;
}
.sup {
    vertical-align: top;
    font-size: larger;
    line-height: 100%;
}
.strong {
	font-weight:700;
}
.clearfix:before, .clearfix:after {
   content: ""; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;    
    max-width: 750px;
    margin: 15px 0;
}
.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.form-body {
	background:#fff;
	padding:1em 0;
}
.header {
 display:table;
 width:100%;
}
.header h2 {
 display:table-cell;
 vertical-align:bottom;
}

/**
 * Form
 */

.fform fieldset,
#result fieldset {
    border:0 none;
    margin:0 0 10px 0;
}
#result fieldset {
    border:0 none;
    margin:0 0 10px 0;
	padding:0;
}
.fform fieldset.submit {
    padding:0;
	margin-top:30px;
}
.fform .visibleFieldset fieldset {
    margin-left:0;
    padding-left:0;
}
.fform .visibleFieldset {
    margin: 20px 0;
	padding: 20px;
    border: 1px solid #ccc;
    width: auto;
}
.fform fieldset.tableheader,
.fform fieldset.GeschaetztesJahressteuerbrutto { margin-top: 15px; }
.fform legend {
    font-size: 14px;
    font-size: 0.875rem;
    border-bottom: none;
    margin-bottom: 10px;
    width: auto;
    font-weight: bold; 
}
.fform div.label {
    border: 0;
    float: left;
    width: 33.33333333%;
    text-align: left;
    font-weight: normal;
    margin: 0;
    padding: 5px 0 0 0;
	vertical-align: middle;
}
.fform div.label.radio {
    padding: 0;
}
.fform div.input {
    width: 66.66666667%;
    float: left;
}
.fform div.flex,
.fform 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+ */
}
.fform div.flex-right {
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}
.fform div.flex input {    
	border-right: none;
}
.fform .addon {
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    color: #212529;
    text-align: center;
    background-color: #F6F6F6;
    border: 1px #ced4da solid;
    border-left: none;
}
select option { 
    line-height: 20px;
}
input.radio {
    width:20px;
	height:20px;
    display:inline-block;
    box-shadow:none;
}
.radioLabel {
    margin: 0 20px 10px 5px;
    vertical-align: middle;
}
.doubleLabel { display:inline; }
.btn-print {
  margin: 30px 0;
}
.fullWidth {
	width:100%;
}
input[readonly], select[readonly]
{
    cursor: not-allowed;
	background-color: #f5f5f5;
	color: graytext;
}
input[disabled], select[disabled]
{
	background-color: #f5f5f5;
	color: graytext;
}


/**
 * Result Table
 */
#result { 
	display:table;
	width:100%;
	margin-top: 30px
}
#result div.label {
    float: left;
    width: 40%;
    text-align: right;
    font-family: "Open Sans", sans-serif;
    margin: 0;
	background: #F6F6F6;
	border:1px #c3c9d3 solid;
	color: #0177a0;
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	font-size:1.1em;
}
#result div.input {
    width: 60%;
    float: left;
	font-size:1.1em;
	display:table-cell;
	vertical-align:middle;
	padding:10px;
} 
 
#data-print { display:none; }

/**
 * small Devices
 */

@media only screen and (max-width: 768px) {
	
	.container, .form-body { padding:0; background-color: transparent; min-width:0; }
	#print_result, .btn-print, #intro	{
		padding:0 15px;
	}
	.fform fieldset, #result fieldset {
		padding-right: 5px;
	}
	.fform div.label {
		float: none;
		width: 100%;
		font-weight: bold;
		margin-bottom: 5px;
		padding-right: 0;
	}
	.btn-print, .btn-fieldset { padding:0; }
	
}

@media only screen and (max-width: 576px) {
	
	label {
		display: inline !important;
		font-size: smaller;
	}
	.dialog h3 {
		font-size: 1rem;
	}
	svg.close {
		top: 10px;
		right: 10px;
	}
	#result div.label {
		float: none;
		width: 90%;
		text-align: left;
		display:block;
		background:transparent;
		border:none;
		padding:5px 0;
	}
	#result div.input {
		width: 90%;
		float: none;
		display:block;
		padding:5px 0;
	}
	.fform div.input,
	#result div.input {
		width:100%;
	}
	
}

@media print {

	.kugrechner {
		max-width: 90%;
		width: 90%;
	}
	#data-print { display:block; }
	#kug, .btn-print, .btn-fieldset, #intro, .kontrollvariablen, .form-body h2 { display: none; }

	input.berechnen {
        display: none;
    }
	.print_result {
		background-color: #fff;
		padding:0;
		margin:0;
		border:none;
		border-collapse:collapse;
		margin: 15px 0 0 0;
		width: 100%;
	}
	.print_result td {
		padding:10px;
	}
	.print_result td.left {
		width:50%;
	}
	.print_result td.right {
		width:50%;
	}
	.print_result td[colspan="2"] {
		font-size:1.2em;
		padding:5px;
	}
	#result div.label {
		border: 0;
		float: left;
		width: 50%;
		text-align: left;
		font-family: "Open Sans", sans-serif;
		font-size:1.2em;
		margin: 0;
		background: transparent;
		color: #212529;
		display:table-cell;
		vertical-align:middle;
		padding:10px;
	}
	#result div.input {
		width: 50%;
		float: left;
		font-size:1em;
		display:table-cell;
		vertical-align:middle;
		padding:10px;
	} 

}