.eko-interviewer-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 30px 30px 30px;
    background-color: #ffff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.eko-interviewer-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.eko-avatar img {
    width: 95px;
    height: 95px !IMPORTANT;
    border-radius: 50% !important;
}

.eko-greeting h2 {
    margin: 0 0 5px 0;
    color: #333;
}

.eko-interviewer-input {
    display: flex;
    margin-bottom: 20px;
}

#eko-job-title {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.eko-interviewer-options {
    text-align: center;
}

.eko-interviewer-options h3 {
    margin-bottom: 15px;
}

.eko-interviewer-input {
    display: flex;
    margin-bottom: 20px;
    align-items: center; 
    position: relative;
    margin-top: 140px;
}

#eko-job-title {
    flex-grow: 1;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 16px;
    font-size: 16px;
    background: #D9D9D9;
    height: 55px;
    outline: none;
    font-family: Poppins;
    font-weight: 500;
    font-size: 23px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #000000;
}

.eko-submit-job-title {
    background-color: #928D8D;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: 40px;
    width: 40px;
    transition: background-color 0.3s ease;
    position: absolute;
    right: 20px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.eko-user-message {
    text-align: right;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    max-width: 75%;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 30px;
}

.eko-bot-message {
    text-align: left;
}
.eko-avatar {
    margin-right: 50px;
}

.eko-greeting {
    width: 80%;
}

.eko-greeting p,
.eko-bot-message p {
    font-weight: 500;
    font-size: 23px;
    line-height: 1.4em;
    letter-spacing: 0px;
}

.eko-user-message p {
    font-weight: 500;
    font-size: 23px;
    line-height: 1.4em;
    letter-spacing: 0px;
    text-transform: capitalize;
    margin-bottom: 0;
}

.eko-response-wrap {
    display: flex;
    align-items: start;
}

.eko-response-img {
    margin-right: 50px;
}

.eko-response-text {
    width: 80%;
}

.eko-response-img img {
    width: 95px;
    height: 95px;
    border-radius: 100%;
}

button.eko-option-btn:hover,
button.eko-option-btn:focus {
    background: #000000 !important;
}
.eko-user-message img {
    width: 70px;
    height: 70px;
    border-radius: 100%;
}

.eko-question-container .eko-bot-message {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 50px;
}

#webcam {
    display: none;
    margin-bottom: 20px;
}

#startBtn {
    margin-bottom: 20px; 
    display: none;
}

#stopBtn { 
    display: none;
}

.eko-signin-section {
    margin-top: 30px;
}

#eko-login-form-div, #eko-register-form-div {
    border:  1px solid #0f0f0f;
    margin-bottom: 20px;
}

/**************************************************
            Sign up & Sign In form
**************************************************/
.eko-option-btn,
.eko-signin-btn {
    padding: 14px 16px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    min-width: 120px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4em;
    letter-spacing: 0px;
    margin-right: 50px;
}

.chatbot-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chatbot-form input {
    height: 48px;
    border: 1px solid #D9D9D9;
    outline: none;
    border-radius: 8px;
    font-size: 18px;
    color: #000;
    padding: 0px 18px;
}
.chatbot-form button {
    background: #000;
    color: #fff;
    height: 48px;
    border-radius: 100px;
    font-size: 18px;
    outline: none;
    cursor: pointer;
    border: none;
}

.eko-auth-container p {
    font-size: 22px;
    font-weight: 500;
}

/*************************************
        chatbot_plan_choice
**************************************/

.eko-version-container {
    display: flex;
    background: #D9D9D9;
    gap: 50px;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    /* max-width: 911px; */
}

.eko-version-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
}

.eko-version-card .eko-icon {
    width: 45px;
    height: 45px;
    border: 1px solid #D9D9D9;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eko-version-card .eko-icon img {
    width: 26px;
}

.eko-version-card .eko-plan {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    margin-bottom: 20px;
}

.eko-version-card span.eko-badge {
    background: #000;
    color: #fff;
    font-size: 16px;
    padding: 4px 15px;
    border-radius: 100px;
    font-family: "Poppins", sans-serif;
}

.eko-version-card span {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin-top: 0px;
    font-family: "Poppins", sans-serif;
    /* margin: 0; */
}

.eko-version-card p {
    font-size: 17px;
    color: #000000;
    margin: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "Poppins", sans-serif;
}
.eko-version-card .eko-amount {
    font-size: 40px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    padding-bottom: 15px;
}

.eko-version-card ul {
    padding: 0;  
    margin: 0;  
    display: flex; 
    flex-direction: column;
    gap: 10px;  
    border-top: 1px solid #D9D9D9;   
    border-bottom: 1px solid #D9D9D9;  
    padding-top: 20px; 
    padding-bottom: 20px;
}
.eko-version-card ul li {
    list-style: none;
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    gap: 5px;
    font-family: "Poppins", sans-serif;
}

.eko-version-card ul li img {
    width: 26px;
}

.eko-version-card ul li span {
    line-height: 0;
}

.eko-version-btn {
    background: #FEE730;
    padding: 14px 16px;
    border: none;
    width: 100%;
    border-radius: 8px;
    font-size: 18px;
    line-height: 1.4em;
    font-family: "Poppins", sans-serif;
    margin-top: 30px;
    cursor: pointer;
    outline: none;
}

/****************************************
                card info
****************************************/
.slp-wrap {
     max-width: 560px;
     margin: 20px auto;
     background: #fff;
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
 .slp-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
}
 .slp-grid .full {
     grid-column: 1 / -1;
}
 .slp-label {
     font-weight: 600;
     margin-bottom: 6px;
     display:block;
}
 .slp-input, .slp-card, .slp-btn {
     width: 100%;
}
 .slp-input {
     padding: 12px 14px;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     outline: none;
}
 .slp-input:focus {
     border-color: #6366f1;
     box-shadow: 0 0 0 4px rgba(99,102,241,.15);
}
 .slp-card {
     border: 1px dashed #cbd5e1;
     border-radius: 12px;
     padding: 14px;
     min-height: 54px;
     display: flex;
     align-items: center;
}
 .slp-btn {
     padding: 12px 16px;
     border: 0;
     border-radius: 12px;
     cursor: pointer;
     background: #111827;
     color: #fff;
     font-weight: 700;
}
 .slp-btn:hover {
     filter: brightness(1.1);
}
 .slp-status {
     margin-top: 12px;
     font-size: 14px;
}
 .slp-status.loading {
     color: #2563eb;
}
 .slp-status.success {
     color: #16a34a;
}
 .slp-status.error {
     color: #dc2626;
}
 .slp-note {
     font-size:12px;
     color:#6b7280;
     margin-top:6px;
}
 .slp-admin-warning {
     background: #fff3cd;
     border: 1px solid #ffeeba;
     padding: 12px;
     border-radius: 8px;
}
 .slp-success-row {
     background:#ecfeff;
     border:1px solid #a5f3fc;
     padding:8px 10px;
     border-radius:8px;
     margin-top:6px;
}