/* ===========================================================
   GLOBAL SETTINGS & THEME VARIABLES
   -----------------------------------------------------------
   Contains global declarations, fonts, root color variables,
   and global typography applied sitewide.
   =========================================================== */

@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

/* Root Theme Variables */
:root {
  --cu-font: 'Libre Franklin', sans-serif;
  --cu-font-color: #333333;
  --cu-red: #921E33;
  --cu-red-hover: #7A192B;
  --cu-yellow: #FFCC00;
  --cu-black: #333333;
  --cu-subtle-gray: #EFEFEF;
  --cu-light-gray: #B1B3B3;
  --cu-dark-gray: #63666A;
}

/* Global Font Enforcement */
html,
body,
.tooltip,
.popover,
.carousel-control .icon-next,
.carousel-control .icon-prev,
.navbar h1,
.help-icon>a,
#user-menu>a,
#user-menu>a #user-name,
#user-menu>a #user-name:hover,
#user-menu>a #user-name:active,
.nav .dropdown-menu li a:not([data-action=close]):not([data-action=today]),
#wrapper,
#weeklyResults,
.modal-dialog,
.dx-widget,
.table-sort th div,
#setup-edit-modal #setup-list th,
#booking-container .services-component-container .service-order-container .summary-service-table th,
#approvals-content,
#user-security-content,
a.link-footer,
span.linkcolor:active,
span.linkcolor:hover,
#lbl_Master,
label.recurrence-label-text1,
#my-bookings-tabs .dayColorContrast,
#my-bookings-tabs .monthColorContrast,
#my-bookings-datepicker .datePickerColorContrast,
.showMyBookingsColorContrast,
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td span.active,
.accountManagement {
  font-family: var(--cu-font) !important;
}

/* Base Body Typography */
body {
  /* font-size:1.5rem !important; */
  font-weight: 400 !important;
  color: var(--cu-font-color) !important;
}

/* Generic Link Styling */
p a,
span a .modal-footer a:not(.btn),
.row a:not(.btn):not([role=tab]):not([role=button]):not(.thumbnail),
.table tbody tr td a {
  color: var(--cu-red) !important;
}

/* ===========================================================
   USER MENU, HELP ICONS, NAVBAR HEADER
   -----------------------------------------------------------
   Styles related to the user account menu, help icons,
   navbar colors, and top-level navigation headings.
   =========================================================== */

#user-menu>a #user-name {
  color: #FFF !important;
}

#user-menu>a #user-name:hover {
  color: #FFF !important;
}

#user-menu-section #helpicon {
  background-color: var(--cu-red) !important;
}

#helpid {
  color: #FFF !important;
}

.help-text-icon {
  color: var(--cu-red) !important;
}

#user-menu-section #usernameid {
  background-color: var(--cu-red) !important;
}

#user-menu-section #usernameid:hover {
  background-color: var(--cu-red-hover) !important;
}

/* Navbar */
.navbar {
  background-color: var(--cu-red) !important;
}

.navbar h1 {
  color: #FFF !important;
  font-weight: 600;
}

/* Nav Tabs */
.nav-tabs .active a {
  border-bottom: solid 6px var(--cu-red) !important;
}

/* Various Nav Indentation Fixes */
li.resource-link { text-indent: 0px; }
.sidebar-nav li.secondary { text-indent: -20px; }
.sidebar-nav>li.no-click {
  margin-left: 0px;
  padding-left: 10px;
}

li.resource-link {
  text-indent: 0px;
}


a.current-page {
  border-left: solid 6px var(--cu-red) !important;
}

a.current-page:hover {
  border-left: solid 6px var(--cu-yellow) !important;
}

/* ===========================================================
   FOOTER + SECONDARY ELEMENTS
   -----------------------------------------------------------
   Footer background, subtle text elements, panel backgrounds,
   accent and helper text elements.
   =========================================================== */

.footer {
  background-color: var(--cu-subtle-gray) !important;
}

.footer-elements label.recurrence-label-text1 {
  font-weight: 400 !important;
  color: var(--cu-font-color) !important;
  font-size: 11px !important;
}

.footer-elements .linkcolor {
  color: var(--cu-red) !important;
  font-size: 11px !important;
}

.footer-elements .linkcolor:hover {
  color: var(--cu-font-color) !important;
}

#lbl_Master {
  color: var(--cu-font-color) !important;
  font-size: 11px !important;
}

.footer-elements .line {
  color: var(--cu-font-color) !important;
  font-size: 11px !important;
}

/* Buttons capitalization */
.btn {
  text-transform: capitalize !important;
}

/* Panels */
.vems-panel {
  background-color: var(--cu-subtle-gray) !important;
}

.accented-text {
  color: var(--cu-red) !important;
}

/* ===========================================================
   TABS, HEADERS, AND MODAL DECORATION
   -----------------------------------------------------------
   Covers active tab indicators, modal headers, and
   repeated nav-tab rules (kept intact).
   =========================================================== */

