.command_center_mobile{
    padding: 1rem;
    width: 22rem;
    /* background-color:white; */
    margin: 10px;
}

.door_name {
  font-size: 25px;
  font-weight: 600;
}

.image_wrap {
  /* width: 70%; */
  width: 100%;
  height: 100%;
  border: 2px solid;
  border-radius: 10px;
  margin-top: 16px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

@media screen and (min-width: 768px) {
  .image_wrap {
    /* width: 50%; */
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-radius: 10px;
    margin-top: 16px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
}

@media screen and (max-width: 468px) {
  .image_wrap {
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-radius: 10px;
    margin-top: 16px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
}

.image_wrap img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.commands{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}


.commands button,span{
    margin-right: 3px;
    margin-top: 3px
}

.hidden_td {
  display: none !important;
}

/* FullCalendar Mobile Responsiveness Fixes */
@media screen and (max-width: 768px) {
  /* Fix overlapping day headers in week view */
  .fc-timegrid-col-header .fc-col-header-cell {
    min-width: 60px !important;
    padding: 2px !important;
  }
  
  .fc-timegrid-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
    font-size: 11px !important;
    line-height: 1.2 !important;
    padding: 2px 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Ensure day names and dates don't overlap */
  .fc-col-header-cell .fc-col-header-cell-cushion {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 40px !important;
  }
  
  /* Make day names smaller on mobile */
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-name {
    font-size: 10px !important;
    font-weight: bold !important;
    margin-bottom: 2px !important;
  }
  
  /* Make dates smaller on mobile */
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-number {
    font-size: 12px !important;
    font-weight: normal !important;
  }
  
  /* Adjust toolbar for mobile */
  .fc-header-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .fc-header-toolbar .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  
  /* Make buttons smaller on mobile */
  .fc-button {
    font-size: 12px !important;
    padding: 4px 8px !important;
    margin: 2px !important;
  }
  
  /* Ensure time slots are readable */
  .fc-timegrid-slot-label {
    font-size: 10px !important;
    padding: 2px !important;
  }
  
  /* Adjust event display on mobile */
  .fc-event {
    font-size: 11px !important;
    padding: 1px 2px !important;
  }
}

@media screen and (max-width: 480px) {
  /* Even more aggressive mobile fixes for very small screens */
  .fc-timegrid-col-header .fc-col-header-cell {
    min-width: 50px !important;
  }
  
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-name {
    font-size: 9px !important;
  }
  
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-number {
    font-size: 11px !important;
  }
  
  .fc-button {
    font-size: 11px !important;
    padding: 3px 6px !important;
  }
  
  /* Hide some toolbar elements on very small screens */
  .fc-header-toolbar .fc-toolbar-chunk:last-child {
    display: none !important;
  }
}

/* Additional aggressive fixes for remaining overlap issues */
@media screen and (max-width: 768px) {
  /* Force minimum column widths to prevent overlap */
  .fc-timegrid-col-header .fc-col-header-cell,
  .fc-timegrid-col .fc-timegrid-col-frame {
    min-width: 65px !important;
    max-width: none !important;
  }
  
  /* Ensure the calendar container has proper overflow handling */
  .fc-view-harness {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Make the day header text even more compact */
  .fc-col-header-cell .fc-col-header-cell-cushion {
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 1px !important;
    min-height: 35px !important;
  }
  
  /* Ultra-compact day names */
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-name {
    font-size: 9px !important;
    margin-bottom: 1px !important;
    letter-spacing: -0.5px !important;
  }
  
  /* Ultra-compact dates */
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-number {
    font-size: 10px !important;
    letter-spacing: -0.5px !important;
  }
  
  /* Ensure rightmost columns don't get cut off */
  .fc-timegrid-col-header .fc-col-header-cell:last-child,
  .fc-timegrid-col:last-child .fc-timegrid-col-frame {
    margin-right: 5px !important;
  }
  
  /* Add horizontal scroll indicator */
  .fc-view-harness::-webkit-scrollbar {
    height: 6px !important;
  }
  
  .fc-view-harness::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
  }
  
  .fc-view-harness::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 3px !important;
  }
}

@media screen and (max-width: 480px) {
  /* Most aggressive fixes for very small screens */
  .fc-timegrid-col-header .fc-col-header-cell,
  .fc-timegrid-col .fc-timegrid-col-frame {
    min-width: 55px !important;
  }
  
  .fc-col-header-cell .fc-col-header-cell-cushion {
    font-size: 13px !important;
    line-height: 1.0 !important;
    min-height: 30px !important;
  }
  
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-name {
    font-size: 8px !important;
    letter-spacing: -1px !important;
  }
  
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-number {
    font-size: 9px !important;
    letter-spacing: -1px !important;
  }
  
  /* Ensure horizontal scrolling works properly */
  .fc-view-harness {
    min-width: 400px !important;
  }
}

/* Final aggressive fixes to eliminate any remaining overlap */
@media screen and (max-width: 768px) {
  /* Force single letter day names to prevent overlap */
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-name {
    font-size: 8px !important;
    font-weight: bold !important;
    margin-bottom: 0 !important;
    letter-spacing: -1px !important;
    text-transform: uppercase !important;
  }
  
  /* Make dates as compact as possible */
  .fc-col-header-cell .fc-col-header-cell-cushion .fc-day-number {
    font-size: 9px !important;
    font-weight: normal !important;
    letter-spacing: -1px !important;
  }
  
  /* Ensure absolutely no overlap with aggressive spacing */
  .fc-timegrid-col-header .fc-col-header-cell {
    min-width: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .fc-col-header-cell .fc-col-header-cell-cushion {
    padding: 2px 1px !important;
    margin: 0 !important;
    min-height: 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Add subtle borders to visually separate columns */
  .fc-timegrid-col-header .fc-col-header-cell {
    border-right: 1px solid #ddd !important;
  }
  
  .fc-timegrid-col-header .fc-col-header-cell:last-child {
    border-right: none !important;
  }
}

.fs-container {
  background: #000;
  width: 100%;
  height: 100%;
}
.fs-container img,
.fs-container video,
.fs-container canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}