.m-auto {
    margin: auto !important;
}

.mt-1, .my-1 {
    margin-top: 0.25rem !important;
}

.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}

.justify-content-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.text-right {
    text-align: right !important;
}

.d-block {
    display: block !important;
}

.justify-content-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.willFlip {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    border-radius: .50rem;
    height: 260px;
    position: relative;
    z-index: 99999;
    box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.15);
    color: white;
    background-color: transparent;
    border: 1px solid #ccc;
}

.willFlip .col-md-6,.willFlip .col-md-3,.willFlip .col-md-12 {
    float:none!important
}

.willFlip .row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.willFlip .row:before,.willFlip .row:after{
    display:none!important
}

.willFlip .card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
padding: 1.25rem;
}

.willFlip span {display:block}

.front{
    background-color: #000521;
    border-radius: 5px;
    box-shadow: 3px 10px 20px 0px rgb(73, 79, 111);
}

.back{
    background-color: #000521;
    border-radius: 5px;
    box-shadow: 3px 10px 20px 0px rgb(73, 79, 111);
}

.back-middle {
    margin-top: .5rem;
}

.content-parent {
    height: 80vh;
}

#cardCcv{
    text-align: right;
    font-size: 18px;
    font-weight: bold;
}

.front input{
    background-color: transparent!important;
    color: white;
    font-size: 23px;
    border: none;
    padding-left: 0;
    padding-right: 0;
}

.front input::placeholder{
    color: white;
    font-size: 23px;
}

#expiredMonth{
    text-align: right;
}

#cardNumber{
    font-size: 33px;
    text-align: center;
    letter-spacing: 1px;
    height: 100%;
}

.willActive{
    border: solid 1px white!important;
}

.content-date-input{
    position: relative;
}

#cardHolderValue{
    text-overflow: ellipsis;
}

.card-bar{
    margin-top: 10%;
    background: #ffffff52;
    height: 40px;
}

.back .card-body{
    padding: 0;
}

.bd-highlight{
    margin-top: -15px;
    height: 85px;
}

.github-link{
    position: absolute;
    right: 20px;
    top: 20px;
}

.slash-text {
    margin:-2.5px 5px 0
}

@media screen and (max-width: 1200px) and (min-width: 750px){
    .col-md-6 {
        -ms-flex: 0 0 79%;
        flex: 0 0 79%;
        max-width: 79%;
    }

    #cardNumber {
        font-size: 38px;
        text-align: center;
        letter-spacing: 1px;
    }
}

@media screen and (max-width: 748px){
    .content-date-input{
        position: relative;
        right: -38px;
    }
}

.card[data-card-type="mastercard"] .front, .card[data-card-type="mastercard"] .back
{
    background:#F79E1B;
}

.card[data-card-type="visa"] .front, .card[data-card-type="visa"] .back
{
    background:#1a1f71;
}

.card[data-card-type="amex"] .front, .card[data-card-type="amex"] .back
{
    background:#016FD0;
}

.card[data-card-type="discover"] .front, .card[data-card-type="discover"] .back
{
    background:#922F0B;
}

.card[data-card-type="troy"] .front, .card[data-card-type="troy"] .back
{
    background:#24B8C9;
}

@media screen and (max-width: 500px){
    #cardNumber{
        font-size: 25px;
    }

    .front input{
        background-color: transparent!important;
        color: white;
        font-size: 18px;
        border: none;
        padding-left: 0;
        padding-right: 0;
    }

    .front input::placeholder{
        color: white;
        font-size: 18px;
    }
    .slash-text{
        padding: 0px!important;
    }
}

@media screen and (max-width: 420px){
    .content-date-input{
        right: -23px;
    }
}