@charset "UTF-8";
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.vince-breadcrumbs .e-breadcrumb-item {
  font-size: 18px;
  font-weight: 600;
  color: #005CB9;
}
.vince-breadcrumbs .e-breadcrumb-item a.e-label {
  text-decoration: none;
}

.vince-item-count {
  font-size: 0.78rem;
  color: #636569;
  margin-bottom: 0.6rem;
}

.vince-feed {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vince-card {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-left: 3px solid #005CB9;
  border-radius: 8px;
  padding: 0.7rem 1rem;
  transition: box-shadow 0.15s ease;
}
.vince-card:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.vince-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #EFEFEF;
}

.vince-card-date {
  font-size: 0.73rem;
  font-weight: 700;
  color: #005CB9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vince-card-body {
  font-size: 0.9rem;
  color: #001F60;
  line-height: 1.65;
}
.vince-card-body p {
  margin-bottom: 0.35rem;
}
.vince-card-body p:last-child {
  margin-bottom: 0;
}
.vince-card-body ul, .vince-card-body ol {
  margin-bottom: 0.35rem;
  padding-left: 1.4rem;
}

.vince-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #636569;
}
.vince-empty-state i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
  opacity: 0.35;
}

.vince-table-wrap {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 8px;
  overflow-x: auto;
}

.vince-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.vince-table th {
  font-size: 0.72rem;
  font-weight: 700;
  color: #636569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.55rem 0.85rem;
  border-bottom: 2px solid #EFEFEF;
  white-space: nowrap;
  background: #f8f9fa;
}
.vince-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #EFEFEF;
  color: #001F60;
  vertical-align: middle;
}
.vince-table tr:last-child td {
  border-bottom: none;
}
.vince-table tbody tr:hover td {
  background: rgba(0, 92, 185, 0.03);
}

.vince-row-meta {
  font-size: 0.75rem;
  font-weight: 400;
  color: #636569;
  margin-top: 0.15rem;
}

.vince-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 360px;
}

.vince-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: #A7A8A9;
  pointer-events: none;
}

.vince-search-input {
  width: 100%;
  padding: 0.25rem 0.75rem 0.25rem 2rem;
  border: 1.5px solid #A7A8A9;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #001F60;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vince-search-input:focus {
  outline: none;
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.12);
}
.vince-search-input::placeholder {
  color: #A7A8A9;
}

.vince-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
}

.vince-card-overflow {
  position: relative;
}
.vince-card-overflow .vince-overflow-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #A7A8A9;
  background: transparent;
  color: #636569;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vince-card-overflow .vince-overflow-toggle:hover {
  border-color: #001F60;
  color: #001F60;
  background: #EFEFEF;
}
.vince-card-overflow.vince-card-overflow--cover {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 100;
}
.vince-card-overflow.vince-card-overflow--cover .vince-overflow-toggle {
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #FFFFFF;
  backdrop-filter: blur(4px);
}
.vince-card-overflow.vince-card-overflow--cover .vince-overflow-toggle:hover {
  background: rgba(0, 0, 0, 0.68);
  border: none;
  color: #FFFFFF;
}
.vince-card-overflow .vince-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 200;
  min-width: 185px;
  padding: 0.3rem 0;
  list-style: none;
  margin: 0;
}
.vince-card-overflow .vince-overflow-menu li button,
.vince-card-overflow .vince-overflow-menu li a {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  color: #001F60;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.vince-card-overflow .vince-overflow-menu li button:hover,
.vince-card-overflow .vince-overflow-menu li a:hover {
  background: #EFEFEF;
}
.vince-card-overflow .vince-overflow-menu li button.text-danger:hover,
.vince-card-overflow .vince-overflow-menu li a.text-danger:hover {
  background: rgba(206, 14, 45, 0.0784313725);
}
.vince-card-overflow .vince-overflow-menu li button i,
.vince-card-overflow .vince-overflow-menu li a i {
  width: 1.1rem;
  margin-right: 0.4rem;
  color: #636569;
}
.vince-card-overflow .vince-overflow-menu .overflow-divider {
  height: 1px;
  background: #EFEFEF;
  margin: 0.3rem 0;
}
.vince-card-overflow .vince-overflow-menu .overflow-section-label {
  padding: 0.5rem 1rem 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #A7A8A9;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.vince-year-filter-dropdown {
  position: relative;
}
.vince-year-filter-dropdown .vince-year-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem 0.75rem;
  border: 1.5px solid #A7A8A9;
  border-radius: 6px;
  background: #FFFFFF;
  color: #001F60;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.vince-year-filter-dropdown .vince-year-filter-btn:hover {
  border-color: #005CB9;
  background: #EFEFEF;
}
.vince-year-filter-dropdown.open .vince-year-filter-btn {
  border-color: #005CB9;
}
.vince-year-filter-dropdown .vince-year-chevron {
  font-size: 0.7rem;
  transition: transform 0.2s;
}
.vince-year-filter-dropdown.open .vince-year-chevron {
  transform: rotate(180deg);
}
.vince-year-filter-dropdown .vince-year-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 300;
  min-width: 150px;
  padding: 0.4rem 0 0.4rem;
}
.vince-year-filter-dropdown .vince-year-dropdown-header {
  display: flex;
  justify-content: space-between;
  padding: 0 0.75rem 0.35rem;
  border-bottom: 1px solid #EFEFEF;
  margin-bottom: 0.25rem;
}
.vince-year-filter-dropdown .vince-year-dropdown-header a, .vince-year-filter-dropdown .vince-year-dropdown-header button {
  font-size: 0.78rem;
  color: #005CB9;
  font-weight: 600;
}
.vince-year-filter-dropdown .vince-year-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}
.vince-year-filter-dropdown .vince-year-dropdown-list li {
  padding: 0;
}
.vince-year-filter-dropdown .vince-year-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #001F60;
  cursor: pointer;
  margin: 0;
}
.vince-year-filter-dropdown .vince-year-checkbox-label:hover {
  background: #EFEFEF;
}
.vince-year-filter-dropdown .vince-year-checkbox-label input[type=checkbox] {
  cursor: pointer;
  accent-color: #005CB9;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
body:has(.vince-modal-backdrop),
body:has(.vince-confirm-backdrop),
body:has(.photo-fullscreen-backdrop) {
  overflow: hidden;
}

.vince-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 576px) {
  .vince-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.vince-page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.vince-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1300;
}

.vince-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1310;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  width: fit-content;
  max-width: calc(100vw - 2rem);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 576px) {
  .vince-modal {
    width: calc(100vw - 2rem);
  }
}

.vince-modal-backdrop--flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vince-modal-backdrop--flex .vince-modal {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

.vince-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1400;
}

.vince-confirm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1410;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: min(420px, 100vw - 2rem);
}

.vince-confirm-footer {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgb(218.6, 218.6, 218.6);
}

.vince-confirm-modal .vince-modal-header {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #636569;
}

.vince-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgb(218.6, 218.6, 218.6);
  font-weight: 700;
  font-size: 1.05rem;
  color: #001F60;
  position: sticky;
  top: 0;
  background: #EFEFEF;
  border-radius: 12px 12px 0 0;
}

.vince-modal-close {
  background: none;
  border: none;
  color: #636569;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.vince-modal-close:hover {
  color: #001F60;
  background: #EFEFEF;
}

