.page-titles {
    border-radius: 5px;
    padding: 7px;
    background-color: #ffffff;
    margin-bottom: 15px;
    gap: 5px 0px;
    box-shadow: 0px 0px 6px 0px rgb(201 201 201);
    border: 1px solid #d5d5d5;
}
/*.top-headings {
    background-color: #5b91d80d;
    border: 1px solid #5c8fd3db;
    padding: 4px 6px;
}*/
.paginator {
    display: flex;
    justify-content: space-between;
    border-top: none !important;
}

#main {
    position: static;
}

.quick-main-div::before {
    content: "";
}

.quick-main-div::after {
    content: "";
}

.quickgrid {
    width: -webkit-fill-available;
}
/* Table Styling */
.quickgrid {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 16px;
    text-align: left;
}

.col-title-text {
    color: #fbfbfb;
    font-size: 15px;
    font-weight: 600;
    white-space: normal !important;
}

.quickgrid th, .quickgrid td {
    padding: 8px 0px;
    border: 1px solid #b7b7b7;
    border-top: 0;
}

.table-box {
    overflow: auto;
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
    min-height: 200px;
    scrollbar-width: thin;
}
.quick-main-div .quickgrid thead th:last-child {
    min-width: 170px;
}
.quick-main-div .quickgrid thead th:nth-last-child(2) {
    min-width: 215px;
}
.quickgrid thead {
    background-color: #fff;
    position: sticky;
    top: 0px;
    box-shadow: 0px 0px 1px #ddd;
}

.quickgrid tbody tr:hover td {
    background-color: #eb73650d;
}

.quickgrid th {
    background-color: #3a4b57;
}

/*.quickgrid tr:nth-child(even) {
    background-color: #f2f2f2;
}*/



/* Header Buttons */
.col-header-content {
    display: flex;
    align-items: center;
}

tbody, td, tfoot, th, thead, tr {
    background-color: #fff;
}

.quickgrid[theme=default] button.col-title:hover, .col-title:hover {
    background-color: transparent;
    text-decoration: none;
    color: #ff8e13;
}

.quickgrid[theme=default] .col-options {
    top: 3px;
    padding: 2px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    max-width: -webkit-fill-available;
    min-width: -webkit-fill-available;
}

.quickgrid[theme=default] button.col-title:hover, .quickgrid[theme=default] .col-options-button:hover {
    background-color: transparent;
}

