/* Assuming .eai-tt-sr-form is the parent container for both form and output area */
.eai-tt-sr-form {
    display: flex;
    flex-direction: column;
}

.eai-tt-sr-form-copy {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

/* 1) For mobile views, switch to vertical stacking */
@media screen and (max-width: 768px) { /* adjust breakpoint as needed */
    .eai-tt-sr-form-copy {
        flex-direction: column;
    }
	
	.eai-tt-sr-output-area {
    min-height: 400px;
}
	
}

.eai-tt-sr-input-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.eai-tt-sr-output-area {
    flex: 2;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.eai-tt-sr-input-area label,
.eai-tt-sr-input-area input,
.eai-tt-sr-input-area select {
    margin-bottom: -10px;
    margin-top: -10px;
}

#eai-tt-sr-button-container1 {
    display: flex;
    justify-content: space-between;
}

#eai-tt-sr-button-container2 {
    display: flex;
    justify-content: center; /* Horizontally center the submit button */
    margin-top: 10px; /* You can adjust this value to increase or decrease the space between the button groups */
}

#eai-tt-sr-submit-all-button {
    width: 200px;
}

.eai-tt-sr-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Centering the resubmit button horizontally */
}

.eai-tt-sr-resubmit {
	margin-bottom: 20px;
	text-align: right;
}

  .slider {
    width: 300px; /* Adjust the width as per your preference */
    height: 10px; /* Adjust the height as per your preference */
    background-color: #ccc; /* Change the background color as desired */
    border-radius: 5px; /* Adjust the border radius as per your preference */
    position: relative;
    cursor: pointer;
  }

  




#eai-tt-saf-mainContainer {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#eai-tt-saf-mainContainer label {
    font-weight: bold;
}

#eai-tt-saf-exam-question,
#eai-tt-saf-answer1 {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#eai-tt-saf-formsContainer {
    margin-bottom: 20px;
}

.eai-tt-saf-form-copy {
    display: flex;
    flex-direction: column;
	margin-bottom: 20px;
	border: 1px solid #ddd;
    padding: 20px;
}

.eai-tt-saf-input-area input,
.eai-tt-saf-input-area textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.eai-tt-saf-output-area {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
	min-height: 100px;
}

.eai-tt-saf-resubmit-button {
	margin-top: 20px;
	width: 200px;
}


#student-qa-mainContainer {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#student-qa-mainContainer label {
    font-weight: bold;
}

#student-qa-question1,
#student-qa-answer1 {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#student-qa-formsContainer {
    margin-bottom: 20px;
}

.student-qa-form-copy {
    display: flex;
    flex-direction: column;
	margin-bottom: 20px;
	border: 1px solid #ddd;
    padding: 20px;
}

.student-qa-form-copy textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.student-qa-output-area {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
	min-height: 100px;
}

.student-qa-resubmit-button {
	margin-top: 20px;
	width: 200px;
}




#lesson_plan_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#lesson_plan_form .form-group {
    margin-bottom: 20px;
}

#lesson_plan_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#lesson_plan_form .form-control {
    width: 250px; /* Adjust the width as needed */
}

#lesson_plan_form button[type="submit"] {
    width: 200px;
}

#output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#export_to_word {
    margin-top: 20px;
    display: inline-block;
}





#eai_tt_a_assessment_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_a_assessment_form .eai_tt_a_form-group {
    margin-bottom: 20px;
}

#eai_tt_a_assessment_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_a_assessment_form .eai_tt_a_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_a_assessment_form button[type="submit"] {
    width: 200px;
}

#eai_tt_a_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_a_export_to_word_assessment {
    margin-top: 20px;
    display: inline-block;
}





#eai_tt_li_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_li_form .eai_tt_li_form-group {
    margin-bottom: 20px;
}

#eai_tt_li_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_li_form .eai_tt_li_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_li_form button[type="submit"] {
    width: 200px;
}

#eai_tt_li_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_li_export_to_word_assessment {
    margin-top: 20px;
    display: inline-block;
}








#eai_tt_ce_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_ce_form .eai_tt_ce_form-group {
    margin-bottom: 20px;
}

#eai_tt_ce_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_ce_form .eai_tt_ce_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_ce_form button[type="submit"] {
    width: 200px;
}

#eai_tt_ce_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_ce_export_to_word {
    margin-top: 20px;
    display: inline-block;
}






#eai_tt_sag_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_sag_form .eai_tt_sag_form-group {
    margin-bottom: 20px;
}

#eai_tt_sag_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_sag_form .eai_tt_sag_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_sag_form button[type="submit"] {
    width: 200px;
}

#eai_tt_sag_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_sag_export_to_word {
    margin-top: 20px;
    display: inline-block;
}





#eai_tt_pw_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_pw_form .eai_tt_pw_form-group {
    margin-bottom: 20px;
}

#eai_tt_pw_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_pw_form .eai_tt_pw_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_pw_form button[type="submit"] {
    width: 200px;
}

#eai_tt_pw_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_pw_export_to_word {
    margin-top: 20px;
    display: inline-block;
}





#eai_tt_gg_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_gg_form .eai_tt_gg_form-group {
    margin-bottom: 20px;
}

