:root {
    --dark-color: #323A45;
    --heading-color: #222222;
    --font-color: #555555;
    --font-white: #ffffff;
    --font-light: #888888;
    --font-xlight: #f0f0f0;
    --font-ccc: #cccccc;
    --text-muted: #9A9A9A;
    --border-color: #e2e2e2;
    --card-color: #ffffff;
    --white-color: #ffffff;
    --body-color: #fcfcfc;
    --box-shadow: #c7c1c1;
    --box-shadow-light: #ececec;
    --font-hc-color: #888888;
    --bg-hc-color: #323A45
}

[data-theme="dark"] {
    --dark-color: #ffffff;
    --heading-color: #c0c0c0;
    --font-color: #c7c7c7;
    --font-white: #ffffff;
    --font-light: #888888;
    --font-xlight: #333638;
    --font-ccc: #cccccc;
    --text-muted: #80858a;
    --border-color: #3b3f42;
    --card-color: #26282a;
    --white-color: #000000;
    --body-color: #222426;
    --box-shadow: #585858;
    --box-shadow-light: #323536;
    --font-hc-color: #888888;
    --bg-hc-color: #ffffff
}

[data-theme="high-contrast"] {
    --dark-color: #ffffff;
    --heading-color: #ffffff;
    --font-color: #ffffff;
    --font-white: #ffffff;
    --font-light: #000000;
    --font-xlight: #ffffff;
    --font-ccc: #111111;
    --text-muted: #ffffff;
    --border-color: #ffffff;
    --card-color: #000000;
    --white-color: #000000;
    --body-color: #000000;
    --box-shadow: #333333;
    --box-shadow-light: #333333;
    --font-hc-color: #ffffff;
    --bg-hc-color: #000000
}

[class="theme-purple"] {
    --primary-color: #7954AD;
    --primary-color2: #7B54B1;
    --primary-color3: #A37ADB;
    --secondary-color: #E76886;
    --secondary-color2: rgb(223, 126, 148);
    --link-color: #59C4BC;
    --primary-gradient: linear-gradient(45deg, #7B54B1, #E76886)
}

[class="theme-blue"] {
    --primary-color: #2929b9;
    --primary-color2: #4343D3;
    --primary-color3: #6C6CFF;
    --secondary-color: #F99006;
    --secondary-color2: #F92F47;
    --link-color: #87B70A;
    --primary-gradient: linear-gradient(45deg, #2929b9, #87B70A)
}

[class="theme-cyan"] {
    --primary-color: #59C4BC;
    --primary-color2: #33BAB0;
    --primary-color3: #8BCEC9;
    --secondary-color: #637AAE;
    --secondary-color2: #00ACEE;
    --link-color: #E76886;
    --primary-gradient: linear-gradient(45deg, #59C4BC, #637AAE)
}

[class="theme-green"] {
    --primary-color: #38C172;
    --primary-color2: #249D57;
    --primary-color3: #187741;
    --secondary-color: #0957C3;
    --secondary-color2: #5589D2;
    --link-color: #FED500;
    --primary-gradient: linear-gradient(45deg, #38C172, #249D57)
}

[class="theme-orange"] {
    --primary-color: #FFA901;
    --primary-color2: #FF7F00;
    --primary-color3: #FBC200;
    --secondary-color: #600489;
    --secondary-color2: #9439BC;
    --link-color: #38C172;
    --primary-gradient: linear-gradient(45deg, #FFA901, #600489)
}

[class="theme-blush"] {
    --primary-color: #FF6A4A;
    --primary-color2: #F5856D;
    --primary-color3: #FBC200;
    --secondary-color: #87B70A;
    --secondary-color2: #AAD736;
    --link-color: #056CDB;
    --primary-gradient: linear-gradient(45deg, #FF6A4A, #AAD736)
}

[class="theme-red"] {
    --primary-color: #F40000;
    --primary-color2: #F92C2C;
    --primary-color3: #F14F4F;
    --secondary-color: #030886;
    --secondary-color2: #252BCF;
    --link-color: #C7E203;
    --primary-gradient: linear-gradient(45deg, #F40000, #252BCF)
}

.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-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
}

.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
}

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

.mail-inbox .mail-right .mail-action {
    padding: 15px
}

.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 .pagination-email p {
    line-height: 30px;
    margin-bottom: 0
}

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

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

.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.5s 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 .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 .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 {
    max-width: 60px;
    min-width: 60px;
    width: 60px;
    position: relative
}

.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% - 70px)
}

.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: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--white-color)
}

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

.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
}

.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
    }
}