.container {
    display: flex;
    gap: 0;
}
.distributed-stack {
        display: flex;
        flex-direction: column;
        height: 300px;
        justify-content: space-between; /* Puts space between items */
        border: 1px solid #333
}

.item {
    flex: 1; /* Each item takes equal vertical space */
    /* Or for centering */
    /* align-items: center; */
    /* justify-content: center; */
}

.left-panel {
    width: 300px;
    background: var(--body-background-color);
}
.right-panel {
    flex-grow: 1;
    padding: 0 15px;
    background: var(--body-background-color);
    height: 100dvh;
}
.cbox {
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 240px;
    height: 870px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
}

.cbox2 {
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 240px;
    height: 280px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
}

.cbox3 {
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 240px;
    height: 380px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
    background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 84%);
}


.note_class{
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 440px;
    height: 200px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
    background: #2A7B9B;
    text-align: center;
    color: white;
    background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 84%);
}

:root {
    --md-ref-typeface-brand: 'Open Sans';
    --md-ref-typeface-plain: 'Open Sans';
    --md-list-item-container-shape: 16px;
    --md-list-container-color: #ace1d9;
    --md-list-item-label-text-color: #161d1d;
    --md-list-item-supporting-text-color: #3f4948;
    --md-list-item-trailing-supporting-text-color: #3f4948;
    --md-list-item-label-text-font: system-ui;
    --md-list-item-supporting-text-font: system-ui;
    --md-list-item-trailing-supporting-text-font: system-ui;
    --md-list-item-container-color: #501e16;
    color-scheme: light dark;
}
md-elevated-button {
    width: 200px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}
md-fab{
    width: 200px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}
md-outlined-text-field {
    margin-bottom: 16px;
    margin-left: 8px;
    margin-top: 8px;
    margin-right: 8px;
    --md-outlined-text-color: green;
    --md-outlined-text-color-hover: green;
    --md-outlined-text-color-active: green;
    --md-outlined-text-color-disabled: red;
    --md-outlined-text-field-input-text-color: green;
    --md-outlined-text-field-focus-input-text-color: green;

}
md-list {
    display: flex;
    margin-bottom: 16px;
    margin-left: 8px;
    margin-top: 8px;
    margin-right: 8px;
    width: 250px;
    max-width: 300px;
    border-radius: 10px;
}

md-outlined-select {
    --md-outlined-text-color-color: green;
    --md-outlined-text-color-hover: green;
}

md-filled-text-field {
    resize: vertical;
}

h2 {
    font-family: var(--md-ref-typeface-brand);
    color: green;
}
table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}
tr:nth-child(even) {
    background-color: #c3e8e1;
    color:black
}
th,td {
    text-align: left;
    border: 1px solid #ccc;
    padding: 10px;
}
th {
    background-color: #99C2C2;
    background: radial-gradient(circle, rgb(38, 120, 152) 0%, rgba(87, 199, 133, 1) 84%);
    color: white;

}
pre {
    color: green;
}
.note_class{
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 440px;
    height: 60px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
    background: #2A7B9B;
    text-align: center;
    color: white;
    background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 84%);
}

.small_note_class{
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 200px;
    height: 60px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
    background: #2A7B9B;
    text-align: center;
    color: white;
    background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 84%);
}

.cbox_monitor {
    justify-content: flex-start;
    padding: 0 15px;
    border-radius: 25px;
    border: 2px solid green;
    width: 340px;
    height: 1670px;
    box-shadow: 1px 2px 3px 4px rgba(191,191,191,0.6);
    margin-left: 1px;
    color: white;
    background: radial-gradient(circle, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 84%);
}