/* EZMANN Groups and Subgroups Section */
.groups-display-canvas {
    display: none;
}

/* #expand_all_groups_arrow_button {
    border: 1px solid black;
    background: none;
    background-image: element();
} */

/* #collapse_all_groups_arrow_canvas {
    display: none;
} */

#create-group-section {
    padding: 1em;
    overflow: auto;
    max-height: 50em;
}

#sort-all-groups-canvas {
    margin-top: 0.2em;
}

#ezmann-header-and-group-content-box {
    width: calc(76% - 2em);
    min-width: 20em;
}
#collapse-groups-menu-button {
    background-color: #ffe600;
}
#expand-groups-menu-button {
    background-color: #60c700;
}

#ezmann-group-focuses-header-box {
    background-color: #6e6e6e;
    display: none;
}

#ezmann-group-focuses-header-text {
    font-size: 1.1em;
    margin: 0;
    font-style: italic;
    font-weight: bold;
    color: white;
}

#update-group-section {
    padding: 1em;
    overflow: auto;
    max-height: 30em;
}



#ezmann-groups-and-subgroups-menu-display-body-section {
    padding: 1em;
    overflow: auto;
    max-height: 16em;
}


.group-scroll-button {
    /* visibility: hidden; */
    height: fit-content;
}
#groups-menu-right-scroll-arrow {
    transform: scale(-1, 1);
}

#ezmann-selected-group-info-box {
    display: none;
    flex: 1;
    gap: 1em;
    border: 2px solid #0074c2;
    border-radius: 24px;
    padding: 1em;
    /* width: 70%; */
    max-width: 16em;
}

#info-box-selected-group-name {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: 2px solid black;
    font-size: 1.1em;
    font-weight: bold;
    font-style: italic;
    color: white;
    background-color: #15b600;
    margin: 0;
    width: fit-content;
}

#ezmann-default-group-logo {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border: 2px solid #15b600;
    border-radius: 8px;
    font-weight: bold;
    font-style: italic;
    color: #15b600;
    margin: 0;
    width: fit-content;
}


#selected-group-title {
    font-weight: bold;
    font-style: italic;
    color: darkblue;
}

#ezmann-groups-menu-bar {
    display: flex;
    overflow-x: auto;
    /* width: 80%; */
    /* padding-left: 4px; */
    /* padding-right: 4px; */
    /* background-color: #147700; */
    /* scroll-behavior: smooth; */
    /* background-color: #eb0000; */
}

#ezmann-selected-group-buttons-display-box {
    display: flex;
    overflow: auto;
}

#ezmann-subgroup-menus-bar {
    /* position: absolute; */
    display: flex;
    overflow-x: auto;
    /* max-width: 36em; */
}

@keyframes group-button-flash {
    0% {background-color: #eaffe6;}
    50% {background-color: #88ff70;}
    100% {background-color: #eaffe6;}
}

[data-group-wrapper-name] {
    display: flex;
    /* border: 2px solid #a00050;
    border-radius: 0.4em; */
}

.ezmann-group-button {
    /* display: flex;
    justify-content: space-between;
    gap: 1em; */
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    border: 2px solid #a00050;
    border-radius: 0.4em;
    background-color: #88ff70;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    cursor: pointer;
    white-space: nowrap;
}
.ezmann-group-button:hover {
    background-color: #ccffc2;
}
.ezmann-group-button.active {
    background-color: #eaffe6;
    animation-name: group-button-flash;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.ezmann-selected-group-button-display {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    border: 2px solid #a73500;
    border-radius: 0.4em;
    /* background-color: #ff864e; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    cursor: pointer;
    white-space: nowrap;
}


.ezmann-subgroup-button {
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    padding-left: 1.25em;
    padding-right: 1.25em;
    border: 2px solid #005bb1;
    border-radius: 0.4em;
    /* background-color: #4faaff; */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    cursor: pointer;
    white-space: nowrap;
}

.ezmann-subgroup-button:hover {
    background-color: #8ec8ff;
}
.ezmann-subgroup-button:active {
    background-color: #cfe8ff;
}

/* button[data-subgroup-menu-color="orange"] {
    border: 2px solid #a84300;
    background-color: #ff7519;
} */


#ezmann-create-group-popup {
    width: 36em;
    top: 2%;
}

.groups-and-subgroups-list {
    border: 1px solid black;
    overflow: auto;
    width: 75%;
    height: 12em;
    padding: 1em;
}