﻿@media (max-width: 768px) {


    .main-content {
        margin-left: 0;
        padding: 20px;
    }

    .PageTitle {
        font-size: 32px;
    }
    /*Home Section*/
    .HomeCardText {
        font-weight: 700;
        font-size: 14px;
    }
    /*Home Section*/

    /*Table Section start*/
    .mobile-table-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        overflow: scroll;
        height: 500px;
    }

    .mobile-table {
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
        background-color: #fafafa;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

        .mobile-table .d-flex {
            display: flex;
            justify-content: space-between;
            /* padding: 6px 0;*/
            border: 1px solid #eee;
        }

    .mobile-table-header {
        height: 40px;
        font-weight: 600;
        color: var(--company-primary);
        background: var(--company-secondary);
        text-align: left;
        font-family: var( --Default-font);
        font-weight: 700;
        font-size: 12px;
        line-height: 130%;
        width: 45%;
        text-align: left;
        vertical-align: middle;
        display: flex;
        align-items: center;
        padding-left: 15px;
    }

    .mobile-table-content {
        width: 55%; /* Adjust as needed */
        text-align: right;
        color: #555;
        font-family: var( --Default-font);
        font-weight: 400;
        font-size: 14px;
        line-height: 130%;
        height: 40px;
        text-align: left;
        vertical-align: middle;
        display: flex;
        align-items: center;
        padding-left: 15px;
    }

    /*Table Section End*/
    /*header Bar*/
    .dropdown-menu {
        right: 0;
        top: 66px;
    }
    /*header Bar*/


    /*button Group*/
    .buttonList .btn {
        flex: 1 1 calc(100% - 15px);
    }

    .buttonList {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

        .buttonList .btn {
            flex: 1 1 calc(100% - 15px);
            box-sizing: border-box;
        }
    /*button Group*/
}
