/* CSS FOR SINGLE COLUMN */
.creditCardFormSglCol{
    max-width: 100%;
    border-style: dotted;
    padding: 30px;
    color: #4c4e56;
    border-radius:10px;
    display:grid;
}

.ownerdetailsSglCol{
    margin-top: 7px;
}
.ownerSglCol{
    width: 100%; 
    
}
.cvvSglCol{
    width: 22%;
    margin-top: 1%;
   
}
.cardNumberSglCol{
    /* width:100%; */
    margin-top:7px
}
.expiration-dateSglCol{
    display: flex;
}
.monthSglCol{
    margin-top:5px;
    padding: 2px;
}
.dateSglCol{
    margin-top:5px;
    padding:2px;
}
.imageSglCol{
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    grid-gap: .2em;
}
.input-control-successSglCol{
    border-bottom-color: green;
} 
.input-control-failureSglCol{
    border-bottom-color:red;
} 
.disable-component {
    opacity: .5;
    cursor: not-allowed;
}
/* CSS FOR DOUBLE COLUMN */

.creditCardForm{
    max-width: 100%;
    //background-color:lightblue;
    border-style: dotted;
    overflow: hidden;
    padding: 30px;
    color: #4c4e56;
    border-radius:10px;
    display:grid;
    grid-template-columns: repeat(1,2fr 1.5fr);
    grid-gap:0.5em;
    justify-items: stretch;
}
.cardNumber{
   grid-column: 1/3;
}
.expiration-date{
    display: grid;
    grid-template-columns: .2fr.1fr;
    grid-gap:.2em;
}
.expiration-date-label{
    display:grid;
    grid-template-columns: .1fr .3fr 3;
    grid-gap:.2em;
    /* grid-column: 1/3; */
}
.image{
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    grid-gap:.2em;
}
.image-label{
    display: grid;
    grid-template-columns: .1fr .1fr .1fr;
    grid-gap:.2em;
    padding-top: 2em;
}
.cvv{
    /* width:25%; */
    display: grid;
}
.exp-month-date-label{
    display:grid;
    grid-template-columns: .1fr .1fr;
    grid-gap: .2em;
    padding-top: 9px;
}
@media(max-width:500px){
    .creditCardForm{
        display: block;
        padding: 2em;
    }
}
.input-control-success{
    border-bottom-color: green;
} 
.input-control-failure{
    border-bottom-color:red;
}