/*
	This CSS is an extension to the standard custom.css for Finnova.
	This file contains special directives only used in the login application
	and can be modified to change logos etc...
*/

/* Default logo area in navigation block */
#log {
	width: 984px;
	height: 97px;
}
/* Default logo image. */
.logo {
	background: transparent url(https://swisscreditbank.ch/wp-content/uploads/swiss_logo.png) no-repeat;
}

/*
	Language dependent logos. If needed, configure/add the supported languages
	with their own logos here. The CSS class is always "logo-[language]".
	Examples:
.logo-de {
	background: transparent url(/images/logo_bank.gif) no-repeat;
}
.logo-en {
	background: transparent url(../images/logo_bank.gif) no-repeat;
}
*/



body, html {
  background-color: white;
  font-family: 'Open Sans' !important;
  font-size: 16px;
  color: #4c575a !important;
  line-height: 22px;
  height: 100%;
  margin: 0; 
}



/* Aus samplestyle.css */

/* no borders around images in links */
a images {
	border: 0;
}

/* links */
a {
	text-decoration: underline;
	color: #4c575a !important;
}

/* Style of links when mouse over */
a:hover {
	color: #87888a !important;
	text-decoration: none;
}

#footer a {
        color: #4c575a !important;
        text-decoration: underline;
}

#footer a:hover {
        color: #87888a !important;
        text-decoration: underline;
}


/* h1 headers.  */
h1 {
  font-family: 'Open Sans';
  font-weight: 300;
  letter-spacing: 0px;
  font-size: 24px;
  color: #4c575a;
  line-height: 37px;
  margin-bottom: 38px;
}
h2 {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 24px;
  color: #4c575a;
  line-height: 32px;
  margin-top: 20px;
  margin-bottom: 10px;
}

h3 {
  font-family: 'Open Sans';
  font-weight: normal;
  font-size: 18px;
  color: #4c575a;
  line-height: 30px;
  margin-top: 10px;
  margin-bottom: 18px;
}

ul {
	margin: 0;
}

li {
	line-height: 14pt;
}


/* margins for paragraphs */
p {
	padding-top: 5px;
	margin: 0;
}

/* small left margin for content in popups */
#content-popup {
	margin-left: 35px;
}

/**
 * STYLES OF CONTENT BOX
 */


#sbs-upper {
  width: 750px;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 15px;
}

#sbs-lower {
  width: 750px;
  border-top: 1px solid #cccccc;
  padding-top: 30px;
}

#sbs-lower images {
	display: inline-block;
	margin-top: 16px;
}

#sbs-lowerleft {
  display: inline-block;
  border-right: 1px solid #CCCCCC;
  padding-right: 20px;
  width: 350px;
  vertical-align: top;
}
#sbs-lowerright {
  display: inline-block;
  padding-left: 20px;
  width: 350px;
  vertical-align: top;
}

#content {
	background-color: #fff;
	width: 750px;
	margin: auto auto auto auto !important;
	padding: 10px 50px 15px 50px;
	background: #fff;
}

#content.full-width {
	width: 740px;
	padding-left: 5px;
	padding-right: 5px;
}


#content > table {
	border-spacing: 0;
	padding: 0 0 40px;
	margin: -10px;
	width: 442px;
}


/* This hack hides <br> because we can't style <br> to have the correct background color. */
#content > br {
	display: none;
}

#content hr {
	margin: 0;
}

#text {
	padding-top: 10px;
}

#uppermessage > div,
.uppermessage {
	border-width: 1px;
	border-style: solid;
	padding: 8px;
	border-radius: 4px;
	margin-top: 10px;
}

#uppermessage > .WARNING {
	background-color: #ffe5d3;
	border-color: #fecba7;
}

#uppermessage > .INFO {
	background-color: #cdd7e8;
	border-color: #9aaedo;
}

#mainform {
	padding-top: 20px;
}

#maintenancemessage {
	background: white;
	padding-bottom:15px;
	color: #4c575a;
}

#lowermessage {
	margin-top: 35px;
}

.vbox {
	margin-bottom: 20px;
	padding: 10px 10px 0 10px;
	border: 1px solid #CCC;
	overflow: hidden;
}

/* Align children vertically */
.vbox > * {
	width: 100%;
	margin-bottom: 10px;
	box-sizing: border-box;
}

/* Inputs */

form input, form select, form input[type="checkbox"] {
	border: 1px solid #CCC;
	background-color: white;
	font-size: 12px;
	line-height: 14px;
	padding: 6px 8px;
	color: #4c575a;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

form input[name="EXTRA_REGISTER"],
.cronto-device-order > input {
	margin-top: -4px;
	margin-right: 10px;
}

form input:focus, from select:focus {
	border-color: #66afe9;
	outline: 0 none;
}

form input[disabled="disabled"], #inputline > input[disabled="disabled"] {
	border: 1px solid #CCC;
	background-color: #FCFCFC;
}

