html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #0F9ED5;
}

.text-just-book-it-yellow {
    color: #FFC000 !important;
}

/* Target the navbar and set its background color using the variable */
.navbar {
    background-color: #0F9ED5 !important;
}

/* Optional: remove any border/shadow if present in your Bootstrap version */
/*.navbar {
    background-color: var(--main-bg-color) !important;
    border: none;
    box-shadow: none;
}*/
.drop-zone-area {
    /* Layout and Sizing */
    width: 100%;
    min-height: 200px; /* Ensures it's a large, easily clickable target */
    padding: 20px;
    margin-bottom: 20px;
    /* Styling */
    border: 3px dashed #ccc; /* Dashed border for the "drop here" look */
    border-radius: 10px;
    background-color: #f9f9f9;
    /* Text and Alignment */
    text-align: center;
    font-family: Arial, sans-serif;
    color: #666;
    font-size: 1.2em;
    line-height: 1.5;
    /* Interaction */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

    /* Style for when the file is actively being dragged over the zone */
    .drop-zone-area.drag-over {
        border-color: #007bff; /* Highlight color */
        background-color: #e6f3ff;
        color: #007bff;
    }

    /* Style for the inner text */
    .drop-zone-area p {
        margin-top: 50px;
    }



/*
  This CSS defines the appearance and positioning of the custom tooltip.
  In a Tailwind project, you would often use Tailwind utility classes 
  or a component library to achieve this.
*/

.tooltip-container {
    /* Required to position the tooltip relative to the link */
    position: relative;
    display: inline-block;
}

    .tooltip-container::after {
        /* This creates the tooltip box */
        content: attr(data-tooltip);
        position: absolute;
        bottom: 125%; /* Position above the link */
        left: 50%;
        transform: translateX(-50%);
        /* Styling */
        background-color: #333;
        color: white;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.8rem;
        white-space: nowrap;
        /* Visibility control */
        opacity: 0;
        pointer-events: none; /* Allows clicks through to the link */
        transition: opacity 0.3s;
    }

    .tooltip-container:hover::after {
        /* Show the tooltip on hover */
        opacity: 1;
    }


/* Styling for the circular profile icon */
.profile-circle {
    /* Dimensions and shape */
    height: 40px; /* Adjust size as needed */
    width: 40px; /* Adjust size as needed */
    border-radius: 50%; /* Makes it a perfect circle */
    /* Colors and appearance */
    background-color: #007bff; /* Primary blue color (or any color you prefer) */
    color: white; /* Text color */
    /* Centering the text */
    display: flex;
    justify-content: center; /* Horizontal centering */
    align-items: center; /* Vertical centering */
    /* Text style */
    font-weight: bold;
    font-size: 1.2rem; /* Adjust font size relative to the circle size */
    /* Spacing and margins */
    margin-right: 10px; /* Optional: Space between circle and other elements */
}

/* Optional: Make the circle an inline element so it sits nicely in the header */
#manage .profile-circle {
    display: inline-flex;
}

/* Optional: Remove default link styling from the text inside the circle */
#manage {
    padding: 0;
}