@import url('https://googleapis.com');
:root {
            --web-primary: #0081FF; /*Lables*/
            --web-secondary: #78B8FF;
            --web-accent: #0063FF;
            --web-btn: #0063FF;    /*Btn*/ 
            --web-btn-hover: #004A99; /*btn hover*/ 
            --web-txt: #FFFFFF; /*text*/
        }

.custom-textbox {
            border-radius: 10px;
            border: 1px solid #ccc;
            padding: 5px 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
        }

.footer-social {
    display: inline-block;
    transition: all 0.3s ease;
}

.footer-social:hover {
    color: #1877f2;
    transform: scale(1.2);
    text-shadow: 0 0 10px rgba(24, 119, 242, 0.7);
}

.shadow-3d {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05), 0 15px 40px rgba(0, 0, 0, 0.08);
            background: linear-gradient(to top left, #ffffff, #f9f9f9);
            transition: all 0.3s ease;
        }

            .shadow-3d:hover {
                transform: translateY(-6px);
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 30px 60px rgba(0, 0, 0, 0.07);
            }

.ebgcolor{
/*background-color: #0d6efd !important;*/
background-color: var(--web-primary) !important;
}
.etextcolor {
/*color: #0d6efd !important;*/
color: var(--web-txt) !important;
}

.txthcolor {
    color: var(--web-primary) !important;
}

html, body, p, span, h1, h2, h3, h4, h5, h6, input, button, select, textarea {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
}

.del-btn {
  /* 1. Normal State Colors */
  --bs-btn-bg: #ffffff;          /* Base background color */
  --bs-btn-color: #de4150;       /* Base text color */

  /* 2. Hover State Colors */
  --bs-btn-hover-bg: #de4150;    /* Changes background to Green on hover */
  --bs-btn-hover-color: #ffffff; /* Keeps text color White on hover */
  
  /* 3. Border Hover Colors (Optional but recommended so borders match) */
  --bs-btn-border-color: #de4150;
  --bs-btn-hover-border-color: #FF3D4F; 
}

.action-btn {
  /* 1. Normal State Colors */
  --bs-btn-bg: #005BB3;          /* Base background color  277dfd*/
  --bs-btn-color: #ffffff;       /* Base text color */

  /* 2. Hover State Colors */
  --bs-btn-hover-bg: #1862B5;    /* Changes background to Green on hover */
  --bs-btn-hover-color: #ffffff; /* Keeps text color White on hover */
  
  /* 3. Border Hover Colors (Optional but recommended so borders match) */
  --bs-btn-border-color: #005CE0;
  --bs-btn-hover-border-color: #0065FC; 
}

.clear-btn {
  /* 1. Normal State Colors */
  --bs-btn-bg: #ffffff;          /* Base background color */
  --bs-btn-color: #3E853E;       /* Base text color */

  /* 2. Hover State Colors */
  --bs-btn-hover-bg: #3E853E;    /* Changes background to Green on hover */
  --bs-btn-hover-color: #ffffff; /* Keeps text color White on hover */
  
  /* 3. Border Hover Colors (Optional but recommended so borders match) */
  --bs-btn-border-color: #3E853E;
  --bs-btn-hover-border-color: #3B8A3B; 
}

/* 3. Tikker Classes */
      /* 1. Container with side-fade gradients */
            .ticker-wrap {
              overflow: hidden;
              width: 100%;
              background: #1e73be; /* Blue background from your image */
              padding: 12px 0;
              position: relative;
            }

            /* Elegant fade masks on the left and right edges */
            .ticker-wrap::before,
            .ticker-wrap::after {
              content: "";
              position: absolute;
              top: 0;
              width: 40px;
              height: 100%;
              z-index: 2;
              pointer-events: none; /* Allows hovering the text underneath */
            }
            .ticker-wrap::before {
              left: 0;
              background: linear-gradient(to right, #1e73be, transparent);
            }
            .ticker-wrap::after {
              right: 0;
              background: linear-gradient(to left, #1e73be, transparent);
            }

            /* 2. Hardware-accelerated animation track */
            .ticker-animation {
              display: inline-block;
              white-space: nowrap;
              padding-left: 100%; 
              color: #ffffff;
              font-family: sans-serif;
  
              /* ADJUST SPEED HERE: Change 15s to higher for slower, lower for faster */
              animation: ticker-move 15s linear infinite;
            }

            /* 3. Pause on hover */
            .ticker-animation:hover {
              animation-play-state: paused;
            }

            /* 4. Reset movement keyframes */
            @keyframes ticker-move {
              0% { 
                transform: translate3d(0, 0, 0); 
              }
              100% { 
                transform: translate3d(-100%, 0, 0); 
              } 
            }



    /* Image layout desing */
    /* Fully circular aesthetic avatar layout */
        .profile-avatar {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 75%;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            border: 3px solid #ffffff;
            transition: transform 0.3s ease;
        }

        .profile-avatar:hover {
            transform: scale(1.03);
        }

        /* Alternative: Squircle card layout (similar to rounded-5) */
        .aesthetic-card {
            width: 100%;
            /*max-width: 350px;*/
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 2rem; /* Smooth modern curves */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

.mainnavbarbackground {
    background-color: #FFFFFF;
}  

.nav-item a:hover {
            color: #599BFF !important;
            transform: translateY(-2px);
        }

.tikertextcolor {
    color: #001B33;
}


/*Auto Complete TextBox*/
        /* Base container style with your constraints */
            .ui-autocomplete {
                background-color: white !important;
                border: 1px solid #ddd !important;
                max-height: 200px !important;
                overflow-y: auto !important; 
                font-family: Arial, sans-serif !important;
                font-size: 14px !important;
                z-index: 99999 !important; /* Raised to ensure overlay compliance */
                padding: 0 !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }

            /* Individual list item layout rules */
            .ui-menu-item {
                list-style: none;
                border-bottom: 1px solid #f0f0f0;
            }

            /* Normalize default jQuery wrapper overrides */
            .ui-menu-item .ui-menu-item-wrapper {
                display: block;
                padding: 8px 12px !important;
                cursor: pointer;
                background: transparent !important;
                border: none !important;
                color: #333;
                transition: all 0.15s ease;
            }

            /* Your exact hover style translated to jQuery UI active state hook */
            .ui-menu-item .ui-menu-item-wrapper.ui-state-active,
            .ui-menu-item .ui-menu-item-wrapper:hover,
            .ui-state-focus {
                background-color: #007bff !important;
                color: white !important;
                font-weight: bold !important;
            }

            /* Text color correction for secondary details during hover elements */
            .ui-menu-item .ui-menu-item-wrapper.ui-state-active .ac-sub-info,
            .ui-menu-item .ui-menu-item-wrapper.ui-state-active .ac-student-id,
            .ui-menu-item .ui-menu-item-wrapper.ui-state-active strong {
                color: #e0f2fe !important;
            }

            /* Internal Layout adjustments */
            .ac-modern-row {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .ac-main-info {
                display: flex;
                justify-content: space-between;
                font-size: 14px;
            }

            .ac-student-name {
                font-weight: bold;
            }

            .ac-student-id {
                color: #007bff;
                font-size: 12px;
            }

            .ac-sub-info {
                font-size: 12px;
                color: #666;
            }

            .ac-sub-info strong {
                color: #444;
            }