@charset "utf-8";

/* General Structure
-------------------------------------------------- */

/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
	font-family: 'deliciousbold';
	src: url('../fonts/delicious-bold-webfont.woff2') format('woff2'),
		url('../fonts/delicious-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* fira-sans-regular - latin */
/* FiraSans-Regular.ttf: Digitized data copyright 2012-2016, The Mozilla Foundation and Telefonica S.A. */
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/fira-sans-v16-latin-regular.woff2') format('woff2'),
		 url('../fonts/fira-sans-v16-latin-regular.woff') format('woff');
  }

  /* fira-sans-600 - latin */
  @font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/fira-sans-v16-latin-600.woff2') format('woff2'),
		 url('../fonts/fira-sans-v16-latin-600.woff') format('woff');
  }


* { margin: 0; padding: 0; font-family: 'Fira Sans', sans-serif; font-weight: normal; }

.updateversion updateproductid,
.updateversion updatebuildnumber,
.updateversion updatesetupurl,
.updateversion updateinfo,
.updateversion betaversion,
.updateversion betabuildnumber,
.updateversion betasetupurl,
.updateversion betainfo { display: none; }
.updateversion updateversion { display: inline; font-weight: 600; }

.betaversion updateproductid,
.betaversion updatebuildnumber,
.betaversion updatesetupurl,
.betaversion updateinfo,
.betaversion updateversion,
.betaversion betabuildnumber,
.betaversion betasetupurl,
.betaversion betainfo { display: none; }
.betaversion betaversion { display: inline; font-weight: 600; }


html,
body {
	font-size: 100%; height: 100%;
	letter-spacing: 0.1px; line-height: 125%;
	color: #3C3F42;
	background-color: #FFF;
}