.vince-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.vince-modal-footer {
  margin: 1.25rem -1.25rem -1.25rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgb(218.6, 218.6, 218.6);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ui26-dialog {
  max-width: calc(100vw - 2rem) !important;
}

.vince-tab-toggle {
  display: inline-flex;
  background: rgb(223.7, 223.7, 223.7);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

a.vince-tab-btn {
  text-decoration: none;
  display: inline-block;
}

.vince-tab-btn {
  padding: 0.38rem 1rem;
  border: none;
  border-radius: calc(8px - 2px);
  background: rgba(255, 255, 255, 0.55);
  color: #636569;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
.vince-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.85);
  color: #001F60;
}
.vince-tab-btn.active {
  background: #005CB9;
  color: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.album-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1199px) {
  .album-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .album-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 400px) {
  .album-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.album-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: visible;
  position: relative;
  min-width: 0;
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.album-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}
.album-card.album-card--menu-open {
  z-index: 200;
}

.album-card-cover {
  height: 220px;
  background: linear-gradient(135deg, #001F60 0%, #005CB9 100%);
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.album-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.album-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}
.album-cover-fallback i {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.45);
}

.album-card-body {
  padding: 0.65rem 0.85rem 0.75rem;
}

.album-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #001F60;
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-card-date {
  font-size: 0.78rem;
  color: #636569;
  margin-bottom: 0.35rem;
}

.album-card-description {
  font-size: 0.8rem;
  color: #636569;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.4;
}

.album-no-results {
  grid-column: 1/-1;
  text-align: center;
  padding: 3rem 1rem;
  color: #636569;
}
.album-no-results i {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  display: block;
  opacity: 0.4;
}

@media (max-width: 768px) {
  .share-album-dialog .e-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
  }
}

#photoEditModal {
  max-width: 95vw;
  max-height: 95vh;
  min-width: 90vw;
  width: fit-content;
  height: fit-content;
}
@media (min-width: 1400px) {
  #photoEditModal img {
    max-width: 50vw;
    max-height: 90vh;
  }
}

.non-album-photo-grid .e-grid.e-responsive td.e-rowcell,
.photo-album-photo-grid .e-grid.e-responsive td.e-rowcell {
  white-space: break-spaces;
}
.non-album-photo-grid .e-recordpluscollapse,
.non-album-photo-grid .e-recordplusexpand,
.non-album-photo-grid .e-groupcaption,
.non-album-photo-grid .e-indentcell,
.photo-album-photo-grid .e-recordpluscollapse,
.photo-album-photo-grid .e-recordplusexpand,
.photo-album-photo-grid .e-groupcaption,
.photo-album-photo-grid .e-indentcell {
  background-color: #e1f3fa;
}
.non-album-photo-grid .e-groupcaption,
.non-album-photo-grid .e-gnextforward.e-icon-grightarrow::before,
.non-album-photo-grid .e-gdiagonaldown.e-icon-gdownarrow::before,
.photo-album-photo-grid .e-groupcaption,
.photo-album-photo-grid .e-gnextforward.e-icon-grightarrow::before,
.photo-album-photo-grid .e-gdiagonaldown.e-icon-gdownarrow::before {
  font-size: 16px;
  font-weight: bold;
  color: #1D295B;
}

@media (max-width: 992px) {
  .non-album-photo-grid .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before {
    width: 25%;
  }
  .non-album-photo-grid .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell] {
    padding-left: 25%;
  }
}
.photo-album-photo {
  max-height: 0vh;
  min-height: 65vh;
  max-width: 95vw;
  height: -webkit-fill-available;
}

@media (max-width: 768px) {
  .photo-album-photo {
    max-height: 90vh;
    min-height: 50vh;
    max-width: 90vw;
  }
}
@media (max-width: 576px) {
  .photo-album-photo {
    max-height: 95vh;
    min-height: 20vh;
    max-width: 85vw;
  }
}
.photo-rotate-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 100;
}

#albumCarousel .default-carousel-section .carousel-sample {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
}
#albumCarousel .default-carousel .e-carousel-items .e-carousel-item .img-container {
  height: 100%;
}
#albumCarousel .photo-count-label {
  font-size: 16pt;
  font-weight: 600;
  color: blue;
  z-index: 100;
}
#albumCarousel .e-previous-icon,
#albumCarousel .e-next-icon {
  color: blue !important;
  background-color: white;
  font-weight: 600;
}
#albumCarousel .e-indicator-bars {
  display: none !important;
}

.photo-grid-add {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.photo-grid-add img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.photo-grid-add img:hover {
  transform: scale(1.5);
}

.photo-in-grid {
  max-height: 200px;
  width: fit-content;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
.photo-in-grid:hover {
  transform: scale(1.5);
}

#photoReseqListbox .e-list-item {
  height: auto;
}

.photo-fullscreen-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.photo-fullscreen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  max-width: 95vw;
  max-height: 95vh;
  cursor: default;
}

.photo-fullscreen-img {
  max-width: 95vw;
  max-height: 88vh;
  object-fit: contain;
}

.photo-fullscreen-video {
  max-width: 100%;
  max-height: 80vh;
  display: block;
  border-radius: 4px;
  background: #000;
}

.photo-fullscreen-caption {
  color: #e0e0e0;
  font-size: 1rem;
  text-align: center;
}

.photo-fullscreen-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.photo-fullscreen-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.photo-fullscreen-count {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.85rem;
  z-index: 10;
  pointer-events: none;
}

.photo-fullscreen-prev,
.photo-fullscreen-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  color: white;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s;
}
.photo-fullscreen-prev:hover,
.photo-fullscreen-next:hover {
  background: rgba(0, 0, 0, 0.75);
}

.photo-fullscreen-prev {
  left: 1rem;
}

.photo-fullscreen-next {
  right: 1rem;
}

.photo-fullscreen-toolbar {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}

.photo-fullscreen-backdrop:hover .photo-fullscreen-toolbar, .photo-fullscreen-backdrop.toolbar-visible .photo-fullscreen-toolbar {
  opacity: 1;
  transform: translateY(0);
}

.photo-fullscreen-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.photo-fullscreen-tool-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
.photo-fullscreen-tool-btn--danger:hover {
  background: rgba(206, 14, 45, 0.6);
}

.album-data-form {
  padding: 0.25rem 0;
  min-width: min(420px, 100vw - 4rem);
}
.album-data-form .form-control {
  border-color: #A7A8A9;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.album-data-form .form-control:focus {
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.15);
}
.album-data-form textarea.form-control {
  resize: vertical;
}

.album-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.album-detail-info {
  flex: 1;
  min-width: 0;
}

.album-detail-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #001F60;
  margin-bottom: 0.2rem;
}

.album-detail-date {
  font-size: 0.9rem;
  color: #636569;
  margin-bottom: 0.5rem;
}

.album-detail-description {
  font-size: 0.95rem;
  color: #636569;
  line-height: 1.5;
}

.album-manage-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.album-manage-toolbar .btn {
  font-size: 0.85rem;
}

.photo-edit-preview {
  max-width: 220px;
  max-height: 220px;
  width: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: #f0f0f0;
}

.photo-edit-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 1.5rem;
}

.photo-edit-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.4;
}
.photo-edit-tag button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
  line-height: 1;
  cursor: pointer;
  font-size: 0.75rem;
}
.photo-edit-tag button:hover {
  color: #fff;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 576px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
}

.photo-grid-item {
  cursor: pointer;
  position: relative;
}
.photo-grid-item:hover img {
  opacity: 0.82;
}
.photo-grid-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

.photo-grid-caption {
  display: block;
  font-size: 1rem;
  color: #636569;
  margin-top: 3px;
  line-height: 1.2;
  word-break: break-word;
}

.photo-grid-video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.photo-grid-video-badge i {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.photo-grid-album-info {
  margin-top: 4px;
  line-height: 1.3;
}
.photo-grid-album-info a {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #005CB9;
  text-decoration: none;
  word-break: break-word;
}
.photo-grid-album-info a i {
  font-size: 0.65rem;
  vertical-align: middle;
  margin-left: 0.2em;
}
.photo-grid-album-info a:hover {
  text-decoration: underline;
}

.photo-grid-album-date {
  display: block;
  font-size: 0.72rem;
  color: #A7A8A9;
}

.photo-add-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 700px;
}

