:root {
    --input-background: #f3f3f5;
    --muted-foreground: #717182;
}
:root {
    --font-size: 16px;
    --background: #fff;
    --foreground: oklch(.145 0 0);
    --card: #fff;
    --card-foreground: oklch(.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(.145 0 0);
    --primary: #030213;
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(.95 .0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #fff;
    --border: #0000001a;
    --input: transparent;
    --input-background: #f3f3f5;
    --switch-background: #cbced4;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    --ring: oklch(.708 0 0);
    --chart-1: oklch(.646 .222 41.116);
    --chart-2: oklch(.6 .118 184.704);
    --chart-3: oklch(.398 .07 227.392);
    --chart-4: oklch(.828 .189 84.429);
    --chart-5: oklch(.769 .188 70.08);
    --radius: .625rem;
    --sidebar: oklch(.985 0 0);
    --sidebar-foreground: oklch(.145 0 0);
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: oklch(.985 0 0);
    --sidebar-accent: oklch(.97 0 0);
    --sidebar-accent-foreground: oklch(.205 0 0);
    --sidebar-border: oklch(.922 0 0);
    --sidebar-ring: oklch(.708 0 0);
}


body{
    background: var(--background);
    font-family: 'Poppins-Regular', sans-serif;
  font-size: 1rem;
}



.bg-input-background {
    background-color: var(--input-background);
    color: var(--muted-foreground);
}

.swiper-pagination-bullet{
    width: 12px !important;
    height: 12px !important;
}

.stg-tabs ul li button.active{
    background: #2872B8;
    background: linear-gradient(90deg,rgba(40, 114, 184, 1) 0%, rgba(36, 39, 94, 1) 100%);
    color: #ffffff;
}
.stg-tabs ul li button.active svg{
    color: #ffffff;
}

@keyframes blink {
    0% {
    opacity: 0.4;
    transform: scale(0.9);
    box-shadow: 0 0 10px rgba(135, 60, 252, 0.3);
    }
    50% {
    opacity: 0.6;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(135, 60, 252, 0.8);
    }
    100% {
    opacity: 0.4;
    transform: scale(0.9);
    box-shadow: 0 0 10px rgba(135, 60, 252, 0.3);
    }
}

.blink-dot {
    animation: blink 1.8s ease-in-out infinite;
}
/************************************************************************/
  /* Optional: stagger the animation */
.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.9s; }
.delay-5 { animation-delay: 1.2s; }
.delay-6 { animation-delay: 1.5s; }

@keyframes floatScale {
    0% {
    transform: scale(0.95);
    opacity: 0.6;
    }
    50% {
    transform: scale(1.1);
    opacity: 1;
    }
    100% {
    transform: scale(0.95);
    opacity: 0.6;
    }
}

.animate-scale {
    animation: floatScale 5s ease-in-out infinite;
}

.animate-scale-delay {
    animation: floatScale 10s ease-in-out infinite;
    animation-delay: -5s;
}
/************************************************************************/
/* First gradient (top-left) */
.gradient-top-left {
    position: absolute;
    top: -50%;
    left: -25%;
    width: 100%;
    height: 70%;
    opacity: 0.3;
    background: linear-gradient(45deg, transparent 30%, rgba(135, 60, 252, 0.25) 50%, transparent 70%);
    transform: scale(1.04809) rotate(0deg);
    animation: rotateClockwise 20s linear infinite;
}

/* Second gradient (bottom-right) */
.gradient-bottom-right {
    position: absolute;
    bottom: -50%;
    right: -25%;
    width: 100%;
    height: 70%;
    opacity: 0.3;
    background: linear-gradient(-45deg, transparent 30%, rgba(0, 180, 255, 0.25) 50%, transparent 70%);
    transform: scale(1.15157) rotate(0deg);
    animation: rotateCounterClockwise 20s linear infinite;
}

/* Clockwise rotation */
@keyframes rotateClockwise {
    0% {
    transform: scale(1.04809) rotate(0deg);
    }
    100% {
    transform: scale(1.04809) rotate(360deg);
    }
}

/* Counter-clockwise rotation */
@keyframes rotateCounterClockwise {
    0% {
    transform: scale(1.15157) rotate(0deg);
    }
    100% {
    transform: scale(1.15157) rotate(-360deg);
    }
}
/***************************************************************/
@keyframes popUpSequence {
    0%, 18.75% {
        opacity: 0.5;
        transform: translateX(-50%) scale(0.8);
    }
    25%, 43.75% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    50%, 100% {
        opacity: 0.5;
        transform: translateX(-50%) scale(0.8);
    }
    }

    @keyframes popUpSequenceSide {
    0%, 18.75% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.8);
    }
    25%, 43.75% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50%, 100% {
        opacity: 0.5;
        transform: translateY(-50%) scale(0.8);
    }
}



/*DCX Admin Console Styles*/
.DVDragPortletHeader,
.DVDragPortletFooter{
	background: #666;
	position: relative;
	z-index:999;
}
.DCXPortletHeader{
	padding: 15px;
}
.DCXPlaceHolder,
.DCXPortletHeader{
	background: #fff;
	position: relative;
	z-index:999;	
}
.DCXPortletHeaderTitle{
	display: flex;
	gap: 10px;
}
.DCXPlaceHolder a,
.DCXPortletHeader input[type="submit"]{
	display: inline-block;
	background: #64a0e7;
    color: #fff;
    padding: 3px 15px;
    border-radius: 5px;
	margin-bottom: 5px;
}
.DCXPortletHeader select,
.DCXApplicaitonForm select{
	background: #fff;
	border: solid 1px #ddd;
	padding: 3px 8px;
	border-radius: 5px;
	margin-bottom: 5px;
	color: #000;
}
.DCXForm h1{
	font-size: 20px;
}
.DCXFieldsRow{
	display: flex;
	align-items: center;
	gap: 15px;
}
.DCXField{
	height: 100%;
}
.DCXApplicaitonForm{
	padding: 30px;
    border: solid 1px #b7b1b1;
    border-radius: 10px;
    background: #f1f1f1;
}
.DCXFieldControl input,
.DCXFieldControl select{
	border: solid 1px #afafaf;
    height: 35px;
    border-radius: 6px;
}