:root {
  --schedule-text-dark: #1A1D2E;
  --schedule-text-gray: #6B7280;
  --schedule-border-gray: #E8EBF0;
  --schedule-bg-light: #fafbfc;
  --schedule-bg-hover: #f9fafb;
  --schedule-0: #069090;
  --schedule-1: #F2E6CF;
  --schedule-2: #F7A430;
  --schedule-3: #FDC602;
  --schedule-4: #EF7E1A;
  --schedule-neutral-gray: #E8EBF0;
  --schedule-unavailable-orange: #EA5815;
  --schedule-primary-blue: #4169E1;
}

@keyframes cfShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.cf-skeleton-loading {
  background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%, #e0e0e0 100%);
  background-size: 200% 100%;
  animation: cfShimmer 1.5s ease-in-out infinite;
}

.cf-skeleton-bar {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

:root {
  --cf-0: var(--schedule-0);
  --cf-1: var(--schedule-1);
  --cf-2: var(--schedule-2);
  --cf-3: var(--schedule-3);
  --cf-4: var(--schedule-4);
  --cf-text-dark: var(--schedule-text-dark);
  --cf-text-gray: var(--schedule-text-gray);
  --cf-border-gray: var(--schedule-border-gray);
}

.cf-content {
  padding: 1rem 0;
}

.cf-intro-section {
  margin-bottom: 2rem;
}

.cf-intro-text {
  color: var(--cf-text-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.cf-section {
  margin-bottom: 2.5rem;
}

.cf-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cf-text-dark);
  margin-bottom: 1.25rem;
}

.cf-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.cf-section-header .cf-section-title {
  margin-bottom: 0;
}

/* Program Buttons */
.cf-program-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.cf-program-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid var(--cf-border-gray);
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--cf-text-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.cf-program-btn:hover {
  background: var(--schedule-bg-hover);
  border-color: #d1d5db;
}
.cf-program-btn:hover .cf-edit-icon {
  opacity: 1;
}

.cf-program-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cf-program-dot.program-0 {
  background-color: var(--cf-0);
}
.cf-program-dot.program-1 {
  background-color: var(--cf-1);
}
.cf-program-dot.program-2 {
  background-color: var(--cf-2);
}
.cf-program-dot.program-3 {
  background-color: var(--cf-3);
}
.cf-program-dot.program-4 {
  background-color: var(--cf-4);
}

.cf-edit-icon {
  opacity: 0.5;
  margin-left: 0.25rem;
}

.cf-add-program-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  color: var(--cf-text-gray);
  cursor: pointer;
  transition: color 0.2s;
}
.cf-add-program-btn:hover {
  color: var(--cf-text-dark);
}

/* Schedule Grid */
.cf-schedule-grid {
  position: relative;
}

.cf-day-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5f6f8;
  transition: background 0.2s;
}
.cf-day-row:hover {
  background: var(--schedule-bg-light);
}

.cf-day-label {
  width: 100px;
  font-weight: 500;
  color: var(--cf-text-dark);
  font-size: 0.9rem;
}

.cf-day-timeline {
  flex: 1;
  height: 36px;
  background: var(--cf-border-gray);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.cf-day-timeline:hover {
  transform: translateY(-1px);
}

.cf-timeline-segment {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
}

.cf-day-arrow {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--cf-text-gray);
  cursor: pointer;
  transition: color 0.2s;
}
.cf-day-arrow:hover {
  color: var(--cf-text-dark);
}

.cf-time-labels {
  display: flex;
  justify-content: space-between;
  padding: 1rem 40px 0 100px;
  color: var(--cf-text-gray);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Holidays Section */
.cf-holidays-section {
  border-top: 1px solid var(--cf-border-gray);
  padding-top: 2rem;
}

.cf-add-holiday-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  color: var(--cf-text-gray);
  cursor: pointer;
  transition: color 0.2s;
}
.cf-add-holiday-btn:hover {
  color: var(--cf-text-dark);
}

.cf-holiday-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cf-holiday-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.cf-holiday-date {
  font-size: 0.9rem;
  color: var(--cf-text-dark);
  min-width: 200px;
}

.cf-holiday-program {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 15px;
  font-size: 0.85rem;
  border: 1px solid;
}

.cf-program-4-badge {
  background-color: rgba(107, 141, 214, 0.1);
  color: var(--cf-4);
  border-color: rgba(107, 141, 214, 0.3);
}

