/* If you like this, please check my blog at codedgar.com.ve */
@import url('https://fonts.googleapis.com/css?family=Work+Sans');
body{
font-family: 'Work Sans', sans-serif;
background: #00d2ff; 
background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff); 
background: linear-gradient(to right, #3a7bd5, #00d2ff); 
/* Thanks to uigradients :) */
}

.card{
background:#16181a; border-radius:14px; max-width: 300px; display:block; margin:auto;
padding:60px; padding-left:20px; padding-right:20px;box-shadow: 2px 10px 40px black; z-index:99;position: relative;
}

.logo-card{max-width:50px; margin-bottom:15px; margin-top: -19px;}

label{display:flex; font-size:10px; color:white; opacity:.4;}

input, select{font-family: 'Work Sans', sans-serif;background:transparent; border:none; border-bottom:1px solid transparent; color:#dbdce0; transition: border-bottom .4s;}
input:focus{border-bottom:1px solid #1abc9c; outline:none;}

select:focus{background-color: #16181a;}

.cardnumber{display:block; font-size:20px; margin-bottom:8px; }

.name{display:block; font-size:15px; max-width: 200px; float:left; margin-bottom:15px;}

.toleft{float:left;}
.ccv{width:50px; margin-top:-5px; font-size:15px;}

.col{width:50%; float:left;}
.bought-item{background:#f5f5f5; padding:2px;}
.bought-items{margin-top:-3px;}

.cost{color:#3a7bd5;}
.seller{color: #3a7bd5;}
.description{font-size: 13px;}
.price{font-size:12px;}
.comprobe{text-align:center;}
.proceed{position:absolute; transform:translate(300px, 10px); width:50px; height:50px; border-radius:50%; background:#1abc9c; border:none;color:white; transition: box-shadow .2s, transform .4s; cursor:pointer;}
.proceed:active{outline:none; }
.proceed:focus{outline:none;box-shadow: inset 0px 0px 5px white;}
.sendicon{filter:invert(100%); padding-top:2px;}

.printb{position: absolute; transform: translate(-95px, 10px); width: 70px; border-radius: 5px; background: #1565C0; border: none; color: white; cursor: pointer;}
.salir{position: absolute; transform: translate(35px, 10px); width: 70px; border-radius: 5px; background: #006064; border: none; color: white; cursor: pointer;}

@media (max-width: 600px){
.proceed{transform:translate(250px, 10px);}
.col{display:block; margin:auto; width:100%; text-align:center;}
}

/*Pago correcto*/

.alert {
    background: #f8d7da;
    padding: 5px 10px;
    border-radius: 8px;
  }
    .animation-ctn{
        text-align:center;
        margin: 0 auto;
    }

    @-webkit-keyframes checkmark {
    0% {stroke-dashoffset: 100px}
    100% {stroke-dashoffset: 200px}
    }

    @-ms-keyframes checkmark {
    0% {stroke-dashoffset: 100px}
    100% {stroke-dashoffset: 200px}
    }

    @keyframes checkmark {
    0% {stroke-dashoffset: 100px}
    100% {stroke-dashoffset: 0px}
    }

    @-webkit-keyframes checkmark-circle {
    0% {stroke-dashoffset: 480px}
    100% {stroke-dashoffset: 960px;}
    }

    @-ms-keyframes checkmark-circle {
    0% {stroke-dashoffset: 240px}
    100% {stroke-dashoffset: 480px}
    }

    @keyframes checkmark-circle {
    0% {stroke-dashoffset: 480px}
    100% {stroke-dashoffset: 960px}
    }

    @keyframes colored-circle {
    0% {opacity:0}
    100% {opacity:100}
    }

    /* other styles */
    /* .svg svg {
    display: none
    }
    */
    .inlinesvg .svg svg {
    display: inline
    }

    /* .svg img {
    display: none
    } */

    .icon--order-success svg polyline {
    -webkit-animation: checkmark 0.3s ease-in-out 0.9s backwards;
    animation: checkmark 0.3s ease-in-out 0.9s backwards
    }

    .icon--order-success svg circle {
    -webkit-animation: checkmark-circle 0.6s ease-in-out backwards;
    animation: checkmark-circle 0.6s ease-in-out backwards;
    }
    .icon--order-success svg circle#colored {
    -webkit-animation: colored-circle 0.6s ease-in-out 0.7s backwards;
    animation: colored-circle 0.6s ease-in-out 0.7s backwards;
    }