/*
    Document   : m.prepaid.css
    Author     : Grzegorz Sadomski
    Description:
    
*/ /*==================================
remove default focus style
====================================*/

:focus {
	outline: none;
}

/*------------------------  mobile prepaid styles -----------------------------------------*/

body {
	font-family: var(--font-family-default)}

.prepaidMainArea {
	font-family: var(--font-family-default);
	background: var(--bw-255);
}

.prepaidCardDetailsTableLeft {
	background-color: var(--bw-245);
	height: 160px;
	width: 100%;
	font-size: var(--font-size-11);
	color: var(--color-gen-106);
	margin-left: 12px;
	padding-bottom: 12px;
}

.prepaidBoldLeft {
	font-weight: bold;
	text-align: right;
	float: left;
	padding-top: 8px;
	padding-right: 4px;
}

.prepaidRight {
	padding-top: 8px;
}

.prepaidTransactionsListDark {
	font-size: var(--font-size-9);
	color: var(--color-gen-106);
	height: 28px;
	background-color: var(--color-grey-bg);
}

.prepaidTransactionsListLight {
	font-size: var(--font-size-9);
	color: var(--color-gen-106);
	height: 28px;
	background-color: var(--bw-250);
}

.prepaidTransactionFundsLblPLN {
	font-weight: bold;
	float: left;
	text-align: right;
	padding: 15px 0 0 12px;
}

.prepaidTransactionFundsAmount {
	float: left;
	font-size: var(--font-size-28);
}

.prepaidTransactionChargeAmount {
	float: left;
	font-size: var(--font-size-18);
	padding-bottom: 8px;
}

.prepaidTransactionChargeAmountPLN {
	font-weight: bold;
	float: left;
	text-align: right;
	padding: 6px 0 0 12px;
}

.prepaidTransactionsCardDetails {
	padding-right: 12px;
}

.prepaidTransactionsTitle {
	font-size: var(--font-size-16);
	font-weight: bold;
	color: var(--color-gen-106);
	height: 50px;
	vertical-align: middle;
}

.prepaidTransactionsTitle div {
	padding: 12px 10px;
	font-size: var(--font-size-16);
}

.prepaidActivationMessage {
	font-size: var(--font-size-13);
	vertical-align: middle;
	background-color: var(--bw-245);
	color: var(--bw-105);
	padding-top: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	margin-left: 12px;
	margin-right: 12px;
}

.prepaidActivationError {
	padding-left: 35px;
}

.prepaidTransactionsTable { 
	text-align: center;
	width: 100%;
}

.prepaidTransactionsTableHeader {
	font-size: var(--font-size-9);
	font-weight: bold;
	background-color: var(--color-gen-106);
	color: var(--bw-255);
	height: 43px;
}

.prepaidDetailsInfoListItem {
	margin-left: 10px;
	padding-left: 12px;
	margin-bottom: 3px;
	color: var(--color-gen-106);
}

.prepaidDetailsInfoList {
	font-size: var(--font-size-11);
	color: var(--color-gen-052);
	padding-bottom: 12px;
}

.prepaidDetailsInfoListHeader {
	color: var(--color-gen-106);
	font-weight: bold;
	overflow: hidden;
	margin: 10px 10px 10px;
	padding: 10px 0 0;
	vertical-align: middle;
}

.prepaidDetailsInfoListHeaderPerso {
	color: var(--color-gen-106);
	font-weight: bold;
	overflow: hidden;
	vertical-align: middle;
	font-size: var(--font-size-13);
	font-family: var(--font-family-default);
	margin-bottom: 0px;
    margin-left: 5px;
    margin-right: 0px;
    margin-top: 2px;
}


.prepaidDetailsInfoListHeader .prepaidDetailsInfoListHeaderPerso {
	margin: 0 auto;
	width: auto;
	display: inline;
}

.prepaidDetailsInfoListHeaderMsg {
	padding-top: 3px;
	padding-left: 10px;
}

.prepaidDetailsInfoListHeader div {
	float: left
}

.prepaidDetailsInfoListHeaderPerso div {
	float: left
}

.prepaidHeaderTitle {
    background: var(--color-gen-106);
	padding-left: 5px;
	margin: 0 auto;
	font-size: var(--font-size-16);
	font-weight: bold;
	color: var(--bw-255);
	vertical-align: middle;
	width: auto;
}

.prepaidDetailsHeaderTitle {
    background: var(--color-gen-106);
    padding-left: 5px;
    margin: 0 auto;
    font-size: var(--font-size-16);
    font-weight: bold;
    color: var(--bw-255);
    vertical-align: middle;
    width: auto;
}

.prepaidHeaderTitle div,.prepaidDetailsHeaderTitle div {
	font-size: var(--font-size-14);
	color: var(--bw-255);
	padding: 6px;
	font-family: var(--font-family-default);
}

.prepaidInput {
    background : url("../img/prepaid/input.png") no-repeat;
    border: none;
    color: var(--color-gen-106);
    float: left;
    padding-top: 2px;
    padding-left: 6px;
    height: 24px;
    line-height: 24px;
    width: 157px;
    font-size: var(--font-size-12);
    font-weight: bold;
}

.newListSelected {
    background : transparent url("../img/prepaid/input_date_mobile.png") no-repeat;
    width: 50px;
    height: 27px;
    appearance: none;
    padding: 4px 4px 4px 4px;
    border: none;
    color: var(--color-gen-106);
    font-size: var(--font-size-12);
    font-family: var(--font-family-default);
    font-weight: bold;
}

.prepaidInputCvv2 {
    background: url("../img/prepaid/input_cvv.png") no-repeat;
    border: none;
    color: var(--color-gen-106);
    float: left;
    width: 61px;
    height: 24px;
    line-height: 24px;
    padding-top: 2px;
    padding-left: 6px;
    font-size: var(--font-size-12);
    font-weight: bold;
}

