@font-face {
	font-family: "PkoBpRegular";
	font-style: normal;
	font-weight: normal;
	src: url("../../fonts/OTF/PKOBankPolski-Regular.otf") format("opentype"),
		url("../../fonts/TTF/PKOBankPolski-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "PkoBpRegular";
	font-style: italic;
	font-weight: normal;
	src: url("../../fonts/OTF/PKOBankPolski-RegularItalic.otf") format("opentype"),
	url("../../fonts/TTF/PKOBankPolski-RegularItalic.ttf") format("truetype");
}

@font-face {
	font-family: "PkoBpRegular";
	font-style: normal;
	font-weight: bold;
	src: url("../../fonts/OTF/PKOBankPolski-Bold.otf") format("opentype"),
		url("../../fonts/TTF/PKOBankPolski-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "PkoBpBlack";
	font-style: normal;
	font-weight: normal;
	src: url("../../fonts/OTF/PKOBankPolski-Black.otf") format("opentype"),
		url("../../fonts/TTF/PKOBankPolski-Black.ttf") format("truetype");
}

@font-face {
	font-family: "PkoBpLight";
	font-style: normal;
	font-weight: normal;
	src: url("../../fonts/OTF/PKOBankPolski-Light.otf") format("opentype"),
		url("../../fonts/TTF/PKOBankPolski-Light.ttf") format("truetype");
}

/* Paleta kolorów PKO */
:root {
	--gray_10: #F9F9F9;
	--gray_20: #F2F2F2;
	--gray_90: #E5E5E5;
	--gray_100: #D5D5D5;
	--gray_110: #B7B7B7;
	--gray_120: #939393;
	--gray_140: #636363;

	--red-100: #CA171D;

	--green_100: #2E7D49;

	--blue_50: #006EF5;
	--blue_70: #004C9A;
	--blue_80: #004495;
	--blue_100: #003574;
	--blue_150: #001E4B;

	--black_100: #000000;
	--white_100: #FFFFFF;
}

/* Główne elementy strony. */
#header {
	float:left;
	width: 100%;
	height: 120px;
	background-color: #ecf9fe; /*#e8e8e8; */
}

#header .container {
	height: inherit;
	background-color: inherit;
}

* {
	font-family: PkoBpRegular,Tahoma,Helvetica,Geneva !important;
}

.welcome {
	display: block;
	font-size: 32px;
	color: var(--blue_100);
	font-weight: normal;/*bold;  */
	padding-left: 288px;
	margin-top: -83px;
}

#userInfo {
	padding-top: 20px;
	padding-bottom: 10px;
}

#content {
}

#footer {
	padding-top: 20px;
	padding-bottom: 10px;
	text-align: center;
}

/* Obrazki w nagłówku. */

img.logo {
	width: 120px;
	height: 120px;
	border: 0;
}

/* Ikony fa-awesome */
.fa {
   font-family: 'FontAwesome' !important;
}

/* Suppressing ajax loading indicator icon */
html .ui-state-loading.ui-button-text-only .ui-icon-loading + .ui-button-text {
    opacity: inherit;
}
html .ui-state-loading .ui-icon-loading {
    display: none;
}
html .ui-state-loading .ui-icon:not(.ui-icon-loading) {
    display: inherit;
}

/* Linki z lewej na środku. */

#linksLeftMiddle a:link, #linksLeftMiddle a:visited {
	text-decoration: none;
	color: var(--blue_100);
	padding: 3px 3px;
}

#linksLeftMiddle a:hover {
	text-decoration: none;
	color: var(--blue_150);
	padding: 3px 3px;
}

/* Informacje o zalogowanym użytkowniku. */

#userInfo {
	text-align: right;
}

/* Content. */

#content {
	min-height: 400px;
}

/* Przyciski. */

input[type=submit] {
	font-weight: bold;
	color: #0f497d;
}

/* Komunikaty o błędach walidacji formaularza. */

.error {
	vertical-align: middle;
	color: var(--red-100);
}

