@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
.message_pool{ margin-top: 5px;}
.no-highlight{ color:inherit; }
#key-list { list-style: none; margin:0; padding:0;}
#key-list li{ padding:25px 0 25px 60px; margin: 1px 0; position:relative;  }
#key-list .fa{ font-size:50px; position:absolute; top:30px; left:0;   }
#key-list .check_out { background:#fdf9f4; }
#key-list .check_out .fa{ color:#f5e9da; }
#key-list .check_in { background:#dddddc; }
#key-list .check_in .fa{   color:#9d9c9c; }

#key-list .requested_by { background:#c4d2fc; }
#key-list .requested_by .fa{ color:#a8bcf4; }

.concierge-checkins .row { position:relative; border-top: 3px solid rgba(66, 118, 164,0.2); border-left: 3px solid rgba(66, 118, 164,0.2); border-right: 3px solid rgba(66, 118, 164,0.2); padding-bottom: 20px;  }
.concierge-checkins .row:hover{ background:rgba(66, 118, 164,0.1); }
.concierge-checkins .row h6{ font-size:18px;  color:rgb(66, 118, 164); border-bottom: 2px solid rgba(66, 118, 164,0.2); margin-left: -15px; margin-right: -15px;  display:block; }
.concierge-checkins .titlespan{ position:absolute; font-size:35px; position: relative; color:rgba(66, 118, 164,0.1); left:20px; display:none;}
.concierge-checkins .drops{ position:absolute; right:20px; bottom:0px;  min-height: 20px;  display:none;}
.concierge-checkins .drops .dropdown{ float:left; }
.concierge-checkins .row:hover .titlespan{ display:block;}
.concierge-checkins .row:hover .drops{ display:block; }
.concierge-checkins .box-toggler{ clear:both; list-style:none; padding: 10px; display:none; border-top: 3px solid rgba(66, 118, 164,0.2); }

@media print{

  .arrival-print *{ font-size:14px!important; }
  .arrival-print .arrival-print .h6{  }
  .arrival-print .col-lg-3, .arrival-print .box-toggler{ width:50%; float:left;  }
  .arrival-print .drops{ display:none; }
  .arrival-print .titlespan{ display:none; }
  .arrival-print .print-half{ width:50%!important; float:left; }
  .arrival-print .print-large{ width:100%!important; float:none!important; }
  .concierge-print{display:block !important;}
  .concierge-print *{ font-size:14px!important; }
  .hide-print { display: none; }
}

#hotel-availability .arr, #hotel-availability .dep, #hotel-availability .occ, #hotel-availability .today{ width:100%; height:100%; color:#fff; background-size: cover !important; }
#hotel-availability li .occ, #hotel-availability li .today, #hotel-availability .owner-guest, #hotel-availability .owner-maintenance, #hotel-availability .owner-personal, #hotel-availability .owner-partner, #hotel-availability .owner-no{width:10px; height:10px; display:inline-block; }
#hotel-availability .occ{ background: #2a7de2; }
#hotel-availability .owner-guest{ background: #07b0e6; }
#hotel-availability .owner-maintenance{ background: #084ca0; }
#hotel-availability .owner-personal{ background: #9370db; }
#hotel-availability .owner-partner{ background: #ff5a60; }
#hotel-availability .owner-no{ background: #f08f23; }

#hotel-availability .arr{ background: url(/images/calendar/pvrpv-arr.jpg) no-repeat top right; color: #838383; }
#hotel-availability .today, #hotel-availability .today.occ{ background: #77DD77; }
#hotel-availability .dep{ background: url(/images/calendar/pvrpv-dep.jpg) no-repeat top left; }
#hotel-availability .arr.dep{ background: #2a7de2; color:#fff;  background: #2a7de2 url(/images/calendar/pi-arrdep.png) no-repeat center;   background-size:inherit !important;}

#hotel-availability .calendar-owner-unavailable .occ{ background:  #f08f23; }
#hotel-availability .calendar-owner-unavailable .arr{ background: url(/images/calendar/no-arr.jpg) no-repeat top right; color: #838383; }
#hotel-availability .calendar-owner-unavailable .dep{ background: url(/images/calendar/no-dep.jpg) no-repeat top left; }
#hotel-availability .calendar-owner-unavailable .arr.dep{ background: #f08f23; color:#fff;  background: #2a7de2 url(/images/calendar/pi-arrdep.png) no-repeat center;   background-size:inherit !important;}

