body {
  font-family: Calibri;
  font-size: 1.0em;  
  margin: 0;
  padding: 0;
  color: #090909;
  background: #ffffff;
}

body.no-scroll-body {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
}

* {
  box-sizing: border-box;
}

label {
	cursor:inherit;
}

.mainbar {
  margin: auto;
  padding: 1em 0;
  width: 45em;
}

.card-style {
  border: 1px solid #000000;
	-webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

fieldSet {
  display: block;
  background: #ffffff;
  border: 1px solid #000000;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 1em;
  width: 45em;
  margin: auto;
}

.help-icon {
  height:1em;
  vertical-align: middle;
}

.cvv-field {
  width: 5em;
}

.full-width {
	width:100%;
}

.amount {
	color:#bc945b;
	font-size: small; 
}

.amountDetail {
  padding-bottom: 0.5em;
}

.main-container .sub-title {
  margin: 0.5em auto;
}

.main-container.security-solution-container {
	margin: auto;
	width: 75%;
}

.sub-title {
  color: #bc945b;
  font-size: large;
  font-weight: bold;
  text-align: center;
}

.choiceHeader {
  font-weight: bold;
  background-color: #F2F2F2;
  padding: 0.5em;
  border: 2px solid #F2F2F2;
	margin: -2px;
}

.choiceDetail {
    padding: 0.5em;
}

.choiceSection {
	margin-bottom: 1em;
}

.clickable { 
	cursor: pointer; 
}

.errorField {
	border: 1px solid red;
}

.error-container {
  margin:0.5em auto;
}

.error-container .errorLabel {
  align-items: flex-start;
  color: red;
  display: flex;
  flex-flow:column nowrap;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  justify-content: left;
  text-align: left;
  vertical-align: text-top;
}

.error-container .errorLabel .error-element, .errorMessage .error-element {
  align-items: center;
	display: flex;
}

/* These are single-field error elements. Will re-use the container/styles 
of the global errors for now since they are almost the same. */
.errorMessage .error-element {
	justify-content: left;
}

.error-container .errorLabel .error-element .errorIcon, .errorMessage .error-element .errorIcon {
	height: 1.5em;
	width: 1.5em;
	margin-right: 0.5em;
	flex: 0 0 1.5em;
}

img {
  border-width: 0;
}

.largeFont { 
	font-size: large;	 
}

.noborder {
	text-decoration:none;
}

.nowrap {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}

.wrap {
	white-space:normal;
  word-break: break-all;
}

.regularFont { 
	font-size: medium; 
}

.smallerFont,
.smallestFont,
.regularFont,
.largeFont,
.xlargeFont,
.xxlargeFont {
	font-family:Arial, Helvetica, sans-serif;

}

.smallerFont { 
	font-size: small; 
}

.smallestFont { 
	font-size: x-small;
	font-weight: bold; 
}

.xlargeFont { 
	font-size: x-large;
	 
}

.xxlargeFont { 
	font-size: xx-large;
	 
}

div.blockCenter{  
  text-align: center;
}

.visuallyHidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute;
}


.mainPanel {
  position: relative;
  top: 5%;
  left: 35%;
  margin-top: 10px;
  width: 50em;
}

.powered-by-logo {
  height:56px;
  text-decoration:none;
  width:211px;
}

.wait-screen-overlay {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}
.wait-screen-overlay .wait-screen-message {
  margin:1em auto;
  text-align: center;
}
.wait-screen-overlay .wait-screen-progress-bar > * {
	margin: auto;
}

.payee-container {
  padding: 0.5em;
}

.payee-container .payee-element {
  max-width: 75%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.payee-container .payee-element:not(:last-child) {
  margin-top:0.5em;
}

.accepted-card-container {
	font-size: large;
  margin: 1em 0; 
	text-align: left;
}