html {
  -webkit-text-size-adjust: 100%;
  height: calc(100% + env(safe-area-inset-top));
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -ms-overflow-style: scrollbar;
  height: 100vh;
  width: 100vw;
}

#root {
  height: 100vh;
  width: 100vw;
  display: flex;
}

[data-testid='styledscrollbar']::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

[data-testid='styledscrollbar']::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

[data-testid='styledscrollbar']::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.3);
}

/* Right drawer transition & animation */
.right-drawer-transition {
  transition: width 800ms ease-in-out;
}
.right-drawer-collapsed {
  width: 42px;
}
.right-drawer-hover {
  width: 60px;
}
.right-drawer-open {
  width: 90vw;
}

@keyframes right-drawer-flash {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.right-drawer-flash {
  animation: right-drawer-flash 1s infinite;
}

/* Backoffice drawer gradient text */
.bo-drawer-gradient-text {
  font-family: IBMPlexSans_600SemiBold, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.16px;
  margin-left: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(to right, #7b61ff, #ff4465, #f28cff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Backoffice drawer item hover */
.bo-drawer-item-hover:hover {
  background-color: #f3fbff;
}

/* Backoffice content right column — responsive widths */
@media (min-width: 1440px) {
  .bo-content-right-col {
    min-width: 304px !important;
    max-width: 304px !important;
  }
}
@media (min-width: 1728px) {
  .bo-content-right-col {
    min-width: 368px !important;
    max-width: 368px !important;
  }
}

/* Global web styles */
html,
body {
  font-family: IBMPlexSans_400Regular, sans-serif;
}
input {
  outline: none !important;
}
:focus-visible {
  outline: none !important;
}
div[role='slider'] {
  padding-bottom: 0 !important;
}
.draggable-item {
  z-index: 99999;
}

/* This file should only be used if absolutely necessary since it just applies for web*/
@import url('~react-datepicker/dist/react-datepicker.css');
html,
body {
  font-family: IBMPlexSans_400Regular, sans-serif;
  width: 100%;
  min-height: 100%;
}

input {
  outline: none !important;
}

:focus-visible {
  outline: none !important;
}

div[role='slider'] {
  /* padding-top: 0 !important; */
  padding-bottom: 0 !important;
}

.draggable-item {
  z-index: 99999;
}

.ProseMirror {
}

/* Placeholder of rich text editor (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
  color: #76868e;
  content: attr(data-placeholder);
  float: left;
  height: 0px;
  pointer-events: none;
  font-family: 'IBMPlexSans_400Regular', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.ProseMirror p.is-editor-emptyError:first-child::before {
  color: #be164f;
  content: attr(data-placeholder);
  float: left;
  height: 0px;
  pointer-events: none;
  font-family: 'IBMPlexSans_400Regular_Italic', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.react-datepicker {
  border: transparent;
  border-radius: 0rem;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
  flex-direction: column;
}
.react-datepicker__header {
  text-align: center;
  background-color: #ffff;
  border-bottom: transparent;
  border-top-left-radius: 0rem;
  position: relative;
}
.react-datepicker__day-names {
  width: auto;
  justify-content: space-around;
  display: flex;
}
.react-datepicker__month-container {
  width: auto;
  height: 100%;
  display: flex;
  flex-shrink: 1;
  flex-direction: column;
  padding-right: 8px;
}
.react-datepicker__month {
  margin: 0rem;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
}
.react-datepicker__week {
  width: 100%;
  justify-content: space-between;
  align-content: center;
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
}
.react-datepicker__day--selected {
  color: transparent;
  background: transparent;
  align-items: center;
  align-content: center;
}

.react-datepicker__day:hover {
  background: transparent;
}

.react-datepicker__day--keyboard-selected {
  background-color: transparent;
  border-radius: 0px;
}

.react-datepicker__children-container {
  padding-left: 16px;
  padding-right: 8px;
  width: fit-content;
}
.react-datepicker__day--disabled {
  cursor: not-allowed;
}