/* Active Tab Indicators */
.nav-tabs .active a,
.nav-tabs .active a:hover {
  border-bottom: solid 6px var(--cu-red) !important;
}

/* Modal Header Highlight */
.modal-header {
  border-top: solid 6px var(--cu-red) !important;
}

/* Navbar toggle icon */
.navbar-toggle-override i {
  color: #FFF !important;
  background-color: transparent !important;
}

/* ===========================================================
   BUTTONS & INTERACTION STATES
   -----------------------------------------------------------
   Standard buttons, primary, success, default, and dynamic
   filter button styles + hover/focus states.
   =========================================================== */

/* Base Button Styling */
.btn,
.btn-primary,
.btn-success,
.btn-main,
.btn-default,
.dynamic-filter-content .btn:not(.btn-stock) {
  background-color: var(--cu-red) !important;
  border: 1px solid var(--cu-red-hover) !important;
  color: #FFF !important;
  font-weight: 600;
}

/* Hover / Focus States */
.btn:hover,
.btn:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-success:hover,
.btn-success:focus-visible,
.btn-main:hover,
.btn-main:focus-visible,
.btn-default:hover,
.btn-default:focus-visible,
.dynamic-filter-content .btn:not(.btn-stock):hover,
.dynamic-filter-content .btn:not(.btn-stock):focus-visible {
  background-color: var(--cu-red-hover) !important;
  border: 1px solid var(--cu-red-hover) !important;
  color: #FFF !important;
}

/* Remove Browser Focus Ring When Not Visible */
.btn:focus:not(:focus-visible) {
  outline: none;
}

/* ===========================================================
   DATE PICKER WIDGETS & CALENDAR ELEMENTS
   -----------------------------------------------------------
   Styling for Bootstrap Datetimepicker cells, active states,
   hover states, and CU-themed red/yellow accents.
   =========================================================== */

/* Active Date Cells */
.bootstrap-datetimepicker-widget table td.active {
  color: var(--cu-red) !important;
}

.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td.active:active {
  text-decoration: underline;
  text-decoration-color: var(--cu-red) !important;
}

/* Generic Datetimepicker Dropdown Text */
.bootstrap-datetimepicker-widget.dropdown-menu a {
  color: var(--cu-red) !important;
}

#my-bookings-tabs .dayColorContrast,
#my-bookings-tabs .monthColorContrast,
#my-bookings-datepicker .datePickerColorContrast
{
    color: var(--cu-red) !important;
}

/* Date hover/active highlight using yellow underline */
.bootstrap-datetimepicker-widget .datepicker-decades .decade .active:active,
.bootstrap-datetimepicker-widget .datepicker-decades .decade .active:hover,
.bootstrap-datetimepicker-widget .datepicker-decades .decade .active:focus,
#my-bookings-tabs .dayColorContrast:active,
#my-bookings-tabs .dayColorContrast:hover,
#my-bookings-tabs .monthColorContrast:active,
#my-bookings-tabs .monthColorContrast:hover,
#my-bookings-datepicker .datePickerColorContrast:active,
#my-bookings-datepicker .datePickerColorContrast:hover,
.showMyBookingsColorContrast:active,
.showMyBookingsColorContrast:hover,
.dateContrast:active,
.dateContrast:hover,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td.active:active,
.bootstrap-datetimepicker-widget table td span.active:hover,
.bootstrap-datetimepicker-widget table td span.active:active {
  text-decoration-color: var(--cu-yellow) !important;
}

/* Calendar Selected Day & Highlight */
#bookings-monthly-calendar .dx-calendar-selected-date,
.weekly-current-day,
.dx-calendar-contoured-date {
  background-color: var(--cu-subtle-gray) !important;
}

/* Calendar Cell Text Right (Room Booking Grid) */
.calendar-cell-text-right {
  font-weight: 600;
  color: var(--cu-red) !important;
}

/* ===========================================================
   TABLES, LINKS & BOOKING UI
   -----------------------------------------------------------
   Link hovers, booking grid styles, room request text accents,
   and utilities for CU red/yellow hover indicators.
   =========================================================== */

/* Stronger link inside tables */
.table tbody tr td a {
  background-color: transparent !important;
  font-weight: 600;
}

/* Link hover underline */
.table tbody tr td a:hover,
p a:hover,
span a:hover,
.modal-footer a:not(.btn):hover,
.row a:not(.btn):not([role=tab]):not([role=button]):not(.thumbnail):hover {
  border-bottom: solid 1px var(--cu-yellow) !important;
}

#help-text-body-content a {
  color: var(--cu-red) !important;
}

/* Create a Reservation */
#room-request-content .template-head a,
#editReservationContainer .template-head a {
  color: var(--cu-red) !important;
}

#room-request-container .cart-header-container {
  color: var(--cu-red) !important;
}

/* Icons in Filter Results */
#bookings #filter-result-row #filter-column .input-group-addon span {
  color: var(--cu-dark-gray) !important;
}

/* Red Panel Headers */
#bookings #filter-result-row .panel .panel-heading:not(#date-time-filters-header, #specific-room-filters-responsive, #responsive-attendee-header) {
  background-color: var(--cu-red) !important;
}