#hotel-availability .calendar-owner-guest .occ{ background:  #07b0e6; }
#hotel-availability .calendar-owner-guest .arr{ background: url(/images/calendar/ownerguest-arr.jpg) no-repeat top right; color: #838383; }
#hotel-availability .calendar-owner-guest .dep{ background: url(/images/calendar/ownerguest-dep.jpg) no-repeat top left; }
#hotel-availability .calendar-owner-guest .arr.dep{ background: #07b0e6; color:#fff;  background: #07b0e6 url(/images/calendar/pi-arrdep.png) no-repeat center;   background-size:inherit !important;}

#hotel-availability .calendar-owner-personal .occ{ background:  #9370db; }
#hotel-availability .calendar-owner-personal .arr{ background: url(/images/calendar/ownerpersonal-arr.jpg) no-repeat top right; color: #838383; }
#hotel-availability .calendar-owner-personal .dep{ background: url(/images/calendar/ownerpersonal-dep.jpg) no-repeat top left; }
#hotel-availability .calendar-owner-personal .arr.dep{ background: #9370db; color:#fff;  background: #9370db url(/images/calendar/pi-arrdep.png) no-repeat center;   background-size:inherit !important;}

#hotel-availability .calendar-owner-maintenance .occ{ background:  #084ca0; }
#hotel-availability .calendar-owner-maintenance .arr{ background: url(/images/calendar/owner-arr.jpg) no-repeat top right; color: #838383; }
#hotel-availability .calendar-owner-maintenance .dep{ background: url(/images/calendar/owner-dep.jpg) no-repeat top left; }
#hotel-availability .calendar-owner-maintenance .arr.dep{ background: #084ca0; color:#fff;  background: #07b0e6 url(/images/calendar/pi-arrdep.png) no-repeat center;   background-size:inherit !important;}

#hotel-availability .calendar-partner .occ{ background:  #ff5a60; }
#hotel-availability .calendar-partner .arr{ background: url(/images/calendar/airbnb-arr.jpg) no-repeat top right; color: #838383; }
#hotel-availability .calendar-partner .dep{ background: url(/images/calendar/airbnb-dep.jpg) no-repeat top left; }
#hotel-availability .calendar-partner .arr.dep{ color:#fff;  background: #9ff5a60 url(/images/calendar/pi-arrdep.png) no-repeat center;   background-size:inherit !important;}

#hotel-availability .table tr > th{ text-align: center; }
#hotel-availability .table > tbody > tr > td{ padding:0; width:30px; height:30px; }
#hotel-availability .table tr > .weekday{ background:none; }
#hotel-availability .table tr > .other-month{ background:none; }


