.dolvera-table-container {
    background-color: #1272c6;
    border-radius: 12px;
    padding: 6px 10px;
    margin-top: 20px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 20%);
}

.user-language-card {
    position: absolute;
    top: 78%; /* Opens just below the button */
    /*left: 71%;*/ /* Centers horizontally */
    transform: translateX(-50%); /* Center it relative to the button */
    background-color: #fff; /* Clean white background */
    border-radius: 10px; /* Rounded corners */
    padding: 16px 20px;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 999;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transform: translateY(-10px); /* Start slightly above */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease; /* Smooth transition */
}

/* Profile links */
.language-link {
    display: block;
    padding: 8px 0;
    color: #23B8E8;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

    .language-link:hover {
        color: #0070e0; /* Darker blue on hover */
        text-decoration: none;
    }

    /* Profile link: active state */
    .language-link:active {
        color: #005bb5;
    }


.language2 {
    display: flex;
    justify-content: left;
    align-items: end;
}

    .language2 .language-link2 {
        border: none;
        background: #fff;
        color: #0F1C4E;
        border-radius: 10px !important;
        width: 55px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        transition: all .5s ease-in-out;
        margin-left: 10px;
        text-decoration: none;
    }

.language-link2:hover {
    background: #23B8E8;
    color: #fff;
    text-decoration: none;
}

.language-link2:active {
    background: #23B8E8;
    color: #fff;
    text-decoration: none;
}


.ferry-highlight {
    color: #e4ff00;
    transition: color 0.3s ease;
}

    .ferry-highlight:hover {
        color: #d4cc00; /* <-- your hover color */
    }


.tableFilters {
    font-size: 14px;
}

.dolvera-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .dolvera-table-scroll table {
        width: 100%;
        min-width: 100px; /* or wider depending on your table */
        border-collapse: collapse;
    }

.dolvera-search-btn {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-left-width: 0;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-style: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-appearance: none;
    -webkit-transition-property: background;
    -moz-transition-property: background;
    transition-property: background;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 1, 1);
    cursor: pointer;
    margin-left: 0;
    margin-top: 12px;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 25px;
    padding-right: 25px;
    color: white;
    background-color: #23B8E8;
}

    /* Icon style */
    .dolvera-search-btn i {
        font-size: 0.85rem;
        line-height: 1;
    }

    /* Hover effect */
    .dolvera-search-btn:hover {
        background-color: #478bcd;
        color: white;
    }

    /* Optional: Focus style */
    .dolvera-search-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(35, 184, 232, 0.35);
    }


.logout-btn {
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-width: 0px;
    border-style: none;
    outline: none;
    box-shadow: none;
    text-decoration: none;
    appearance: none;
    transition-property: background;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0, 0, 1, 1);
    cursor: pointer;
    margin: 0px;
    /*font-family: UberMoveText, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
    padding: 14px 16px;
    color: rgb(222, 17, 53);
    background-color: rgb(243, 243, 243);
}

    /* Icon inside the logout button */
    .logout-btn i {
        font-size: 1.1rem; /* Icon size */
        line-height: 1; /* Align icon vertically */
    }

    /* Hover effect */
    .logout-btn:hover {
        background-color: #e0e0e0; /* Slightly darker background on hover */
        color: #cc0001; /* Red text on hover */
        border-color: #cc0001; /* Red border on hover */
        text-decoration: none;
    }

    /* Active effect (button pressed state) */
    .logout-btn:active {
        background-color: #cc0001; /* Red background when clicked */
        color: #fff; /* White text on click */
        border-color: #cc0001; /* Red border on click */
    }


.user-profile-card {
    position: absolute;
    top: 78%; /* Opens just below the button */
    /*left: 71%;*/ /* Centers horizontally */
    transform: translateX(-50%); /* Center it relative to the button */
    background-color: #fff; /* Clean white background */
    border-radius: 10px; /* Rounded corners */
    padding: 16px 20px;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 999;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transform: translateY(-10px); /* Start slightly above */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease; /* Smooth transition */
}

/* Profile content */
.card-content2 {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.6; /* Better spacing between text */
}

