@import url('../css/bootstrap.css');
@import url('../css/animate.css');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700');
/************ General ***********/
body {
  font-family: 'Poppins', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

.cursor-pointer {
  cursor: pointer;
}

.nav {
  margin-bottom: 37px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 16px;
  color: #a09c9c;
}

.link {
  text-decoration: underline;
}

.nav .nav-item {
  padding: 0;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: transparent;
  border-bottom: 3px solid #3389e5;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: transparent;
  border-bottom: 3px solid #3389e5;
}

.nav-tabs .nav-link {
  border: 0px solid transparent;
  border-radius: 0;
  word-wrap: break-word;
  white-space: normal;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #34aa54;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  background-color: #34aa54;
}

/************ Form ***********/
.form-wrapper {
  height: 100vh;
  text-align: center;
  white-space: nowrap;
  padding-top: 100px;
}

.form-wrapper #full .logo {
  margin: 0px auto 20px auto;
  display: block;
  max-width: 200px;
  width: 200px;
  top: 0px;
  left: 0;
  right: 0;
}

.form-wrapper #full .order-summary {
  height: 630px;
  width: 310px;
  border-right: 3px solid #ebeff0;
  display: inline-block;
  vertical-align: middle;
  border: 3px solid #ebeff0;
  min-height: 1px;
  padding: 40px 12px;
  right: -3px;
  position: relative;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  float: left;
}

.form-wrapper #full .order-summary h2 {
  padding: .5rem 1rem 0.9rem 1rem;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 16px;
  border-bottom: 1px solid #dee2e6;
  color: black;
}

.form-wrapper #full .order-summary .nav {
  margin-bottom: 10px;
}

.form-wrapper #full .order-summary .order-details .item-picture {
  height: 93px;
  width: 93px;
}

.form-wrapper #full .order-summary .order-details .description {
  text-align: left;
  font-size: 13px;
  color: #787272;
  width: 100%;
  white-space: normal;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px;
  margin-bottom: 5px;
}

.form-wrapper #full .order-summary .order-details .quantity {
  text-align: left;
  font-size: 13px;
  margin: 0;
  font-weight: 500;
}

.form-wrapper #full .order-summary .order-details .quantity span {
  color: #787272;
}

.form-wrapper #full .order-summary .order-details .price {
  text-align: left;
  font-size: 13px;
  margin: 0;
  font-weight: 500;
}

.form-wrapper #full .order-summary .order-details .price span {
  color: #787272;
}

.form-wrapper #full .order-summary .order-details ul {
  list-style: none;
  padding: 0;
  text-align: left;
}

.form-wrapper #full .order-summary .order-details ul li {
  font-size: 12px;
  font-weight: 500;
  line-height: 29px;
  border-bottom: 1px solid #dee2e6;
}

.form-wrapper #full .order-summary .order-details ul li:first-child {
  margin-top: 10px;
  border-top: 1px solid #dee2e6;
}

.form-wrapper #full .order-summary .order-details ul li span {
  color: #787272;
}

.form-wrapper #full .order-summary .order-details .total-amount {
  font-size: 19px;
  font-weight: 500;
}

.form-wrapper #full .order-summary .order-details .pci {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  margin: 0 auto;
}

.form-wrapper #full .form {
  height: 630px;
}

.form-wrapper .form {
  width: 540px;
  position: relative;
  padding: 40px 40px;
  background-color: #ffffff;
  border: 3px solid #ebeff0;
  border-radius: 5px;
  min-height: 1px;
  display: inline-block;
  vertical-align: middle;
}

.form-wrapper .form .logo {
  width: 200px;
  margin: 0 auto 20px auto;
  display: block;
}

.form-wrapper .form .row {
  text-align: left;
}

.form-wrapper .form .row label {
  font-weight: 500;
  font-size: 14px;
}

.form-wrapper .form .row .left-input-div {
  padding-left: 0;
  padding-right: 10px;
}

