.elementor-46759 .elementor-element.elementor-element-f318fca{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-46759 .elementor-element.elementor-element-f318fca.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-cc82f30{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-46759 .elementor-element.elementor-element-cc82f30.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-eb4d5c7{--display:flex;}.elementor-46759 .elementor-element.elementor-element-38e0dd9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-b19f02c{--display:flex;}.elementor-46759 .elementor-element.elementor-element-b19f02c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-301d3b7.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-d96e0ab{--display:flex;}.elementor-46759 .elementor-element.elementor-element-d96e0ab.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-c6fa845{--display:flex;}.elementor-46759 .elementor-element.elementor-element-1a7f224{--n-accordion-title-font-size:18px;width:auto;max-width:auto;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:18px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:9px 9px 9px 9px;--n-accordion-title-normal-color:#555151B0;--n-accordion-title-hover-color:#FFFFFF;--n-accordion-title-active-color:#FFFFFF;--n-accordion-icon-size:20px;}.elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{background-color:#ACABAB00;}.elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title:hover{background-color:#1AB69D;}.elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{background-color:#1AB69D;}:where( .elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item ) > .e-con{background-color:#EEEBEB;border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:12px;--padding-right:12px;--padding-bottom:12px;--padding-left:12px;}.elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container{background-color:#FFFFFF;}.elementor-46759 .elementor-element.elementor-element-1a7f224.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-46759 .elementor-element.elementor-element-1a7f224 {--n-accordion-padding:16px 25px 16px 28px;}:where( .elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Poppins", Sans-serif;font-weight:600;font-style:normal;}.elementor-46759 .elementor-element.elementor-element-1a7f224 :where( .elementor-46759 .elementor-element.elementor-element-1a7f224 > .elementor-widget-container > .e-n-accordion > .e-n-accordion-item:not([open]) > .e-n-accordion-item-title:not(hover) > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{text-shadow:0px 0px 0px rgba(0,0,0,0.3);-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#000;stroke:#000;}.elementor-46759 .elementor-element.elementor-element-9a25248 .elementor-heading-title{font-family:"Yuji Boku", Sans-serif;color:#EE4A62;}@media(max-width:767px){.elementor-46759 .elementor-element.elementor-element-f318fca{--width:500px;}.elementor-46759 .elementor-element.elementor-element-38e0dd9{width:var( --container-widget-width, 280px );max-width:280px;--container-widget-width:280px;--container-widget-flex-grow:0;}.elementor-46759 .elementor-element.elementor-element-301d3b7{width:var( --container-widget-width, 280px );max-width:280px;--container-widget-width:280px;--container-widget-flex-grow:0;}}@media(min-width:768px){.elementor-46759 .elementor-element.elementor-element-f318fca{--width:102.963%;}.elementor-46759 .elementor-element.elementor-element-b19f02c{--width:96.364%;}.elementor-46759 .elementor-element.elementor-element-d96e0ab{--width:96.364%;}}/* Start custom CSS for shortcode, class: .elementor-element-301d3b7 */@media (max-width: 767px) { /* Elementor's common mobile breakpoint */ /* Force the main Elementor containers to truly be 100% width on mobile */ /* This targets the Elementor section or column that holds your shortcode */ .elementor-section.elementor-section-boxed > .elementor-container, .elementor-column-gap-default > .elementor-column > .elementor-widget-wrap, .elementor-element .elementor-widget-container, .e-con.e-flex > .e-con-inner, /* Elementor flex container inner */ .e-con.e-flex { /* Elementor flex container */ max-width: 100% !important; width: 100% !important; padding-left: 0px !important; /* Remove Elementor's default column/section padding */ padding-right: 0px !important; /* Remove Elementor's default column/section padding */ margin-left: 0px !important; /* Ensure no unwanted margins push content in */ margin-right: 0px !important; /* Ensure no unwanted margins push content in */ box-sizing: border-box !important; } /* Override Elementor's variables that might be setting max-width to 767px */ :root { --container-max-width: 100% !important; --content-width: 100% !important; } /* Now, ensure your shortcode module itself takes the full available width */ .myaischool-lt-mcq-module { width: 100% !important; max-width: 100% !important; /* Remove any internal padding from the module that might be squeezing it */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Ensure the main content and palette areas also take full width and stack */ .myaischool-lt-mcq-main-content, .myaischool-lt-mcq-question-area, .myaischool-lt-mcq-palette-area { min-width: unset !important; /* Override desktop minimum widths */ width: 100% !important; max-width: 100% !important; flex: none !important; /* Disable flex growth/shrink to ensure 100% width on mobile */ float: none !important; /* Remove any floats */ clear: both !important; /* Clear any floats */ box-sizing: border-box !important; /* Add a consistent inner padding for aesthetic spacing within the module's content */ padding-left: 15px !important; padding-right: 15px !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure other specific elements within the module also expand */ .myaischool-lt-mcq-setup-form, .myaischool-lt-mcq-setup-form label, .myaischool-lt-mcq-setup-form input[type="number"], .myaischool-lt-generate-mcq-button, .myaischool-lt-mcq-actions, .myaischool-lt-mcq-action-button, .myaischool-lt-mcq-submit-button, .mcq-context-info { width: 100% !important; max-width: none !important; /* Important for inputs and buttons that might have fixed widths */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure specific inputs within the form take full width */ .myaischool-lt-mcq-setup-form input[type="number"] { width: 100% !important; /* Specific rule for the number input */ } /* Reduce default gaps if present on mobile */ .myaischool-lt-mcq-main-content { gap: 0px !important; /* Reduce gap between main content and palette when stacked */ } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-301d3b7 */@media (max-width: 767px) { /* Elementor's common mobile breakpoint */ /* Force the main Elementor containers to truly be 100% width on mobile */ /* This targets the Elementor section or column that holds your shortcode */ .elementor-section.elementor-section-boxed > .elementor-container, .elementor-column-gap-default > .elementor-column > .elementor-widget-wrap, .elementor-element .elementor-widget-container, .e-con.e-flex > .e-con-inner, /* Elementor flex container inner */ .e-con.e-flex { /* Elementor flex container */ max-width: 100% !important; width: 100% !important; padding-left: 0px !important; /* Remove Elementor's default column/section padding */ padding-right: 0px !important; /* Remove Elementor's default column/section padding */ margin-left: 0px !important; /* Ensure no unwanted margins push content in */ margin-right: 0px !important; /* Ensure no unwanted margins push content in */ box-sizing: border-box !important; } /* Override Elementor's variables that might be setting max-width to 767px */ :root { --container-max-width: 100% !important; --content-width: 100% !important; } /* Now, ensure your shortcode module itself takes the full available width */ .myaischool-lt-mcq-module { width: 100% !important; max-width: 100% !important; /* Remove any internal padding from the module that might be squeezing it */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Ensure the main content and palette areas also take full width and stack */ .myaischool-lt-mcq-main-content, .myaischool-lt-mcq-question-area, .myaischool-lt-mcq-palette-area { min-width: unset !important; /* Override desktop minimum widths */ width: 100% !important; max-width: 100% !important; flex: none !important; /* Disable flex growth/shrink to ensure 100% width on mobile */ float: none !important; /* Remove any floats */ clear: both !important; /* Clear any floats */ box-sizing: border-box !important; /* Add a consistent inner padding for aesthetic spacing within the module's content */ padding-left: 15px !important; padding-right: 15px !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure other specific elements within the module also expand */ .myaischool-lt-mcq-setup-form, .myaischool-lt-mcq-setup-form label, .myaischool-lt-mcq-setup-form input[type="number"], .myaischool-lt-generate-mcq-button, .myaischool-lt-mcq-actions, .myaischool-lt-mcq-action-button, .myaischool-lt-mcq-submit-button, .mcq-context-info { width: 100% !important; max-width: none !important; /* Important for inputs and buttons that might have fixed widths */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure specific inputs within the form take full width */ .myaischool-lt-mcq-setup-form input[type="number"] { width: 100% !important; /* Specific rule for the number input */ } /* Reduce default gaps if present on mobile */ .myaischool-lt-mcq-main-content { gap: 0px !important; /* Reduce gap between main content and palette when stacked */ } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-301d3b7 */@media (max-width: 767px) { /* Elementor's common mobile breakpoint */ /* Force the main Elementor containers to truly be 100% width on mobile */ /* This targets the Elementor section or column that holds your shortcode */ .elementor-section.elementor-section-boxed > .elementor-container, .elementor-column-gap-default > .elementor-column > .elementor-widget-wrap, .elementor-element .elementor-widget-container, .e-con.e-flex > .e-con-inner, /* Elementor flex container inner */ .e-con.e-flex { /* Elementor flex container */ max-width: 100% !important; width: 100% !important; padding-left: 0px !important; /* Remove Elementor's default column/section padding */ padding-right: 0px !important; /* Remove Elementor's default column/section padding */ margin-left: 0px !important; /* Ensure no unwanted margins push content in */ margin-right: 0px !important; /* Ensure no unwanted margins push content in */ box-sizing: border-box !important; } /* Override Elementor's variables that might be setting max-width to 767px */ :root { --container-max-width: 100% !important; --content-width: 100% !important; } /* Now, ensure your shortcode module itself takes the full available width */ .myaischool-lt-mcq-module { width: 100% !important; max-width: 100% !important; /* Remove any internal padding from the module that might be squeezing it */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Ensure the main content and palette areas also take full width and stack */ .myaischool-lt-mcq-main-content, .myaischool-lt-mcq-question-area, .myaischool-lt-mcq-palette-area { min-width: unset !important; /* Override desktop minimum widths */ width: 100% !important; max-width: 100% !important; flex: none !important; /* Disable flex growth/shrink to ensure 100% width on mobile */ float: none !important; /* Remove any floats */ clear: both !important; /* Clear any floats */ box-sizing: border-box !important; /* Add a consistent inner padding for aesthetic spacing within the module's content */ padding-left: 15px !important; padding-right: 15px !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure other specific elements within the module also expand */ .myaischool-lt-mcq-setup-form, .myaischool-lt-mcq-setup-form label, .myaischool-lt-mcq-setup-form input[type="number"], .myaischool-lt-generate-mcq-button, .myaischool-lt-mcq-actions, .myaischool-lt-mcq-action-button, .myaischool-lt-mcq-submit-button, .mcq-context-info { width: 100% !important; max-width: none !important; /* Important for inputs and buttons that might have fixed widths */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure specific inputs within the form take full width */ .myaischool-lt-mcq-setup-form input[type="number"] { width: 100% !important; /* Specific rule for the number input */ } /* Reduce default gaps if present on mobile */ .myaischool-lt-mcq-main-content { gap: 0px !important; /* Reduce gap between main content and palette when stacked */ } }/* End custom CSS */ /* Start custom CSS for shortcode, class: .elementor-element-301d3b7 */@media (max-width: 767px) { /* Elementor's common mobile breakpoint */ /* Force the main Elementor containers to truly be 100% width on mobile */ /* This targets the Elementor section or column that holds your shortcode */ .elementor-section.elementor-section-boxed > .elementor-container, .elementor-column-gap-default > .elementor-column > .elementor-widget-wrap, .elementor-element .elementor-widget-container, .e-con.e-flex > .e-con-inner, /* Elementor flex container inner */ .e-con.e-flex { /* Elementor flex container */ max-width: 100% !important; width: 100% !important; padding-left: 0px !important; /* Remove Elementor's default column/section padding */ padding-right: 0px !important; /* Remove Elementor's default column/section padding */ margin-left: 0px !important; /* Ensure no unwanted margins push content in */ margin-right: 0px !important; /* Ensure no unwanted margins push content in */ box-sizing: border-box !important; } /* Override Elementor's variables that might be setting max-width to 767px */ :root { --container-max-width: 100% !important; --content-width: 100% !important; } /* Now, ensure your shortcode module itself takes the full available width */ .myaischool-lt-mcq-module { width: 100% !important; max-width: 100% !important; /* Remove any internal padding from the module that might be squeezing it */ padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* Ensure the main content and palette areas also take full width and stack */ .myaischool-lt-mcq-main-content, .myaischool-lt-mcq-question-area, .myaischool-lt-mcq-palette-area { min-width: unset !important; /* Override desktop minimum widths */ width: 100% !important; max-width: 100% !important; flex: none !important; /* Disable flex growth/shrink to ensure 100% width on mobile */ float: none !important; /* Remove any floats */ clear: both !important; /* Clear any floats */ box-sizing: border-box !important; /* Add a consistent inner padding for aesthetic spacing within the module's content */ padding-left: 15px !important; padding-right: 15px !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure other specific elements within the module also expand */ .myaischool-lt-mcq-setup-form, .myaischool-lt-mcq-setup-form label, .myaischool-lt-mcq-setup-form input[type="number"], .myaischool-lt-generate-mcq-button, .myaischool-lt-mcq-actions, .myaischool-lt-mcq-action-button, .myaischool-lt-mcq-submit-button, .mcq-context-info { width: 100% !important; max-width: none !important; /* Important for inputs and buttons that might have fixed widths */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; } /* Ensure specific inputs within the form take full width */ .myaischool-lt-mcq-setup-form input[type="number"] { width: 100% !important; /* Specific rule for the number input */ } /* Reduce default gaps if present on mobile */ .myaischool-lt-mcq-main-content { gap: 0px !important; /* Reduce gap between main content and palette when stacked */ } }/* End custom CSS */ /* Start custom CSS for nested-accordion, class: .elementor-element-1a7f224 */@media (max-width: 767px) { /* Standard mobile breakpoint */ .your-shortcode-root-div { /* Replace with the actual class */ width: 100% !important; max-width: 100% !important; padding: 0 15px !important; /* Add some side padding for aesthetics */ box-sizing: border-box !important; } /* If the "Topic" dropdown and "Generate" button are also compressed */ .your-shortcode-root-div .topic-section { /* Find the class for this part */ width: 100% !important; } .your-shortcode-root-div select { /* Target the dropdown directly if needed */ width: 100% !important; } .your-shortcode-root-div .generate-button { /* Target the button */ width: 100% !important; /* Or whatever styling makes sense */ } } /* Example if it's inside an Elementor shortcode widget */ .elementor-widget-shortcode .myaischool-lt-mcq-module { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* Add any other necessary styles like padding: 0; */ } .myaischool-lt-mcq-module { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }/* End custom CSS */