.photo-add-step {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #FFFFFF;
  overflow: hidden;
}
.photo-add-step--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.photo-add-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  background: #EFEFEF;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.photo-add-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #005CB9;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}

.photo-add-step-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #001F60;
}

.photo-add-step-body {
  padding: 1rem 1.1rem;
}

.photo-add-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2.5rem 1.5rem;
  border: 2px dashed #A7A8A9;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.photo-add-dropzone:hover {
  border-color: #005CB9;
  background: rgba(0, 92, 185, 0.03);
}
.photo-add-dropzone--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.photo-add-dropzone--disabled:hover {
  border-color: #A7A8A9;
  background: none;
}

.photo-add-dropzone-icon {
  font-size: 2.2rem;
  color: #005CB9;
  opacity: 0.7;
}

.photo-add-dropzone-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #001F60;
}

.photo-add-dropzone-hint {
  font-size: 0.78rem;
  color: #636569;
}

.photo-add-selected-summary {
  font-size: 0.9rem;
  color: #001F60;
  font-weight: 500;
}

.photo-add-progress {
  max-width: 400px;
  font-size: 0.88rem;
  color: #636569;
}

.caption-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 576px) {
  .caption-edit-grid {
    grid-template-columns: 1fr;
  }
}

.caption-edit-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.caption-edit-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.caption-edit-input {
  width: 100%;
  resize: vertical;
  border: 1px solid #A7A8A9;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #231F20;
  background: #FFFFFF;
  transition: border-color 0.15s;
  font-family: inherit;
}
.caption-edit-input:focus {
  outline: none;
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.15);
}
.caption-edit-input::placeholder {
  color: #A7A8A9;
}

.reseq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  align-items: start;
}
@media (max-width: 576px) {
  .reseq-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
}

.reseq-item {
  cursor: grab;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.reseq-item:active {
  cursor: grabbing;
}
.reseq-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  pointer-events: none;
}
.reseq-item.dragging {
  opacity: 0.35;
}
.reseq-item.drag-over {
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.2);
}

.reseq-caption {
  display: block;
  font-size: 0.72rem;
  color: #636569;
  margin-top: 3px;
  line-height: 1.2;
  word-break: break-word;
}

.photo-section {
  margin-bottom: 2rem;
}

.photo-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #EFEFEF;
}

.photo-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.photo-section-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #001F60;
}

.photo-section-date {
  font-size: 0.82rem;
  color: #636569;
}

.photo-section-link {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.1rem 0.25rem;
  color: #005CB9;
  text-decoration: none;
}
.photo-section-link:hover {
  text-decoration: underline;
}

.share-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

.share-dialog-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  width: 900px;
  max-width: calc(100vw - 1rem);
  height: 82vh;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 576px) {
  .share-dialog-modal {
    width: calc(100vw - 1rem);
    height: 95vh;
    border-radius: 8px;
  }
}

.share-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #EFEFEF;
  flex-shrink: 0;
}

.share-dialog-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: #001F60;
}

.share-dialog-close {
  background: none;
  border: none;
  color: #636569;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.share-dialog-close:hover {
  color: #001F60;
  background: #EFEFEF;
}

.share-dialog-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.share-tab-toggle {
  display: flex;
}

.share-tab-btn {
  flex: 1;
}

.contact-search-wrap {
  position: relative;
}

.contact-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  z-index: 1060;
  max-height: 220px;
  overflow-y: auto;
  list-style: none;
  padding: 0.25rem 0;
  margin: 0;
}
.contact-search-dropdown li {
  padding: 0.45rem 0.85rem;
  font-size: 0.88rem;
  color: #001F60;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s;
}
.contact-search-dropdown li:hover {
  background: #EFEFEF;
}

.share-dialog-tab-content {
  min-height: 380px;
}

#photoAlbumPhotosModal,
#shareAlbumModal,
#photoModal,
#yearFilterModal {
  max-width: 95vw;
  max-height: 95vh !important;
  width: fit-content;
  height: fit-content;
}

@media (max-width: 992px) {
  .photo-album-photo-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell {
    padding-left: 10px;
  }
  .photo-album-photo-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell.e-unboundcell {
    text-align: left !important;
  }
  .photo-album-photo-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell::before {
    display: none;
  }
  .photo-album-photo-grid .e-toolbar-item:first-of-type {
    margin-left: 0 !important;
  }
}
.contacts-table-wrap {
  overflow-x: auto;
}

.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.contacts-table th {
  text-align: left;
  padding: 0.5rem 0.6rem;
  font-weight: 600;
  color: #636569;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #EFEFEF;
  white-space: nowrap;
}
.contacts-table td {
  padding: 0.45rem 0.6rem;
  color: #001F60;
  border-bottom: 1px solid #EFEFEF;
  vertical-align: middle;
}
.contacts-table tr:last-child td {
  border-bottom: none;
}
.contacts-table .contacts-actions {
  white-space: nowrap;
}
.contacts-table .contacts-actions .btn {
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
}
@media (max-width: 576px) {
  .contacts-table thead {
    display: none;
  }
  .contacts-table tbody tr {
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.15rem 0;
  }
  .contacts-table tbody td {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #EFEFEF;
  }
  .contacts-table tbody td:last-child {
    border-bottom: none;
  }
  .contacts-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    color: #636569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 52px;
  }
  .contacts-table tbody td input,
  .contacts-table tbody td select {
    flex: 1;
    min-width: 0;
  }
  .contacts-table .contacts-actions {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.cal-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cal-list-section {
  margin-top: 0.5rem;
}

.cal-list-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cal-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.cal-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: #A7A8A9;
  pointer-events: none;
}

.cal-search-input {
  width: 100%;
  padding: 0.35rem 0.75rem 0.35rem 2rem;
  border: 1.5px solid #A7A8A9;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #001F60;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cal-search-input:focus {
  outline: none;
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.12);
}
.cal-search-input::placeholder {
  color: #A7A8A9;
}

.cal-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.cal-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cal-toggle-track {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 1.2rem;
  background: #A7A8A9;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.cal-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.2rem - 4px);
  height: calc(1.2rem - 4px);
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.cal-toggle-input:checked + .cal-toggle-track {
  background: #005CB9;
}
.cal-toggle-input:checked + .cal-toggle-track::after {
  transform: translateX(1rem);
}

.cal-toggle-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: #001F60;
}

.cal-card-holiday {
  border-left-color: purple;
}

.cal-holiday-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(128, 0, 128, 0.1);
  color: purple;
  white-space: nowrap;
}

.cal-list-table-wrap {
  border: 1px solid #EFEFEF;
  border-radius: 10px;
  overflow: hidden;
}

.cal-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.cal-list-table th {
  background: #EFEFEF;
  padding: 0.55rem 0.85rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  color: #636569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.cal-list-table td {
  padding: 0.5rem 0.85rem;
  color: #001F60;
  border-bottom: 1px solid #EFEFEF;
  vertical-align: middle;
}
.cal-list-table tr:last-child td {
  border-bottom: none;
}
.cal-list-table tr.holiday-row {
  background: rgba(0, 92, 185, 0.04);
}
.cal-list-table tbody tr:hover {
  background: rgba(0, 31, 96, 0.03);
}
@media (max-width: 576px) {
  .cal-list-table thead {
    display: none;
  }
  .cal-list-table tbody tr {
    display: block;
    border-bottom: 1px solid #EFEFEF;
    padding: 0.25rem 0;
  }
  .cal-list-table tbody td {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-bottom: none;
  }
  .cal-list-table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    color: #636569;
    text-transform: uppercase;
    min-width: 52px;
    flex-shrink: 0;
  }
}

.cal-list-count {
  font-size: 0.78rem;
  color: #636569;
  margin-top: 0.5rem;
  text-align: right;
}

