@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);

input[type="text"], input[type="password"], textarea {
    border-radius: 3px;
    text-transform: uppercase;
    font-family: inherit;
    color: #000;
    border: 1px solid black;
}

.card{
    width: 75%;
}
.input-5 {
    width: 5ch;
}

.input-10 {
    width: 10ch;
}

.input-15 {
    width: 15ch;
}

.input-20 {
    width: 20ch;
}

.input-25 {
    width: 25ch;
}

.input-30 {
    width: 30ch;
}

.input-40 {
    width: 40ch;
}

.input-50 {
    width: 50ch;
}

.input-60 {
    width: 60ch;
}

.input-70 {
    width: 70ch;
}

.input-850 {
    width: 850px;
}

.containerinputs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 8px;
}

.containerinputs > div {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: flex-start;
    align-items: flex-start;
}

@media (max-width: 768px) {
    /*.form-group.row > div {*/
    /*    width: 100%;*/
    /*}*/
    /*.form-group.row input,*/
    /*.form-group.row select {*/
    /*    width: 100% !important;*/
    /*}*/
    .card{
        width: 100%;
    }
    .input-20 {
        width: auto;
    }

    .input-30 {
        width: auto;
    }

    .input-40 {
        width: auto;
    }

    .input-60 {
        width: auto
    }

    .input-70 {
        width: auto
    }

    .input-850 {
        width: auto
    }

    .containerinputs {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }


    .containerinputs > div > label, .containerinputs > div > span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .containerinputs > div > input, .containerinputs > div > textarea {
        flex: 1 1 auto;
        min-width: 10ch; /* ancho mínimo */
        max-width: 100%; /* no rompe el contenedor */
    }
}