.edvdo_aiinsight_page_button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    text-align: center;
    border-radius: 10px;
    border:1px #3f4dcb;
    background-color: #3f4dcb;
    color: white;
    padding: 15px;
}

.edvdo_aiinsight_page_button:hover,
.edvdo_aiinsight_page_button:focus{
    border: 1px #000039;
    background-color: white;
    color: #000039;
}

.edvdo-ai-insight-container {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    border-radius: 12px 0px 0px 12px;
    background-color: rgba(63, 77, 203, 1);
    padding: 10px;
}
.edvdo-ai-insight-step {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: none;
    border: none;
    padding: 15px;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    height: 60px;
}
.edvdo-ai-insight-step:last-child {
    border-bottom: none;
}
.edvdo-ai-insight-step:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.edvdo-ai-insight-step.active {
    background: var(--White, #FFF);
    color: rgba(36, 36, 36, 1);
    
}


/* Wrapper styles */
.edvdo-ai-insight-form {
    display: flex;
    gap: 16px;
    width: 100%;
    margin: 10px 10px 0px 10px;
	flex-wrap: wrap;
}

/* Form field container */
.edvdo-ai-insight-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* flex container*/
.edvdo-ai-insight-flex-box{
    width:48%;
     display:flex;
	flex-direction: column;
      gap: 1%;
}

.edvdo-ai-insight-flex-inner-box{
    width :100%;
    display:flex;
	flex-wrap: wrap;
	flex-direction:column;
}


/* General input and select styles */
.edvdo-ai-insight-form input[type="text"],
.edvdo-ai-insight-form select:not([multiple]) { 
    all: unset; /* Resets default styles */
    width: 95%;
    height: 28px;
    padding: 5px 10px;
	margin-top: 5px;
    border-radius: 8px;
    border: 0.5px solid var(--Border, rgba(63, 77, 203, 0.50));
    background: #FFF;
    font-size: 16px;
}

/* Preserve default styles for select[multiple] */
.edvdo-ai-insight-form select[multiple] {
    width: 100%;
    height: auto; /* Keep auto height for multiple selections */
    padding: 5px 10px;
	margin-top: 5px;
    border-radius: 8px;
    border: 0.5px solid var(--Border, rgba(63, 77, 203, 0.50));
    background: #FFF;
    font-size: 16px;
    overflow-y: auto; /* Ensure scroll works */
    min-height: 100px; /* Adjust minimum height */
	scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: rgba(63, 77, 203, 0.7) #f1f1f1; /* thumb and track */
}


/* Webkit browsers (Chrome, Edge, Safari) */
.edvdo-ai-insight-form select[multiple]::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.edvdo-ai-insight-form select[multiple]::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track color */
    border-radius: 10px; 
}

.edvdo-ai-insight-form select[multiple]::-webkit-scrollbar-thumb {
    background: rgba(63, 77, 203, 0.7); /* Scrollbar color */
    border-radius: 10px; 
}

.edvdo-ai-insight-form select[multiple]::-webkit-scrollbar-thumb:hover {
    background: rgba(63, 77, 203, 1); /* Scrollbar color on hover */
}




/* Button styles */
.edvdo-ai-insight-button-container {
	display: flex; 
	justify-content: flex-end; 
	align-items: center; 
	width: 100%;
}
.edvdo-ai-insight-button {
  
    display: flex;
    width: 48%;
	height: 52px;
    padding: 15px 30px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--Primary, #3F4DCB);
    color: #FFF;
    border: none;
    cursor: pointer;
}

/* Button hover style */
.edvdo-ai-insight-button:hover {
    background: rgba(63, 77, 203, 0.8);
}


.info-icon {
    margin-left: 5px;
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;  
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    box-sizing: border-box;
}

.info-icon:hover::after {
    content: attr(title);
    background: #007bff;
    color: #fff;
    padding: 8px 14px;        
    border-radius: 4px;
    position: absolute;
    left: 30px;               
    top: 0;
    white-space: nowrap;
    z-index: 100;
    opacity: 1;                
    transition: opacity 0.2s;
    pointer-events: none;
    font-size: 14px;           
}
.info-icon:hover::after {
    opacity: 1;
}


