/* TODO: Añadir animaciones */
.contact-card {
    display: flex;
    width: 50%;
    align-items: start;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 5px;
}

.contact-card svg {
    display: none;
    margin: 3px;
    fill: rgba(3, 162, 155, 1);
}

.contact-card.active svg,
.contact-card:hover svg {
    display: inline-block;
}

.contact-card.active,
.contact-card:hover {
    border: 2px solid rgba(3, 162, 155, 1);
}

.contact-input {
    display: none;
}

.contact-submit {
    width: 100%;
    background: rgb(104, 201, 153);
    background: linear-gradient(90deg,
    rgba(104, 201, 153, 1) 0%,
    rgba(3, 162, 155, 1) 100%);
    border: 2px solid rgb(104, 201, 153);
    color: white;
    box-shadow: 0 0 18px 4px #cbcbcb54;
    border-radius: 30px;
    font-size: 22px;
    margin-top: 42px;
}

/* Colores Loading busq doc */
.lds-ellipsis div:nth-child(1) {
    background: #1bbf80;
}

.lds-ellipsis div:nth-child(2) {
    background: #1ea56b;
}

.lds-ellipsis div:nth-child(3) {
    background: #198a57;
}

.lds-ellipsis div:nth-child(4) {
    background: #1a7946;
}