/* ===========================================================
   Mail.tm Bootstrap 5
   style.css
=========================================================== */

html,
body {
    margin: 0;
    min-height: 100vh;
    background-color: #0f172a;
    background-image:
        linear-gradient(rgba(255,0,100,0.8) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,0,100,0.8) 1px, transparent 1px); 
    background-size: 40px 40px;
    animation: moveGrid 8s linear infinite;
}

@keyframes moveGrid {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 40px;
    }
}




/* Card */

.card{
    border:none;
    border-radius:12px;
}

.card-header{
    font-weight:600;
}

/* Input */

.form-control{
    border-radius:8px;
}

.form-control:focus{
    box-shadow:none;
    border-color:#0d6efd;
}

/* Button */

.btn{
    border-radius:8px;
}

/* Sidebar Inbox */

.inbox-scroll{

    height:650px;

    overflow-y:auto;

    overflow-x:hidden;

}

/* Scrollbar */

.inbox-scroll::-webkit-scrollbar{

    width:8px;

}

.inbox-scroll::-webkit-scrollbar-thumb{

    background:#cfcfcf;

    border-radius:20px;

}

.inbox-scroll::-webkit-scrollbar-thumb:hover{

    background:#999;

}

/* Item Email */

.mail-item{

    cursor:pointer;

    transition:.2s;

    border-left:4px solid transparent;

}

.mail-item:hover{

    background:#eef5ff;

    border-left:4px solid #0d6efd;

}

.mail-item.active{

    background:#dbeafe;

    border-left:4px solid #0d6efd;

}

/* Subject */

.mail-subject{

    font-weight:bold;

    color:#212529;

    margin-bottom:4px;

}

/* From */

.mail-from{

    color:#6c757d;

    font-size:14px;

}

/* Preview */

.mail-preview{

    color:#777;

    font-size:13px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* Date */

.mail-date{

    font-size:12px;

    color:#999;

}

/* Badge */

.badge{

    font-size:.85rem;

}

/* Mail Viewer */

#mailContent{

    min-height:600px;

    overflow:auto;

    line-height:1.6;

    word-break:break-word;

}

/* HTML Email */

#mailContent img{

    max-width:100%;

    height:auto;

}

#mailContent table{

    max-width:100% !important;

}

#mailContent pre{

    white-space:pre-wrap;

    word-break:break-word;

}

/* Loading */

.spinner-border{

    width:3rem;

    height:3rem;

}

/* Search */

#search{

    border-radius:20px;

}

/* Empty Inbox */

.empty-box{

    padding:50px;

    text-align:center;

    color:#999;

}

.empty-box i{

    font-size:70px;

}

/* Header */

h4,h5{

    margin:0;

}

/* Toast */

.toast{

    border-radius:10px;

}

/* Responsive */

@media (max-width:992px){

    .inbox-scroll{

        height:300px;

    }

    #mailContent{

        min-height:350px;

    }

}

/* Efek Klik */

.list-group-item{

    border:none;

    border-bottom:1px solid #ececec;

}

.list-group-item:last-child{

    border-bottom:none;

}

.list-group-item:hover{

    background:#f4f8ff;

}

/* Animasi */

.fade-mail{

    animation:fadeMail .25s ease-in-out;

}

@keyframes fadeMail{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Header Email */

.mail-header{

    border-bottom:1px solid #dee2e6;

    margin-bottom:15px;

    padding-bottom:10px;

}

/* Footer */

.footer{

    color:#999;

    text-align:center;

    font-size:13px;

    padding:15px;

}