html, body {
  /* height: 100%; */
  margin: 0;
  user-select: none; }

.modal-body::-webkit-scrollbar {
  width: 80px !important; }

.modal-body::-webkit-scrollbar-button {
  width: 80px;
  height: 80px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center; }

.modal-body::-webkit-scrollbar-button:vertical:start:decrement {
  /* background-image: url("/bootstrap-icons/icons/arrow-up-square-fill.svg"); */
  background-image: url("/public/images/arrow-up.png");
  background-size: 80px 80px; }

.modal-body::-webkit-scrollbar-button:vertical:end:increment {
  /* background-image: url("/bootstrap-icons/icons/arrow-down-square.svg"); */
  background-image: url("/public/images/arrow-down.png");
  background-size: 80px 80px; }

::-webkit-scrollbar-button:vertical:end:decrement {
  display: none; }

::-webkit-scrollbar-button:vertical:start:increment {
  display: none; }

.modal-body::-webkit-scrollbar-track {
  display: none !important; }

.modal-body::-webkit-scrollbar-thumb {
  display: none !important; }

.modal-body::-webkit-scrollbar-thumb:hover {
  background: 00beed !important; }

.main-container {
  display: flex;
  flex-direction: column;
  height: 100%; }

.mw150 {
  min-width: 150px; }

.mw200 {
  min-width: 200px; }

.mw250 {
  min-width: 250px; }

.mw400 {
  min-width: 400px; }

header {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  font-size: 1.5rem;
  min-height: 100px;
  max-height: 170px; }

.transcript {
  font-style: italic; }

.status-text {
  font-weight: bold; }

.beedle-hightext {
  height: 160px; }

.beedle-bigcontrol {
  height: 110px;
  font-size: 1.5rem; }

.beedle-navbar {
  font-size: 1.6rem;
  background-color: lightblue;
  min-width: 100%; }

.beedle-status {
  font-size: 1.6rem;
  background-color: lightblue;
  color: #000;
  width: 100%; }

:target {
  scroll-margin-top: 150px; }

.beedle-control-buttons {
  min-width: 140px; }

.console-selector-button {
  width: fit-content;
  min-width: 200px; }

.select-console-button {
  width: 100%;
  min-width: 200px; }

.high {
  font-size: x-large;
  min-height: 60px !important; }

.key-locked {
  display: none !important; }

