/* Media query for phones (typically screens smaller than 768px) */
@media (max-width: 1000px) {
    #button_modif {
        font-size: 50px !important; /* Increase font size for buttons */
        padding: 50px 80px !important; /* Increase padding for buttons */
        border-radius: 30px; /* Rounded corners */
    }
    .custom-button {
        white-space: normal;  /* Allow text to wrap to a new line */
        word-wrap: break-word; /* Prevent text from overflowing */
        text-align: center;    /* Keep the text centered inside the button */
        line-height: 1.4;      /* Optional: Adjust line-height for better spacing */
    }

    /* Optionally, increase the font size for text within buttons */
    #button_modif {
        font-size: 40px !important;
    }

    #button_modif {
        font-size: 40px !important; /* Increase font size for buttons */
        padding: 50px 100px !important; /* Increase padding for buttons */
    }

    /* Optionally, increase the font size for text within buttons */
    #button_modif {
        font-size: 3.5rem !important;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        padding: 18px;
        font-size: 40px;
        border-radius: 6px;
    }
}

.progress-bar-container {
  width: 100%;
  max-width: 1200px;
  height: 30px;
  background-color: #383940;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  transition: width 0.4s ease;
}

.has-background-orange {
    background-color: #ff7700;
}

.has-text-orange {
  color: #ff7700;
}

.navbar-burger {
            transform: scale(2);
}

.navbar-burger span {
            background-color: #ffffff; /* Change this to your desired color */
}

#slider {
    width: 50%;
}

.custom-black-border {
    border: 10px solid black;  /* Apply black border */
    color: black;  /* Ensure the text color is black */
}

.custom-black-border:hover {
    background-color: #f5f5f5;  /* Optional: Light background on hover */
}


@media print{
    .no-print {
        display: none !important;
    }

    .print-small {
        font-size: 1.7em !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    table{
        width: 100% !important;
        border: 0.2em solid #000000 !important;
        border-collapse: collapse !important;
    }

    th, td {
        padding: 4px !important;
        word-wrap: break-word;
        border: 0.15em solid #000000 !important;
        border-collapse: collapse !important;
        text-align: center;
    }

    .table {
        overflow-x: auto !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    body, h1, h2, h3, h4, h5, h6, p, td, th, div {
        color: #000000 !important;
    }

    .has-background-success-dark {
        background-color: #22914f !important;
        color: #ffffff !important;
        print-color-adjust: exact;
    }

    .has-background-danger-dark {
        background-color: #ac2626 !important;
        color: #ffffff !important;
        print-color-adjust: exact;
    }

    .card.my-6 {
        margin-top: 0 !important;
    }

    h1 {
        margin-bottom: 0 !important;
    }

    .print-page-break {
        page-break-before: always;
    }
}

nav {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    border-radius: 25px;
    margin-top: 1vw;
    margin: 0.7vw;
    padding: 0.5rem 1rem;
    align-items: center;
    min-height: 11.5vw;
    max-height: 11.5vw;
}

@media (max-width: 768px) {

    nav{
        min-height: 20vw;
        max-height: 20vw;
    }

    #logo {
        max-height: 12vw !important;
        height: auto;
        width: auto;
    }

    #word_logo {
        max-height: 13vw !important;
        height: auto;
        width: auto;
    }

    #session_logo {
        transform: translateY(16%);
        max-height: 12vw !important;
        height: auto;
        width: auto;
    }

    #session_word_logo {
        transform: translateY(16%);
        max-height: 13vw !important;
        height: auto;
        width: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    #nav_burger {
        transform: translateY(10%);
    }

    nav {
        min-height: 20vw;
        max-height: 20vw;
    }

    #logo {
        max-height: 12vw !important;
        height: auto;
        width: auto;
    }

    #word_logo {
        max-height: 13vw !important;
        height: auto;
        width: auto;
    }

    #session_logo {
        transform: translateY(16%);
        max-height: 12vw !important;
        height: auto;
        width: auto;
    }

    #session_word_logo {
        transform: translateY(16%);
        max-height: 13vw !important;
        height: auto;
        width: auto;
    }

}

#logo {
    max-height: 8vw;
    height: auto;
    width: auto;
}

#word_logo {
    max-height: 10vw;
    height: auto;
    width: auto;
}

#session_logo {
    max-height: 8vw;
    height: auto;
    width: auto;
}

#session_word_logo {
    max-height: 10vw;
    height: auto;
    width: auto;
}

a {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
}

h1 {
    color: white;
    font-family: 'Arial', 'Helvetica', sans-serif !important;
    font-weight: bolder;
}

#google_login {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    border-radius: 25px;
    border: none !important;
    margin: 1vw;
}

#google_login_button {
    color: white;
    border: none !important;
}

#google_login_button:hover {
    background-color: white;
    color: black;
}

#pagination_nav {
    background: inherit !important;
}

/* EDIT BUTTON */
#edit_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
    width: 7vw;
}

#edit_button:hover {
    background-color: hsl(217, 71%, 53%) !important;
}

#edit_button span,
#edit_button::before {
    transition: opacity 0.3s ease;
    color: black;
}

#edit_button:hover span,
#edit_button:hover::before {
    opacity: 0;
}

#edit_button::after {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#edit_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* DELETE BUTTON */
#delete_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
    color: black;
    width: 7vw;
}

#delete_button:hover {
    background-color: hsl(348, 100%, 61%) !important;
}

#delete_button span,
#delete_button::before {
    transition: opacity 0.3s ease;
    color: black;
}

#delete_button:hover span,
#delete_button:hover::before {
    opacity: 0;
}