.cf-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--cf-text-gray);
  cursor: pointer;
  transition: all 0.2s;
}
.cf-btn-icon:hover {
  background: #f3f4f6;
  color: var(--cf-text-dark);
}

.cf-btn-delete-icon:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* Tooltip */
.cf-tooltip {
  position: fixed;
  background: var(--cf-text-dark);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  z-index: 1000;
  pointer-events: none;
  animation: cfFadeIn 0.15s ease-out;
}

/* Modal Styles */
.cf-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.cf-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--cf-border-gray);
}

.cf-back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  font-size: 1.25rem;
  color: var(--cf-text-dark);
  cursor: pointer;
  transition: background 0.2s;
}
.cf-back-btn:hover {
  background: #e5e7eb;
}

.cf-modal-day-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cf-text-dark);
  margin: 0;
}

.cf-modal-body {
  padding: 1.5rem;
}

.cf-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--cf-border-gray);
}

/* Preview Section */
.cf-preview-section {
  margin-bottom: 2rem;
}
.cf-preview-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cf-text-dark);
  margin-bottom: 1rem;
}

.cf-preview-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.cf-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--cf-text-gray);
}

.cf-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.cf-legend-dot.program-0 {
  background-color: var(--cf-0);
}
.cf-legend-dot.program-1 {
  background-color: var(--cf-1);
}
.cf-legend-dot.program-4 {
  background-color: var(--cf-4);
}

.cf-preview-timeline {
  height: 36px;
  background: var(--cf-border-gray);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.cf-preview-time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--cf-text-gray);
}

/* Schedule Section */
.cf-schedule-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cf-text-dark);
  margin-bottom: 1rem;
}

.cf-schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.cf-schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cf-schedule-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 40px;
  gap: 0.75rem;
  align-items: center;
}

.cf-status-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--cf-text-dark);
}

.cf-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cf-program-dropdown,
.cf-time-dropdown {
  position: relative;
}

.cf-program-dropdown {
  min-width: 200px;
}

.cf-program-select-custom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  font-size: 0.9rem;
  color: var(--cf-text-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.cf-program-select-custom:hover {
  border-color: #d1d5db;
}
.cf-program-select-custom .cf-program-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cf-program-select-custom .cf-program-select-text {
  flex: 1;
}
.cf-program-select-custom .cf-dropdown-arrow {
  color: #6B7280;
  transition: transform 0.2s;
}

.cf-program-dropdown.open .cf-program-select-custom {
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}
.cf-program-dropdown.open .cf-program-select-custom .cf-dropdown-arrow {
  transform: rotate(180deg);
}
.cf-program-dropdown.open .cf-program-options {
  display: block;
}

.cf-program-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  overflow: hidden;
}

.cf-program-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.cf-program-option:hover {
  background: #f9fafb;
}
.cf-program-option.selected {
  background: #f0f4ff;
}
.cf-program-option .cf-program-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cf-time-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  font-size: 0.9rem;
  color: var(--cf-text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  transition: all 0.2s;
}
.cf-time-select:hover {
  border-color: #d1d5db;
}
.cf-time-select:focus {
  outline: none;
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.cf-btn-delete {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  border: none;
  border-radius: 8px;
  color: #ef4444;
  cursor: pointer;
  transition: all 0.2s;
}
.cf-btn-delete:hover {
  background: #fee2e2;
}

.cf-btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem;
  background: var(--schedule-bg-hover);
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  color: var(--cf-text-gray);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.cf-btn-add:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: var(--cf-text-dark);
}

.cf-empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--cf-text-gray);
}
.cf-empty-state p {
  margin: 0;
}
.cf-empty-state p:last-child {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

@keyframes cfFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cfFadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}
.pe-main-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.pe-main-loading .pe-loading-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cf-text-gray);
}

.pe-options-area {
  margin-top: 1.5rem;
}

.pe-scrollable-list {
  max-height: 300px;
  overflow-y: auto;
}

@keyframes dndShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.dnd-skeleton-loading {
  background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%, #e0e0e0 100%);
  background-size: 200% 100%;
  animation: dndShimmer 1.5s ease-in-out infinite;
}

.dnd-skeleton-bar {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

:root {
  --roster-primary-blue: var(--schedule-primary-blue);
  --roster-active-green: var(--schedule-0);
  --roster-break-red: var(--schedule-1);
  --roster-inactive-gray: var(--schedule-neutral-gray);
  --roster-text-dark: var(--schedule-text-dark);
  --roster-text-gray: var(--schedule-text-gray);
}

.roster-content {
  padding: 1.5rem 0;
}

.activation-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  animation: rosterFadeIn 0.3s ease-out 0.1s both;
}

