@import url(/bukeala-static/v-1755208036/styles/panelita/type.css);
@import url(/bukeala-static/v-1755208036/styles/custom/backoffice/template/animate.css);

[data-notify=container] {
  height: auto;
  max-height: 70vh;
  width: 500px;
  /* max-width: 540px; */
  display: flex!important;
  margin-left: auto!important;
  margin-right: 14px!important;
  margin-top: 72px !important;
  border-radius: 4px;
  background-color: var(--notify-bg-color, var(--color-n0));
  padding:0!important;
  z-index: 10600 !important;
  font-family: var(--font-family);
  transition: all .3s ease-in-out!important;
}

[data-notify=container] button[data-notify="dismiss"] {
  width: 24px;
  height: 24px;
  background-image: url(/bukeala-static/images/icons/panelita/close.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: center;
  background-color: transparent;
  border: none;
}

[data-notify=container].toast.error-icon,
[data-notify=container].toast.delete-icon {
  --notify-bg-color: var(--color-r50);
}

[data-notify=container].toast.save-icon,
[data-notify=container].toast.wifi-icon,
[data-notify=container].toast.info-icon,
[data-notify=container].toast.pause-icon,
[data-notify=container].toast.block-icon {
  --notify-bg-color: var(--color-b50);
}

[data-notify=container].toast.warning-icon {
  --notify-bg-color: var(--color-y50);
}

[data-notify=container].toast.success-icon {
  --notify-bg-color: var(--color-g50);
}

[data-notify=container].with-actions {
  width: 418px;
  box-shadow: 0px 12px 40px rgba(16, 24, 64, 0.16);
}

[data-notify=content] {
  display: flex;
  position: relative;
  width: 100%;
  height: inherit;
  overflow: hidden;
  padding: 16px;
}

.with-actions [data-notify=content] {
  flex-wrap: wrap;
}

[data-notify=text] {
  flex-grow: 2;
  max-width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}

.with-actions [data-notify=text] {
  max-height: 330px;
}

[data-notify=title] {
  text-align: left;
  color: var(--notify-text-color)
}

.toast.error-icon,
.toast.delete-icon  {
  --notify-text-color: var(--color-r600);
}

.toast.save-icon,
.toast.wifi-icon,
.toast.info-icon,
.toast.pause-icon,
.toast.block-icon  {
  --notify-text-color: var(--color-b600);
}

.toast.warning-icon {
  --notify-text-color: var(--color-y700);
}

.toast.success-icon {
  --notify-text-color: var(--color-g600);
}

[data-notify=message] {
  text-align: left;
  margin-top: 8px;
  overflow: hidden auto;
  color: var(--color-n700);
  font-size: 14px;
  font-weight: 400;
  display: inline-block;
}

.toast.warning-icon {
  color: var(--color-n900);
}

.with-actions [data-notify=message] {
  color: var(--color-n700);
}

[data-notify=message]:empty {
  margin: 0;
}

[data-notify=message] ul {
  list-style-type: disc;
  list-style-position: inside;
  margin: .5em 0;
}

[data-notify=message] li span {
  font-weight: 500;
}

[data-notify=container] .actions {
  height: auto;
  flex-basis: 100%;
  display: flex;
  gap: 16px;
  /* en las llamadas a bukealaNotify siempre aparece primero la acción primaria */
  flex-direction: row-reverse;
  justify-content: flex-start;
  /* override appNew.css */
  margin: 16px 0 0 0;
}

[data-notify=container] .actions .action {
  height: 32px;
  width: auto;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  user-select: none;
}

/* [data-notify=container] .actions .action + .action {
  margin-left: 16px;
} */

[data-notify=container] .actions .action {
  border-color: var(--color-n400);
  color: var(--color-n700);
  border-radius: 4px;
}

[data-notify=container] .actions .action:only-child,
[data-notify=container] .actions .action:nth-child(1) {
  border-color: var(--color-b400);
  background-color: var(--color-b400);
  color: var(--color-n0);
}

[data-notify=container] #saveBtn.btn-loading {
  background:url(/bukeala-static/images/custom/backoffice/template/loading-grey.gif) no-repeat center center;
  background-size: 25px 25px;
  color:transparent !important;
  pointer-events:none !important;
  text-shadow:none !important;	
  position: relative;
}
/*
[data-notify=container] #saveBtn.btn-loading::before, [data-notify=container] #saveBtn.btn-loading::after {
  position: absolute;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 100%;
  top: 11px;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
}

[data-notify=container] #saveBtn.btn-loading::before {
  left: 8px;
  animation-name: goright;
}

[data-notify=container] #saveBtn.btn-loading::after {
  left: 46px;
  animation-name: goleft;
}

@keyframes goright {
  from {
    transform: translateX(0) scale(1);
  }
  
  25% {
    transform: translateX(21px) scale(1.3);
  }
  
  50% {
    transform: translateX(42px) scale(1);
  }
  
  75% {
    transform: translateX(21px) scale(0.8);
  }
  
  100% {
     transform: translateX(0) scale(1);
  }
}

@keyframes goleft {
  from {
    transform: translateX(0) scale(1);
  }
  
  25% {
    transform: translateX(-21px) scale(0.8);
  }
  
  50% {
    transform: translateX(-42px) scale(1);
  }
  
  75% {
    transform: translateX(-21px) scale(1.4);
  }
  
  100% {
     transform: translateX(0px) scale(1);
  }
}
*/
[data-notify=container] #saveBtn.success {
  position: relative;
  transition: all .5s ease;
}

