.mail-inbox {
    display: flex
}

.mail-inbox .mail-left {
    width: 280px;
    padding: 15px;
    border-right: 1px solid var(--border-color);
    display: block
}

.mail-inbox .mail-left .mail-compose p {
    padding: 6px 12px;
    background: var(--secondary-color);
    text-align: center;
    color: var(--white-color);
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    margin: 0 0 16px;
}

.mail-inbox .mail-left .mail-side .nav {
    flex-direction: column
}

.mail-inbox .mail-left .mail-side .nav li {
    margin-bottom: 5px;
    line-height: 40px
}

.mail-inbox .mail-left .mail-side .nav li a {
    color: var(--font-color);
    display: flex;
    align-items: center
}

.mail-inbox .mail-left .mail-side .nav li a i {
    width: 35px;
    -webkit-transition: font-size 0.2s;
    -moz-transition: font-size 0.2s;
    transition: font-size 0.2s
}

.mail-inbox .mail-left .mail-side .nav li a .badge {
    margin-left: auto;
    margin-right: 0;
    padding: 4px 8px;
}

.mail-inbox .mail-left .mail-side .nav li.active a,
.mail-inbox .mail-left .mail-side .nav li:hover a {
    color: var(--primary-color)
}

.mail-inbox .mail-left .mail-side h3 {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 15px;
    margin-top: 30px;
    line-height: 20px
}

.mail-inbox .mail-right {
    width: calc(100% - 280px);
    position: relative
}

.mail-inbox .mail-right .header {
    padding: 15px 15px 0;
}

.mail-inbox .mail-right h2 {
    line-height: 35px
}

.mail-inbox .mail-right .mail-action {
    padding: 15px;
    display: flex;
    align-items: center;
}

.mail-inbox .mail-right .mail-action .fancy-checkbox {
    margin: 0px
}

.mail-inbox .mail-right .mail-action .fancy-checkbox label {
    margin-bottom: 0
}

.mail-inbox .mail-right .mail-action .fancy-checkbox input[type="checkbox"]+span:before {
    bottom: 0
}

.mail-inbox .mail-right .mail-action .btn {
    border-color: var(--border-color);
    padding: 5px 15px
}

.mail-inbox .mail-right .mail-action .btn:focus {
    box-shadow: none;
}

.mail-inbox .mail-right .mail-action .pagination-email p {
    line-height: 30px;
    margin-bottom: 0
}

.mail-inbox .mail-right .mail-list {
    padding: 15px 0 0;
}

.mail-inbox .mail-right .mail-list ul {
    margin: 0;
}

.mail-inbox .mail-right .mail-list ul li {
    padding: 17px 15px 15px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    position: relative;
    cursor: pointer;
}

.mail-inbox .mail-right .mail-list ul li.unread {
     background: #dfdfdf;
}

.mail-inbox .mail-right .mail-list ul li:last-child {
    border-bottom: 1px solid var(--border-color)
}

.mail-inbox .mail-right .mail-list ul li .hover-action {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    padding: 23px 16px 23px;
    background: var(--white-color);
    transition: all 0.3s ease-in-out
}

.mail-inbox .mail-right .mail-list ul li:hover .hover-action {
    opacity: 1;
}

.mail-inbox .mail-right .mail-list ul li .hover-action i,
.mail-inbox .mail-right .mail-list ul li:hover .hover-action i {
    color: #fff !important;
}

.mail-inbox .mail-right .mail-list ul li:hover .mail-detail-expand {
    color: #0c85e0
}

.mail-inbox .mail-right .mail-list ul li.unread {
    background-color: var(--font-xlight)
}

.mail-inbox .mail-right .mail-list ul li.unread .hover-action {
    background-color: var(--font-xlight)
}

.mail-inbox .mail-right .mail-list ul li.unread .fancy-checkbox input[type="checkbox"]+span:before {
    border-color: var(--bg-hc-color)
}

.mail-inbox .mail-right .mail-list ul li.unread .fancy-checkbox input[type="checkbox"]:checked+span:before {
    border-color: var(--primary-color2)
}

.mail-inbox .mail-right .mail-list ul li.unread .mail-detail-left .mail-star {
    color: var(--bg-hc-color)
}

.mail-inbox .mail-right .mail-list ul li.unread .mail-detail-right h6 a,
.mail-inbox .mail-right .mail-list ul li.unread .mail-detail-right p {
    color: var(--bg-hc-color)
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-left,
.mail-inbox .mail-right .mail-list ul li .mail-detail-right {
    float: left;
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-left .message-envelope {
    font-size: 24px;
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-left {
    width: 80px;
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-left .fancy-checkbox {
    margin: 0;
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-left .mail-star {
    position: absolute;
    right: 13px;
    top: 0;
    color: var(--font-color)
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-left .mail-star.active {
    color: #ff812d
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-right {
    position: relative;
    padding-right: 70px;
    width: calc(100% - 100px);
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-right span.time {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--bg-hc-color)
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-right h6,
.mail-inbox .mail-right .mail-list ul li .mail-detail-right p {
    color: var(--text-muted);
    width: 100%;
    display: flex;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-right h6 a {
    color: var(--font-color)
}

.mail-inbox .mail-right .mail-list ul li .mail-detail-right p {
    margin-bottom: 0
}

.mail-inbox .mail-right .mail-detail-full {
    position: relative;
    width: 100%;
    background: var(--white-color);
    border-radius: 5px;
    z-index: 5;
}

.mail-inbox .mail-right .mail-detail-full .mail-action {
    padding: 15px;
    display: flex;
    align-items: center;
}

.mail-inbox .mail-right .mail-detail-full .detail-header {
    padding: 20px 15px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color)
}

.mail-inbox .mail-right .mail-detail-full .detail-header .float-left img {
    max-width: 63px;
    border-radius: 5px
}

.mail-inbox .mail-right .mail-detail-full .media-body p a {
    color: var(--font-color)
}

.mail-inbox .mail-right .mail-detail-full .mail-cnt {
    padding: 20px 15px
}

.mail-inbox .mail-right .mail-detail-full .mail-cnt p {
    margin: 0;
}

.mobile-left {
    display: none
}

@media screen and (max-width: 991px) {
    .mail-inbox .mail-left {
        width: 230px
    }

    .mail-inbox .mail-right {
        width: calc(100% - 230px)
    }

    .mail-inbox .mail-right .mail-action .btn {
        padding-left: 10px;
        padding-right: 10px
    }

    .mail-inbox .mail-right .mail-action .pagination-email p {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .mobile-left {
        display: block;
        padding: 15px 15px 0;
        position: absolute;
        z-index: 9999;
        right: 0
    }

    .mail-inbox .mail-left {
        position: absolute;
        left: 0;
        background-color: var(--white-color);
        z-index: 99
    }

    .mail-inbox .mail-left.collapse:not(.show) {
        display: none
    }

    .mail-inbox .mail-left.collapse:not(.show)+.mail-right {
        width: 100%
    }

    .mail-inbox .mail-right {
        width: 100%
    }

    .mail-inbox .mail-right .header {
        flex-direction: column
    }

    .mail-inbox .mail-right .header .ml-auto {
        margin-left: 0 !important;
        margin-top: 15px
    }

    .btn-group {
        margin-bottom: 5px
    }

    .mail-detail-full a.mail-back {
        top: -60px
    }

    .media-body p span,
    .media-body p small {
        display: none
    }
}