/* input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
textarea  */
.input-field {
    background: none;
    outline: none;
    font-size: 1rem;
    /* font-weight: bold; */

    width: 100%;
    padding: 1em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--light-grey);
    color: black;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin:0;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--light-grey);
    opacity: 1;
    }
  /* Internet Explorer 10-11 */
  :-ms-input-placeholder { color: var(--light-grey); }
  /* Microsoft Edge */
  ::-ms-input-placeholder { color: var(--light-grey); }

.input-box {
    position: relative;
    margin-top: 1rem;

}

.input-box label {
    position: absolute;
    top: 0;left: 0;
    transform: translate(1em, -50%);
    background-color: #fff;
    padding: 0px 0.5em;
    color: #58A400;
    border-radius: 4px;
}
.mm-suffix-input {
    position: relative !important;
  }
.mm-suffix-input::after {
    content: 'mm';
    /* position: absolute; */
    /* right: 5px; Adjust the position as needed */
    /* pointer-events: none; */
    /* color: #000; Set the color to match your design */
  }

.submit-btn{
    font-size: 1rem;
    cursor: pointer;
    margin: 0 auto;
}

.submit-btn:hover {
    background-position: right center; /* change the direction of the change here */
}


/* Components */
/* .button-primary {
    border: none;
    outline: none;
    text-decoration: none;
    font-size: 1rem;
    padding: 1em 2em;
    display: inline-block;
    
    cursor: pointer;
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: bold;
} */
/* .button-primary:hover {
    background-color: var(--color-primary-hover);
} */

/* .button-secondary2 {
    border: none;
    outline: none;
    text-decoration: none;
    padding: 1em 2em;
    font-size: 0.83rem; 
    display: inline-block;
    cursor: pointer;
    
    color: white;
    font-weight: bold;
    border-radius: var(--radius-sm);
    background-color: var(--color-dark);
    background-color: red ;

    }.button-secondary:hover {
        background-color: var(--color-dark-hover);
    }

    .button-secondary:disabled {
        opacity: 0.6; cursor: not-allowed;
    } */

.button-grey {
    font-size: 1rem;
    padding: 1em 2em;
    
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
    text-decoration: none;
    color: var(--grey);
    border: 1px solid var(--grey);
    border-radius: var(--radius-sm);
    font-weight: bold;
}
.button-grey:hover {
}

.link-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    /* text-align: right; */
    color: var(--text-secondary);
    /* font-size: 1rem; */
}

.link{
    display: block;
    color: rgb(148, 148, 148);
    text-align: center;
    padding: 1em 0px;
}

.text-grey {
    color: var(--grey);
}

.special-hover {
    position: relative;
}

.special-hover::before {
    position: absolute;
    background-color: var(--color-primary);
    width: 100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -35px;
    left: 50%;
    border-radius: 8px;
    transform: translateX(-50%);
    color: white;
    /* z-index: 999; */
    display: none; /* initially hide */
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}

.special-hover:hover::before {
    display: flex; /* show on hover */
}

.pause-btn::before { content: 'Pausar/Reanudar'; width: 150px;}
.edit-btn::before { content: 'Editar'; }
.delete-btn::before { content: 'Eliminar'; }
.message-btn::before { content: 'Ofertas'; }