/* Global Workflow Design
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* 
    note - this file contains parent elements (e.g. containers)

    As such, applying the following properties will cause breaking changes to the child elements e.g., workflow dropdown component :
    z-index, position  

*/


/* Workflow Container
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.workflow_container {
    border-collapse: collapse;
    border: none;
    background-color: #0F2537;
    text-align: left;
    /* overflow: auto;  <-- had to remove this when we switched to worfklow accordian; need to confirm if this negatively impacts anything... */
    display: block;
    justify-content: center;
    align-items: left;
    /* attempts to expand width and spacing */
    /* margin: 10px; */
    /* Table Scroll -- REMOVE this is inherited from table */
    /* overflow-y:scroll;
    overflow-x:scroll; */
    /*  height: auto;
    width: auto; */
    /* Cleans up Whitespace from Scroll */
    /* width: 100%;
    /* removing below width constraint on workflow table only */
    /* min-width: fit-content; */
    /* min-width: max-content; */
    /* Fits data within Cells */
    max-height: 500px;
}

/* Remove Container Hover */
.workflow_container:hover {
    box-shadow: 0 2.5px 5px #0F2537;
    border: 1px #0F2537;
}



/* Workflow Table
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.workflow_container table {
    /* margin-right: 750px;
    margin-bottom: 25px; */
    /* max-width: none !important; */
    border-collapse: collapse;
    width: 100%;
    overflow: visible;
    /* width: auto;             1/23/23 -- this makes the table responsive */
    border-radius: 6px;
    background-color: #0D2031;
    text-align: left;
    justify-content: center;
    align-items: left;
    /* overflow: scroll;       add back to allow table scroll */
    /* max-height: 400px;      add back to allow table scroll */
    /* position: relative;  /* KEEP commented out! In order for dropdown component to appear above everything else */
    /* z-index: 1; */
    /* KEEP commented out! In order for dropdown component to appear above everything else */
}


.workflow_container tr {
    width: 1240px;
}


/* REVIST! attempt to target the last row of the workflow table -- not working */
/* .workflow_container>tbody>tr:last-child {
    border-radius: 0px 0px 6px 6px;
} */

.workflow_container td {
    width: 310px;
}

.workflow_container th {
    position: sticky;
    top: 0px;
    border-radius: 6px 6px 0px 0px;
}


/* Workflow Navigation
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.workflow-globals {
    border-collapse: collapse;
    border: none;
    border-radius: 4px;
}

.workflow-globals table {
    border-collapse: collapse;
    border: none;
    border-radius: 4px;
    background-color: #0D2031;
    text-align: left;
    justify-content: center;
    align-items: left;
    max-height: 500px;
}

.workflow-globals tr {
    background: none;
    border: none;
    border-radius: 5px;
    align-items: left;
}

.workflow-globals td {
    /* font-size: 11px; */
    line-height: 25px;
    width: fit-content;
    vertical-align: middle;
    margin-top: 0;
    margin-bottom: 0;
}

/* .hide_workflow_globals {
    display: none;
} */


/* Workflow Search
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.workflow-globals .search_input {
    /* font-size: 13px;
    border-radius: 4px;
    width: 150px;
    appearance: none;
    border: none;
    background-color: white;
    color: black;
    transition: width .2s; */
    border-radius: 4px;
    width: auto;
    max-width: 250px;
    appearance: none;
    border: none;
    background: none;
    color: white;
    height: 30px;
    border: 0.25px solid #797E93;
    margin-bottom: 10px;
    vertical-align: middle;
    /* KEEP! aligns elements evenly within container */
}

/* .workflow-globals .search_input:hover {
    box-shadow: 0 2.5px 5px #4E5D6C;
    width: 250px;
} */

/* KEEP! removes hover */
.workflow-globals tr:hover {
    background-color: #0F2537;
}

/* Workflow Navigation -- Expand / Collapse
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.workflow-globals .collapse_expand_all_button {
    background-color: rgba(76, 155, 232, 0.5);
    color: white;
    font-size: 11px;
    border: none;
    padding: 5px;
    margin-left: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    text-decoration: none;
    min-width: 0;
    cursor: pointer;
    border-radius: 6px;
    letter-spacing: -0.02em;
    font-weight: 550;
    vertical-align: middle;
    /* KEEP! aligns elements evenly within container */
}



/* Workflow Accordian
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Need to apply this because of the max width on the workflow table component */
.workflow_accordian {
    max-width: 1700px;
} 


.workflow_accordian .accordion-button {
    background-color: #0F2537;
    color: white;
    /* KEEP commented out! In order for dropdown component to appear above everything else */
    /* z-index: 1;
        position: relative; */
}

.workflow_accordian .accordion-button:not(.collapsed) {
    color: #448cd1;
    background-color: #0F2537;
    box-shadow: none;
    font-weight: bold;
}

.workflow_accordian_item {
    border: 0.25px solid darkgrey !important;
}


/* .workflow_accordian {
    max-width: 85% !important; */
/* KEEP commented out! In order for dropdown component to appear above everything else */
/* z-index: 1;
        position: relative; */
/* }  */