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

.imagelogo {
    background-image: url(../images/CNX_FaviconApp_Logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    float: left;
}
.fs-8 {
    font-size: 8px !important;
}
.fs-10 {
    font-size: 10px !important;
}
.fs-24 {
    font-size: 24px !important;
}
.fs-32 {
    font-size: 32px !important;
}
.fs-48 {
    font-size: 48px !important;
}
.fs-72 {
    font-size: 72px !important;
}
.zoom:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

a.zoom:hover {
    display: inline-block;
    -ms-transform: scale(1.5, 1.5); /* IE 9 */
    -webkit-transform: scale(1.5, 1.5); /* Safari */
    transform: scale(1.5);
}
/*@media (min-width: 768px) {
    .offcanvas {
        width: 50%!important;*/ /* Larger width for desktop */
    /*}
}*/

@media (max-width: 767.98px) {
    .offcanvas {
        width: 100%!important; /* Narrower width for mobile */
    }
}

/* weekly calendar */
.calendar-container {
    display: grid;
    grid-template-columns: 100px repeat(7, 1fr);
    border: 1px solid #ccc;
}

.hour-row, .day-cell {
    border: 1px solid #ddd;
    padding: 5px;
}

.day-header {
    text-align: center;
    font-weight: bold;
}

.day-date {
    font-size: 0.8em;
    color: #555;
}

@media (max-width: 768px) {
    .calendar-container {
        grid-template-columns: 50px repeat(7, 1fr);
        font-size: 0.9em;
    }

    .hour-row {
        /*display: none;*/ /* Hide hours column on small screens */
    }

    .day-header {
        font-size: 0.9em;
    }
}
/* end weekly calendar */

/* monthly calendar */
.monthlycalendar-container {
    max-height: 80vh;
    overflow-x: auto !important;
}

.monthlycalendar-table {
    min-width: 1400px; /* Ensures horizontal scrollability */
    table-layout: fixed;
}

.day-column {
    position: sticky;
    left: 0;
    background-color: #f8f9fa; /* Matches table header background */
    z-index: 2; /* Keeps it above other cells during scrolling */
    text-align: center;
    font-weight: bold;
    width: 150px; /* Increased width for better readability */
    word-wrap: break-word; /* Ensures content wraps within the cell */
    overflow: hidden; /* Hides overflow */
    text-overflow: ellipsis; /* Adds ellipsis if text overflows */
}

.monthly-day-header {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Matches table header background */
    z-index: 3; /* Keeps it above other cells during scrolling */
    text-align: center;
    width: 150px; /* Increased width for better readability */
}

.hour-column {
    min-width: 75px;
    text-align: center;
}

.hour-cell {
    height: 50px;
    text-align: center;
}
/* end monthly calendar */

.select-2-overwrite {
    display: flex !important;
    align-items: center;
    --max-select-height: 200px;
    height: auto !important;
    max-height: var(--max-select-height);
}
.select-2-overwrite > ul {
    height: 100%;
    overflow-x: auto;
    max-height: var(--max-select-height);
}

.select-2-overwrite:has(ul li) .select2-search {
    display: none;
}

.select-2-overwrite > span:last-child {
    height: 38px !important;
}

ul.select2-selection__rendered {
    margin: 0;
}

.reporting-nested-table {
    overflow: hidden;
    interpolate-size: allow-keywords;
    transition: height 350ms ease-in-out;
}

.hidden-table {
    height: 0px;
}

.visible-table {
    height: auto;
}

.reporting-nested-icon {
    transition: transform 350ms ease-in-out;
}

.reporting-nested-icon-open {
    transform: rotate(90deg);
}

.reporting-nested-icon-closed {
    transform: rotate(0deg);
}

.container-overwrite {
    max-width: 98% !important;
    padding: 0 20px 0 0;
}

.w-fit {
    width: fit-content;
}

.activity-dropdown {
    max-height: 300px;
    scrollbar-gutter: stable;
    overflow: auto;
}

.dropdown-activity-search {
    background: white;
    position: sticky;
    top: 0;
}