/****************************
*******General Styling******
****************************/

.modal-container .cols {
  width: 100%;
  clear: both;
  overflow: hidden;
}

.modal-container .cols .col {
  width: 50%;
}

.modal-container .cols .col-1 {
  padding-right: 5px;
}

.modal-container .cols .col-2 {
  padding-left: 5px;
}

.modal-container .one-col .col {
  width: auto;
}

.modal-container .select-dropdown select {
  padding-left: 10px;
  color: #969696;
}

/****************************
*********Modal Styling********
****************************/

.modal-container {
  z-index: 10;
  position: fixed;
}

.modal-container .modal-background {
  overflow-y: scroll;
  overflow-x: hidden;
}

.modal-container .modal-background .modal {
  position: relative;
}

.modal-container .modal.alert {
  text-align: center;
  width: 360px;
}

.modal-container .modal {
  top: 50px;
  margin-bottom: 50px;
}

.modal-container .modal-body-container div {
  overflow: visible;
}

/****************************
*********Modal Header********
****************************/

.modal-container .modal-header h1 {
  display: inline;
}

.modal-container .modal-header .required {
  float: right;
}

/****************************
*********Modal Body********
****************************/

.modal-container .modal-body {
  padding: 25px 0;
}

.modal-container .modal-body .modal-body-container {
  margin: 0 20px;
}

.modal-container .modal-body .credit-card-form {
  width: 100%;
  clear: both;
  overflow: hidden;
}

.modal-container .modal-body .detail {
  margin-bottom: 0;
}

.modal-container .section-divider {
  border-bottom: 1px solid #dadada;
  margin-bottom: 15px;
}

.modal-container .modal-body .credit-card-form label {
  float: left;
  margin-right: 20px;
}

.modal-container .field-entry {
  border-top: none;
  padding-top: 0;
  padding-bottom: 0;
}

.modal-container .form-control {
  margin-bottom: 20px;
}

.modal-container .col .field {
  width: 100%;
  margin: 6px 0;
}

/*****style experiation date******/

.modal-container .modal-body .expiration-date {
  margin: 30px 0 15px;
}

.modal-container .modal-body .expiration-date .select-dropdown {
  float: left;
  margin-right: 10px;
}

.modal-container .modal-body .expiration-date .field.month {
  padding-right: 50px;
  padding-left: 15px;
}

.modal-container .modal-body .expiration-date .field.year {
  padding-right: 40px;
  padding-left: 15px;
}

/*******Payment Credit Card Styling**********/
.modal-container .creditcards {
  padding-top: 15px;
}

/******* Validation Style**********/
.modal-container .error .validation {
  border-color: #f00;
  -webkit-box-shadow: 0 0 5px rgba(255,0,0,.5);
  box-shadow: 0 0 5px rgba(255,0,0,.5);
}

.modal-container .error-message {
  display: none;
}

.modal-container .error .error-message {
  display: block;
  color: #f00;
  background: url("/portal/css/global/images/icon-error.png") left top no-repeat;
  padding-left: 25px;
  height: 20px;
  padding-top: 3px;
}