strong { font-weight: 600; color: #000 }
.gray { color: #555759; }

.wrapper { width: 80%; max-width: 1024px; margin-left: auto; margin-right: auto; }

.content-wrap { padding: 0 0; min-height: 75%; }

.column { position: relative; padding: 40px 0; }

.col-1-2,
.col-1-3,
.col-1-4 { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; }


.col-1-1 { width: 100%; margin: 0 auto; }

.col-1-2 .column { width: 46%; margin-right: 8%; }

.col-1-3 .column { width: 30%; margin-right: 5%; }

.col-1-4 .column { width: 22%; margin-right: 4%; }

.col-1-2 > :nth-child(2n+2),
.col-1-3 > :nth-child(3n+3),
.col-1-4 > :nth-child(4n+4) { margin-right: 0 !important; }

.back-to {margin:20px 0; }

/* Logo */

.logo-grid {
	display: flex;
	justify-content:space-between;
	flex-wrap: wrap;
	margin: 30px 0px;
}

.logo-col { width: 22.25%; }

.logo-holder {
	margin-bottom: 30px;

	box-sizing: border-box;
	width: 100%;

	background-color: #F8FAFC;
	padding: 10px 15px;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.logo-img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 10px;

}


/* Headings
-------------------------------------------------- */

h1, h2, h3, h4 { line-height: 1; }

h1 {
	font-family: 'deliciousbold' !important;
	font-size: 2.4rem;
	font-weight: normal;
	font-style: normal;
	padding: 0 0 32px 0;
	text-align: center;
	color: #626466;
}

h2 {
	font-family: 'deliciousbold' !important;
	font-size: 1.8rem;
	font-weight: normal;
	font-style: normal;
	padding: 32px 0 32px 0;
	text-align: center;
	color: #626466;
}

h3 { font-size: 1.2rem; font-weight: 600; padding: 16px 0 16px 0; }

h4 { font-size: 1rem; font-weight: 600; padding: 8px 0 8px 0; }

/* Text
-------------------------------------------------- */

a { color: #E20B1B; text-decoration: none; }

a:hover { color: #B90000; text-decoration: none; }
a:hover strong { color: #B90000; }

p { padding-bottom: 8px; }

p.textblock { text-align: justify; }

ul { margin: 16px 0; }
li { list-style-type: none; margin: 0 0 16px 0; padding: 8px; background-color: #F0F2F5; border-left: thick solid #E20B1B }

dt {
	padding-bottom: 8px;
	font-style: italic;
}
dd {
	margin: 0 24px;
	padding-bottom: 24px;
}

b { font-weight: bold; }

.disclaimer { font-size: 0.8rem; }

/* Input fields
-------------------------------------------------- */

input {
	font-size: medium;
	color: #3F7AB5;
	line-height: 2.5;
	background-color: #f0f2f5;
	border: none;
	padding-left: 10px;
	vertical-align: top;
}

input:hover {
	background-color: #f0f2f5;
}

input:focus-visible {
	background-color: #f0f2f5;
	border-width: 1px;
	border-color: #3F7AB5;
	border-style: solid;
	color: #f0f2f5;
}

input#code {
	width: auto;
	padding: 0px;
	margin-right: 10px;
	padding-left: 10px;
}

/* Buttons
-------------------------------------------------- */

.expandHead { background-color: #3F7AB5; padding: 10px 15px; color: #FFFFFF; display: block; text-align: center; margin-bottom: 15px; }

button { background-color: #3F7AB5; padding: 10px 15px; color: #FFF; border: none; text-align: center; }

button:hover { background-color: #2F669E; }

.buttonholder { margin: 32px 0 32px 0; text-align: center; }

.morebuttonholder { margin: 8px 0 32px 0; text-align: right; }

.button { background-color: #E20B1B; padding: 10px 15px; color: #FFF; border: none; text-decoration: none; text-align: center; border-radius: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

.button:hover { background-color: #B90000; color: #FFF; text-decoration: none; }

.buttonghost { background-color: #0004; padding: 10px 15px; color: #FFF; border-style: solid; border-width: 1px; border-color: #FFF; text-decoration: none; text-align: center; border-radius: 4px; }

.buttonghost:hover { background-color: #2F669E; color: #FFF; text-decoration: none; }

.badge:hover { opacity: 0.8; }

/* Header -------------------------------------------------- */

header { background-color: #626466; color: #FFF; height: 64px; }
header .wrapper { height: 64px; }
header * { color: #FFF; }
header .subsembly-header-img { width: auto; height: 32px; padding: 16px 0; margin-right: 32px; }
header .banksapi-header-img { width: auto; height: 40px; padding: 14px 0 10px 0; }
header h1 { text-align: left; vertical-align: middle; display: inline; }

.newheader {
	font-family: 'deliciousbold' !important;
	font-size: 2.4rem;
	font-weight: normal;
	font-style: normal;
	display: flex;
	justify-content: center;
	padding-top: 20px;
}

/* Banner -------------------------------------------------- */

.banner { overflow: hidden; height: 360px; position: relative; }

#fintsconnect {
	background-color: #E1E3E5;
	background-image: url('../img/banner-fintsconnect.jpg');
	background-size: 100%;
	background-position: 50% 30%;
}

.banner .banner-content { margin-top: 40px; }

.banner h1 { width: 400px; text-align: left; padding: 4px; margin-bottom: 16px; color: #FFF; background: #00000066; }
.banner p { width: 400px; text-align: left; padding: 4px; font-size: 1.4rem; line-height: 125%; color: #FFF; background: #00000066; }

/* Footer
-------------------------------------------------- */

footer { background-color: #D0D5DA; padding: 0 20px; font-size: 0.8rem; text-align: center; }

/* Expandable Boxes
-------------------------------------------------- */

.expandHead { max-width:100% !important; }

.expandHead h1,
.expandHead h2,
.expandHead h3 { text-align: center; color: #FFF; font-size: 1rem; padding: 0 !important; margin: 0; }

.expandContent { padding: 20px 0; }

.expandHead:hover { cursor: pointer; }

/* Images
-------------------------------------------------- */

.app-icon {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0 auto 20px auto;
	border: none;
	border-radius: 24px;
	box-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}

.app-icon-medium {
	display: block;
	width: 128px;
	height: 128px;
	margin: 0 auto;
	border: none;
	border-radius: 12px;
	box-shadow: 0 1px 16px rgba(0, 0, 0, .3);
}

.app-icon-tiny {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.img-medium, .img-large {
	padding-bottom: 10px;
	display: block;
	margin: 0 auto;
}

.img-newmedium, .img-newlarge {
	display: block;
	margin: 0 auto;
}

.img-main-icon {
	display: block;
	width: 128px;
}

.img-newmedium { width: 128px; }

.img-medium { width: 105px;  }

.img-newlarge { width: 192px; }

.img-large { width: 210px; }

.img-full { width: 80%; padding-bottom: 20px; display:block; margin: 0 auto; }


/* Lightbox
-------------------------------------------------- */

.wrapper-gallery-item .gallery-item { width: 300px; height:200px; overflow: hidden; border: 1px solid #ABABAB; border-radius:3px; margin-right:1%; margin-bottom:10px; line-height:0; }

.wrapper-gallery-item > .gallery-item:nth-child(3n+3) { margin-right: 0 !important; }

.wrapper-gallery-item { display:flex; flex-wrap: wrap; }

.wrapper-gallery-item .gallery-item a { overflow: hidden; }

.wrapper-gallery-item .gallery-item a img { align-self: center; width:100%; }

.lightbox { /** Hide the lightbox */
display:none; opacity:0; /** Apply basic lightbox styling */
position: fixed; z-index: 9999; width: 100%; min-height: 100%; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; background-color:rgba(0,0,0,0.8); }

.lightbox * { color:#FFF; text-align:center;}

.lightbox:target { /** Show lightbox when it is target */
display:block; opacity: 1; top: 0; left:0; }

.lightbox .lightbox-box { width: -webkit-min-content; width: -moz-min-content; width:50%; margin: 2% auto; padding: 10px 20px 10px 20px; position:relative; }

.lightbox .title { margin: 0; padding: 0 0 10px 0px; border-bottom: 1px #ccc solid; font-size: 22px; }

.lightbox .lightbox-content { display: block; width:90%; margin:0 auto;}

.lightbox .close { display: block; text-decoration: none; font-size: 22px; color: #858585; position: absolute; right:0; }

.clear { display: block; clear: both; }

.lightbox .lightbox-content .desc { z-index: 99; bottom: 0; position: absolute; padding: 10px; margin: 0 0 4px 0; background: rgba(0,0,0,0.8); color: #fff; font-size: 17px; opacity: 0; transition: opacity ease-in-out 0.5s; }

.lightbox .lightbox-content:hover .desc { opacity: 1; }

.lightbox .next,
.lightbox .prev { position:absolute; bottom:50%; }

.lightbox .next { right:0; }
.lightbox .prev { left:0; }

.lightbox img { max-width:100%; max-height:80vh; margin:20px 0; }


/* Tables
-------------------------------------------------- */

.table-wrap { overflow: hidden; width: 100%; }

table { margin: 20px 0; border-collapse: collapse; width: 100%; }

table * { vertical-align: top; }

table h1,
table h2,
table h3,
table h4 { margin-top: 0; padding-top: 0; }

th { font-weight:600; }

td,
th { padding: 10px 20px; text-align: left; }

.kk-ki td {
	padding: 0px 20px;
	text-align: left;
	min-width: -webkit-fill-available;
	width: 33%;
}

tr td:first-child,
tr th:first-child { /* padding-left: 0; */ }

tr td:last-child,
tr th:last-child { /* padding-right: 0; */ }

td a:first-child .button { margin-top: 0; }

.banken { border-collapse: collapse; font-size: 0.8rem; }

.banken tr { border-top: 1px solid #D6D8DA; }

.banken td,
.banken th { padding: 2px 20px; }

table .button { left:auto; transform:translateX(0); float:right; }

.table-scroll {
	height: 500px;
	background-color: #FAFCFD;
	overflow: scroll;
}
.table-scroll table th {
	position: sticky;
	top: 0px;
}
.creditinstitute #table-column1 {
	width: 60%;
}
.creditinstitute #table-column2 {
	width: 40%;
}
.creditinstitute th {
	background-color: #D0D5DA;
	color: #3C3F42;
}
.creditinstitute tr:nth-child(2n) {
	background-color: #E1E3E5;
	border-width: initial;
	border-style: none;
	border-color: initial;
	border-image: initial;
}

/* Issue List
-------------------------------------------------- */

.current-issues { border: none; }
.issue-on { border-left: thick solid #cb493d; background-color: #cb493d1a;}
.issue-mid { border-left: thick solid #ffcc00; background-color: #ffcc001a;}
.issue-off { border-left: thick solid #60994c; background-color: #60994c1a;}