.tw-intitleF {

    font-size: 36px;
    font-weight: 600;
    color: #2c3e91;
    text-align: center;
    display: inline-block;
    padding:15px 0px;
}

.tw-fleet-filter {
    text-align: center;
    margin-bottom: 20px;
}

.fleet-tab {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    .fleet-tab:hover, .fleet-tab.active {
        background-color: #0056b3;
    }

.tw-fleet-table-container {
    margin: auto;
    overflow-x: auto;
    max-width: 80%;
    padding: 20px;
}

.tw-fleet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background-color: #fff;

}



    .tw-fleet-table th {
        background-color: transparent;
        color: #69B4FF;
        font-weight: bold;
        padding: 12px;
        text-align: left;
    }
.fleet-header th {
    background-color: #69B4FF;
    color: #fff;
    font-weight: bold;
    padding: 12px;
    text-align: left;
}


    .tw-fleet-table td {
        padding: 12px;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 1px solid #e0e0e0;
        border-left: none;
        border-right: none;
    }


    .tw-fleet-table,
    .tw-fleet-table th,
    .tw-fleet-table td {
        border-left: none;
        border-right: none;
        border-top: none;
    }


        .tw-fleet-table td img {
            width: 18px;
            height: 18px;
            object-fit: contain;
        }
        .tw-fleet-table th:last-child,
        .tw-fleet-table td:last-child {
            width: 40px;
            padding-left: 4px;
            padding-right: 4px;
        }
        .tw-fleet-table th h2 {
            text-align: left;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            backdrop-filter: blur(2px);
        }

.modal-content {
    display: block;
    margin: 5% auto;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    animation: zoomIn 0.3s ease-out;
}


@media (min-width: 768px) {
    .tw-fleet-table td:nth-child(1),
    .tw-fleet-table th:nth-child(1) {
        width: 10%;
    }

    .tw-fleet-table td:nth-child(2),
    .tw-fleet-table th:nth-child(2) {
        width: 20%;
    }

    .tw-fleet-table td:nth-child(3),
    .tw-fleet-table th:nth-child(3) {
        width: 10%;
    }

    .tw-fleet-table td:nth-child(4),
    .tw-fleet-table th:nth-child(4) {
        width: 10%;

    }

    .tw-fleet-table td:nth-child(5),
    .tw-fleet-table th:nth-child(5) {
        width: 10%;
    }

    .tw-fleet-table td:nth-child(6),
    .tw-fleet-table th:nth-child(6) {
        width: 10%;
    }

    .tw-fleet-table td:nth-child(7),
    .tw-fleet-table th:nth-child(7) {
        width: 10%;
    }
    .tw-fleet-table td:nth-child(8),
    .tw-fleet-table th:nth-child(8) {
        width: 5%;
    }

    .tw-fleet-table td:nth-child(9),
    .tw-fleet-table th:nth-child(9) {
        width: 5%;
    }
    .tw-fleet-table td:first-child {
        padding-left: 1em;
        transition: padding 0.2s;
    }

    .tw-fleet-table td:nth-child(2) {
        transition: padding 0.2s;
    }

    .tw-fleet-table tr:not(.fleet-header):hover {
        background-color: #f0f0f0;
    }

        .tw-fleet-table tr:not(.fleet-header):hover td:first-child,
        .tw-fleet-table tr:not(.fleet-header):hover td:nth-child(2) {
            padding-left: 2.5em;
        }

}
@media (max-width: 1500px) {
    .tw-fleet-table{
        font-size:12px;
    }
        .tw-fleet-table tr:not(.fleet-header):hover td:first-child,
        .tw-fleet-table tr:not(.fleet-header):hover td:nth-child(2) {
            padding-left: 1.3em;
        }
}

    @media screen and (max-width: 768px) {
        .tw-fleet-table .fleet-header {
            display: none;
        }

        .tw-fleet-table th h2 {
            font-size: 18px;
        }

        .tw-fleet-table {
            border: 0;
        }

            .tw-fleet-table thead {
                display: none;
            }

            .tw-fleet-table tr {
                display: block;
                margin-bottom: 15px;
                background-color: #f9f9f9;
                padding: 5px;
                border-radius: 5px;
            }

            .tw-fleet-table td {
                display: block;
                text-align: right;
                font-size: 14px;
                padding: 8px 10px;
                position: relative;
                border: none;
            }

                .tw-fleet-table td::before {
                    content: attr(data-label);
                    position: absolute;
                    left: 10px;
                    width: 50%;
                    font-weight: bold;
                    text-align: left;
                    color: #555;
                }
    }