/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 #send_payment_paystation {
	box-shadow: 0px 10px 14px -7px #3dc21b;
	background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
	background-color:#44c767;
	border-radius:8px;
	display:block;
	margin: 0 auto;
	width: 300px; /* Set a standard width */
	height: 50px; /* Set a standard height */
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
	padding: 1px 0px;
	text-transform: uppercase;
}

.rdui-btn-txt{
  top:-5px;
}

 #cancel_payment_paystation {
  box-shadow: 0px 10px 14px -7px #eb675e;
  background:linear-gradient(to bottom, #eb675e 5%, #e4685d 100%);
  background-color:#e4685d;
  border-radius:8px;
  display:block;
  margin: 0 auto;
  width: 300px; /* Set a standard width */
  height: 50px; /* Set a standard height */
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:14px;
  font-weight:bold;
  margin-top: 15px;
  text-decoration:none;
  text-shadow:0px 1px 0px #2f6627;
  padding: 1px 0px;
  text-transform: uppercase;
}


.fa.fa-money, .fa-money:hover{
	color:white !important; 
}
.#send_payment_paystation:hover {
	background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
	background-color:#5cbf2a;
}
.#send_payment_paystation:active {
	position:relative;
	top:1px;
}
.paystation_btn_container{
	text-align: center;
	margin: 5px auto;
}



/*

 BUTTON  */
.rdui-btn {
  width: 180px;
}

.rdui-btn--complete {

  -webkit-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}