.menuError {
	position: relative;
	top: 4px;
}
.errorBlock {
	display: block;
	margin: 0;
	color: var(--red-100);
}

/* Pomocnicze/testowe. */

.box {
	border: 1px dotted #505050;
	background: #e5eCf9;
}

/*label {
	padding: 12px 0px;
}*/

.textright {
	text-align: right;
}

.textcenter {
	text-align: center;
}

#precontent h2 {
	background: none repeat scroll 0 0 #CCD7ED;
	border-bottom: 2px solid #F28411;
	border-top: 2px solid #F28411;
	padding: 4px 16px;
}

.dateTimeField input {
 	width: inherit;
}

#danePodstawowe\:DataWazDok_input{
	width: 140px;
}

#danePodstawowe\:bezTermDok {
	position: relative;
	left: -110px;
}

.formlabel-base {
	position: relative;
	overflow: hidden;
	display: inline-block;
	margin: 0 10px 0 0;
}

.formfield-base {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.formlabel-120 {
	width:120px;
}

.formlabel-170 {
	width:170px;
}

.formlabel-230 {
	width:230px;
}

.formlabel-250 {
	width:250px;
}

.formlabel {
	width:170px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: 6px 10px 0 0;
}

.notopmarginformlabel {
	width:170px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: -6px 10px 0 0;
}

.notopmarginformlabel-2 {
	width:250px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: -6px 10px 0 0;
}

.noerrorlabel {
	margin: 2px 0 4px 180px ;
}

.formlabelXXL {
	width:230px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: 6px 10px 0 0;
}

.formlabelLogin {
	width:400px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: 6px 10px 0 0;
}

.formlabelXXLNoTopM {
	width:230px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: -6px 10px 0 0;
}

.noerrorlabelXXL {
	margin: 2px 0 4px 240px ;
}

.formlabelL {
	width:170px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: 6px 10px 0 0;
}

.noerrorlabelL {
	margin: 2px 0 4px 180px ;
}

form.formWithLabelsXXXL label, .formlabelXXXL {
	width:260px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: 6px 10px 0 0;
}

.formlabelXXXLNoTopM {
	width:260px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: -6px 10px 0 0;
}

form.formWithLabelsXXXL span, .noerrorlabelXXXL {
	display: block;
	margin: 2px 0 4px 270px ;
}

.formlabelXS {
	width:110px;
	position: relative;
	top: 6px;
	overflow: hidden;
	display: inline-block;
	margin: 6px 10px 0 0;
}

.noerrorlabelXS {
	margin: 2px 0 4px 120px ;
}

.menu-span-5 {
	width: 307px;
	display: inline-block;
	position: relative;
	right: 3px;
}

.menu-span-8 {
	width: 307px; 
	display: inline-block; 
	position: relative; 
	top: 8px; 
	right: 3px
}

.kolofon {
	width: 70%;
	line-height: 1.8em;
}

form.horizontalForm > label + input, .formlabelXXL + input, .formlabelLogin + input, .formlabelXXXL + input, .formlabel + input, .formlabelXS + input {
	float: none;
}

.ui-chkbox-box {
	margin: 0px 4px;
	position: relative;
	top: 4px;
}

div.ui-messages ul {
	list-style-position: inside;
	margin-left: 40px;
}

.cookieSection {
	background: #F7F9FA;
	border: 0;
}

.cookieSection .wrapper p, .cookieSection .wrapper ul {
	margin: 0;
}

.cookieSection .wrapper {
	margin: 0 auto;
	width: 965px;
	padding-top: 6px;
}

.cookieSection ul {
	list-style-type: none;
	display: inline;
	float: right;
}

.cookieSection ul li {
	display: inline;
	padding: 0 7px 0 8px;
}

.cookieSection ul li a {
	color: #00397c;
	text-decoration: none;
	line-height: 30px;
}

.cookieSection ul li a:hover {
	text-decoration: underline;
}

#zatwierdzenie\:knowBox span.ui-chkbox-icon,
#zatwierdzenie\:realBox span.ui-chkbox-icon,
#zatwierdzenie\:regBox span.ui-chkbox-icon,
#zatwierdzenie\:fatcaBox span.ui-chkbox-icon {
	display: block;
}

