.pagebuilder {display: grid;gap: 20px;grid-template-areas: "header" "navigation" "content" "sidebar" "footer";} .pagebuilder>.header {grid-area: header;} .pagebuilder>.content {grid-area: content;} .pagebuilder>.navigation {grid-area: navigation;} .pagebuilder>.sidebar {grid-area: sidebar;} .pagebuilder>.footer {grid-area: footer;} @media (min-width: 768px) {.pagebuilder {grid-template-columns: 3fr 1fr;grid-template-areas: "header header" "navigation navigation" "content sidebar" "content sidebar" "footer footer";} .pagebuilder>.navigation>ul {display: flex;justify-content: space-between;}} @media (min-width: 1280px) {.pagebuilder {grid-template-columns: 1fr 2fr 1fr;grid-template-areas: "header header header" "navigation content sidebar" "navigation content sidebar" "footer footer footer";} .pagebuilder>.navigation>ul {flex-direction: column;}} .Anchor {font-weight: 500;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;} .Anchor:hover {color: var(--active-color);} .Flex {display: flex;flex-direction: row;flex-wrap: wrap;order: 0;flex-grow: 0;flex-shrink: 0;flex-basis: auto;justify-content: flex-start;align-self: auto;align-items: flex-start;align-content: flex-start;gap: normal;row-gap: normal;column-gap: normal;} .FlexItem {display: flex;flex-direction: row;flex-wrap: wrap;order: 0;flex-grow: 0;flex-shrink: 0;flex-basis: auto;justify-content: flex-start;align-self: auto;align-items: flex-start;align-content: flex-start;gap: normal;row-gap: normal;column-gap: normal;} .FlexItem > * {display: block;} .Button {font-weight: 500;text-align: center;border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;transition: all 150ms ease-in-out;cursor: pointer;} .Button.primary {background-color: var(--primary-color);color: var(--text-color-complement);} .Button.primary:hover {background-color: var(--primary-color);filter: brightness(1.3);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Button.primary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Button.primary:active {background-color: var(--primary-color);border-color: var(--border-color);} .Button.secondary {background-color: var(--secondary-color);color: var(--text-color-mix);} .Button.secondary:hover {background-color: var(--secondary-color);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Button.secondary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Button.secondary:active {background-color: var(--secondary-color);border-color: var(--border-color);} .Button[disabled] {opacity: 0.5;cursor: not-allowed;} .Container {position: relative;width: 100%;} .Label {display: block;font-weight: 500;font-size: 0.875rem;line-height: 1.25rem;color: var(--text-color);padding-left: 0.5rem;} .InputOverwrite {box-sizing: border-box;width: 100%;background-color: var(--primary-color);border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;transition: all 150ms ease-in-out;cursor: pointer;border-color: var(--border-color);} .InputOverwrite::placeholder {color: var(--text-color);} .InputOverwrite:focus {outline: none;box-shadow: 0 0 0 2px rgba(39, 128, 253, 0.3);border-color: var(--border-color-dark);} .OptionContainer {box-sizing: border-box;width: 100%;position: absolute;z-index: 10;overflow-y: auto;overflow-x: hidden;display: block;background-color: var(--secondary-color);filter: brightness(1.3);margin-top: 0.4rem;padding-top: 0.75rem;padding-right: 1rem;padding-bottom: 0.75rem;padding-left: 1rem;max-height: 240px;font-size: 0.875rem;line-height: 1.25rem;border-radius: 0.375rem;border: 1px solid var(--border-color);} .OptionContainer > ul {padding: 0px;margin: 0px;} .OptionContainer > ul > li {padding-left: 0.5rem;padding-right: 0.5rem;} .OptionContainer > ul > li:hover {background-color: var(--primary-color-light);color: var(--text-color);cursor: pointer;} .combobox-icon {padding-right: 10px;height: 16px;width: 16px;} .Input {box-sizing: border-box;background-color: var(--primary-color);border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;transition: all 150ms ease-in-out;cursor: pointer;border-color: var(--border-color);} .CheckboxContainer {text-align: left;} .Checkbox {box-sizing: border-box;width: 20px;background-color: var(--primary-color);border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;transition: all 150ms ease-in-out;cursor: pointer;border-color: var(--border-color);} .Input.primary {background-color: rgb(217, 217, 217);color: #1a1a1a;} .Input.primary:hover {background-color: var(--secondary-color);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Input.primary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Input.primary:active {border-color: var(--border-color);} .Input.secondary {background-color: var(--primary-color);color: rgb(229, 229, 229);} .Input.secondary:hover {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Input.secondary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Input.secondary:active {border-color: var(--border-color);} .Input[disabled] {opacity: 0.5;cursor: not-allowed;} .Option {box-sizing: border-box;background-color: var(--primary-color);border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;transition: all 150ms ease-in-out;cursor: pointer;border-color: var(--border-color);} .Option.primary {background-color: var(--primary-color);color: var(--text-color);} .Option.primary:hover {background-color: var(--primary-color-light);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Option.primary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Option.primary:active {background-color: var(--primary-color-light);border-color: var(--border-color);} .Option.secondary {background-color: var(--secondary-color);color: var(--text-color);} .Option.secondary:hover {background-color: var(--secondary-color-light);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Option.secondary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Option.secondary:active {background-color: var(--secondary-color-light);border-color: var(--border-color);} .Option[disabled] {opacity: 0.5;cursor: not-allowed;} .Select {box-sizing: border-box;background-color: var(--primary-color);border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;transition: all 150ms ease-in-out;cursor: pointer;border-color: var(--border-color);} .Select.primary {background-color: var(--primary-color);color: #f1f1f1;} .Select.primary:hover {background-color: var(--primary-color-light);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Select.primary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Select.primary:active {background-color: var(--primary-color-light);;border-color: var(--border-color);} .Select.secondary {background-color: var(--secondary-color);color: #121212;} .Select.secondary:hover {background-color: var(--secondary-color-light);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Select.secondary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: var(--border-color);} .Select.secondary:active {background-color: var(--secondary-color-light);border-color: var(--border-color);} .Select[disabled] {opacity: 0.5;cursor: not-allowed;} .Textarea {font-weight: 500;border: 1px solid transparent;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;border-radius: 0.375rem;width: calc(100% - 2rem - 2px) !important;resize: vertical;transition: all 150ms ease-in-out;cursor: pointer;} .Textarea.primary {background-color: rgb(217, 217, 217);color: #1a1a1a;} .Textarea.primary:hover {background-color: rgb(217, 217, 217);outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: rgb(114, 113, 113);} .Textarea.primary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: rgb(114, 113, 113);} .Textarea.primary:active {background-color: #8d8d8d;border-color: rgb(114, 113, 113);} .Textarea.secondary {background-color: rgb(38, 38, 38);color: rgb(229, 229, 229);} .Textarea.secondary:hover {background-color: #191919;outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: rgb(114, 113, 113);} .Textarea.secondary:focus {outline: none;box-shadow: 0 0 0 3px rgba(141, 141, 141, 0.5);border-color: rgb(114, 113, 113);} .Textarea.secondary:active {background-color: #191919;border-color: rgb(114, 113, 113);} .Textarea[disabled] {opacity: 0.5;cursor: not-allowed;} .Grid {display: grid;gap: 1rem;grid-auto-flow: dense;grid-template-areas: none;grid-template-columns: auto;grid-template-rows: auto;} .GridItem {grid-column-start: auto;grid-column-end: auto;grid-row-start: auto;grid-row-start: auto;grid-area: auto;} .List {font-weight: 500;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;list-style-position: inside;} .ListItem {font-weight: 500;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;} .ListItem:hover {color: var(--focus-color);} .Area {margin: 0px;} .Audio {width: 100%;height: 50px;} .Image {margin-top: 1rem;margin-bottom: 1rem;-webkit-border-radius: 15px;-moz-border-radius: 15px;-ms-border-radius: 15px;border-radius: 15px;box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;} .Map {margin: 0px;} .Video {width: 100%;height: auto;} .Message {border-radius: 0.375rem;} .Message > p {margin: 0px;} .MessageTypeSuccess {background-color: var(--secondary-color);color: var(--text-color-mix);} .MessageTypeError {background-color: var(--secondary-color-dark);color: var(--text-color-mix);} .MessageTypeInfo {background-color: var(--secondary-color);color: var(--text-color-mix);} .ModalFooter {padding-bottom: 1rem;width: 100%;justify-content: flex-end !important;} .ModalFooter > button {width: 100%;} .ModalHeader {width: 100%;padding: 0px;align-items: center !important;justify-content: space-between !important;} .ModalHeader > h1, .ModalHeader > h2, .ModalHeader > h3, .ModalHeader > h4, .ModalHeader > h5, .ModalHeader > h6 {padding-left: 0px;} .ModalContainer {background-color: var(--secondary-color);position: fixed;top: 5%;left: 25%;max-height: 90%;width: 50%;outline: none;overflow-x: hidden;overflow-y: auto;padding: 15px;border-radius: 0.5rem;box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;} .ModalInner {position: relative;width: 100%;box-shadow: none;} .ModalContent {width: auto;box-shadow: none;} .Table {margin: 0;width: 100%;height: auto;text-align: center;border-collapse: collapse;} .THead {margin: 0;width: 100%;height: auto;} .TBody {margin: 0;width: 100%;height: auto;} .Tr {margin: 0;width: 100%;height: auto;} .Th, .Td {margin: 0;width: auto;height: auto;padding: 10px;border: 1px solid var(--border-color);} .Heading {font-weight: 500;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;color: var(--text-color-mix);} .Heading.h1 {font-size: 1.75rem;} .Heading.h2 {font-size: 1.5rem;} .Heading.h3 {font-size: 1.25rem;} .Heading.h4 {font-size: 1rem;} .Heading.h5 {font-size: 0.75rem;} .Heading.h6 {font-size: 0.5rem;} .Heading:hover {color: var(--text-color-mix);} .Label {font-weight: 500;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;color: var(--text-color-mix);} .Label:hover {color: var(--text-color-mix);} .Paragraph {font-weight: 500;padding: 0.5rem 1rem;font-size: 1rem;line-height: 1.5rem;color: var(--text-color-mix);} .Paragraph:hover {color: var(--text-color-mix);} .imageViewer {position: fixed;z-index: 10000;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;} .closeButton {position: fixed;z-index: 10010;bottom: 10px;right: 10px;padding: 5px 10px;background-color: var(--primary-color);border: 1px solid #000;border-radius: 50%;} .gfm {white-space: normal !important;word-wrap: normal !important;line-height: 1.6;color: var(--text-color-mix);} .gfm h1, .gfm h2, .gfm h3, .gfm h4, .gfm h5, .gfm h6 {font-weight: bold;margin-bottom: 0.5em;} .gfm h1 {font-size: 2em;} .gfm h2 {font-size: 1.5em;} .gfm h3 {font-size: 1.17em;} .gfm h4 {font-size: 1em;} .gfm h5 {font-size: 0.83em;} .gfm h6 {font-size: 0.67em;} .gfm p {display: block;margin-top: 0;margin-bottom: 1em;padding: 0;} .gfm img {zoom: normal;width: 100%;margin: 0px;padding: 0px;border-radius: 20px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} .gfm img:hover {cursor: pointer;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;} .gfm p:has(> :nth-child(2)) > img {width: calc(100% / 2 - 3px);} .gfm p:has(> :nth-child(3)) > img {width: calc(100% / 3 - 3px);} .gfm p:has(> :nth-child(4)) > img {width: calc(100% / 4 - 4px);} .gfm a {color: #0366d6;text-decoration: none;} .gfm a:hover {color: #0366d6;text-decoration: underline;} .gfm ul, .gfm ol {margin-top: 0;margin-bottom: 1em;padding-left: 2em;} .gfm li {margin-bottom: 0.5em;} .gfm code {background-color: #f6f8fa;border-radius: 3px;font-size: 0.9em;padding: 0.2em 0.4em;} .gfm pre {background-color: #f6f8fa;border-radius: 3px;font-size: 0.9em;line-height: 1.4;margin-bottom: 1em;padding: 1em;overflow-x: auto;white-space: pre-wrap;} .gfm table {width: 100%;border-collapse: collapse;} .gfm table, .gfm th, .gfm td {height: 16px;border: 1px solid black;}  :root {--primary-color: hsla(0, 0%, 15%, 1);--primary-color-h: 0;--primary-color-s: 0%;--primary-color-l: 15%;--primary-color-a: 1;--primary-color-contrast-threshold: 60%;--primary-color-darken-percentage: 15%;--primary-color-lighten-percentage: 20%;--primary-color: hsla(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l), var(--primary-color-a));--primary-color-light: hsla(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) + var(--primary-color-lighten-percentage)), var(--primary-color-a));--primary-color-dark: hsla(var(--primary-color-h), var(--primary-color-s), calc(var(--primary-color-l) - var(--primary-color-darken-percentage)), var(--primary-color-a));--primary-color-complement: hsla(calc(var(--primary-color-h) + 180), var(--primary-color-s), var(--primary-color-l), var(--primary-color-a));--primary-color-triad1: hsla(calc(var(--primary-color-h) + 120), var(--primary-color-s), var(--primary-color-l), var(--primary-color-a));--primary-color-triad2: hsla(calc(var(--primary-color-h) + 240), var(--primary-color-s), var(--primary-color-l), var(--primary-color-a));--primary-color-switch: calc((var(--primary-color-l) - var(--primary-color-contrast-threshold)) * -100);--primary-color-mix: hsla(0, 0%, var(--primary-color-switch), var(--primary-color-a));--secondary-color: hsl(0, 0%, 85%, 1);--secondary-color-h: 0;--secondary-color-s: 0%;--secondary-color-l: 85%;--secondary-color-a: 1;--secondary-color-contrast-threshold: 60%;--secondary-color-darken-percentage: 15%;--secondary-color-lighten-percentage: 20%;--secondary-color: hsla(var(--secondary-color-h), var(--secondary-color-s), var(--secondary-color-l), var(--secondary-color-a));--secondary-color-light: hsla(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) + var(--secondary-color-lighten-percentage)), var(--secondary-color-a));--secondary-color-dark: hsla(var(--secondary-color-h), var(--secondary-color-s), calc(var(--secondary-color-l) - var(--secondary-color-darken-percentage)), var(--secondary-color-a));--secondary-color-complement: hsla(calc(var(--secondary-color-h) + 180), var(--secondary-color-s), var(--secondary-color-l), var(--secondary-color-a));--secondary-color-triad1: hsla(calc(var(--secondary-color-h) + 120), var(--secondary-color-s), var(--secondary-color-l), var(--secondary-color-a));--secondary-color-triad2: hsla(calc(var(--secondary-color-h) + 240), var(--secondary-color-s), var(--secondary-color-l), var(--secondary-color-a));--secondary-color-switch: calc((var(--secondary-color-l) - var(--secondary-color-contrast-threshold)) * -100);--secondary-color-mix: hsla(0, 0%, var(--secondary-color-switch), var(--secondary-color-a));--border-color: hsl(0, 0%, 45%);--border-color-h: 0;--border-color-s: 0%;--border-color-l: 45%;--border-color-a: 1;--border-color-contrast-threshold: 60%;--border-color-darken-percentage: 15%;--border-color-lighten-percentage: 20%;--border-color: hsla(var(--border-color-h), var(--border-color-s), var(--border-color-l), var(--border-color-a));--border-color-light: hsla(var(--border-color-h), var(--border-color-s), calc(var(--border-color-l) + var(--border-color-lighten-percentage)), var(--border-color-a));--border-color-dark: hsla(var(--border-color-h), var(--border-color-s), calc(var(--border-color-l) - var(--border-color-darken-percentage)), var(--border-color-a));--border-color-complement: hsla(calc(var(--border-color-h) + 180), var(--border-color-s), var(--border-color-l), var(--border-color-a));--border-color-triad1: hsla(calc(var(--border-color-h) + 120), var(--border-color-s), var(--border-color-l), var(--border-color-a));--border-color-triad2: hsla(calc(var(--border-color-h) + 240), var(--border-color-s), var(--border-color-l), var(--border-color-a));--border-color-switch: calc((var(--border-color-l) - var(--border-color-contrast-threshold)) * -100);--border-color-mix: hsla(0, 0%, var(--border-color-switch), var(--border-color-a));--text-color: hsl(0, 0%, 100%, 1);--text-color-h: 0;--text-color-s: 0%;--text-color-l: 100%;--text-color-a: 1;--text-color-contrast-threshold: 60%;--text-color-darken-percentage: 15%;--text-color-lighten-percentage: 20%;--text-color: hsla(var(--text-color-h), var(--text-color-s), var(--text-color-l), var(--text-color-a));--text-color-light: hsla(var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) + var(--text-color-lighten-percentage))), var(--text-color-a);--text-color-dark: hsla(var(--text-color-h), var(--text-color-s), calc(var(--text-color-l) - var(--text-color-darken-percentage)), var(--text-color-a));--text-color-complement: hsla(calc(var(--text-color-h) + 180), var(--text-color-s), var(--text-color-l), var(--text-color-a));--text-color-triad1: hsla(calc(var(--text-color-h) + 120), var(--text-color-s), var(--text-color-l), var(--text-color-a));--text-color-triad2: hsla(calc(var(--text-color-h) + 240), var(--text-color-s), var(--text-color-l), var(--text-color-a));--text-color-switch: calc((var(--text-color-l) - var(--text-color-contrast-threshold)) * -100);--text-color-mix: hsla(0, 0%, var(--text-color-switch), var(--text-color-a));--focus-color: hsla(0, 0%, 55%, 0.502);--focus-color-h: 0;--focus-color-s: 0%;--focus-color-l: 55%;--focus-color-a: 0.502;--focus-color-contrast-threshold: 60%;--focus-color-darken-percentage: 15%;--focus-color-lighten-percentage: 20%;--focus-color: hsla(var(--focus-color-h), var(--focus-color-s), var(--focus-color-l), var(--focus-color-a));--focus-color-light: hsla(var(--focus-color-h), var(--focus-color-s), calc(var(--focus-color-l) + var(--focus-color-lighten-percentage)), var(--focus-color-a));--focus-color-dark: hsla(var(--focus-color-h), var(--focus-color-s), calc(var(--focus-color-l) - var(--focus-color-darken-percentage))), var(--focus-color-a);--focus-color-complement: hsla(calc(var(--focus-color-h) + 180), var(--focus-color-s), var(--focus-color-l), var(--focus-color-a));--focus-color-triad1: hsla(calc(var(--focus-color-h) + 120), var(--focus-color-s), var(--focus-color-l), var(--focus-color-a));--focus-color-triad2: hsla(calc(var(--focus-color-h) + 240), var(--focus-color-s), var(--focus-color-l), var(--focus-color-a));--focus-color-switch: calc((var(--focus-color-l) - var(--focus-color-contrast-threshold)) * -100);--focus-color-mix: hsla(0, 0%, var(--focus-color-switch), var(--focus-color-a));--active-color: hsl(220, 26%, 14%);--active-color-h: 0;--active-color-s: 26%;--active-color-l: 14%;--active-color-a: 1;--active-color-contrast-threshold: 60%;--active-color-darken-percentage: 15%;--active-color-lighten-percentage: 20%;--active-color: hsla(var(--active-color-h), var(--active-color-s), var(--active-color-l), var(--active-color-a));--active-color-light: hsla(var(--active-color-h), var(--active-color-s), calc(var(--active-color-l) + var(--active-color-lighten-percentage)), var(--active-color-a));--active-color-dark: hsla(var(--active-color-h), var(--active-color-s), calc(var(--active-color-l) - var(--active-color-darken-percentage)), var(--active-color-a));--active-color-complement: hsla(calc(var(--active-color-h) + 180), var(--active-color-s), var(--active-color-l), var(--active-color-a));--active-color-triad1: hsla(calc(var(--active-color-h) + 120), var(--active-color-s), var(--active-color-l), var(--active-color-a));--active-color-triad2: hsla(calc(var(--active-color-h) + 240), var(--active-color-s), var(--active-color-l), var(--active-color-a));--active-color-switch: calc((var(--active-color-l) - var(--active-color-contrast-threshold)) * -100);--active-color-mix: hsla(0, 0%, var(--active-color-switch), var(--active-color-a));} .markdownEditor {width: 100%;max-width: 100%;gap: 1rem;grid-template-columns: 1fr 5fr 5fr;grid-template-areas: "editorHeader editorHeader editorHeader" "editorLabel editorLabel editorLabel" "editorTools editorTextarea editorViewer" "editorActions editorActions editorActions";} .markdownEditor > .editorHeader {grid-area: editorHeader;display: grid;gap: 1rem;} .markdownEditor > .editorLabel {grid-area: editorLabel;} .markdownEditor > .editorLabel > p {padding: 0px;margin: 0px;} .markdownEditor > .editorTools {grid-area: editorTools;margin-right: -1rem;} .markdownEditor > .editorTools > button {width: 100%;border-radius: 0rem;border: 0px;} .markdownEditor > .editorTools > button:first-child {border-top-left-radius: 0.375rem;} .markdownEditor > .editorTools > button:last-child {border-bottom-left-radius: 0.375rem;} .markdownEditor > .editorTools > button:hover {outline: none;box-shadow: none;} .markdownEditor > .editorTools > button:focus {outline: none;box-shadow: none;} .markdownEditor > .editorTools > button:active {outline: none;} .markdownEditor > .editorTextarea {padding: 1rem;border-radius: 0.375rem;border-top-left-radius: 0rem !important;border-bottom-left-radius: 0rem !important;grid-area: editorTextarea;min-height: 500px;resize: vertical;} .markdownEditor > .editorTextarea:hover {outline: none;box-shadow: none;} .markdownEditor > .editorTextarea:focus {outline: none;box-shadow: none;} .markdownEditor > .editorTextarea:active {outline: none;} .markdownEditor > .editorViewer {padding: 1rem;grid-area: editorViewer;min-height: 500px;border-radius: 0.375rem;word-break: break-word;border: 1px solid #767676;} .markdownEditor > .editorActions {grid-area: editorActions;} .main-navigation {padding-left: 8px !important;padding-right: 8px !important;} .logo {width: 1.2rem;border-radius: 0px;margin-bottom: 0px;-webkit-border-radius: 0px;box-shadow:none;} .icon {height: 1.2rem;width: 1.2rem;fill: #f5f5f5;} .admin {display: grid;grid-template-columns: auto 2fr !important;grid-template-rows: auto auto !important;grid-template-areas: "navigation content" "navigation footer" !important;gap: 5px;} .admin > .content {grid-area: content !important;} .admin > .navigation {grid-area: navigation !important;color: rgba(229, 229, 229, 1);background-color: rgba(38, 38, 38, 1);min-height: 100vh;height: 100%;} .admin > .navigation > ul {margin: 0px !important;display: flex !important;justify-content: space-between !important;} .admin > .navigation > ul > li > a > svg {margin-top: 7px;} .admin > .footer {grid-area: footer;} @media (max-width: 1280px) {.admin {grid-template-columns: auto 2fr !important;grid-template-rows: auto auto !important;grid-template-areas: "navigation content" "navigation footer" !important;} .admin > .navigation > ul {display: flex !important;flex-direction: column !important;}} @media (max-width: 768px) {.admin {grid-template-columns: 1fr !important;grid-template-rows: 71px auto auto !important;grid-template-areas: "navigation" "content" "footer" !important;} .admin > .navigation {height: fit-content !important;min-height: fit-content !important;min-width: 100vw;} .admin > .navigation > ul {display: flex !important;flex-direction: row !important;}} .posts {display: grid;gap: 1rem;padding: 1rem;grid-template-columns: 1fr;grid-template-areas: "header" "navigation" "content";} .posts > .header {grid-area: header;} .posts > .header > h1 {color: var(--primary-color);padding: 0px;} .posts > .header > h1:hover {color: var(--primary-color-light);} .posts > .content {grid-area: content;} .posts > .navigation {grid-area: navigation;height: fit-content;} .posts > .navigation > .List {margin: 0px;padding: 0px;width: 200px;gap: 1rem;} .posts > .navigation > .List > .ListItem {padding: 0px;} .posts > .navigation > .List > .ListItem > .Button {width: 100%;} @media (min-width: 768px) {.posts {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr;grid-template-areas: "header header" "navigation content " "footer footer ";} .posts > .navigation {height: auto;} .posts > .navigation > ul {display: flex;flex-direction: column;}} @media (min-width: 1280px) {.posts {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr;grid-template-areas: "header header" "navigation content " "footer footer ";} .posts > .navigation {grid-area: navigation;height: auto;} .posts > .navigation > ul {flex-direction: column;}} .called-explanation {margin-bottom: 0px;} .called-no-result {color: #D29038} .called-positive-result {color: #198754} .called-negative-result {color: #DC3545} .called-neutral-result {color: #8B694D} .contacts-count {margin: 0px;} .caller-submit-button {margin-bottom: 250px;} .content > table {max-width: 100%;min-width: 100%;} .pagination {margin-top: 25px;display: flex;justify-content: center;} .pagination > .FlexItem > .Input {max-width: 100px;margin-left: 5px;margin-right: 5px;margin-top: 1px;} #list-options {margin-top: 1.5rem;display: flex;flex-direction: row;gap: 15px;} #list-options .Select {margin-top: 3px;} #list-options > .FlexItem {display: flex;flex-direction: column;gap: 15px;margin-bottom: 25px;} .list-options-search {display: flex;flex-direction: row;gap: 15px;} .caller {display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 15px;margin-left: 35px;margin-right: 35px;} .caller > .FlexItem {width: 90%;display: flex;flex-direction: column;} .caller > .FlexItem > * {width: 100%;} .caller > .FlexItem > .Button > svg {margin-right: 15px;} .calls {display: grid;gap: 1rem;padding: 1rem;grid-template-columns: 1fr!important;grid-template-areas: "header" "navigation" "content" !important;} .calls > .header {grid-area: header;} .calls > .header > h1 {color: var(--primary-color);padding: 0px;} .calls > .header > h1:hover {color: var(--primary-color-light);} .calls > .content {grid-area: content;} .calls > .navigation {grid-area: navigation;height: 100vh;} .calls > .navigation > .List {margin: 0px;padding: 0px;width: 200px;gap: 1rem;} .calls > .navigation > .List > .ListItem {padding: 0px;} .calls > .navigation > .List > .ListItem > .Button {width: 100%;} .contacts-table {min-width: calc(100vw - 20px - 67px) !important;max-width: calc(100vw - 20px - 67px) !important;overflow-x: auto;display: block;white-space: nowrap;} .contacts-table .Th > span {cursor: pointer !important;} @media (max-width: 768px) {.contacts-table {min-width: calc(100vw) !important;max-width: calc(100vw) !important;overflow-x: auto;display: block;}} @media (min-width: 768px) {.calls {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr !important;grid-template-areas: "header header" "navigation content " "footer footer " !important;} .calls > .navigation > ul {display: flex !important;flex-direction: column !important;}} @media (min-width: 1280px) {.calls {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr !important;grid-template-areas: "header header" "navigation content " "footer footer " !important;} .calls > .navigation {grid-area: navigation !important;} .calls > .navigation > ul {flex-direction: column !important;}} .call-reports {display: flex;flex-direction: column;width: 100%;} .call-reports > .FlexItem {display: flex;width: 100%;} .reports-menu {display: flex;width: 100%;flex-direction: row;gap: 15px;margin-bottom: 15px;} .reports-menu > .FlexItem {width: auto !important;} .reports-sub-menu {display: flex;width: 100%;flex-direction: row;gap: 15px;} .reports-sub-menu-button {width: 10rem;} .files {display: grid;gap: 1rem;padding: 1rem;grid-template-columns: 1fr;grid-template-areas: "header" "navigation" "content";} .files > .header {grid-area: header;} .files > .header > h1 {color: var(--primary-color);padding: 0px;} .files > .header > h1:hover {color: var(--primary-color-light);} .files > .content {grid-area: content;} .files > .navigation {grid-area: navigation;height: fit-content;} .files > .navigation > .List {margin: 0px;padding: 0px;width: 200px;gap: 1rem;} .files > .navigation > .List > .ListItem {padding: 0px;} .files > .navigation > .List > .ListItem > .Button {width: 100%;} .flex-table {gap: 1rem;} .editor-actions {grid-template-columns: auto auto;gap: 1rem;} .order-buttons {gap: 1rem;grid-template-columns: repeat(3, 1fr);} @media (min-width: 768px) {.files {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr;grid-template-areas: "header header" "navigation content " "footer footer ";} .files > .navigation {height: auto;} .files > .navigation > ul {display: flex;flex-direction: column;}} @media (min-width: 1280px) {.files {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr;grid-template-areas: "header header" "navigation content " "footer footer ";} .files > .navigation {grid-area: navigation;height: auto;} .files > .navigation > ul {flex-direction: column;}} .pages {display: grid;gap: 1rem;padding: 1rem;grid-template-columns: 1fr;grid-template-areas: "header" "navigation" "content";} .pages > .header {grid-area: header;} .pages > .header > h1 {color: var(--primary-color);padding: 0px;} .pages > .header > h1:hover {color: var(--primary-color-light);} .pages > .content {grid-area: content;} .pages > .navigation {grid-area: navigation;height: fit-content;} .pages > .navigation > .List {margin: 0px;padding: 0px;width: 200px;gap: 1rem;} .pages > .navigation > .List > .ListItem {padding: 0px;} .pages > .navigation > .List > .ListItem > .Button {width: 100%;} .flex-table {gap: 1rem;} .editor-actions {grid-template-columns: auto auto;gap: 1rem;} .order-buttons {gap: 1rem;grid-template-columns: repeat(3, 1fr);} @media (min-width: 768px) {.pages {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr;grid-template-areas: "header header" "navigation content " "footer footer ";} .pages > .navigation {height: auto;} .pages > .navigation > ul {display: flex;flex-direction: column;}} @media (min-width: 1280px) {.pages {padding: 0rem;margin-right: 1rem;grid-template-columns: auto 2fr;grid-template-areas: "header header" "navigation content " "footer footer ";} .pages > .navigation {grid-area: navigation;height: auto;} .pages > .navigation > ul {flex-direction: column;}} html, body {margin: 0px;padding: 0px;}