.rdui-btn-txt {
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

.rdui-btn-msg {
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  line-height: 59px;
  overflow: hidden;
}
.rdui-btn-msg.rdui-btn-msg--pending {
  /*background: rgba(145, 170, 157, 0.2);*/
  top: -5px;
}
.rdui-btn-msg.rdui-btn-msg--done {
  background: #cee1b2;
  color: rgba(25, 52, 65, 0.75) !important;
}

.rdui-btn-msg.rdui-btn-msg--show {
  height: 100%;
}
.rdui-btn-msg.rdui-btn-msg--hide {
  height: 0;
}

.rdui-line {
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

.rdui-btn--animate-border {
  position: relative;
  display: inline-block;
  font-size: 1em;
  text-transform: uppercase;
  padding: 20px 35px;
  outline: none;
  cursor: pointer;
  color: #91aa9d;
  background: #fbfaf9;
  border: none;
  -webkit-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}
.rdui-btn--animate-border i {
  color: #91aa9d;
  display: inline-block;
  margin-right: 5px;
  -webkit-transition: color 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}
.rdui-btn--animate-border ~ .rdui-line {
  position: absolute;
  background: rgba(25, 52, 65, 0.75);
  box-sizing: content-box;
  -webkit-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.25s cubic-bezier(0.77, 0, 0.175, 1);
}
.rdui-btn--animate-border ~ .rdui-line.rdui-line--top {
  top: -1px;
  left: -1px;
  height: 1px;
  width: 0;
}
.rdui-btn--animate-border ~ .rdui-line.rdui-line--bottom {
  bottom: -1px;
  right: -1px;
  height: 1px;
  width: 0;
}
.rdui-btn--animate-border ~ .rdui-line.rdui-line--left {
  bottom: -1px;
  left: -1px;
  height: 0;
  width: 1px;
}
.rdui-btn--animate-border ~ .rdui-line.rdui-line--right {
  top: -1px;
  right: -1px;
  height: 0;
  width: 1px;
}
.rdui-btn--animate-border:hover, .rdui-btn--animate-border:focus {
  color: rgba(25, 52, 65, 0.75);
  background: #fbfaf9;
}
.rdui-btn--animate-border:hover i, .rdui-btn--animate-border:focus i {
  color: rgba(25, 52, 65, 0.75);
}
.rdui-btn--animate-border:hover ~ .rdui-line--top, .rdui-btn--animate-border:focus ~ .rdui-line--top {
  width: 100%;
  padding-right: 1px;
}
.rdui-btn--animate-border:hover ~ .rdui-line--bottom, .rdui-btn--animate-border:focus ~ .rdui-line--bottom {
  width: 100%;
  padding-right: 1px;
}
.rdui-btn--animate-border:hover ~ .rdui-line--left, .rdui-btn--animate-border:focus ~ .rdui-line--left {
  height: 100%;
  padding-top: 1px;
}
.rdui-btn--animate-border:hover ~ .rdui-line--right, .rdui-btn--animate-border:focus ~ .rdui-line--right {
  height: 100%;
  padding-top: 1px;
}

.rdui-btn--animate-pending {
  color: rgba(25, 52, 65, 0.75);
}
.rdui-btn--animate-pending i {
  -webkit-animation: btn-pending-icon 0.5s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
  -moz-animation: btn-pending-icon 0.5s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
  animation: btn-pending-icon 0.5s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.rdui-btn--animate-cancel i {
  -webkit-animation: btn-cancel-icon 0.5s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
  -moz-animation: btn-cancel-icon 0.5s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
  animation: btn-cancel-icon 0.5s forwards cubic-bezier(0.6, -0.28, 0.735, 0.045);
}


.rdui-btn--animate-pending ~ .rdui-line--top {
  width: 0;
  left: 0;
  -webkit-animation: btn-pending-top 1s infinite cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -moz-animation: btn-pending-top 1s infinite cubic-bezier(0.895, 0.03, 0.685, 0.22);
  animation: btn-pending-top 1s infinite cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.rdui-btn--animate-pending ~ .rdui-line--right {
  height: 0;
  top: 0;
  -webkit-animation: btn-pending-right 1s 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: btn-pending-right 1s 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: btn-pending-right 1s 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}
.rdui-btn--animate-pending ~ .rdui-line--bottom {
  width: 0;
  right: 0;
  -webkit-animation: btn-pending-bottom 1s infinite cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -moz-animation: btn-pending-bottom 1s infinite cubic-bezier(0.895, 0.03, 0.685, 0.22);
  animation: btn-pending-bottom 1s infinite cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.rdui-btn--animate-pending ~ .rdui-line--left {
  height: 0;
  bottom: 0;
  -webkit-animation: btn-pending-left 1s 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-animation: btn-pending-left 1s 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: btn-pending-left 1s 0.5s infinite cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* KEYFRAMES AND TRANSITIONS  */
  opacity: 0;
}

.fade-in {
  opacity: 1;
}

@-webkit-keyframes btn-pending-icon {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(70px, -70px) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes btn-pending-icon {
  0% {
    -moz-transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    -moz-transform: translate(70px, -70px) scale(0);
    opacity: 0;
  }
}
@keyframes btn-pending-icon {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -o-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(70px, -70px) scale(0);
    -moz-transform: translate(70px, -70px) scale(0);
    -ms-transform: translate(70px, -70px) scale(0);
    -o-transform: translate(70px, -70px) scale(0);
    transform: translate(70px, -70px) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes btn-cancel-icon {
  100% {
    -moz-transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  0% {
    -moz-transform: translate(70px, -70px) scale(0);
    opacity: 0;
  }
}
@keyframes btn-cancel-icon {
  100% {
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -o-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  0% {
    -webkit-transform: translate(70px, -70px) scale(0);
    -moz-transform: translate(70px, -70px) scale(0);
    -ms-transform: translate(70px, -70px) scale(0);
    -o-transform: translate(70px, -70px) scale(0);
    transform: translate(70px, -70px) scale(0);
    opacity: 0;
  }
}
@-webkit-keyframes btn-pending-top {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@-moz-keyframes btn-pending-top {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes btn-pending-top {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@-webkit-keyframes btn-pending-bottom {
  0% {
    width: 0;
    right: 0;
  }
  50% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@-moz-keyframes btn-pending-bottom {
  0% {
    width: 0;
    right: 0;
  }
  50% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@keyframes btn-pending-bottom {
  0% {
    width: 0;
    right: 0;
  }
  50% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@-webkit-keyframes btn-pending-left {
  0% {
    height: 0;
    bottom: 0;
  }
  50% {
    height: 100%;
    bottom: 0;
  }
  100% {
    height: 0;
    bottom: 100%;
  }
}
@-moz-keyframes btn-pending-left {
  0% {
    height: 0;
    bottom: 0;
  }
  50% {
    height: 100%;
    bottom: 0;
  }
  100% {
    height: 0;
    bottom: 100%;
  }
}
@keyframes btn-pending-left {
  0% {
    height: 0;
    bottom: 0;
  }
  50% {
    height: 100%;
    bottom: 0;
  }
  100% {
    height: 0;
    bottom: 100%;
  }
}
@-webkit-keyframes btn-pending-right {
  0% {
    height: 0;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0;
    top: 100%;
  }
}
@-moz-keyframes btn-pending-right {
  0% {
    height: 0;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0;
    top: 100%;
  }
}
@keyframes btn-pending-right {
  0% {
    height: 0;
    top: 0;
  }
  50% {
    height: 100%;
    top: 0;
  }
  100% {
    height: 0;
    top: 100%;
  }
}
 
 .fade-out {
  opacity: 0;
}