@keyframes rosterFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.activation-section h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--roster-text-dark);
}

.activation-section p {
  color: var(--roster-text-gray);
  margin: 0;
  font-size: 0.95rem;
}

.toggle-switch {
  position: relative;
  width: 56px;
  height: 32px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 32px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .toggle-slider {
  background-color: var(--roster-primary-blue);
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

.schedule-grid {
  animation: rosterFadeIn 0.3s ease-out 0.2s both;
}

.time-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 0 1rem 120px;
  color: var(--roster-text-gray);
  font-size: 0.8rem;
  font-weight: 500;
}

.day-row {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5f6f8;
  transition: background 0.2s;
}

.day-row:hover {
  background: #fafbfc;
}

.day-label {
  width: 120px;
  font-weight: 500;
  color: var(--roster-text-dark);
  font-size: 0.95rem;
}

.day-timeline {
  flex: 1;
  display: flex;
  position: relative;
  height: 36px;
  gap: 2px;
}

.time-block {
  flex: 1;
  background: var(--roster-inactive-gray);
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
}

.time-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.time-block.active {
  background: var(--roster-active-green);
}

.time-block.break {
  background: var(--roster-break-red);
}

.day-arrow {
  width: 40px;
  text-align: center;
  color: var(--roster-text-gray);
  cursor: pointer;
  font-size: 1.2rem;
  transition: color 0.2s;
}

.day-arrow:hover {
  color: var(--roster-primary-blue);
}

.day-status {
  width: 120px;
  text-align: right;
  color: var(--roster-text-gray);
  font-size: 0.9rem;
}

.modal-footer-custom {
  padding: 1.5rem 0;
  border-top: 1px solid #f0f2f5;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  animation: rosterFadeIn 0.3s ease-out 0.3s both;
}

.btn-custom {
  padding: 0.75rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s;
  border: none;
}

.btn-cancel {
  background: white;
  color: var(--roster-text-dark);
  border: 2px solid #e5e7eb;
}

.btn-cancel:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.btn-save {
  background: var(--roster-primary-blue);
  color: white;
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}

.btn-save:hover {
  background: #365fc7;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(65, 105, 225, 0.4);
}

.tooltip-custom {
  position: fixed;
  background: var(--roster-primary-blue);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(65, 105, 225, 0.3);
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
  animation: tooltipPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tooltipPop {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.tooltip-custom::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--roster-primary-blue);
  transform: translateX(-50%) rotate(45deg);
}

/* Day Edit Modal Styles */
.day-modal {
  border-radius: 20px;
  border: none;
  overflow: hidden;
}

.modal-header-custom {
  padding: 2rem 2.5rem;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.back-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--roster-text-dark);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.back-btn:hover {
  background: #f5f6f8;
}

.modal-day-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--roster-text-dark);
  margin: 0;
}

.modal-body-custom {
  padding: 2rem 2.5rem;
}

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

.preview-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--roster-text-dark);
  margin-bottom: 1rem;
}

.preview-legend {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--roster-text-gray);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-dot.available {
  background: var(--roster-active-green);
}

.legend-dot.unavailable {
  background: var(--roster-break-red);
}

.preview-timeline {
  display: flex;
  gap: 2px;
  height: 36px;
  margin-bottom: 0.5rem;
}

.preview-time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--roster-text-gray);
}

.schedule-section {
  background: #fafbfc;
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.schedule-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--roster-text-dark);
  margin: 0;
}

.btn-undo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--roster-text-gray);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-undo:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.schedule-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr 40px;
  gap: 0.75rem;
  align-items: center;
}

.status-dropdown,
.time-dropdown {
  position: relative;
}

.status-select,
.time-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  font-size: 0.9rem;
  color: var(--roster-text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  transition: all 0.2s;
}

.status-select {
  padding-left: 2.5rem;
  background-position: left 1rem center, right 1rem center;
  background-size: 12px, 12px;
}