.cal-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #636569;
}
.cal-empty i {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

.cal-sort-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cal-sort-btn:hover {
  color: #001F60;
}
.cal-sort-btn .cal-sort-icon {
  font-size: 0.6rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.cal-sort-btn.active .cal-sort-icon {
  opacity: 1;
  color: #005CB9;
}

.calendar-scheduler .e-schedule .e-toolbar .e-toolbar-item.e-add {
  display: none;
}
.calendar-scheduler .e-schedule .e-month-view .e-date-header-wrap table td.e-current-day {
  color: forestgreen;
  font-weight: 600;
}
.calendar-scheduler .e-schedule .e-month-view .e-schedule-table .e-work-cells.e-current-date .e-date-header {
  background: forestgreen;
}
.calendar-scheduler .e-schedule .e-month-view .e-schedule-table .holiday {
  background-color: purple;
}
.calendar-scheduler .e-schedule .e-month-view .e-schedule-table .e-new-event {
  display: none !important;
}

.e-quick-popup-wrapper.e-popup-open {
  border: 2px solid grey;
}
.e-quick-popup-wrapper.e-popup-open .e-popup-header .quick-info-header-content {
  font-size: 20px;
  opacity: 0.8;
}
.e-quick-popup-wrapper.e-popup-open .e-popup-header .quick-info-header-content.holiday {
  background-color: purple;
  color: white;
}
.e-quick-popup-wrapper.e-popup-open .e-popup-header .quick-info-header-content.non-holiday {
  background-color: #0d6efd;
  color: white;
}
.e-quick-popup-wrapper.e-popup-open .e-popup-content .event-popup-date {
  font-size: 24px;
}

.calendar-showall-div .showall-label {
  padding-right: 20px;
  font-size: 14px;
}
.calendar-showall-div .showall-switch {
  width: 100px;
}

.calendar-showpastHoliday-div .showpastHoliday-label {
  padding-right: 20px;
  font-size: 14px;
}
.calendar-showpastHoliday-div .showpastHoliday-switch {
  width: 100px;
}

.calendar-grid .e-icons.search-button {
  border-color: #ced4da !important;
  border: 1px solid;
  cursor: pointer;
  border-radius: 4px;
}
.calendar-grid .e-icons.search-button:hover {
  background-color: #5c636a;
  color: white;
}
.calendar-grid .e-content .e-checkbox-wrapper .e-frame.e-icons.e-uncheck {
  border-color: grey;
}

@media (max-width: 992px) {
  .calendar-showall-div .showall-label {
    padding-right: 20px;
    font-size: 14px;
  }
  .calendar-showall-div .showall-switch {
    width: 50px;
  }
  .calendar-showall-div .showall-switch .e-switch-on, .calendar-showall-div .showall-switch .e-switch-off {
    display: none;
  }
  .calendar-showpastHoliday-div .showpastHoliday-label {
    padding-right: 20px;
    font-size: 14px;
  }
  .calendar-showpastHoliday-div .showpastHoliday-switch {
    width: 50px;
  }
  .calendar-showpastHoliday-div .showpastHoliday-switch .e-switch-on, .calendar-showpastHoliday-div .showpastHoliday-switch .e-switch-off {
    display: none;
  }
  .calendar-grid .e-toolbar {
    margin-left: 2px;
  }
  .calendar-grid .e-icons.search-button {
    border-color: #ced4da !important;
    border: 1px solid;
    cursor: pointer;
    border-radius: 4px;
  }
  .calendar-grid .e-icons.search-button:hover {
    background-color: #5c636a;
    color: white;
  }
  .calendar-grid .e-content .e-checkbox-wrapper .e-frame.e-icons.e-uncheck {
    border-color: grey;
  }
}
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.diary-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.diary-date-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.diary-date-input {
  padding: 0.3rem 0.6rem;
  border: 1.5px solid #A7A8A9;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #001F60;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.diary-date-input:focus {
  outline: none;
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.12);
}

.diary-date-sep {
  font-size: 0.85rem;
  color: #636569;
}

.diary-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.diary-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.diary-toggle-track {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 1.2rem;
  background: #A7A8A9;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.diary-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.2rem - 4px);
  height: calc(1.2rem - 4px);
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.diary-toggle-input:checked + .diary-toggle-track {
  background: #005CB9;
}
.diary-toggle-input:checked + .diary-toggle-track::after {
  transform: translateX(1rem);
}

.diary-toggle-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: #001F60;
}

.diary-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.diary-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 480px;
}

.diary-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: #A7A8A9;
  pointer-events: none;
}

.diary-search-input {
  width: 100%;
  padding: 0.25rem 0.75rem 0.25rem 2rem;
  border: 1.5px solid #A7A8A9;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #001F60;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.diary-search-input:focus {
  outline: none;
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.12);
}
.diary-search-input::placeholder {
  color: #A7A8A9;
}

.diary-form {
  width: min(560px, 100vw - 4rem);
}

.diary-rte.quote-form {
  width: 700px;
  max-width: 700px;
}
@media (max-width: 576px) {
  .diary-rte.quote-form {
    width: 90vw;
    max-width: 90vw;
  }
}

#diaryForm form .e-button-left div {
  width: -webkit-fill-available;
}

#quoteModal,
#diaryModal,
#diaryDeleteConfirmModal {
  max-width: 95vw;
  max-height: 95vh;
  min-height: 30vh;
  min-width: 20vw;
  width: fit-content;
}

@media (max-width: 992px) {
  #quoteModal,
  #diaryModal {
    max-width: 95vw;
    max-height: 95vh;
    min-height: 40vh;
    min-width: 90vw;
    width: fit-content;
  }
  .quote-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell,
  .diary-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell {
    padding-left: 10px;
  }
  .quote-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell.e-unboundcell,
  .diary-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell.e-unboundcell {
    text-align: left !important;
  }
  .quote-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell::before,
  .diary-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell::before {
    display: none;
  }
  .quote-grid .e-toolbar-item:first-of-type,
  .diary-grid .e-toolbar-item:first-of-type {
    margin-left: 0 !important;
  }
}
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.bowling-oc-score {
  min-width: 2.5rem;
  text-align: center;
}

.bowling-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.bowling-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.bowling-badge-complete {
  background: rgba(0, 174, 66, 0.12);
  color: rgb(0, 133.2, 50.524137931);
}

.bowling-badge-active {
  background: rgba(0, 92, 185, 0.1);
  color: #005CB9;
}

.bowling-badge-300 {
  background: rgba(0, 92, 185, 0.1);
  color: #005CB9;
}

.bowling-badge-800 {
  background: rgba(0, 174, 66, 0.12);
  color: rgb(0, 133.2, 50.524137931);
}

.bowling-badge-sanctioned {
  background: rgba(99, 101, 105, 0.12);
  color: #636569;
}

.bowling-stat-btn {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 70px;
  background: none;
  border: 2px solid transparent;
  border-radius: 5px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bowling-stat-btn:hover {
  background: rgba(0, 92, 185, 0.05);
  border-color: rgba(0, 92, 185, 0.2);
}
.bowling-stat-btn.active {
  background: rgba(0, 92, 185, 0.08);
  border-color: #005CB9;
}
.bowling-stat-btn.active .bowling-summary-stat-label {
  color: #005CB9;
}
.bowling-stat-btn.active .bowling-summary-stat-value {
  color: #005CB9;
}

.bowling-summary-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 0.85rem 1rem;
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.bowling-summary-divider {
  width: 1px;
  background: #EFEFEF;
  align-self: stretch;
}
@media (max-width: 576px) {
  .bowling-summary-divider {
    display: none;
  }
}

.bowling-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 70px;
}

.bowling-summary-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #636569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bowling-summary-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #001F60;
  line-height: 1.2;
}

.bowling-scores-subtitle {
  font-size: 0.9rem;
  color: #001F60;
  font-weight: 600;
}

.bowling-form {
  width: min(580px, 100vw - 3rem);
}

.bowling-honor-form {
  width: min(500px, 100vw - 3rem);
}

