body {
    width: 100%;
    height: 100%;
}

.email-app-container a {
    text-decoration: none;
    color: black;
}

button {
    background-color: transparent;
}

.action-multipal {
    width: 50px;
    height: 50px;
    border: transparent;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.5);
}

.action-btn {
    justify-items: center;
}

.email-actions-btns {
    display: flex;
    width: 80%;
    height: 56px;
    justify-content: center;
}

.multipal-delete {
    width: 60px;
    justify-items: center;
    align-items: center;
}

.checked-emails-length {
    font-size: 20px;
    font-weight: bold;
}

.email-app-container {
    width: 100%;
    height: 100%;
}

.email-actions-toolbar {
    margin-top: 10px;
    align-items: center;
}

.email-actions-toolbar a {
    width: 80px;
    font-size: 15px;
    padding: 8px;
    text-align: center;
    border: 1px solid black;
    border-radius: 25px;
    box-shadow: 1px 1px 2px 0 black;
    margin-left: 5px;
}

.search-tab input[type=search] {
    border: none;
    border-bottom: 1px solid transparent;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 10px;
    margin-right: calc(100% - 50vw);
}

.search-tab input[type=search]:focus {
    border-bottom: 1px solid black;
}

.search-checkbox {
    align-items: center;
    height: 26px;
}

.search-checkbox label {
    cursor: pointer;
    height: 26px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
}