.form-wrapper .form .row .right-input-div {
  padding-right: 0;
  padding-left: 10px;
}

.form-wrapper .form input,
.form-wrapper .form select {
  border: 1px solid #d9e2e1;
  height: 44px;
  color: #626262;
  font-size: 14px;
}

.form-wrapper .form button[type="submit"],
.form-wrapper .form button[type="button"] {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  padding: 15px;
  background: #3389e5;
}

.form-wrapper .form .validation-success {
  background: #f4fdf8;
  background-image: url('../img/validation-success.png');
  background-repeat: no-repeat;
  background-position: 95% 50%;
  border: 1px solid #1bcb5f;
  padding: .375rem 2.5rem .375rem 0.75rem;
}

.form-wrapper .form .validation-success:focus {
  color: #495057;
  background-color: #fff;
  border-color: #1bcb5f;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #28a7453d;
}

.form-wrapper .form .validation-error {
  background: #fdf6f4;
  background-image: url('../img/validation-error.png');
  background-repeat: no-repeat;
  background-position: 95% 50%;
  border: 1px solid #ff0000;
  padding: .375rem 2.5rem .375rem 0.75rem;
}

.form-wrapper .form .validation-error:focus {
  color: #495057;
  background-color: #fff;
  border-color: #ff0000;
  outline: 0;
  box-shadow: 0 0 0 0.2rem #dc35454d;
}

.form-wrapper .form .summary {
  margin-bottom: 20px;
  margin-top: 20px;
}

.form-wrapper .form .summary #currency,
.form-wrapper .form .summary #order-number {
  color: black;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}

.form-wrapper .form .summary #currency span,
.form-wrapper .form .summary #order-number span {
  color: #787272;
}

.form-wrapper .form .summary #total-amount {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 10px;
}

.form-wrapper .form .alert {
  padding: 5px 15px 5px 33px;
}

.form-wrapper .form .alert p {
  margin: 0;
}

.form-wrapper .form .alert-danger {
  color: white;
  background-color: #ff5a5a;
  background-image: url('../img/error-icon.png');
  background-repeat: no-repeat;
  background-position: 2% 50%;
  border-color: #ff5a5a;
}

.form-wrapper .form #cvv {
  background-image: url('../img/ccard-icon.png');
  background-repeat: no-repeat;
  background-position: 95% 50%;
  padding: .375rem 2.5rem .375rem 0.75rem;
}

.form-wrapper .form #redirect-back {
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  color: black;
  text-decoration: underline;
}

.form-wrapper .form .pci {
  margin: 30px auto 0 auto;
  display: block;
}

.form-wrapper .form .proccessing-copyrights {
  position: absolute;
  bottom: -44px;
  right: 0;
  font-weight: 500;
  font-size: 10px;
}

.form-wrapper .form #error-message {
  display: none;
}

/************ Responsive ***********/
@media screen and (max-width: 900px) {
  .form-wrapper #full .logo {
    margin: 20px auto 20px auto;
  }

  .form-wrapper #full .form {
    width: 100%;
    display: block;
    height: auto;
  }

  .form-wrapper #full .order-summary {
    height: 436px;
    right: 0;
    top: 35px;
    width: 100%;
    display: block;
  }
}

@media screen and (max-width: 768px) {
  #slim .form .row .right-input-div,
  #full .form .row .right-input-div,
  #slim .form .row .left-input-div,
  #full .form .row .left-input-div {
    padding-left: 0;
    padding-right: 0;
  }

  #slim .form .summary #total-amount,
  #full .form .summary #total-amount {
    position: relative;
    text-align: center;
  }
}

@media screen and (max-width: 600px) {
  #slim .form,
  #full .form {
    width: 100%;
  }
}

@media screen and (max-width: 430px) {
  #slim .form,
  #full .form {
    padding: 40px 20px;
  }
}