/* index page */
.cursor-pointer {cursor: pointer;}
.w-max-content {width: max-content;}
.hover-bg-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 6px;
    margin: 0;
    border-radius: 50px;
    border: none !important;
    background-color: transparent;
    outline: none !important;
    box-shadow: none !important;
}
.hover-bg-btn svg {width: 20px;height: 20px;}
.hover-bg, .hover-bg-btn:hover, .hover-bg-btn.active {background-color: var(--gray-100);}
.disabled, a:disabled, button:disabled, .hover-bg-btn.disabled, .hover-bg-btn:disabled {opacity: 50%;}
.mail-check-input {cursor: pointer;width: 18px;height: 18px;border: 1px solid var(--border-heavy) !important;}
.mail-section-a {height: 40px;vertical-align: middle;}
.mail-section {cursor: pointer;max-width: 100%;background-color: transparent;padding: 4px 8px;border-bottom: 1px solid var(--border-light);transition: all 0.5s;}
.mail-section:last-child {border-bottom: none;}
.mail-sender {min-width: 180px;padding-right: 15px;}
.mail-title {min-width: 240px;}
.mail-section .mail-date {transition: all 0.5s;}
.mail-section .mail-icons {display: none;transition: all 0.5s;}
.mail-section:hover, .mail-bg {background-color: #f8f9fa;}
.mail-section:hover .mail-date {display: none;}
.mail-section:hover .mail-icons {display: block;}
.mail-section.active .mail-title, .mail-section.active .mail-sender {font-weight: 600 !important;}
.mail-star-btn svg path {stroke: var(--gray-300) !important;fill: none !important;transition: all 0.5s;}
.mail-star-btn:hover svg path {stroke: var(--color-second) !important;}
.mail-star-btn.active {background-color: transparent !important;}
.mail-star-btn.active svg path {stroke: none !important;fill: #ebc13b !important;}
.mail-tab-content {display: block;max-width: 100%;overflow-x: hidden;}
.mail-tabs {display: flex;flex-wrap: wrap;align-items: center;gap: 0;width: 100%;}
.mail-tabs .nav-item {width: 25%;padding: 0 8px 0 0;}
.mail-tabs .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-first);
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0 4px 8px 4px;
    margin: 0;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.mail-tabs .nav-item svg {width: 20px;height: 20px;}
.mail-tabs .nav-item.mail-nav-primary .nav-link.active {color: #0b57d0;border-color: #0b57d0;}
.mail-tabs .nav-item.mail-nav-primary .nav-link.active svg {fill: #0b57d0 !important;}
.mail-tabs .nav-item.mail-nav-primary .badge {background-color: #0b57d0 !important;}
.mail-tabs .nav-item.mail-nav-social .nav-link.active {color: #188038;border-color: #188038;}
.mail-tabs .nav-item.mail-nav-social .nav-link.active svg {fill: #188038 !important;}
.mail-tabs .nav-item.mail-nav-social .badge {background-color: #188038 !important;}
.mail-tabs .nav-item.mail-nav-promotions .nav-link.active {color: #e78a12;border-color: #e78a12;}
.mail-tabs .nav-item.mail-nav-promotions .nav-link.active svg {fill: #e78a12 !important;}
.mail-tabs .nav-item.mail-nav-promotions .badge {background-color: #e78a12 !important;}
.mail-tabs .nav-item.mail-nav-updates .nav-link.active {color: #1f9697;border-color: #1f9697;}
.mail-tabs .nav-item.mail-nav-updates .nav-link.active svg {fill: #1f9697 !important;}
.mail-tabs .nav-item.mail-nav-updates .badge {background-color: #1f9697 !important;}
.mail-search {width: 400px;height: 40px;}
.mail-search input {cursor: text !important;}
.mail-icons-btn svg {fill: var(--gray-600);}
.gpt-mail-page .badge {
    font-size: 12px;
    font-weight: 500;
    padding: 2.5px 8px;
    margin: 0;
    border-radius: 50px;
}
.mail-check-input:checked {background-color: #000000 !important;}

html[data-bs-theme="dark"] .hover-bg, html[data-bs-theme="dark"] .hover-bg-btn:hover,
html[data-bs-theme="dark"] .hover-bg-btn.active {background-color: var(--gray-900);}
html[data-bs-theme="dark"] .mail-section:hover,
html[data-bs-theme="dark"] .mail-bg {background-color: #2f2f2f;}
/* index page end */

/* GPT mail page */
.mail-body, .mail-body p, .mail-body span, .mail-body b, .mail-body strong, .mail-body div, .mail-body small {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-first);
    padding: 0;
    margin-bottom: 16px;
}
.mail-body b, .mail-body strong {font-weight: 600;}
.mail-body small {font-size: 13px;}
.mail-editors {
    margin-top: 20px;
    display: none;
}
.mail-editors textarea {
    width: 100%;
    height: 120px;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
}
.mail-editors-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}


/* GPT mail page end */


@media screen and (max-width: 1200px){
    /* index page */
    .mail-search {width: 320px;}
    .hover-bg-btn {min-width: 30px;height: 30px;padding: 4px;}
    .hover-bg-btn svg, .mail-check-input {width: 16px;height: 16px;}
    .mail-sender {min-width: 120px;padding-right: 10px;}
    .mail-title {min-width: 140px;}
    /* index page end */
}
@media screen and (max-width: 1024px){
    /* index page */
    .mail-search {width: 280px;}
    /* index page end */
}
@media screen and (max-width: 991px){
    /* index page */
    .compose-btn {
        position: fixed;
        top: auto;
        left: auto;
        right: 16px;
        bottom: 70px;
        border-radius: 8px !important;
        box-shadow: 0 0 20px rgba(0, 0, 0, .2);
        z-index: 9;
    }
    .mail-navbar-collapse {border-bottom: 1px solid var(--border-light);}
    #mail-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
        margin: 0;
        transition: margin 0.3s ease;
        box-shadow: 0 0 30px rgba(0, 0, 0, .25);
        z-index: 99;
    }
    #mail-sidebar.collapsed, #mailSidebarToggle .mail-toggler-icon2,
    #mailSidebarToggle.active .mail-toggler-icon1 {display: none;}
    #mailSidebarToggle.active .mail-toggler-icon2 {display: block;}
    #mail-sidebar .hover-bg-btn:hover {background-color: transparent !important;}
    #mail-sidebar .hover-bg-btn.active {background-color: var(--gray-100) !important;}
    html[data-bs-theme="dark"] #mail-sidebar .hover-bg-btn.active {background-color: var(--gray-900) !important;}
    #mail-sidebar svg {width: 20px !important;height: 20px !important;}
    .gpt-mail-right {padding-bottom: 40px;}
    .gpt-mail-inner-page .gpt-mail-right {padding-bottom: 0;}
    /* index page end */

    /* gpt mail page */
    .gpt-mail-inner-page .compose-btn {display: none;}

    /* gpt mail page end */
}
@media screen and (max-width: 767px){
    /* index page */
    .mail-tabs .nav-item {width: 50%;}
    .mail-tabs .nav-item .nav-link {padding: 12px 4px 8px 4px;}
    .mail-search {width: 88%;}
    .mail-w-100 {width: 100%}
    .mail-desc {display: none;}
    .mail-section {padding: 8px 0;}
    .mail-sender, .mail-title {min-width: 100%;padding-right: 0;}
    .mail-title {font-size: 13px;}
    .mail-section:hover {background-color: transparent;}
    .mail-section .mail-date {display: block !important;}
    .mail-section .mail-icons {display: none !important;}
    .mail-section .mail-icons.active {display: block !important;}
    .mail-section-a {height: 100%;padding: 0 8px;}
    .mail-section-area {flex-wrap: wrap;}
    .mail-section-area .mail-section-a {width: 75%;}
    .mail-section-area .mail-date {width: 60px;}
    .mail-section-area .mail-icons {
        width: 100%;
        background-color: #f8f9fa;
        padding: 4px 6px;
        margin: 8px 0 0 0;
        border-radius: 4px;
        border: 1px solid var(--border-light);
    }
    html[data-bs-theme="dark"] .mail-section-area .mail-icons {background-color: var(--gray-900);}
    .mail-star-btn svg, .mail-icons-btn svg {width: 16px;height: 16px;}
    /* index page end */

    /* gpt mail page */


    /* gpt mail page end */
}