.autoload-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:black;
  opacity: 0.5;
}

.autoload-modal-dialog {
  z-index:10000;
  position: fixed;
  width: 50%; /* Default */
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  padding: 30px;
  font-size: 16px;
  overflow-x:hidden;
  overflow-y: auto;  
  -webkit-overflow-scrolling: touch !important;
  max-height:90%;
  max-width: calc( (100%) - (20px) );  
} 

.autoload-modal-dialog .btn {margin-bottom:20px;}
.autoload-modal-close {
	floaT:right;
	top:30px;
	right: 30px;
  padding-left: 2px;
	cursor: pointer;
	font-size: 400%;
	display: inline-block;
	font-weight: 300;
	color:#05183b;
	z-index:9;
	-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
	font-size:30px;
	width: 24px;
	height: 24px;
	line-height: 20px;
	text-align: center;
	vertical-align: top;
	border:1px solid #05183b;
	border-radius:50%;
}

.grey-out {
    color: grey;
}

.autoload-modal-dialog *:focus{
   box-shadow: 0 0 3px 2px #008cff, 0 0 2px #008cff inset;
}
/*Show and Hide Animations*/

.sample-show-hide {
  /*
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
  */
}

.sample-show-hide.ng-hide {
  opacity:0;
}

.card-number {
    background-image: url(/cms/images/utility/cards.png), url(/cms/images/utility/cards.png) !important;
    background-position-x: 2px, 260px !important;
    background-position-y: -105px, -51px !important;
    background-size: 120px 361px, 120px 361px !important;
    background-repeat: no-repeat !important;
    padding-left: 54px !important;
    /* width: 300px !important; */
    height: 36px !important;
}

/* 16px baseline (180px - 767px) */
@media only screen and (min-width:11.250em) and (max-width:47.938em) {
	/* .creditCardFields .grid_6.cardholder {width:100%;} */
	
	.autoload-modal-dialog .grid_6 {width:100%; padding:0;}
}
/* 16px baseline (480px - 767px) */
@media only screen and (min-width:30em) and (max-width:47.938em) {
	/* .card-number {margin-left:-10px;} */
}
/* 16px baseline (180px - 479px) */
@media only screen and (min-width:11.250em) and (max-width:29.938em) {
	.card-number {	
		background-position-x: 2px, 230px !important;	
		/* width: 260px !important; */
	}
	.supportedPayments img {margin-right:4px; margin-bottom:3px; max-width:48px;}
	
}

.credit-card-visa {
    background-position: 2px -143px, 260px -51px !important;
}

.credit-card-visa.credit-card-valid {
  background-position: 2px -143px, 260px -74px !important;
}

.credit-card-amex {
    background-position: 2px -326px, 260px -51px !important;
}

.credit-card-amex.credit-card-valid {
    background-position: 2px -326px, 260px -74px !important;
}

.credit-card-mastercard {
    background-position: 2px -218px, 260px -51px !important;
}

.credit-card-mastercard.credit-card-valid {
    background-position: 2px -218px, 260px -74px !important;
}

.credit-card-discover {
    background-position: 2px -293px, 260px -51px !important;
}

.credit-card-discover.credit-card-valid {
    background-position: 2px -293px, 260px -74px !important;
}

.required-field input[type="text"] {
    border-style:solid !important;
    border-width: 3px !important;
    border-color: red !important;
}

.required-field input[type="password"] {
    border-style:solid !important;
    border-width: 3px !important;
    border-color: red !important;
}

.required-field select {
    border-style:solid !important;
    border-width: 3px !important;
    border-color: red !important;
}

.error-message {
    color: red;
    font-size: 11px;
}

.payment-alert {
    color:red;
}

.example-animate-container {
  background:white;
  border:1px solid black;
  list-style:none;
  margin:0;
  padding:0 10px;
}
 
.animate-repeat {
  line-height:40px;
  list-style:none;
  box-sizing:border-box;
}
 
/*ng-repeat animations*/

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
  /*
  -webkit-transition:all linear 2s;
  transition:all linear 2s;
  */
}
 
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
  opacity:0;
  max-height:0;
}
 
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
  opacity:1;
  max-height:40px;
}

.autoload-modal-dialog .formee-lbl, 
.autoload-modal-dialog .formee label {font-size:14px; font-weight:600;}
.autoload-modal-dialog .formee-lbl .formee-req, 
.autoload-modal-dialog .formee label .formee-req {top:1px;}

.autoload-modal-dialog .formee select {font-size:14px; padding:7px 46px 7px 6px;}
.autoload-modal-dialog .formee input {font-size:14px; padding:8px 6px;}

.autoload-modal-dialog h3 {color:#1C345D; margin:0 25px 20px 0; font-weight:bold !important;}