body{

    background:#f4f7fb;

    font-family:"Segoe UI",sans-serif;

    min-height:100vh;

}

/* ==========================
        NAVBAR
========================== */
/* ==========================
        NAVBAR
========================== */

.worldlink-navbar{

    background:linear-gradient(
        90deg,
        #43a047 0%,
        #2e7d32 50%,
        #1b5e20 100%
    );

    padding-top:10px;

    padding-bottom:10px;

    box-shadow:0 4px 15px rgba(0,0,0,.18);

}

.logo{

    width:60px;

    height:60px;

    object-fit:contain;

}

.brand-title{

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

    line-height:1.1;

}

.brand-subtitle{

    color:#dcedc8;

    font-size:.80rem;

}

.navbar-nav{

    align-items:center;

}

.navbar-nav .nav-link{

    color:#ffffff !important;

    font-weight:600;

    margin-left:18px;

    padding:10px 14px !important;

    border-radius:8px;

    transition:all .30s;

}

.navbar-nav .nav-link:hover{

    background:rgba(255,255,255,.15);

    color:#fff !important;

}

.navbar-nav .nav-link.active{

    background:rgba(255,255,255,.20);

}

.dropdown-menu{

    border:none;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.20);

}
/* ==========================
        CARDS
========================== */

.card{

    border:none;

    border-radius:15px;

}

.card-header{

    font-weight:600;

}

/* ==========================
        BUTTONS
========================== */

.btn{

    border-radius:8px;

}

/* ==========================
        FOOTER
========================== */

.footer{

    margin-top:60px;

    background:linear-gradient(
        90deg,
        #2f343a,
        #1f2428
    );

    color:#d8d8d8;

    text-align:center;

    padding:20px;

    font-size:.95rem;

    border-top:4px solid #43a047;

    letter-spacing:.5px;

}

/* ==========================
        TABLES
========================== */

.table{

    background:white;

}

/* ==========================
        IMAGES
========================== */

.card-img-top{

    height:220px;

    object-fit:cover;

}
/* ==========================================================
   PAKCOMMS MAIL APPLICATION
   ========================================================== */

.pakcomms-mail {
    min-height: calc(100vh - 80px);
}

.pakcomms-mail-sidebar {
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    min-height: calc(100vh - 80px);
}

.pakcomms-mail-sidebar .p-3 {
    position: sticky;
    top: 0;
}

.pakcomms-compose-btn {
    min-height: 46px;
    font-weight: 600;
}

.pakcomms-mail-menu .list-group-item {
    border: 0;
    border-radius: 8px !important;
    margin-bottom: 3px;
    padding: 11px 13px;
}

.pakcomms-mail-menu .list-group-item:hover {
    background: #e9f5ea;
}

.pakcomms-mail-main {
    min-width: 0;
}

.pakcomms-mail-content {
    padding: 20px;
}

.pakcomms-mobile-mail-nav {
    display: none;
}


/* ==========================================================
   MOBILE MAIL
   ========================================================== */

@media (max-width: 767.98px) {

    .pakcomms-mail {
        min-height: calc(100vh - 70px);
    }

    /*
       Hide desktop sidebar.
    */

    .pakcomms-mail-sidebar {
        display: none;
    }

    /*
       Main mail area occupies full phone width.
    */

    .pakcomms-mail-main {
        width: 100%;
    }

    .pakcomms-mail-content {
        padding: 12px;
        padding-bottom: 85px;
    }

    /*
       Mobile bottom navigation.
    */

    .pakcomms-mobile-mail-nav {

        display: flex;

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        height: 68px;

        background: #ffffff;

        border-top: 1px solid #dee2e6;

        z-index: 1050;

        padding-bottom: env(safe-area-inset-bottom);

        box-shadow: 0 -3px 12px rgba(0,0,0,.08);

    }

    .pakcomms-mobile-mail-item {

        flex: 1;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        text-decoration: none;

        color: #495057;

        font-size: .72rem;

        font-weight: 500;

    }

    .pakcomms-mobile-mail-item i {

        font-size: 1.25rem;

    }

    .pakcomms-mobile-mail-item:active {

        background: #f1f3f5;

    }

    .pakcomms-mobile-compose {

        color: #2e7d32;

    }

    /*
       Search box.
    */

    .pakcomms-mail-search .form-control {

        height: 46px;

        border-left: 0;

    }

    .pakcomms-mail-search .input-group-text {

        border-right: 0;

    }

    /*
       Mail tables.
       Convert rows into comfortable horizontal cards.
    */

    .pakcomms-mail table {

        min-width: 0;
        width: 100%;

    }

    .pakcomms-mail table thead {

        display: none;

    }

    .pakcomms-mail table tbody,
    .pakcomms-mail table tr {

        display: block;
        width: 100%;

    }

    .pakcomms-mail table tr {

        background: #ffffff;

        border: 1px solid #e3e6e8;

        border-radius: 10px;

        margin-bottom: 8px;

        padding: 10px 12px;

        box-shadow: 0 1px 3px rgba(0,0,0,.05);

    }

    .pakcomms-mail table td {

        display: block;

        border: 0;

        padding: 2px 0;

        white-space: normal;

        overflow-wrap: anywhere;

    }

    /*
       Inbox sender.
    */

    .pakcomms-mail table td:first-child {

        font-weight: 600;

        font-size: .9rem;

    }

    /*
       Subject.
    */

    .pakcomms-mail table td:nth-child(2) {

        font-size: .92rem;

        margin-top: 2px;

    }

    /*
       Date.
    */

    .pakcomms-mail table td:last-child {

        color: #6c757d;

        font-size: .75rem;

        margin-top: 4px;

    }

    /*
       Buttons on email detail pages.
    */

    .pakcomms-mail-content .btn {

        margin-bottom: 6px;

    }

    /*
       Email body.
    */

    .pakcomms-mail-content .card-body {

        overflow-wrap: anywhere;

        word-break: break-word;

    }

}