@tailwind base;
@tailwind components;
@tailwind utilities;
textarea,
input,
select,
input[type="text"],
input[type="password"],
input[type="email"] {
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none !important;
  box-shadow: none;
}
textarea:focus,
select:focus,
input:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus input:focus,
input:focus-visible {
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none !important;
  box-shadow: none;
}

/* Poppins font family */
/* @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,500;1,200;1,300;1,400;1,700&family=Righteous&display=swap"); */

@font-face {
  font-family: "ClashGrotesk";
  src: url(../assets/fonts/Clash/ClashGrotesk-Regular.woff2);
  font-weight: 400;
}
@font-face {
  font-family: "ClashGrotesk";
  src: url(../assets/fonts/Clash/ClashDisplay-Semibold.woff2);
  font-weight: 500;
}
@font-face {
  font-family: "ClashGrotesk";
  src: url(../assets/fonts/Clash/ClashGrotesk-Semibold.woff2);
  font-weight: 600;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "Josefin Sans", -apple-system, "Source Serif Pro",
    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
    Droid Sans, Helvetica Neue, sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

/* @media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  body {
    color: white;
    background: black;
  }
} */
a {
  text-decoration: none;
}
.no-scrollbar::-webkit-scrollbar {
  width: 3px;
}
.no-scrollbar::-webkit-scrollbar-track {
  background: #fff;
}
.no-scrollbar::-webkit-scrollbar-thumb {
  background: #ccc;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: 3px; /* Firefox */
}

.none-scrollbar::-webkit-scrollbar {
  width: 0;
}
.none-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.none-scrollbar::-webkit-scrollbar-thumb {
  background: transparent;
}
.none-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: 0px; /* Firefox */
}
.image-couple:hover {
  transform: scale(1.05);
  z-index: 10;
  transition: all;
  transition-duration: 300;
}
@layer components {
  .header-clip {
    -webkit-clip-path: polygon(41% 0%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(41% 0%, 100% 0, 100% 100%, 0% 100%);
  }
  .header-clip-reverse {
    /* -webkit-clip-path: polygon( 100% 0, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 100%, 0); */
    clip-path: polygon(0 0, 68% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 68% 0, 100% 100%, 0% 100%);
  }
}

.no-scrollbar::-webkit-scrollbar {
  width: 3px;
}
.no-scrollbar::-webkit-scrollbar-track {
  background: #fff;
}
.no-scrollbar::-webkit-scrollbar-thumb {
  background: #ccc;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: 3px; /* Firefox */
}

.fancy-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.fancy-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  height: 20px;
}

.fancy-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #aa0c7e, white);
  border-radius: 50px;
}
.fancy-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: 6px; /* Firefox */
}
/* .blur-bgimage:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;

  filter: blur(10px);
  -moz-filter: blur(10px);
  -webkit-filter: blur(10px);
  -o-filter: blur(10px);

  transition: all 2s linear;
  -moz-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  -o-transition: all 2s linear;
} */
/* .gradien-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
} */
.ribbon::before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-left: 10px solid transparent;
  bottom: -10px;
  border-width: 20px 20px;
  border-style: solid;
  border-color: currentColor currentColor currentColor transparent;
  top: 20px;
  left: -30px;
  z-index: -1;
}
.ribbon::after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-right: 10px solid transparent;
  right: 0;
  bottom: -10px;
  border-width: 20px 20px;
  border-style: solid;
  border-color: currentColor transparent currentColor currentColor;
  top: 20px;
  right: -30px;
  z-index: -1;
}
.ribbon {
  position: relative;
  width: 106%;
  height: 50px;
  z-index: 2;
  align-self: center;
  /* margin-left: -10px;
  margin-right: -10px; */
}
.ribbon-content {
  height: inherit;
  margin-bottom: 0;
  background: currentColor;
  z-index: 100;
}
.ribbon-content:before {
  height: 0;
  width: 0;
  border-top: 10px solid #26808b;
  border-left: 10px solid transparent;
  bottom: -10px;
}
.ribbon-content:after {
  height: 0;
  width: 0;
  border-top: 10px solid #26808b;
  border-right: 10px solid transparent;
  right: 0;
  bottom: -10px;
}
.instagram-gradient {
  background-image: linear-gradient(-226deg, #d0165f, #e1475b 51%, #ee592c);
}

.react-player iframe {
  height: 100% !important;
}

.range-input {
  -webkit-appearance: none;
}
.range-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 7px;
  background: #aa0c7e;
  border: none;
  border-radius: 10px;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
  margin-top: -6.5px;
}
.range-input:focus {
  outline: none;
}
.range-input:focus::-webkit-slider-runnable-track {
  background: #aa0c7e;
}

.range-input::-moz-range-track {
  width: 100%;
  height: 7px;
  background: #aa0c7e;
  border: none;
  border-radius: 10px;
}
.range-input::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
}

/*hide the outline behind the border*/
.range-input:-moz-focusring {
  /* outline: 1px solid white; */
  outline-offset: -1px;
}
.range-input:focus::-moz-range-track {
  background: #ccc;
}

/* for ie */

.range-input::-ms-track {
  width: 100%;
  height: 7px;

  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;

  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}
.range-input::-ms-fill-lower {
  background: #aa0c7e;
  border-radius: 10px;
}
.range-input::-ms-fill-upper {
  background: #aa0c7e;
  border-radius: 10px;
}
.range-input::-ms-thumb {
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #fff;
}
.range-input:focus::-ms-fill-lower {
  background: #888;
}
.range-input:focus::-ms-fill-upper {
  background: #ccc;
}

.chat-bg {
  max-width: 1357px;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  overflow: hidden;
}
.chat-list-bg {
  background: none !important;
  border-right: solid 1px #e8edf3;
}
.chat-search-box {
  width: 100%;
  padding: 0px 15px;
}
.chat-search {
  background: #f6f7f9;
  border-radius: 10px;
}
.chat-user-list {
  border-top: solid 1px #e8edf3;
  padding: 15px;
}
.chat-user-list .chat-user-li {
  border-radius: 10px;
  padding: 10px;
}
.chat-user-des h5 {
  color: #000000;
}
.chat-user-list .chat-user-li.bg-secondary .chat-user-des h5 {
  color: #fff;
}
.message-chat-box {
  background: url(../assets/images/message-bg.png) no-repeat;
  background-size: cover;
}
.chat-user-head {
  background: #fff;
  border-bottom: solid 1px #eeeeee;
}
.chat-user-footer {
  background: #fff;
}
.message-send-form {
  background: #f6f7f9;
}
.send-button {
  width: 35px;
  padding: 5px;
}

#cvc {
  width: 200%;
}

#field-wrapper {
  width: 110%;
}

#card-expiry {
  width: 200%;
}