#zatwierdzenie ol {
	counter-reset: item;
	margin-left: 30px;
	padding-left: 0;
}

#zatwierdzenie li {
	display: block;
	margin-left: 4em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

#zatwierdzenie ol li:before {
	content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
	counter-increment: item;
	display: inline-block;
	text-align: right;
	width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
	padding-right: 0.5em;
	margin-left: -3.5em;         /* See li comments. */
}

.ui-panel-titlebar-icon.ui-corner-all {
	float: left;
	margin-right: 10px;
}

/* Zmiany rozciągające okno */
.container {
	width: 1297px;
	margin:0 auto;
}
.append-1 {
	padding-right: 5px;
}
.prepend-1 {
	padding-left: 5px;
}

.topMenuBar.ui-menubar {
	background: none;
	border: none;
	border-image: none;
	padding: 0 0 0 259px;
	top: 2px;
}

.topMenuBar .ui-menu-list {
    display: inline-block;
}

.span-7a {
	width: 280px;
}

.span-18 {
	width:1002px;
}

.column, .span-7a {
	float: left;
	margin-right: 10px;
}

.ui-panel-custom .ui-panel-content {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

.ui-selectmanycheckbox.ui-widget label {
    display: initial;
}

.ui-selectmanycheckbox.ui-widget .ui-chkbox {
    vertical-align: baseline;
}

.menu-span-8 .ui-selectonemenu {
    vertical-align: baseline;
}

.ui-selectbooleancheckbox.ui-chkbox {
    vertical-align: baseline;
}

.ui-selectbooleancheckbox.ui-chkbox .ui-chkbox-label {
    vertical-align: baseline;
}

.blockcenter {
	display: block;
	text-align: center;
}

.blockcenter .ui-button {
	float: none;
	margin: 20px 0px;
}

/* Weryfikacja tożsamości / Aktualizacja danych osobowych */
.ui-panel.metoda-weryfikacji-tozsamosci {
	width: 210px;
	margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
	border-radius: 12px;
	vertical-align: top;
	box-shadow: 5px 7px 9px var(--gray_110);
}

.ui-panel.metoda-weryfikacji-tozsamosci .ui-panel-content {
	position: relative;
	height: 280px;
}

.metoda-logo {
	height: 130px;
}

.metoda-opis {
	height: 100px;
}

.metoda-akcja {
	height: 45px;
}

.metoda-weryfikacji-tozsamosci .metoda-akcja .ui-button {
	margin: 5px 0px;
}

.ui-steps.custom {
	margin-bottom: 90px;
}

.ui-steps.custom .ui-steps-item .ui-menuitem-link {
	height: 2px;
	padding: 0 1em;
}

.ui-steps.custom .ui-steps-item .ui-steps-number {
	background-color: #ddd;
	color: #153e7f;
	display: table-caption;
	width: 23px;
	border-radius: 100px;
	margin-top: -10px;
	margin-bottom: 10px;
	margin-bottom: 10px;
	font-size: 120%;
}

.ui-steps.custom .ui-steps-item.ui-state-highlight {
	border: 1px solid #ddd;
	background: #d9edf7;
}

.ui-progressbar.edo-app-progress {
	display: inline-block;
	height: 20px;
	width: 200px;
	background: var(--gray_90);
	border-radius: 30px;
	border-color: #c5d2e8;
}

.ui-progressbar-determinate.edo-app-progress .ui-progressbar-value {
    background: #d9edf7;
    border-radius: 30px;
    border-color: #c5d2e8;
}

.ui-progressbar-determinate.edo-app-progress .ui-progressbar-label {
	font-size: 1.1em;
	color: #153e7f;
}

.margin-40 {
	margin: 40px;
}

.ui-datatable .ui-row-toggler {
	font-size: 0.875em;
	text-align: center;
    text-decoration: underline;
    color: #153e7f;
}

.ui-datatable .canceledRecord {
	color: #c9c6c4;
}

.myBonds .ui-expanded-row-content > td {
	padding: 0px;
}

.vertical-align-top {
	vertical-align: top;
}

.ui-button.account-button-default {
	float: none;
	width: 180px;
	margin-left: 10px;
	margin-right: .1em;
	height: 27px;
	font-size: 1.25em;
	font-weight: bold;
	border-radius: 8px 0 8px 0;
}

.ui-button.account-button-selected {
	border: 1px solid #cbc3be;
	color: var(--white_100);
	background-color: var(--blue_70);
}

.ui-button.account-button-selected:hover {
	background-color: var(--blue_80);
}

.ui-button.account-button-unselected {
	color: var(--blue_70);
	background-color: var(--white_100);
	border: 1px solid var(--gray_100);
}

.ui-button.account-button-unselected:hover {
	color: var(--blue_80);
	background-color: var(--gray_90);
}

.account-area {
	width: fit-content;
	padding: 0px;
	margin-top: -68px;
	margin-bottom: 20px;
}

.ui-datatable.proporcje-nabyc-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-input {
    font-size: 0.875em;
    padding: 4px 5px;
    text-align: right;
}

.ui-datatable.proporcje-nabyc-datatable .ui-row-editor .ui-row-editor-close {
    margin-left: 10px;
}

.ui-panel.dane-klienta {
	width: 480px;
	border-radius: 12px;
	margin-bottom: 20px;
	box-shadow: 5px 7px 9px var(--gray_110);
}
.ui-panel.dane-rachunku {
	font-size: 0.99em; /* 1.1 x 0.9 = 0.99 */
	width: 580px;
	border-radius: 12px;
	margin-bottom: 10px;
}

.ui-button.stan-rachunku-button {
	font-size: 0.875em;
	width: 170px;
	margin-top: 15px;
	margin-bottom: 10px;
}

/* Ukrywa gwiazdkę z etykiet pól wymaganych */
.ui-outputlabel .ui-outputlabel-rfi {
    display: none;
}

.ui-button.copy-button, .ui-widget-content .ui-button.copy-button {
	height: 23px;
	margin-left: 10px;
	margin-right: 0px;
	vertical-align: text-bottom;
}

.ui-growl {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ui-growl .ui-growl-item .ui-growl-icon-close {
	display: none !important;
}

/* przycisk secondary - domyślny */
.ui-button, .ui-widget-content .ui-button {
 	height: 35px;
	font-weight: normal;
	color: var(--black_100);
	background-color: var(--white_100);
	border-color: var(--gray_120);
	background-image: none;
	border-radius: 5px 5px;
	margin-right: 10px;
}

.ui-button:hover {
	background-color: var(--gray_10);
}

.ui-state-disabled {
  opacity: 1;
}

/* przycisk primary - głowny */
.ui-state-default.recomended, .ui-widget-content .ui-state-default.recomended {
	color: var(--white_100);
	background-color: var(--blue_100);
	border-color: var(--blue_100);
	border-radius: 5px 0 5px 0;
}

.recomended.ui-button:hover {
	background-color: var(--blue_70);
	border-color: var(--blue_70);
}

.ui-state-default.ui-state-disabled.recomended {
	font-weight: normal;
	color: var(--gray_120);
	background-color: var(--white_100);
	border-color: var(--gray_120);
	background-image: none;
	border-radius: 5px 5px;
}

.small-btn {
	width: 105px;
}

.medium-btn {
	width: 180px;
}

.large-btn {
	width: 240px;
}

.huge-btn {
	width: 285px;
}

a {
	color: var(--blue_70);
	text-decoration: underline;
}

a:focus, a:hover {
	color: var(--blue_150);
}

.ui-messages-info {
	color: var(--green_100);
	background-color: var(--gray_20);
	border-color: var(--gray_90);
}

.ui-messages-error, .ui-message-error {
	color: var(--red-100);
	background-color: var(--gray_20);
	border-color: var(--gray_90);
}

/* menu top */
#menuTop {
	float: left;
	min-width:100%;
	padding-bottom: 5px;
	font-size: 1.2em;
}

#menuTop a {
	border-bottom-width: 3px;
}

