.click-mouse {
    cursor: pointer;
}

.click-mouse-text {
    cursor: pointer;
}

    .click-mouse-text:hover {
        text-decoration: underline;
    }

.bgs {
    background-color: #eee;
}


/*.ns {
    background-color: #f7f7f7;
}
*/
.bg-color {
    background-color: #e8eef3;
}

.diagram-container {
    width: 100%;
    height: calc(100% - 52px);
    overflow-y: scroll;
}

.number-frame {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 5px 1px 1px 1px;
    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;
    /*font: 32px Arial, sans-serif;*/
    position: absolute;
    right: 0;
}


.iconA{
    background-color:black;
    border-radius: 50%;
}

    .iconA:hover {
        background-color: blueviolet;
        border-radius: 50%;
    }

.tooltipuser {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltipuser .tooltipusertext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
    }

    .tooltipuser:hover .tooltipusertext {
        visibility: visible;
    }

.boxed {
    border: 1px solid #0094ff;
    padding: 5px;
    border-radius: 10%;
    background-color: #0094ff;
    z-index: 1;
}

.user_box {
    background-color: #cbd3d9;
}

.form_box {
    background-color: #cbd3d9;
}

.pointer-user-dropdown:hover {
    cursor: pointer;
    background-color: aliceblue;
}

.user-dropdown{
    padding:5px;
}


/*.chip {*/
    /* display: inline-block; */
    /*padding: 0 25px;
    height: 118px;*/
    /* font-size: 16px; */
    /* line-height: 50px; */
    /* border-radius: 25px; */
    /*background-color: #f1f1f1;
    padding: 3%;
}*/

.dropdown-menu-bar {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    display: none;
    border: 2px solid #0003;
    background-color: white;
    min-width: 500%;
    margin-top: 15px;
    margin-left: -385%;
    border-radius: 0%;
}

.floating-form {
    position: absolute;
    top: 10%;
    right: 9%;
    z-index: 1;
    max-width: 400px;
}


.floating-save {
    position: absolute;
    top: 10%;
    right: 13%;
    z-index: 1;
    max-width: 400px;
}



.diagram-canvas.grid {
    background-size: 50px 50px;
    /* background-image: linear-gradient(to right, rgb(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgb(0, 0, 0, 0.05) 1px, transparent 1px);*/
    background-image: linear-gradient(to right, rgb(0 0 0 / 11%) 1px, transparent 1px), linear-gradient(to bottom, rgb(0 0 0 / 18%) 1px, #e8eef3 1px);
}

/* Scroll Bar*/
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0px 0px 10px 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Hide the scroll bar*/
@media (max-width: 768px ) {
/*    ::-webkit-scrollbar {
        display: none;
    }*/

    /* Scrollbar */
/*    ::-webkit-scrollbar {
        width: 10px;
    }*/

    /* Track */
    /*::-webkit-scrollbar-track {
        background: rgba(241, 241, 241, 0.5);*/ /* Adjust the alpha value (0.5) for transparency */
        /*border-radius: 0px 0px 10px 0px;
        display: none;
    }*/

    /* Handle (Thumb) */
    /*::-webkit-scrollbar-thumb {
        background: rgba(136, 136, 136, 0.5);*/ /* Adjust the alpha value (0.5) for transparency */
        /*border-radius: 5px;
    }*/

        /* Handle on hover */
        /*::-webkit-scrollbar-thumb:hover {
            background: rgba(85, 85, 85, 0.5);*/ /* Adjust the alpha value (0.5) for transparency */
        /*}*/

    ::-webkit-scrollbar {
        width:5px;
    }

    /* Hide the track */
    ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Style the handle (thumb) */
    ::-webkit-scrollbar-thumb {
        background: rgba(136, 136, 136, 0.5); /* Adjust the alpha value for transparency */
        border-radius: 5px;
    }
}

.inbtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-right-5 {
    padding-right: 5px;
}

.m-all-10 {
    margin: 10px;
}



/* Proces Lobby components */
.button-h {
    height: 42px;
    width: 42px;
    padding: 4px;
}

    .button-h:hover {
        background-color: grey;
        border-radius: 5px;
        cursor: pointer;
    }

.button-d {
    height: 42px;
    width: 42px;
    padding: 4px;
}



.fab-save {
    position: fixed;
    bottom: 14px;
    right: 110px;
    width: 50px;
    height: 50px;
    background-color: #2196F3;
    border-radius: 50%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1;
    text-align: center;
    line-height: 50px;
}

.fab-form {
    position: fixed;
    bottom: 70px;
    right: 110px;
    width: 50px;
    height: 50px;
    background-color: #2196F3;
    border-radius: 50%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1;
    text-align: center;
    line-height: 50px;
}

.fab-delete {
    /*    position: fixed;
    bottom: 70px;
    right: 110px;*/
    width: 50px;
    height: 50px;
    background-color: #2196F3;
    border-radius: 50%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1;
    text-align: center;
    line-height: 50px;
    padding: 9px;
    position: absolute;
    top: 144px;
    left: 131px;
}


.fab-delete-diamon {
    /*    position: fixed;
    bottom: 70px;
    right: 110px;*/
    width: 50px;
    height: 50px;
    background-color: #2196F3;
    border-radius: 50%;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1;
    text-align: center;
    line-height: 50px;
    padding: 9px;
    position: absolute;
    top: 127px;
    left: 59px;
}



.fab-save:hover, .fab-form:hover {
    background-color: #0c7cd5;
    cursor: pointer;
}


.fab-delete-svg:hover {
    /*background-color: #0c7cd5;*/
    cursor: pointer;
    fill: red;
}


.fab-delete-path:hover {
    /*background-color: #0c7cd5;*/
    cursor: pointer;
    fill: red;
}


fab-delete-path:focus {
    fill: red;
}


.search-bar-position {
    position: fixed;
    top: 70px;
    width: 50%;
    left: 25%;
    margin: 0 auto;
    z-index: 2;
}


@media screen and (max-width: 600px) {

    .search-bar-position {
        position: fixed;
        top: 70px;
        width: 100%;
        left: 0%;
        margin: 0 auto;
        z-index: 2;
    }
}


.search-input-container {
    position: relative;
    width: 100%;
}

.search-btn-p {
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 6px;
    background-color: white;
}

.search-input-height {
    height: 50px;
}

.search-suggestions {
    position: absolute;
    top: 38px;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #ced4da;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 4;
}

.search-suggestion {
    padding: 8px 12px;
    cursor: pointer;
}

    .search-suggestion:hover {
        background-color: #f2f2f2;
    }


.to-hide-search-options {
    height: 100%;
    width: 85%;
    top: 0%;
    left: 0%;
    position: fixed;
    /*background-color: red;*/
        z-index: 3;
    }

.diagram-process-wrapper-btn-fit {
    position: absolute;
    top: 55px;
    right: 0px;
}