/* Transform mixins */
/* End transform mixins */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes shake {
  0% {
    transform: translate(0.5px, 0.5px) rotate(0deg); }
  10% {
    transform: translate(-0.5px, -1px) rotate(-0.5deg); }
  20% {
    transform: translate(-1.5px, 0px) rotate(0.5deg); }
  30% {
    transform: translate(1.5px, 1px) rotate(0deg); }
  40% {
    transform: translate(0.5px, -0.5px) rotate(0.5deg); }
  50% {
    transform: translate(-0.5px, 1px) rotate(-0.5deg); }
  60% {
    transform: translate(-1.5px, 0.5px) rotate(0deg); }
  70% {
    transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  80% {
    transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
  90% {
    transform: translate(0.5px, 1px) rotate(0deg); }
  100% {
    transform: translate(0.5px, -1px) rotate(-0.5deg); } }

.glad_placeholders {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  padding-top: 75px;
  max-width: 600px;
  margin: 0 10px; }
  .glad_placeholders .glad_list {
    display: none;
    background-color: #fff;
    padding-top: 20px; }
    .glad_placeholders .glad_list .glad_header {
      margin-bottom: 17px;
      position: relative; }
      .glad_placeholders .glad_list .glad_header:after {
        content: "";
        display: block;
        height: 3px;
        background-color: #e0e4f0;
        width: 100%;
        position: absolute;
        bottom: -9px;
        left: 0; }
    .glad_placeholders .glad_list .glad_item {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      width: 100%;
      padding: 7px; }
      .glad_placeholders .glad_list .glad_item div {
        background-color: #e0e4f0;
        height: 25px; }
    .glad_placeholders .glad_list .glad_date {
      display: block;
      width: 20%; }
    .glad_placeholders .glad_list .glad_amount {
      display: block;
      width: 15%; }
    .glad_placeholders .glad_list .glad_description {
      display: block;
      width: 50%; }
  .glad_placeholders .glad_pay {
    background-color: #fff;
    padding: 10px;
    position: relative; }
    .glad_placeholders .glad_pay:before {
      content: none;
      display: block;
      height: 3px;
      background-color: #e0e4f0;
      width: 100%;
      position: absolute;
      top: 24px;
      left: 0; }
    .glad_placeholders .glad_pay .glad_header {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-bottom: 21px; }
      .glad_placeholders .glad_pay .glad_header div {
        background-color: #e0e4f0; }
      .glad_placeholders .glad_pay .glad_header .glad_title {
        height: 25px;
        width: 50%;
        margin-bottom: 5px; }
      .glad_placeholders .glad_pay .glad_header .glad_subtitle {
        height: 17px;
        width: 75%; }
    .glad_placeholders .glad_pay .glad_action_wrap {
      display: flex;
      justify-content: space-around;
      align-items: center; }
    .glad_placeholders .glad_pay .glad_amount {
      color: #e0e4f0;
      font-size: 2.5rem; }
    .glad_placeholders .glad_pay .glad_button_wrap {
      width: 70%; }
    .glad_placeholders .glad_pay .glad_pay_button {
      display: flex;
      height: 54px;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      color: #fff;
      background-color: #e0e4f0;
      max-width: 300px;
      margin: 0 auto;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      border-radius: 5px; }
    .glad_placeholders .glad_pay .glad_logos {
      display: flex;
      justify-content: space-around;
      margin-top: 5px; }
      .glad_placeholders .glad_pay .glad_logos .glad_card {
        height: 45px;
        width: 45px; }
        .glad_placeholders .glad_pay .glad_logos .glad_card.glad_type_one {
          display: flex;
          justify-content: center;
          align-items: center; }
          .glad_placeholders .glad_pay .glad_logos .glad_card.glad_type_one:before {
            content: "";
            display: block;
            height: 25px;
            width: 25px;
            background-color: #e0e4f0;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
            opacity: 0.6;
            filter: alpha(opacity=60);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
          .glad_placeholders .glad_pay .glad_logos .glad_card.glad_type_one:after {
            content: "";
            display: block;
            height: 25px;
            width: 25px;
            margin-left: -10px;
            background-color: #e0e4f0;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
            opacity: 0.6;
            filter: alpha(opacity=60);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
        .glad_placeholders .glad_pay .glad_logos .glad_card.glad_type_two {
          display: block;
          position: relative;
          border: 1px solid #e0e4f0;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          border-radius: 4px; }
          .glad_placeholders .glad_pay .glad_logos .glad_card.glad_type_two:before {
            content: "";
            display: block;
            position: absolute;
            height: 12px;
            width: 70%;
            top: 8px;
            left: 2px;
            background-color: #e0e4f0; }
          .glad_placeholders .glad_pay .glad_logos .glad_card.glad_type_two:after {
            content: "";
            display: block;
            position: absolute;
            height: 12px;
            width: 65%;
            top: 23px;
            right: 2px;
            background-color: #e0e4f0; }
      .glad_placeholders .glad_pay .glad_logos .glad_bank {
        height: 45px;
        width: 45px; }
        .glad_placeholders .glad_pay .glad_logos .glad_bank:after {
          font-weight: 400;
          line-height: 45px;
          font-size: 2rem;
          color: #e0e4f0; }

@media screen and (min-height: 650px) {
  .glad_placeholders .glad_list {
    display: block; }
  .glad_placeholders .glad_pay {
    padding: 50px 10px 10px 10px; }
    .glad_placeholders .glad_pay:before {
      content: ""; } }

@media screen and (min-width: 620px) {
  .glad_placeholders {
    margin: 0 auto; } }