@import '~suneditor/dist/css/suneditor.min.css';
@import "~slick-carousel/slick/slick.css";
@import "~slick-carousel/slick/slick-theme.css";
@import "~fluid-player/src/css/fluidplayer.css";

@import 'src/styles/fluidplayer.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Heebo&display=swap');

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--color-black);
  font-family: 'Heebo', sans-serif;
  background-color: var(--color-white);
  font-weight: 400;
}
a, button {
  transition: 0.3s;
}
i.fi {
  display: inline-block;
}

/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--background-input) inset !important;
}

:root {
  --max-width: 1100px;
  --mobile-screen: 768px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
  --font-poppins: 'Poppins', sans-serif;

  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 255, 255, 255;
  --background-end-rgb: 255, 255, 255;
  --background-input: #ffffff;

  --background-color: white;

  --primary-glow: conic-gradient(from 180deg at 50% 50%,
      #16abff33 0deg,
      #0885ff33 55deg,
      #54d6ff33 120deg,
      #0071ff33 160deg,
      transparent 360deg);
  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0));

  --tile-start-rgb: 239, 245, 249;
  --tile-end-rgb: 228, 232, 233;
  --tile-border: conic-gradient(#00000080,
      #00000040,
      #00000030,
      #00000020,
      #00000010,
      #00000010,
      #00000080);

  --callout-rgb: 238, 240, 241;
  --callout-border-rgb: 172, 175, 176;
  --card-rgb: 180, 185, 188;
  --card-border-rgb: 131, 134, 135;

  --card-border: #e8e8e8;
  --primary-color: rgb(249 115 22);
  --red-gradient: linear-gradient(180deg, #FC0000 0%, #B00000 100%);
  --bg-gradient: linear-gradient(180deg, #ffffff 0%, #fff4ee  100%);
  --color-black: ;
  --color-white: #fff;
  --bg-grey: #eee;
  --bg-grey-300: #dcdcdc;

  --text-color: #000;
}

html[data-theme=dark] {
  color-scheme: dark;

  --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;

  --background-color: black;

    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
    --secondary-glow: linear-gradient(to bottom right,
        rgba(1, 65, 255, 0),
        rgba(1, 65, 255, 0),
        rgba(1, 65, 255, 0.3));

    --tile-start-rgb: 2, 13, 46;
    --tile-end-rgb: 2, 5, 19;
    --tile-border: conic-gradient(#ffffff80,
        #ffffff40,
        #ffffff30,
        #ffffff20,
        #ffffff10,
        #ffffff10,
        #ffffff80);

    --callout-rgb: 20, 20, 20;
    --callout-border-rgb: 108, 108, 108;
    --card-rgb: 100, 100, 100;
    --card-border-rgb: 200, 200, 200;

    --card-border: #2D2D2D;
    --color-black: #fff;
    --color-white: #000;
    --bg-grey: #222222;
    --background-input: #171514;
    --bg-grey-300: #3a3a3a;
    --bg-gradient: linear-gradient(180deg, #222222 0%, #1D140E 100%);

    --text-color: #fff;
}

@layer components {
  .bg-primary {
    background-color: var(--primary-color);
  }
  .bg-input {
    background-color: var(--background-input) !important;
  }
  .text-primary {
    color: var(--primary-color) !important;
  }
  .text-normal {
    word-break: break-word;
    color: var(--text-color);
  }
  .border-primary {
    border-color: var(--primary-color);
  }
  .bg-red-gradient {
    background: var(--red-gradient);
  }
  .border-2 {
    border: 2px solid var(--card-border);
  }
  .border-bottom-1 {
    border-bottom: 1px solid var(--card-border);
  }
  .border-bottom-2 {
    border-bottom: 2px solid var(--card-border);
  }
  .ring-input {
    --tw-ring-color: var(--primary-color);
  }
  .img-cover {
    object-fit: cover;
  }
  .bg-grey {
    background-color: var(--bg-grey);
  }
  .color-black {
    color: var(--color-black);
  }
  .bg-gradient {
    background: var(--bg-gradient)
  }
  .gird-responsive {
    @apply 3xl:!grid-cols-8 4xl:!grid-cols-12;
  }
}

@layer base {
  a {
    @apply font-semibold text-orange-600 hover:text-primary
  }
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  th, td {
    padding: 15px;
  }
}

.slick-dots li {
  margin: 0;
  padding: 0;
}
.slick-dots li button:before
{
    font-size: 10px;
    color: white;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: white;
}

[hidden] {
  display: none !important;
}

.sun-editor * {
  overflow: hidden;
}

.sun-editor-editable, .sun-editor {
  background-color: transparent !important;
  border: none !important;
  margin: 0;
  font-size: 1rem;
  font-family: Heebo,sans-serif;
  @apply px-2.5;
}

.logo_holder img {
  max-width: 200px;
  top: 5px !important;
  right: 5px !important;
}

@media screen and (max-width: 765px) {
  .logo_holder img {
    max-width: 100px;
  }
}