#delete_button::after {
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#delete_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* DELETE SPORT BUTTON */
#delete_sport_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
    width: 7vw;
}

/* Lighten danger color on hover */
#delete_sport_button:hover {
    background: radial-gradient(circle, hsl(48, 100%, 45%) 0%, hsl(48, 100%, 35%) 100%) !important;
}

/* Fade out DELETE text */
#delete_sport_button span,
#delete_sport_button::before {
    transition: opacity 0.1s ease;
    color: black;
}

#delete_sport_button:hover span,
#delete_sport_button:hover::before {
    opacity: 0;
}

/* Inject trash icon on hover */
#delete_sport_button::after {
    content: "\f1f8";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#delete_sport_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* ADD SPORT BUTTON */
#add_sport_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
    width: 7vw;
}

#add_sport_button:hover {
    background-color: hsl(204, 86%, 45%) !important;
}

#add_sport_button span,
#add_sport_button::before {
    transition: opacity 0.1s ease;
    color: black;
}

#add_sport_button:hover span,
#add_sport_button:hover::before {
    opacity: 0;
}

#add_sport_button::after {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#add_sport_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* CHANGE MIN HOURS */
#min_hours_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
    width: 7vw;
}

#min_hours_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
}

#min_hours_button span,
#min_hours_button::before {
    transition: opacity 0.1s ease;
    color: black;
}

#min_hours_button:hover span,
#min_hours_button:hover::before {
    opacity: 0;
}

#min_hours_button::after {
    content: "\f303";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#min_hours_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* DOWNLOAD CSV BUTTON */
#download_csv_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
}

#download_csv_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
}

#download_csv_button span,
#download_csv_button::before {
    transition: opacity 0.1s ease;
    color: black;
}

#download_csv_button:hover span,
#download_csv_button:hover::before {
    opacity: 0;
}

#download_csv_button::after {
    content: "\f019";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#download_csv_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* ADD HOURS BUTTON */
#add_hours_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
}

#add_hours_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
}

#add_hours_button span,
#add_hours_button::before {
    transition: opacity 0.1s ease;
    color: black;
}

#add_hours_button:hover span,
#add_hours_button:hover::before {
    opacity: 0;
}

#add_hours_button::after {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#add_hours_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* FILTER BUTTON */
#filter_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#filter_button:hover {
    background-color: hsl(217, 71%, 45%) !important;
}

#filter_button span,
#filter_button::before {
    transition: opacity 0.1s ease;
    color: white;
}

#filter_button:hover span,
#filter_button:hover::before {
    opacity: 0;
}

#filter_button::after {
    content: "\f1de";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#filter_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* WEEKLY HOURS BUTTON */
#weekly_hours_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#weekly_hours_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: #ffffff;
}

#weekly_hours_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* EDIT ACCOUNTS BUTTON */
#edit_accounts_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#edit_accounts_button:hover {
    background: radial-gradient(circle, hsl(48, 100%, 45%) 0%, hsl(48, 100%, 35%) 100%) !important;
}

#edit_accounts_button span,
#edit_accounts_button::before {
    transition: opacity 0.1s ease;
}

#edit_accounts_button:hover span,
#edit_accounts_button:hover::before {
    opacity: 0;
}

#edit_accounts_button::after {
    content: "\f304";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#edit_accounts_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* HISTORY BUTTON */
#history_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#history_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: white;
}

#history_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* CLOCK IN/OUT BUTTON */
#clock_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#clock_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: white;
}

#clock_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* ROSTERS BUTTONS */
#rosters_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#rosters_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: white;
}

#rosters_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* STATS BUTTON */
#stats_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#stats_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: white;
}

#stats_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* RESOURCES BUTTON */
#resources_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#resources_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: white;
}

#resources_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* QR BUTTON*/
#qr_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#qr_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
    color: white;
}

#qr_button:hover span {
    transform: scale(1.15); /*Changes font size without changing button size*/
}

/* SUBMIT BUTTON*/
#submit_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#submit_button:hover {
    background: radial-gradient(circle, #005f51 0%, #004E42 80%) !important;
}

#submit_button span,
#submit_button::before {
    transition: opacity 0.1s ease;
}

#submit_button:hover span,
#submit_button:hover::before {
    opacity: 0;
}

#submit_button::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#submit_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/*CANCEL BUTTON */
#cancel_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
    color: black;
    width: 100%;
}

/* Lighten danger color on hover */
#cancel_button:hover {
    background-color: hsl(348, 100%, 61%) !important;
}

/* Fade out DELETE text */
#cancel_button span,
#cancel_button::before {
    transition: opacity 0.1s ease;
    color: black;
}

#cancel_button:hover span,
#cancel_button:hover::before {
    opacity: 0;
}

/* Inject trash icon on hover */
#cancel_button::after {
    content: "\58";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#cancel_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

/* RETURN HOME BUTTON */
#return_home_button {
    position: relative;
    overflow: hidden;
    transition: background-color 0.1s ease;
}

#return_home_button:hover {
    background-color: hsl(217, 71%, 45%) !important;
}

#return_home_button span,
#return_home_button::before {
    transition: opacity 0.1s ease;
    color: white;
}

#return_home_button:hover span,
#return_home_button:hover::before {
    opacity: 0;
}

#return_home_button::after {
    content: "\f015";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.2em;
    opacity: 0;
    transition: opacity 0.1s ease, transform 0.1s ease;
    pointer-events: none;
}

#return_home_button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

#time_completed{
    font-family: 'Arial', 'Helvetica', sans-serif !important;
}

html {
    font-family: 'Arial', 'Helvetica', sans-serif !important;
}