#menuTop a:link, #menuTop a:visited {
	text-decoration: none;
	color: var(--black_100);
	padding: 3px 33px;
}

#menuTop a:hover {
	text-decoration: none;
	background: none;
	color: var(--blue_70);
	border-bottom-width: 3px;
	border-bottom-color: var(--blue_70);
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;
}

#menuTop a.leafItem {
	border-radius: 5px 0 5px 0;
	color: var(--white_100);
	background-color: var(--blue_100);
}

#menuTop a.leafItem:hover {
	background-color: var(--blue_70);
}

#menuTop .ui-menu .ui-menuitem-link {
     line-height: 1.4em;
}

#menuTop .ui-menuitem-icon.ui-menuitem-icon-left {
	line-height: 1em;
	overflow: visible;
}

.ui-widget-content a, i {
	color: var(--blue_100);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	background: var(--white_100);
}

/* menu left */
#menuLeft a {
	text-decoration: none;
	font-size: 0.9em;
}

#menuLeft .ui-panelmenu .ui-panelmenu-panel .ui-panelmenu-header  {
	background-color: var(--gray_90);
	background-image: none;
}

#menuLeft .ui-panelmenu .ui-panelmenu-panel .ui-panelmenu-header.ui-state-active a {
	color: var(--white_100);
	background-color: var(--blue_70);
}

