.input-serial {
    border: 1px solid;
    border-radius: 25px;
    text-transform: uppercase;
    width: 100%;
}

.btn-cadastro {
    background: #2f3493;
    color: #fff;
    border-radius: 25px;
    width: 300px;
}

.btn-cadastro:hover {
    background: #fff;
    color: #2f3493;
    border: #2f3493 1px solid;
    border-radius: 25px;
    width: 300px;
}

.capa-livro {
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.legend-valid {
    position: relative;
    top: -35px;
    text-align: center;
}

.form-user {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.div-serial {
    width: 40% !important;
}

@media(max-width:768px) {
    .form-user {
        display: block;
        ;
    }

    .div-serial {
        width: 100% !important;
    }
   
}


@media(max-width:1024px) {
    .div-serial {
        width: 100% !important;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 23%;
    }
}

@media(max-width:998px) {
    .div-serial {
        width: 100% !important;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 23%;
    }
}

@media(min-width:768px) {

    .col-md-2 {
        width: 23%;
    }
}

@media(max-width:576px) {
    .div-serial {
        width: 100% !important;
    }

    .col-3 {
        width: 23%;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 23%;
        padding: 3px;
    }

    .input-serial {
        font-size: 12px;
    }
    
}

@media(max-width:320px) {
    .div-serial {
        width: 100% !important;
    }

    .col-3 {
        width: 25%;
        padding: 1;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 25%;
    }
}