.container {
    /* max-width: max-content; */
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 2rem;
    row-gap: 1rem;   
}

.input {
    max-width: max-content;
    margin: auto;
    grid-column: 2/3;

}

#input-disp {
    color: gray;
}

#card-num {
    min-height: 30px;
    border-style: solid;
    border-width: 2px;
    border-color: #0081CB;
    border-radius: 10px;
}

.keypad {
    /* width: 300px;
    height: 400px; */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: .5rem;
    row-gap: .5rem;
}

.hideinput {
    max-width: max-content;
    margin: auto;    
    display: none;
    visibility: hidden;
}

.key {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 2.2em;
    padding: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: #0081CB;
    border-radius: 10px;
}

.inactive {
    background-color: aliceblue;
}

.active {
    background-color: rgb(219, 237, 253);
}

.click {
    background-color: rgb(165, 211, 251);
}

#logout-button {
    display: none;
    width: 100px;
}

#numInput {
    margin-bottom: 25px;
    width: 284px;
    height: 40px;
    text-transform: uppercase;
    font-size: small;
}

h1 {
    text-align: center;
    font-size: 3em;
}

.msg {
    display: none;
    visibility: hidden;
}

.msg-show {
    width: 300px;
    height: 400px;
    display: grid;
    visibility: visible;
    max-width: max-content;
    margin: auto;

}

/* Format holds list */

.list {
    width: 400px;
    display: grid;
    visibility: visible;
    max-width: max-content;
    margin: auto;
}


.holdItem {
    font-size: 1.25em;
    line-height: normal;
    max-width: max-content;
    /* border-style: solid; */
    border-width: 2px;
    border-color: #0081CB;
    border-radius: 10px;
    padding: 20px;
    margin: auto;
    margin-bottom: 20px;
}

.holdImg {
    /* border-style: solid;
    border-width: 2px;
    border-color: rgb(17, 33, 63);
    border-radius: 10px; */
    width: 100px;
    padding: 4px;
}

.holdText {
    text-align: left;
    font-size: 1.5em;
    padding: 10px;
}

.loader {
    width: 200px;
    height: 140px;
    background: #979794;
    box-sizing: border-box;
    position: relative;
    border-radius:8px;
    perspective: 1000px;
    margin:auto;
    display: block;
}

.loader:before{
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 10px;
    bottom: 10px;
    border-radius:8px;
    background: #f5f5f5  no-repeat;
    background-size: 60px 10px;
    background-image: 	linear-gradient(#ddd 100px, transparent 0) ,
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0);
    
    background-position: 15px 30px , 15px 60px , 15px 90px, 
            105px 30px , 105px 60px , 105px 90px;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
}
.loader:after {
    content: '';
    position: absolute;
    width: calc(50% - 10px);
    right: 10px;
    top: 10px;
    bottom: 10px;
    border-radius: 8px;
    background: #fff no-repeat;
    background-size: 60px 10px;
    background-image: linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0), 
            linear-gradient(#ddd 100px, transparent 0);
    background-position: 50% 30px ,50% 60px , 50%  90px;
    transform: rotateY(0deg );
    transform-origin: left center;
    animation: paging 1s linear infinite;
}


@keyframes paging {
    to {
    transform: rotateY( -180deg );
    }
}

#hideloader {
    display: none;
}