/*----------------------------------------------Mobile Screen Starts------------------------------------------------------------*/
@media screen and (min-width: 320px) and (max-width: 480px) {



    .edvdo_aiinsight_page_button{
        height: 38px;
        padding: 10px;
    }

    .edvdo-ai-insight-container {
        display: flex;
        width: 100%;
        height: auto;
        flex-direction: column;
        border-radius: 12px 12px 0px 0px;
        background-color: rgba(63, 77, 203, 1);
        padding: 10px;
    }


    .edvdo-ai-insight-step {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        height: 40px;
        border: none;
        padding: 15px;
        color: #FFFFFF;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .edvdo-ai-insight-step:last-child {
        border-bottom: none;
    }
    .edvdo-ai-insight-step:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .edvdo-ai-insight-step.active {
        background: var(--White, #FFF);
        color: rgba(36, 36, 36, 1);
        
    }
    
    
    /* Wrapper styles */
    .edvdo-ai-insight-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 10px;
        margin: unset;
    }
    
    /* Form field container */
    .edvdo-ai-insight-field {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* flex container*/
     .edvdo-ai-insight-flex-box{
    width:100%;
     display:block;
      gap: 2%;
    }

   .edvdo-ai-insight-flex-inner-box{
    width :98%;
   }

    
    
    /* Input field styles */
    .edvdo-ai-insight-form input[type=text]{
        width: 95%;
        height: 28px; /* Set height as needed or keep default */
        padding: 5px 10px;
        margin: 10px 0;
        outline: none; /* Removes focus outline */
        border-radius: 8px;
        border: 0.5px solid var(--Border, rgba(63, 77, 203, 0.50));
        background: #FFF;
    }
    
    
    /* Button styles */
    .edvdo-ai-insight-button {
      
        display: flex;
        width: 100%;
        padding: 15px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: var(--Primary, #3F4DCB);
        color: #FFF;
        border: none;
        cursor: pointer;
        margin: 0px 0px 10px 0px;
        box-shadow: 
            14px 22px 7px 0px rgba(0, 0, 0, 0.00), 
            9px 14px 7px 0px rgba(0, 0, 0, 0.01), 
            5px 8px 6px 0px rgba(0, 0, 0, 0.05), 
            2px 4px 4px 0px rgba(0, 0, 0, 0.09), 
            1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    }
    
    /* Button hover style */
    .edvdo-ai-insight-button:hover {
        background: rgba(63, 77, 203, 0.8);
    }
    
}

/*----------------------------------------------Mobile Screen Ends------------------------------------------------------------*/


/*------------------------------------Tablet Screen Starts------------------------------------------------------------*/
@media screen and (min-width: 481px) and (max-width: 1024px){


   

    .edvdo_aiinsight_page_button{
        height: 38px;
        padding: 10px;
    }

    .edvdo-ai-insight-container {
        display: flex;
        width: 100%;
        height: auto;
        flex-direction: column;
        border-radius: 12px 12px 0px 0px;
        background-color: rgba(63, 77, 203, 1);
        padding: 10px;
    }


    .edvdo-ai-insight-step {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        height: 40px;
        border: none;
        padding: 15px;
        color: #FFFFFF;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .edvdo-ai-insight-step:last-child {
        border-bottom: none;
    }
    .edvdo-ai-insight-step:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .edvdo-ai-insight-step.active {
        background: var(--White, #FFF);
        color: rgba(36, 36, 36, 1);
        
    }
    
    
    /* Wrapper styles */
    .edvdo-ai-insight-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        margin: 10px 10px 0px 10px;
    }
    
    /* Form field container */
    .edvdo-ai-insight-field {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* flex container*/
    .edvdo-ai-insight-flex-box{
    width:100%;
     display:flex;
      gap: 2%;
   }

   .edvdo-ai-insight-flex-inner-box{
    width :95%;
   }

    
    
    /* Input field styles */
    .edvdo-ai-insight-form input[type=text]{
        width: 95%;
        height: 28px;; /* Set height as needed or keep default */
        padding: 5px 10px;
        margin: 10px 0;
        outline: none; /* Removes focus outline */
        border-radius: 8px;
    border: 0.5px solid var(--Border, rgba(63, 77, 203, 0.50));
    background: #FFF;
    }
    
    
    /* Button styles */
    .edvdo-ai-insight-button {
      justify-content: center;
      align-items: center;
        display: flex;
        width: 323px;
        padding: 16px 97.5px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 8px;
        background: var(--Primary, #3F4DCB);
        color: #FFF;
        border: none;
        cursor: pointer;
        margin: 0px 0px 10px 0px;
        box-shadow: 
            14px 22px 7px 0px rgba(0, 0, 0, 0.00), 
            9px 14px 7px 0px rgba(0, 0, 0, 0.01), 
            5px 8px 6px 0px rgba(0, 0, 0, 0.05), 
            2px 4px 4px 0px rgba(0, 0, 0, 0.09), 
            1px 1px 2px 0px rgba(0, 0, 0, 0.10);
    }
    
    /* Button hover style */
    .edvdo-ai-insight-button:hover {
        background: rgba(63, 77, 203, 0.8);
    }
}

/*------------------------------------Tablet Screen End------------------------------------------------------------*/