diff --git a/amd/build/components.min.js b/amd/build/components.min.js
index 8a4a0ba..dd3d25b 100644
--- a/amd/build/components.min.js
+++ b/amd/build/components.min.js
@@ -1,3 +1,3 @@
-define("tiny_c4l/components",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={components:[{id:"0",name:"keyconcept",type:"contextual",imageClass:"c4l-keyconcept-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-keyconcept {{VARIANTS}}" aria-label="{{#keyconcept}}">{{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"1",name:"tip",type:"contextual",imageClass:"c4l-tip-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-tip {{VARIANTS}}" aria-label="{{#tip}}">\n            {{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"2",name:"reminder",type:"contextual",imageClass:"c4l-reminder-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-reminder {{VARIANTS}}" \n            aria-label="{{#reminder}}">\n            {{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"3",name:"quote",type:"contextual",imageClass:"c4l-quote-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-quote {{VARIANTS}}"\n            aria-label="{{#quote}}">\n            <div class="c4l-quote-body"><div class="c4l-quote-line"></div><div class="c4l-quote-text">\n            <p>{{PLACEHOLDER}}</p>\n            </div></div>\n            {{VARIANTSHTML}}\n            </div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width","quote"]},{id:"4",name:"dodontcards",type:"contextual",imageClass:"c4l-dodontcards-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-dodontcards {{VARIANTS}}"\n            aria-label="{{#dodontcards}}">\n            <div class="c4l-dodontcards-do" aria-label="{{#do-card}}">{{PLACEHOLDER}}</div>\n            <div class="c4l-dodontcards-dont" aria-label="{{#dont-card}}">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            Phasellus a posuere nibh, eu mollis lacus.\n            Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n            nascetur ridiculus mus.</div></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"5",name:"readingcontext",type:"contextual",imageClass:"c4l-readingcontext-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-readingcontext {{VARIANTS}}"\n            aria-label="{{#readingcontext}}">\n            <p>{{PLACEHOLDER}}</p>{{VARIANTSHTML}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi. Lorem ipsum dolor sit amet. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.",variants:["full-width","quote","comfort-reading"]},{id:"6",name:"example",type:"contextual",imageClass:"c4l-example-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-example {{VARIANTS}}"\n            aria-label="{{#example}}"><h1>Lorem ipsum dolor sit amet</h1> \n            <p>{{PLACEHOLDER}}</p></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"7",name:"figure",type:"contextual",imageClass:"c4l-figure-icon",code:'<p class="c4l-spacer"></p><figure class="c4lv-figure {{VARIANTS}}"\n            aria-label="{{#figure}}"><img src="" alt="Lorem ipsum dolor sit amet">\n            {{VARIANTSHTML}}</figure><p><br></p>',text:"Consectetur adipiscing elit.",variants:["full-width","caption"]},{id:"8",name:"tag",type:"contextual",imageClass:"c4l-tag-icon",code:'<p class="c4l-spacer"></p><div class="c4l-display-left" aria-label="{{#tag}}">\n            <div class="c4lv-tag {{VARIANTS}}">{{PLACEHOLDER}}</div></div>',text:"Lorem ipsum",variants:["align-right"]},{id:"9",name:"inlinetag",type:"contextual",imageClass:"c4l-inlinetag-icon",code:'<span class="c4lv-inlinetag {{VARIANTS}}" aria-label="{{#inlinetag}}">{{PLACEHOLDER}}</span>',text:"Text",variants:[]},{id:"10",name:"attention",type:"procedural",imageClass:"c4l-attention-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-attention {{VARIANTS}}" aria-label="{{#attention}}">\n            "{{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"11",name:"estimatedtime",type:"procedural",imageClass:"c4l-estimatedtime-icon",code:'<p class="c4l-spacer"></p><div class="c4l-inline-group"><div class="c4lv-estimatedtime {{VARIANTS}}"\n            aria-label="{{#estimatedtime}}">{{PLACEHOLDER}} <span>min</span></div></div>',text:"15",variants:["align-left"]},{id:"12",name:"duedate",type:"procedural",imageClass:"c4l-duedate-icon",code:'<p class="c4l-spacer"></p><div class="c4l-inline-group"><div class="c4lv-duedate {{VARIANTS}}"\n            aria-label="{{#duedate}}">{{PLACEHOLDER}}</div></div>',text:"November 17th",variants:["align-left"]},{id:"13",name:"proceduralcontext",type:"procedural",imageClass:"c4l-proceduralcontext-icon",code:'<p class="c4l-spacer"></p><p class="c4lv-proceduralcontext {{VARIANTS}}"\n            aria-label="{{#proceduralcontext}}" >\n            {{PLACEHOLDER}}</p><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet, fermentum dolor ac, venenatis turpis.",variants:["full-width"]},{id:"14",name:"learningoutcomes",type:"procedural",imageClass:"c4l-learningoutcomes-icon",code:'<p class="c4l-spacer"></p>\n            <div class="c4lv-learningoutcomes {{VARIANTS}}" aria-label="{{#learningoutcomes}}">\n            <h6 class="c4l-learningoutcomes-title">Learning Outcomes</h6>\n            <ul class="c4l-learningoutcomes-list"><li>{{PLACEHOLDER}}</li><li>Curabitur non nulla sit amet\n            nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</li>\n            <li> Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. \n            Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li></ul></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.",variants:["full-width","ordered-list"]},{id:"15",name:"gradingvalue",type:"evaluative",imageClass:"c4l-gradingvalue-icon",code:'<p class="c4l-spacer"></p><div class="c4l-inline-group"><div class="c4lv-gradingvalue {{VARIANTS}}" \n            aria-label="{{#gradingvalue}}"><span>Grading value: </span>{{PLACEHOLDER}}</div></div>',text:"33.3%",variants:["align-left"]},{id:"16",name:"expectedfeedback",type:"evaluative",imageClass:"c4l-expectedfeedback-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-expectedfeedback {{VARIANTS}}"\n            aria-label="{{#expectedfeedback}}">\n            <p>{{PLACEHOLDER}}</p></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width"]},{id:"17",name:"allpurposecard",type:"helper",imageClass:"c4l-allpurposecard-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-allpurposecard {{VARIANTS}}"\n            aria-label="{{#allpurposecard}}"><p>{{PLACEHOLDER}}</p></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]}]};return _exports.default=_default,_exports.default}));
+define("tiny_c4l/components",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;var _default={components:[{id:"0",name:"keyconcept",type:"contextual",imageClass:"c4l-keyconcept-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-keyconcept {{VARIANTS}}" aria-label="{{#keyconcept}}">{{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"1",name:"tip",type:"contextual",imageClass:"c4l-tip-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-tip {{VARIANTS}}" aria-label="{{#tip}}">\n            {{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"2",name:"reminder",type:"contextual",imageClass:"c4l-reminder-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-reminder {{VARIANTS}}" \n            aria-label="{{#reminder}}">\n            {{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"3",name:"quote",type:"contextual",imageClass:"c4l-quote-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-quote {{VARIANTS}}"\n            aria-label="{{#quote}}">\n            <div class="c4l-quote-body"><div class="c4l-quote-line"></div><div class="c4l-quote-text">\n            <p>{{PLACEHOLDER}}</p>\n            </div></div>\n            {{VARIANTSHTML}}\n            </div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width","quote"]},{id:"4",name:"dodontcards",type:"contextual",imageClass:"c4l-dodontcards-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-dodontcards {{VARIANTS}}"\n            aria-label="{{#dodontcards}}">\n            <div class="c4l-dodontcards-do" aria-label="{{#do-card}}">{{PLACEHOLDER}}</div>\n            <div class="c4l-dodontcards-dont" aria-label="{{#dont-card}}">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            Phasellus a posuere nibh, eu mollis lacus.\n            Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n            nascetur ridiculus mus.</div></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"5",name:"readingcontext",type:"contextual",imageClass:"c4l-readingcontext-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-readingcontext {{VARIANTS}}"\n            aria-label="{{#readingcontext}}">\n            <p>{{PLACEHOLDER}}</p>{{VARIANTSHTML}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi. Lorem ipsum dolor sit amet. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.",variants:["full-width","quote","comfort-reading"]},{id:"6",name:"example",type:"contextual",imageClass:"c4l-example-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-example {{VARIANTS}}"\n            aria-label="{{#example}}"><h1>Lorem ipsum dolor sit amet</h1> \n            <p>{{PLACEHOLDER}}</p></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"7",name:"figure",type:"contextual",imageClass:"c4l-figure-icon",code:'<p class="c4l-spacer"></p><figure class="c4lv-figure {{VARIANTS}}"\n            aria-label="{{#figure}}"><img src="" alt="Lorem ipsum dolor sit amet">\n            {{VARIANTSHTML}}</figure><p><br></p>',text:"Consectetur adipiscing elit.",variants:["full-width","caption"]},{id:"8",name:"tag",type:"contextual",imageClass:"c4l-tag-icon",code:'<p class="c4l-spacer"></p><div class="c4l-display-left" aria-label="{{#tag}}">\n            <div class="c4lv-tag {{VARIANTS}}">{{PLACEHOLDER}}</div></div>',text:"Lorem ipsum",variants:["align-right"]},{id:"9",name:"inlinetag",type:"contextual",imageClass:"c4l-inlinetag-icon",code:'<span class="c4lv-inlinetag {{VARIANTS}}" aria-label="{{#inlinetag}}">{{PLACEHOLDER}}</span>',text:"Text",variants:[]},{id:"10",name:"attention",type:"procedural",imageClass:"c4l-attention-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-attention {{VARIANTS}}" aria-label="{{#attention}}">\n            "{{PLACEHOLDER}}</div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.",variants:["full-width"]},{id:"11",name:"estimatedtime",type:"procedural",imageClass:"c4l-estimatedtime-icon",code:'<p class="c4l-spacer"></p><div class="c4l-inline-group"><div class="c4lv-estimatedtime {{VARIANTS}}"\n            aria-label="{{#estimatedtime}}">{{PLACEHOLDER}} <span>min</span></div></div>',text:"15",variants:["align-left"]},{id:"12",name:"duedate",type:"procedural",imageClass:"c4l-duedate-icon",code:'<p class="c4l-spacer"></p><div class="c4l-inline-group"><div class="c4lv-duedate {{VARIANTS}}"\n            aria-label="{{#duedate}}">{{PLACEHOLDER}}</div></div>',text:"November 17th",variants:["align-left"]},{id:"13",name:"proceduralcontext",type:"procedural",imageClass:"c4l-proceduralcontext-icon",code:'<p class="c4l-spacer"></p><p class="c4lv-proceduralcontext {{VARIANTS}}"\n            aria-label="{{#proceduralcontext}}" >\n            {{PLACEHOLDER}}</p><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet, fermentum dolor ac, venenatis turpis.",variants:["full-width"]},{id:"14",name:"learningoutcomes",type:"procedural",imageClass:"c4l-learningoutcomes-icon",code:'<p class="c4l-spacer"></p>\n            <div class="c4lv-learningoutcomes {{VARIANTS}}" aria-label="{{#learningoutcomes}}">\n            <h6 class="c4l-learningoutcomes-title">Learning Outcomes</h6>\n            <ul class="c4l-learningoutcomes-list"><li>{{PLACEHOLDER}}</li><li>Curabitur non nulla sit amet\n            nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</li>\n            <li> Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. \n            Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li></ul></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.",variants:["full-width","ordered-list"]},{id:"15",name:"gradingvalue",type:"evaluative",imageClass:"c4l-gradingvalue-icon",code:'<p class="c4l-spacer"></p><div class="c4l-inline-group"><div class="c4lv-gradingvalue {{VARIANTS}}" \n            aria-label="{{#gradingvalue}}"><span>Grading value: </span>{{PLACEHOLDER}}</div></div>',text:"33.3%",variants:["align-left"]},{id:"16",name:"expectedfeedback",type:"evaluative",imageClass:"c4l-expectedfeedback-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-expectedfeedback {{VARIANTS}}"\n            aria-label="{{#expectedfeedback}}">\n            <p>{{PLACEHOLDER}}</p></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width"]},{id:"17",name:"allpurposecard",type:"helper",imageClass:"c4l-allpurposecard-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-allpurposecard {{VARIANTS}}"\n            aria-label="{{#allpurposecard}}"><p>{{PLACEHOLDER}}</p></div><p><br></p>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",variants:["full-width"]},{id:"18",name:"hiddenanswer",type:"evaluative",imageClass:"c4l-hiddenanswer-icon",code:'<p class="c4l-spacer"></p><div class="c4lv-hiddenanswer {{VARIANTS}}" aria-label="{{#hiddenanswer}}">\n            <button class="btn btn-secondary show-hiddenanswer" type="button"  data-toggle="collapse"\n            data-target="{{@ID}}" aria-expanded="false" aria-controls="{{@ID}}">{{#showanswer}}\n            </button><div id="{{@ID}}" class="collapse">\n            <div class="card card-body hiddenanswer-content">{{PLACEHOLDER}}</div></div>',text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.",variants:["full-width"]}]};return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=components.min.js.map
\ No newline at end of file
diff --git a/amd/build/components.min.js.map b/amd/build/components.min.js.map
index 36815ad..a8604c6 100644
--- a/amd/build/components.min.js.map
+++ b/amd/build/components.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"components.min.js","sources":["../src/components.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Tiny C4L components.\n *\n * @module      tiny_c4l/components\n * @copyright   2022 Marc Català <reskit@gmail.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst components = [\n    {\n        id: \"0\",\n        name: \"keyconcept\",\n        type: \"contextual\",\n        imageClass: \"c4l-keyconcept-icon\",\n        code:\n            '<p class=\"c4l-spacer\"></p><div class=\"c4lv-keyconcept {{VARIANTS}}\" aria-label=\"{{#keyconcept}}\">' +\n            \"{{PLACEHOLDER}}</div><p><br></p>\",\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"1\",\n        name: \"tip\",\n        type: \"contextual\",\n        imageClass: \"c4l-tip-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-tip {{VARIANTS}}\" aria-label=\"{{#tip}}\">\n            {{PLACEHOLDER}}</div><p><br></p>`,\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"2\",\n        name: \"reminder\",\n        type: \"contextual\",\n        imageClass: \"c4l-reminder-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-reminder {{VARIANTS}}\" \n            aria-label=\"{{#reminder}}\">\n            {{PLACEHOLDER}}</div><p><br></p>`,\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"3\",\n        name: \"quote\",\n        type: \"contextual\",\n        imageClass: \"c4l-quote-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-quote {{VARIANTS}}\"\n            aria-label=\"{{#quote}}\">\n            <div class=\"c4l-quote-body\"><div class=\"c4l-quote-line\"></div><div class=\"c4l-quote-text\">\n            <p>{{PLACEHOLDER}}</p>\n            </div></div>\n            {{VARIANTSHTML}}\n            </div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\",\n        variants: [\"full-width\", \"quote\"],\n    },\n    {\n        id: \"4\",\n        name: \"dodontcards\",\n        type: \"contextual\",\n        imageClass: \"c4l-dodontcards-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-dodontcards {{VARIANTS}}\"\n            aria-label=\"{{#dodontcards}}\">\n            <div class=\"c4l-dodontcards-do\" aria-label=\"{{#do-card}}\">{{PLACEHOLDER}}</div>\n            <div class=\"c4l-dodontcards-dont\" aria-label=\"{{#dont-card}}\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            Phasellus a posuere nibh, eu mollis lacus.\n            Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n            nascetur ridiculus mus.</div></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\" +\n            \"Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"5\",\n        name: \"readingcontext\",\n        type: \"contextual\",\n        imageClass: \"c4l-readingcontext-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-readingcontext {{VARIANTS}}\"\n            aria-label=\"{{#readingcontext}}\">\n            <p>{{PLACEHOLDER}}</p>{{VARIANTSHTML}}</div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae,\" +\n            \" posuere egestas nisi. Lorem ipsum dolor sit amet. \" +\n            \"Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.\",\n        variants: [\"full-width\", \"quote\", \"comfort-reading\"],\n    },\n    {\n        id: \"6\",\n        name: \"example\",\n        type: \"contextual\",\n        imageClass: \"c4l-example-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-example {{VARIANTS}}\"\n            aria-label=\"{{#example}}\"><h1>Lorem ipsum dolor sit amet</h1> \n            <p>{{PLACEHOLDER}}</p></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" +\n            \" Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\" +\n            \" nascetur ridiculus mus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"7\",\n        name: \"figure\",\n        type: \"contextual\",\n        imageClass: \"c4l-figure-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><figure class=\"c4lv-figure {{VARIANTS}}\"\n            aria-label=\"{{#figure}}\"><img src=\"\" alt=\"Lorem ipsum dolor sit amet\">\n            {{VARIANTSHTML}}</figure><p><br></p>`,\n        text: \"Consectetur adipiscing elit.\",\n        variants: [\"full-width\", \"caption\"],\n    },\n    {\n        id: \"8\",\n        name: \"tag\",\n        type: \"contextual\",\n        imageClass: \"c4l-tag-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-display-left\" aria-label=\"{{#tag}}\">\n            <div class=\"c4lv-tag {{VARIANTS}}\">{{PLACEHOLDER}}</div></div>`,\n        text: \"Lorem ipsum\",\n        variants: [\"align-right\"],\n    },\n    {\n        id: \"9\",\n        name: \"inlinetag\",\n        type: \"contextual\",\n        imageClass: \"c4l-inlinetag-icon\",\n        code: `<span class=\"c4lv-inlinetag {{VARIANTS}}\" aria-label=\"{{#inlinetag}}\">{{PLACEHOLDER}}</span>`,\n        text: \"Text\",\n        variants: [],\n    },\n    {\n        id: \"10\",\n        name: \"attention\",\n        type: \"procedural\",\n        imageClass: \"c4l-attention-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-attention {{VARIANTS}}\" aria-label=\"{{#attention}}\">\n            \"{{PLACEHOLDER}}</div><p><br></p>`,\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"11\",\n        name: \"estimatedtime\",\n        type: \"procedural\",\n        imageClass: \"c4l-estimatedtime-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-inline-group\"><div class=\"c4lv-estimatedtime {{VARIANTS}}\"\n            aria-label=\"{{#estimatedtime}}\">{{PLACEHOLDER}} <span>min</span></div></div>`,\n        text: \"15\",\n        variants: [\"align-left\"],\n    },\n    {\n        id: \"12\",\n        name: \"duedate\",\n        type: \"procedural\",\n        imageClass: \"c4l-duedate-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-inline-group\"><div class=\"c4lv-duedate {{VARIANTS}}\"\n            aria-label=\"{{#duedate}}\">{{PLACEHOLDER}}</div></div>`,\n        text: \"November 17th\",\n        variants: [\"align-left\"],\n    },\n    {\n        id: \"13\",\n        name: \"proceduralcontext\",\n        type: \"procedural\",\n        imageClass: \"c4l-proceduralcontext-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><p class=\"c4lv-proceduralcontext {{VARIANTS}}\"\n            aria-label=\"{{#proceduralcontext}}\" >\n            {{PLACEHOLDER}}</p><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\" +\n            \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet,\" +\n            \" fermentum dolor ac, venenatis turpis.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"14\",\n        name: \"learningoutcomes\",\n        type: \"procedural\",\n        imageClass: \"c4l-learningoutcomes-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p>\n            <div class=\"c4lv-learningoutcomes {{VARIANTS}}\" aria-label=\"{{#learningoutcomes}}\">\n            <h6 class=\"c4l-learningoutcomes-title\">Learning Outcomes</h6>\n            <ul class=\"c4l-learningoutcomes-list\"><li>{{PLACEHOLDER}}</li><li>Curabitur non nulla sit amet\n            nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</li>\n            <li> Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. \n            Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li></ul></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, \" +\n            \"enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.\",\n        variants: [\"full-width\", \"ordered-list\"],\n    },\n    {\n        id: \"15\",\n        name: \"gradingvalue\",\n        type: \"evaluative\",\n        imageClass: \"c4l-gradingvalue-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-inline-group\"><div class=\"c4lv-gradingvalue {{VARIANTS}}\" \n            aria-label=\"{{#gradingvalue}}\"><span>Grading value: </span>{{PLACEHOLDER}}</div></div>`,\n        text: \"33.3%\",\n        variants: [\"align-left\"],\n    },\n    {\n        id: \"16\",\n        name: \"expectedfeedback\",\n        type: \"evaluative\",\n        imageClass: \"c4l-expectedfeedback-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-expectedfeedback {{VARIANTS}}\"\n            aria-label=\"{{#expectedfeedback}}\">\n            <p>{{PLACEHOLDER}}</p></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"17\",\n        name: \"allpurposecard\",\n        type: \"helper\",\n        imageClass: \"c4l-allpurposecard-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-allpurposecard {{VARIANTS}}\"\n            aria-label=\"{{#allpurposecard}}\"><p>{{PLACEHOLDER}}</p></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\" +\n            \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n        variants: [\"full-width\"],\n    },\n];\n\nexport default {\n    components,\n};\n"],"names":["components","id","name","type","imageClass","code","text","variants"],"mappings":"0JA2Qe,CACXA,WArPe,CACf,CACIC,GAAI,IACJC,KAAM,aACNC,KAAM,aACNC,WAAY,sBACZC,KACI,oIAEJC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,yIAGAC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,WACNC,KAAM,aACNC,WAAY,oBACZC,iKAIAC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,QACNC,KAAM,aACNC,WAAY,iBACZC,+UAQAC,KACI,4IAEJC,SAAU,CAAC,aAAc,UAE7B,CACIN,GAAI,IACJC,KAAM,cACNC,KAAM,aACNC,WAAY,uBACZC,6kBASAC,KACI,kOAGJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,iBACNC,KAAM,aACNC,WAAY,0BACZC,mMAIAC,KACI,iNAGJC,SAAU,CAAC,aAAc,QAAS,oBAEtC,CACIN,GAAI,IACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,yMAIAC,KACI,mOAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,SACNC,KAAM,aACNC,WAAY,kBACZC,gNAIAC,KAAM,+BACNC,SAAU,CAAC,aAAc,YAE7B,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,kKAGAC,KAAM,cACNC,SAAU,CAAC,gBAEf,CACIN,GAAI,IACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,oGACAC,KAAM,OACNC,SAAU,IAEd,CACIN,GAAI,KACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,sJAGAC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,gBACNC,KAAM,aACNC,WAAY,yBACZC,sMAGAC,KAAM,KACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,yKAGAC,KAAM,gBACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,oBACNC,KAAM,aACNC,WAAY,6BACZC,+KAIAC,KACI,mSAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,0oBAQAC,KACI,uKAEJC,SAAU,CAAC,aAAc,iBAE7B,CACIN,GAAI,KACJC,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,gNAGAC,KAAM,QACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,uLAIAC,KACI,4IAEJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,iBACNC,KAAM,SACNC,WAAY,0BACZC,qKAGAC,KACI,mOAGJC,SAAU,CAAC"}
\ No newline at end of file
+{"version":3,"file":"components.min.js","sources":["../src/components.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Tiny C4L components.\n *\n * @module      tiny_c4l/components\n * @copyright   2022 Marc Català <reskit@gmail.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst components = [\n    {\n        id: \"0\",\n        name: \"keyconcept\",\n        type: \"contextual\",\n        imageClass: \"c4l-keyconcept-icon\",\n        code:\n            '<p class=\"c4l-spacer\"></p><div class=\"c4lv-keyconcept {{VARIANTS}}\" aria-label=\"{{#keyconcept}}\">' +\n            \"{{PLACEHOLDER}}</div><p><br></p>\",\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"1\",\n        name: \"tip\",\n        type: \"contextual\",\n        imageClass: \"c4l-tip-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-tip {{VARIANTS}}\" aria-label=\"{{#tip}}\">\n            {{PLACEHOLDER}}</div><p><br></p>`,\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"2\",\n        name: \"reminder\",\n        type: \"contextual\",\n        imageClass: \"c4l-reminder-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-reminder {{VARIANTS}}\" \n            aria-label=\"{{#reminder}}\">\n            {{PLACEHOLDER}}</div><p><br></p>`,\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"3\",\n        name: \"quote\",\n        type: \"contextual\",\n        imageClass: \"c4l-quote-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-quote {{VARIANTS}}\"\n            aria-label=\"{{#quote}}\">\n            <div class=\"c4l-quote-body\"><div class=\"c4l-quote-line\"></div><div class=\"c4l-quote-text\">\n            <p>{{PLACEHOLDER}}</p>\n            </div></div>\n            {{VARIANTSHTML}}\n            </div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\",\n        variants: [\"full-width\", \"quote\"],\n    },\n    {\n        id: \"4\",\n        name: \"dodontcards\",\n        type: \"contextual\",\n        imageClass: \"c4l-dodontcards-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-dodontcards {{VARIANTS}}\"\n            aria-label=\"{{#dodontcards}}\">\n            <div class=\"c4l-dodontcards-do\" aria-label=\"{{#do-card}}\">{{PLACEHOLDER}}</div>\n            <div class=\"c4l-dodontcards-dont\" aria-label=\"{{#dont-card}}\">\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n            Phasellus a posuere nibh, eu mollis lacus.\n            Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\n            nascetur ridiculus mus.</div></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\" +\n            \"Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"5\",\n        name: \"readingcontext\",\n        type: \"contextual\",\n        imageClass: \"c4l-readingcontext-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-readingcontext {{VARIANTS}}\"\n            aria-label=\"{{#readingcontext}}\">\n            <p>{{PLACEHOLDER}}</p>{{VARIANTSHTML}}</div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae,\" +\n            \" posuere egestas nisi. Lorem ipsum dolor sit amet. \" +\n            \"Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.\",\n        variants: [\"full-width\", \"quote\", \"comfort-reading\"],\n    },\n    {\n        id: \"6\",\n        name: \"example\",\n        type: \"contextual\",\n        imageClass: \"c4l-example-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-example {{VARIANTS}}\"\n            aria-label=\"{{#example}}\"><h1>Lorem ipsum dolor sit amet</h1> \n            <p>{{PLACEHOLDER}}</p></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\" +\n            \" Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes,\" +\n            \" nascetur ridiculus mus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"7\",\n        name: \"figure\",\n        type: \"contextual\",\n        imageClass: \"c4l-figure-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><figure class=\"c4lv-figure {{VARIANTS}}\"\n            aria-label=\"{{#figure}}\"><img src=\"\" alt=\"Lorem ipsum dolor sit amet\">\n            {{VARIANTSHTML}}</figure><p><br></p>`,\n        text: \"Consectetur adipiscing elit.\",\n        variants: [\"full-width\", \"caption\"],\n    },\n    {\n        id: \"8\",\n        name: \"tag\",\n        type: \"contextual\",\n        imageClass: \"c4l-tag-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-display-left\" aria-label=\"{{#tag}}\">\n            <div class=\"c4lv-tag {{VARIANTS}}\">{{PLACEHOLDER}}</div></div>`,\n        text: \"Lorem ipsum\",\n        variants: [\"align-right\"],\n    },\n    {\n        id: \"9\",\n        name: \"inlinetag\",\n        type: \"contextual\",\n        imageClass: \"c4l-inlinetag-icon\",\n        code: `<span class=\"c4lv-inlinetag {{VARIANTS}}\" aria-label=\"{{#inlinetag}}\">{{PLACEHOLDER}}</span>`,\n        text: \"Text\",\n        variants: [],\n    },\n    {\n        id: \"10\",\n        name: \"attention\",\n        type: \"procedural\",\n        imageClass: \"c4l-attention-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-attention {{VARIANTS}}\" aria-label=\"{{#attention}}\">\n            \"{{PLACEHOLDER}}</div><p><br></p>`,\n        text: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"11\",\n        name: \"estimatedtime\",\n        type: \"procedural\",\n        imageClass: \"c4l-estimatedtime-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-inline-group\"><div class=\"c4lv-estimatedtime {{VARIANTS}}\"\n            aria-label=\"{{#estimatedtime}}\">{{PLACEHOLDER}} <span>min</span></div></div>`,\n        text: \"15\",\n        variants: [\"align-left\"],\n    },\n    {\n        id: \"12\",\n        name: \"duedate\",\n        type: \"procedural\",\n        imageClass: \"c4l-duedate-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-inline-group\"><div class=\"c4lv-duedate {{VARIANTS}}\"\n            aria-label=\"{{#duedate}}\">{{PLACEHOLDER}}</div></div>`,\n        text: \"November 17th\",\n        variants: [\"align-left\"],\n    },\n    {\n        id: \"13\",\n        name: \"proceduralcontext\",\n        type: \"procedural\",\n        imageClass: \"c4l-proceduralcontext-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><p class=\"c4lv-proceduralcontext {{VARIANTS}}\"\n            aria-label=\"{{#proceduralcontext}}\" >\n            {{PLACEHOLDER}}</p><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\" +\n            \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis lorem aliquet,\" +\n            \" fermentum dolor ac, venenatis turpis.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"14\",\n        name: \"learningoutcomes\",\n        type: \"procedural\",\n        imageClass: \"c4l-learningoutcomes-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p>\n            <div class=\"c4lv-learningoutcomes {{VARIANTS}}\" aria-label=\"{{#learningoutcomes}}\">\n            <h6 class=\"c4l-learningoutcomes-title\">Learning Outcomes</h6>\n            <ul class=\"c4l-learningoutcomes-list\"><li>{{PLACEHOLDER}}</li><li>Curabitur non nulla sit amet\n            nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</li>\n            <li> Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. \n            Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li></ul></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, \" +\n            \"enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.\",\n        variants: [\"full-width\", \"ordered-list\"],\n    },\n    {\n        id: \"15\",\n        name: \"gradingvalue\",\n        type: \"evaluative\",\n        imageClass: \"c4l-gradingvalue-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4l-inline-group\"><div class=\"c4lv-gradingvalue {{VARIANTS}}\" \n            aria-label=\"{{#gradingvalue}}\"><span>Grading value: </span>{{PLACEHOLDER}}</div></div>`,\n        text: \"33.3%\",\n        variants: [\"align-left\"],\n    },\n    {\n        id: \"16\",\n        name: \"expectedfeedback\",\n        type: \"evaluative\",\n        imageClass: \"c4l-expectedfeedback-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-expectedfeedback {{VARIANTS}}\"\n            aria-label=\"{{#expectedfeedback}}\">\n            <p>{{PLACEHOLDER}}</p></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"17\",\n        name: \"allpurposecard\",\n        type: \"helper\",\n        imageClass: \"c4l-allpurposecard-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-allpurposecard {{VARIANTS}}\"\n            aria-label=\"{{#allpurposecard}}\"><p>{{PLACEHOLDER}}</p></div><p><br></p>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\" +\n            \" Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\",\n        variants: [\"full-width\"],\n    },\n    {\n        id: \"18\",\n        name: \"hiddenanswer\",\n        type: \"evaluative\",\n        imageClass: \"c4l-hiddenanswer-icon\",\n        code:\n            `<p class=\"c4l-spacer\"></p><div class=\"c4lv-hiddenanswer {{VARIANTS}}\" aria-label=\"{{#hiddenanswer}}\">\n            <button class=\"btn btn-secondary show-hiddenanswer\" type=\"button\"  data-toggle=\"collapse\"\n            data-target=\"{{@ID}}\" aria-expanded=\"false\" aria-controls=\"{{@ID}}\">{{#showanswer}}\n            </button><div id=\"{{@ID}}\" class=\"collapse\">\n            <div class=\"card card-body hiddenanswer-content\">{{PLACEHOLDER}}</div></div>`,\n        text:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus.\" +\n            \" Praesent dictum in velit sed dapibus.\",\n        variants: [\"full-width\"],\n    },\n];\n\nexport default {\n    components,\n};\n"],"names":["components","id","name","type","imageClass","code","text","variants"],"mappings":"0JA2Re,CACXA,WArQe,CACf,CACIC,GAAI,IACJC,KAAM,aACNC,KAAM,aACNC,WAAY,sBACZC,KACI,oIAEJC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,yIAGAC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,WACNC,KAAM,aACNC,WAAY,oBACZC,iKAIAC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,QACNC,KAAM,aACNC,WAAY,iBACZC,+UAQAC,KACI,4IAEJC,SAAU,CAAC,aAAc,UAE7B,CACIN,GAAI,IACJC,KAAM,cACNC,KAAM,aACNC,WAAY,uBACZC,6kBASAC,KACI,kOAGJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,iBACNC,KAAM,aACNC,WAAY,0BACZC,mMAIAC,KACI,iNAGJC,SAAU,CAAC,aAAc,QAAS,oBAEtC,CACIN,GAAI,IACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,yMAIAC,KACI,mOAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,IACJC,KAAM,SACNC,KAAM,aACNC,WAAY,kBACZC,gNAIAC,KAAM,+BACNC,SAAU,CAAC,aAAc,YAE7B,CACIN,GAAI,IACJC,KAAM,MACNC,KAAM,aACNC,WAAY,eACZC,kKAGAC,KAAM,cACNC,SAAU,CAAC,gBAEf,CACIN,GAAI,IACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,oGACAC,KAAM,OACNC,SAAU,IAEd,CACIN,GAAI,KACJC,KAAM,YACNC,KAAM,aACNC,WAAY,qBACZC,sJAGAC,KAAM,0GACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,gBACNC,KAAM,aACNC,WAAY,yBACZC,sMAGAC,KAAM,KACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,UACNC,KAAM,aACNC,WAAY,mBACZC,yKAGAC,KAAM,gBACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,oBACNC,KAAM,aACNC,WAAY,6BACZC,+KAIAC,KACI,mSAIJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,0oBAQAC,KACI,uKAEJC,SAAU,CAAC,aAAc,iBAE7B,CACIN,GAAI,KACJC,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,gNAGAC,KAAM,QACNC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,mBACNC,KAAM,aACNC,WAAY,4BACZC,uLAIAC,KACI,4IAEJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,iBACNC,KAAM,SACNC,WAAY,0BACZC,qKAGAC,KACI,mOAGJC,SAAU,CAAC,eAEf,CACIN,GAAI,KACJC,KAAM,eACNC,KAAM,aACNC,WAAY,wBACZC,ycAMAC,KACI,4IAEJC,SAAU,CAAC"}
\ No newline at end of file
diff --git a/amd/src/components.js b/amd/src/components.js
index 40eeeb6..24c6b90 100644
--- a/amd/src/components.js
+++ b/amd/src/components.js
@@ -263,6 +263,22 @@ const components = [
             " Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.",
         variants: ["full-width"],
     },
+    {
+        id: "18",
+        name: "hiddenanswer",
+        type: "evaluative",
+        imageClass: "c4l-hiddenanswer-icon",
+        code:
+            `<p class="c4l-spacer"></p><div class="c4lv-hiddenanswer {{VARIANTS}}" aria-label="{{#hiddenanswer}}">
+            <button class="btn btn-secondary show-hiddenanswer" type="button"  data-toggle="collapse"
+            data-target="{{@ID}}" aria-expanded="false" aria-controls="{{@ID}}">{{#showanswer}}
+            </button><div id="{{@ID}}" class="collapse">
+            <div class="card card-body hiddenanswer-content">{{PLACEHOLDER}}</div></div>`,
+        text:
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus." +
+            " Praesent dictum in velit sed dapibus.",
+        variants: ["full-width"],
+    },
 ];
 
 export default {
diff --git a/editor_styles.css b/editor_styles.css
index 524777e..6f29800 100644
--- a/editor_styles.css
+++ b/editor_styles.css
@@ -1 +1 @@
-.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}body.mce-content-body .collapse:not(.show),.c4l-code-preview .collapse:not(.show){display:block !important}@media only screen and (min-width: 576px){.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:500px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant{max-width:94%}
+.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext,.c4l-spacer+.c4lv-hiddenanswer{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}.c4lv-hiddenanswer .show-hiddenanswer{display:block;margin-left:auto;margin-right:auto;margin-bottom:36px}.c4lv-hiddenanswer .btn-secondary.show-hiddenanswer{color:#135ff8;background-color:#eef3ff;font-weight:500}.c4lv-hiddenanswer .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled):active,.c4lv-hiddenanswer .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled).active,.c4lv-hiddenanswer .show>.btn-secondary.show-hiddenanswer.dropdown-toggle{color:#135ff8}.c4lv-hiddenanswer .hiddenanswer-content{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:0 auto 36px auto;padding:30px 40px 32px 40px;font-family:sans-serif;border:none}.c4lv-hiddenanswer .hiddenanswer-content p{font-size:16px;line-height:23px}.c4lv-hiddenanswer .hiddenanswer-content p:last-of-type{margin-bottom:0}@media only screen and (min-width: 576px){.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext,.c4lv-hiddenanswer .hiddenanswer-content{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes,.c4lv-hiddenanswer .hiddenanswer-content{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:500px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4l-hiddenanswer.c4l-full-width-variant .hiddenanswer-content{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content{max-width:94%}
diff --git a/lang/en/tiny_c4l.php b/lang/en/tiny_c4l.php
index 1fcd07f..42c508a 100644
--- a/lang/en/tiny_c4l.php
+++ b/lang/en/tiny_c4l.php
@@ -53,6 +53,7 @@
 $string['gradingvalue'] = 'Grading value';
 $string['helper'] = 'Helper';
 $string['helplinktext'] = 'C4L helper';
+$string['hiddenanswer'] = 'Hidden answer';
 $string['inlinetag'] = 'Inline tag';
 $string['keyconcept'] = 'Key concept';
 $string['learningoutcomes'] = 'Learning outcomes';
@@ -69,5 +70,6 @@
 $string['quote'] = 'Quote';
 $string['readingcontext'] = 'Reading context';
 $string['reminder'] = 'Reminder';
+$string['showanswer'] = 'Show answer';
 $string['tag'] = 'Tag';
 $string['tip'] = 'Tip';
diff --git a/pix/c4l_hiddenanswer_icon.svg b/pix/c4l_hiddenanswer_icon.svg
new file mode 100644
index 0000000..dfe917a
--- /dev/null
+++ b/pix/c4l_hiddenanswer_icon.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V10C1.5 11.3807 2.61929 12.5 4 12.5H16C17.3807 12.5 18.5 11.3807 18.5 10V4C18.5 2.61929 17.3807 1.5 16 1.5ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H16C18.2091 14 20 12.2091 20 10V4C20 1.79086 18.2091 0 16 0H4Z" fill="#F5982B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5286 5.5286C7.78894 5.26825 8.21106 5.26825 8.47141 5.5286L10 7.05719L11.5286 5.5286C11.7889 5.26825 12.2111 5.26825 12.4714 5.5286C12.7318 5.78894 12.7318 6.21106 12.4714 6.4714L10.4714 8.47141C10.2111 8.73175 9.78895 8.73175 9.5286 8.47141L7.5286 6.4714C7.26825 6.21106 7.26825 5.78894 7.5286 5.5286Z" fill="#F5982B"/>
+</svg>
\ No newline at end of file
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index ee60047..948502e 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -287,6 +287,14 @@
     content: url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]]);
 }
 
+.c4l-hiddenanswer-icon::before {
+    content: '';
+}
+
+.c4l-hiddenanswer-icon .c4l-button-text::before {
+    content: url([[pix:tiny_c4l|c4l_hiddenanswer_icon]]);
+}
+
 /* Helper components buttons */
 
 .c4l-allpurposecard-icon::before {
diff --git a/scss/_components.scss b/scss/_components.scss
index 3f305a5..b6221d9 100644
--- a/scss/_components.scss
+++ b/scss/_components.scss
@@ -39,7 +39,8 @@
     }
 
     + .c4l-readingcontext,
-    + .c4lv-readingcontext {
+    + .c4lv-readingcontext,
+    + .c4lv-hiddenanswer {
         margin-top: 16px;
         margin-bottom: 4px;
     }
@@ -769,3 +770,47 @@
         color: #497ae9;
     }
 }
+
+/* Hidden answer */
+
+.c4lv-hiddenanswer {
+    .show-hiddenanswer {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 36px;
+    }
+
+    .btn-secondary.show-hiddenanswer {
+        color: #135FF8;
+        background-color: #EEF3FF;
+        font-weight: 500;
+    }
+
+    .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled):active,
+    .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled).active, 
+    .show>.btn-secondary.show-hiddenanswer.dropdown-toggle {
+        color: #135FF8;
+    }
+
+    .hiddenanswer-content {
+        min-width: 200px;
+        max-width: 75%;
+        background-color: #fff;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+        box-sizing: border-box;
+        margin: 0 auto 36px auto;
+        padding: 30px 40px 32px 40px;
+        font-family: sans-serif;
+        border: none;
+
+        p {
+            font-size: 16px;
+            line-height: 23px;
+        }
+
+        p:last-of-type {
+            margin-bottom: 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/scss/_responsive.scss b/scss/_responsive.scss
index ff52ab1..3f05323 100644
--- a/scss/_responsive.scss
+++ b/scss/_responsive.scss
@@ -76,7 +76,8 @@
     }
 
     .c4l-readingcontext,
-    .c4lv-readingcontext {
+    .c4lv-readingcontext,
+    .c4lv-hiddenanswer .hiddenanswer-content {
         max-width: 88%;
     }
 
@@ -119,7 +120,8 @@
     .c4l-allpurposecard,
     .c4lv-allpurposecard,
     .c4l-learningoutcomes,
-    .c4lv-learningoutcomes {
+    .c4lv-learningoutcomes,
+    .c4lv-hiddenanswer .hiddenanswer-content {
         max-width: 75%;
     }
 
@@ -146,7 +148,8 @@
     .c4l-quote.c4l-full-width-variant,
     .c4lv-quote.c4l-full-width-variant,
     .c4l-example.c4l-full-width-variant,
-    .c4lv-example.c4l-full-width-variant {
+    .c4lv-example.c4l-full-width-variant,
+    .c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content {
         max-width: 100%;
     }
 
diff --git a/scss/_variants.scss b/scss/_variants.scss
index c5456f1..9494661 100644
--- a/scss/_variants.scss
+++ b/scss/_variants.scss
@@ -23,7 +23,8 @@
 
 .c4l-readingcontext.c4l-full-width-variant,
 .c4l-example.c4l-full-width-variant,
-.c4l-expectedfeedback.c4l-full-width-variant {
+.c4l-expectedfeedback.c4l-full-width-variant,
+.c4l-hiddenanswer.c4l-full-width-variant .hiddenanswer-content {
     /* 100% - 6% due to the shadow */
     max-width: 94%;
 }
@@ -54,7 +55,8 @@
 
 .c4lv-readingcontext.c4l-full-width-variant,
 .c4lv-example.c4l-full-width-variant,
-.c4lv-expectedfeedback.c4l-full-width-variant {
+.c4lv-expectedfeedback.c4l-full-width-variant,
+.c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content {
     /* 100% - 6% due to the shadow */
     max-width: 94%;
 }
diff --git a/settings.php b/settings.php
index 4bb08ea..b840bf3 100644
--- a/settings.php
+++ b/settings.php
@@ -48,7 +48,8 @@
             'tag' => get_string('tag', 'tiny_c4l'),
             'inlinetag' => get_string('inlinetag', 'tiny_c4l'),
             'attention' => get_string('attention', 'tiny_c4l'),
-            'allpurposecard' => get_string('allpurposecard', 'tiny_c4l')
+            'allpurposecard' => get_string('allpurposecard', 'tiny_c4l'),
+            'hiddenanswer' => get_string('hiddenanswer', 'tiny_c4l')
         ];
         $name = get_string('aimedatstudents', 'tiny_c4l');
         $desc = get_string('aimedatstudents_desc', 'tiny_c4l');
diff --git a/styles.css b/styles.css
index 95e5136..9c8de72 100644
--- a/styles.css
+++ b/styles.css
@@ -1 +1 @@
-.c4l-plugin-container{display:block;padding:1rem;background-color:#f6f7f8;border:1px solid #dee2e6}.c4l-buttons-filters{display:none}.c4l-select-filters{display:grid;grid-auto-flow:column;width:100%;margin:7px 0 36px 0}.c4l-select-filter{grid-column:1/-1;background-color:#fff;border:1px solid #dfe2e5;border-radius:7px;padding:17px;width:100%;text-transform:capitalize;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-image:url([[pix:t/dropdown]]);background-repeat:no-repeat;background-position-x:95%;background-position-y:center}.c4l-button-filter{background-color:#fff;border:1px solid #dfe2e5;padding:10px 16px;font-weight:500;font-size:10.5px;line-height:12px;letter-spacing:.05em;color:#424b62;text-transform:uppercase}.c4l-button-filter:hover,.c4l-button-filter.c4l-button-filter-enabled{background-color:#e7ebef}.c4l-button-filter:first-child{border-radius:6px 0 0 6px}.c4l-button-filter:last-child{border-radius:0 6px 6px 0}.c4l-buttons-preview{display:flex;justify-content:space-between;width:100%;max-height:340px}.c4l-buttons-grid{display:block;margin-bottom:0;width:100%;overflow-y:auto}.c4l-hidden{display:none !important;max-height:0;padding:0}.c4lt-dialog-button{display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;height:48px;max-height:100px;width:100%;max-width:100%;background-color:#fff;border:1px solid #e4e9ec;color:#535d76;box-shadow:0 0 6px 0 rgba(0,0,0,.1);overflow-wrap:anywhere;overflow:hidden;padding:0;margin-bottom:8px}.c4lt-dialog-button .c4l-button-text{display:flex;align-items:center;height:100%}.c4lt-dialog-button .c4l-button-text::before{position:absolute;top:0;left:0;height:100%;min-height:23px;width:49px;display:flex;justify-content:center;align-items:center;border-right:1px solid #dce3f0}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:inset 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-text{position:relative;font-size:12px;font-weight:500;width:100%;text-align:left;padding-left:62px}.c4l-code-preview{display:none;overflow:hidden;background-color:#fff}.c4l-code-preview .c4l-component-code{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);width:160%;margin-top:35px}.c4l-code-preview .c4l-component-code .c4l-learningoutcomes{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.c4l-keyconcept-icon::before{content:""}.c4l-keyconcept-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_keyconcept_icon]])}.c4l-tip-icon::before{content:""}.c4l-tip-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip_icon]])}.c4l-reminder-icon::before{content:""}.c4l-reminder-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder_icon]])}.c4l-attention-icon::before{content:""}.c4l-attention-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_attention_icon]])}.c4l-quote-icon::before{content:""}.c4l-quote-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_icon]])}.c4l-dodontcards-icon::before{content:""}.c4l-dodontcards-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_dodontcards_icon]])}.c4l-readingcontext-icon::before{content:""}.c4l-readingcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_readingcontext_icon]])}.c4l-example-icon::before{content:""}.c4l-example-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_example_icon]])}.c4l-figure-icon::before{content:""}.c4l-figure-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_figure_icon]])}.c4l-tag-icon::before{content:""}.c4l-tag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tag_icon]])}.c4l-estimatedtime-icon::before{content:""}.c4l-estimatedtime-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime_icon]])}.c4l-duedate-icon::before{content:""}.c4l-duedate-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate_icon]])}.c4l-proceduralcontext-icon::before{content:""}.c4l-proceduralcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_proceduralcontext_icon]])}.c4l-learningoutcomes-icon::before{content:""}.c4l-learningoutcomes-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_icon]])}.c4l-gradingvalue-icon::before{content:""}.c4l-gradingvalue-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue_icon]])}.c4l-expectedfeedback-icon::before{content:""}.c4l-expectedfeedback-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]])}.c4l-allpurposecard-icon::before{content:""}.c4l-allpurposecard-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_allpurposecard_icon]])}.c4l-inlinetag-icon::before{content:""}.c4l-inlinetag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_inlinetag_icon]])}.c4lt-dialog-button .c4l-button-variants{display:grid;grid-auto-flow:column;grid-gap:3px;justify-content:end;width:100%;height:42px;margin-right:3px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;background-color:#ecf3ff;color:#1679f9;height:42px;width:36px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant.on,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:hover{color:#fff;background-color:#1679f9}.c4l-button-variant.align-center-variant-off::before{content:url([[pix:tiny_c4l|variants/align-center-variant-off]])}.c4l-button-variant.align-center-variant-on::before,.c4l-button-variant.align-center-variant-on:hover::before,.c4l-button-variant.align-center-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-center-variant-on]])}.c4l-button-variant.align-left-variant-off::before{content:url([[pix:tiny_c4l|variants/align-left-variant-off]])}.c4l-button-variant.align-left-variant-on::before,.c4l-button-variant.align-left-variant-on:hover::before,.c4l-button-variant.align-left-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-left-variant-on]])}.c4l-button-variant.align-right-variant-off::before{content:url([[pix:tiny_c4l|variants/align-right-variant-off]])}.c4l-button-variant.align-right-variant-on::before,.c4l-button-variant.align-right-variant-on:hover::before,.c4l-button-variant.align-right-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-right-variant-on]])}.c4l-button-variant.caption-variant-off::before{content:url([[pix:tiny_c4l|variants/caption-variant-off]])}.c4l-button-variant.caption-variant-on::before,.c4l-button-variant.caption-variant-on:hover::before,.c4l-button-variant.caption-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/caption-variant-on]])}.c4l-button-variant.comfort-reading-variant-off::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-off]])}.c4l-button-variant.comfort-reading-variant-on::before,.c4l-button-variant.comfort-reading-variant-on:hover::before,.c4l-button-variant.comfort-reading-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-on]])}.c4l-button-variant.dont-card-only-variant-off::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-off]])}.c4l-button-variant.dont-card-only-variant-on::before,.c4l-button-variant.dont-card-only-variant-on:hover::before,.c4l-button-variant.dont-card-only-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-on]])}.c4l-button-variant.full-width-variant-off::before{content:url([[pix:tiny_c4l|variants/full-width-variant-off]])}.c4l-button-variant.full-width-variant-on::before,.c4l-button-variant.full-width-variant-on:hover::before,.c4l-button-variant.full-width-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/full-width-variant-on]])}.c4l-button-variant.ordered-list-variant-off::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-off]])}.c4l-button-variant.ordered-list-variant-on::before,.c4l-button-variant.ordered-list-variant-on:hover::before,.c4l-button-variant.ordered-list-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-on]])}.c4l-button-variant.quote-variant-off::before{content:url([[pix:tiny_c4l|variants/quote-variant-off]])}.c4l-button-variant.quote-variant-on::before,.c4l-button-variant.quote-variant-on:hover::before,.c4l-button-variant.quote-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/quote-variant-on]])}.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}body.mce-content-body .collapse:not(.show),.c4l-code-preview .collapse:not(.show){display:block !important}@media only screen and (min-width: 576px){.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:500px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant{max-width:94%}
+.c4l-plugin-container{display:block;padding:1rem;background-color:#f6f7f8;border:1px solid #dee2e6}.c4l-buttons-filters{display:none}.c4l-select-filters{display:grid;grid-auto-flow:column;width:100%;margin:7px 0 36px 0}.c4l-select-filter{grid-column:1/-1;background-color:#fff;border:1px solid #dfe2e5;border-radius:7px;padding:17px;width:100%;text-transform:capitalize;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-image:url([[pix:t/dropdown]]);background-repeat:no-repeat;background-position-x:95%;background-position-y:center}.c4l-button-filter{background-color:#fff;border:1px solid #dfe2e5;padding:10px 16px;font-weight:500;font-size:10.5px;line-height:12px;letter-spacing:.05em;color:#424b62;text-transform:uppercase}.c4l-button-filter:hover,.c4l-button-filter.c4l-button-filter-enabled{background-color:#e7ebef}.c4l-button-filter:first-child{border-radius:6px 0 0 6px}.c4l-button-filter:last-child{border-radius:0 6px 6px 0}.c4l-buttons-preview{display:flex;justify-content:space-between;width:100%;max-height:340px}.c4l-buttons-grid{display:block;margin-bottom:0;width:100%;overflow-y:auto}.c4l-hidden{display:none !important;max-height:0;padding:0}.c4lt-dialog-button{display:flex;flex-direction:row;align-items:center;justify-content:space-between;position:relative;height:48px;max-height:100px;width:100%;max-width:100%;background-color:#fff;border:1px solid #e4e9ec;color:#535d76;box-shadow:0 0 6px 0 rgba(0,0,0,.1);overflow-wrap:anywhere;overflow:hidden;padding:0;margin-bottom:8px}.c4lt-dialog-button .c4l-button-text{display:flex;align-items:center;height:100%}.c4lt-dialog-button .c4l-button-text::before{position:absolute;top:0;left:0;height:100%;min-height:23px;width:49px;display:flex;justify-content:center;align-items:center;border-right:1px solid #dce3f0}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:inset 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-text{position:relative;font-size:12px;font-weight:500;width:100%;text-align:left;padding-left:62px}.c4l-code-preview{display:none;overflow:hidden;background-color:#fff}.c4l-code-preview .c4l-component-code{-webkit-transform:scale(0.6);-ms-transform:scale(0.6);transform:scale(0.6);width:160%;margin-top:35px}.c4l-code-preview .c4l-component-code .c4l-learningoutcomes{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.c4l-keyconcept-icon::before{content:""}.c4l-keyconcept-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_keyconcept_icon]])}.c4l-tip-icon::before{content:""}.c4l-tip-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip_icon]])}.c4l-reminder-icon::before{content:""}.c4l-reminder-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder_icon]])}.c4l-attention-icon::before{content:""}.c4l-attention-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_attention_icon]])}.c4l-quote-icon::before{content:""}.c4l-quote-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_icon]])}.c4l-dodontcards-icon::before{content:""}.c4l-dodontcards-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_dodontcards_icon]])}.c4l-readingcontext-icon::before{content:""}.c4l-readingcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_readingcontext_icon]])}.c4l-example-icon::before{content:""}.c4l-example-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_example_icon]])}.c4l-figure-icon::before{content:""}.c4l-figure-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_figure_icon]])}.c4l-tag-icon::before{content:""}.c4l-tag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tag_icon]])}.c4l-estimatedtime-icon::before{content:""}.c4l-estimatedtime-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime_icon]])}.c4l-duedate-icon::before{content:""}.c4l-duedate-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate_icon]])}.c4l-proceduralcontext-icon::before{content:""}.c4l-proceduralcontext-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_proceduralcontext_icon]])}.c4l-learningoutcomes-icon::before{content:""}.c4l-learningoutcomes-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_icon]])}.c4l-gradingvalue-icon::before{content:""}.c4l-gradingvalue-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue_icon]])}.c4l-expectedfeedback-icon::before{content:""}.c4l-expectedfeedback-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback_icon]])}.c4l-hiddenanswer-icon::before{content:""}.c4l-hiddenanswer-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_hiddenanswer_icon]])}.c4l-allpurposecard-icon::before{content:""}.c4l-allpurposecard-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_allpurposecard_icon]])}.c4l-inlinetag-icon::before{content:""}.c4l-inlinetag-icon .c4l-button-text::before{content:url([[pix:tiny_c4l|c4l_inlinetag_icon]])}.c4lt-dialog-button .c4l-button-variants{display:grid;grid-auto-flow:column;grid-gap:3px;justify-content:end;width:100%;height:42px;margin-right:3px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;background-color:#ecf3ff;color:#1679f9;height:42px;width:36px}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant.on,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:hover{color:#fff;background-color:#1679f9}.c4l-button-variant.align-center-variant-off::before{content:url([[pix:tiny_c4l|variants/align-center-variant-off]])}.c4l-button-variant.align-center-variant-on::before,.c4l-button-variant.align-center-variant-on:hover::before,.c4l-button-variant.align-center-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-center-variant-on]])}.c4l-button-variant.align-left-variant-off::before{content:url([[pix:tiny_c4l|variants/align-left-variant-off]])}.c4l-button-variant.align-left-variant-on::before,.c4l-button-variant.align-left-variant-on:hover::before,.c4l-button-variant.align-left-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-left-variant-on]])}.c4l-button-variant.align-right-variant-off::before{content:url([[pix:tiny_c4l|variants/align-right-variant-off]])}.c4l-button-variant.align-right-variant-on::before,.c4l-button-variant.align-right-variant-on:hover::before,.c4l-button-variant.align-right-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/align-right-variant-on]])}.c4l-button-variant.caption-variant-off::before{content:url([[pix:tiny_c4l|variants/caption-variant-off]])}.c4l-button-variant.caption-variant-on::before,.c4l-button-variant.caption-variant-on:hover::before,.c4l-button-variant.caption-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/caption-variant-on]])}.c4l-button-variant.comfort-reading-variant-off::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-off]])}.c4l-button-variant.comfort-reading-variant-on::before,.c4l-button-variant.comfort-reading-variant-on:hover::before,.c4l-button-variant.comfort-reading-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/comfort-reading-variant-on]])}.c4l-button-variant.dont-card-only-variant-off::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-off]])}.c4l-button-variant.dont-card-only-variant-on::before,.c4l-button-variant.dont-card-only-variant-on:hover::before,.c4l-button-variant.dont-card-only-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/dont-card-only-variant-on]])}.c4l-button-variant.full-width-variant-off::before{content:url([[pix:tiny_c4l|variants/full-width-variant-off]])}.c4l-button-variant.full-width-variant-on::before,.c4l-button-variant.full-width-variant-on:hover::before,.c4l-button-variant.full-width-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/full-width-variant-on]])}.c4l-button-variant.ordered-list-variant-off::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-off]])}.c4l-button-variant.ordered-list-variant-on::before,.c4l-button-variant.ordered-list-variant-on:hover::before,.c4l-button-variant.ordered-list-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/ordered-list-variant-on]])}.c4l-button-variant.quote-variant-off::before{content:url([[pix:tiny_c4l|variants/quote-variant-off]])}.c4l-button-variant.quote-variant-on::before,.c4l-button-variant.quote-variant-on:hover::before,.c4l-button-variant.quote-variant-off:hover::before{content:url([[pix:tiny_c4l|variants/quote-variant-on]])}.c4l-spacer{display:block;height:12px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote,.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-readingcontext,.c4l-spacer+.c4lv-readingcontext,.c4l-spacer+.c4lv-hiddenanswer{margin-top:16px;margin-bottom:4px}.c4l-spacer+.c4l-figure,.c4l-spacer+.c4lv-figure{margin:24px auto 14px auto}.c4l-spacer+.c4l-proceduralcontext,.c4l-spacer+.c4lv-proceduralcontext{margin-bottom:0;padding-top:0;padding-bottom:0}.c4l-inline-group{display:flex;flex-direction:row;align-content:flex-end;justify-content:flex-end}.c4l-display-left{display:flex;flex-direction:row;align-content:flex-start;justify-content:flex-start}.c4l-spacer+.c4l-display-left{margin-top:0}.c4l-embedded-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-embedded-caption span{text-transform:uppercase;font-size:14px}.c4l-embedded-caption span::after{content:", "}.c4l-keyconcept,.c4lv-keyconcept{min-width:200px;max-width:99%;background-color:#f1f5fe;padding:24px 36px 30px 36px;border:none;border-left:6px solid #387af1;margin:36px auto;position:relative;border-radius:0}.c4l-keyconcept p:last-of-type,.c4lv-keyconcept p:last-of-type{margin-bottom:0}.c4l-tip,.c4lv-tip{min-width:200px;max-width:99%;background-color:#fbeffa;padding:24px 48px 30px 36px;border:none;border-left:6px solid #b00ca9;margin:36px auto;position:relative;border-radius:0}.c4l-tip p:last-of-type,.c4lv-tip p:last-of-type{margin-bottom:0}.c4l-tip::after,.c4lv-tip::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_tip]]);position:absolute;top:6px;right:-3px}.c4l-reminder,.c4lv-reminder{min-width:200px;max-width:99%;background-color:#eff8fd;padding:24px 48px 30px 36px;border:none;border-left:6px solid #16b9ff;margin:36px auto;position:relative;border-radius:0}.c4l-reminder p:last-of-type,.c4lv-reminder p:last-of-type{margin-bottom:0}.c4l-reminder::after,.c4lv-reminder::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_reminder]]);position:absolute;top:6px;right:-3px}.c4l-attention,.c4lv-attention{min-width:200px;max-width:99%;background-color:#fef6ed;padding:24px 48px 30px 36px;border:none;border-left:6px solid #f88923;margin:36px auto;position:relative;border-radius:0}.c4l-attention p:last-of-type,.c4lv-attention p:last-of-type{margin-bottom:0}.c4l-attention::after,.c4lv-attention::after{content:url([[pix:tiny_c4l|c4l_attention]]);position:absolute;top:6px;right:-3px}.c4l-quote,.c4lv-quote{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px;line-height:24px;margin:24px auto;min-width:200px;max-width:100%}.c4l-quote .c4l-quote-body,.c4lv-quote .c4l-quote-body{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;align-content:space-between;font-style:italic}.c4l-quote .c4l-quote-line,.c4lv-quote .c4l-quote-line{border-left:4px solid #387af1;margin-right:16px;margin-top:4px;margin-bottom:2px}.c4l-quote .c4l-quote-text::before,.c4lv-quote .c4l-quote-text::before{content:"";position:static;top:0;margin-right:0}.c4l-quote .c4l-quote-text::after,.c4lv-quote .c4l-quote-text::after{content:"";position:static;top:0;margin-left:0}.c4l-quote .c4l-quote-text p:first-of-type::before,.c4lv-quote .c4l-quote-text p:first-of-type::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_open]]);position:relative;top:-4px;margin-right:2px}.c4l-quote .c4l-quote-text p:last-of-type::after,.c4lv-quote .c4l-quote-text p:last-of-type::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_quote_close]]);position:relative;top:-2px;margin-left:2px}.c4l-quote .c4l-quote-text p:last-of-type,.c4lv-quote .c4l-quote-text p:last-of-type{margin-bottom:0}.c4l-quote .c4l-quote-caption{font-size:13px;margin-top:12px;text-align:right}.c4l-quote .c4l-quote-caption span{text-transform:uppercase;font-size:14px}.c4l-quote .c4l-quote-caption span::after{content:", "}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{margin-top:36px}.c4l-dodontcards .c4l-dodontcards-dont,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:36px}.c4l-dodontcards>.c4l-dodontcards-dont,.c4lv-dodontcards>.c4l-dodontcards-dont{margin-top:12px}.c4l-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-do{min-width:200px;max-width:100%;background:#f1fbf5;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-do::before,.c4lv-dodontcards .c4l-dodontcards-do::before{content:url([[pix:tiny_c4l|c4l_docard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-dont{min-width:200px;max-width:100%;background:#ffefef;border-radius:10px;padding:24px 48px 30px 36px;margin:12px auto;position:relative}.c4l-dodontcards .c4l-dodontcards-dont::before,.c4lv-dodontcards .c4l-dodontcards-dont::before{content:url([[pix:tiny_c4l|c4l_dontcard]]);position:absolute;top:12px;right:12px}.c4l-dodontcards .c4l-dodontcards-do p,.c4l-dodontcards .c4l-dodontcards-dont p,.c4lv-dodontcards .c4l-dodontcards-do p,.c4lv-dodontcards .c4l-dodontcards-dont p{margin-bottom:6px}.c4l-dodontcards .c4l-dodontcards-do p:last-of-type,.c4l-dodontcards .c4l-dodontcards-dont p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-do p:last-of-type,.c4lv-dodontcards .c4l-dodontcards-dont p:last-of-type{margin-bottom:0}.c4l-readingcontext,.c4lv-readingcontext{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:36px auto}.c4l-readingcontext p,.c4lv-readingcontext p{font-size:16px;line-height:23px}.c4l-readingcontext{padding:30px 40px 19px 40px;font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-readingcontext .c4l-readingcontext-caption{font-size:16px;margin-top:24px;text-align:right;padding-bottom:14px;font-style:italic}.c4l-readingcontext .c4l-readingcontext-caption span{text-transform:uppercase;font-size:16px;font-style:normal}.c4l-readingcontext .c4l-readingcontext-caption span::after{content:", "}.c4lv-readingcontext{padding:30px 40px 32px 40px;font-family:sans-serif}.c4lv-readingcontext p:last-of-type{margin-bottom:0}.c4lv-readingcontext .c4l-embedded-caption{margin-top:1rem;font-size:16px;font-style:italic}.c4lv-readingcontext.c4l-comfort-reading-variant{font-family:Iowan Old Style,Apple Garamond,Baskerville,Times New Roman,Droid Serif,Times,Source Serif Pro,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.c4l-example,.c4lv-example{font-size:15px;line-height:22px;color:inherit;background:#fff;border-radius:0;margin:36px auto;min-width:75%;max-width:100%;padding:18px 24px;position:relative;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-example h1,.c4lv-example h1{font-weight:700;font-size:11px;line-height:21px;letter-spacing:.5px;color:#3171e3;margin:0 0 24px 0;text-transform:uppercase;font-family:inherit;display:inline-block;border-bottom:2px solid #3171e3}.c4l-figure,.c4lv-figure{min-width:200px;margin:48px auto}.c4l-figure img,.c4lv-figure img{width:100%}.c4l-figure img:not([src]),.c4l-figure img[src=""],.c4lv-figure img:not([src]),.c4lv-figure img[src=""]{content:url([[pix:tiny_c4l|c4l_figure_placeholder]])}.c4l-figure figcaption,.c4lv-figure figcaption{font-size:13px;line-height:16px;color:#686d79;margin-top:7px}.c4l-figure .c4l-figure-footer::after,.c4lv-figure .c4l-figure-footer::after{content:" | ";font-weight:normal;font-style:normal}.c4l-figure .c4l-figure-caption,.c4lv-figure .c4l-figure-caption{font-style:normal;font-size:12px}.c4l-figure figcaption span strong,.c4lv-figure figcaption span strong{font-weight:700}.c4l-figure{max-width:100%}.c4lv-figure{max-width:75%}.c4l-tag,.c4lv-tag{display:inline-block;font-size:10px;font-weight:700;color:#2167cf;background-color:#f1f5fe;border-radius:30px;padding:4px 17px;line-height:20px;margin-bottom:24px;text-transform:uppercase;letter-spacing:.2px}.c4lv-tag.c4l-align-right-variant{margin-left:auto}.c4l-estimatedtime,.c4lv-estimatedtime{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-estimatedtime span,.c4lv-estimatedtime span{font-weight:600;font-size:10px}.c4l-estimatedtime::before,.c4lv-estimatedtime::before{content:url([[pix:tiny_c4l|noun_project_icons/c4l_estimatedtime]]);position:absolute;left:12px}.c4lv-estimatedtime.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-duedate,.c4lv-duedate{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:600;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-duedate::after,.c4lv-duedate::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_duedate]]);position:absolute;left:12px}.c4lv-duedate.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-proceduralcontext,.c4lv-proceduralcontext{font-style:italic;color:#3a56af;margin-bottom:12px;padding-top:24px;padding-bottom:24px;font-weight:400}.c4l-gradingvalue,.c4lv-gradingvalue{font-size:12px;color:#2167cf;background-color:#f1f5fe;padding:6px 14px;font-weight:700;margin-left:6px;margin-bottom:24px;padding-top:5px;padding-bottom:5px;padding-left:36px;position:relative;border-radius:5px}.c4l-gradingvalue span,.c4lv-gradingvalue span{font-weight:600;font-size:10px}.c4l-gradingvalue::after,.c4lv-gradingvalue::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_gradingvalue]]);position:absolute;left:12px;top:6px}.c4lv-gradingvalue.c4l-align-left-variant{margin-right:auto;margin-left:0}.c4l-expectedfeedback,.c4lv-expectedfeedback{min-width:200px;max-width:90%;background-color:#fff;padding:24px 36px 30px 36px;margin:36px auto;font-style:italic;position:relative;border-radius:8px;border:none;box-shadow:0 4px 24px rgba(0,0,0,.13)}.c4l-expectedfeedback::before,.c4lv-expectedfeedback::before{content:""}.c4l-expectedfeedback::after,.c4lv-expectedfeedback::after{content:url([[pix:tiny_c4l|noun_project_icons/c4l_expectedfeedback]]);position:absolute;bottom:6px;right:-3px}.c4l-expectedfeedback p:last-of-type,.c4lv-expectedfeedback p:last-of-type{margin-bottom:0}.c4l-allpurposecard,.c4lv-allpurposecard{min-width:200px;max-width:100%;background:#f1f5fe;border-radius:10px;padding:24px 48px 30px 36px;margin:24px auto;position:relative}.c4l-allpurposecard p,.c4lv-allpurposecard p{margin-bottom:6px}.c4l-allpurposecard p:last-of-type,.c4lv-allpurposecard p:last-of-type{margin-bottom:0}.c4l-spacer+.c4l-allpurposecard{margin:0 auto}.c4l-inlinetag,.c4lv-inlinetag{font-weight:900;font-size:10px;text-transform:uppercase;letter-spacing:.2px;display:inline-block;color:#fff;background:#3171e3;border-radius:7px;padding:2px 7px 1px 7px;position:relative;top:-2px;margin-left:4px;margin-right:4px}.c4l-learningoutcomes,.c4lv-learningoutcomes{min-width:200px;max-width:99%;background-color:#f2f5fd;padding:24px 48px 30px 36px;border:none;margin:36px auto;position:relative;border-radius:0}.c4l-learningoutcomes p:last-of-type,.c4lv-learningoutcomes p:last-of-type{margin-bottom:0}.c4l-learningoutcomes .c4l-learningoutcomes-title,.c4lv-learningoutcomes .c4l-learningoutcomes-title{position:relative;top:-11px;left:-39px;padding:6px 14px 5px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:600;font-size:11px;letter-spacing:.7px;color:#fff;background-color:#497ae9;text-transform:uppercase;font-family:inherit;display:inline-block;margin-top:0;filter:drop-shadow(0 1.55601px 3.11202px rgba(0, 0, 0, 0.07))}.c4l-learningoutcomes .c4l-learningoutcomes-title::before,.c4lv-learningoutcomes .c4l-learningoutcomes-title::before{content:url([[pix:tiny_c4l|c4l_learningoutcomes_shadow]]);position:absolute;width:3px;height:2px;top:15.5px;left:.5px}.c4l-learningoutcomes .c4l-learningoutcomes-list,.c4lv-learningoutcomes .c4l-learningoutcomes-list{margin-top:18px;margin-bottom:18px;padding-left:32px}.c4l-learningoutcomes .c4l-learningoutcomes-list>li,.c4lv-learningoutcomes .c4l-learningoutcomes-list>li{position:relative}.c4l-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child),.c4lv-learningoutcomes .c4l-learningoutcomes-list>li:not(:last-child){margin-bottom:21px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::before,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::before{background-image:url([[pix:tiny_c4l|c4l_learningoutcomes_list_item]]);background-size:9px 11px;display:inline-block;width:9px;height:11px;content:"";justify-self:center;position:absolute;left:-32px;top:7px}.c4l-learningoutcomes .c4l-learningoutcomes-list li::marker,.c4lv-learningoutcomes .c4l-learningoutcomes-list li::marker{color:rgba(0,0,0,0)}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list{counter-reset:section}.c4lv-learningoutcomes.c4l-ordered-list-variant .c4l-learningoutcomes-list li::before{background-image:none;position:absolute;left:-32px;top:0;counter-increment:section;content:counter(section) ". ";font-weight:700;color:#497ae9}.c4lv-hiddenanswer .show-hiddenanswer{display:block;margin-left:auto;margin-right:auto;margin-bottom:36px}.c4lv-hiddenanswer .btn-secondary.show-hiddenanswer{color:#135ff8;background-color:#eef3ff;font-weight:500}.c4lv-hiddenanswer .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled):active,.c4lv-hiddenanswer .btn-secondary.show-hiddenanswer:not(:disabled):not(.disabled).active,.c4lv-hiddenanswer .show>.btn-secondary.show-hiddenanswer.dropdown-toggle{color:#135ff8}.c4lv-hiddenanswer .hiddenanswer-content{min-width:200px;max-width:75%;background-color:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);box-sizing:border-box;margin:0 auto 36px auto;padding:30px 40px 32px 40px;font-family:sans-serif;border:none}.c4lv-hiddenanswer .hiddenanswer-content p{font-size:16px;line-height:23px}.c4lv-hiddenanswer .hiddenanswer-content p:last-of-type{margin-bottom:0}@media only screen and (min-width: 576px){.c4l-select-filters{display:none}.c4l-buttons-filters{display:flex;justify-content:center;align-items:center;margin:16px 0 37px}.c4l-spacer+.c4l-keyconcept,.c4l-spacer+.c4lv-keyconcept,.c4l-spacer+.c4l-tip,.c4l-spacer+.c4lv-tip,.c4l-spacer+.c4l-reminder,.c4l-spacer+.c4lv-reminder,.c4l-spacer+.c4l-attention,.c4l-spacer+.c4lv-attention,.c4l-spacer+.c4l-expectedfeedback,.c4l-spacer+.c4lv-expectedfeedback,.c4l-spacer+.c4l-learningoutcomes,.c4l-spacer+.c4lv-learningoutcomes{margin:24px auto 8px auto}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:12px auto 0 auto}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-do,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-do{margin-top:0}.c4l-spacer+.c4l-dodontcards .c4l-dodontcards-dont,.c4l-spacer+.c4lv-dodontcards .c4l-dodontcards-dont{margin-bottom:0}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:12px auto 6px auto;padding:36px 48px}.c4l-embedded-caption{margin-top:24px}.c4l-quote,.c4lv-quote{margin:36px auto;max-width:90%}.c4l-quote .c4l-quote-caption{margin-top:24px}.c4l-dodontcards .c4l-dodontcards-do,.c4l-dodontcards .c4l-dodontcards-dont,.c4lv-dodontcards .c4l-dodontcards-do,.c4lv-dodontcards .c4l-dodontcards-dont{max-width:90%;margin:24px auto}.c4l-readingcontext,.c4lv-readingcontext,.c4lv-hiddenanswer .hiddenanswer-content{max-width:88%}.c4l-example,.c4lv-example{max-width:88%;padding:36px 48px}.c4l-expectedfeedback,.c4lv-expectedfeedback{max-width:88%;margin:48px auto}.c4l-allpurposecard,.c4lv-allpurposecard{margin:36px auto;max-width:90%}}@media only screen and (min-width: 768px){.c4l-keyconcept,.c4lv-keyconcept,.c4l-tip,.c4lv-tip,.c4l-reminder,.c4lv-reminder,.c4l-attention,.c4lv-attention,.c4l-dodontcards-do,.c4lv-dodontcards-do,.c4l-dodontcards-dont,.c4lv-dodontcards-dont,.c4l-readingcontext,.c4lv-readingcontext,.c4l-expectedfeedback,.c4lv-expectedfeedback,.c4l-allpurposecard,.c4lv-allpurposecard,.c4l-learningoutcomes,.c4lv-learningoutcomes,.c4lv-hiddenanswer .hiddenanswer-content{max-width:75%}.c4l-keyconcept.c4l-full-width-variant,.c4lv-keyconcept.c4l-full-width-variant,.c4l-tip.c4l-full-width-variant,.c4lv-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-readingcontext.c4l-full-width-variant,.c4lv-readingcontext.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content{max-width:100%}.c4l-quote,.c4lv-quote{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-quote,.c4l-spacer+.c4lv-quote{margin:24px auto 14px auto}.c4l-example,.c4lv-example{margin:48px auto;max-width:75%}.c4l-spacer+.c4l-example,.c4l-spacer+.c4lv-example{margin:24px auto 12px auto}}@media only screen and (min-width: 992px){.c4l-modal-no-preview.modal-open .modal-dialog{max-width:500px}.c4l-buttons-preview{max-height:314px}.c4l-buttons-preview.c4l-no-preview{justify-content:center;max-height:324px}.c4l-buttons-preview.c4l-no-preview .c4l-buttons-grid{grid-gap:9px;justify-content:center;width:405px}.c4l-buttons-preview.c4l-no-preview .c4l-code-preview{display:none}.c4l-buttons-grid{display:grid;grid-template-columns:repeat(auto-fill, 116px);grid-template-rows:repeat(auto-fill, 100px);grid-gap:4px;justify-content:flex-start;width:377px;padding:3px 0 3px 3px}.c4lt-dialog-button{height:100px;width:116px;max-width:116px;box-shadow:none;border-radius:4px;margin-bottom:0}.c4lt-dialog-button .c4l-button-text::before{top:20px;left:0;right:0;height:20px;width:26px;margin:0 auto;border-right:none}.c4lt-dialog-button .c4l-button-text{padding:55px 8px 15px 8px;font-size:12px;font-weight:500;line-height:13px;width:80px;text-align:center;justify-content:center}.c4lt-dialog-button .c4l-button-variants{grid-auto-flow:row;grid-gap:0;align-content:flex-start;justify-content:start;width:36px;height:99px;background-color:#ecf3ff;margin:0}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant{display:flex;justify-content:center;align-items:center;color:#1679f9;height:33px;width:36px}.c4lt-dialog-button:hover,.c4lt-dialog-button:active{box-shadow:0 0 0 3px rgba(22,121,249,.3)}.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:first-child,.c4lt-dialog-button .c4l-button-variants .c4l-button-variant:nth-child(2){border-bottom:1px solid #fff}.c4lt-dialog-button:hover .c4l-button-variants .c4l-button-variant{box-shadow:none}.c4l-code-preview{position:relative;display:flex;flex-direction:column;height:300px;width:343px;align-items:center;justify-content:center}.c4l-preview-default{border:1px solid #e1e5ee;border-radius:8px;color:#9297a1;padding:23px 10px;font-weight:400;font-size:12px;line-height:16px;text-align:center;width:60%;margin:0 auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}.c4l-text-preview{position:absolute;top:10px;right:10px;font-weight:600;font-size:9.5px;line-height:11px;letter-spacing:.06em;color:#fff;background-color:#535d76;border-radius:6px;padding:5px;text-transform:uppercase}}.c4l-keyconcept.c4l-full-width-variant,.c4l-quote.c4l-full-width-variant,.c4l-dodontcards.c4l-full-width-variant,.c4l-dodontcards-do,.c4l-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4l-figure.c4l-full-width-variant,.c4l-proceduralcontext.c4l-full-width-variant,.c4l-learningoutcomes.c4l-full-width-variant,.c4l-allpurposecard.c4l-full-width-variant{max-width:100%}.c4l-tip.c4l-full-width-variant,.c4l-reminder.c4l-full-width-variant,.c4l-attention.c4l-full-width-variant{max-width:99%}.c4l-readingcontext.c4l-full-width-variant,.c4l-example.c4l-full-width-variant,.c4l-expectedfeedback.c4l-full-width-variant,.c4l-hiddenanswer.c4l-full-width-variant .hiddenanswer-content{max-width:94%}.c4lv-keyconcept.c4l-full-width-variant,.c4lv-quote.c4l-full-width-variant,.c4lv-dodontcards.c4l-full-width-variant,.c4lv-dodontcards-do,.c4lv-dodontcards.c4l-full-width-variant .c4l-dodontcards-dont,.c4lv-figure.c4l-full-width-variant,.c4lv-proceduralcontext.c4l-full-width-variant,.c4lv-learningoutcomes.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-allpurposecard.c4l-full-width-variant{max-width:100%}.c4lv-tip.c4l-full-width-variant,.c4lv-reminder.c4l-full-width-variant,.c4lv-attention.c4l-full-width-variant{max-width:99%}.c4lv-readingcontext.c4l-full-width-variant,.c4lv-example.c4l-full-width-variant,.c4lv-expectedfeedback.c4l-full-width-variant,.c4lv-hiddenanswer.c4l-full-width-variant .hiddenanswer-content{max-width:94%}