[data-notify=container] #saveBtn.success::after {
  display: none;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  justify-content: center;
  align-items: center;
  content: 'check';
  font-family: 'Material Icons';
  font-size:16px;
  background: var(--color-b400);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  transition: all .5s ease;
}

[data-notify=container] #saveBtn.success::after {
	display: flex;
}

[data-notify=container] .actions [data-notify=dismiss] {
  display: flex!important;
  position: relative!important;
  right: unset!important;
  top: unset!important;
}

/** íconos **/
[data-notify=icon] {
  width: 24px;
  height: 24px;
  margin-top: -2px;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center;
  background-color: transparent;
}

[data-notify=icon].block-icon {
  background-image: url(/bukeala-static/images/icons/panelita/block.svg);
}

[data-notify=icon].delete-icon {
  background-image: url(/bukeala-static/images/icons/panelita/delete.svg);
}

[data-notify=icon].error-icon {
  background-image: url(/bukeala-static/images/icons/panelita/error_outline_black.svg);
}

[data-notify=icon].info-icon {
  background-image: url(/bukeala-static/images/icons/panelita/info.svg);
}

[data-notify=icon].lock-icon {
  background-image: url(/bukeala-static/images/icons/panelita/lock.svg);
}

[data-notify=icon].pause-icon {
  background-image: url(/bukeala-static/images/icons/panelita/pause.svg);
}

[data-notify=icon].save-icon {
  background-image: url(/bukeala-static/images/icons/panelita/save.svg);
}

[data-notify=icon].success-icon {
  background-image: url(/bukeala-static/images/icons/panelita/check_circle_outline.svg);
}

[data-notify=icon].unlock-icon {
  background-image: url(/bukeala-static/images/icons/panelita/lock_open.svg);
}

[data-notify=icon].warning-icon {
  background-image: url(/bukeala-static/images/icons/panelita/warning.svg);
}

[data-notify=icon].wifi-icon {
  background-image: url(/bukeala-static/images/icons/panelita/wifi.svg);
}

[data-notify=icon].mail-icon {
  background-image: url(/bukeala-static/images/icons/panelita/mail_outline.svg);
}

[data-notify=icon].calendar-check-icon {
  background-image: url(/bukeala-static/images/icons/panelita/calendar-check-outline.svg);
}

[data-notify=icon].room-icon {
  background-image: url(/bukeala-static/images/icons/panelita/meeting_room.svg);
}


/** rojo **/
[data-notify=icon].error-icon,
[data-notify=icon].delete-icon {
  filter: var(--filter-r500);
}

/** azul **/
[data-notify=icon].save-icon,
[data-notify=icon].wifi-icon,
[data-notify=icon].info-icon,
[data-notify=icon].lock-icon,
[data-notify=icon].unlock-icon,
[data-notify=icon].pause-icon,
[data-notify=icon].block-icon,
[data-notify=icon].mail-icon,
[data-notify=icon].calendar-check-icon
 {
  filter: var(--filter-b600);
}

/** amarillo **/
[data-notify=icon].warning-icon {
  filter: var(--filter-y700);
}

/** verde **/
[data-notify=icon].success-icon {
  filter: var(--filter-g400);
}

@media screen and (max-width: 600px) {
  [data-notify=container] {
    width: calc(100vw - 52px);
    margin: 0!important;
  }
}