@import '../../node_modules/animate.css/animate.min.css';
@import '../../node_modules/owl.carousel/dist/assets/owl.carousel.min.css';
@import '../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css';
@config "../../tailwind.front.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

@import 'animate.css';
@layer components {

    .formElements .selects{
        @apply w-full;
    }

    .formElements select.address {
        @apply border-t-[1px];
        @apply border-l-[1px];
        @apply border-r-[1px]; 
        @apply border-b-[1px];
        @apply rounded-[4px];
        @apply pl-[10px];
    }
    
    .formElements select {
        @apply border-t-[1px];
        @apply border-l-[1px];
        @apply border-r-[1px]; 
        @apply border-b-[1px];
        @apply shadow-none;
        @apply rounded-[3px];
        @apply focus:ring-0;
        @apply focus:border-b-[1px];
        @apply px-0;
        @apply py-2;
        @apply font-semibold;
        @apply text-xs;
        @apply max-w-full;
   
    }

    .formElements input {
        @apply border-t-[1px];
        @apply border-l-[1px];
        @apply border-r-[1px]; 
        @apply border-b-[1px];
        @apply shadow-none;
        @apply rounded-[5px];
        @apply focus:ring-0;
        @apply focus:border-b-[1px];
        @apply px-2;
        @apply py-2;
        @apply font-semibold;
        @apply text-xs;
  
    }
    .formElements input.dob {
        @apply mt-0;
        @apply pt-0;
        @apply pb-2;
    }
    .formElements input[type="checkbox"]{
        @apply border-t-[1px];
        @apply border-l-[1px];
        @apply border-r-[1px]; 
        @apply border-b-[1px];
        @apply rounded-[3px];
    }
    .formElements .inputs{

    }
    .formElements label{
        @apply text-xs;
        @apply font-medium;
    }
    .formElements button[type="submit"]{
        @apply inline-block;
        @apply w-full;
        @apply normal-case;
        @apply text-base;
        @apply py-[15px];
    }

  }




.top-navigation .active{
    color: #6660EB;
}

.slot-container {
    overflow: hidden; /* Hide overflow content */
    position: relative; /* Required for absolute positioning of children */
}



@keyframes slideUp {
    0% { bottom: -1420px; }
    100% { bottom: 65px; }
}

.prizesSlots {
    bottom: -1420;
    animation-fill-mode: forwards; /* Maintain final state after animation */
}

/* Class to start the animation */
.animate-up {
    animation: slideUp 3s linear infinite;
}

/* Class to slow down and stop the animation */
.animate-stop {
    animation: slideUp 3s ease-out;
}
.hide{
    display: none;
}

.rotate {
    transform: rotate(180deg); /* Or any other degree of rotation you prefer */
}
  
.shadow-invert{
    -webkit-box-shadow: 0px 1px 37px -5px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 1px 37px -5px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 1px 37px -5px rgba(0, 0, 0, 0.6);
}

.slider-2 .owl-dots{
	position: absolute;
  bottom: 20px;

}
.owl-dots{
	position: absolute;
  bottom: 38px;
  left: 0px;
  z-index: 100;
  width: 100%;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.home-slider .owl-dots{
    position: absolute;
    bottom: -30px;
}

@media screen and (max-width: 1024px) {
.deals-slider-wrap .owl-dots{
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
}

.owl-carousel button.owl-dot {
	background: #D1D1D1 !important;
	color: inherit;
	border: none;
	padding: 0 !important;
	font: inherit;
	width: 10px;
	margin: 0 6px 0 0;
	height: 4px;
	border-radius: 4px;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
		&:hover{
			background:#ffffff !important;
		}
}

.owl-carousel button.owl-dot.active {
	background:#6660EB !important;
	width: 40px;
	height: 4px;
	border-radius: 4px;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
}
.owl-nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px 0 40px;
}
.owl-prev{
    width:100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.owl-next{
    width:100px;
    height: 30px;
    width:100px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
    .slider-lp .owl-stage{
        padding:20px 0 20px 0;
    }

    .slider-lp .owl-item{
        filter: blur(10px);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        opacity:0.3;
     
    }
    .slider-lp .owl-item.active{
        filter: blur(0);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
        opacity:1;
     
    }

    #game-results a{
        color:#f34d4d;

    }

    #game-results a:hover{
        color:#F07B7B;
        
    }

    .buttonShadow{
        -webkit-box-shadow: 3px 3px 0px 2px rgba(73, 69, 155, 1);
        -moz-box-shadow: 3px 3px 0px 2px rgba(73, 69, 155, 1);
        box-shadow: 3px 3px 0px 2px rgba(73, 69, 155, 1);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .buttonShadow:hover{
        -webkit-box-shadow: 0px 0px 0px 0px rgba(73, 69, 155, 1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(73, 69, 155, 1);
        box-shadow: 0px 0px 0px 0px rgba(73, 69, 155, 1);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .buttonShadow{
        -webkit-box-shadow: 3px 3px 0px 2px rgba(73, 69, 155, 1);
        -moz-box-shadow: 3px 3px 0px 2px rgba(73, 69, 155, 1);
        box-shadow: 3px 3px 0px 2px rgba(73, 69, 155, 1);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .buttonShadow:hover{
        -webkit-box-shadow: 0px 0px 0px 0px rgba(73, 69, 155, 1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(73, 69, 155, 1);
        box-shadow: 0px 0px 0px 0px rgba(73, 69, 155, 1);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .buttonShadowSecond {
        -webkit-box-shadow: 3px 3px 0px 2px rgba(255, 255, 255, 1);
        -moz-box-shadow: 3px 3px 0px 2px rgba(255, 255, 255, 1);
        box-shadow: 3px 3px 0px 2px rgba(255, 255, 255, 1);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
    
    .buttonShadowSecond:hover {
        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
    #monthPicker::-webkit-scrollbar { display: none; }
  .cursor-grabbing { cursor: grabbing; }

  #yearPicker::-webkit-scrollbar { display: none; }
  .cursor-grabbing { cursor: grabbing; }


  .af-ghost{
    opacity: 0; background: transparent; border: 0; outline: none; box-shadow: none;
    -webkit-appearance: none; appearance: none; color: transparent; caret-color: transparent;
  }