/* Recurrence Modal Icons */
#recurrence-modal-content i {
  color: var(--cu-dark-gray) !important;
}

/* ===========================================================
   EVENTS — LIST, WEEKLY, AND GRID VIEWS
   -----------------------------------------------------------
   Event blocks, hover states, setup colorations, calendar
   headers, and special event date styling.
   =========================================================== */

/* Event Blocks (Default State) */
.browse-calendar-event,
.browse-calendar-event-weekly,
.grid-container .room-row .event-container .event {
  color: var(--cu-font-color) !important;
  background-color: var(--cu-subtle-gray) !important;
  border: 1px solid var(--cu-dark-gray) !important;
}

/* Event Hover State */
.browse-calendar-event:hover,
.browse-calendar-event-weekly:hover,
.grid-container .room-row .event-container .event:hover {
  color: #FFF !important;
  background-color: var(--cu-dark-gray) !important;
  border: 1px solid var(--cu-dark-gray) !important;
}

/* Setup Blocks */
.grid-container .room-row .event-container .setup {
  background-color: var(--cu-dark-gray) !important;
  border-color: var(--cu-dark-gray) !important;
}

/* Headers / Bold Calendar Text */
.dx-calendar-body .dx-widget th,
.column-header,
.dx-datagrid-action .dx-cell-focus-disabled,
.datecolorMyEvents {
  color: var(--cu-red) !important;
  font-weight: 600;
  font-size: 12px !important;
}

.datecolorMyEvents {
  font-size: 15px !important;
}

/* ===========================================================
   DROPDOWN MENUS
   -----------------------------------------------------------
   Styles for dropdown links, hover indicators, and
   yellow highlight behavior.
   =========================================================== */

ul.dropdown-menu li a {
  font-weight: 600 !important;
}

ul.dropdown-menu li:hover {
  border-top: solid 1px var(--cu-yellow) !important;
}

ul.dropdown-menu li a:hover {
  background-color: var(--cu-yellow) !important;
}

/* Bookings Datepicker Label */
.bookings-datepicker-text {
  color: var(--cu-red) !important;
}

/* ===========================================================
   GRID NAVIGATION (PREV/NEXT BUTTONS)
   -----------------------------------------------------------
   Navigation used in event or bookings grids.
   =========================================================== */

.grid-page-nav {
  color: var(--cu-red) !important;
}

.grid-page-nav .grid-page-text-left:hover:not(.disabled),
.grid-page-nav .grid-page-text-right:hover:not(.disabled) {
  border-color: var(--cu-subtle-gray) !important;
  background-color: var(--cu-subtle-gray) !important;
  color: var(--cu-font-color) !important;
}

/* ===========================================================
   ICONS & GENERAL UI UTILITIES
   -----------------------------------------------------------
   Standalone UI pieces such as remove icons,
   return-to-top button, and navbar toggle override.
   =========================================================== */

/* Remove Circle Icon */
.fa-minus-circle {
  color: #FFF !important;
}

/* Return-to-Top Button */
#return-to-top {
  background: var(--cu-red) !important;
}

#return-to-top:hover {
  background: var(--cu-red-hover) !important;
}

#return-to-top:hover i {
  color: #FFF !important;
}

/* Navbar Toggle Hover/Active/Focus */
.navbar-toggle-override:hover,
.navbar-toggle-override:active,
.navbar-toggle-override:focus {
  background-color: var(--cu-red-hover) !important;
}

/* ===========================================================
   BOOKING GRID ELEMENTS
   -----------------------------------------------------------
   Location links, special date coloring, and event indicators
   inside booking calendars/grids.
   =========================================================== */

/* Location Elements in Booking Grid */
#book-grid-container .location {
  color: var(--cu-red) !important;
}

#book-grid-container .location:hover {
  color: var(--cu-red) !important;
}

/* Special Event Dates */
.event-calendar .dx-calendar-cell .calendar-cell-event.special-date {
  background-color: var(--cu-red) !important;
  border: 1px solid var(--cu-red-hover) !important;
  color: #FFF !important;
}

#bookings-monthly-calendar .calendar-cell-text {
    color: var(--cu-red) !important;
    font-weight: 600;
}

/* ===========================================================
   EVENT NAVIGATION PILLS
   -----------------------------------------------------------
   Includes styling for event navigation tabs and
   their active states.
   =========================================================== */

.events-nav-pills .nav-pills li a {
  color: var(--cu-font-color) !important;
}

.events-nav-pills .nav-pills>li.active>a,
.events-nav-pills .nav-pills>li.active>a:focus,
.events-nav-pills .nav-pills>li.active>a:hover {
  color: #FFF !important;
  background-color: var(--cu-red) !important;
}

/* My Bookings Pills - Provided empty in original */
#my-bookings .nav-pills li a { }

#my-bookings .nav-pills>li.active>a,
#my-bookings .nav-pills>li.active>a:focus,
#my-bookings .nav-pills>li.active>a:hover { }