:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --accent-color: #e74c3c;
    --background-color: rgb(231, 178, 69);
    --border-color: rgb(176, 151, 83);
    --border-highlight-color: rgb(255, 248, 228);
    --text-color: #2c3e50;
}

@font-face {
    font-family: 'Abel';
    src: url('/static/fotomarket/fonts/Abel-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Permanent Marker';
    src: url('/static/fotomarket/fonts/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Rowdies';
    src: url('/static/fotomarket/fonts/Rowdies-Bold.ttf') format('truetype'),
         url('/static/fotomarket/fonts/Rowdies-Light.ttf') format('truetype'),
         url('/static/fotomarket/fonts/Rowdies-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 3px;
    padding: 3px;
    background-color: var(--background-color);
    font-family:
        /* "Abel", */
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

div {
    margin: 3px;
    padding: 3px;
}

textarea {
    min-height: 100px;
}

a {
    font-weight: bold;
    color: black;
}

/* --------------------- Form ------------------------------- */

form {
    margin: 3px;
    padding: 3px;
    width: 350px;
}

/* Error messages */

.has-error .form-control {
    border-color: red;
}

.invalid-feedback {
    color: red;
}


/* Change the color of the placeholder text */
::placeholder {
    color: #ff0000; /* Replace with your desired color */
}

/* For WebKit browsers (Chrome, Safari) */
::-webkit-input-placeholder {
    color: #ff0000; /* Replace with your desired color */
}

/* For Mozilla Firefox */
::-moz-placeholder {
    color: #ff0000; /* Replace with your desired color */
}

/* For Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: #ff0000; /* Replace with your desired color */
}

/* For Microsoft Edge */
::-ms-input-placeholder {
    color: #ff0000; /* Replace with your desired color */
}

/*---------------------- Card ---------------------------------*/

.card {
    background-color: rgb(255, 219, 142);
}

.card-text {
    font-size: 16px;
}

/* Add this CSS to make the card header sticky */
.sticky-header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 10000; /* Ensure it stays on top of other elements */
    background-color: rgb(255, 219, 142);
    border-bottom: 1px solid #000000;
    padding: 10px; /* Optional: Add some padding */
}

/*---------------------- Task ----------------------------------*/

.task-header {
    border-bottom: solid 2px var(--border-color);
    padding-top: 10px;
}

/*---------------------- Navigation bar ------------------------*/

.language-dropdown li {
    width: 200px;
}

.navbar-title {
    font-family: "Rowdies", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.5em;
    /*color: rgb(231, 178, 69);*/
    margin-left: 10px;
}
/*
.highlight-s {
    color: rgb(67, 67, 67);
}

.highlight-x {
    color: rgb(67, 67, 67);
}
*/

/*---------------------- Mobile  -------------------------------*/

/* Change the text size and layout for mobile screens */
@media (max-width: 600px) {
    .navbar-brand, .navbar-toggler, .navbar-collapse, .dropdown-item {
        font-size: 6vw; /* Adjust as needed */
    }

    .nav-item .btn-link {
        font-size: 6vw; /* Adjust as needed */
    }

    .third-screen .card-text {
        font-size: 6vw; /* Adjust as needed */
    }

    /* Additional styles for better mobile support */
    .navbar {
        padding: 10px; /* Adjust padding for mobile */
    }

    .container {
        padding: 0 15px; /* Adjust container padding for mobile */
    }

    .card {
        margin-bottom: 20px; /* Add margin between cards */
    }
}

/*---------------------- FullCalendar --------------------------*/

/* Remove underline from all text in FullCalendar */
.fc .fc-daygrid-day-number,  /* Day numbers */
.fc .fc-daygrid-event,        /* Event titles */
.fc .fc-toolbar-title,        /* Calendar title (month/year) */
.fc .fc-list-item-title,      /* List view item titles */
.fc .fc-daygrid-event-title,  /* Event titles in day grid */
.fc .fc-daygrid-day,          /* Day cell */
.fc .fc-daygrid-event-dot {   /* Dots in event list */
    text-decoration: none;
}

/* Remove underline specifically from links */
.fc a {
    text-decoration: none;
}

/* Position week numbers outside the calendar */
/* .fc .fc-daygrid-week-number {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    background: #fff;
    padding: 2px 5px;
    border-radius: 3px;
} */

/* Ensure week numbers are visible */
/* .fc .fc-daygrid-body {
    position: relative;
} */

/* Remove all borders in FullCalendar */
.fc .fc-daygrid-day-frame,
.fc .fc-daygrid-day,
.fc .fc-daygrid-day-top,
.fc .fc-daygrid-day-events,
.fc .fc-daygrid-event,
.fc .fc-daygrid-day-number,
.fc .fc-daygrid-event-dot,
.fc .fc-toolbar-title,
.fc .fc-list-item-title,
.fc .fc-daygrid-event-title {
    border: none;
    box-shadow: none;
}

/* Remove border around the entire calendar */
.fc,
.fc-view,
.fc-theme-standard td, .fc-theme-standard th,
.fc .fc-view,
.fc .fc-daygrid,
.fc .fc-daygrid-cell,
.fc .fc-daygrid-day-frame,
.fc .fc-daygrid-day,
.fc .fc-daygrid-day-top,
.fc .fc-daygrid-day-events,
.fc .fc-daygrid-event,
.fc .fc-daygrid-day-number,
.fc .fc-daygrid-event-dot,
.fc .fc-toolbar-title,
.fc .fc-list-item-title,
.fc .fc-daygrid-event-title {
    border: none;
    box-shadow: none;
}

.fc .fc-daygrid-week-number
{
    position: absolute;
    top: -10px;
    left: 0;
    z-index: 2;
}

#calendar {
    margin: 0px -30px;
}

/* FullCalendar mobile-friendly styles */
@media (max-width: 600px) {
    .fc-header-toolbar {
        flex-wrap: wrap;
    }

    .fc-toolbar-title {
        font-size: 1.2em;
    }

    .fc-dayGridMonth-view .fc-daygrid-event {
        font-size: 0.8em;
    }

    .fc .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
        margin-bottom: 5px;
    }
}

.focused-element {
    border: 3px solid var(--border-highlight-color); /* Blue border */
    padding: 5px; /* Optional: add some padding */
    border-radius: 5px; /* Optional: add rounded corners */
}