.cp-info-search-container {
    min-width: 100px;
    margin: 1rem 0rem;
}

.cp-info-search-label {
    display: block;
}

.cp-info-search-error {
    display: none;
    margin-left: .4rem;
    font-weight: 600;
    font-size: 0.7rem;
    color: #e92a2e;
}

.cp-info-search-input {
    background-color: #ffffff !important;
    border-color: #eeeeee !important;
    border-width: 2px !important;
    -webkit-border-radius: 25px !important;
    border-radius: 25px !important;
    width: 300px !important;
    transition: width .7s ease-in-out;
}

.cp-info-search-submit {
    color: #ffffff !important;
    background-color: #00974b !important;
    border-radius: 25px 25px 25px 25px !important;
    border-color: #00974b !important;
    transition: width .7s ease-in-out;
}

.cp-info-search-submit:hover {
    background-color: #64b74a !important;
    border-color: #64b74a !important;
    transition: background-color 0.3s ease;
}

.cp-info-disclaimer {
    color: #ff0000;
    font-size: 0.8rem;
    font-weight: 400;
}

/* rule for mobile */
/* https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
@media screen 
and (min-device-width: 375px)
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {

    .cp-info-search-input {
        width: 100% !important;
        transition: width .7s ease-in-out;
    }

    .cp-info-search-submit {
        margin-top: .5rem;
        width: 100%;
        transition: width .7s ease-in-out;
    }
}

.is-visible {
    display: inline-block; 
}