/*FONTS*/
@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=Poppins:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,800|Poppins:300,400,600,900&display=swap');

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(31, 45, 61, 0);
}

body {
    margin: 0;
    font-family: "Poppins", "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: #6c6c6c;
    text-align: left;
    background-color: #FFF;
}

.bg{
    background: #5d78ff;
    height: 330px;
    position: absolute;
    width: 100%;
}

.wrapper{
    max-width: 800px;
    margin: auto;
    position: relative;
    padding: 70px 25px 0;
}

.wrapper .header{
    text-align: center;
    color: #fff;
    z-index: 10;
}

.wrapper .header .lable{
    text-transform: uppercase;
    font-size: 16px;
}
.wrapper .header .title{
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 600;
}
.wrapper .header .desc{}

.wrapper .payment-info{
    background: #fff;
    border-radius: 6px;
    margin-top: 30px;
    z-index: 100;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 35px rgba(140, 152, 164, 0.125) !important;
}

.wrapper .payment-info .payment-change .name{
    position: relative;
    top: -19px;
}

.wrapper .payment-info .payment-change .i-switch.i-switch--outline.i-switch--info input:empty ~ span:before {
    border: 2px solid #dee3eb;
    background: #fff;
}

.wrapper .payment-info .payment-change .i-switch.i-switch--outline.i-switch--info input:empty ~ span:after {
    background: #5578eb;
}

.wrapper .payment-info .desc{
    font-weight: bold;
}
.wrapper .payment-info .price{
    font-weight: bold;
    font-size: 50px;
}
.wrapper .payment-info .date,
.wrapper .payment-info .time{

}
.wrapper .payment-info .date .text,
.wrapper .payment-info .time .text
{ text-transform: uppercase; }
.wrapper .payment-info .date .value,
.wrapper .payment-info .time .value{

}

.wrapper .payment-method{
    margin-top: 25px;
}

.wrapper .payment-method .headline{
    margin-top: 20px;
    font-size: 20px;
    margin-bottom: 30px;
}

.wrapper .payment-method .payment-method-item{
    padding: 20px;
    min-height: 90px;
    display: block;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 0 35px rgba(140, 152, 164, 0.125) !important;
    margin-bottom: 20px;
}

.wrapper .payment-method .payment-method-item .payment-logo{
    width: 50px;
    height: 50px;
    position: absolute;
}

.wrapper .payment-method .payment-method-item .payment-logo img{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #f4f4f4;
    padding: 2px; 
}

.wrapper .payment-method .payment-method-item .payment-detail{
    position: relative;
    left: 75px;
    color: #6c6c6c;
}

.wrapper .payment-method .payment-method-item .payment-detail .title{
    font-weight: bold;
    margin-top: 2px;
}

.wrapper .payment-method .payment-method-item .payment-detail .desc{
    opacity: 0.7;
}

.wrapper .payment-method .payment-method-item .payment-go{
    position: absolute;
    opacity: 0.5;
    right: 20px;
    top: 30px;
    font-size: 20px;
}


.wrapper .payment-coupon{
    background: #fff;
    border-radius: 6px;
    margin-top: 30px;
    z-index: 100;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 35px rgba(140, 152, 164, 0.125) !important;
}