/* 
	Capita Pay360 Payment Facilitator Evolve skin for SCP

	Description: SCP General styling for elements
	Author: radu.lupescu@capita.com
	Last modified: 08/04/2020
*/


html, body{
	min-height: 100%;
}


html body {
    font-family: "Roboto", sans serif;
    font-size: 16px;
    font-weight: 400;
    color: #343434;
}

header {
	position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
	background-color: white;
	min-height: 65px;

	/* Bootstrap 4.4.1 .shadow-sm */
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

header .logo {
	text-align: center;
}

header .logo .pf-logo > img {
	/*hidden to 
	width: 200px;*/
	max-height:100px;
}

/*added to remove SecureCode, VBV, Trustwave logos*/
.scp_secure_logos {
	display: none;
}


footer {
	min-height: 65px;
}

.pf-container {
	max-width: 1200px;
	margin: 30px auto 0;
	padding: 85px 10px 0 10px;
}

.pf-container .scp_test_environment_warning {
	background-color: #f83455;
	border-radius: 15px;
	color: white;
	margin: 0 0 50px 0;
	padding: 10px 20px;
	font-size: 19px;

	/* Bootstrap 4.4.1 .shadow */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.pf-container #busy_indicator_text {
	border-color: #FEAA02;
    background-color: #feaa02;
    color: #343434;
    border-radius: 15px;

	/* Bootstrap 4.4.1 .shadow */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.pf-container .scp_framework {
	position: relative;
	background-color: white;
	border-radius: 15px;
	padding: 10px 20px;

	/* Bootstrap 4.4.1 .shadow */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.pf-container .scp_framework .scp_page_container {
	border: none;
}

@media (max-width: 500px) {
	body {
		background: orange;
	}
}



/* ----------------- */
/* SCP Forms styling */
/* ------------ ---- */

.pf-container .scp_framework .scp_input_container {
	margin-bottom: 15px;
}

.pf-container .scp_framework .scp_input_container .scp_label_inline {
	display: block;
	margin-bottom: 8px; 
}

.pf-container .scp_framework .scp_input_container .scp_error_text {
	color: #F4516C;
	font-weight: 600;
	font-size: 13px;
	margin-top: 5px;
}

.pf-container .scp_framework .scp_input_container input.scp_text_input,
.pf-container .scp_framework .scp_input_container select.scp_text_input,
.pf-container .scp_framework .scp_input_container input.scp_tel_input {
	/* Bootstrap 4.4.1 .form-control */
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pf-container .scp_framework .scp_input_container input.scp_text_input:hover,
.pf-container .scp_framework .scp_input_container select.scp_text_input:hover,
.pf-container .scp_framework .scp_input_container input.scp_tel_input:hover {
	color: #495057;
	background-color: #fff;
	border-color: #FEAA02;
	outline: 0;
	box-shadow: 0 0 0 0.1rem rgba(254, 170, 2, 0.25);
}

.pf-container .scp_framework .scp_input_container input.scp_text_input:focus,
.pf-container .scp_framework .scp_input_container select.scp_text_input:focus,
.pf-container .scp_framework .scp_input_container input.scp_tel_input:focus {
	color: #495057;
	background-color: #fff;
	border-color: #FEAA02;
	outline: 0;
	box-shadow: 0 0 0 0.3rem rgba(254, 170, 2, 0.25);
}


/* --------------------- */
/* SCP Buttons styling */
/* --------------------- */

.pf-container .scp_framework input[type="submit"].scp_button {
	/* Bootstrap 4.4.1 .btn */
	display: inline-block;
	background-color: #FFF;
	color: #343434;
	border: 1px solid #F3F3F3;
	border-radius: 0.25rem;
	outline: none;
  	padding: 0.5rem 1rem;
  	min-width: 90px;
  	font-size: 1rem;
	font-weight: 500;
  	line-height: 1.5;
  	text-align: center;
	margin-left: 0;
	margin-right: 15px;
	margin-bottom: 10px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

	/* Bootstrap 4.4.1 .shadow-sm */
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.pf-container .scp_framework input[type="submit"].scp_button:focus,
.pf-container .scp_framework input[type="submit"].scp_button:hover {
	border-color: #F3F3F3;
	background-color: #F3F3F3;
	outline: 0;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
}

.pf-container .scp_framework input[value="Add card"].scp_button,
.pf-container .scp_framework input[value="Continue"].scp_button,
.pf-container .scp_framework input[value="Confirm"].scp_button,
.pf-container .scp_framework input[value="Make Payment"].scp_button,
.pf-container .scp_framework input[value="Save"].scp_button {
	background-color: #343434;
	border: 1px solid #343434;
	color: #FEAA02;

	float: right;
	margin-right: 0;

	/* Bootstrap 4.4.1 .shadow-sm */
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.pf-container .scp_framework input[value="Add card"].scp_button:focus,
.pf-container .scp_framework input[value="Add card"].scp_button:hover,
.pf-container .scp_framework input[value="Continue"].scp_button:focus,
.pf-container .scp_framework input[value="Continue"].scp_button:hover,
.pf-container .scp_framework input[value="Confirm"].scp_button:focus,
.pf-container .scp_framework input[value="Confirm"].scp_button:hover,
.pf-container .scp_framework input[value="Make Payment"].scp_button:focus,
.pf-container .scp_framework input[value="Make Payment"].scp_button:hover,
.pf-container .scp_framework input[value="Save"].scp_button:focus,
.pf-container .scp_framework input[value="Save"].scp_button:hover {
	background-color: #000;
	border-color: #000;
	outline: 0;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
}

.pf-container .scp_framework #scp_button_container {
	margin-top: 30px;
}