.status-select.available {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' fill='%237BC944'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.status-select.unavailable {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23FF6B6B'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.status-select:hover,
.time-select:hover {
  border-color: #d1d5db;
}

.status-select:focus,
.time-select:focus {
  outline: none;
  border-color: var(--roster-primary-blue);
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.btn-delete {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  color: var(--roster-text-gray);
  transition: all 0.2s;
}

.btn-delete:hover {
  background: #fee;
  border-color: #fcc;
  color: #dc2626;
}

.btn-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: white;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  color: var(--roster-primary-blue);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-row:hover {
  background: #f8f9fc;
  border-color: var(--roster-primary-blue);
}

.apply-section {
  padding: 1.5rem;
  background: #f8f9fc;
  border-radius: 12px;
}

.apply-section p {
  font-size: 0.9rem;
  color: var(--roster-text-dark);
  margin-bottom: 1rem;
}

.day-selector {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  font-size: 0.9rem;
  color: var(--roster-text-gray);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.day-selector:hover {
  border-color: #d1d5db;
}

.day-selector:focus {
  outline: none;
  border-color: var(--roster-primary-blue);
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.modal-footer-buttons {
  padding: 1.5rem 2.5rem;
  border-top: 1px solid #f0f2f5;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

@keyframes rosterFadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}
/* Additional DND Schedule Styles */
.dnd-intro-section {
  margin-bottom: 2rem;
}

.dnd-intro-text {
  color: var(--roster-text-dark);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

.dnd-section {
  margin-bottom: 2.5rem;
}

.dnd-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--roster-text-dark);
  margin-bottom: 1.25rem;
}

.dnd-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dnd-section-header .dnd-section-title {
  margin-bottom: 0;
}

.dnd-header-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.dnd-user-selector {
  min-width: 150px;
}

.dnd-user-select {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 1rem;
  border: 1px solid var(--roster-inactive-gray);
  border-radius: 8px;
  background: white;
  font-size: 0.9rem;
  color: var(--roster-text-dark);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.dnd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.dnd-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--roster-text-gray);
}

.dnd-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dnd-legend-dot.dag {
  background-color: var(--roster-active-green);
}
.dnd-legend-dot.nacht {
  background-color: var(--roster-break-red);
}
.dnd-legend-dot.spoed {
  background-color: var(--schedule-spoed-blue);
}
.dnd-legend-dot.volgt {
  background-color: var(--roster-inactive-gray);
  border: 1px solid #ccc;
}
.dnd-legend-dot.unavailable {
  background-color: var(--schedule-unavailable-orange);
}

/* Split Timeline Styles */
.day-timeline.split-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.day-timeline.split-timeline:hover {
  transform: translateY(-1px);
}

.timeline-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.timeline-strip.callflows-strip {
  height: 25%;
  min-height: 10px;
}
.timeline-strip.dnd-strip {
  height: 75%;
  min-height: 30px;
}

.timeline-segment {
  position: absolute;
  top: 0;
  height: 100%;
}

/* Absences Section */
.dnd-absences-section {
  border-top: 1px solid var(--roster-inactive-gray);
  padding-top: 2rem;
}

.dnd-add-absence-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  color: var(--roster-text-gray);
  cursor: pointer;
  transition: color 0.2s;
}
.dnd-add-absence-btn:hover {
  color: var(--roster-text-dark);
}

.absence-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.absence-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.absence-date {
  font-size: 0.9rem;
  color: var(--roster-text-dark);
  min-width: 220px;
}

.absence-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 15px;
  font-size: 0.85rem;
  background-color: rgba(255, 140, 66, 0.1);
  color: var(--schedule-unavailable-orange);
  border: 1px solid rgba(255, 140, 66, 0.3);
}

.absence-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--schedule-unavailable-orange);
}

.absence-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--roster-text-gray);
  cursor: pointer;
  transition: all 0.2s;
}
.absence-btn-icon:hover {
  background: #f3f4f6;
  color: var(--roster-text-dark);
}

.absence-btn-delete:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */
.forest {
  color: #055862;
}

.sea {
  color: #069090;
}

.sunshine {
  color: #FDC602;
}

.dawn {
  color: #F7A430;
}

.rush {
  color: #EF7E1A;
}

.signal {
  color: #EA5815;
}

.matte {
  color: #F2E6CF;
}

.brown {
  color: #4A4A4A;
}

.forest-100 {
  color: #cddee0;
}

.forest-200 {
  color: #9bbcc0;
}

.forest-300 {
  color: #699ba1;
}

.forest-400 {
  color: #377981;
}

.forest-500 {
  color: #055862;
}

.forest-600 {
  color: #054f58;
}

.forest-700 {
  color: #04464e;
}

.forest-800 {
  color: #043e45;
}