#eai_tt_gg_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_gg_form .eai_tt_gg_form-control {
    width: 100%; /* Adjust the width as needed */
    height: 100px; /* Adjust the height as needed */
	resize: vertical; /* Makes textarea only resizable vertically */
}

#eai_tt_gg_form button[type="submit"] {
    width: 200px;
}

#eai_tt_gg_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_gg_export_to_word {
    margin-top: 20px;
    display: inline-block;
}




#eai_tt_aw_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_aw_form .eai_tt_aw_form-group {
    margin-bottom: 20px;
}

#eai_tt_aw_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_aw_form .eai_tt_aw_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_aw_form button[type="submit"] {
    width: 200px;
}

#eai_tt_aw_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_aw_export_to_word_assembly {
    margin-top: 20px;
    display: inline-block;
}






#eai_tt_mtp_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_mtp_form .eai_tt_mtp_form-group {
    margin-bottom: 20px;
}

#eai_tt_mtp_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_mtp_form .eai_tt_mtp_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_mtp_form button[type="submit"] {
    width: 200px;
}

#eai_tt_mtp_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_mtp_export_to_word {
    margin-top: 20px;
    display: inline-block;
}



#eai_tt_let_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_let_form .eai_tt_let_form-group {
    margin-bottom: 20px;
}

#eai_tt_let_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_let_form .eai_tt_let_form-control {
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_let_form button[type="submit"] {
    width: 200px;
}

#eai_tt_let_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_let_export_to_word {
    margin-top: 20px;
    display: inline-block;
}





#eai_tt_er_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_er_form .eai_tt_er_form-group {
    margin-bottom: 20px;
}

#eai_tt_er_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_er_form .eai_tt_er_form-group label {
    display: block;
    margin-bottom: 5px;
}

#eai_tt_er_form .eai_tt_er_form-control {
    width: 100%;
	resize: vertical;
}


#eai_tt_er_form button[type="submit"] {
    width: 200px;
}

#eai_tt_er_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 250px;
    overflow-y: auto;
}

#eai_tt_er_export_to_word {
    margin-top: 20px;
    display: inline-block;
}



#eai_tt_pptw_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_pptw_form .form-group {
    margin-bottom: 20px;
}

#eai_tt_pptw_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_pptw_form .form-group label {
    display: block;
    margin-bottom: 5px;
}

#eai_tt_pptw_form .form-control {
    width: 100%;
	resize: vertical;
}


#eai_tt_pptw_form .eai_tt_pptw_btn {
    width: 200px;
}

#eai_tt_pptw_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 150px;
    overflow-y: auto;
}

#eai_tt_pptw_export_to_ppt {
    margin-top: 20px;
    display: inline-block;
}







#eai_tt_da_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_da_form .eai_tt_da_form-group {
    margin-bottom: 20px;
}

#eai_tt_da_form label {
    display: inline-block;
    width: 250px; /* Adjust the width as needed */
}

#eai_tt_da_form .eai_tt_da_form-group label {
    display: block;
    margin-bottom: 5px;
}

#eai_tt_da_form .eai_tt_da_form-control {
    width: 100%;
    resize: vertical;
}

#eai_tt_da_form .eai_tt_da_btn {
    width: 200px;
}

#eai_tt_da_data_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    overflow: auto;
}

#eai_tt_da_data_output table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#eai_tt_da_data_output th,
#eai_tt_da_data_output td {
    border: 1px solid #ddd;
    padding: 5px;
}

#eai_tt_da_data_output th {
    background-color: #f5f5f5;
    font-weight: bold;
}

#eai_tt_da_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 450px;
    overflow-y: auto;
}

#eai_tt_da_export_to_word {
    margin-top: 20px;
    display: inline-block;
}




#eai_tt_urltosummary_form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 20px;
}

#eai_tt_urltosummary_form .eai_tt_urltosummary_form-group {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

#eai_tt_urltosummary_form label {
    flex: 0 0 auto; /* This means the label won't grow or shrink and will be auto width */
	margin-right: 10px;
}

#eai_tt_urltosummary_form .eai_tt_urltosummary_form-control {
    flex: 1 1 auto; /* This means the input will grow and take up the rest of the space */
    width: auto; /* Override the previous width setting */
}

#eai_tt_urltosummary_form .eai_tt_urltosummary_buttons {
    display: flex;
    justify-content: space-between;
}

#eai_tt_urltosummary_form .eai_tt_urltosummary_buttons button {
    margin-right: 10px;
}

#eai_tt_urltosummary_form .eai_tt_urltosummary_buttons button:last-child {
    margin-right: 0;
}


#eai_tt_urltosummary_output {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    height: 450px;
    overflow-y: auto;
}

#eai_tt_urltosummary_export_to_word {
	margin: 10px;
}

/* Media Query for smaller screens */
@media (max-width: 768px) { /* Adjust 768px to whatever breakpoint you'd like */
    #eai_tt_urltosummary_form .eai_tt_urltosummary_buttons {
        flex-direction: column;
        align-items: stretch; /* Makes each button take up the full width */
    }

    #eai_tt_urltosummary_form .eai_tt_urltosummary_buttons button {
        margin-right: 0;
        margin-bottom: 10px; /* Adds space between stacked buttons */
    }

    #eai_tt_urltosummary_form .eai_tt_urltosummary_buttons button:last-child {
        margin-bottom: 0; /* Removes the margin from the last button */
    }
}