.required_fields {
    color: red;
    font-weight: bold;
}


input[class=obligatorio]{

    /*
    Para el borde exterior
    border:1px solid #FF0000;
    */
}


/* CAMPOS IMPUT OBLIGATORIOS */
input[class=obligatorio]::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;  !important;
}

input[class=obligatorio]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    red;  !important;
    opacity:  1;
}

input[class=obligatorio]::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    red;  !important;
    opacity:  1;
}

input[class=obligatorio]:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    red;  !important;
}


/*Para que no pierda el color rojo el placeholder al dar error la validación js del campo */
input.obligatorio.error::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;  !important;
}

input.obligatorio.error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    red;  !important;
    opacity:  1;
}

input.obligatorio.error::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    red;  !important;
    opacity:  1;
}

input.obligatorio.error:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    red;  !important;
}


/* Intentando quitar el relleno amarillo de los formulario autocompletados por el Chrome
input[type="text"], input[type="password"], textarea, select {
    outline: none;
    :focus { background-color: #fff; }
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

input:webkit-autofill, select:-webkit-autofill {
    background-color: red;
    background-image: none;
    color: rgb(0, 0, 0);
}
*/

label.error {
    color: red;
    font-weight: bold;
}

label.warning {
    color: orange;
    font-weight: bold;
}

.recuadro {
    border: black 2px solid;
    padding: 10px;
}

.help, p.help, form p.help {
    color: #999;
    font-size: 11px;
}

.requireds input{
  border-color: #ff8000 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input .datepicker{
    width: 100% !important;
}

.badge-purple {
    background: #ae00ff;
    font-size: 16px;
}

.badge-warning{
    background: #ffac09;
    font-size: 16px;
}

.item_cita {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.item_cita_name {
    max-width: 30rem;
    min-width: 30rem;
}

.item_cita_puesto {
    display: grid;
    max-width: 25rem;
    min-width: 25rem;
}

.item_cita_empresa {
    display: grid;
    max-width: 30rem;
}

.item_cita_telf {
    display: grid;
    max-width: 7rem;
}

.item_cita_buttons {
    display: flex;
    justify-content: end;
    gap: 1rem;
}

@media screen and (max-width: 480px) {
    .item_cita {
        display: inline-block;
    }
}

@media screen and (max-width: 850px) {
    .item_cita {
        display: inline-block;
    }

    .item_cita_buttons {
        display: grid;
        justify-content: start;
        gap: 1rem;
    }
}

@media screen and (max-width: 1200px) {
    .item_cita_name {
        max-width: 15rem;
        min-width: 15rem;
    }

    .item_cita_puesto {
        display: grid;
        max-width: 10rem;
        min-width: 10rem;
    }

    .item_cita_empresa {
        display: grid;
        max-width: 30rem;
    }

    .item_cita_telf {
        display: grid;
        max-width: 7rem;
    }

    .item_cita_buttons {
        display: grid;
        justify-content: end;
        gap: 1rem;
    }
}

@media screen and (max-width: 1400px) {
    .item_cita_name {
        max-width: 20rem;
        min-width: 20rem;
    }

    .item_cita_puesto {
        display: grid;
        max-width: 15rem;
        min-width: 15rem;
    }

    .item_cita_empresa {
        display: grid;
        max-width: 30rem;
    }

    .item_cita_telf {
        display: grid;
        max-width: 7rem;
    }

    .item_cita_buttons {
        display: grid;
        justify-content: end;
        gap: 1rem;
    }
}