/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
  margin-top: 12px;
}

.app-brand-logo.demo svg {
  width: 22px;
  height: 38px;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
/* Detached navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 76px !important;
}

/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks>* {
  display: block !important;
}

.demo-inline-spacing>* {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing>* {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg>* {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-lg.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl>* {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}

.demo-vertical-spacing-xl.demo-only-element> :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}

.layout-demo-placeholder img {
  width: 900px;
}

.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

.gradient-header {
  background: linear-gradient(90deg, #6f72ff, #e7e7ff);
  height: 128px;
}

.profile-img {
  width: 128px;
  height: 128px;
  margin-top: -64px;
  border: 4px solid white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.online-indicator {
  width: 24px;
  height: 24px;
  background: #22c55e;
  border: 2px solid white;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.card-shadow {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: translateY(-2px);
}

.gradient-blue {
  background: linear-gradient(90deg, #dbeafe, #bfdbfe);
  border-left: 4px solid #3b82f6;
}

.gradient-pink {
  background: linear-gradient(90deg, #fdf2f8, #fce7f3);
  border-left: 4px solid #ec4899;
}

.gradient-green {
  background: linear-gradient(90deg, #dcfce7, #bbf7d0);
  border-left: 4px solid #22c55e;
}

.gradient-red {
  background: linear-gradient(90deg, #fef2f2, #fecaca);
  border-left: 4px solid #ef4444;
}

.btn-gradient-blue {
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  border: none;
  transition: all 0.2s ease;
}

.btn-gradient-blue:hover {
  background: linear-gradient(90deg, #1d4ed8, #1e40af);
  transform: scale(1.05);
}

.btn-gradient-purple {
  background: linear-gradient(90deg, #9333ea, #7c3aed);
  border: none;
  transition: all 0.2s ease;
}

.btn-gradient-purple:hover {
  background: linear-gradient(90deg, #7c3aed, #6d28d9);
  transform: scale(1.05);
}

.btn-gradient-gray {
  background: linear-gradient(90deg, #4b5563, #374151);
  border: none;
  transition: all 0.2s ease;
}

.btn-gradient-gray:hover {
  background: linear-gradient(90deg, #374151, #1f2937);
  transform: scale(1.05);
}

.badge-custom {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}


 
.upload_svg {
  fill: var(--colorPrimaryNormal, #0576bd);
}
.btn-upload {
  color: #fff;
  background-color: var(--colorPrimaryNormal);
}
.btn-upload:hover,
.btn-upload:focus {
  color: #fff;
  background-color: var(--colorPrimaryGlare);
}
.upload_img {
  width: calc(33.333% - (2rem / 3));
  object-fit: contain;
}


/*  no dat card */
 .no-data-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            min-height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .no-data-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        
        .no-data-content {
            text-align: center;
            color: white;
            padding: 2rem;
        }
        
        .no-data-icon {
            font-size: 5rem;
            margin-bottom: 1.5rem;
            opacity: 0.9;
            animation: float 3s ease-in-out infinite;
        }
        
        .no-data-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .no-data-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            font-weight: 300;
        }
        
        .retry-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .retry-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
            transform: scale(1.05);
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            border-radius: 20px;
        }
        
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: particle-float 6s infinite ease-in-out;
        }
        
        .particle:nth-child(1) { width: 10px; height: 10px; left: 10%; animation-delay: 0s; }
        .particle:nth-child(2) { width: 8px; height: 8px; left: 20%; animation-delay: 1s; }
        .particle:nth-child(3) { width: 12px; height: 12px; left: 70%; animation-delay: 2s; }
        .particle:nth-child(4) { width: 6px; height: 6px; left: 80%; animation-delay: 3s; }
        .particle:nth-child(5) { width: 14px; height: 14px; left: 90%; animation-delay: 4s; }
        
        @keyframes particle-float {
            0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10%, 90% { opacity: 1; }
            50% { transform: translateY(-10vh) rotate(180deg); }
        }