.bowling-form-label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  color: #001F60;
  margin-bottom: 0.3rem;
}

.bowling-league-grid .num-year-oc {
  padding-left: 10px;
  font-size: 20px;
  color: #1D295B;
  font-weight: bold;
}

#leagueModal,
#scoreModal,
#summaryModal {
  max-width: 95vw;
  max-height: 95vh !important;
  width: fit-content;
  height: fit-content;
}

#bowlingHonorModal {
  max-width: 95vw;
  max-height: 95vh;
  min-width: 75vw;
  min-height: 80vh;
  width: fit-content;
}
#bowlingHonorModal .bowling-caption {
  font-size: 18px;
  font-weight: bold;
  color: blue;
}

#bowlingHonorSummaryModal {
  max-width: 95vw;
  max-height: 95vh;
  min-width: 30vw;
  min-height: 50vh;
  width: fit-content;
}
#bowlingHonorSummaryModal li {
  font-size: 24px;
  font-weight: bold;
}

@media (max-width: 992px) {
  .bowling-league-grid .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before {
    width: 35%;
  }
  .bowling-league-grid .e-bigger.e-grid.e-row-responsive .e-gridcontent td[data-cell] {
    padding-left: 35%;
  }
  .bowling-league-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell {
    padding-left: 10px;
  }
  .bowling-honor-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell {
    padding-left: 40%;
  }
  .bowling-honor-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell.e-templatecell:last-child {
    padding-left: 10px;
  }
  .bowling-honor-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell.e-unboundcell {
    text-align: left !important;
  }
  #bowlingHonorSummaryModal li {
    font-size: 20px;
  }
  #leagueModal,
  #scoreModal {
    width: 95vw;
  }
}
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.auth-page {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #f4f6f9;
}

.auth-card {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  padding: 2.25rem 2.5rem;
  width: 100%;
  max-width: 420px;
}
@media (max-width: 480px) {
  .auth-card {
    padding: 1.75rem 1.25rem;
  }
}

.auth-brand {
  text-align: center;
  margin-bottom: 1.25rem;
}

.auth-brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #001F60;
  text-decoration: none !important;
}
.auth-brand-name span {
  color: #005CB9;
}
.auth-brand-name:hover {
  color: #001F60;
}

.auth-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #001F60;
  margin-bottom: 0.2rem;
  text-align: center;
  line-height: 1.3;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: #636569;
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.auth-divider {
  border-top: 1px solid #EFEFEF;
  margin: 1.25rem 0 1rem;
}

.auth-links {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.83rem;
  text-align: center;
}
.auth-links a {
  color: #005CB9;
  text-decoration: none;
}
.auth-links a:hover {
  text-decoration: underline;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
@media (max-width: 768px) {
  .vhs-col-detail {
    display: none;
  }
  .vhs-grid-button-text {
    display: none;
  }
}
@media (max-width: 576px) {
  .vhs-row {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgb(218.6, 218.6, 218.6);
  }
  .vhs-row:last-child {
    border-bottom: none;
  }
  .vhs-row td {
    border-bottom: none;
  }
  .vhs-row td:first-child {
    flex: 1 1 100%;
    padding-bottom: 0.25rem;
    word-break: break-word;
  }
  .vhs-row td:last-child {
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 0;
  }
}
.vhs-fullscreen-video {
  max-width: 95vw;
  max-height: 88vh;
}

.vhs-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.vhs-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #EFEFEF;
  border: 1px solid rgb(218.6, 218.6, 218.6);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  color: #001F60;
}

.vhs-tag-remove {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 0.95rem;
  color: #636569;
  cursor: pointer;
}
.vhs-tag-remove:hover {
  color: #CE0E2D;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.home-guest-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #e1f3fa;
  border: 1px solid rgba(0, 92, 185, 0.2);
  border-left: 3px solid #005CB9;
  border-radius: 8px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: #001F60;
}

.home-guest-nudge-text a {
  color: #005CB9;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.home-guest-nudge-text a:hover {
  text-decoration: underline;
}

.home-guest-nudge-close {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: 1.2rem;
  color: #636569;
  cursor: pointer;
  flex-shrink: 0;
}
.home-guest-nudge-close:hover {
  color: #001F60;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 0.5rem 0 1.5rem;
}
@media (max-width: 1100px) {
  .home-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.home-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 3/2;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.home-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.home-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 70%);
}

.home-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.9rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  color: #FFFFFF;
}

.home-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.2rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.home-card-desc {
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 576px) {
  .home-grid {
    gap: 0.75rem;
  }
  .home-card-desc {
    display: none;
  }
  .home-card-body {
    background: none;
    padding: 0.6rem 0.75rem;
  }
  .home-card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 45%);
  }
  .home-card-title {
    font-size: 0.875rem;
  }
}
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.vince-about {
  max-width: 820px;
  margin: 0 auto;
}

.vince-about-header {
  margin-bottom: 1.5rem;
}
.vince-about-header h1 {
  margin-bottom: 0.25rem;
}

.vince-about-sub {
  color: #636569;
  margin: 0;
}

.vince-about-current {
  padding: 1.5rem 0 0.5rem;
}

.vince-about-current-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.vince-about-version {
  font-size: 1.4rem;
  font-weight: 700;
  color: #001F60;
}

.vince-about-badge {
  background: #005CB9;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
}

.vince-about-date {
  color: #636569;
  font-size: 0.875rem;
  margin-left: auto;
}

.vince-about-uptodate {
  font-size: 0.875rem;
  color: #00AE42;
  margin-bottom: 1.25rem;
}

.vince-about-change-group {
  margin-top: 1rem;
}
.vince-about-change-group ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}
.vince-about-change-group li {
  margin: 0.2rem 0;
  font-size: 0.95rem;
}

.vince-about-change-type {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
}
.vince-about-change-type.vince-about-type-added {
  background: rgb(184.2, 255, 211.0551724138);
  color: rgb(0, 123, 46.6551724138);
}
.vince-about-change-type.vince-about-type-changed {
  background: rgb(195.2, 224.9383783784, 255);
  color: rgb(0, 66.6378378378, 134);
}
.vince-about-change-type.vince-about-type-fixed {
  background: rgb(255, 213.24, 193.8);
  color: rgb(204, 64.8, 0);
}
.vince-about-change-type.vince-about-type-removed {
  background: rgb(249.5272727273, 174.4727272727, 186.5909090909);
  color: rgb(182.1227272727, 12.3772727273, 39.7840909091);
}

.vince-about-history {
  padding: 1.5rem 0 0.5rem;
}

.vince-about-timeline-entry {
  display: flex;
  gap: 1rem;
  padding-bottom: 2rem;
  position: relative;
}
.vince-about-timeline-entry:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: #EFEFEF;
}

.vince-about-timeline-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 4px;
  border: 2px solid #EFEFEF;
  background: #FFFFFF;
}
.vince-about-accent-added .vince-about-timeline-dot {
  border-color: #00AE42;
  background: rgb(184.2, 255, 211.0551724138);
}
.vince-about-accent-changed .vince-about-timeline-dot {
  border-color: #005CB9;
  background: rgb(195.2, 224.9383783784, 255);
}
.vince-about-accent-fix .vince-about-timeline-dot {
  border-color: #FF5100;
  background: rgb(255, 213.24, 193.8);
}
.vince-about-accent-removed .vince-about-timeline-dot {
  border-color: #CE0E2D;
  background: rgb(249.5272727273, 174.4727272727, 186.5909090909);
}

.vince-about-timeline-content {
  flex: 1;
  min-width: 0;
}

.vince-about-timeline-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.vince-about-timeline-header .vince-about-date {
  margin-left: 0;
}

.vince-about-showall {
  display: block;
  margin-top: 0.5rem;
  background: none;
  border: none;
  color: #005CB9;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0;
}
.vince-about-showall:hover {
  text-decoration: underline;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(560px, 100vw - 2rem);
}