.table-scheduler2 td > div.am{ background-color: #7cbfb6 !important; padding: 5px 10px; display: inline-block; margin: 5px; }
.table-scheduler2 td > div.pm{ background-color: #f9d877 !important; padding: 5px 10px; display: inline-block; margin: 5px; }
.table-scheduler2 td > div.cancelled{ background-color: #d03c29 !important; padding: 5px 10px; display: inline-block; margin: 5px; }
.table-scheduler2 td > div.switch{ border-top: 1px solid red !important;  padding: 5px 10px; display: inline-block; margin: 5px; }
.table-scheduler th,.table-scheduler td{ font-size: 10px !important; padding: 0!important; }
.table-scheduler td{ border-left: 1px solid #e7ecf1; }
.table-scheduler td > div{ padding: 5px !important; text-align: center; min-height: 25px; }
.table-scheduler td > div .add-plus{ display:none; }
.table-scheduler td > div:hover .add-plus{ display:block; }
.table-scheduler td > div i.am{ color: #7cbfb6 !important; }
.table-scheduler td > div i.pm{ color: #f9d877 !important; }
.table-scheduler td > div i.cancelled{ color: #d03c29 !important; }
.table-scheduler td > div i.switch{ border-top: 1px solid red !important; }
.table-scheduler td div.switch{ border-top: 2px solid red !important; width: 60%; text-align: center; margin: 0 auto; }
.table-scheduler td > div div.am{ color: #7cbfb6 !important; }
.table-scheduler td > div div.pm{ color: #f9d877 !important; }
.table-scheduler td > div div.cancelled{ color: #d03c29 !important; }
.table-scheduler .schedule-title{ width:280px; padding: 10px important;}
.table-scheduler .arr{ background: url(/images/calendar/arr.jpg) no-repeat top right; color: #838383; }
.table-scheduler .today, #hotel-availability .today.occ{ background: orange; }
.table-scheduler .dep{ background: url(/images/calendar/dep.jpg) no-repeat top left; }
.table-scheduler .arr.dep{ background: url(/images/calendar/arrdep.jpg) no-repeat top left; background-color: #2a7de2;}
.table-scheduler .occ{ background: #2a7de2; }

.employee-record{ table-layout: fixed; width: 100%; }
.employee-record td{ padding-bottom: 0.75em !important; padding-right: 8px; vertical-align: top;}
.employee-record tbody :first-child{ margin-top: -0.3em !important; }

.zebra { border-color: gray !important; }
th.zebra, td.zebra { border-left: 1.5px gray solid !important; }


.disabled-link { pointer-events: none; color: #ccc; cursor: not-allowed !important;}
.hide-element { display: none; }
tr.departure{ background-color: #fbdcdc !important; }
tr.arrival{ background-color: #e4fee4 !important; }
.dashboard-scheduler td > div.departure{ background-color: #fbdcdc !important; padding: 5px 10px; display: inline-block; margin: 5px; }
.dashboard-scheduler td > div.arrival{ background-color: #e4fee4 !important; padding: 5px 10px; display: inline-block; margin: 5px; }
.tox-tinymce-aux {
  z-index: 1000000000 !important;
}
td.limit-4 span {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview{
  text-align: center;
  padding: 30px 0;
  margin: 10px 0;
}
.overview p{
  font-size: 30px;
  font-weight: bold;
}
.overview small{
  font-size: 15px;
  font-weight: 300;
}

.card {
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  background-color: #ffffff;
}

.card:hover {
  transform: scale(1.05);
}

.card-body {
  padding: 20px;
}

textarea {
  resize: vertical;
}

#dropzone {
  text-align: start;
}

#dropzone.dragover {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100px;
  border: 2px dashed #66ccff;
  border-color: #66ccff;
  color: #66ccff;
  text-align: center;
}

.flow-file{
  float:unset !important;
  list-style-type: none;
}

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100vh;
  flex-direction: column;
}

.image-position {
  background-color: rgba(2, 111, 254, 0.5);
  border-radius: 50%;
  padding: 5px; 
  width: 40px; 
  height: 40px;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: rgb(255, 255, 255);
  font-weight: bold; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  position: absolute; 
  top: 0; 
  left: 0.3; 
  z-index: 1000;
}

.compact .message-content {
  display: none;
}
.compact.expanded .message-content {
  display: inline;
}
.shortcode-button {
  display: inline-block;
  padding: 10px;
  background-color: #007bff;
  color: white;
  cursor: grab;
  margin: 5px;
  border-radius: 5px;
  font-size: 0.8em;
}
.shortcode-button:hover {
  background-color: #0056b3;
}

.date-picker[readonly] {
 background-color: #ffffff;
 cursor: pointer;
}

.bg-facebook {
  background-color: #3b5998;
  color: white;
}
.bg-instagram {
  background-color: #e4405f;
  color: white;
}
.bg-tiktok {
  background-color: #000000;
  color: white;
}

/* CSS para botones flotantes en el lado derecho de la pantalla */
.floating-buttons {
  position: fixed;
  right: 0;
  bottom: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.floating-buttons .btn {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease, background-color 0.3s ease; 
  padding-left: 15px;
}

.floating-buttons .btn:hover {
  background-color: #007bff;
  color: white;
  width: 180px;         /* Cambia de width fijo a automático */
  min-width: 50px;     /* Mantiene el tamaño mínimo igual al original */
  max-width: 180px;    /* Establece un tamaño máximo para el botón */
  border-radius: 25px;
  padding-right: 10px; /* Asegura espacio para el texto */
}

.floating-buttons .btn i {
  flex-shrink: 0; 
}

.floating-buttons .btn span.label {
  display: inline-block;
  white-space: normal;
  margin-left: 10px;
  margin-right: 5px; /* Añade margen a la derecha */
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 130px;  /* Controla el tamaño máximo del texto */
  overflow: hidden;
  text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
}

.floating-buttons .btn:hover span.label {
  opacity: 1;
  transform: translateX(0); 
}

.btn-container {
  position: relative; /* Necesario para posicionar la alerta respecto al botón */
}

.floating-alert {
  position: absolute;
  top: -30px;
  right: 0;
  background-color: #007bff;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap; 
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  max-width: calc(100vw - 20px); 
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0; /* Ocultar por defecto */
  transform: translateY(-10px); /* Animación inicial */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */
}

.floating-alert.show {
  opacity: 1; /* Mostrar la alerta */
  transform: translateY(0); /* Animación hacia su posición original */
}

@media (max-width: 768px) {
  .floating-buttons {
    display: none;
  }
}

.padded-content {
  padding: 0 20px 0 0;
}
@media (max-width: 768px) {
  .padded-content {
    padding: 0;
  }
}