.key-disabled {
  display: block !important;
  background-color: #bbb !important; }

.key-unlocked {
  display: block !important; }

.music-playing {
  display: none; }

.readonly-style {
  background-color: #e9ecef;
  border: 1px solid #aaa;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); }

#console {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 2;
  padding: 1rem; }

.beedle {
  background-color: var(--bs-primary-bg-subtle) !important; }

.beedle-console {
  background-color: var(--bs-primary-bg-subtle) !important; }

.beedle-core-app {
  font-style: italic;
  display: flex;
  justify-content: space-between;
  /* Push content to opposite ends */
  align-items: center;
  /* Vertically align items */ }

.bg-rose {
  background-color: #ef529e !important;
  /* A rose-like color */
  color: white !important;
  /* Ensures good contrast */ }

.console-header {
  background-color: #00beed !important; }

.sortable-selected {
  background-color: #4169e1 !important;
  color: #fff !important; }

footer {
  flex: .51;
  display: flex;
  height: 100px;
  justify-content: center; 
  margin-top: 1rem;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  position: relative; }

.bg-light-blue {
  background-color: lightblue !important; }

.juke {
  background-color: #6b20b7; }

#progress-container {
  height: 5px;
  background-color: #dee2e6;
  margin: 1rem 0;
  position: relative;
  flex-grow: 1; }

.date-time {
  text-align: right; }

.dev-control-link {
  text-decoration: none;
  color: inherit; }

.dev-control {
  display: inline-block; }

.modal {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center; }

.modal-content {
  background-color: #fff;
  padding: 5px;
  border-radius: 10px;
  text-align: center;
  flex-direction: column; }

#messages-list, #contacts-list {
  flex-grow: 1; }


/* decorative stuff */
.wood-finish-border {
  border: 10px solid transparent;
  padding: 1px;
  /*border-image: url('/public/images/wood-panel-rounded.png') 30 stretch;*/
  border-image: url("/public/images/controlPanelStainless.png") 30 stretch;
  overflow: hidden;
  /* Ensures the content inside also gets rounded corners -- hum?*/ }

.wood-finish-thin-border {
  border: 10px solid transparent;
  background-color: none;
  padding: 1px;
  /*border-image: url('/public/images/wood-panel-rounded.png') 30 stretch;*/
  border-image: url("/public/images/controlPanelStainless.png") 30 stretch; }

.wood-finish-thin-border * {
  /* Target all child elements */
  background-color: inherit;
  /* Inherit the background color */ }

.wood-finish-bg {
  border-radius: 3px;
  padding: 1px;
  background: url("/public/images/controlPanelStainless.png") top/cover no-repeat;
  overflow: hidden;
  /* Ensures the content inside also gets rounded corners -- hum?*/ }

.wood-finish-bg * {
  /* Target all child elements */
  background-color: inherit;
  /* Inherit the background color */ }

.dropdown-divider-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 0.9em;
  color: black; /* Bootstrap's muted text color */
  background: linear-gradient(to bottom, #eee, #fff);
  padding: 0;
  white-space: nowrap;
  border-top: 1px solid #6c757d; /* Add topline border with muted text color */
}

/* .dropdown-divider-with-text::before,
.dropdown-divider-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #dee2e6; 
  margin: 0;
} */

.happy-path, .new-messages-show-happy {
  background-image: linear-gradient(to top right, #08991e, #08be1e) !important; }

.big-icon {
  height: 1.6em; }

.big-icon-button {
  background-color: white;
  width: 4rem;
  /* Adjust the button width */
  height: 4rem;
  /* Adjust the button height */
  padding: 0;
  /* Remove any additional padding */
  display: flex;
  justify-content: center;
  align-items: center; }

.message {
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  display: flex-center;
  font-size: 2rem; }

.unread-message {
  color: #1e1e00;
  background-color: #FFCF56;
  border-color: #FFCF56;
  border: 3px solid #FFCF56;
  font-weight: bold;
  border-radius: 10px; }

.single-message {
  background-color: var(--bs-primary-bg-subtle);
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  display: flex-center;
  font-size: 3rem;
  font-weight: bold; }

.unread-message-new-text {
  color: #FFCF56;
  font-size: 1rem; }

.messages-list {
  padding: 3px !important; }

.message-container {
  background-color: var(--bs-primary-bg-subtle);
  margin: 2px;
  padding: 2px; }

.messages-container {
  background-color: var(--bs-primary-bg-subtle);
  padding: 0px; }

.messages-list {
  padding: 3px !important; }

.volume-style {
  background: #28a745;
  min-width: 80px; }

.big-slider-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: #28a745;
  margin-top: -20px; }

.big-label {
  color: #000;
  font-size: x-large;
  font-weight: bold; }

.list-group-item-action:active, .list-group-item-action:focus, .list-group-item-action:hover {
  background-color: #fff !important; }

.list-group-item.selected {
  background-color: #001eed !important;
  color: #fff !important; }

.volume-style {
  background: #28a745;
  color: #fff;
  min-width: 80px; }

.music-control-style {
  background: #dc3545;
  color: #fff; }

.button-h-container {
  display: flex;
  align-items: center;
  justify-content: space-around; }

.beedle-title {
  font-size: 6vh;
  font-weight: bold;
  color: #00beed;
  text-align: center; }

.big-button, .big-button-1, .big-button-2, .big-button-3, .big-button-6, .narrow-big-button {
  background-color: #4169e1;
  display: inline-block;
  /* Makes the buttons sit side by side */
  background-image: radial-gradient(circle at top left, #497bfc, #3758d1);
  border: none;
  border-radius: 12px;
  /* Slightly increased the radius for smoother edges */
  padding: 1rem 1rem;
  margin: 0.5rem 0.5rem;
  cursor: pointer;
  min-width: 200px;
  width: 40%;
  height: 15vh;
  /* Dynamic height */
  max-height: 110px;
  font-size: clamp(16px, 4.5vw, 48px);
  white-space: normal;
  align-content: space-around;
  max-width: 66%;
  z-index: 10;
  color: #fff;
  /* Enhanced shadows for 3D effect */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px black;
  /* Animation */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-image 0.3s ease-in-out;
  user-select: none !important; }

.narrow-big-button {
  background-color: #4169e1;
  color: #fff;
  padding: 0.5rem 1rem;
  min-width: 50px;
  max-width: 90px;
  min-height: 100px;
  font-size: xx-large;
  font-weight: bold;
  align-content: space-around; }

.btn.disabled, .btn:disabled {
  background-image: none;
  box-shadow: none;
  border: #ccc0;
  background-color: #ccc0;
  color: #ccc0;
  text-shadow: none; }

.big-button-1 {
  width: calc(80% - 20px); }

.big-button-2 {
  width: calc(45% - 20px); }

.big-button-3 {
  width: calc(30% - 20px); }

.big-button-3-width-only {
  width: calc(30% - 20px); }

.big-button-6 {
  width: calc(15% - 20px); }

/* Override Bootstrap styles for dropdown-toggle when used with big-button */
.big-button.dropdown-toggle {
  border: none;
  /* Remove border */ }

.big-button.selected, .big-button-1.selected, .big-button-2.selected, .big-button-3.selected, .big-button-6.selected, .narrow-big-button.selected,
.big-button:active, .big-button-1:active, .big-button-2:active, .big-button-3:active, .big-button-6:active, .narrow-big-button:active {
  color: #FFCF56 !important;
  background-image: linear-gradient(to top right, #37beed, #497bfc);
  font-weight: bold !important;
  transform: scale(0.9) translate(5px, -2px);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), inset 0px -4px 2px rgba(0, 0, 0, 0.2); }

.big-button:focus,
.big-button-1:focus,
.big-button-2:focus,
.big-button-3:focus,
.big-button-6:focus {
  color: #fff !important; }

.huge-button {
  font-size: xx-large;
  font-weight: bold;
  min-height: 150px !important;
  min-width: 300px !important;
  width: 80% !important; }

.nav-tabs .nav-link.active {
  background-color: #fff !important;
  color: #0000be !important; }

.beedle-tab-bg {
  background-color: #beedff !important; }

.tight-margins {
  margin: 2px !important;
  padding: 2px !important; }

.tight-padding {
  padding: 1% !important; }

.zero-padding {
  padding: 0px !important; }

.squeezable {
  overflow: hidden; }

@keyframes flashAnimation {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.5; } }

.button-pulse {
  background-color: #be1e1e !important;
  background-image: none !important;
  animation: flashAnimation 2s infinite; }

.text-pulse {
  color: #be1e1e !important;
  animation: flashAnimation 2s infinite; }

.text-beedle-yellow {
  color: #FFCF56 !important; }

.filepond-wrapper {
  width: 100%;
  height: auto; 
}

.filepond--panel-root {
  border: 2px solid #bed;
  border-radius: 12px !important; 
}

.filepond-idle {
  font-size: 0.875rem;
  display: block;   /* forces wrapping */
  text-align: center;
}
.audio-preview {
  padding-top: 30px;
  width: 66%;
  align-self: center; }

@media screen and (min-width: 1920px) {
  .audio-preview {
    height: 120px;
    width: 33%;
    transform: scale(2);
    /* Scales the control for better touchscreen interaction */
    transform-origin: center center;
    /* Ensures the scaling is centered */ } }

@media screen and (max-height: 480px) {
  .beedle-title {
    font-size: 6vh; }
  .modal-title {
    font-size: 5vh !important; } }

/**
 *  Modal styles
 */

.modal-90width {
  min-width: 90vw;
  max-width: 90vw;
  width: 90vw; 
}

.modal-80width {
  min-width: 80vw;
  max-width: 80vw;
  width: 80vw; }

.modal-fullwidth {
  min-width: 80vw;
  max-width: none;
  width: 100vw; }

.modal-fullwidth .modal-content {
  min-height: 50vh; }

.modal-fullscreen .modal-content {
  min-height: 50vh; }

#contacts-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }

.console-selector-list > li {
  list-style: none;
  position: relative;
  padding-left: 1.5em;
}

.console-selector-list > li::before {
  content: '';
  position: absolute;
  left: 0;
}

.console-selector-list > li.current-console::before {
  content: '✔'; 
}

.current-console {
  font-weight: bold;
  color: #00beed; 
}




.console_view {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 480px;
  max-height: 480px; }

  /* messing with this at your own risk -- this can screw image size scaling etc which may screw the remote click stuff */
.console_view_image_container {
  
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

#console-view-image {
  top: 0;
  left: 0;
  height: 100%;
  object-fit: contain;
  max-height: 480px; }

.console_text {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%); }

/*
*  media based styling
*/
@media (min-width: 768px) {
  /* Adjust this breakpoint as needed */
  .contact-column {
    flex: 0 0 45%;
    /* Each contact takes up half the width on larger screens */
    max-width: 45%; } }

/* mobile */
@media (max-width: 767px) {
  .console_view {
    height: 240px;
    max-height: 240px; }
  .console-view-image {
    max-height: 240px; }
  .contact-column {
    flex: 0 0 100%;
    /* Each contact takes up full width on smaller screens */
    max-width: 100%; }
  .big-button-sm, .big-button-1-sm, .big-button-2-sm, .big-button-3-sm, .big-button-6-sm {
    width: 80%;
    min-width: 80%;
    height: 8vh;
    font-size: 80%; } }

@media (max-width: 1200px) {
  .big-button,
  .big-button-1,
  .big-button-2 {
    font-size: xxx-large; }
  .big-button-3 {
    font-size: xx-large; }
  .big-button-6 {
    font-size: x-large; } }

/* Medium screens  */
@media (min-width: 1200px) {
  .big-button, .message-header {
    min-width: 200px; }
  .message-new {
    color: #FFCF56;
    font-size: 1.5rem; }
  .wood-finish-border {
    border: 50px solid transparent;
    padding: 1px;
    border-image: url("/public/images/controlPanelStainless.png") 30 stretch;
    overflow: hidden;
    /* Ensures the content inside also gets rounded corners */ } }

/* Large screens (starting from 1920px) */
@media (min-width: 1920px) {
  .big-button, .message-header {
    min-width: 250px;
    font-size: xxx-large;
    font-weight: bolder; }
  .big-button-6 {
    font-size: x-large !important;
    font-weight: bolder; }
  .message-new {
    color: #FFCF56;
    font-size: 1.5rem; } }

/* photoAlbum */
/* Default styles for all screen sizes (mobile behavior) */
#albumDetails {
  min-width: 100%; }

/* #album-manager-menu .col-md-4 {
  position: static;
  top: auto;
  height: auto; } */

/* Styles for desktop screens (md and larger) -- keeps the left pane always visible when scrolling*/
@media (min-width: 768px) {

        
/* #album-manager-menu .col-md-4  { */
  /* position: sticky; */
  /* top: 50px; */
  /* height: fit-content; } }   */

#photoAlbumLeftMenu {
  position: sticky !important;
  top: 50px;
  height: fit-content; } }

.selected-photo {
  border: 3px dashed #007bff;
  background-color: rgba(0, 123, 255, 0.2); }

.selected-photo-album-list-item {
  border: 2px dashed #007bff;
  background-color: #00be00; }

.photo-album-list-item {
  border: 2px solid black;
  background-color: #f0f0f0; }

.editable-field {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0.3rem;
  background: rgba(0,0,0,0.04); /* subtle, can adjust */
  cursor: pointer;
  transition: 
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
  outline: none;
  display: inline-block;
  min-width: 8em;
  min-height: 2em;
}
.editable-field:hover {
  border-color: #007bff;
  background: rgba(0,0,0,0.1); /* slightly darker on hover */
  box-shadow: 0 0 5px rgba(0,123,255,0.5); }

.editable-field:focus {
  outline: none;
  border-bottom: 2px solid #007bff; }

/* Set fixed height for image container and maintain aspect ratio with cropping */
.photo-card {
  overflow: hidden;
  /* Ensure any overflow is hidden if the image exceeds the container */ }

.photo-thumbnail {
  height: 20vh;
  /* Set height to 1/5 of the viewport height */
  width: 100%;
  /* Ensure the image takes full width of the card */
  object-fit: cover;
  /* Crop the image to fill the container while maintaining aspect ratio */ }

/*
 * FilePond Custom Styles
 */
.filepond--drop-label {
  /* color: #4c4e53;  */
  color: white;
  font-size: 1.5rem !important; 
}

.filepond--label-action {
  text-decoration-color: #babdc0; }

.filepond--panel-root {
  background-color: #edf0f4; }

/**
 * Page Styles
 */
.filepond--root {
  width: 340px;
  margin: 0 auto; 
}
.black-on-white-transparent {
  color: #000;
  background: rgba(255,255,255,0.8);
  padding: 0.5em 1em;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.12);
  font-weight: bold;
  /* Optional: add a subtle border for extra contrast */
  border: 1px solid rgba(0,0,0,0.08);
}

@keyframes pulse-glow {
  0% {
    text-shadow: 0 0 5px #ffc107, 0 0 10px #ffc107, 0 0 20px #ffc107;
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 15px #ffc107, 0 0 30px #ffc107, 0 0 45px #ffc107;
    transform: scale(1.05);
  }
  100% {
    text-shadow: 0 0 5px #ffc107, 0 0 10px #ffc107, 0 0 20px #ffc107;
    transform: scale(1);
  }
}

.pulse-glow {
  animation: pulse-glow 1s ease-in-out infinite;
}

.form-web-input {
  font-size: large;
  font-weight: bold; }

.form-web-helper {
  font-size: medium;
  font-style: italic; }