.formdesigner {
    display: grid;
    height: 100vh;
    grid-column-gap: 5px;
    grid-template-columns: 250px auto 300px;
    grid-template-rows: 50px auto 100px;
    background-color: #17A2B8;
    padding: 6px;
}

    .formdesigner .logo {
        grid-column: 1;
        grid-row: 1;
        color: black;
        background-color: #F3F4F5;
        border-radius: 5px;
        text-align: center;
        font-size: 1rem;
        margin: 6px;
    }

    .formdesigner .commands {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row: 1;
        color: black;
        background-color: #F3F4F5;
        border-radius: 5px;
        margin: 6px;
    }

    .formdesigner .workflow {
        grid-row: 2;
        background-color: white;
        border-radius: 5px;
        padding: 6px;
        margin: 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }


    .formdesigner .toolbar {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column: 1;
        padding: 6px;
    }

    .formdesigner .design-draft {
        grid-row: 2;
        background-color: white;
        border-radius: 5px;
        padding: 6px;
        margin: 6px;
        overflow-y: auto;
        overflow-x: hidden;
    }

        .formdesigner .design-draft div {
            padding: 10px;
            border: 1px dashed forestgreen;
        }

        .formdesigner .design-draft .card-body {
            border: none;
        }

        .formdesigner .design-draft div.input-group-append {
            padding: 0;
        }

        .formdesigner .design-draft .selected {
            border: dashed 1px red;
        }

    .formdesigner .output {
        grid-row: 3;
        grid-column-start: 1;
        grid-column-end: 4;
        border-top: solid 1px white;
        padding: 6px;
        overflow: scroll;
        overflow-x: hidden;
    }

    .formdesigner .properties-title {
        grid-row: 1;
        grid-column: 3;
        padding: 6px;
        border-radius: 5px;
        text-align: center;
        font-size: 1rem;
        margin: 6px;
        color: black;
        background-color: #F3F4F5;
    }

    .formdesigner .properties {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column: 3;
        padding: 6px;
    }

    .formdesigner .toolbar .row {
        background-color: white;
        margin: 3px;
        padding: 6px;
        border-radius: 6px;
    }

        .formdesigner .toolbar .row .col-sm {
            border: 1px dashed green;
            height: 30px;
        }

    .formdesigner .preview {
        min-height: 40px;
        border: 2px dashed green;
        padding: 12px;
    }

    .formdesigner .form-row {
        min-height: 38px;
        border: 1px dashed green;
        padding: 6px;
    }

    .formdesigner .form-row {
        min-height: 38px;
        border: 1px dashed green;
        padding: 6px;
    }

    .formdesigner .form-group {
        min-height: 38px;
        border: 2px dashed green;
        padding: 6px;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    .formdesigner .preview .tools {
        position: absolute;
        top: 2px;
        right: 2px;
        color: darkgreen;
    }


    .formdesigner form {
        border: dashed 1px green;
        min-height: 100px;
        padding: 10px;
    }


.pt-10 {
    padding-top: 10px;
}


.h-200 {
    overflow-y: auto;
    max-height: 200px;
}

.h-300 {
    overflow-y: auto;
    max-height: 200px;
}

.h-500 {
    overflow-y: auto;
    max-height: 500px;
}

.w-5 {
    width: 5% !important
}

.w-10 {
    width: 10% !important
}

.w-20 {
    width: 20% !important
}

.wd-100 {
    width: 100px !important;
}

.wd-200 {
    width: 200px !important;
}


.mini-button {
    color: white;
    padding: 4px 9px;
    border-radius: 3px;
    cursor: pointer;
}

button {
    filter: grayscale(0%);
    transition: 1s;
}


    button:disabled,
    button[disabled] {
        filter: grayscale(100%);
        transition: 0.2s;
    }


#spinner {
    display: none;
    position: fixed;
    background: rgba(0,0,0, .5);
    z-index: 99999999;
    height: 100%;
    width: 100%;
}

    #spinner .center {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }

        #spinner .center .inner {
            background-color: #f7f6f6;
            text-align: center;
            padding: 15px;
            border-radius: 10px;
        }


    #spinner .lds-facebook {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }

        #spinner .lds-facebook div {
            display: inline-block;
            position: absolute;
            left: 8px;
            width: 16px;
            background: #1DA0B5;
            animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
        }

            #spinner .lds-facebook div:nth-child(1) {
                left: 8px;
                animation-delay: -0.24s;
            }

            #spinner .lds-facebook div:nth-child(2) {
                left: 32px;
                animation-delay: -0.12s;
            }

            #spinner .lds-facebook div:nth-child(3) {
                left: 56px;
                animation-delay: 0;
            }

@keyframes lds-facebook {
    0% {
        top: 8px;
        height: 64px;
    }

    50%, 100% {
        top: 24px;
        height: 32px;
    }
}


.clickable {
    cursor: pointer;
}

.g-5 {
    gap: 5px;
}

.sticky-table {
    max-height: 300px;
    overflow-y: auto;
    display: block;
}

    .sticky-table table {
        width: 100%;
        table-layout: fixed;
    }


#userTable th, td {
    padding: 4px;
    text-align: left;
    border: 1px solid #ddd; /* Optional border for clarity */
    overflow:hidden;
    text-overflow:ellipsis;
}

#userTable thead th {
    position: sticky;
    top: -1px;
    background-color: #f4f4f4; /* Sticky header background */
    z-index: 1; /* Ensure headers are above table rows */
}