:root {
    --driverapp-primary: #00a9a9;
    --driverapp-primary2: #00c1c1;
    --driverapp-bg: #F4F7FA;
    --driverapp-card: #FFFFFF;
    --driverapp-text-primary: #1A1A1A;
    --driverapp-text-secondary: #6B7280;
    --driverapp-border-light: #E5E7EB;
    --sidebar-width-expanded: 250px;
    --sidebar-width-collapsed: 60px;
    --header-height: 60px;
    --transition-speed: 0.3s ease;
}
body {
    font-family: 'Poppins', sans-serif;
}

.driverapp-body {
    background-color: #f0f2f5 !important;
}

.driverapp-text-primary {
    color: var(--driverapp-primary);
}

/* ===========
     loader
   =============*/
.loading-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 45%;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* ===========
     Status Color
   =============*/
.status-Cancelled {
    color: red;
}

.status-OnTime {
    color: limegreen;
}

.status-Delay {
    color: yellow;
}

.status-Arrived {
    color: dodgerblue;
}

.status-Boarding {
    color: lime;
    transition: opacity 5s ease-in infinite;
    animation: blinker 1.5s linear infinite;
    opacity: 1;
}

.status-Departed {
    color: deepskyblue;
}

.status-Available {
    color: limegreen;
}

.status-Limited {
    color: yellow;
    transition: opacity 5s ease-in infinite;
    animation: blinker 1.5s linear infinite;
    opacity: 1;
}

.status-SoldOut {
    color: red;
}

.status-Unknown {
    color: black;
}

/* ===========
     COMMON
   =============*/
.blink {
    transition: opacity 5s ease-in infinite;
    animation: blinker 1.5s linear infinite;
    opacity: 1;
}

.deviceid {
    margin-top: .2rem;
    margin-bottom: .1rem;
    font-size: 1rem;
    line-height: .8rem;
}

@keyframes blinker {
    80% {
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}

.rotate .table-cell {
    animation-name: spinAround;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.rotate2 .table-cell {
    animation-name: spinAround2;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.rotate3 .table-cell {
    animation-name: spinAround3;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}


@keyframes spinAround {
    to {
        transform: rotateX(360deg);
    }
}

@keyframes spinAround2 {
    to {
        transform: rotateX(360deg);
    }
}

@keyframes spinAround3 {
    to {
        transform: rotateX(360deg);
    }
}

/* ===========
     MAIN
   =============*/

.vms-container {
    background-color: rgb(0, 0, 77);
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    padding: 0;
}

    .vms-container.modal-open {
        position: relative;
    }

        .vms-container.modal-open .container-fluid.vms-container {
            position: relative;
        }

    /* ===========
     HEADER
   =============*/

    .vms-container .vms-header {
        overflow: hidden;
        background: rgb(0, 0, 77);
        position: absolute;
        top: 0;
        height: 13vh;
        width: 100%;
        text-transform: uppercase;
    }

        .vms-container .vms-header .vms-header-container {
            height: 100%;
            background-color: white;
        }

        .vms-container .vms-header .logo-container-main {
            width: 45vw;
        }

            .vms-container .vms-header .logo-container-main .logo {
                width: 100%;
                height: 100%;
                padding: .4rem;
            }

        .vms-container .vms-header .time-container-main {
            width: 55vw;
        }

        .vms-container .vms-header .boarding-text-container {
            width: 40%;
            height: 100%;
            color: #FFA500;
            font-size: 5rem;
            font-weight: bold;
        }

        .vms-container .vms-header .time-container-main {
            cursor: pointer;
        }

        .vms-container .vms-header .vms-time {
            margin-top: 1.8rem;
            color: black;
            font-size: 4.8rem;
            font-weight: bold;
            line-height: 3.9rem;
            padding-right: .5rem;
        }

        .vms-container .vms-header .vms-date {
            color: black;
            font-size: 1.7rem;
            font-weight: bold;
            line-height: 2rem;
            padding-right: .5rem;
        }


    /* ===========
    BODY
=============*/

    .vms-container .vms-body {
        overflow: hidden;
        background-color: rgb(0, 0, 77);
        position: absolute;
        top: 13vh;
        bottom: 5vh;
        width: 100%;
        font-weight: bold;
        word-wrap: break-word;
        text-transform: uppercase;
    }

    .vms-container .vms-setting {
        overflow: hidden;
        background-color: rgb(0, 0, 77);
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .vms-container .vms-body .vms-display-text {
        height: 82vh;
        font-size: 7rem;
        line-height: 7rem;
        color: darkorange;
    }

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

    .vms-container .vms-footer {
        position: absolute;
        bottom: 0;
        padding: 0px;
        width: 100%;
        height: 5vh;
    }

        .vms-container .vms-footer .marquee {
            overflow: hidden;
            background: #000000 !important;
            color: #00e4ca !important;
            font-size: 1.7rem !important;
            font-weight: bold;
            font-style: italic;
            text-transform: uppercase;
            line-height: 5vh;
        }

@media screen and (max-width: 1919px) {
    .vms-container .vms-header .center-container-main {
        font-size: 3.5rem;
    }

    .vms-container .vms-header .boarding-container {
        font-size: 8rem;
        line-height: 6.5rem;
    }

    .vms-container .vms-header .tiket-counter-container .header-subtitle .subtitle-title {
        font-size: 2rem;
        font-weight: bold;
    }

    .vms-container .vms-header .tiket-counter-container .header-subtitle .subtitle-destination {
        font-size: 2rem;
    }

    .vms-container .vms-body .vms-boardinghall-container .vms-boarding-label {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .vms-container .vms-header .boarding-container .boarding-gate .gate-text {
        font-size: 10rem;
        margin-left: 1rem;
        margin-bottom: 1rem;
        text-transform: capitalize;
    }

    .vms-container .vms-header .boarding2-container .boarding2-gate .gate-text {
        font-size: 9rem;
        margin-left: 1rem;
        margin-bottom: 1rem;
    }

    .vms-container .vms-body table th {
        font-size: 1.7rem;
        line-height: 1rem;
    }

    .vms-container .vms-body table td {
        font-size: 1.7rem;
        line-height: 1rem;
    }

    .vms-container .vms-body .gate-box-container {
        font-size: 2.5rem;
        line-height: 1.5rem;
    }

    .vms-container .vms-body td.platform-box-container {
        font-size: 2.5rem;
        line-height: 1.5rem;
    }


    .vms-container .vms-body td.destination-box-container .destination-text {
        font-size: 2rem;
    }

    .vms-container .vms-header .vms-time {
        font-size: 8rem;
        line-height: 8rem;
    }

    .vms-container .vms-header .vms-date {
        font-size: 2.7rem;
        line-height: 2.7rem;
    }
}

/* ===========
    MODERN LOGIN PAGE STYLES
   =============*/

/* 1. The main page wrapper */
.login-page-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #f0f2f5;
}

/* 2. The modern login card */
.login-card-modern {
    max-width: 450px;
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: none;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1);
}

/* 3. Style for validation messages */
.login-page-wrapper .validation-message {
    font-size: 0.8em;
    color: var(--bs-danger);
    margin-top: 0.25rem;
    display: block; /* Ensure it's on its own line */
}

.login-logo{
    width:100px;
    height: 100px;
}

.login-footer{
    color:gray;
}

.login-btn {
    background-color: var(--driverapp-primary);
    border:none;
}

.login-btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--driverapp-primary2) !important;
    border-color: var(--bs-btn-hover-border-color);
}

.login-btn:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--driverapp-primary2);
}

