/*.valid.modified:not([type=checkbox]) {
    outline: 1px solid #76BC21;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}*/

.is-invalid {
    border: 1px solid red !important;
}




.diagram-container {
    width: 100%;
    height: 600px;
    border: 1px solid #DFE5EF;  Just visual 
}

 Estilo base para los puertos 
.diagram-port {
    position: absolute;
    width: 10px;
    height: 15px;
    background-color: black;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer
}

.diagram-container {
    width: 100%;
    height: 600px;
    border: 1px solid #DFE5EF; /* Just visual */
}

/* Estilo base para los puertos */
.diagram-port {
    position: absolute;
    width: 10px;
    height: 15px;
    background-color: black;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer
}

    /* Puerto superior */
    .diagram-port.top {
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        top: -5px; /* Posicionado justo fuera del borde superior */
        left: 50%; /* Centrado horizontalmente */
    }

    /* Puerto inferior */
    .diagram-port.bottom {
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        bottom: -5px; /* Posicionado justo fuera del borde inferior */
        left: 50%; /* Centrado horizontalmente */
    }

    /* Puerto izquierdo */
    .diagram-port.left {
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
        left: -5px; /* Posicionado justo fuera del borde izquierdo */
        top: 50%; /* Centrado verticalmente */
        transform: translate(-50%, -50%);
    }

    /* Puerto derecho */
    .diagram-port.right {
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        right: -5px; /* Posicionado justo fuera del borde derecho */
        top: 50%; /* Centrado verticalmente */
        transform: translate(50%, -50%);
    }

    .diagram-port:hover {
        background-color: gray;
        /* transform: scale(1.1);*/
    }



code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}