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



html, body {
  max-width: 100%;
  overflow-x: hidden;
  background-color: black;
  color: #cccccc;
}

body{
  margin: 0;
}



img,
video {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

/* Absolutely No scroll bars */
::-webkit-scrollbar{
  display: none;
}

:root {
  --yellow: #f5c32c;
  --orange: #fca61f;
  --purple: #c51aa0;
  --pink: #f33ba0;
  --black: #242d49;
  --blue: #0f34a5;
  --red:  #c21010;
  --gray: rgba(36, 45, 73, 0.65);
  --profileShadow: 0px 4px 17px 2px rgba(0, 0, 0, 0.25);
  --hrColor: #cfcdcd;
  /* --cardColor: rgba(243, 232, 232, 0.64); */
  --cardColor: #fff;
  --buttonBg: linear-gradient(98.63deg, #ec7be7 0%, #c51aa0 100%);
  --inputColor: rgba(40, 52, 62, 0.07);
  --photo: #4CB256;
  --video: #4A4EB7;
  --location: #EF5757;
  --schedule: #E1AE4A;
}


.button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  background: var(--buttonBg);
}

.button:hover {
  cursor: pointer;
  color: var(--purple);
  background: transparent;
  border: 2px solid var(--pink);
}

/* Made for Property photos to stop the shrink if don't work delete. */
/* #image-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 10px;
}

.image {
  max-width: 100%;
  max-height: 100%;
} */



/* width */


.react-tel-input, .react-tel-input > .form-control {
  background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important;
  width: 100% !important;
  color: #fff;
  margin-left: 15px;
  margin-right: 10px;
  height: 4.0rem !important;
}

.react-tel-input .country-list .country{
  color: #000; 
}

ul.country-list{
  width: 50rem !important;
}

#page-container {
  position: relative;
  min-height: 100vh;
  max-width: 100%;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#fullCalendar .rdrCalendarWrapper.rdrDateRangeWrapper,
#fullCalendar .rdrMonthAndYearWrapper,
#fullCalendar .rdrMonths.rdrMonthsVertical,
#fullCalendar .rdrMonth
 {
  width: 100%;
}

#fullCalendar button.rdrDay.rdrDayDisabled,
#fullCalendar button.rdrDay.rdrDayPassive.rdrDayDisabled
{
  background-color: #cccccc;
}
#fullCalendar .rdrDayDisabled .rdrDayNumber span{
  color: red;
}

#footer {
  position: relative;
  bottom: 0;
  width: 100%;
  padding-top:  30px;
  /* height: 38rem; */
  /* z-index: -1; */
}

.purple {
  color: #c13aa8;
}

.bg-purple {
  background: #c13aa8;
}


.leaflet-bottom,
.leflet-control,
.leaflet-pane,
.leaflet-top {
  z-index: 0 !important;
}

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
    appearance: none;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 20 14.3% 4.1%;

    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;
 
    --primary: 24 9.8% 10%;
    --primary-foreground: 60 9.1% 97.8%;
 
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
 
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
 
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60 9.1% 97.8%;

    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 20 14.3% 4.1%;
 
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 60 9.1% 97.8%;
 
    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;
 
    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;
 
    --primary: 60 9.1% 97.8%;
    --primary-foreground: 24 9.8% 10%;
 
    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;
 
    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;
 
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;
 
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;
 
    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 24 5.7% 82.9%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
 
}



/* Custom For pages */

.MyProfileNews {
    overflow: hidden;
    color: var(--white);
    padding: 1rem 1rem;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20rem;
}

.MyProfile {
    overflow: hidden;
    color: var(--white);
    padding: 1rem 1rem;
    height: 150vh;
    width: 100%;
    max-width: 100%;
    margin-bottom: 10rem;
}

.blur {
  position: absolute;
  width: 22rem;
  height: 14rem;
  border-radius: 50%;
  background: #a6ddf0;
  filter: blur(72px);
}