/* Form Layout */

#inputline {
	position: relative;
	width: 475px;
}

#inputline span.not-editable-value {
	display: block;
	width: 190px;
	float: right;
}

#inputline > input, #inputline > select, #inputline > input[type="checkbox"] {
	width: 200px;
	overflow: hidden;
	float: right;
}

#inputline > input[type="checkbox"] {
	width: auto;
}

#inputline > textarea {
	color: #333;
	background-color: #fafafa;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1) inset;
	border-radius: 2px;
	border: 1px solid #ccc;
	outline: 0;
	font-size: .8125rem;
	padding: .78125rem .8rem;
	margin-bottom: 0;
	margin-top: 0;
}

#inputline.inputline-wide {
	width:100%;
	float:left;
	margin-top: 5px;
}

#inputline.inputline-wide > input {
	float:none;
	width:100%;
}

#inputline.compact {
	line-height: 20px;
}

form input[type="button"], input[type="submit"], #submitbutton_left > input[type="submit"] {
 font-size: .8125rem;
 border-radius: 3px;
 border: 0;
 outline: 0;
 font-family: 'Open Sans';
 line-height: 1.125rem;
 padding: 8px 18px;
 margin: 0;
 white-space: nowrap;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background-clip: padding-box;
 color: #fff;
 background-color: #7f8789;
 width: auto;
 height: auto;
}


form input[type="button"]:hover, input[type="submit"]:hover, #submitbutton_left > input[type="submit"]:hover {
	background-color: #87888a;
	background-position: 0 -15px;
}

/* allow specific style elements for each label-inputfield line */
#inputline, #displayline {
	padding-bottom: 10px;
	line-height: 28px;
	vertical-align: middle;
}

#displayline-name {
	display: inline;
}

#displayline-value {
	float: right;
}

/* links in the login form */
#mainform a {
	text-align: right;
	text-decoration: none;
	font-size: 9px;
	color: rgb(200, 200, 200);
	display: block;
	margin-top: 5px;
}

/* Style of links in formlink when mouse over */
#mainform a:hover {
	color: rgb(218, 2, 26);
}

/* Style for the box containing all the form buttons */
#submitbuttons {
	overflow: hidden;
}

form #submitbuttons {
	padding-top: 15px;
	width: 460px;
}

/* Style for cryptogram image */
.images-cryptogram {
	display: block;
	margin: 0 0 15px 270px;
}

/* Style for cryptogram code input */
.crypto-code-input {
	margin: 0 0 15px;
}
.crypto-code-input label,
.crypto-device-name label,
.crypto-activate label {
	display: inline-block;
	width: 280px;
}
.crypto-code-input input,
.crypto-device-name input {
	width: 180px;
}


.crypto-registration,
.crypto-extra-registration {
	margin: 30px 0 0;
}

.crypto-registration input,
.crypto-extra-registration input {
	margin-left: 100px;
}

.crypto-reset-link {
	margin: 20px 0 0;
}
.crypto-reset-link a {
	display: inline-block !important;
	font-size: 1em !important;
	margin-left: 24px;
	text-align: left !important;
}

.crypto-reset-link span {
	display: inline-block;
	min-width: 256px;
}

.crypto-device-name {
	margin: 35px 0 0;
}

.crypto-activate {
	margin: 20px 0;
	padding: 0 0 0 283px;
}

/* Style for the box containing the left form submit buttons */
#submitbutton_left {
	float: left;
}

/* Style for the box containing the right form submit buttons */
#submitbutton {
	float: left;
	margin-left: 275px;
}

form #submitbutton:first-child {
	margin-right: 50px;
}

#submitbutton.cronto-challenge {
	margin-left: 286px;
}

/**
 * HEADER STYLES
 */

/* style of header block */
#header {
	padding-top: 36px;
	width: 100%;
	text-align: right;
	background-color: #f3f3f3;
	border-right: 15px solid #f3f3f3;
	margin: -8px auto 0 -7.6px;
}


/* Style of links in heaeder */
#header a {
	font-size: 12px;
	text-decoration: none;
	color: #4c575a;
	padding-left: 5px;
}

/* Style of links in header when mouse over */
#header a:hover {
	color: #204a77;
}

/**
 * FOOTER STYLES
 */
#footer {
	margin: 66px auto 20px auto;
	background-color: #f3f3f3;
	width: 651px;
	padding: 15px 50px 33px 50px;
	font-size: 16px;
	color: #4c575a;
}


/**
 * STYLES OF NAVIGATION BLOCK
 */
