/* Actions */

.dropdown-trigger{
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.dropdown-menu{
	display: none;
	position: absolute;
	background-color: #FFF;
	width: 160px;
	box-shadow: 0 2px 6px #CCC;
	border: 1px solid #CCC;
	top: 100%;
	z-index: 1000;
	left: 0;
	right: auto;
	padding: 10px 0;
}

.dropdown-menu.dropdown-right{
	left: auto;
	right: 0;
}

.dropdown-trigger:hover > .dropdown-menu{
	display: block;
	animation: fadeIn 0.2s;
	-webkit-animation: fadeIn 0.2s;
}

.dropdown-menu ul, .dropdown-menu li{
	padding: 0;
	margin: 0;
}

.dropdown-menu li{
	list-style: none;
	display: block;
}

.dropdown-menu a{
	color: #444;
	display: block;
	padding: 2px 15px;
	text-align: left;
	font-size: 0.9em;
}

.dropdown-menu a:hover{
	background-color: #F6F6F6;
	text-decoration: none;
}

.dropdown-menu a .fa{
	margin-right: 10px;
}

.notification-list .unread{
	font-weight: bold;
}

.notification-list .smaller{
	font-size: smaller;
}

.button-small{
	margin: 7px 0 7px;
	padding: 0.5em 1.2em;
}

.list .list-element, .messages .message{
	border-bottom: 1px solid #DDD;
	padding-top: 20px;
	padding-bottom: 20px;
}

.list .list-element:first-child, .messages .message:first-child{
	padding-top: 0;
}

.list .list-element:last-child, .messages .message:last-child{
	border-bottom: none;
	padding-bottom: 0;
}

.message-text {
	white-space: pre-line;
}

.toggle-area, .toggle-trigger:checked ~ .toggle-hide{
	display: none;
}

.toggle-trigger:checked ~ .toggle-show { 
	display: block;
}

.toggle-show{
	display: none;
}

.toggle-trigger:checked ~ .toggle-area{
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

.toggle-hide{
	display: block;
}

.tooltip-container{
	position: relative;
}

.tooltip-trigger{
	cursor: pointer;
	display: inline-block;
}

.tooltip-trigger-icon{
	width: 20px;
	font-weight: normal;
}

.tooltip-trigger:hover ~ .tooltip-area{
	display: block;
}

.tooltip-area{
	display: none;
	background-color:#2C343A;
	color: #FFF;
	border-radius: 4px;
	padding: 5px 10px;
	opacity: 0.8;
	position: absolute;
	z-index: 50;
	width: 250px;
	top: 100%;
	left: 1.5em;
	font-weight: normal;
	text-transform: none;
	text-align: left;
}

.tooltip-area p:last-child{
	margin-bottom: 0;
}

.tooltip-area-right{
	left: auto;
	right: 0.5em;
}

.tooltip-trigger-icon::after{
	content: "\f129";
	font-family: FontAwesome;
	opacity: 0.7;
	margin-left: 7px;
}

.language-selection-icon {
	font-size: 18px;
	font-weight: normal;
}

.language-selection-icon::after {
	content: "\f1ab";
	font-family: FontAwesome;
	margin-left: 7px;
}

.tooltip-mobile-trigger{
	display: none;
	text-decoration: none;
	color: inherit;
}

.tooltip-close{
	float: right;
	display: none;
	padding: 4px 0 4px 4px;
}

.tooltip-close a{
	color: #FFF;
}

.fadeIn{
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	
	100%{
		opacity: 1;
	}
}

.tabs .tab{
	display: none;
}

.tabs .tab-trigger:nth-of-type(1):checked ~ .content .tab:nth-child(1){
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

.tabs .tab-trigger:nth-of-type(2):checked ~ .content .tab:nth-child(2){
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

.tabs .tab-trigger:nth-of-type(3):checked ~ .content .tab:nth-child(3){
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

.tabs .tab-trigger:nth-of-type(4):checked ~ .content .tab:nth-child(4){
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

.tabs .tab-trigger:nth-of-type(5):checked ~ .content .tab:nth-child(5){
	display: block;
	animation: fadeIn 0.5s;
	-webkit-animation: fadeIn 0.5s;
}

.tabs .tab-trigger + label::before{
	display:none!important;
}

.card > .tabs{
	margin-top: -30px;
}

.card > .tabs > .content{
	margin: 0 -30px 0;
	padding: 30px 30px 0;
	border-top: 1px solid #EDEDED;
}

.card > .tabs .tab-trigger:first-of-type + label{
	margin-left: -30px;
	border-radius: 5px 0 0;
}

.card > .tabs .tab-trigger + label{
	padding: 15px;
	display: inline-block;
}

.card > .tabs .tab-trigger + label:last-of-type{
	border-right: none;
}

.card > .tabs .tab-trigger:hover + label{
	background-color: #c9d6e1;
	color: #FFF;
}
.card > .tabs .tab-trigger:checked + label{
	background-color: #94AEC4;
	color: #FFF;
}
.submit-hidden{
	width: 0px;
	height: 0px;
	position: absolute;
	top: -999999px;
	left: -999999px;
}

.qrcode {
	/* Stelle sicher, dass der QR-Code vollständig angezeigt werden kann */
	max-width: 100vmin;
	/* Skalierung ohne Anti-Aliasing */
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: pixelated;
}

/*
Die Skalierung der QR-Codes erfolgt unter Berücksichtigung von zwei Kriterien:

 a) Die Mindestgröße der einzelnen Module beträgt 4x4 Pixel (bei 96 DPI).
    Dadurch werden Skalierungsfehler vermieden und das Scannen vom Bildschirm vereinfacht.
 b) Gemäß chipTAN-Spezifikation beträgt die Mindestgröße (exkl. Ruhezone) 35mm.
*/
.qrcode_version1 { width: 48.333mm; height: 48.333mm; }
.qrcode_version2 { width: 46.200mm; height: 46.200mm; }
.qrcode_version3 { width: 44.655mm; height: 44.655mm; }
.qrcode_version4 { width: 43.485mm; height: 43.485mm; }
.qrcode_version5 { width: 47.625mm; height: 47.625mm; }
.qrcode_version6 { width: 51.858mm; height: 51.858mm; }
.qrcode_version7 { width: 56.092mm; height: 56.092mm; }
.qrcode_version8 { width: 60.325mm; height: 60.325mm; }
.qrcode_version9 { width: 64.558mm; height: 64.558mm; }
.qrcode_version10 { width: 68.792mm; height: 68.792mm; }

.store_badge {
    /*
    Apple Guidelines:
     - Minimum Badge height is 40px. Select a size that is clearly legible but not dominant in the layout.
     - Minimum clear space is equal to one-quarter of the height of the badge.
    Google Guidelines:
     - The badge must be large enough that all of the text is legible.
     - There must be clear space surrounding the badge equal to one-quarter the height of the badge.
     - The Google Play badge should be the same size of larger than other application store badges.

    Die PNG-Grafiken sind mit einer Höhe von 168px gerendert und können auf 54px skaliert werden,
    das ergibt einen guten Skalierungsfaktor, der Text ist lesbar und die Guidelines sind erfüllt.
    */
    box-sizing: content-box;
    height: 54px;
    width: auto;
    padding: 10.5px;
}

/** Click suckerfish nav **/

.kg_nav .kg_radio{
	position: absolute;
	left: -20000px;
}

.kg_nav .kg_clearlabel{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

.kg_nav .kg_label{
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;	
	z-index: 11;
}

.kg_nav .kg_label ~ ul.level_2{
	position: absolute; 
	opacity: 0;
	top: 100%;
	left: 0;
	visibility: hidden;
	z-index: -1;
}

.kg_nav .kg_toplabel{
	opacity: 0;
	display: block;
}

/**
  Show menu (ul) when radio button is checked or has focus.
  The css general sibling combinator (~) selects all 'ul' elements with the class 'level_2' that are siblings of the '.kg_radio' element and come after it in the DOM hierarchy.
  So, this rule applies to a 'ul' with class 'level_2' that is a sibling of a radio input '.kg_radio within '.kg_nav', but only when the radio is checked or has focus.
 */
.kg_nav .kg_radio:checked ~ ul.level_2,
.kg_nav ul.level_1 > li:focus ul.level_2,
.kg_nav ul.level_1 > li:focus-within ul.level_2 {
	top: 100%;	
	z-index: 11;				
	visibility: visible;
	opacity: 1;
}

.kg_nav .kg_radio:checked ~ .kg_clearlabel,
.kg_nav .kg_radio:focus ~ .kg_clearlabel,
.kg_nav .kg_radio:focus-within ~ .kg_clearlabel {
	display: block;
}

.kg_nav ul.level_1 > li{
	display: inline-block;
	position: relative;
}

/** Progress bar **/

.progress{
    background-color: #DDD;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.progress-bar{
    background-color: #53cf29;
    border-radius: 4px 0 0 4px;
    text-align: center;
    color: #FFF;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.progress-bar-w33{
    width: 33.3%;
}

.progress-bar-w66{
    width: 66.6%;
}

.progress-bar-w100{
    width: 100%;
    border-radius: 4px;
}

/** IBAN Component **/

.iban .segment{
    margin-right: .2em;
}

.iban .segment:last-child{
    margin-right: 0;
}