div.email-list{
    background: #FFDD98;
}

div.full-email{
    background: #6F85AF;
}

i.fa-solid{
    color: white;
}

li.email-list{
    background: #FFF0D3;
}

li.full-email{
    background: #B6C1D7;
}

.btn {
    background: #f8f9fa;
    border-color: #dee2e6;
}

.branding{
    min-width: fit-content;
}

.active-email{
    box-shadow: 7px 7px 0 rgba(60, 88, 147, 1);
    margin-bottom: 100px;
}

.body {
    background: #DCF2C9;
    height: 1000px;
}

.compose{
    --bs-btn-hover-bg: #E488A5;
    --bs-btn-bg: #F2C8D5;
    border: none;
    color: #18397F;
    display: flex;
    justify-content: center;
}

.count {
    --bs-btn-font-size: 1em;
    --bs-btn-line-height: 1em;
    --bs-btn-disabled-bg: #FFF0D3;
    --bs-btn-disabled-color: black;
}

.scrollable{
    height: calc(100vh - 90px);
}

.email-list-col {
    height:100%;
}

/* If the screen size is medium, height is fixed */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .scrollable{
        height: 500px;
    }
}

.footer {
    height: 1000px;
    background: #DCF2C9;
}

.my-container {
    background: #DCF2C9;
}

.my-header {
    background: #18397F;
    color: white;
    min-width: 500px;
}

.my-menu {
    width: 250px;
    margin-top: 10px;
    border: none;
}

.new-email{
    background: #F2C8D5;
}

.reply {
    background: #B6C1D7;
    --bs-btn-color: black;
}

.selected {
    background: #0d6efd;
    color: white;
}