/*!
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content 
*/

.sac-node {
    min-width: 100px;
    min-height: 64px;
    border-radius: 10px;
    background-color: #808080;
    border: 2px solid #e8e8e8;
    -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    padding: 1em;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
}

    .sac-node .sac-node-grid {
        display: grid;
        grid-template-columns: auto minmax(40px, 120px);
    }

        .sac-node .sac-node-grid .sac-node-label {
            min-width: 40px;
            text-align: right;
            margin-right: 4px
        }

        .sac-node .sac-node-grid .sac-node-field {
            text-shadow: 2px 2px 1.6px black;
            text-align: left;
        }

        .sac-node .sac-node-grid .sac-node-edit {
            min-width: 40px;
            max-width: 100px;
        }

    .sac-node.selected {
        border: 2px solid #6e9fd4;
    }

        .sac-node.selected .diagram-port {
            border: 2px solid #6e9fd4;
        }

    .sac-node .diagram-port, .default.diagram-group .diagram-port {
        width: 16px;
        height: 16px;
        margin: -10px;
        border-radius: 50%;
        background-color: #f5f5f5;
        border: 2px solid #d4d4d4;
        cursor: pointer;
        position: absolute;
    }

        .sac-node .diagram-port:hover, .sac-node .diagram-port.has-links, .default.diagram-group .diagram-port.has-links {
            background-color: black;
        }

        .sac-node .diagram-port.bottom, .default.diagram-group .diagram-port.bottom {
            bottom: 0px;
            left: 50%;
        }

        .sac-node .diagram-port.bottomleft, .default.diagram-group .diagram-port.bottomleft {
            bottom: 0px;
            left: 0px;
        }

        .sac-node .diagram-port.bottomright, .default.diagram-group .diagram-port.bottomright {
            bottom: 0px;
            right: 0px;
        }

        .sac-node .diagram-port.top, .default.diagram-group .diagram-port.top {
            top: 0px;
            left: 50%;
        }

        .sac-node .diagram-port.topleft, .default.diagram-group .diagram-port.topleft {
            top: 0px;
            left: 0px;
        }

        .sac-node .diagram-port.topright, .default.diagram-group .diagram-port.topright {
            top: 0px;
            right: 0px;
        }

        .sac-node .diagram-port.left, .default.diagram-group .diagram-port.left {
            left: 0px;
            top: 50%;
        }

        .sac-node .diagram-port.right, .default.diagram-group .diagram-port.right {
            right: 0px;
            top: 50%;
        }

.group-container {
    width: 100%;
    height: 100%;
    border: 3px solid mediumpurple;
    border-radius: 10px;    
}

    .group-container .title {
        position: absolute;
        right: 0px;
        top: 0;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 20px;
        padding-right: 24px;
        text-align: center;
        font-weight: 500;
        text-shadow: 2px 2px 1.6px black;
        border-bottom-left-radius: 10px;
        border-left: 2px solid mediumpurple;
        border-bottom: 2px solid mediumpurple;
    }

    .group-container.selected {
        border: 4px solid #6e9fd4;
    }