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;
}

/*2023-01-29 GAF Added in the CSS for the header gradient*/
#headerGrad {
    background-image: linear-gradient(to right, red, yellow);
}

/*MJS add button*/
.btn-add {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-add:hover {
    color: #0d6efd;
    background-color: #fff;
    border-color: #0d6efd;
}

/*MJS clear button*/
.btn-clear {
    color: #fff;
    background-color: #FF4E00; /*MJS 20230228 changed color*/
    border-color: #FF4E00;
}

    .btn-clear:hover {
        color: #FF4E00;
        background-color: #fff;
        border-color: #FF4E00;
    }
/*MJS delete button 20230228*/
.btn-delete {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

    .btn-delete:hover {
        color: #dc3545;
        background-color: #fff;
        border-color: #b02a37;
    }
/*GAF delete button 20230625*/
.btn-cancel {
    color: #fff;
    background-color: slategray;
    border-color: slategray;
}

    .btn-cancel:hover {
        color: slategray;
        background-color: #fff;
        border-color: slategray;
    }
/*20230130 MJS added for toggle switches*/
.toggle-left-padding {
    padding-left:3.2em;
}
/*20230222 MJS added for toggle switches*/
.toggle-right-padding {
    padding-right: 5em;
}
/*20230222 MJS added for toggle switches*/
.startdate-right-padding {
    padding-right: .5em;
}
/*2023-02-07 GAF Added in this update to handle the background color of the dropdown menus on hover*/
@media (max-width: 576px) {
    .dropdown-menu {
        background: transparent;
    }
    .dropdown-menu a {
        color: white !important;
    }
    .dropdown-menu a:hover {
        color: black !important;
    }

    /*MJS 20230216 added for split drop down lists */
    .split-dropdown-menu {
        background: #fff;
    }
    .split-dropdown-menu a {
        color: black !important;
    }
    /*MJS 20230216 END*/
}
.navbar-nav > li > .dropdown-menu a:hover {
    background-color: lightgray;
}
/*2023-02-07 GAF END*/

/*MJS 20230307*/
.weekDays input {
    display: none !important;
}

    .weekDays input[type=checkbox] + label {
        display: inline-block;
        border-radius: 6px;
        background: #dddddd;
        height: 180%;
        width: 12%;
        margin-right: 3px;
        line-height: 180%;
        text-align: center;
        cursor: pointer;
    }

    .weekDays input[type=checkbox]:checked + label {
        background: #2AD705;
        color: #ffffff;
    }

/*MJS Assign*/
.btn-success {
    color: #fff;
    background-color: #00D900;
    border-color: #00D900;
}

    .btn-success:hover {
        color: #00D900;
        background-color: #fff;
        border-color: #00D900;
    }

/*MJS 20230513 small drop down list */
.small-select {
    background: #0d6efd;
    color: #fff;
}
/*MJS 20230513 small drop down list */
option:not(:checked) {
    background-color: #fff;
    color: #000;
}
/*tr.collapse.in {
    display: table-row;
}*/
.btn-cancel {
    color: #fff;
    background-color: slategray;
    border-color: slategray;
}

    .btn-cancel:hover {
        color: slategray;
        background-color: #fff;
        border-color: slategray;
    }

/* MJS 20230822 remove up and down arrows from number textbox Chrome, Safari, Edge, Opera*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 40%;
    left: 0px;
    /*opacity: 0.5;*/
}

/*2024-09-17 GAF Added this in to handle the styling of the booking confirm panel */
/* Offcanvas Background */
.offcanvas-body {
    background-color: #f0f0f0; /* Light gray background */
  }
/* Floating Panel */
.floating-panel {
    background-color: white; /* Main content background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
    margin: 20px 0; /* Add some spacing to the top and bottom */
  }
  /*2024-09-17 GAF END*/
  /*2024-11-02 GAF Added this in for the Select All toggle on the invoice payments page*/
  th .form-switch {
    border: 0;                    /* Ensure there's no border on the form-switch */
    box-shadow: none;             /* Remove shadow if present */
    padding-left: 0;              /* Remove padding */
    margin-left: 0;               /* Remove any default margin */
    display: flex;                /* Align items within the div */
    align-items: center;          /* Center-align vertically */
}

th {
    border-bottom: 0 !important;  /* Remove any bottom border on <th> */
}

/* Adjust the form-check-input */
.form-switch .form-check-input {
    margin: 0;                    /* Remove any margin */
    transform: translateY(0);     /* Reset transform, adjust later if needed */
}

/* Ensure the label text and toggle have consistent spacing */
.form-switch .form-check-label {
    margin-left: 0.3rem;          /* Slightly less margin for closer alignment */
}
  /*2024-11-02 END*/

.fixed-div-alert {
    position: fixed; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1050; 
    margin: 0;
    padding: 10px; 
    width:45%;
}

/*loading spinner*/
.spinner-border {
    width: 4rem;
    height: 4rem;
    border: 0.4em solid rgba(204, 85, 0, 0.3); 
    border-top: 0.4em solid rgba(204, 85, 0, 0.8); 
    border-radius: 50%;
    animation: spinCircle 1.5s linear infinite;
}

@keyframes spinCircle {
    0% {
        transform: rotate(0deg);
        border-top-color: rgba(204, 85, 0, 0.8); 
    }

    100% {
        transform: rotate(360deg);
        border-top-color: rgba(204, 85, 0, 0.3); 
    }
}

.toast-progress {
    height: 4px;
    background-color: #0d6efd;
    animation: toastProgress 15s linear forwards;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

@keyframes toastProgress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.toast-header-custom {
    background-color: #0b5ed7 !important;
    color: white;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/*2025-10-25 GAF Added this in for the Experience Dashboard cards that are being used on the today page.*/
.hover-shadow {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-shadow:hover {
    transform: translateY(-4px);  /* Slight lift */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); /* Slightly stronger shadow */
}

/* subtle hover lift for each hour block */
.agenda-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agenda-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
}
/* small hover lift for accordion items */
.accordion-item {
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.35rem 0.6rem rgba(0,0,0,0.06);
}
.btn-excel {
    background-color: #217346;
    border-color: #217346;
    color: #fff;
    font-weight: 500;
}

    .btn-excel:hover {
        background-color: #fff; /* invert */
        color: #217346; /* original color for text */
        border-color: #217346;
    }

    .btn-excel:focus {
        box-shadow: 0 0 0 0.25rem rgba(33,115,70,0.5);
    }

.btn-pdf {
    background-color: #E64A19;
    border-color: #E64A19;
    color: #fff;
    font-weight: 500;
}

    .btn-pdf:hover {
        background-color: #fff; /* invert */
        color: #E64A19; /* original color for text */
        border-color: #E64A19;
    }

    .btn-pdf:focus {
        box-shadow: 0 0 0 0.25rem rgba(230,74,25,0.5);
    }




/* tighten booking list visuals */
.accordion-body .list-unstyled li .small {
  color: #495057;
}

/*2025-11-23 GAF Added in these updates to use as a overlay visual while loading component information*/
.overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(200, 200, 200, 0.6);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-box {
    background: white;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* Logo sizing */
.footer-logo {
    height: 24px;
    width: auto;
}