.forest-900 {
  color: #03353b;
}

.bg-forest-100 {
  background-color: #cddee0;
}

.bg-forest-200 {
  background-color: #9bbcc0;
}

.bg-forest-300 {
  background-color: #699ba1;
}

.bg-forest-400 {
  background-color: #377981;
}

.bg-forest-500 {
  background-color: #055862;
}

.bg-forest-600 {
  background-color: #054f58;
}

.bg-forest-700 {
  background-color: #04464e;
}

.bg-forest-800 {
  background-color: #043e45;
}

.bg-forest-900 {
  background-color: #03353b;
}

.sea-100 {
  color: #cde9e9;
}

.sea-200 {
  color: #9bd3d3;
}

.sea-300 {
  color: #6abcbc;
}

.sea-400 {
  color: #38a6a6;
}

.sea-500 {
  color: #069090;
}

.sea-600 {
  color: #058282;
}

.sea-700 {
  color: #057373;
}

.sea-800 {
  color: #046565;
}

.sea-900 {
  color: #045656;
}

.bg-sea-100 {
  background-color: #cde9e9;
}

.bg-sea-200 {
  background-color: #9bd3d3;
}

.bg-sea-300 {
  background-color: #6abcbc;
}

.bg-sea-400 {
  background-color: #38a6a6;
}

.bg-sea-500 {
  background-color: #069090;
}

.bg-sea-600 {
  background-color: #058282;
}

.bg-sea-700 {
  background-color: #057373;
}

.bg-sea-800 {
  background-color: #046565;
}

.bg-sea-900 {
  background-color: #045656;
}

.sunshine-100 {
  color: #fff4cc;
}

.sunshine-200 {
  color: #fee89a;
}

.sunshine-300 {
  color: #fedd67;
}

.sunshine-400 {
  color: #fdd135;
}

.sunshine-500 {
  color: #fdc602;
}

.sunshine-600 {
  color: #e4b202;
}

.sunshine-700 {
  color: #ca9e02;
}

.sunshine-800 {
  color: #b18b01;
}

.sunshine-900 {
  color: #987701;
}

.bg-sunshine-100 {
  background-color: #fff4cc;
}

.bg-sunshine-200 {
  background-color: #fee89a;
}

.bg-sunshine-300 {
  background-color: #fedd67;
}

.bg-sunshine-400 {
  background-color: #fdd135;
}

.bg-sunshine-500 {
  background-color: #fdc602;
}

.bg-sunshine-600 {
  background-color: #e4b202;
}

.bg-sunshine-700 {
  background-color: #ca9e02;
}

.bg-sunshine-800 {
  background-color: #b18b01;
}

.bg-sunshine-900 {
  background-color: #987701;
}

.dawn-100 {
  color: #fdedd6;
}

.dawn-200 {
  color: #fcdbac;
}

.dawn-300 {
  color: #fac883;
}

.dawn-400 {
  color: #f9b659;
}

.dawn-500 {
  color: #f7a430;
}

.dawn-600 {
  color: #de942b;
}

.dawn-700 {
  color: #c68326;
}

.dawn-800 {
  color: #ad7322;
}

.dawn-900 {
  color: #94621d;
}

.bg-dawn-100 {
  background-color: #fdedd6;
}

.bg-dawn-200 {
  background-color: #fcdbac;
}

.bg-dawn-300 {
  background-color: #fac883;
}

.bg-dawn-400 {
  background-color: #f9b659;
}

.bg-dawn-500 {
  background-color: #f7a430;
}

.bg-dawn-600 {
  background-color: #de942b;
}

.bg-dawn-700 {
  background-color: #c68326;
}

.bg-dawn-800 {
  background-color: #ad7322;
}

.bg-dawn-900 {
  background-color: #94621d;
}

.rush-100 {
  color: #fce5d1;
}

.rush-200 {
  color: #f9cba3;
}

.rush-300 {
  color: #f5b276;
}

.rush-400 {
  color: #f29848;
}

.rush-500 {
  color: #ef7e1a;
}

.rush-600 {
  color: #d77117;
}

.rush-700 {
  color: #bf6515;
}

.rush-800 {
  color: #a75812;
}

.rush-900 {
  color: #8f4c10;
}

.bg-rush-100 {
  background-color: #fce5d1;
}

.bg-rush-200 {
  background-color: #f9cba3;
}

.bg-rush-300 {
  background-color: #f5b276;
}