.login-btn:focus-visible {
    background-color: var(--driverapp-primary2);
}

/* ===========
    TRIP PAGE STYLES
   =============*/

/* 1. Set a light gray background for the scroll area */
.trip-list-scroll {
    background-color: #f0f2f5;
    /* Add padding around the entire scroll area */
    padding: 1rem; 
}

/* 2. Style the new trip card */
.trip-card-modern {
    border: none; /* Remove default border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Softer, modern shadow */
    border-radius: 0.75rem; /* Slightly more rounded */
}

.main-footer{
    display:flex;
    justify-content: center;
}

.layout-main{
    padding:0 !important;
}

.layout .layout-header {
    background-color: var(--driverapp-primary);
    height: var(--bb-layout-header-height);
    color: var(--bb-layout-header-color);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    position: sticky;
    z-index: 1035;
    border-bottom: 1px solid var(--driverapp-primary2);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.layout .layout-header h4 {
    color:white;
}

.dropdown-logout .dropdown-menu {
    padding: 0;
    overflow: hidden;
    border-color: var(--driverapp-primary2);
    border-radius:1rem;
}
.dropdown-logout .dropdown-user {
    background-color: var(--driverapp-primary2);
    color: white;
}


/* ===========
    PROFILE PAGE STYLES
   =============*/

/* 1. Sets the light gray page background */
.profile-page-wrapper {
    padding: 1.5rem;
    background-color: #f0f2f5;
    min-height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
}

/* 2. Styles the white header box */
.profile-header {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 3. Styles the large profile picture */
.profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover; /* Prevents image from stretching */
    border: 3px solid var(--driverapp-primary);
}

.profile-info {
    margin-left: 1rem;
}

/* 4. Styles the new info cards */
.modern-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-radius: 0.75rem;
}

/* 5. Styles the clean key/value list items */
.profile-list-item {
    display: flex;
    /* REMOVED justify-content: space-between; */
    align-items: center;
    padding: 1rem;
}

    /* Icon and label text */
    .profile-list-item span {
        color: var(--bs-gray-600);
    }

    /* Icon color */
    .profile-list-item i {
        color: var(--bs-gray-500);
        margin-right: 1rem;
        width: 20px; /* Aligns all icons */
        text-align: center;
    }

    /* The actual value */
    .profile-list-item strong {
        color: var(--bs-gray-900);
        text-align: right;
        /* THIS IS THE FIX:
      'margin-left: auto' pushes the value all the way to the right,
      forcing the labels to align.
    */
        margin-left: auto;
        padding-left: 1rem; /* Adds space between label and value */
    }

.breadcrumb-item a, .btn-link {
    color: var(--driverapp-primary);
}

.driverapp-btm-primary {
    background-color: var(--driverapp-primary);
    border-color: var(--driverapp-primary);
}

.driverapp-btm-primary:hover {
    background-color: var(--driverapp-primary2);
    border-color: var(--driverapp-primary2);
}
.driverapp-btm-primary:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--driverapp-primary2);
}

/*Loading progress style*/
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(24 234 255) !important;
}

.driverapp-bg-primary{
    background-color: var(--driverapp-primary2);
}