#navigation {
	width: 750px;
  margin: 65px auto auto auto;
}

/* makes images block-elements */
#navigation a {
	font-size: 12px;
	text-decoration: none;
	color: #4c575a;
}

/* Navigation link style */
#navitem a, #navitemactive a{
	text-decoration: none;
}

/* Navigation link style when mouse over or active navigation item */
#navitem a:hover, #navitemactive a {
	color: #4c575a;
}

/* Page title and Language Switcher Links */
.title-container:after {
  content: "";
  display: block;
  clear: both;
  margin-top:-20vh;
}
h1.page-title {
	float: left;
	font-size: 34px;
	line-height: 45px;
	max-width: 610px;
}
.lang-switch {
	float: right;
	margin: 35px 0 0;
}
.lang-switch a {
	display: inline-block;
	padding-right: 15px;
}
.lang-switch a:first-child {
	margin-right: 0px;
}

/* User Self Registration */

#inputline images {
	float: right;
	padding: 0;
	margin-right: -35px;
}

#inputline images + input {
	float: right;
	margin-left: 500px;
}

#inputline images + input + .fielderror {
	margin-right: 50px;
}

 /* red warning/error message next to the input fields */
.fielderror {
	color: #E6181A;
	float: right;
	line-height: 12pt;
    margin: 5px 5px 0 0;
    text-align: right;
}

td {
	font-family: 'Open Sans';
  color: #4c575a;
	line-height: normal;
	font-size: 12pt;
	margin: 0;
	padding: 0 10px;
	text-align: left;
}

th {
	font-size: 14pt;
	text-align: left;
	padding: 10px 10px 0px 10px;
}

#section-header {
	font-size: 16px;
	color: #5a5751;
	padding-bottom: 10px;
	padding-top: 15px;
}

/* Portal */

#content > .top-links {
	background: transparent;
	border: none;
	width: auto;
	position: absolute;
	right: 125px;
	line-height: 65px;
	padding: 0;
}

#content .top-links * {
	color: white !important;
}

/* Login From */

form#mainform[name="LOGINFORM"] {
	padding: 50px 100px 40px;
	width: 350px;
}

form#mainform[name="LOGINFORM"] #submitbuttons {
	padding-top: 5px;
}

.portalApplicationGroupDesc {
	padding-bottom: 10px;
	margin-top: -10px;
}


/* Ende samplestyle.css */



#image-background {
	position: relative;    
	width: 100vw;           
	height: 100vh;  
	background-image: url(https://swisscreditbank.ch/wp-content/uploads/aus-1920x-650.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	z-index: -1;
}


#logo {
  background-image: url(https://swisscreditbank.ch/wp-content/uploads/swiss_logo.png);
  background-repeat: no-repeat;
  width: 100%;
  padding-bottom: 120px;
}

#sbs-lower strong {
  font-family: 'Open Sans';
}

#footer b {
  font-family: 'Open Sans';
}

/* Vertrag entsperren (cronto-reset) */

.button-row {
	margin: 42px 0 48px;
}
.cronto-sign-reset-device .btn_oldletter,
.cronto-sign-reset-device .btn_order {
	float: right;
	margin: 18px 0;
}


/* CSS Helper Classes */
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}

.no-margin-left {
	padding-left: 0 !important;
}

.no-margin-bottom {
	margin-bottom: 0 !important;
}

.margin-top-standard {
	margin-top: 18px;
}

.float-right {
	float: right;
}

td.vertical-middle {
	vertical-align: middle;
}

/* Cronto device registration */
.cronto-registration .button-row {
	padding-left: 143px;
}


/* Cronto migration page */
.credentialmigrationform p {
	padding: 0;
  margin: 5px 0 27px;
}
.cronto-migration-options {
	margin: 28px 0;
}

.cronto-device-order {
	margin-top: 28px;
}

.cronto-list {
	margin: 0;
	padding: 0 20px;
}
.cronto-list > li {
	margin: 0 0 18px;
	padding: 0;
}

.cronto-list > li:last-child {
	margin-bottom: 0;
}

.cronto-list+br {
	display: none;
}


/* Password change page */
.form-password-change span {
	 display: inline-block;
	 white-space: nowrap;
}
.password-change-label {
	width: 160px;
}
.btn-password-change {
	margin-left: 181px !important;
}

.message-browser-cache p > b {
	display: inline-block;
	margin-top: 28px;
}

[action="credSelfRegMtanIak1"] .vertical-middle {
	width: 200px;
}

.button-row-selfunlock input:not(:first-child) {
	float: right;
}

.button-row-selfunlock input:first-child {
	float: left;
}

.button-row-selfunlock input[type="submit"]:not(:first-child) {
	margin-right: 0;
	margin-left: 48px;
}