/* static/css/styles.css */  
  
/* Fixed Sidebar */  
.fixed-left {  
    position: fixed;  
    top: 0;  
    left: 0;  
    height: 100%;  
    width: 250px;  
    overflow-x: hidden;  
    overflow-y: auto;  
    padding-top: 20px;  
    z-index: 1000; /* Ensure sidebar is above other elements */  
}  
  
/* Ensure the main content doesn't overlap the sidebar */  
#page-content-wrapper {  
    margin-left: 250px; /* Same as the sidebar's width */  
    width: calc(100% - 250px);  
    padding-top: 20px;  
    padding-bottom: 60px; /* Space for the fixed footer */  
    min-height: 100vh;  
    box-sizing: border-box;  
    display: flex;  
    flex-direction: column;  
}  
  
/* Sidebar link styling */  
#sidebar-wrapper .list-group-item {  
    border: none;  
    padding: 15px 20px;  
    font-size: 1.1em;  
}  
  
#sidebar-wrapper .list-group-item:hover {  
    background-color: #495057;  
    color: #fff;  
}  
  
/* Active link styling */  
.list-group-item.active {  
    background-color: #007bff;  
    border-color: #007bff;  
    color: #fff;  
}  
  
/* Logo Styling */  
.sidebar-heading img.logo {  
    max-width: 80%;  
    height: auto;  
}  
  
/* Fixed Footer Styling */  
.footer {  
    position: fixed;  
    bottom: 0;  
    left: 250px; /* Same as sidebar width */  
    width: calc(100% - 250px);  
    height: 60px; /* Footer height */  
    background-color: #f8f9fa;  
    border-top: 1px solid #e7e7e7;  
    z-index: 1000; /* Ensure footer is above other elements */  
}  
  
/* Responsive adjustments */  
@media (max-width: 768px) {  
    .fixed-left {  
        width: 100%;  
        height: auto;  
        position: relative;  
    }  
    #page-content-wrapper {  
        margin-left: 0;  
        width: 100%;  
        padding-bottom: 60px; /* Ensure space for footer */  
    }  
    .footer {  
        left: 0;  
        width: 100%;  
    }  
}  
  
/* Customize Typed.js Cursor */  
.typed-cursor {  
    font-size: 1.2em;  
    color: #007bff;  
    opacity: 1;  
    -webkit-animation: blink 0.7s infinite;  
    animation: blink 0.7s infinite;  
}  
  
@keyframes blink {  
    0% { opacity: 1; }  
    50% { opacity: 0; }  
    100% { opacity: 1; }  
}  
  
/* Respect User's Reduced Motion Preference */  
@media (prefers-reduced-motion: reduce) {  
    .animate__animated {  
        animation: none;  
    }  
    .typed-cursor {  
        display: none;  
    }  
}  

 
    .bg-custom {  
        background-color: #0069A7 !important;  
    }  


    .btn-custom {  
        border-color: #f57f29 !important;  
        color: #f57f29 !important;  
        border-width: 2px;  
        border-radius: 30px; /* Adjust the value to make corners more or less rounded */  
        padding: 20px 30px; /* Adjust padding to make the button bigger */  
        font-size: 1.25rem; /* Adjust font size as needed */  
    }  
  
    .btn-custom:hover {  
        background-color: #f57f29 !important;  
        color: white !important;  
    }  


    /* static/css/styles.css */  
  
/* Stepper Styles */  
.stepper {  
    display: flex;  
    justify-content: space-between;  
    position: relative;  
    padding: 20px 0;  
}  
  
.stepper::before {  
    content: '';  
    position: absolute;  
    top: 50%;  
    left: 5%;  
    width: 90%;  
    height: 4px;  
    background-color: #dee2e6;  
    z-index: 0;  
}  
  
.step {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    text-align: center;  
    position: relative;  
    z-index: 1;  
    width: 100px;  
}  
  
.step .icon {  
    background-color: #dee2e6;  
    color: #6c757d;  
    border-radius: 50%;  
    width: 50px;  
    height: 50px;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin-bottom: 10px;  
    transition: background-color 0.3s, color 0.3s;  
}  
  
.step.active .icon {  
    background-color: #007bff;  
    color: white;  
}  
  
