.fks-front-plate {
    width: 100%;
    height: 100px;
    background-color: #e1e1e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8f9fa;
    border: 0px solid #ccc;
}

/*@media screen and (min-width:0px) and (max-width:1024px) {
    .fks-front-plate {
        width: 100%;
        height: 60px;
        background-color: #e1e1e1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f8f9fa;
        border: 0px solid #ccc;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
    }
}*/

.fks-back-plate {
    width: 100%;
    height: 100px;
    background-color: #ffd800;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f8f9fa;
    border: 0px solid #ccc;
}

@media screen and (min-width:0px) and (max-width:1024px) {
    .fks-front-plate {
        width: 100%;
        height: 60px;
        background-color: #e1e1e1;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f8f9fa;
        border: 0px solid #ccc;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
    }
    .fks-back-plate {
        width: 100%;
        height: 60px;
        background-color: #ffd800;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f8f9fa;
        border: 0px solid #ccc;
        box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
    }
}

.fks-numberplate-input {
    width: 100%;
    height: 100%;
    text-align: center; /* horizontal text centering */
    color: black;
    background: transparent;
    border: none;
    outline: none;
    font-family: charles-wright;
    font-size: calc(0.6 * 100px); /* adjust as needed */
    text-transform: uppercase;
    line-height: 100px; /* vertical centering trick */
    padding: 0;
}

@media screen and (min-width:0px) and (max-width:1024px) {
    .fks-numberplate-input {
        width: 100%;
        height: 100%;
        text-align: center; /* horizontal text centering */
        color: black;
        background: transparent;
        border: none;
        outline: none;
        font-family: charles-wright;
        font-size: calc(0.2 * 100px); /* adjust as needed */
        text-transform: uppercase;
        line-height: 100px; /* vertical centering trick */
        padding: 0;
    }
}

.fks-upper {
    text-transform: uppercase;
}

.fks-input {
    width: 75%;
}

@media screen and (min-width:0px) and (max-width:1024px) {
    .fks-input {
        width: 100%;
    }
}