#menuLeft .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
	font-weight: bold;
}

#menuLeft .ui-menuitem-link {
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}

#menuLeft .ui-menuitem-link.menuItemSelected {
	font-weight: bold;
	background-color: var(--gray_20)
}

#menuLeft .ui-menuitem-link.bottomSeparator {
	border-bottom-color: var(--gray_120);
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-left-radius: initial;
	border-bottom-right-radius: initial;
}

#menuLeft .ui-menuitem-link.topSeparator {
	border-top-color: var(--gray_120);
	border-top-width: thin;
	border-top-style: solid;
	border-top-left-radius: initial;
	border-top-right-radius: initial;
}

#menuLeft li {
	list-style: none;
	margin-bottom: 0.1em;
	padding-left: 5px;
	text-align: left;
}

#menuLeft .ui-icon {
	overflow: visible;
}

#menuLeft .ui-panel-menu .ui-icon {
	top: auto;
}

#menuLeft .ui-menuitem .ui-icon {
	top: 4px;
}

/* Zamknięcie IKE/IKZE oraz Modyfikacja wypłaty w ratach IKE/IKZE */
.ui-panel.metoda-zamkniecia-konta, .ui-panel.sposob-modyfikacji-wyplaty {
	width: 260px;
	margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
	border-radius: 12px;
	vertical-align: top;
	box-shadow: 5px 7px 9px var(--gray_110);
}

.ui-panel.metoda-zamkniecia-konta .ui-panel-content {
	position: relative;
	height: 840px;
}

.ui-panel.sposob-modyfikacji-wyplaty .ui-panel-content {
	position: relative;
	height: 540px;
}

.metoda-zamkniecia-konta-akcja, .sposob-modyfikacji-wyplaty-akcja {
	position: absolute;
	bottom: 0px;
}

.metoda-zamkniecia-konta .ui-button, .sposob-modyfikacji-wyplaty .ui-button {
	margin-left: 25px;
}

.ui-selectoneradio.sposob-wyplaty>div:nth-child(n+2)  {
	margin-left: 200px;
}

/* Button Kalendarz */
.ui-datepicker-trigger.ui-button.ui-widget.ui-button-icon-only {
	margin-left: 5px;
	height: auto;
}

/* Nieaktywne pola tekstowe */
.ui-inputfield.ui-inputtext.ui-state-disabled {
 	background-color: var(--gray_20);
}