.contact-view {
  width: min(560px, 100vw - 2rem);
}

.contact-view-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #EFEFEF;
}
.contact-view-row:last-of-type {
  border-bottom: none;
}

.contact-view-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #636569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0.1rem;
}

.contact-view-value {
  font-size: 0.9rem;
  color: #001F60;
}

.contact-view-message {
  white-space: pre-wrap;
  line-height: 1.6;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.profile-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (max-width: 768px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
}

.profile-avatar-col {
  display: flex;
  flex-direction: column;
}
.profile-avatar-col .profile-section-card {
  flex: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.profile-avatar-col .profile-section-card .profile-section-title {
  align-self: stretch;
}

.profile-content-col {
  max-width: 560px;
  display: flex;
  flex-direction: column;
}
.profile-content-col .profile-section-card {
  flex: 1;
}

.profile-form-wrap {
  max-width: 560px;
}

.profile-section-card {
  background: #FFFFFF;
  border: 1px solid #EFEFEF;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.profile-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #636569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid #EFEFEF;
}

.profile-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 480px) {
  .profile-name-row {
    grid-template-columns: 1fr;
  }
}

.profile-email-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.profile-email-badge {
  flex-shrink: 0;
  font-size: 1.1rem;
}

.profile-email-verified {
  color: #00AE42;
}

.profile-email-unverified {
  color: #FF5100;
}

.vince-avatar-has-image {
  overflow: hidden;
}

.vince-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-picture-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.profile-picture-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.profile-picture-preview {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bs-border-color);
}

.profile-picture-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--bs-secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bs-border-color);
}
.profile-picture-placeholder i {
  font-size: 2.5rem;
  color: var(--bs-secondary-color);
}

.cropper-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-crop-dialog {
  background: var(--bs-body-bg);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.cropper-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.cropper-modal-body {
  padding: 1rem;
  overflow: hidden;
  flex: 1;
}

.cropper-container-wrapper {
  max-height: 380px;
  overflow: hidden;
}

.cropper-modal-footer {
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  gap: 0.5rem;
}

.cropper-crop-box,
.cropper-view-box {
  border-radius: 50%;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.disclaimer-link {
  cursor: pointer;
  color: dodgerblue;
}

.message-container {
  max-width: 800px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-user {
  background-color: #e2f0ff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  max-width: 50%;
  width: fit-content;
  float: right;
}

.message-user::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  border: 10px solid transparent;
  border-left-color: #e2f0ff;
  transform: translateY(-50%);
}

.message-assistant {
  text-align: left;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: auto;
  max-width: 65%;
  float: left;
}

.input-container {
  max-width: 800px;
}

iframe.copilot-iframe {
  height: 85vh;
  width: 50%;
  border: 1px solid rgb(230, 230, 230);
}
@media (max-width: 576px) {
  iframe.copilot-iframe {
    width: 100%;
    height: 75vh;
  }
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
#modal-setlistmodal {
  z-index: 2001 !important;
}

#modal-concertModal {
  z-index: 1150;
}

#concertModal,
#honorScoreModal {
  z-index: 1150;
  min-width: 50vw;
}
#concertModal .e-file-upload-btn,
#honorScoreModal .e-file-upload-btn {
  display: none;
}
#concertModal #setlistImage,
#concertModal #honorScoreImage,
#honorScoreModal #setlistImage,
#honorScoreModal #honorScoreImage {
  width: -webkit-fill-available;
}

#concertModal {
  max-width: 95vw;
  max-height: 95vh !important;
  width: fit-content;
  height: fit-content;
}

#setlistmodal {
  max-width: 95vw;
  max-height: 85vh;
  width: fit-content;
  height: fit-content;
}
#setlistmodal .e-dlg-header-content {
  background-color: #0b5ed7;
}
#setlistmodal .e-dlg-header-content .e-btn-icon.e-icon-dlg-close {
  color: white;
}
#setlistmodal .e-dlg-header-content .e-dlg-header, #setlistmodal .e-dlg-header-content .e-dlg-header * {
  color: white;
}

@media (max-width: 992px) {
  #setlistmodal {
    max-height: 95vh;
  }
  #setlistmodal #setlistImage,
  #setlistmodal #honorScoreImage {
    max-height: 90vh;
    max-width: 90vw;
  }
  .concerts-old-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell {
    padding-left: 10px;
  }
  .concerts-old-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell.e-unboundcell {
    text-align: left !important;
  }
  .concerts-old-grid .e-grid.e-row-responsive.e-device .e-row .e-rowcell::before {
    display: none;
  }
  .concerts-old-grid .e-toolbar-item:first-of-type {
    margin-left: 0 !important;
  }
}
/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.admin-table {
  font-size: 0.9rem;
}
.admin-table thead th {
  background: #EFEFEF;
  color: #636569;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgb(218.6, 218.6, 218.6);
  white-space: nowrap;
}
.admin-table tbody td {
  color: #231F20;
}
.admin-table tbody tr:hover > * {
  background-color: rgba(0, 92, 185, 0.04);
  color: #231F20;
}

.admin-table-secondary {
  font-size: 0.82rem;
  color: #636569;
}

.admin-actions-cell {
  white-space: nowrap;
  text-align: right;
}
.admin-actions-cell .btn + .btn {
  margin-left: 0.25rem;
}

.admin-badge-active,
.admin-badge-inactive,
.admin-badge-role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2em 0.55em;
  border-radius: 4px;
  white-space: nowrap;
}

.admin-badge-active {
  background: rgba(0, 174, 66, 0.12);
  color: #00AE42;
}

.admin-badge-inactive {
  background: rgba(99, 101, 105, 0.12);
  color: #636569;
}

.admin-badge-role {
  background: rgba(0, 92, 185, 0.1);
  color: #005CB9;
}

.admin-role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.admin-user-modal {
  width: min(680px, 100vw - 2rem);
}

@media (min-width: 576px) {
  .admin-nav-item-modal {
    width: 560px;
    height: 560px;
  }
}

.admin-role-modal {
  width: min(480px, 100vw - 2rem);
}

.admin-user-form-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 576px) {
  .admin-user-form-layout {
    grid-template-columns: 1fr;
  }
}

.admin-form-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #636569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #EFEFEF;
}

.vince-modal-body {
  accent-color: #005CB9;
}
.vince-modal-body .form-check-input:checked {
  background-color: #005CB9;
  border-color: #005CB9;
}
.vince-modal-body .form-check-input:focus {
  border-color: rgba(0, 92, 185, 0.5);
  box-shadow: 0 0 0 0.25rem rgba(0, 92, 185, 0.25);
}
.vince-modal-body .form-check.form-switch {
  display: flex;
  align-items: center;
  padding-left: 0;
  gap: 0.5rem;
}
.vince-modal-body .form-check.form-switch .form-check-input {
  margin: 0;
  flex-shrink: 0;
  width: 2rem;
  height: 1rem;
  cursor: pointer;
}
.vince-modal-body .form-check.form-switch .form-check-label {
  margin: 0;
  cursor: pointer;
}

.admin-role-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #A7A8A9;
  cursor: help;
  font-size: 0.8rem;
  vertical-align: middle;
}
.admin-role-info::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  background: #001F60;
  color: #FFFFFF;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.4;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
}
.admin-role-info:hover::after, .admin-role-info:focus::after {
  opacity: 1;
}

/*
    $brand-primary:                 theme-color('primary');
$brand-success:                 theme-color('success');
$brand-warning:                 theme-color('warning');
$brand-danger:                  theme-color('danger');
$brand-info:                    theme-color('info');

*/
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1199px) {
  .recipe-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .recipe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}
@media (max-width: 400px) {
  .recipe-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.recipe-card-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: visible;
  position: relative;
  min-width: 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}
