/* TOOLTIPS */
.tooltip-inner {
    background-color: #ce6666;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #ce6666;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #ce6666;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #ce6666;
}
.tooltip.left .tooltip-arrow {
    border-left-color: #ce6666;
}

input.ng-dirty.ng-invalid {
    border: 2px solid #ce6666;
}

/* clases internas de la directiva spValidate */
.spTooltipForm {
    position: absolute;
    z-index: 1000;
    display: table;
}

.spTooltipForm.spT1-top {
    bottom: calc(100% + 5px);
}

.spTooltipForm.spT1-bottom {
    top: calc(100% + 5px);
}

.spTooltipForm.spT1-right {
    left: calc(100% + 5px);
    top:50%;
    transform: translate(0, -50%);
}

.spTooltipForm.spT1-left {
    right: calc(100% + 5px);
    top:50%;
    transform: translate(0, -50%);
}

.spTooltipForm.spT2-left {
    left: 0px;
}
.spTooltipForm.spT2-center {
    left: 50%;
    transform: translate(50, 0);
}
.spTooltipForm.spT2-right {
    right: 15px;
}

/* ==== Añadir esta clase a los contenedores de los input de spValidate si es necesario ==== */
.sp-tooltip-relative {
    position: relative !important;
}

/* validación  */
/* Importante no cambiar el orden de las siguientes reglas */

form.verErrors .ng-invalid {
    border: 2px solid #ce6666 !important;
}

form.ng-invalid button[sp-validate-form] {
    color: #cacaca;
    background-color: #1dc5a3;
    border-color: #1dc5a3;
}

form.ng-invalid button[sp-validate-form]:hover {
    cursor: not-allowed;
}

form.ng-valid button[sp-validate-form] {
    color: #FFFFFF;
    background-color: #1ab394;
    border-color: #1ab394;
}

form.ng-valid button[sp-validate-form]:hover {
    cursor: pointer;
}