.col-title {
    background: none;
    border: none;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

.quickgrid[theme=default] > tbody > tr > td {
    padding: 7px;
    font-size: 14px;
}

.quickgrid[theme=default] .col-title {
    margin: 0;
    padding: 0;
}

.col-sort-desc[b-vznuo5fmpv] .sort-indicator, .col-sort-asc[b-vznuo5fmpv] .sort-indicator {
    background-image: url('images/gridarrow-old.png') !important;
    background-position: center;
    background-size: 13px;
    background-repeat: no-repeat;
    opacity: 1;
}

.sort-indicator {
    margin-left: 5px;
}

/* Button Styling */
.btn {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.btn-success {
    background-color: #4CAF50;
}

.btn-danger {
    background-color: #f44336;
}

.btn-primary {
    background-color: #2196F3;
}


label {
    color: black;
    font-size: 13px;
}



th[b-vznuo5fmpv] .col-options-button {
    background-image: url('images/Gridfilter-old.webp');
    cursor: pointer;
    background-size: 13px;
    margin-right: 6px;
}

.quickgrid[theme=default] .col-options {
    margin-top: 0px;
    border-radius: 0;
    border: 1px solid #a1a1a1;
}


.quickgrid[theme=default] .col-options {
    box-shadow: none;
}

.quick-main-div .quickgrid thead tr .action-fix {
    min-width: 224px;
    width: 224px;
    text-align: center;
}

.quick-main-div .quickgrid thead tr .status-fix {
    min-width: 215px;
    width: 215px;
}

.quick-main-div .quickgrid thead tr th:last-child div {
    cursor: default;
}

.col-options .search-box input {
    outline: none;
    border: none;
    width: -webkit-fill-available;
    font-size: 14px;
    color: #3a4b57;
    font-weight: 600;
}

.quickgrid[theme=default] .col-title {
    gap: 5px;
    font-weight: 500;
    justify-content: start;
    max-width: fit-content;
}

.col-options .search-box input::placeholder {
    font-size: 13px;
}

.quickgrid[theme="default"] > tbody > tr > td {
    font-size: 12px;
    font-weight: 600;
}

.action-td {
    margin: 0;
}

.edit-btn {
    border: 1px solid #ff8213;
    padding: 5px 6px;
    border-radius: 2px;
    color: #ff8213;
    background-color: #fff;
    margin: 0 5px;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.3s;
}

    .edit-btn:hover {
        color: #fff;
        background-color: #ff8213;
    }

.active-btn {
    border: 1px solid #009688;
    padding: 5px 6px;
    border-radius: 2px;
    color: #009688;
    background-color: #fff;
    margin: 0 5px;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.3s;
}

    .active-btn:hover {
        color: #fff;
        background-color: #009688;
    }

.inactive-btn {
    border: 1px solid #4f5b70;
    padding: 5px 6px;
    border-radius: 2px;
    color: #4f5b70;
    background-color: #fff;
    margin: 0 5px;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.3s;
}

    .inactive-btn:hover {
        color: #fff;
        background-color: #4f5b70;
    }

.trash-btn {
    border: 1px solid #f31111;
    padding: 5px 6px;
    border-radius: 2px;
    color: #f31111;
    background-color: #fff;
    margin: 0 5px;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.3s;
}

    .trash-btn:hover {
        color: #fff;
        background-color: #f31111;
    }

.map-btn {
    border: 1px solid #9c27b0;
    padding: 5px 6px;
    border-radius: 2px;
    color: #9c27b0;
    background-color: #fff;
    margin: 0 5px;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.3s;
}

    .map-btn:hover {
        color: #fff;
        background-color: #9c27b0;
    }

.role-map-btn {
    border: 1px solid #cbce49;
    padding: 5px 6px;
    border-radius: 2px;
    color: #cbce49;
    background-color: #fff;
    margin: 0 5px;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.3s;
}

    .role-map-btn:hover {
        color: #fff;
        background-color: #cbce49;
    }

.col-options .search-box {
    margin: 0 !important;
}

.col-options div {
    display: flex;
    justify-content: space-around;
    margin: 4px;
    align-items: center;
    height: -webkit-fill-available;
    padding: 0 2px;
    gap: 5px;
}

    .col-options div label {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        color: #3a4b57;
    }

.text-right {
    text-align: right;
}

.welcome-text {
    padding-top: 0px !important;
}

    .welcome-text .paginator {
        flex-wrap: wrap;
        margin-top: 0px !important;
        align-items: center;
        font-size: 13px;
    }

        .welcome-text .paginator .summary {
            line-height: normal;
            font-weight: 600;
            color: #3a4b57;
            font-size: 14px;
            padding-left: 2px;
        }

.pagination-text {
    margin: 0 0.5rem;
    font-weight: 600;
    color: #3a4b57;
    font-size: 13px;
}

@media (max-width: 520px) {
    .quickgrid th, .quickgrid td {
        padding: 3px 5px !important;
    }

    .quickgrid[theme=default] .col-options {
        margin-top: 0;
        margin-left: 0;
        top: 0px;
        right: 2px;
        padding: 0px;
        border: 1px solid #e0982d;
        left: 2px;
        width: -webkit-fill-available;
        max-width: -webkit-fill-available;
        min-width: -webkit-fill-available;
    }

    .quickgrid[theme=default] .search-box input {
        width: -webkit-fill-available;
    }
}

.action-icon {
    font-size: 18px;
    color: #fff;
    margin-right: 14px;
    cursor: pointer;
    padding: 6px 7px;
    border-radius: 3px;
}

.action-icon:hover {
    opacity: 0.7;
}

.bg-gold {
    background-color: #11a5eb;
}

.bg-red {
    background-color: #f31661;
}

.bg-green {
    background-color: #69a11f;
}
/*Added by Aastha on 15 May 2025*/
.w-1p {
    width: 1% !important;
}

.w-2p {
    width: 2% !important;
}

.w-3p {
    width: 3% !important;
}

.w-4p {
    width: 4% !important;
}

.w-5p {
    width: 5% !important;
}

.w-6p {
    width: 6% !important;
}

.w-7p {
    width: 7% !important;
}

.w-8p {
    width: 8% !important;
}

.w-9p {
    width: 9% !important;
}

.w-10p {
    width: 10% !important;
}

.w-11p {
    width: 11% !important;
}

.w-12p {
    width: 12% !important;
}

.w-13p {
    width: 13% !important;
}

.w-14p {
    width: 14% !important;
}

.w-15p {
    width: 15% !important;
}

.w-16p {
    width: 16% !important;
}

.w-17p {
    width: 17% !important;
}

.w-18p {
    width: 18% !important;
}

.w-19p {
    width: 19% !important;
}

.w-20p {
    width: 20% !important;
}

.w-21p {
    width: 21% !important;
}

.w-22p {
    width: 22% !important;
}

.w-23p {
    width: 23% !important;
}

.w-24p {
    width: 24% !important;
}

.w-25p {
    width: 25% !important;
}

.w-26p {
    width: 26% !important;
}

.w-27p {
    width: 27% !important;
}

.w-28p {
    width: 28% !important;
}

.w-29p {
    width: 29% !important;
}

.w-30p {
    width: 30% !important;
}

.w-35p {
    width: 35% !important;
}

.w-40p {
    width: 40% !important;
}

.w-45p {
    width: 45% !important;
}

.w-50p {
    width: 50% !important;
}