/* Profile links */
.profile-link {
    display: block;
    padding: 8px 0;
    color: #23B8E8;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

    .profile-link:hover {
        color: #0070e0; /* Darker blue on hover */
        text-decoration: none;
    }

    /* Profile link: active state */
    .profile-link:active {
        color: #005bb5;
    }



/* Minimal header top */
.header-top {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Remove spacing from wrapper elements */
.header-top-wrapper,
.header-top-left,
.header-top-right,
.header-top-contact,
.header-top-contact ul,
.header-top-contact li {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

    /* Style the <ul> and <li> */
    .header-top-contact ul {
        display: flex;
        gap: 1rem; /* adjust spacing between items */
        list-style: none;
        align-items: center;
    }

    .header-top-contact li {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }


/* Optional: make theme button tighter */
.theme-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    font: normal 14px Arial;
}

/* Make navbar height minimal */
.navbar {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 40px;
}

.nav-link:hover {
    text-decoration: none !important;
}


/* Shrink logo */
.navbar-brand img {
    max-height: 30px;
    height: auto;
}

/* Shrink nav items */
.navbar-nav .nav-item {
    margin: 0;
    padding: 0;
}

/* Shrink nav links */
.navbar-nav .nav-link {
    padding: 0.25rem 0.5rem;
    line-height: 1;
    font-size: 0.9rem;
}

    /* If you're using <p> inside nav-link, shrink that too */
    .navbar-nav .nav-link p {
        margin: 0;
        padding: 0;
        line-height: 1;
        font-size: 1.2rem;
        font: normal 14px Arial;
    }

/* Toggler size */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
}

.dolvera-secondary-btn {
    border: 1px solid black;
    border-radius: 10px !important;
    background: #fff;
    color: black;
    padding: 6px 16px;
    font-size: 1.2rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

    /* Hover state */
    .dolvera-secondary-btn:hover {
        
        background: #1272c6;
        color: white;
        text-decoration: none;
    }

    /* Active (click) state */
    .dolvera-secondary-btn:active {
        background-color: #1ba3cf;
        border-color: #1ba3cf;
        color: white;
    }

    /* Optional icon inside */
    .dolvera-secondary-btn i {
        font-size: 1rem;
    }

.form-control {
    border-radius: 10px;
}

.dolvera-table-wrapper {
    background-color: #e8f8fd;
    border-radius: 12px;
    padding: 8px 12px;
    margin-top: 20px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 20%);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.theme-btn {
    background-color: white;
    color: black;
    height: 30px; /* fixed pill height */
    padding: 0 16px; /* horizontal padding only */
    border: none;
    border-radius: 10px; /* pill shape */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    width: max-content;
}

    /* Icon style */
    .theme-btn i {
        font-size: 0.85rem;
        line-height: 1;
    }

    /* Hover effect */
    .theme-btn:hover {
        background-color: #23B8E8;
        color: white;
        text-decoration: none;
    }

    /* Optional: Focus style */
    .theme-btn:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(35, 184, 232, 0.35);
    }


/*MOBILE VIEW*/
@media (max-width: 1200px) {

    .theme-btn {
        margin-top: 10px;
        width: max-content;
    }

    .navbar-nav .nav-item .nav-link {
        display: block;
        width: 100%;
        color: white;
        text-align: left;
        padding: 12px 16px;
        font-size: 1.1rem;
        text-transform: uppercase;
        /*border-radius: 8px;*/
        margin-bottom: 8px;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

        .navbar-nav .nav-item .nav-link:hover,
        .navbar-nav .nav-item .nav-link:focus {
            /*background-color: #1ba1cf;*/
            color: #fff;
            transform: scale(1.01);
            text-decoration: none;
        }

        .navbar-nav .nav-item .nav-link p {
            margin: 0;
            font-size: 1.3rem;
        }

    /* Enlarge the user profile card content slightly */
    .card-content2 {
        font-size: 1rem;
    }

    /* Optionally stack the items for better mobile spacing */
    .user-profile-card {
        width: 100%;
        max-width: calc(100vw - 32px);
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }

    /* Navbar spacing */
    .navbar-nav .nav-item {
        margin-bottom: 8px;
    }

    .navbar-toggler-icon i {
        font-size: 24px;
    }

    /* More space between icon and text on buttons */
    .theme-btn i,
    .logout-btn i {
        margin-left: 6px;
    }

    .user-profile-card {
        left: 0 !important;
        right: auto;
        width: 250px;
        max-width: 100%;
        border-radius: 10px;
        top: 100%;
        margin-top: 91px;
    }

    .user-language-card {
        left: 0 !important;
        right: auto;
        width: 250px;
        max-width: 100%;
        border-radius: 10px;
        top: 100%;
        margin-top: 91px;
    }
}