/*--Mail Head----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mail-head{
    justify-content:flex-start;
    align-items:center;
    display:flex;
    height:4rem;
    width:100%;
}
.new-email-button-holder{
    justify-content:center;
    align-items:center;
    display:flex;

    height:100%;
    width:10rem;
}
#new-email{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    height:calc(2rem + 2px);
    white-space:nowrap;
    font-weight:bold;
    border:none;
}
#mail-search-holder{
    max-width:calc(100% - 18rem);
    width:50rem;
}
.mail-page-holder{
    color:var(--dark-blue);
    position:absolute;
    user-select:none;
    height:4rem;
    width:6rem;
    right:1rem;
    top:0px;

    justify-content:flex-end;
    align-items:center;
    display:flex;
}
.mail-page-number{
    justify-content:center;
    align-items:center;
    display:flex;

    color:var(--gray-1);
}
.mail-page-arrow{
    margin-left:1rem;
    cursor:pointer;

    justify-content:center;
    align-items:center;
    display:flex;
}
.mail-page-arrow:hover{
    transform:scale(1.1);
}
.mail-page-arrow:active{
    transform:scale(1);
}
.mail-page-arrow-disabled{
    color:var(--gray-1);
    cursor:default;
}
.mail-page-arrow-disabled:hover{
    transform:none;
}
.mail-page-arrow-disabled:active{
    transform:none;
}

/*--Mail Body----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mail-body{
    height:calc(100% - 4rem);
    width:100%;

    justify-content:flex-start;
    align-items:flex-start;
    position:relative;
    display:flex;
}

.mail-side{
    flex-shrink:0;
    height:100%;
    width:10rem;
}
.mail-side-row{
    justify-content:flex-start;
    align-items:center;
    user-select:none;
    cursor:pointer;
    display:flex;
 
    width:calc(100% - 2rem);
    margin-left:1rem;
    height:2rem;
}
.mail-side-tab{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:100%;
    width:100%;
}
.mail-side-tab:active{
    transform:scale(0.95);
}
.mail-side-row:hover{
    background-color:var(--background-gray-2);
}
.mail-side-selected-tab{
    background-color:var(--background-gray-2);
}

.main-side-icon{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    aspect-ratio:1;
    height:2rem;
}
.mail-side-icon-inbox{
    background-image:url("../assets/icons/inbox.png");
    background-size:50%;
}
.mail-side-icon-starred{
    background-image:url("../assets/icons/star.png");
    background-size:75%;
}
.mail-side-icon-important{
    background-image:url("../assets/icons/imoprtant.png");
    background-size:60%;
}
.mail-side-icon-sent{
    background-image:url("../assets/icons/sent.png");
    background-size:75%;
}
.main-side-text{
    color:var(--dark-blue);
}

#mail-side-menu{
    box-shadow:0px 0px 0.25rem rgb(0, 0, 0, 0.2);
    border:1px solid var(--border-gray-1);
    position:absolute;
    border-radius:100%;
    display:none;
    height:3rem;
    width:3rem;
    bottom:1rem;
    left:1rem;

    background-image:url("../assets/icons/menu.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:75%;
}

@keyframes mail-side-in{
    from {width:0rem;}
    to   {width:10rem;}
}
@keyframes mail-side-out{
    from {width:10rem;}
    to   {width:0rem;}
}

/*--Mail List----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mail-mask{
    background-color:rgb(0, 0, 0, 0.2);
    border-top-left-radius:var(--border-radius-2);
    height:calc(100vh - 5rem - 4rem);
    width:calc(100% - 10rem);
    position:absolute;
    display:none;
    left:10rem;
    top:0px;
}
.mail-loader{
    border:1rem solid var(--background-white);
    border-bottom:1rem solid rgba(0, 0, 0, 0);
    transform:translate(-50%, -50%);
    border-radius:100%;
    position:absolute;
    aspect-ratio:1;
    height:5rem;
    left:50%;
    top:50%;
    animation:lsl-spin linear 1s infinite;
}
.mail-list-holder{
    border-top-left-radius:var(--border-radius-2);
    background-color:var(--background-gray-2);
    border:1px solid var(--border-gray-1);
    height:calc(100vh - 5rem - 4rem);
    position:relative;
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
}
.mail-list{
    overflow-x:hidden;
    overflow-y:auto;
    width:100%;
}
.no-email{
    color:var(--gray-1);
    font-size:1.25rem;
    margin-left:1rem;
    margin-top:1rem;
}
.mail{
    border-bottom:1px solid var(--border-gray-1);
    background-color:var(--background-white);
    font-size:0.75rem;
    height:2rem;
    width:100%;

    justify-content:flex-start;
    align-items:center;
    position:relative;
    cursor:pointer;
    display:flex;
}
.mail:hover{
    background-color:var(--background-gray-1);
}
.mail-read{
    background-color:var(--background-gray-3);
}
.mail-read:hover{
    background-color:var(--background-gray-4);
}
.mail-marks{
    justify-content:space-evenly;
    align-items:center;
    user-select:none;
    display:flex;

    margin-right:0.5rem;
    margin-left:0.5rem;
    flex-shrink:0;
    height:100%;
    width:6rem;
}
.mail-marks > *:hover{
    transition:ease-in-out 0.05s;
    transform:scale(1.05);
}
.mail-marks > *:active{
    transform:scale(1);
}
.mail-rect{
    border-radius:var(--border-radius-1);
    border:0.11rem solid var(--gray-1);
    aspect-ratio:1;
    width:0.75rem;
}
.mail-star{
    background-image:url("../assets/icons/star grey.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    aspect-ratio:1;
    width:1.275rem;
}
.mail-star-marked{
    background-image:url("../assets/icons/star marked.png");
}
.mail-important{
    background-image:url("../assets/icons/imoprtant grey.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    aspect-ratio:1;
    width:1.125rem;
}
.mail-important-marked{
    background-image:url("../assets/icons/imoprtant marked.png");
}
.mail-address{
    color:var(--dark-blue);
    margin-right:1rem;
    flex-shrink:0;
    width:25rem;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mail-content{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    max-width:calc(100% - 36rem);
    width:100%;
}
.mail-subject{
    color:var(--dark-blue);
    margin-right:0.5rem;
    width:100%;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mail-snippet{
    color:var(--gray-2);
    margin-right:0.5rem;
    width:100%;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mail-options{
    padding-right:1rem;
    flex-shrink:0;
    height:100%;
    width:2rem;

    justify-content:flex-end;
    align-items:center;
    user-select:none;
    display:flex;
}
.mail-delete{
    background-image:url("../assets/icons/delete mail.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:60%;

    aspect-ratio:1;
    width:2rem;
}
.mail-options > *:hover{
    transition:ease-in-out 0.05s;
    transform:scale(1.05);
}
.mail-options > *:active{
    transform:scale(1);
}

/*--Mail Message Display-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.mail-message-display{
    background-color:var(--background-white);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.mail-message-head{
    justify-content:space-between;
    align-items:center;
    user-select:none;
    display:flex;
   
    border-bottom:1px solid var(--border-gray-1);
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    height:2rem;
}
.mail-message-head-back{
    color:var(--dark-blue);
    user-select:none;
    cursor:pointer;
    font-size:1rem;

    justify-content:center;
    align-items:center;
    display:flex;
}
.mail-message-head-back:hover{
    transform:scale(1.1);
}
.mail-message-head-back:active{
    transform:scale(1);
}
.mail-message-head-delete{
    background-image:url("../assets/icons/delete mail view.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    cursor:pointer;

    aspect-ratio:1;
    width:1rem;
}
.mail-message-head-delete:hover{
    transform:scale(1.1);
}
.mail-message-head-delete:active{
    transform:scale(1);
}
.mail-message-body{
    background-color:var(--background-white);
    height:calc(100% - 3rem);
    color:var(--dark-blue);
    padding-top:1rem;
    width:100%;
}
.mail-message-body-subject{
    font-weight:bold;
    width:calc(100% - 2rem);
    padding-bottom:1rem;
    padding-right:1rem;
    padding-left:1rem;
    font-size:1.5rem;
    height:2rem;
}
.mail-message-body-value{
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    font-size:1rem;
}

/*--Send Email---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.send-mail-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    border-top-left-radius:var(--border-radius-2);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    position:absolute;
    overflow:hidden;
    display:none;
    height:30rem;
    width:30rem;
    bottom:0px;
    right:0px;
    max-width:100%;
    max-height:calc(100vh - 5rem);

    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.send-mail-head{
    background-color:var(--accent-blue-1);
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    flex-shrink:0;
    height:3rem;

    justify-content:flex-start;
    align-items:center;
    position:relative;
    user-select:none;
    display:flex;
}
.send-mail-title{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    color:var(--background-white);
    font-size:1.5rem;
    height:100%;
    width:50%;
}
.send-mail-close{
    background-image:url("../assets/icons/x.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    transition:ease-in-out 0.2s;
    position:absolute;
    cursor:pointer;
    aspect-ratio:1;
    right:0.5rem;
    width:1rem;
    top:1rem;
}
.send-mail-close:hover{
    transform:scale(1.1);
}
.send-mail-close:active{
    transform:scale(1);
}

.send-mail-body{
    height:calc(100% - 6rem - 2px);
    width:100%;
}
.send-mail-row{
    border-bottom:1px solid var(--background-gray-1);
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    overflow:hidden;
    height:2rem;
}
.send-mail-message{
    height:calc(100% - 4rem - 2px);
    width:100%;
}
input[type=text].send-mail-text-input{
    background-color:var(--background-white);
    border-radius:0;
    outline:none;
    border:none;
    height:100%;
    width:100%;
}
#send-mail-message{
    color:var(--dark-blue);
    font-family:"Inter";
    outline:none;
    border:none;
    resize:none;
  
    width:calc(100% - 2rem);
    margin-right:1rem;
    margin-left:1rem;
    font-size:1rem;
    height:100%;
}

.send-mail-foot{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    flex-shrink:0;
    height:3rem;
}
#send-mail{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    font-weight:bold;
    border:none;

    font-size:1.25rem;
    height:1.5rem;
    width:5rem;
}
#mail-attachment{
    background-image:url("../assets/icons/attachment.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;

    background-color:rgba(0, 0, 0, 0);
    border-color:rgba(0, 0, 0, 0);
    aspect-ratio:auto;
    margin-left:1rem;
    height:1.5rem;
    width:1.5rem;
}
#attachment-file-input{
    visibility:hidden;
}
.attachment-display{
    margin-left:0.5rem;
    color:var(--gray-1);
}

@keyframes new-mail-in{
    from {transform:translateY(100%)}
    to   {transform:translateY(0%)}
}
@keyframes new-mail-out{
    from {transform:translateY(0%)}
    to   {transform:translateY(100%)}
}

/*--Mobile Dispaly-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width:700px) and (orientation:portrait){
    #mail-side-menu{
        display:block;
    }
    .mail-side{
        width:0rem;
    }
}