/**
 * @copyright MBO Verlag GmbH
 * Midijobrechner / Gleitzonenrechner | Salus BKK
 */


/**
 * 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;
}
/**
 * Font from Homepage
 */
 
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('font/source-sans-pro-v13-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('font/source-sans-pro-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/source-sans-pro-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/source-sans-pro-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('font/source-sans-pro-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/source-sans-pro-v13-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('font/oswald-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('font/oswald-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('font/oswald-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('font/oswald-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('font/oswald-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('font/oswald-v29-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}


/**
 * Generals
 */ 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
    font-size: 1em;
	line-height: 1.6em;
    background-color: #fff;
    color: #646567;
    margin: 0;
    padding: 0;
}

div, h1, h2, h3, h4, p, span {
    text-align: left;
}
a, ol li a, ul li a {
    color: #005ea8;
    text-decoration: none;
    font-weight: normal;
    text-align: left;
}
a:hover {
	color: #005190;
    text-decoration: underline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
form {
    padding: 0px;
    margin: 0px;
}
img {
    border: 0px;
}
h1, h2, h3 {
    color: #646567;
	font-family:'Oswald', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
}
h2 {
    font-size: 1.5em;
    margin: 10px;
    font-weight: normal;
}
h3 {
    font-size: 20px;
    font-weight: normal;
	padding: 0px;
    margin: 0px;
}
ol, ul {
    margin: 1em;
    padding: 0;
}
.sup {
    vertical-align: top;
    font-size: smaller;
    line-height: 100%;
}
.strong {
	font-weight:bold;
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    border: 1px solid transparent;
    border-radius: 3px;
}
.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;
}
.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-calendar {
	position: relative;
    margin-top: -22px;
    margin-right: 10px;
    float: right;
	cursor:pointer;
}
.icon-question {
	position: relative;
    top: -2px;
	color:#005ea8;
	font-size:18px;
	cursor:help;     
}
.icon-warning {
	position:relative;
	margin-right:10px;
	color:#721c24;
	font-size:18px;
}
.color {
	color:#005ea8;
}
.ui-dialog {
	width:400px !important;
}
.gleitzonenrechner {
    width: 100%;
	padding: 10px;
    border: none;
    background-color: #fff;
}


/**
 * Form
 */
.fform {
	margin: 10px 0 0 0;
}
.fform fieldset {
	border:0 none;
	margin:0;
	padding:8px 0;
}
.fform div.label,
.fform div.pseudolabel {
    border: 0;
    float: left;
    width: 33.33333333%;
    text-align: left;
    font-weight: normal;
    margin: 0;
    padding: 5px 0 0 0;
	color:#646567;
}
.fform div.alignLabel {
    padding: 0;
}
.fform div.pseudolabel {
    padding: 0px 5px 0 0;
    font-weight: 600;
}


.doubleLabel { padding: 0 !important; }
.fform .alignInput { margin-top: 17px; }
.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-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.fform .addon {
    padding: 6px 12px;
    color: #777;
    text-align: center;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-left: none;
}
input, select {
    display: block;
    width: 100%;
    vertical-align:middle;
    padding: 6px 12px;
    font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
    font-size:16px;
    line-height: 1.42857;
    color: #646567;
    background-color: #fff;
    border: 1px solid #ccc;
}
input:focus, select:focus {
    outline: none;
    border: 1px solid #8a8a8a;
    background-color: #ffffff;
    box-shadow: 0 0 5px #cccccc;
    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
::-webkit-input-placeholder { /* Edge */
  color: #ababab;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ababab;
}
::placeholder {
  color: #ababab;
}
input.radio {
    width:20px;
	display:inline-block;
	box-shadow:none;
}
.radioLabel {
    margin: 0 10px 0 0;
	vertical-align: middle;
}
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-family:'Source Sans Pro', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
    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;
    transition: background 0.3s ease-out;
}
.btn-primary {
    color: #fff;
    background-color: #005ea8;
    border: 1px solid transparent;
	padding: 10px 20px;
	font-size: 14px;
    font-weight: normal;
	text-transform: uppercase;
}
.btn-primary:hover {
    background-color: #013864;
}
.btn-primary:active,
.btn-primary:focus {
	background-color: #013864;
}
.btn-print {
  margin-bottom: 30px;
}
input[readonly], select[readonly]
{
    cursor: not-allowed;
	background-color: #f2f2f2;
	color: graytext;
}
input[disabled], select[disabled]
{
	background-color: #f2f2f2;
	color: graytext;
}
select#Jahr,
select#Monat {
/*width:150px;*/
width: 49%;
float: left;	
}
select#Jahr {
float: right;	
}

/**
 * Result Table
 */
 #data-print { display:none; }
 #entgelt_result {
   background: transparent;
   padding: 10px;
}
.entgelt_result {
   padding:0;
   margin:0;
   border:none;
   border-collapse:collapse;
   margin: 15px 0 0 0;
}
.entgelt_result {
   width:99%;
}
.entgelt_result td,
.entgelt_result th {
   padding:5px;
}
.entgelt_result tr:nth-child(odd) td {
	background-color:#e7e7e7;
}      
.left { text-align:left; }
.right { 
	text-align:right;
	padding-left:50px; 
}
hr {
	color: #1e1e1e;
	border: none; 
	border-top: 1px solid #1e1e1e; 
	background-color: #FFFFFF; 
	height: 1px;
}
.hr {
	border-bottom: 1px solid #1e1e1e; 
}



/**
 * small Devices
 */

@media only screen and (max-width: 660px) {
	.fform {
	width:100%;
	}
	.fform div.input {
    width: 100%;
	}
	.fform div.label {
    float: none;
    width:100%;
    text-align: left;
    font-weight: normal;
    margin-bottom: 5px;
    padding-right: 0;
	}
	input, select, .input {
	width:100%;
	}
	
	.ui-dialog {
	width:auto !important;
	}
	
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding: 5px; 
	}
	
	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
	*/
	td:nth-of-type(1):before { content: ""; }
	td:nth-of-type(2):before { content: "Arbeitnehmer"; }
	td:nth-of-type(3):before { content: "Arbeitgeber"; }
	td:nth-of-type(4):before { content: "Gesamt"; }
	
	.hr { 
		border-bottom: 1px solid #eee;
	}
	.hide-xs { display:none; }
}

/**
 * print
 */

@media print {
	.gleitzonenrechner, #data-print { width: 100%; }
	#data-print { display:block; }
	#gehalt, .btn-print, #intro { display: none; }
	.gleitzonenrechner, h3 { padding:0; margin:0; border:0; }
	.entgelt_result td, .entgelt_result th { padding: 2px; }
	.content {
    box-shadow: none;
    border-top: 1px solid #ccc;
    padding: 0;
}
	input.berechnen {
        display: none;
    }

}