/* Webfont: Reforma2018 Blanca */
@font-face { font-family: 'Reforma2018'; src: url("../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.woff2") format("woff2"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.woff") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.eot") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-Blanca.ttf") format("truetype"); /* Safari, Android, iOS */ font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; }

/* Webfont: Reforma2018 BlancaItalica */
@font-face { font-family: 'Reforma2018'; src: url("../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.woff2") format("woff2"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.woff") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.eot") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-BlancaItalica.ttf") format("truetype"); /* Safari, Android, iOS */ font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; }

/* Webfont: Reforma2018 Negra */
@font-face { font-family: 'Reforma2018'; src: url("../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.woff2") format("woff2"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.woff") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.eot") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-Negra.ttf") format("truetype"); /* Safari, Android, iOS */ font-style: normal; font-weight: 700; text-rendering: optimizeLegibility; }

/* Webfont: Reforma2018 NegraItalica */
@font-face { font-family: 'Reforma2018'; src: url("../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.woff2") format("woff2"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.woff") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.eot") format("woff"), url("../assets/../assets/fonts/Reforma2018/Reforma2018-NegraItalica.ttf") format("truetype"); /* Safari, Android, iOS */ font-style: italic; font-weight: 700; text-rendering: optimizeLegibility; }

/* Webfont: Lato-Bold */
@font-face { font-family: 'lato'; src: url("../assets/fonts/lato/Lato-Bold.eot"); /* IE9 Compat Modes */ src: url("../assets/fonts/lato/Lato-Bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/lato/Lato-Bold.woff2") format("woff2"), url("../assets/fonts/lato/Lato-Bold.woff") format("woff"), url("../assets/fonts/lato/Lato-Bold.ttf") format("truetype"); font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; }

/* Webfont: Lato-BoldItalic */
@font-face { font-family: 'lato'; src: url("../assets/fonts/lato/Lato-BoldItalic.eot"); /* IE9 Compat Modes */ src: url("../assets/fonts/lato/Lato-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/lato/Lato-BoldItalic.woff2") format("woff2"), url("../assets/fonts/lato/Lato-BoldItalic.woff") format("woff"), url("../assets/fonts/lato/Lato-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: bold; text-rendering: optimizeLegibility; }

/* Webfont: Lato-Regular */
@font-face { font-family: 'lato'; src: url("../assets/fonts/lato/Lato-Regular.eot"); /* IE9 Compat Modes */ src: url("../assets/fonts/lato/Lato-Regular.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/lato/Lato-Regular.woff2") format("woff2"), url("../assets/fonts/lato/Lato-Regular.woff") format("woff"), url("../assets/fonts/lato/Lato-Regular.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; }

/* Webfont: Lato-Italic */
@font-face { font-family: 'lato'; src: url("../assets/fonts/lato/Lato-Italic.eot"); /* IE9 Compat Modes */ src: url("../assets/fonts/lato/Lato-Italic.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/lato/Lato-Italic.woff2") format("woff2"), url("../assets/fonts/lato/Lato-Italic.woff") format("woff"), url("../assets/fonts/lato/Lato-Italic.ttf") format("truetype"); font-style: italic; font-weight: normal; text-rendering: optimizeLegibility; }

/* Webfont: Lato-Light */
@font-face { font-family: 'lato'; src: url("../assets/fonts/lato/Lato-Light.eot"); /* IE9 Compat Modes */ src: url("../assets/fonts/lato/Lato-Light.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/lato/Lato-Light.woff2") format("woff2"), url("../assets/fonts/lato/Lato-Light.woff") format("woff"), url("../assets/fonts/lato/Lato-Light.ttf") format("truetype"); font-style: normal; font-weight: 300; text-rendering: optimizeLegibility; }

/* Webfont: Lato-LightItalic */
@font-face { font-family: 'lato'; src: url("../assets/fonts/lato/Lato-LightItalic.eot"); /* IE9 Compat Modes */ src: url("../assets/fonts/lato/Lato-LightItalic.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/lato/Lato-LightItalic.woff2") format("woff2"), url("../assets/fonts/lato/Lato-LightItalic.woff") format("woff"), url("../assets/fonts/lato/Lato-LightItalic.ttf") format("truetype"); font-style: italic; font-weight: 300; text-rendering: optimizeLegibility; }

/* BEGIN COMMUNITYRULE-SPECIFIC CSS */
.rulebox:not([class*="rulebox-"]) .editable:empty { background-color: #e8e8e8; }

.rulebox:not([class*="rulebox-"]) h1 { max-width: 45%; }

.rulebox:not([class*="rulebox-"]) p { min-height: 3em; }

.rulebox:not([class*="rulebox-"]) .rulebuilder_input { background-color: #e8e8e8; background-image: linear-gradient(white 38px, transparent 0) , linear-gradient(white 38px, transparent 0) , linear-gradient(white 38px, transparent 0) , linear-gradient(white 38px, transparent 0) , linear-gradient(white 38px, transparent 0) , linear-gradient(white 38px, transparent 0) ; background-size: 80px 38px, 78px 38px, 140px 38px, 90px 38px, 200px 38px, 130px 38px; background-position: 10px 10px, 100px 10px, 188px 10px, 338px 10px, 438px 10px, 648px 10px; background-repeat: no-repeat; height: 58px; }

.rulebox:not([class*="rulebox-"]) .rulebuilder_list { background-color: #e8e8e8; min-height: 9em; max-width: 90%; }

.rulebox { border: 1px solid #e8e8e8; padding: 20px; margin: 20px 0 30px 0; }

.rulebox .prompt, .rulebox .module-type-header { color: #424242; font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; }

.rulebox .module-questions { color: #828282; font-size: .8em; }

.rulebox .module-type { margin-bottom: 15px; }

.rulebox .prompt, .rulebox .delete-module, .rulebox .rulebuilder_modules, .rulebox .linkbox_input, .rulebox .metadata_input { display: none; }

.rulebox .editable, .rulebox input.editable { /* All editable fields */ padding: 10px; min-height: 1.5em; border: none; }

.rulebox .editable[contenteditable="false"] { /* inactive editable fields */ border: none; }

.rulebox .rulebuilder_input .module .delete-module { display: none !important; }

.rulebox .rulebuilder_input { overflow: hidden; margin: 0 0 30px; text-align: left; min-height: 1.5em; }

.rulebox .rulebuilder_input .prompt { color: #111; }

.rulebox .rulebuilder_input .module .module-info { display: none; }

.rulebox .rulebuilder_modules .module .delete-module { display: none; }

.rulebox .metadata_input, .rulebox .metadata_display { border: 1px solid #e8e8e8; background-color: white; margin: 30px 0 15px 0; padding: 10px; }

.rulebox .metadata_display { border-radius: 6px; text-align: center; }

.rulebox .metadata_input input { margin-bottom: 15px; }

.rulebox.rulebox-edit .prompt, .rulebox.rulebox-edit .delete-module, .rulebox.rulebox-edit .rulebuilder_modules, .rulebox.rulebox-edit .metadata_input { display: block; }

.rulebox.rulebox-edit .linkbox_input { display: inline; }

.rulebox.rulebox-edit .editable[contenteditable="true"] { /* active editable fields */ border-bottom: 1px dashed #424242; }

.rulebox.rulebox-edit .metadata_display { display: none; }

.rulebox.rulebox-edit .prompt .module { margin: 0; }

.rulebox.rulebox-edit .prompt .module:hover, .rulebox.rulebox-edit .prompt .module:active { border-color: inherit; cursor: default; }

.rulebox.rulebox-edit .module:hover { cursor: grab; border-color: #424242; }

.rulebox.rulebox-edit .module:hover .module-logo { cursor: pointer; }

.rulebox.rulebox-edit .module:active { cursor: grabbing; border-color: #FFC907; }

.rulebox.rulebox-edit .rulebuilder_input .module .delete-module { display: inline !important; }

.rulebox.rulebox-edit .module.module-custom input { border-width: 0 0 1px 0; border-bottom: 1px dashed #424242; font-family: inherit; font-size: inherit; padding: 5px; }

.rulebox.rulebox-edit .rulebuilder_input { border: 4px dashed #FFC907; color: #111; padding: 10px 10px 10px 10px; }

.rulebox.rulebox-edit .rulebuilder_input.drag-target { background-color: #FFC907; border-style: solid; }

.page-content { overflow-x: hidden; }

.callout-box { background: url(/assets/woman-on-phone.png) no-repeat; background-position: left bottom; background-size: 40% auto; padding: 4rem 0; padding-left: 40%; margin: 2rem 0; text-align: left; position: relative; }

@media screen and (max-width: 500px) { .callout-box { background: unset; padding-left: 0; } }

.callout-box__yellow-bar { position: absolute; height: 85%; width: 500vw; margin-left: -250vw; background-color: #FFC907; left: 0; bottom: 0; mix-blend-mode: multiply; }

.callout-box__text { position: relative; }

.callout-box__button { margin: 3rem 0 0; text-align: left; }

.button.button--call-out { background: white url(/assets/elements/icon_do.png) no-repeat calc(100% - 0.5rem) center; background-size: auto calc(100% - 1rem); border-radius: 4px; color: black; display: inline-block; font-size: 32px; font-weight: bold; float: unset; padding: 1rem 5rem 1rem 1rem; text-transform: uppercase; text-decoration: none; }

/* CLASSES */
.button { position: relative; display: inline; float: right; border: 0px solid gray; color: gray; background-color: white; text-align: center; border-radius: 6px; padding: 0; }

.callout-text { font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 35px; margin: 1.5em 0 1em 0; }

.callout-icon { font-size: 2em; margin: 1.5em 0 1em 0; }

.prompt { color: gray; }

.page-type { color: gray; }

.page-type a, .page-type a:visited { color: gray; }

/* Modules */
#module-toggle { float: right; position: relative; margin-left: 10px; padding: 5px; }

#module-menu { /*    max-height: 300px; overflow-y: scroll; */ margin: 0 0 10px 0; padding: 10px; border: 1px solid lightgray; }

.button:hover { background-color: lightgray; }

.module { display: block; border: 2px solid #000; color: #111; background-color: #fff; text-align: center; line-height: 1.5; padding: 5px; margin: 5px; display: inline-block; font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .8em; cursor: pointer; }

.delete-module { cursor: pointer; }

.builder-list { margin-bottom: 2em; }

.builder-list ul { color: gray; margin-bottom: 0px; }

.builder-list li { padding-bottom: .5em; }

#custom-field-container { animation: blinker 1s linear 1; }

@keyframes blinker { from { background-color: lightgray; }
  to { background-color: white; } }

.field-controls { float: right; font-size: .7em; }

.field-controls a { cursor: pointer; }

.configs { padding: 0px 0 20px 0; }

.config-button { cursor: pointer; }

/* MODULE PAGES */
#module-summary { font-size: 1.3em; }

.display_rule .site-nav, .display_rule .post-header, .display_rule .site-footer { display: none; }

/* pushButton
These are the major functional buttons*/
.pushButton { border: 1px solid gray; color: gray; background-color: white; text-align: center; border-radius: 6px; padding: 5px; margin: 0 5px 0 5px; font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.2em; }

.pushButton:hover { background-color: lightgray; }

.chevrons { /* The maximize/minimize button */ font-size: 1em; }

.icons { /* icons are from https://github.com/tabler/tabler-icons */ margin: 0 5px 0 0; }

/* link fields
Enabling users to add links*/
.link-text { width: 40%; border-top: 0px; border-right: 0px; border-left: 0px; font-size: 1em; }

.link-divider { margin: 0 20px 0 20px; display: inline; }

.link-url { border-top: 0px; border-right: 0px; border-left: 1px; width: 40%; font-size: 1em; }

/* LIBRARY */
#librarylist { margin: 50px 0 0 0; }

.library-item { margin: 0 0 30px 0; }

.library-rule-name { display: inline-block; margin: 0; font-size: 1.2em; font-weight: bold; }

.library-rule-name img { max-width: 50px; margin: 0 15px 10px 0; }

.library-rule-author { display: inline-block; margin: 0 0 0 10px; font-size: .8em; color: gray; }

.library-module { border-width: 1px; font-size: .7em; padding: 1px 5px 1px 5px; margin: 0px; cursor: default; }

/* VARIOUS IDs */
#structure { font-size: 1.3em; }

#rulewriter-box { margin: 50px 0 50px 0; display: none; }

#editToggle { float: right; clear: both; }

#toggleDisplayMode, #fork { margin: 0 5px 10px 0; display: none; }

#publishRule { margin: 0 0 10px 0; }

#lineage { margin: 0 0 20px 0; display: none; }

#attribution { font-family: serif; font-size: .8em; text-align: right; }

#trash { display: none; }

#discuss { margin: 20px 0 20px 0; }

#discuss-button { display: none; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: normal 20px/1.5 Reforma2018, serif; color: #111; background-color: #fdfdfd; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

hr { border-color: #e8e8e8; border-style: solid; border-width: 1px 0 0; margin: 29px 0 30px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 17.5px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 19px; font-weight: normal; }

h1 { font-size: 35px; font-weight: bold; }

h2 { font-size: 29px; font-weight: normal; }

h3 { font-size: 24px; font-weight: normal; }

h4 { font-size: 19px; font-weight: normal; }

/** Links */
a { color: #2a7ae2; text-decoration: none; }

a:visited { color: #1756a9; }

a:hover { color: #111; text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }

code { padding: 1px 5px; }

pre { padding: 8px 12px; overflow-x: auto; }

pre > code { border: 0; padding-right: 0; padding-left: 0; }

/** additional tags */
mark { background-color: #FFC907; color: inherit; box-shadow: -3px 0 0 0 #FFC907, 3px 0 0 0 #FFC907; }

/** Wrapper */
.wrapper { max-width: -webkit-calc(1000px - (30px * 2)); max-width: calc(1000px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }

@media screen and (max-width: 800px) { .wrapper { max-width: -webkit-calc(1000px - (30px)); max-width: calc(1000px - (30px)); padding-right: 15px; padding-left: 15px; } }

/** Clearfix */
.footer-col-wrapper:after, .wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

.icon > svg path { fill: #828282; }

/** Site header */
.site-header { background-color: #FFC907; border-bottom: 3px solid #000; padding: 5px 0; min-height: 56px; position: relative; }

.site-title { font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 26px; font-weight: bold; line-height: 56px; margin-bottom: 0; float: left; }

.site-title, .site-title:visited { color: #000; }

.site-nav { font-family: lato, "Helvetica Neue", Helvetica, Arial, sans-serif; float: right; line-height: 56px; z-index: 1000; }

.site-nav .menu-icon { display: none; }

.site-nav .page-link { color: #111; line-height: 1.5; }

.site-nav .page-link:not(:last-child) { margin-right: 20px; }

.site-nav .page-link:hover, .site-nav .page-link.page-link-active { border-bottom: 3px solid; text-decoration: none; }

@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #fdfdfd; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; display: block; } .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; } .site-nav .menu-icon > svg { width: 18px; height: 15px; } .site-nav .menu-icon > svg path { fill: #424242; } .site-nav .trigger { clear: both; display: none; } .site-nav:hover .trigger { display: block; padding-bottom: 5px; } .site-nav .page-link { display: block; padding: 5px 10px; margin-left: 20px; } .site-nav .page-link:not(:last-child) { margin-right: 0; } .site-nav .trigger #loginLogoutButton #logout .dropdown-content_header {     position: absolute; left: 0;  } .site-nav .trigger #loginLogoutButton #logout { background-color: white;  color: black; } }

/** Site footer */
.site-footer { padding: 30px 0; background: #fff; box-shadow: inset 0px 2px 5px 0px #e8e8e8; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper { font-size: 15px; color: #828282; margin-left: -15px; }

.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }

.footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }

.footer-col-2 { width: -webkit-calc(20% - (30px / 2)); width: calc(20% - (30px / 2)); }

.footer-col-3 { width: -webkit-calc(45% - (30px / 2)); width: calc(45% - (30px / 2)); }

@media screen and (max-width: 800px) { .footer-col-1, .footer-col-2 { width: -webkit-calc(50% - (30px / 2)); width: calc(50% - (30px / 2)); } .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

@media screen and (max-width: 600px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }

/** Page content */
.page-content { padding: 30px 0; }

.page-heading { font-size: 20px; }

.post-list { margin-left: 0; list-style: none; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 17.5px; color: #828282; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 30px; }

.post-content { margin-bottom: 30px; }

.post-content h2 { font-size: 32px; }

@media screen and (max-width: 800px) { .post-content h2 { font-size: 28px; } }

.post-content h3 { font-size: 26px; }

@media screen and (max-width: 800px) { .post-content h3 { font-size: 22px; } }

.post-content h4 { font-size: 20px; }

@media screen and (max-width: 800px) { .post-content h4 { font-size: 18px; } }

.user-icon { display: inline-block; position: relative; }

.dropdown_header { display: inline-block; position: relative; z-index: 1000; background-color: #FFC907; }

.dropdown-content_header { display: none; position: absolute; width: auto; overflow: auto; box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4); /* background-color: rgba(255, 255, 255, 0); */ background-color: white; font-family: Reforma2018, serif; font-size: 1em; }

.dropdown_header.active .dropdown-content_header { display: block; }

.dropdown-content_header a { display: block; color: #000000; padding: 5px; text-decoration: none; }

.dropdown-content_header a:hover { color: #FFFFFF; background-color: #FFC907; }

.dropdown_header:hover { /* Resetting styles for hover state */ border: none; box-shadow: none; display: block; /* Or any other appropriate display value */ grid-template-columns: initial; /* Or any other appropriate value */ }

/* Style for the modal */
/* #navBar.modal { display: flex; flex-direction: column; align-items: center; } */
#emailCode, #emailCodeVerify { flex-direction: row; align-items: center; margin-bottom: 10px; }

#emailCode { display: block; }

#emailCodeVerify { display: none; }

.modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: white; border: 2px solid #ccc; z-index: 2000; width: 60%; height: 20%; text-align: center; font-family: Reforma2018, serif; font-size: 1em; }

@media screen and (max-width: 600px) { .modal { padding-bottom: 5%; padding-top: 10% !important; width: 80% !important; height: 20% !important;  } .modal #emailInput { width: 70%; } .modal button { width: 40%; height: 40%; margin: 5px; font-size: 20px !important;}}
/* Additional styling for buttons */
.btn_login_logout { position: relative; border-radius: 4px; background-color: transparent; border: 1px solid #29335C; font-family: Reforma2018, serif; margin: 10px; padding-left: 2px; padding-right: 2px; }

.btn_login_logout.primary_login_logout { background-color: #FFC907; color: black; border: 1px solid #d3a500; }

.btn_login_logout.is-large_login_logout { font-size: 1em; text-align: center; }

.btn_login_logout:hover { cursor: pointer; background-color: #d3a500; }

/** Syntax highlighting styles */
.highlight { background: #fff; }

.highlighter-rouge .highlight { background: #eef; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

.rule-app { padding: 2rem; position: relative; }

.rule-app * { box-sizing: border-box; }

@media screen and (max-width: 768px) { .rule-app { padding: 2rem .5rem; } }

.btn { border-radius: 4px; padding: .2em 1em; background-color: transparent; border: 1px solid #29335C; }

.btn.has-icon { padding-left: .25em; display: flex; align-items: center; }

.btn.has-icon img { margin-right: .25em; }

.btn.is-large { font-size: 1.2em; }

.btn.is-loading img { animation: rotation 2s infinite linear; }

@keyframes rotation { from { transform: rotate(0deg); }
  to { transform: rotate(-359deg); } }

.btn:hover { cursor: pointer; color: #29335C; border-color: black; background-color: lightgray; }

.btn.primary { background-color: #FFC907; color: black; border: 1px solid #d3a500; }

.btn.primary:hover { cursor: pointer; background-color: #d3a500; }

.btn.warn { background-color: #ff8f07; color: black; border: 1px solid #d37400; }

.btn.warn:hover { cursor: pointer; background-color: #d37400; }

.btn.danger { background-color: #ff073d; color: black; border: 1px solid #d3002e; }

.btn.danger:hover { cursor: pointer; background-color: #d3002e; }

.btn.success { background-color: #C2F9BB; color: #051a02; border: 1px solid #98f58c; }

.btn.success:hover { cursor: pointer; background-color: #98f58c; }

.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }

.btn { position: relative; }

.btn .btn-cover { position: absolute; font-size: 0.6em; background-color: #ff8f07; width: 110%; top: 30%; left: -10px; box-shadow: 1px 1px 3px #0003; transform: rotate(0deg) scale(0.01); transition: all 0.3s ease; }

.btn:hover .btn-cover { transform: rotate(5deg) scale(1); }

h1 .icon img { width: 50px; }

h2 .icon img { width: 40px; }

.label { display: block; flex: 1 1 auto; }

.label > span { display: block; }

.label input[type='text'], .label textarea { font-size: 1rem; font-family: monospace; margin: .5rem 0 1rem; padding: .25rem; width: 100%; }

.label textarea { max-width: 65ch; }

.label input.input-stack { margin-bottom: 0; }

.label small { color: #aaa; }

.label-group { display: flex; gap: 1rem; }

@media screen and (max-width: 768px) { .label-group:not(.is-mobile) { gap: 0; flex-direction: column; } }

@media screen and (max-width: 420px) { .label-group { gap: 0; flex-direction: column; } }

.dropdown { cursor: pointer; flex-direction: column; background-color: #fff; padding: 2px; border-radius: 4px; }

.dropdown input[type='radio'] { display: none; }

.dropdown label { cursor: pointer; }

.dropdown label div { display: inline-flex; padding: 2px; }

.dropdown input[type='radio']:checked ~ div { background-color: #FFC907; border-radius: 4px; }

@media screen and (max-width: 768px) { .dropdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); } .dropdown label.default { display: none; } }

@media screen and (min-width: 768px) { .dropdown { position: absolute; } .dropdown label:not(.selected) { display: none; } .dropdown:hover { border: 1px solid #ddd; box-shadow: 1px 1px 5px #0003; display: grid; grid-template-columns: 1fr 1fr 1fr; } .dropdown:hover label { display: block; } .dropdown:hover label:hover:not(.selected) div { background-color: #ddd; border-radius: 4px; } .dropdown:hover label.default, .dropdown label.selected ~ label.default { display: none; } .dropdown label.default { display: block; } }

.editor .details .label .dropdown { margin-top: calc(.5rem - 2px); }

.editor .details .label .dropdown img { width: 30px; }

@media screen and (min-width: 768px) { .editor .details .label .dropdown:hover { grid-template-columns: repeat(4, 1fr); z-index: 100; } }

.rule__modules { border: 4px dashed #FFC907; margin: 1rem 0; position: relative; }

@media screen and (max-width: 768px) { .rule__modules { margin: 1rem -0.75rem; } }

.rule__modules.target { background-color: #FFC907; }

.rule__modules .modules__dropzone { padding: 1.25rem 1rem 1rem; }

.rule__modules .modules__dropzone .module.drag-over { background-color: #FFC907; border-style: dashed; }

.rule__modules label { position: absolute; top: -1rem; left: 1rem; background: #FFC907; padding: 0.25rem .5rem; border-radius: 3px; font-size: 0.8rem; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; }

.module-editor__wrapper { background-color: #fff; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px #0002; margin: 2rem 0 1rem; padding: 1rem; position: relative; }

.module-editor__wrapper .module-editor { display: flex; flex-direction: row-reverse; justify-content: space-between; padding-top: .5rem; }

.module-editor__wrapper .module-editor .module-editor__right { position: absolute; top: -1.2rem; right: 1rem; }

.module-editor__wrapper .module-editor .module-editor__fields { flex: 1 1 auto; }

.module-editor__wrapper .module-editor .label { font-size: 0.8em; }

.module-editor__wrapper .module-editor .label input, .module-editor__wrapper .module-editor .label textarea { font-size: 1rem; margin-top: 0; }

.module-editor__wrapper .module-editor__label { position: absolute; top: -1rem; left: 1rem; background: #fff; }

.module { align-items: center; display: inline-flex; gap: 0.5rem; margin: 0; padding: .25rem; flex-wrap: wrap; }

.module.in-editor { background-color: #FFC907; }

.module .submodules { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.module .module__grain { display: none; opacity: .3; cursor: grab; }

.module.mouse-over > .module__icon-wrapper > .module__grain { display: block; opacity: 1; }

.module.mouse-over > .module__icon-wrapper > .module__icon { display: none; }

.module.module--edit { font-family: monospace; padding: 0; }

.module.module--edit input { width: fit-content; margin: 0; padding: 0.25rem; }

.modules__grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.modules .modules__type { margin-bottom: 1rem; }

.modules h2 { margin-bottom: 0; }

.modules h2::first-letter { text-transform: capitalize; }

.modules .modules__header { display: flex; justify-content: space-between; align-items: center; }

.modules .modules__header a { cursor: pointer; }

.rule .rule__creator { display: flex; align-items: center; justify-content: center; gap: 1rem; border-top: 1px solid #ccc; margin-top: 2rem; padding-top: 2rem; }

.tabs { display: flex; flex-wrap: wrap; gap: 1rem; }

.tabs .tab__control { cursor: pointer; border: 1px solid #ccc; border-bottom: none; background-color: #ccc; padding: .5rem 1rem; text-align: center; flex: 1 1 auto; }

.tabs .tab__control img { margin-right: .25em; }

.tabs .tab__control.active { background-color: #fff; margin-bottom: -1px; }

@media screen and (max-width: 768px) { .tabs { gap: .5rem; font-size: 0.8rem; } .tabs .tab__control img { display: block; margin: 0 auto; } }

@media screen and (max-width: 550px) { .tabs { gap: 0; } }

.tab__pane { border: 1px solid #ccc; padding: 1rem; margin-bottom: 2rem; }

.app-wrapper.is-preview { max-width: 65ch; margin: 0 auto; }

.editor, .rule { border: 1px solid #ccc; border-radius: 3px; background-color: #fff; margin: 0 auto; padding: 2rem; position: relative; }

.editor .controls, .rule .controls { position: absolute; top: -1rem; right: 2rem; }

@media screen and (max-width: 768px) { .editor, .rule { padding: 1.5rem 1rem 1rem; } }

@media screen and (max-width: 420px) { .editor, .rule { font-size: 90%; } }

.rule .modules__grid { padding: 1rem 0; }

.rule .module-list { margin-bottom: 1rem; }

.rule .module-list, .rule .module-list ul { margin-left: 30px; }

.rule .module-list .submodules { margin-bottom: 1rem; }

.rule .module-list .module-list-item { list-style: none; position: relative; }

.rule .module-list .module-list-item .module__icon { position: absolute; left: -30px; top: -3px; }

.json { white-space: pre-wrap; }

.legacy .module img, .legacy .module a { display: none; }

/*# sourceMappingURL=main.css.map */