/* Refinement ------------- */
.refinement-articles {
    padding: 1em;
    border: 1px rgb(180,149,102) dotted;
    border-radius: 5px;
    background-color: rgba(180,149,102,.1);
    margin-bottom: 1em;
}

    .refinement-articles h4 {
        text-transform: uppercase;
        margin-bottom: 5px;
    }

.refinement-row {
    margin-bottom: 1em;
    display: flex;
}

    .refinement-row span {
    }

    .refinement-row .refinement-descript {
        align-content: center;
        font-weight: 500;
    }

    .refinement-row .refinement-text {
        margin-left: auto;
        text-align: end;
    }

    .refinement-row .refinement-input {
        width: 100%;
        margin-left: auto;
    }

    .refinement-row input {
        width: calc(100% - 1em);
        height: 2rem;
        border-radius: 5px;
        border: 1px solid #333;
        background-color: #fff;
        margin: 0 0 0 1em;
        box-sizing: border-box;
    }

.refinement-select {
    width: 100%;
    background-color: #FFFFE6;
    margin-bottom: 20px;
}

.refinement-articles select:last-of-type {
    margin-bottom: 0px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.refinement-select.error {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    border: 2px solid red;
}