.search-checkbox input[type="checkbox"] {
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.mobile-email-filter-button {
    display: none;
}

.upper-control {
    align-items: center;
}

.compose-email-btn {
    padding: 10px;
    border: 2px solid black;
    border-radius: 25px;
    width: 150px;
    text-align: center;
    box-shadow: 1px 1px 2px 0 black;
    margin-left: 5px;
    background: rgba(255, 255, 255, 0.5);
}

.gradient-color {
    margin-right: 5px;
    background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.filter-sort-container {
    height: auto;
    margin: 10px 10px 10px 0;
}

.email-list {
    width: 100%;
    height: auto;
}

.email-link {
    width: 100%;
}

.tab {
    width: 100%
}

.tab [type=radio] {
    display: none;
}

.email-filter {
    background: rgba(255, 255, 255, 0.5);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 100%;
    margin-top: 10px;
    width: 200px;
    text-align: center;
}

.email-filter .fas {
    margin: 10px 10px 10px 20px;
}

.email-filter .tab input[type=radio]:checked~label {
    background: rgba(128, 128, 128, 0.7);
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}

.email-sort .tab label {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
}
.email-sort .tab button {
    align-self: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    border: none;
    height: 36px;
    padding: 0 20px;
    margin: 10px;
}

.email-sort .tab input[type=radio]:checked~label {
    background: rgba(128, 128, 128, 0.5);
    border-radius: 25px;
}

.delete-all {
    border: none;
    cursor: pointer;
}

.email-filter .tab {
    height: 55px;
    align-items: center;
}

.email-filter .tab label {
    height: 30px;
    padding: 10px;
    margin: 0;
    align-items: center;
    width: 100%;
}

.details-action-btn {
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

.unread {
    font-weight: bold;
}

.first-letter, .email-preview-sentAt {
    font-weight: normal;
}

.read {
    font-weight: none;
    border-radius: 10px;
}

.email-preview {
    height: 100%;
    width: 100%;
}

.email-preview-letter {
    position: absolute;
    height: 50px;
    width: 50px;
    align-self: center;
    border-radius: 50%;
    margin-left: 10px;
    font-weight: none;
}

.email-preview-letter label {
    display: flex;
    height: 50px;
    width: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.email-compose {
    width: 100%;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    margin: 2px 5px;
}
.email-reply {
    width: 100%;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    margin: 2px 5px;
}

.email-preview-container {
    height: 86px;
    margin: 2px 5px;
    text-align: left;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
}

.email-link {
    height: 100%;
    align-items: center;
}

.email-details {
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    margin: 10px 5px 0 5px;
}

.subject-txt {
    font-size: 20px;
    padding: 10px;
}

.details-header-container {
    padding: 20px 0;
}



.email-preview-sentAt {
    /* align-self: center; */
    font-size: 13px;
    width: 150px;
    margin: 10px 15px 0 0;
}

.email-preview-sender {
    font-size: 15px;
    margin-bottom: 15px;
}

.text-container {
    height: 100%;
    width: 100%;
    margin-left: 70px;
}

.email-preview-container:hover .button-container {
    display: flex;
}

.button-container {
    display: none;
    width: 150px;
}

.email-preview-container:hover .email-preview-sentAt {
    display: none;
}

.preview-btn {
    display: flex;
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
}

.tab label, .tab button {
    transition: all .3s;
    background: transparent;
    padding: 10px 20px;
    margin: 10px;
}

.tab label:hover, .tab button:hover {
    cursor: pointer;
    color: #fc0000b9;
}

.email-preview-letter-checkbox {
    display: none;
}

.compose-form {
    width: 100%;
    padding: 10px;
}
.compose-form input {
    border: none;
    background-color: transparent;
    padding: 5px;
    width: 400px;
    border-bottom: 1px solid transparent;
    word-wrap: break-word;
}

.compose-email-body {
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-self: center;
}

.compose-email-container {
    width: 500px
}

.compose-action-btn {
    margin: 10px 10px 0 10px;
    width: 50px;
    height: 50px;
    border: none;
}

.compose-email-body textarea {
    border: none;
    background-color: rgba(255, 255, 255, 0.7);
    /* padding: 5px; */
    overflow-y: auto;

}

.compose-form input:focus { 
    border-bottom: 1px solid black
}
.reply-form {
    width: 100%;
    padding: 10px;
}
.reply-form input {
    border: none;
    background-color: transparent;
    padding: 5px;
    width: 400px;
    border-bottom: 1px solid transparent;
    word-wrap: break-word;
}

.reply-email-body {
    width: 100%;
    padding: 10px;
}

.reply-action-btn {
    margin: 10px 10px 0 10px;
    width: 50px;
    height: 50px;
    border: none;
}

.reply-email-body textarea {
    border: none;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px;

}
.search-checkbox {
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    /* justify-content: center; */
}
.search-checkbox input[type=radio] {
    display: none;
}
.search-checkbox input[type=radio]:checked~label {
    background: rgba(0, 0, 255, 0.6);
    width: 100px;
    color: white;
}
.search-label {
    display: flex;
}
.search-checkbox label {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    width: 100px;
}
.reply-form input:focus { 
    border-bottom: 1px solid black
}

@media (max-width: 750px) {
    .email-search {
        height: 70px;
        z-index: 3;
    }
    .email-actions-toolbar {
        position: sticky;
        top: 0;
        z-index: 3;
        background-color: rgba(255, 255, 255, 0.5);
        padding-top: 10px;
    }
    .upper-control {
        position: sticky;
        top: 80px;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 3;
    }
    .mobile-email-filter-button {
        display: block;
        position: sticky;
        left: 20px;
        cursor: pointer;
        z-index: 5;
        /* transform: translate(210px, 0); 
        transition: transform .8s; */
    }
    .email-preview-container:hover .button-container {
        display: none;
    }
    .email-preview-container:hover .email-preview-sentAt {
        display: flex;
    }
    body.show .mobile-email-filter-button {
        left: 10px;
        transform: translate(200px, 0);
        transition: transform .8s;
    }
    .mobile-email-filter-button .bar1, .mobile-email-filter-button .bar2, .mobile-email-filter-button .bar3 {
        width: 20px;
        height: 3px;
        background-color: black;
        margin: 4px 0;
        transition: 0.4s;
    }
    .change-filter .bar1 {
        transform: rotate(-45deg) translate(-2px, 1px);
    }
    .change-filter .bar2 {
        opacity: 0;
    }
    .change-filter .bar3 {
        transform: rotate(45deg) translate(-9px, -8px);
    }
    .email-filter {
        z-index: 50;
        position: fixed;
        justify-content: initial;
        left: 0;
        top: 70px;
        border-radius: 0;
        background-color: rgba(255, 255, 255, 0.8);
        height: 100vh;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        transform: translate(-100%, 0);
        transition: transform .8s;
    }
    .email-filter a {
        padding: 30px;
    }

    body.show {
        overflow-y: hidden;
    }

    body.show .email-filter {
        transform: translate(0, 0);
    }
    .compose-email-btn {
        position: fixed;
        z-index: 30;
        bottom: 10px;
        right: 10px;
        display: flex;
        align-content: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background-color: white;
    }
    .compose-email-txt {
        display: none;
    }
    .gradient-color {
        margin: 0;
    }
    .email-actions-container {
        flex-direction: column;
        width: 100px;
    }
    .subject-sentAt {
        font-size: 12px;
    }
    .filter-sort-container {
        margin: 0;
    }
    .search-checkbox {
        width: 100%;
        height: 100%;
        flex-direction: column;
        justify-content: space-evenly;
        /* justify-content: center; */
    }
    .search-checkbox input[type=radio] {
        display: none;
        /* height: 30px; */
        
    }
    .search-checkbox input[type=radio]:checked~label {
        background: rgba(0, 0, 255, 0.6);
        /* height: 50px; */
        width: 100px;
        
    }
    .search-label {
        display: flex;
    }
    .search-checkbox label {
        background: none;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
    }
    .compose-form input {
        width: 100%;
    }
    .compose-email-container {
        width: 100%;
        margin: 10px 5px 0 5px;
    }
    .reply-form input {
        width: 100%;
    }
    .reply-email-container {
        width: 100%;
        margin: 10px 5px 0 5px;
    }
    .email-reply {
        margin: 10px 5px 0 5px;
    }
    .email-compose {
        margin: 10px 5px 0 5px;
    }
    .search-tab input[type=search] {
        background: transparent;
        border-radius: 10px;
        padding: 10px;
        margin-left: 10px;
    }
    .email-sort {
        justify-content: space-evenly;
        margin: 5px;
        font-size: 12px;
        font-weight: bold;
        width: 100%;
    }
    .email-sort .tab button {
        font-size: 12px;
        font-weight: bold;
        padding: 0 10px;
        margin: 10px 0 10px 10px;
    }
    .email-actions-toolbar {
        margin-top: 0;
    }
}