.bg-rush-400 {
  background-color: #f29848;
}

.bg-rush-500 {
  background-color: #ef7e1a;
}

.bg-rush-600 {
  background-color: #d77117;
}

.bg-rush-700 {
  background-color: #bf6515;
}

.bg-rush-800 {
  background-color: #a75812;
}

.bg-rush-900 {
  background-color: #8f4c10;
}

.signal-100 {
  color: #fbded0;
}

.signal-200 {
  color: #f7bca1;
}

.signal-300 {
  color: #f29b73;
}

.signal-400 {
  color: #ee7944;
}

.signal-500 {
  color: #ea5815;
}

.signal-600 {
  color: #d34f13;
}

.signal-700 {
  color: #bb4611;
}

.signal-800 {
  color: #a43e0f;
}

.signal-900 {
  color: #8c350d;
}

.bg-signal-100 {
  background-color: #fbded0;
}

.bg-signal-200 {
  background-color: #f7bca1;
}

.bg-signal-300 {
  background-color: #f29b73;
}

.bg-signal-400 {
  background-color: #ee7944;
}

.bg-signal-500 {
  background-color: #ea5815;
}

.bg-signal-600 {
  background-color: #d34f13;
}

.bg-signal-700 {
  background-color: #bb4611;
}

.bg-signal-800 {
  background-color: #a43e0f;
}

.bg-signal-900 {
  background-color: #8c350d;
}

.matte-100 {
  color: #fcfaf5;
}

.matte-200 {
  color: #faf5ec;
}

.matte-300 {
  color: #f7f0e2;
}

.matte-400 {
  color: #f5ebd9;
}

.matte-500 {
  color: #f2e6cf;
}

.matte-600 {
  color: #dacfba;
}

.matte-700 {
  color: #c2b8a6;
}

.matte-800 {
  color: #a9a191;
}

.matte-900 {
  color: #918a7c;
}

.bg-matte-100 {
  background-color: #fcfaf5;
}

.bg-matte-200 {
  background-color: #faf5ec;
}

.bg-matte-300 {
  background-color: #f7f0e2;
}

.bg-matte-400 {
  background-color: #f5ebd9;
}

.bg-matte-500 {
  background-color: #f2e6cf;
}

.bg-matte-600 {
  background-color: #dacfba;
}

.bg-matte-700 {
  background-color: #c2b8a6;
}

.bg-matte-800 {
  background-color: #a9a191;
}

.bg-matte-900 {
  background-color: #918a7c;
}

.bg-forest, .btn-forest {
  background-color: #055862;
}

.bg-sea, .btn-sea {
  background-color: #069090;
}

.bg-sunshine, .btn-sunshine {
  background-color: #FDC602;
}

.bg-dawn, .btn-dawn {
  background-color: #F7A430;
}

.bg-rush, .btn-rush {
  background-color: #EF7E1A;
}

.bg-signal, .btn-signal {
  background-color: #EA5815;
}

.bg-matte, .btn-matte {
  background-color: #F2E6CF;
}

.bg-brown, .btn-brown {
  background-color: #4A4A4A;
}

.text-forest {
  color: #055862;
}

.text-sea {
  color: #069090;
}

.text-sunshine {
  color: #FDC602;
}

.text-dawn {
  color: #F7A430;
}

.text-rush {
  color: #EF7E1A;
}

.text-signal {
  color: #EA5815;
}

.text-matte {
  color: #F2E6CF;
}

.text-brown {
  color: #4A4A4A;
}

.btn {
  --bs-btn-hover-color: #fff;
}

.btn-matte-300 {
  --bs-btn-color: #4A4A4A;
  --bs-btn-bg: #f7f0e2;
  --bs-btn-border-color: none;
  --bs-btn-hover-color: #069090;
}

.btn-sea {
  --bs-btn-color: #fff;
  --bs-btn-border-color: #069090;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #058282;
  --bs-btn-hover-border-color: #057373;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #043e45;
  --bs-btn-active-border-color: #045656;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #cde9e9;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6abcbc;
  --bs-gradient: none;
}

.btn-forest {
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #054f58;
  --bs-btn-active-bg: #043e45;
  --bs-btn-active-border-color: #03353b;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #699ba1;
}

.btn-sunshine {
  --bs-btn-color: #4a4a4a;
  --bs-btn-hover-bg: #fedd67;
  --bs-btn-active-bg: #ca9e02;
  --bs-btn-active-border-color: #b18b01;
  --bs-btn-hover-color: #4a4a4a;
  --bs-btn-active-color: #4a4a4a;
}

