.invalid-feedback {
        display: block;
    }

    @media (max-width: 575.98px) {
        /* Extra small devices (portrait phones, less than 576px) */
        .input-group {
            flex-direction: column;
        }

        .input-group-append {
            margin-top: 10px;
        }

        .input-group-text {
            width: 100%;
        }

        .btn-block {
            width: 100%;
        }

        .col-8,
        .col-4 {
            width: 100%;
            text-align: center;
        }

        .col-4 {
            margin-top: 10px;
        }
    }

    @media (min-width: 576px) and (max-width: 767.98px) {
        /* Small devices (landscape phones, 576px and up) */
        .col-8 {
            width: 66.66667%;
        }

        .col-4 {
            width: 33.33333%;
        }
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        /* Medium devices (tablets, 768px and up) */
        .col-8 {
            width: 66.66667%;
        }

        .col-4 {
            width: 33.33333%;
        }
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        /* Large devices (desktops, 992px and up) */
        .col-8 {
            width: 66.66667%;
        }

        .col-4 {
            width: 33.33333%;
        }
    }

    @media (min-width: 1200px) {
        /* Extra large devices (large desktops, 1200px and up) */
        .col-8 {
            width: 66.66667%;
        }

        .col-4 {
            width: 33.33333%;
        }
    }