@tailwind base;
@tailwind components;
@tailwind utilities;

.Popover-tip {
  display: none !important;
}

body {
  overflow-x: hidden;
}


@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Thin.ttf");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Light.ttf");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Regular.ttf");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Medium.ttf");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/Inter-Black.ttf");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
body {
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  line-height: normal;
}
.no-hover:hover {
text-decoration: none !important;
  /* Add any other styles you want to reset */
}


.multiselect-ele { outline: 2px solid red !important; }
.editing-ele { outline: 1px solid #0061FF !important; } 
.selected-ele { outline: 1px dashed #0061FF !important; }

.pointer-events-all {
  pointer-events: all;
}
.pointer-events-none {
  pointer-events: none;
}

#overlay-container.Editor__overlay-container,
#hover-overlay-container.Editor__overlay-container,
#highlight-overlay-container.Editor__overlay-container,
#suggestion-overlay-container.Editor__overlay-container {
  position: absolute;
  pointer-events: none;
  cursor: pointer;
}

#overlay-container.Editor__overlay-container {
  z-index: 2001;
}

#suggestion-overlay-container.Editor__overlay-container {
  z-index: 2002;
}

#hover-overlay-container.Editor__overlay-container,
#highlight-overlay-container.Editor__overlay-container {
  z-index: 2000;
}

/* notification */
.react-toast-notifications__container {
  z-index: 10000000 !important;
}
.react-toast-notifications__toast--success{
  @apply bg-dhiSuccess-700 shadow-none !important;
}
.react-toast-notifications__toast--success .react-toast-notifications__toast__icon-wrapper{
  @apply bg-dhiSuccess-900 !important;
}
.react-toast-notifications__toast--error{
  @apply bg-dhiDanger-700 shadow-none !important;
}
.react-toast-notifications__toast--error .react-toast-notifications__toast__icon-wrapper{
  @apply bg-dhiDanger-900 !important;
}
.react-toast-notifications__toast__icon-wrapper{
  @apply flex items-center justify-center;
}
.react-toast-notifications__toast__content{
  @apply text-high text-xs leading-normal flex items-center !important;
}
.react-toast-notifications__toast__dismiss-button svg {
  fill: rgba(255,255,255,60%) !important;
}
.Popover{
  margin-left: -15px;
  padding: 20px;
  z-index: 99999;
}
.__react_component_tooltip{
  @apply bg-dhiGray-60 px-4 py-2.5 text-xs font-medium rounded-[3px] text-dhiGray-800 !important;
  width: 180px;
  box-shadow: 0 0 10px 2px rgba(0,0,0,20%);
}
.place-right.__react_component_tooltip::after{
  border-right-width: 6px !important;
  border-right-color: #FFFFFF !important;
}
.place-top.__react_component_tooltip::after{
  border-top-width: 6px !important;
  border-top-color: #FFFFFF !important;
}
.place-bottom.__react_component_tooltip::after{
  border-bottom-width: 6px !important;
  border-bottom-color: #FFFFFF !important;
}
.place-left.__react_component_tooltip::after{
  border-left-width: 6px !important;
  border-left-color: #FFFFFF !important;
}

.loading-message-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.react-international-phone-country-selector-button {
  min-width: max-content !important;
}