.btn-dawn {
  --bs-btn-hover-bg: #f9b659;
  --bs-btn-active-bg: #F7A430;
  --bs-btn-hover-color: #4a4a4a;
  --bs-btn-active-color: #4a4a4a;
}

.btn-rush {
  --bs-btn-hover-bg: #fedd67;
  --bs-btn-active-bg: #EF7E1A;
  --bs-btn-hover-color: #4a4a4a;
  --bs-btn-active-color: #4a4a4a;
}

.btn-signal {
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #ee7944;
  --bs-btn-active-bg: #EA5815;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

body {
  font-family: "Open Sans", sans-serif;
  background: rgb(155, 211, 211);
  background: linear-gradient(335deg, rgb(155, 211, 211) 0%, rgb(247, 240, 226) 40%);
}

#wrap {
  margin-top: 80px;
}

#wrap .menu li a {
  color: unset !important;
  font-weight: unset !important;
}

.menu li:hover {
  border-bottom: 1px solid #FDC602;
}

.dropdown-menu {
  --bs-dropdown-link-color: #4A4A4A;
  --bs-highlight-bg: #38a6a6;
  --bs-dropdown-link-hover-bg: #38a6a6;
  --bs-dropdown-divider-bg: #4a4a4a;
  --bs-dropdown-link-active-bg: #069090;
  --bs-btn-active-border-color: #069090;
}

table, table tr {
  --bs-table-color: #4a4a4af1;
  --bs-table-hover-bg: #cde9e9 !important;
}

table td, table th {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  --bs-table-color: #4a4a4af1;
  --bs-table-hover-bg: #cde9e9 !important;
}

.pagination {
  --bs-pagination-active-bg:#055862 !important;
  --bs-pagination-active-color:#FFFFFF !important;
  --bs-pagination-active-border-color:#055862;
  --bs-pagination-color:#4A4A4A !important;
}

.page-item a.page-link {
  color: #4A4A4A !important;
}

.page-item a.page-link.active {
  color: #FFFFFF !important;
}

.page-link:hover {
  text-decoration: none !important;
}

.nav-link {
  --bs-nav-link-font-weight: 300;
}

.log-text {
  font-size: 0.75rem;
}

.accordion-button {
  background-color: #fcfaf5;
  color: #4A4A4A;
}

.accordion-button:not(.collapsed) {
  background-color: #faf5ec;
  color: #4A4A4A;
}

.list-group-sortable-connected .list-group-item {
  cursor: grab;
}

.rounded-3 {
  --falcon-border-radius-lg: 0.5rem;
}

.rounded-4 {
  --falcon-border-radius-xl: 1rem;
}

.card {
  border-radius: 1rem !important;
}

.card-header {
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
}

.card-footer, .card-body:last-child {
  border-bottom-right-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}

.font-sans-serif {
  --falcon-font-sans-serif: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  --falcon-font-sans-serif: 'Open Sans', sans-serif;
}

.btn {
  --falcon-btn-box-shadow: none !important;
  --falcon-btn-active-shadow: none !important;
  line-height: 1.8rem;
}

.form-control {
  border-color: #069090;
  line-height: 1.8rem;
}

.form-select {
  border-color: #069090;
  line-height: 1.8rem;
}

.turbo-progress-bar {
  background: rgb(6, 144, 144);
  background: linear-gradient(335deg, rgb(6, 144, 144) 0%, rgb(5, 88, 98) 100%);
}

.dropdown-menu {
  font-size: 1rem;
}

.nav-link.active {
  font-weight: 400;
}

.dub-subscription-icon {
  max-width: 144px !important;
}