.recipe-card-tile:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}
.recipe-card-tile.recipe-card-tile--menu-open {
  z-index: 200;
}

.recipe-card-cover {
  height: 200px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #001F60 0%, #005CB9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .recipe-card-cover {
    height: 160px;
  }
}

.recipe-card-hero {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recipe-card-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-card-cover-fallback i {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.45);
}

.recipe-card-body {
  padding: 0.65rem 0.85rem 0.75rem;
  min-width: 0;
}

.recipe-card-title {
  margin: 0 0 0.2rem 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: #001F60;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recipe-card-meta {
  font-size: 0.78rem;
  color: #636569;
  margin-bottom: 0.4rem;
}

.recipe-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}
.recipe-card-badges .badge {
  font-weight: 500;
}

.recipe-card-excerpt {
  color: #636569;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recipe-detail .recipe-meta {
  margin: 0.25rem 0 1rem;
  font-size: 0.85rem;
}
.recipe-detail .recipe-section-heading {
  color: #001F60;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.recipe-detail .recipe-ingredients {
  padding-left: 1.25rem;
}
.recipe-detail .recipe-ingredients li {
  margin-bottom: 0.25rem;
}
.recipe-detail .recipe-instructions {
  padding-left: 1.25rem;
}
.recipe-detail .recipe-instructions li {
  margin-bottom: 0.6rem;
  line-height: 1.45;
}

.recipe-original {
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
}

.recipe-original-toggle {
  background: transparent;
  border: none;
  padding: 0.25rem 0;
  color: #636569;
  font-size: 0.85rem;
  cursor: pointer;
}
.recipe-original-toggle:hover {
  color: #001F60;
}

.recipe-original-content {
  padding-top: 0.5rem;
}

.recipe-original-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
}

.recipe-gallery-editor .recipe-gallery-card {
  width: 160px;
  position: relative;
}
.recipe-gallery-editor .recipe-gallery-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
}
.recipe-gallery-editor .recipe-gallery-hero-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  z-index: 2;
}

.recipe-gallery-strip {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

.recipe-gallery-strip-item {
  flex: 0 0 auto;
  width: 220px;
  text-decoration: none;
  color: inherit;
}
.recipe-gallery-strip-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: #EFEFEF;
}

.recipe-gallery-strip-caption {
  display: block;
  font-size: 0.8rem;
  color: #636569;
  margin-top: 0.25rem;
  line-height: 1.3;
}

.recipe-share-link {
  background: #EFEFEF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid #005CB9;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  word-break: break-all;
}

.recipes-add-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #636569;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.5rem 0;
}
.recipes-add-divider::before, .recipes-add-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.recipes-add-divider span {
  padding: 0 0.75rem;
}

.recipe-raw-text {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.recipe-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.recipe-page-title {
  color: #001F60;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.recipe-page-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.recipe-unsaved-indicator {
  color: #f0ad4e;
  font-size: 1.15rem;
  margin-right: 0.15rem;
  cursor: help;
  animation: recipe-unsaved-pulse 2s ease-in-out infinite;
}

@keyframes recipe-unsaved-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
.recipe-detail-container {
  max-width: 760px;
}

.recipe-edit-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.recipe-edit-tabs::-webkit-scrollbar {
  display: none;
}
.recipe-edit-tabs .vince-tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.recipe-edit-panel {
  margin-top: 1.25rem;
}

.recipe-edit-file {
  width: 140px;
}
.recipe-edit-file img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
}

@media (max-width: 575px) {
  .recipe-ingredients-editor {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
  }
  .recipe-ingredients-editor thead {
    display: none;
  }
  .recipe-ingredients-editor tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "qty   unit   del" "item  item   item" "notes notes  notes";
    gap: 0.4rem;
    background: #FFFFFF;
    border: 1px solid #EFEFEF;
    border-left: 3px solid #005CB9;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
  }
  .recipe-ingredients-editor tbody tr > td {
    display: block;
    padding: 0;
    border: none;
    width: auto !important;
    background: transparent;
  }
  .recipe-ingredients-editor tbody tr > td:nth-child(1) {
    grid-area: qty;
  }
  .recipe-ingredients-editor tbody tr > td:nth-child(2) {
    grid-area: unit;
  }
  .recipe-ingredients-editor tbody tr > td:nth-child(3) {
    grid-area: item;
  }
  .recipe-ingredients-editor tbody tr > td:nth-child(4) {
    grid-area: notes;
  }
  .recipe-ingredients-editor tbody tr > td:nth-child(5) {
    grid-area: del;
    align-self: start;
  }
}

.recipe-upload-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.recipe-upload-overlay-card {
  background: #fff;
  border-radius: 8px;
  padding: 2rem 2.5rem;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.recipe-tag-suggestion {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #fafafa;
  font-size: 0.85rem;
  cursor: pointer;
}
.recipe-tag-suggestion:hover {
  background: #eaeaea;
}
.recipe-tag-suggestion.is-selected {
  background: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

@media print {
  .vince-navbar,
  .breadcrumb,
  .vince-page-header,
  .recipe-page-actions,
  .recipe-original,
  .footer,
  nav {
    display: none !important;
  }
  .recipe-detail-container {
    max-width: 100%;
    padding: 0;
  }
  .recipe-page-title {
    font-size: 20pt;
  }
  .recipe-section-heading {
    font-size: 14pt;
  }
  .recipe-ingredients li,
  .recipe-instructions li {
    break-inside: avoid;
  }
  body {
    font-size: 11pt;
  }
}
/**********************************************************************************************************
**********************************************************************************************************

    https: //adrianhall.github.io/asp.net/2022/08/26/adding-sass-to-blazor/

**********************************************************************************************************
***********************************************************************************************************/
/* ───── Global elements ───── */
body, html {
  height: 100%;
  margin: 0;
  color: #001F60;
  font-family: din-2014, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
}

html {
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

h1 {
  color: #001F60;
  font-feature-settings: "clig" off, "liga" off;
  font-family: din-2014, Helvetica, Arial, sans-serif;
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: 67.2px; /* 120% */
}

h2 {
  color: #001F60;
  font-feature-settings: "clig" off, "liga" off;
  font-family: din-2014, Helvetica, Arial, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 48px; /* 150% */
}

h3 {
  color: #001F60;
  font-feature-settings: "clig" off, "liga" off;
  font-family: din-2014, Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px; /* 150% */
}

hr {
  color: #EFEFEF;
  opacity: 1;
}

a {
  cursor: pointer;
  color: #005CB9;
  text-decoration: underline;
}

.sticky-top {
  z-index: 1000 !important;
}

/* ===================== TOP NAVBAR ===================== */
.vince-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1029;
}

.vince-navbar {
  background-color: #001F60;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.vince-navbar-container {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 1.5rem;
}

.vince-navbar-brand {
  color: #FFFFFF !important;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  padding-right: 1.75rem;
  margin-right: 0.25rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.vince-navbar-brand:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.vince-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.vince-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.vince-hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.vince-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.vince-hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.vince-nav-content {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 1.5rem;
}

.vince-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.125rem;
  flex: 1;
}

.vince-nav-item {
  position: relative;
  list-style: none;
}

.vince-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  text-decoration: none !important;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
  letter-spacing: 0.02em;
  line-height: 1;
}
.vince-nav-link:hover {
  color: #FFFFFF;
  text-decoration: none !important;
}
.vince-nav-link.active {
  color: #FFFFFF;
  background-color: rgba(206, 14, 45, 0.2);
}

.vince-dropdown-arrow {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.vince-nav-item.open .vince-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.vince-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background-color: #0d1f3c;
  border-radius: 8px;
  min-width: 150px;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  z-index: 1040;
}

.vince-nav-item.open > .vince-dropdown-menu,
.vince-avatar-wrapper.open > .vince-dropdown-menu {
  display: block;
}

.vince-dropdown-right {
  left: auto;
  right: 0;
}

.vince-dropdown-item {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
  width: 100%;
}
.vince-dropdown-item:hover, .vince-dropdown-item.active {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.08);
  text-decoration: none !important;
}

