#toolbar {
    flex-shrink: 0;
    height: 5vh;
    display: flex;
    flex-direction: row;
    background-color: #F2F2F4;
    width: 100%;
}

#label-bar {
    background-color: rgb(244, 244, 244);
    position: relative;
}

#editor-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#markdown-editor {
    flex-grow: 1;
    height: 100%;
    resize: none;
}

/* Additional styles for buttons, labels, etc. */
#left-items {
    flex-grow: 1;
    position: relative;
}

#middle-items {
    flex-grow: 2;
    align-content: center;
    justify-content: center;
    text-align: center;
    font-size: x-large;
    white-space: nowrap;
    overflow: hidden;
}

#right-items {
    flex-grow: 1;
    display: flex;
    justify-content: end;
    padding-right: 5px;
}

#trash, #star, #pen {
    background-color: #F2F2F4;
    border: none;
    height: 100%;
    aspect-ratio: 1/1;
    border-radius: 10px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}

#trash:hover, #star:hover, #pen:hover {
    background-color: lightgray;
}

#trash:active, #star:active, #pen:active {
    background-color: rgb(180, 180, 180);
}

svg {
    aspect-ratio: 1/1;
}

.label-box {
    display: flex;
    position: relative;
    width: 100px;
    height: 100%;
    justify-content: center;
    align-content: center;
}

.label {
    border-radius: 5px;
    width: 100%;
    border: none;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    border-radius: 16px;
    align-content: center;
    color: #00000080;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: #ffdfba50; /* default color */
  }

.label:active {
    background-color: #ffdfba; /* active color */
  }

#label-add {
    border-radius: 5px;
    width: 100%;
    border: none;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    border-radius: 16px;
    align-content: center;
    color: #00000080;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* #label > button {
    position: absolute;
    opacity: 0%;
    cursor: pointer;
} */

.label-box > input[type="checkbox"] {
    position: absolute;
    opacity: 0%;
    width: 100%;
    height: 100%;
    margin: 0px;
    cursor: pointer;
}

/* Label colors */
#label-1 {
    background-color: #ffb3bb50;
}

#label-2 {
    background-color: #ffdfba50;
}

#label-3 {
    background-color: #ffffba50;
}

#label-4 {
    background-color: #bcffba50;
}

input[type="checkbox"]:checked + #label-1 {
    background-color: #ffb3ba;
}

input[type="checkbox"]:checked + #label-2 {
    background-color: #ffdfba;
}

input[type="checkbox"]:checked + #label-3 {
    background-color: #ffffba;
}

input[type="checkbox"]:checked + #label-4 {
    background-color: #bcffba;
}

input[type="checkbox"]:checked + .label {
    color: #000000;
}

#label-box-add {
    display: flex;
    position: relative;
    width: 70px;
    height: 100%;
    justify-content: center;
    align-content: center;
}

#label-box-add > button:hover {
    background-color: lightgray;
}

#label-box-add > button:active {
    background-color: darkgray;
}

/* .CodeMirror, .CodeMirror-scroll {
    flex-grow: 1;
} */

/* #text-box {
    position: relative;
    padding: 5%;
    flex-basis: 100%;
}

#text-box > textarea {
    border: 1px solid rgb(233, 233, 233);
    font-size: larger;
    height: 90%;
    width: 90%;
    box-shadow: 10px 5px 5px #F2F2F4;
    resize: none;
} */


/* Tag Menu */
#tag-modal {
    display: flex; /* Initially hidden */
    position: fixed; /* Fixed position to stay in place when scrolling */
    z-index: 1; /* Ensure modal is on top of other content */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    width: auto;
    transform: translate(-50%, -50%); /* Center the modal exactly */
    overflow: auto; /* Allow scrolling if content exceeds modal size */
    background-color: #fefefe; /* Light background color */
    padding: 5px; /* Padding inside the modal */
    border: 1px solid #888; /* Border around the modal */
    flex-direction: column;
}

#tag-modal > form > h5{
    text-align: center;
    margin: 0;
}


/* Emotion Modal */
#emotion-modal > form{
    flex-direction: row;
}

#emotion-modal > h3{
    margin: 0;
    text-align: center;
}

#emotion-modal > form > button{
    border: none;
    border-radius: 5px;
    background-color: rgb(235,235,235);
    cursor: pointer;
    font-size: xxx-large;
}

#emotion-modal > form > button:hover{
    background-color: lightgray;
    border-radius: 5px;
}

#emotion-modal > form > button:active{
    background-color: rgb(180, 180, 180);
    border-radius: 5px;
}