.dub-quickstart-icons {
  height: 4rem;
  width: 4rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.dub-quickstart-icons svg {
  max-height: 3.2rem !important;
  margin-left: auto;
  margin-right: auto;
}

.dub-quickstart:hover {
  background-color: #cde9e9;
}

.dub-quickstart:hover a {
  text-decoration: none !important;
}

.dub-quickstart:hover svg {
  fill: #043e45;
}

:root {
  --falcon-border-radius: 0.5rem !important;
  --falcon-border-radius-lg: 0.5rem !important;
  --falcon-font-sans-serif: 'Open Sans', sans-serif;
  --falcon-btn-box-shadow: none !important;
  --falcon-btn-active-shadow: none !important;
  --falcon-input-placeholder-color-global: #6abcbc;
  --falcon-progress-gradient: linear-gradient(335deg, rgba(6,144,144,1) 0%, rgba(5,88,98,1) 100%);
  --falcon-dropdown-font-size: 1rem;
}

.usage-class-100 {
  background-color: #055862 !important;
}

.usage-class-105 {
  background-color: #699ba1 !important;
}

.usage-class-107 {
  background-color: #377981 !important;
}

.usage-class-110 {
  background-color: #069090 !important;
}

.usage-class-120 {
  background-color: #fedd67 !important;
}

.usage-class-130 {
  background-color: #fee89a !important;
}

.usage-class-150 {
  background-color: #ef7e1a !important;
}

.usage-class-160 {
  background-color: #f5b276 !important;
}

.usage-class-180 {
  background-color: #f7a430 !important;
}

.usage-class-190 {
  background-color: #d77117 !important;
}

.usage-class-200 {
  background-color: #055862 !important;
}

.usage-class-300 {
  background-color: #6abcbc !important;
}

.usage-class-310 {
  background-color: #fdc602 !important;
}

.usage-class-320 {
  background-color: #fdd135 !important;
}

.usage-class-330 {
  background-color: #EA5815 !important;
}

.usage-class-1000 {
  background-color: #f9b659 !important;
}

.toast {
  --falcon-toast-border-radius: 0.5rem;
}

.inline-icon {
  height: 1rem;
  width: 1rem;
  margin-bottom: 3px;
  margin-right: 3px;
}

.flag {
  opacity: 0.5;
}

.btn-danger {
  --falcon-btn-color: #fff;
  --falcon-btn-bg: #EA5815;
  --falcon-btn-border-color: #EA5815;
  --falcon-btn-hover-color: #fff;
  --falcon-btn-hover-bg: #ee7944;
  --falcon-btn-hover-border-color: #ee7944;
  --falcon-btn-focus-shadow-rgb: 234, 85, 112;
  --falcon-btn-active-color: #fff;
  --falcon-btn-active-bg: #EA5815;
  --falcon-btn-active-border-color: #ee7944;
  --falcon-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --falcon-btn-disabled-color: #fff;
  --falcon-btn-disabled-bg: #8c350d;
  --falcon-btn-disabled-border-color: #8c350d;
}

.btn-outline-primary {
  --falcon-btn-color: #055862;
  --falcon-btn-bg: unset;
  --falcon-btn-border-color: #055862;
  --falcon-btn-hover-color: #043e45;
  --falcon-btn-hover-bg: #9bbcc0;
  --falcon-btn-hover-border-color: #043e45;
  --falcon-btn-focus-shadow-rgb: 234, 85, 112;
  --falcon-btn-active-color: #04464e;
  --falcon-btn-active-bg: unset;
  --falcon-btn-active-border-color: #04464e;
  --falcon-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --falcon-btn-disabled-color: #fff;
  --falcon-btn-disabled-bg: #043e45;
  --falcon-btn-disabled-border-color: #043e45;
}

.order-complete-party {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* prettier-ignore */
:root,
[data-bs-theme=light] {
  --falcon-body-font-family: 'Open Sans', sans-serif;
  --falcon-bg-navbar-glass: rgba(247, 240, 226, 1);
}

.nav-link {
  --falcon-nav-link-font-weight: 300;
  --falcon-nav-link-font-size: 1rem;
}

body {
  background: linear-gradient(335deg, rgb(155, 211, 211) 0%, rgb(247, 240, 226) 40%);
}

.nav-icon {
  width: 16px;
  height: 16px;
  font-weight: 300;
}

.wrapper {
  width: 100%;
  aspect-ratio: 16/9;
}

.enable {
  color: #7ed321;
}

.invalid {
  border-color: #dc3545;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e63757'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e63757' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.15625rem) center;
  background-size: calc(0.75em + 0.3125rem) calc(0.75em + 0.3125rem);
}

.action-svg {
  width: 24px;
  height: 24px;
}

.info-svg {
  width: 16px;
  height: 16px;
}

@media (min-width: 576px) {
  .bundle-svg, .subscription-svg {
    width: 48px;
    height: 48px;
  }
}
@media (min-width: 1400px) {
  .bundle-svg, .subscription-svg {
    width: 96px;
    height: 96px;
  }
}

/*# sourceMappingURL=user.css-4f8a81077a25b05402afc65e2edcbe69.map */