.step .step-title {  
    font-size: 0.9rem;  
    color: #6c757d;  
}  
  
.step.active .step-title {  
    color: #007bff;  
    font-weight: bold;  
}  


.chatbot-widget {  
            position: fixed;  
            bottom: 80px;  
            right: 20px;  
            width: 750px;  
            max-height: 800px;  
            background-color: #ffffff;  
            border: 1px solid #ced4da;  
            border-radius: 10px;  
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);  
            display: none;  
            flex-direction: column;  
            z-index: 1000;  
            overflow: hidden;  
        }  
  
        .chatbot-header {  
            background-color: #007bff;  
            color: white;  
            padding: 10px 15px;  
            border-top-left-radius: 10px;  
            border-top-right-radius: 10px;  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
        }  
  
        .chatbot-header h5 {  
            margin: 0;  
            font-size: 1.25rem;  
        }  
  
        .chatbot-header .close {  
            background: none;  
            border: none;  
            font-size: 1.5rem;  
            color: white;  
            cursor: pointer;  
        }  
  
        .chatbot-body {  
            padding: 10px 15px;  
            overflow-y: auto;  
            flex-grow: 1;  
            background-color: #f8f9fa;  
        }  
  
        .chatbot-footer {  
            display: flex;  
            padding: 10px 15px;  
            border-top: 1px solid #ced4da;  
            background-color: #ffffff;  
        }  
  
        .chatbot-footer input {  
            flex-grow: 1;  
            margin-right: 10px;  
        }  
  
        .chatbot-toggle {  
            position: fixed;  
            bottom: 20px;  
            right: 20px;  
            border-radius: 50%;  
            width: 60px;  
            height: 60px;  
            z-index: 1000;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);  
            background-color: #007bff;  
            color: white;  
            border: none;  
            cursor: pointer;  
        }  
  
        .messages {  
            display: flex;  
            flex-direction: column;  
        }  
  
        .message {  
            margin-bottom: 10px;  
            animation: fadeIn 0.5s;  
            display: flex;  
        }  
  
        .message.user {  
            justify-content: flex-end;  
        }  
  
        .message.bot {  
            justify-content: flex-start;  
        }  
  
        .message .text {  
            padding: 8px 12px;  
            border-radius: 15px;  
            max-width: 80%;  
            word-wrap: break-word;  
            position: relative;  
            animation: slideIn 0.05s ease-out;  
        }  
  
        .message.user .text {  
            background-color: #007bff;  
            color: white;  
            border-bottom-right-radius: 0;  
        }  
  
        .message.bot .text {  
            background-color: #f1f0f0;  
            color: black;  
            border-bottom-left-radius: 0;  
        }  
  
        .typing-indicator {  
            display: flex;  
            align-items: center;  
        }  
  
        .typing-indicator span {  
            display: inline-block;  
            width: 8px;  
            height: 8px;  
            margin-right: 4px;  
            background-color: #6c757d;  
            border-radius: 50%;  
            animation: blink 1.4s infinite both;  
        }  
  
        .typing-indicator span:nth-child(2) {  
            animation-delay: 0.2s;  
        }  
  
        .typing-indicator span:nth-child(3) {  
            animation-delay: 0.4s;  
        }  
  
        @keyframes fadeIn {  
            from { opacity: 0; }  
            to { opacity: 1; }  
        }  
  
        @keyframes slideIn {  
            from { transform: translateY(10px); opacity: 0; }  
            to { transform: translateY(0); opacity: 1; }  
        }  
  
        @keyframes blink {  
            0%, 80%, 100% { opacity: 0; }  
            40% { opacity: 1; }  
        }  
  
        /* Stepper Styles */  
        .stepper {  
            display: flex;  
            justify-content: space-between;  
            position: relative;  
            padding: 20px 0;  
        }  
  
        .stepper::before {  
            content: '';  
            position: absolute;  
            top: 50%;  
            left: 5%;  
            width: 90%;  
            height: 4px;  
            background-color: #dee2e6;  
            z-index: 0;  
        }  
  
        .step {  
            display: flex;  
            flex-direction: column;  
            align-items: center;  
            text-align: center;  
            position: relative;  
            z-index: 1;  
            width: 100px;  
        }  
  
        .step .icon {  
            background-color: #dee2e6;  
            color: #6c757d;  
            border-radius: 50%;  
            width: 50px;  
            height: 50px;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            margin-bottom: 10px;  
            transition: background-color 0.3s, color 0.3s;  
        }  
  
        .step.active .icon {  
            background-color: #007bff;  
            color: white;  
        }  
  
        .step .step-title {  
            font-size: 0.9rem;  
            color: #6c757d;  
        }  
  
        .step.active .step-title {  
            color: #007bff;  
            font-weight: bold;  
        }  
  
        @media (max-width: 768px) {  
            .stepper {  
                flex-direction: column;  
                align-items: flex-start;  
            }  
  
            .stepper::before {  
                top: 0;  
                left: 50%;  
                width: 4px;  
                height: 100%;  
            }  
  
            .step {  
                flex-direction: row;  
                align-items: center;  
                margin-bottom: 20px;  
                width: auto;  
            }  
  
            .step .icon {  
                margin-right: 15px;  
                margin-bottom: 0;  
            }  
        }  

           /* Company Colors */  
           :root {  
            --color-green: #3CB14A;  
            --color-blue: #0069A7;  
            --color-grey: #768d99;  
            --color-navy-purple: #3c4a62;  
            --color-orange: #f57f29;  
            --color-chat-bg: #f0f2f5;  
            --color-bot-msg: #ffffff;  
            --color-user-msg: #3CB14A;  
            --color-system-msg: #e9ecef;  
            --color-system-text: #495057;  
        }  
  
        /* Chatbot Widget Styles */  
        .chatbot-widget {  
            position: fixed;  
            bottom: 80px;  
            right: 20px;  
            width: 500px; /* Increased width */  
            max-height: 600px;  
            background-color: #ffffff;  
            border: 1px solid var(--color-grey);  
            border-radius: 10px;  
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);  
            display: none;  
            flex-direction: column;  
            z-index: 1000;  
            overflow: hidden;  
            transition: all 0.3s ease-in-out;  
        }  
  
        /* Adjust the toggle button position if necessary */  
        .chatbot-toggle {  
            position: fixed;  
            bottom: 20px;  
            right: 20px;  
            border-radius: 50%;  
            width: 60px;  
            height: 60px;  
            z-index: 1000;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);  
            background-color: var(--color-blue);  
            color: white;  
            border: none;  
            cursor: pointer;  
            transition: background-color 0.3s;  
        }  
  
        .chatbot-toggle:hover {  
            background-color: var(--color-navy-purple);  
        }  
  
        .chatbot-header {  
            background-color: var(--color-blue);  
            color: white;  
            padding: 10px 15px;  
            border-top-left-radius: 10px;  
            border-top-right-radius: 10px;  
            display: flex;  
            justify-content: space-between;  
            align-items: center;  
        }  
  
        .chatbot-header h5 {  
            margin: 0;  
            font-size: 1.25rem;  
            font-weight: 500;  
        }  
  
        .chatbot-header .close {  
            background: none;  
            border: none;  
            font-size: 1.2rem;  
            color: white;  
            cursor: pointer;  
            transition: color 0.3s;  
        }  
  
        .chatbot-header .close:hover {  
            color: #f57f29;  
        }  
  
        .chatbot-body {  
            padding: 15px;  
            overflow-y: auto;  
            flex-grow: 1;  
            background-color: var(--color-chat-bg);  
        }  
  
        .chatbot-footer {  
            display: flex;  
            align-items: center;  
            padding: 10px 15px;  
            border-top: 1px solid var(--color-grey);  
            background-color: #ffffff;  
        }  
  
        .chatbot-footer input {  
            flex-grow: 1;  
            margin-right: 10px;  
            border: 1px solid var(--color-grey);  
            border-radius: 50px;  
            padding: 8px 20px;  
            font-size: 0.95rem;  
            transition: border-color 0.3s, box-shadow 0.3s;  
        }  
  
        .chatbot-footer input:focus {  
            outline: none;  
            border-color: var(--color-blue);  
            box-shadow: 0 0 5px var(--color-blue);  
        }  
  
        .chatbot-footer .send-icon {  
            color: var(--color-blue);  
            cursor: pointer;  
            font-size: 1.2rem;  
            transition: color 0.3s;  
        }  
  
        .chatbot-footer .send-icon:hover {  
            color: var(--color-navy-purple);  
        }  
  
        .messages {  
            display: flex;  
            flex-direction: column;  
        }  
  
        .message {  
            margin-bottom: 15px;  
            animation: fadeIn 0.3s;  
            display: flex;  
            align-items: flex-end;  
        }  
  
        .message.user {  
            justify-content: flex-end;  
        }  
  
        .message.bot {  
            justify-content: flex-start;  
        }  
  
        .message.system {  
            justify-content: center;  
        }  
  
        .message .text {  
            padding: 10px 15px;  
            border-radius: 15px;  
            max-width: 80%;  
            word-wrap: break-word;  
            font-size: 0.95rem;  
            position: relative;  
            background-color: var(--color-bot-msg);  
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);  
            transition: background-color 0.3s, box-shadow 0.3s;  
        }  
  
        .message.user .text {  
            background-color: var(--color-user-msg);  
            color: white;  
            border-bottom-right-radius: 0;  
            border-top-right-radius: 0;  
        }  
  
        .message.bot .text {  
            background-color: var(--color-bot-msg);  
            color: #343a40;  
            border-bottom-left-radius: 0;  
            border-top-left-radius: 0;  
            position: relative;  
        }  
  
        .message.system .text {  
            background-color: var(--color-system-msg);  
            color: var(--color-system-text);  
            border-radius: 10px;  
            padding: 10px 15px;  
            max-width: 80%;  
            font-size: 0.9rem;  
            margin: 0 auto 15px auto;  
            display: block;  
            text-align: center;  
        }  
  
        .message.bot .actions {  
            margin-top: 8px;  
            display: flex;  
            gap: 15px;  
            font-size: 1rem;  
        }  
  
        .message.bot .actions i {  
            cursor: pointer;  
            color: var(--color-grey);  
            transition: color 0.3s;  
            font-size: 1rem;  
        }  
  
        .message.bot .actions i:hover {  
            color: var(--color-blue);  
        }  
  
        .typing-indicator {  
            display: flex;  
            align-items: center;  
            margin-bottom: 15px;  
        }  
  
        .typing-indicator span {  
            display: inline-block;  
            width: 8px;  
            height: 8px;  
            margin-right: 4px;  
            background-color: var(--color-grey);  
            border-radius: 50%;  
            animation: blink 1.4s infinite both;  
        }  
  
        .typing-indicator span:nth-child(2) {  
            animation-delay: 0.2s;  
        }  
  
        .typing-indicator span:nth-child(3) {  
            animation-delay: 0.4s;  
        }  
  
        @keyframes fadeIn {  
            from { opacity: 0; transform: translateY(10px); }  
            to { opacity: 1; transform: translateY(0); }  
        }  
  
        @keyframes blink {  
            0%, 80%, 100% { opacity: 0; }  
            40% { opacity: 1; }  
        }  
  
        /* System Message Styling */  
        .follow-up-container {  
            display: flex;  
            align-items: center;  
            gap: 10px;  
            margin-top: 10px;  
        }  
  
        .follow-up-input {  
            flex-grow: 1;  
            border: 1px solid var(--color-grey);  
            border-radius: 50px;  
            padding: 8px 20px;  
            font-size: 0.95rem;  
            transition: border-color 0.3s, box-shadow 0.3s;  
        }  
  
        .follow-up-input:focus {  
            outline: none;  
            border-color: var(--color-blue);  
            box-shadow: 0 0 5px var(--color-blue);  
        }  
  
        .follow-up-send-icon {  
            color: var(--color-blue);  
            cursor: pointer;  
            font-size: 1.2rem;  
            transition: color 0.3s;  
        }  
  
        .follow-up-send-icon:hover {  
            color: var(--color-navy-purple);  
        }  
  
        /* Responsive Adjustments */  
        @media (max-width: 768px) {  
            .chatbot-widget {  
                width: 90%;  
                right: 5%;  
                bottom: 80px;  
            }  
        }