.loginHeaderLeft {
	background: var(--bw-255);
	float: left;
	width: 8px;
	height: 42px;
}

.loginHeaderCenter {
	float: left;
	width: 100%;
	height: 42px;
}

.loginHeaderRight {
	background: var(--bw-255);
	float: left;
	width: 8px;
	height: 42px;
}



.loginFooterLeft {
	background: var(--bw-255);
	float: left;
	width: 8px;
	height: 42px;
}

.loginFooterCenter {
	float: left;
	width: 100%;
	background:  var(--color-gen-106);
}

.loginFooterCenterBtn {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	text-align:center;
}

.buttonLogin {
    border: none;
    height: 38px;
    width: 121px;
    position: relative;
}

.loginFooterRight {
	background: var(--bw-255);
	float: left;
	width: 8px;
	height: 42px;
}

.prepaidCvvExplanation {
	text-align: left;
	height: 100px;
	background: url(../img/prepaid/karta+lupa_49.png) no-repeat 0 0;
	margin-left: 10px;
    margin-top: 10px;
}

.prepaidLoginRight {
	color: var(--color-gen-106);
	font-size: var(--font-size-10);
}

.prepaidLoginRightCVV2 {
	font-family: var(--font-family-default);
	color: var(--color-gen-106);
	font-size: var(--font-size-10);
	margin: -10px 10px 10px;
}

.prepaidErrorForm {
	font-family: var(--font-family-default);
	padding-bottom: 35px;
	width:auto;
}

.prepaidErrorImg {
	float: left;
	padding: 0px 10px;
}

.prepaidErrorPageImg {
	float: left;
	padding: 25px 10px;
	margin-bottom: 85px;
}

.prepaidErrorBody {
	height: 170px;
	color: var(--color-red-500);
	background: var(--bw-255);
}

.prepaidErrorMsg {
	padding-top: 18px;
	font-family: var(--font-family-default);
	font-size: var(--font-size-12);
}

.prepaidBtnOK {
	width: 40px;
	margin-top: 10px;
}

.prepaidBtnZakoncz {
	margin-top: 10px;
}

.prepaidCardNo { 
	color: var(--color-gen-106);
	font-size: var(--font-size-11);
	padding-top: 20px;
}

.prepaidCardNoOuter {
	height: 40px;
}

.prepaidValidThru { 
	color: var(--color-gen-106);
	font-size: var(--font-size-11);
	padding-top: 20px;
}

.prepaidValidThruOuter {
	height: 40px;
}

.prepaidCvv2 {
	padding-bottom: 15px;
	padding-top: 15px;
	color: var(--color-gen-106);
	font-size: var(--font-size-11);
}

.prepaidLoginTel {
	margin-left: 10px;
	margin-top: 3px;
	color: var(--color-gen-106);
	font-size: var(--font-size-10);
}

.prepaidLayoutCenterMiddle {
	background-color: white;
	overflow: hidden;
	margin: 0 auto;
	width: auto;
}

.whiteBackground {
	background: var(--color-gen-110);
}

.prepaidLayoutTransactions {
	background: url(../img/prepaid/bg-white-ramka_srodek.png);
}

.separator {
	display: inline;
	margin-left: 5px;
}

.labelLeft {
	float: left;
	margin-right: 5px;
	margin-top: 3px;
}

.labelLeftDate {
	float: left;
	margin-right: 5px;
	margin-top: 3px;
}

.labelLeftTip {
	float: left;
	margin-top: 3px;
	font-style: italic;
}

.labelLeftTipDate {
	float: left;
	margin-top: 4px;
}

.labelLeftTipMMRR {
	float: left;
	margin-top: 3px;
	margin-left: 4px;
	font-style: italic;
}

.prepaidOperationDate {
	width: 10%;
	padding-left: 2px;
	padding-right: 8px;
	text-align: left;
}

.prepaidOperationDescription {
	width: 50%;
	padding-left: 2px;
	padding-right: 8px;
	text-align: left;
}

.prepaidOperationPlnAmount {
	width: 40%;
}

.columnDesc {
	text-align: left;
	padding-left: 2px;
	padding-right: 8px;
}

.columnDate {
	text-align: left;
	padding-left: 2px;
	padding-right: 8px;
}

.columnAmountPLN {
	text-align: right;
	padding-left: 2px;
	padding-right: 8px;
}

.prepaidBannerHeader {
	width: 100%;
	height: 100%;
}

.selCont {
	float: left;
	display: inline;
}

#styleSelect .newListSelHover {
	background-position: inherit;
}

#styleSelect option {
    background-color: white;
}


.slashSeparator {
	float: left;
	margin: 3px;
}

.prepaidInfoLabel {
	color: var(--color-gen-106);
	font-size: var(--font-size-11);
	font-weight: bold;
	margin: 10px;
	height: 100%;
	width: auto;
}

.loginErrorMsg {
	color: red;
	font-size: var(--font-size-11);
	height: 44px; 
	vertical-align: middle; 
	display: table-cell;
}

#selSex .newListSelHover, #styleSelect .newListSelFocus {
	background-position: inherit;
}

.language, .selected_language {
    font-family: var(--font-family-default);
    font-size: var(--font-size-10);
    text-decoration: none;
    padding: 0px 5px;
}

.language { 
    color: var(--bw-183);
    text-decoration: underline;
    padding: 0px 5px;
}

.selected_language { 
    color: var(--color-gen-104);
}

.buttonLogout {
    border: none;
    height: 38px;
}

.prepaidDetailsRegisterCenter {
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 20px;
}