.vince-dropdown-item-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.vince-dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0.3rem 0;
  list-style: none;
}

.vince-mobile-auth {
  display: none;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.vince-mobile-auth-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0.25rem 0 0.25rem;
}

.vince-nav-link-btn {
  width: 100%;
  text-align: left;
}

.vince-nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}
.vince-nav-right .vince-nav-item {
  position: relative;
}

.vince-login-btn {
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.vince-login-btn:hover {
  border-color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  text-decoration: none !important;
}

.vince-avatar-wrapper {
  position: relative;
}

.vince-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: transparent;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  transition: border-color 0.15s ease;
  padding: 0;
}
.vince-avatar:hover {
  border-color: rgba(255, 255, 255, 0.75);
}

.vince-avatar-guest {
  font-size: 0.9rem;
  border-color: rgba(255, 255, 255, 0.15);
}

.vince-avatar-wrapper.open .vince-avatar {
  border-color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
  .vince-navbar-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    padding: 0.8rem 1rem;
  }
  .vince-navbar-brand {
    border-right: none;
    padding-right: 0;
    flex: 1;
  }
  .vince-hamburger {
    display: flex;
  }
  .vince-nav-content {
    display: none;
    flex-direction: column;
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .vince-nav-content.open {
    display: flex;
  }
  .vince-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
  .vince-nav-item {
    width: 100%;
  }
  .vince-nav-link {
    width: 100%;
    padding: 0.7rem 0.75rem;
    border-radius: 4px;
  }
  .vince-dropdown-menu {
    position: static;
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: unset;
    width: 100%;
  }
  .vince-dropdown-item {
    padding: 0.6rem 1.5rem;
  }
  .vince-nav-right {
    display: none;
  }
  .vince-mobile-auth {
    display: block;
  }
}
/* ===================== END TOP NAVBAR ===================== */
#blazor-error-ui {
  background: #FFB71B;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.clickable {
  cursor: pointer;
  color: #005CB9;
}

.no-wrap {
  white-space: nowrap;
}

.auth-form-col {
  max-width: 900px;
}

/* ───── Form Overrides ───── */
input.form-control,
textarea.form-control {
  border-radius: 8px;
  border-color: #A7A8A9;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  padding: 0.4rem 0.75rem;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
  opacity: 1;
  color: #A7A8A9;
}
input.form-control:focus,
textarea.form-control:focus {
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.15);
}

select.form-select {
  border-radius: 8px;
  border-color: #A7A8A9;
  font-weight: 400;
  font-size: 0.9375rem;
}
select.form-select:focus {
  border-color: #005CB9;
  box-shadow: 0 0 0 3px rgba(0, 92, 185, 0.15);
}

.e-input-group.e-control-wrapper.e-error {
  background-color: rgba(206, 14, 45, 0.1);
}

.validation-message {
  color: #CE0E2D;
}

.form-switch .form-check-input {
  height: 30px;
  width: 57px;
}
.form-switch .form-label {
  margin-left: 8px;
  padding-top: 7px;
}

label, .section-desc {
  font-size: 0.9rem;
  line-height: 1.4;
  color: #636569;
  font-weight: 400;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #636569;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn {
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 8px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background-color: #005CB9;
  border-color: #005CB9;
  color: #FFFFFF;
}
.btn-primary:hover:not(.fake-button), .btn-primary:focus:not(.fake-button) {
  background-color: #001F60;
  border-color: #001F60;
  color: #FFFFFF;
}
.btn-primary.fake-button {
  cursor: default;
}

.btn-outline-primary {
  color: #005CB9;
  border-color: #005CB9;
  background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: #005CB9;
  border-color: #005CB9;
  color: #FFFFFF;
}

.btn-outline-secondary {
  color: #636569;
  border-color: #A7A8A9;
  background-color: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: #EFEFEF;
  border-color: #636569;
  color: #001F60;
}

.btn-outline-danger {
  color: #CE0E2D;
  border-color: #CE0E2D;
  background-color: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: #CE0E2D;
  border-color: #CE0E2D;
  color: #FFFFFF;
}

.btn-success {
  background-color: #00AE42;
  border-color: #00AE42;
  color: #FFFFFF;
}
.btn-success:hover, .btn-success:focus {
  background-color: rgb(0, 133.2, 50.524137931);
  border-color: rgb(0, 133.2, 50.524137931);
  color: #FFFFFF;
}

.btn-primary i {
  margin-right: 6px;
}

.vincecatalano {
  font-size: 48px;
  color: rebeccapurple;
}

.hide {
  display: none;
}

.e-toast-container {
  z-index: 1080 !important;
}

#toast_type .e-toast-icon.e-icons {
  height: auto;
  font-size: 30px;
}

.bootstrap5 #toast_type .e-toast-icon.e-icons,
.bootstrap5-dark #toast_type .e-toast-icon.e-icons {
  height: 25px;
}

.toast-icons.e-success::before {
  content: "\e701";
}

.toast-icons.e-error::before {
  content: "\e700";
}

.toast-icons.e-info::before {
  content: "\e704";
}

.toast-icons.e-warning::before {
  content: "\e703";
}

#toast_types {
  text-align: center;
}

#SpinTarget {
  position: relative;
  height: 400px;
  top: 50%;
}

#SpinTarget.spin-compact {
  height: 80px;
  top: 0;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
  border: 1px solid #dee2e6;
  border-bottom: none;
}
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
  border: 1px solid #0d6efd;
}

.e-grid .e-toolbar .e-tbar-btn {
  border: 1px solid #005CB9;
}
.e-grid .e-toolbar .e-tbar-btn:hover {
  background-color: #005CB9;
  color: #FFFFFF;
}
.e-grid .e-toolbar [id*=search] {
  position: absolute;
  right: 0;
}
.e-grid .e-columnheader .e-headercell {
  background-color: #005CB9;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
}
.e-grid .e-columnheader .e-headercell .e-icons::before {
  color: #FFFFFF;
}
.e-grid .e-row.e-altrow {
  background-color: rgba(167, 168, 169, 0.1);
}
@media (min-width: 992px) {
  .e-grid .e-toolbar-right {
    left: 0;
  }
}
@media (max-width: 991px) {
  .e-grid .e-rowcell div span {
    display: block;
    white-space: break-spaces;
  }
}

.e-dlg-container .e-dialog {
  border-radius: 12px;
}
.e-dlg-container .e-dialog .e-dlg-header-content {
  background-color: #005CB9;
  color: #FFFFFF;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.e-dlg-container .e-dialog .e-dlg-header-content .e-dlg-header span {
  color: #FFFFFF;
}
.e-dlg-container .e-dialog .e-dlg-header-content .e-icon-dlg-close::before {
  color: #FFFFFF;
  font-weight: 600;
}
.e-dlg-container .e-dialog .e-dlg-content {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.dual-list-wrapper .e-listbox-tool {
  margin-left: 15px;
  margin-right: 15px;
  width: 85px;
}

.e-data-form label.e-form-label,
.e-data-form label.e-float-text {
  font-size: 16px;
  font-weight: 500;
}

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

.rotate90 {
  transform: rotate(90deg);
}

.rotate180 {
  transform: rotate(180deg);
}

.rotate270 {
  transform: rotate(270deg);
}

.img-caption {
  color: blue;
  font-size: 16pt;
  font-weight: 600;
  position: relative;
  padding: 0.3em 1em;
  text-align: center;
  width: 100%;
  line-height: normal;
}

.remove-image-to-upload-btn {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 50%;
}

table.color-navy th,
table.color-navy td {
  color: #001F60;
}

.page-title {
  padding-left: 10px;
  font-size: 20px;
  color: #1D295B;
  font-weight: bold;
}