/**start**/ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700'); /* Default */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+Symbols:wght@400;700&family=Noto+Sans+Symbols+2:wght@400;700'); /* Extensions */ :root { --font-site: Manrope,'Noto Sans','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans SC', Helvetica,Arial,sans-serif; --font-cms: Manrope,'Noto Sans','Noto Sans Arabic','Noto Sans Hebrew','Noto Sans SC', Helvetica,Arial,sans-serif; --font-body: var(--font-site); --font-mono: 'Roboto Mono', Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace,sans-serif; --font-serif: Georgia,serif; --font-symbol: 'Noto Sans Symbols','Noto Sans Symbols 2',sans-serif; --text: #444444; --text-light: #c0c0c0; --back: #f5f5f5; --back-detail: #e5e5e5; --back-nested: #e1e1e1; --back-super: #444444; --highlight: #009cff; --highlight-soft: #008dcf; --input: #c0c0c0; --input-hover: #bdbdbd; --input-focus: #86bad9; --input-edit-background: #fffcf9; --input-background-selected: #e1e1e1; --input-placeholder: #aaaaaa; --input-text: #000000; --input-text-disabled: #6d6d6d; --input-element-height: 2.2em; --input-element-padding: 0.4em; --button: #000000; --button-text: #ffffff; --button-border: #000000; --button-hover: var(--button); --button-hover-border: #2e2e2e; --button-focus: var(--button); --button-focus-border: #0096ff; --button-disabled: #a4a4a4; --button-disabled-border: #a4a4a4; --button-selected: #ffffff; --button-selected-border: var(--back-detail); --button-selected-text: #000000; } body { --view-height: 100vh; } /* RESET */ :host(default) { /* START include in shadow DOM */ } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: 0; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, dl, ul { list-style: none; } pre { } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* FireFox button style */ *[type=button]::-moz-focus-inner, *[type=submit]::-moz-focus-inner, *[type=reset]::-moz-focus-inner { padding: 0; border: 0 none; } /* FireFox image placeholder */ img:-moz-loading { visibility: hidden; } /* Webkit style */ *[type=button], *[type=submit], input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], textarea, select { -webkit-appearance: none; appearance: none; border-radius: 0; } *[type=button]:focus, *[type=submit]:focus, input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus, textarea:focus, select:focus { -webkit-tap-highlight-color: transparent; outline: none; } /* Do not force fieldset size in relation to its contents */ fieldset { min-width: 0px; } abbr { border-bottom: 1px dotted black; } sup { font-size: 0.75em; vertical-align: super; line-height: 0; } sub { font-size: 0.75em; vertical-align: sub; line-height: 0; } em { font-style: italic; } i { font-style: italic; } strong { font-weight: bold; } b { font-weight: bold; } ins { text-decoration: underline; } del { text-decoration: line-through; } small { font-size: 0.8em; } big { font-size: 1.2em; } :host(default) { /* END include in shadow DOM */ } /* INTERFACE */ textarea, .body-content, select, input[type=text], input[type=password], input[type=search], input[type=date], input[type=number] { font-family: var(--font-mono); font-size: 1.2rem; height: var(--input-element-height); padding: 0px var(--input-element-padding); margin: 0px; border: 1px solid var(--input); background-color: #ffffff; color: var(--input-text); vertical-align: middle; box-sizing: border-box; } option, optgroup { font-family: inherit; font-size: inherit; font-style: normal; background-color: inherit; color: inherit; text-align: left; } optgroup { font-weight: bold; } input[type=text], input[type=password], input[type=search], input[type=date] { width: 300px; } input[type=number] { width: 80px; } textarea, .body-content { line-height: 1.4em; width: 300px; padding: 0.6em 0.6em; height: 6em; resize: both; } .body-content { overflow: auto; width: 400px; height: 7em; line-height: 1.5; font-size: 1.4rem; } select { overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; } select[multiple] { min-height: 6em; height: auto; } select[multiple] option:checked { background-color: var(--input-background-selected); } textarea, .body-content, select, input[type=text], input[type=password], input[type=search], input[type=date], input[type=number], .tags > ul > li { border-radius: 2px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08) inset; transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in-out, background-color 0.2s ease-in-out; } textarea:hover, .body-content:hover, select:hover, input[type=text]:hover, input[type=password]:hover, input[type=search]:hover, input[type=date]:hover, input[type=number]:hover, .tags > ul > li:hover { border: 1px solid var(--input-hover); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2) inset; } textarea:focus, .body-content:focus-within, select:focus, input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=date]:focus, input[type=number]:focus { border: 1px solid var(--input-focus); box-shadow: 0 0 3px 0 rgba(149, 200, 232, 0.6) inset; } textarea:disabled, .body-content:disabled, select:disabled, input[type=text]:disabled, input[type=password]:disabled, input[type=search]:disabled, input[type=date]:disabled, input[type=number]:disabled { color: var(--input-text-disabled); } input[type=radio], input[type=checkbox] { border: 0px; height: auto; vertical-align: middle; padding: 0px; margin: 0px; } *[type=button], *[type=submit] { font-family: inherit; background-color: var(--button); border: 1px solid var(--button-border); border-radius: 2px; color: var(--button-text); font-size: 11px; font-weight: bold; height: 2.5em; padding: 0px 1.1em 0px 1.1em; margin: 8px 0px; vertical-align: middle; cursor: pointer; box-sizing: border-box; } *[type=button]:hover, *[type=submit]:hover { background-color: var(--button-hover); border-color: var(--button-hover-border); } *[type=button]:active, *[type=submit]:active { background-color: var(--button-focus); border-color: var(--button-focus-border); } *[type=button]:disabled, *[type=submit]:disabled { background-color: var(--button-disabled); border-color: var(--button-disabled-border); } *[type=button].selected, *[type=submit].selected { background-color: var(--button-selected); color: var(--button-selected-text); border-color: var(--button-selected-border); } *[type=submit].invalid { width: 0px !important; height: 0px !important; border: 0px !important; margin: 0px !important; padding: 0px !important; } select ~ *[type=button]:not(.data), input[type]:not([type=hidden]):not([type=button]):not([type=submit]) ~ *[type=button]:not(.data), label ~ *[type=button]:not(.data), select ~ *[type=submit], input[type]:not([type=hidden]):not([type=button]):not([type=submit]) ~ *[type=submit], label ~ *[type=submit] { display: inline; height: 2.4em; margin-top: 0px; margin-bottom: 0px; padding: 0px 0.7em 0px 0.7em; } *[type=button].data { margin: 0px; border: 0px; } *[type=button].data, *[type=button].data:hover, *[type=button].data:active { text-transform: lowercase; display: inline-block; vertical-align: middle; font-size: 10px; font-weight: bold; color: #ffffff; height: 1.7em !important; padding: 0px 6px; } *[type=button].data.add, *[type=button].data.add:hover, *[type=button].data.add:active { background-color: #3d9400; } *[type=button].data.del, *[type=button].data.del:hover, *[type=button].data.del:active { background-color: #fd5c4d; } *[type=button].data.edit, *[type=button].data.edit:hover, *[type=button].data.edit:active { background-color: #4c8efa; } *[type=button].data.neutral, *[type=button].data.neutral:hover, *[type=button].data.neutral:active { background-color: #7c7c7c; } *[type=button].data.view, *[type=button].data.view:hover, *[type=button].data.view:active { display: inline-block; width: 17px; height: 17px !important; background: transparent url('/CMS/css/images/icons/search.svg') no-repeat; background-size: 100% 100%; vertical-align: middle; line-height: 1 !important; padding: 0px; cursor:pointer; } input[type=range] { width: 150px; vertical-align: middle; } input[type=range] + input[type=number] { width: 50px; } label { display: inline-block; vertical-align: middle; } .input { display: inline; vertical-align: middle; } input[type] + input[type], *[type=button] + input[type], select + input[type], textarea + input[type], .input + input[type], input[type] + *[type=button], *[type=button] + *[type=button], select + *[type=button], textarea + *[type=button], .input + *[type=button], input[type]+ select, *[type=button] + select, select + select, textarea + select, .input + select, input[type] + textarea, *[type=button] + textarea, select + textarea, textarea + textarea, .input + textarea, input[type] + .input, *[type=button] + .input, select + .input, textarea + .input, .input + .input { margin-left: 4px; } input[type] + label, *[type=button] + label, select + label, textarea + label, .input + label, label + label, label + input[type], label + *[type=button], label + select, label + textarea, label + .input { margin-left: 5px; } .split + input[type], .split + *[type=button], .split + select, .split + textarea, .split + .input, input[type] + .split, *[type=button] + .split, select + .split, textarea + .split, .input + .split, .split + .split, .split + label, label + .split { margin-left: 6px; } * + *[type=button].data, *[class] + *[type=button].data, input[type] + *[type=button].data, *[type=button] + *[type=button].data, select + *[type=button].data, textarea + *[type=button].data, .input + *[type=button].data, .split + *[type=button].data, label + *[type=button].data, *[type=button].data + *[type=button].data, *[type=button].data + input[type], *[type=button].data + *[type=button], *[type=button].data + select, *[type=button].data + textarea, *[type=button].data + .input, *[type=button].data + .split, *[type=button].data + label { margin-left: 6px; } input[type=hidden], input[type=hidden]:first-child + input[type], input[type=hidden]:first-child + *[type=button], input[type=hidden]:first-child + select, input[type=hidden]:first-child + textarea, input[type=hidden]:first-child + label, input[type=hidden]:first-child + .input, input[type=hidden]:first-child + .split, input[type=hidden]:first-child + *[type=button].data, input[type=hidden]:first-child + input[type=hidden] + input[type], input[type=hidden]:first-child + input[type=hidden] + *[type=button], input[type=hidden]:first-child + input[type=hidden] + select, input[type=hidden]:first-child + input[type=hidden] + textarea, input[type=hidden]:first-child + input[type=hidden] + label, input[type=hidden]:first-child + input[type=hidden] + .input, input[type=hidden]:first-child + input[type=hidden] + .split, input[type=hidden]:first-child + input[type=hidden] + *[type=button].data, input[type].hide, *[type=button].hide, select.hide, textarea.hide, .input.hide, .split.hide, .hide:first-child + input[type], .hide:first-child + *[type=button], .hide:first-child + select, .hide:first-child + textarea, .hide:first-child + label, .hide:first-child + .input, .hide:first-child + .split, .hide:first-child + *[type=button].data, *[type=submit].invalid + input { margin-left: 0px; } *[type=submit], *[type=button] { margin-left: 0px; } input[type=radio] + span, input[type=checkbox] + span, input[type=radio] + input[type=hidden] + span, input[type=checkbox] + input[type=hidden] + span, label > input[type] + span, label > .input + span, label > select + span { margin-left: 4px; vertical-align: middle; } span.input-split > span { padding-left: 4px; display: inline-block; box-sizing: border-box; } span.input-split > span:first-child { padding-left: 0px; } span.split { display: inline; vertical-align: middle; border-left: 1px solid #000000; } menu { margin: 8px 0px; } menu *[type=button], menu *[type=submit] { display: inline-block; margin: 0px; } menu > *[type=button] + *[type=button], /* Single line */ menu > *[type=submit] + *[type=submit] { margin-left: 4px; } menu > *[type=submit][name] + *[type=submit]:not([name]), menu > *[type=submit][name] + *[type=submit].save, menu > *[type=submit]:not([name]):not(.hide) + *[type=submit][name], menu > *[type=submit].save:not(.hide) + *[type=submit][name] { margin-left: 8px; } menu > div { margin: -2px !important; } /* Multi line */ menu > div > *[type=button], menu > div > *[type=submit], menu > div > *[type=button] + *[type=button], menu > div > *[type=submit] + *[type=submit], menu > div > *[type=button].hide + *[type=button], menu > div > *[type=submit].hide + *[type=submit] { margin: 2px; } menu.select *[type=button], menu.select *[type=submit], .tabs > ul li { clip-path: url('data:image/svg+xml;utf8,#clip'); clip-path: polygon(5px 0px, 100% 0%, 100% 100%, 0px 100%, 0px 5px); -webkit-clip-path: polygon(5px 0px, 100% 0%, 100% 100%, 0px 100%, 0px 5px); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; } menu.select *[type=button].selected, menu.select *[type=submit].selected, .tabs > ul li.selected { background-image: url('data:image/svg+xml;utf8,'); } .toolbox { z-index: 99999; position: absolute; pointer-events: none; } .toolbox > * { pointer-events: initial; } fieldset > ul > li > label:first-child + * > input[type], fieldset > ul > li > label:first-child + * > *[type=button], fieldset > ul > li > label:first-child + * > textarea, fieldset > ul > li > label:first-child + * > select, fieldset > ul > li > label:first-child + * > .input { display: inline-block; margin-top: 0px; margin-bottom: 0px; vertical-align: middle; } fieldset > ul > li > label:first-child + * > .options { margin: 0px; } fieldset > ul > li > label:first-child + section.info { margin: 0px; } ul.sorter > li > div > input[type], ul.sorter > li > div > *[type=button], ul.sorter > li > div > textarea, ul.sorter > li > div > select, ul.sorter > li > div > .input, ul.sorter > li > ul > li > input[type], ul.sorter > li > ul > li > *[type=button], ul.sorter > li > ul > li > textarea, ul.sorter > li > ul > li > select, ul.sorter > li > ul > li > .input, ul.sorter > li > ul > li > div > input[type], ul.sorter > li > ul > li > div > *[type=button], ul.sorter > li > ul > li > div > textarea, ul.sorter > li > ul > li > div > select, ul.sorter > li > ul > li > div > .input { display: inline-block; margin-top: 0px; margin-bottom: 0px; vertical-align: middle; } .input-error, .input-error[type=hidden] + input, .input-error[type=hidden] + div + input { border: 1px solid #e2d0d0 !important; background-color: #fcf0f0 !important; color: #280b0b !important; } div.labeler, div.labeler .data[type=button] { position: relative; } div.labeler .data[type=button] { margin: 0px; } div.labeler .data[type=button] + .data[type=button] { margin-left: 2px; } input.multi + label { margin-left: 8px; } *[type=button].pulse, *[type=submit].pulse, a.pulse, .a.pulse, .pulse { background-color: var(--highlight); } *[type=button].pulse-from, *[type=submit].pulse-from, a.pulse-from, .a.pulse-from, .pulse-from { } *[type=button].pulse, *[type=submit].pulse { border-color: var(--highlight); } *[type=button].pulse-from, *[type=submit].pulse-from { } div.filebrowse > .select > label > input[name=catch], input[type=search], input.autocomplete { background-image: url('/CMS/css/images/icons/search.svg'); background-repeat: no-repeat; background-position: left var(--input-element-padding) center; background-size: 15px 15px; padding-left: calc(15px + (var(--input-element-padding) * 2)); } input.waiting { background-image: url('/CMS/css/images/loading.gif'); } input[type=search].select { background-image: url('/CMS/css/images/icons/link.svg'); cursor: pointer; } input[type=date], input.date, input.datepicker { background-image: url('/CMS/css/images/icons/date.svg'); background-repeat: no-repeat; background-position: left var(--input-element-padding) center; background-size: 15px 15px; padding-left: calc(15px + (var(--input-element-padding) * 2)); } input[type=date], input.date, input.datepicker { width: 9.4em; } input.date-time { width: 4em; } select:not([multiple]) { background-image: url('/CMS/css/images/icons/down.svg'); background-repeat: no-repeat; background-position: right var(--input-element-padding) center; background-size: 9px 9px; padding-right: calc(9px + (var(--input-element-padding) * 2)); } img.enlarge { cursor: pointer; } .tags { margin: 8px 0px; white-space: normal; } .tags:not(.list) > ul:not(:empty) { margin: -3px !important; } .tags > ul:empty { margin: 0px; } .tags > ul > li { display: inline-block; margin: 3px; white-space: nowrap; background-color: #ffffff; font-size: 1.2rem; height: var(--input-element-height); border: 1px solid var(--input); box-sizing: border-box; } .tags.list > ul > li { display: block; width: max-content; margin: 0px; margin-top: 4px; } .tags.list > ul > li:first-child { margin-top: 0px; } .tags > ul > li > span { display: inline-block; vertical-align: middle; line-height: 1em; height: 100%; padding: 0.5em /* tweak to match font */ var(--input-element-padding); overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); box-sizing: border-box; } .tags > ul > li > span:first-child > span { vertical-align: baseline; } .tags > ul > li > span:first-child span.icon { height: 9px; } .tags > ul > li > span + span:last-child { padding-right: calc(var(--input-element-padding) * 1.5); } .tags > ul > li > span.handler { padding-top: 0px; padding-bottom: 0px; cursor: pointer; user-select: none; } .tags > ul > li > span.handler .icon svg { width: 10px; } .tags > ul > li > span.handler:hover .icon { color: var(--input-focus); } .tags > ul > li > span.handler > span:first-child + span { display: none; } .tags.plus > ul > li > span.handler > span:first-child { display: none; } .tags.plus > ul > li > span.handler > span:first-child + span { display: inline-block; } .tags > ul > li.min > span.handler > span:first-child { display: inline-block; } .tags > ul > li.min > span.handler > span:first-child + span { display: none; } .tags > ul > li.plus > span.handler > span:first-child { display: none; } .tags > ul > li.plus > span.handler > span:first-child + span { display: inline-block; } .tags.content > span.icon { margin-right: 5px; color: #666666; } .tags.content > span.icon svg { height: 1.3em; } .tags.content a { color: #666666; text-decoration: none; font-size: 1.1rem; } .tags.content a + a { margin-left: 4px; } .tags.content a:hover { color: #000000; text-decoration: underline; } div.autocomplete.tags { margin: 0px; font-family: var(--font-mono); } div.autocomplete.tags + input[type=search] { margin-left: 0px; } div.autocomplete.tags > ul > li { font-size: 1.1rem; } div.autocomplete.tags:not(.list) > ul:not(:empty) { margin: -2px !important; margin-bottom: 2px !important; } div.autocomplete.tags:not(.list) > ul > li { margin: 2px; } div.autocomplete.tags.list > ul:not(:empty) { margin-bottom: 4px; } div.autocomplete.tags > ul > li > span { } div.autocomplete.tags > ul > li > span:first-child { max-width: 500px; } div.autocomplete.tags.order > ul > li > span:first-child { cursor: ew-resize; } input.autocomplete::-webkit-search-decoration, input.autocomplete::-webkit-search-cancel-button, input.autocomplete::-webkit-search-results-button, input.autocomplete::-webkit-search-results-decoration { display: none; } input.autocomplete::-ms-clear { display: none; } ul.dropdown { position: absolute; border: 1px solid #c0c0c0; background-color: #ffffff; padding: 2px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3); z-index: 999; box-sizing: border-box; } ul.dropdown > li { } ul.dropdown > li > a { display: block; color: #000000; line-height: 1.5; padding: 0.3em var(--input-element-padding); text-decoration: none; white-space: nowrap; } ul.dropdown > li > a.active { background-color: var(--highlight); color: #ffffff; } div.filebrowse > .select { position: relative; overflow: hidden; margin: 0px; } div.filebrowse > .select > input[type=file] { display: none; } div.filebrowse > .select > label { margin-left: 0px; } div.filebrowse > .select > label > span { display: block; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; } div.filebrowse > progress { width: 100%; margin-top: 4px; box-sizing: border-box; } div.filebrowse > ul > li { display: block; margin-top: 4px; line-height: 1; font-size: 1.1rem; } .placeholder { color: var(--input-placeholder); } .tabs { margin: 12px 0px; } .tabs > ul { position: relative; line-height: 1; } .tabs > ul.big { margin: -2px -2px 2px -2px !important; } /* Multi line */ .tabs > ul ul:not(:empty) { margin: 2px 4px 4px 4px; } .tabs > ul li { display: inline-block; text-align: center; vertical-align: bottom; margin-left: 4px; background-color: var(--button); border: 1px solid var(--button-border); border-radius: 2px 2px 0px 0px; } .tabs > ul li:first-child { margin-left: 0px; } .tabs > ul li.selected { background-color: var(--button-selected); border-color: var(--button-selected-border); } .tabs > ul li.no-tab { background-color: transparent; border: 0px; background-image: none; clip-path: none; } .tabs > ul li > a { display: inline-block; color: var(--button-text); text-decoration: none; font-weight: bold; font-size: 1.1rem; padding: 5px 4px; vertical-align: middle; } .tabs > ul li > a > span { display: block; } .tabs > ul li > a > span > span { display: inline-block; } .tabs > ul li > a span[class*=icon-] { font-size: 14px; line-height: 11px; } .tabs > ul li > a > span + span { margin-top: 2px; } .tabs > ul li.selected > a { color: var(--button-selected-text); text-decoration: none; } .tabs > ul li > span { display: none; margin: 4px; vertical-align: middle; } .tabs > ul li > a + span, .tabs > ul li.no-tab > span:first-child { margin-left: 0px; } .tabs > ul li.no-tab > span:last-child { margin-right: 0px; } .tabs > ul li.no-tab > span { margin-top: 0px; } .tabs > ul li > span > span { vertical-align: middle; } .tabs > ul li.active > span, .tabs > ul li > span:first-child { display: inline-block; } .tabs > ul > li { vertical-align: bottom; padding: 2px 6px 3px 6px; border-bottom-width: 0px; margin-bottom: -1px !important; } .tabs > ul.big > li { border-bottom-width: 1px; margin: 2px !important; } .tabs > ul > li > ul:not(:empty) { margin: 0px; } .tabs > ul li.sorting { top: auto; } .tabs > ul > li.sorting { top: auto; bottom: 0px; } .tabs > ul.sorting li > a { cursor: ew-resize; } .tabs > div { padding: 12px; border: 1px solid var(--back-detail); background-color: #ffffff; } .tabs > div > *:first-child, .tabs > div > *:first-child > *:first-child, .tabs > div > *:not(menu):first-child > *:first-child > *:first-child { margin-top: 0px; } .tabs > div > *:last-child, .tabs > div > *:last-child > *:last-child, .tabs > div > *:not(menu):last-child > *:last-child > *:last-child { margin-bottom: 0px; } .tabs > div > *:first-child:empty + *, .tabs > div > *:first-child:empty + * > *:first-child { margin-top: 0px; } .tabs > div > *:has(+ *:last-child:empty), .tabs > div > *:has(+ *:last-child:empty) > *:last-child { margin-bottom: 0px; } .overlay .popup {} .overlay .popup.message > div, .overlay .popup.confirm > div { display: inline-block; padding-left: 20px; position: relative; vertical-align: top; } .overlay .popup.message > .icon svg, .overlay .popup.confirm > .icon svg { height: 25px; vertical-align: top; } .overlay .popup.message > div > *:first-child, .overlay .popup.confirm > div > *:first-child { margin-top : 0px; } .overlay .popup.message > div > *:last-child, .overlay .popup.confirm > div > *:last-child { margin-bottom: 0px; } .overlay .popup > menu { text-align: right; margin: 0px; margin-top: 10px; } .hide-edit:not(.hide) + * { display: none !important; } .hide-edit.hide + * { } .hide-edit.hide + span, .hide-edit.hide + div { vertical-align: middle; cursor: pointer; } input[id^="hide-show"] { display: none; } input[id^="hide-show"]:checked ~ *:not(label) + label { display: none; } input[id^="hide-show"]:not(:checked) ~ *.hide-show, input[id^="hide-show"]:not(:checked) ~ *:not(label) + label + label { display: none; } div.handle { position: absolute; display: block; right: 0px; top: 0px; cursor: move; z-index: 1; color: #aaaaaa; } div.handle > .icon svg { height: 10px; vertical-align: top; } .hide { display: none !important; } .album > table { vertical-align: middle; border-collapse: separate; border-spacing: 10px; width: 100%; table-layout: fixed; } .album > table td { padding: 0px; text-align: center; line-height: 1; } .album > table td img { display: inline-block; max-width: 100%; } .album > img, .album > figure, .album > table td > img, .album > table td > figure { cursor: pointer; } .album-viewer { position: relative; } .album-viewer[data-items="1"] > nav { display: none; } .album-viewer > nav > button { display: none; } .album-viewer:hover > nav > button { display: block; } .album-viewer > div { margin-top: 10px; } nav.album-items > button { position: absolute; width: 30px; height: 3.5rem; top: 15%; color: #000000; background-color: #ffffff; cursor: pointer; text-align: center; margin: 0px; padding: 0px; border: 0px; border-radius: 0px; } nav.album-items > button > .icon svg { height: 45%; } nav.album-items > button.prev { left: 0px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } nav.album-items > button.next { right: 0px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; } nav.album-items > button:hover { color: #000000; background-color: #ffffff; } iframe.preview { width: 900px; height: 100%; } /* BODY CONTENT */ .body { color: var(--text); line-height: 1.5; font-size: 1.4rem; } .body a, .body a:link, .body a:visited, .body a:active, .body a:hover, .body .a { text-decoration: underline; color: var(--text); } .body a:hover, .body .a:hover { color: var(--highlight); } .body div > img, .body div > object, .body div > video, .body div > iframe { display: block; } .body img, .body object, .body video { max-width: 100%; } .body figure, .body blockquote, .body iframe, .body object, .body video, .body table { margin: 12px 0px; } .body p img, .body p object, .body p video, .body figure > img, .body figure > object, .body figure > video { display: inline-block; } .body figure > img + img, .body figure > object + object, .body figure > video + video { margin-left: 10px; } .body figure > iframe, .body figure > object, .body figure > video, .body figure > table { margin: 0px; } .body figure.embed { width: fit-content; } .body figure.embed *:first-child { margin-top: 0px !important; } .body figure.embed *:last-child, .body figure.embed *:has(+ script:last-child) { margin-bottom: 0px !important; } .body figure .album { margin: 10px; margin-left: -10px !important; margin-right: -10px !important; } .body figure .album:first-child { margin-top: 0px; } .body figure .album:last-child { margin-bottom: 0px; } .body figure .album > table { margin: -10px 0px !important; } .body .album > figure { display: inline-block; } .body .album > figure figurecaption { display: none; } .body ul { margin: 6px 0px; list-style-type: disc; margin-left: 20px; } .body ol { margin: 6px 0px; list-style-type: decimal; margin-left: 20px; } .body pre, .body code { background-color: var(--back); font-family: var(--font-mono); } .body pre { padding: 6px 12px; white-space: pre-wrap; } .body code { padding: 1px 3px; } .body pre > code { display: block; white-space: pre; overflow-x: auto; padding: 0px; } .body aside.left { float: left; margin: 2px 15px 15px 0px; } .body aside.right { float: right; margin: 2px 0px 15px 15px; } .body .nowrap { white-space: nowrap; } .body > *:first-child { margin-top: 0px; } .body > *:last-child { margin-bottom: 0px; } p.info.body, section.info.body { font-size: inherit; } /* TABLE */ td, th { padding: 3px; vertical-align: middle; } th { font-weight: bold; font-size: 14px; text-align: left; } th.split { padding: 0px; } th.split hr { margin: 4px 0px; } td.max, th.max { } td.limit, th.limit { } table.display td, table.list td, table.display th, table.list th { white-space: nowrap; box-sizing: border-box; overflow: hidden; } table.display td, table.list td { text-overflow: ellipsis; } table.display th > div, table.display th > span, table.list th > div, table.list th > span { vertical-align: top; } table.display th > span:not(.icon), table.list th > span:not(.icon) { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; } table.display th > span:not(.icon) > span, table.list th > span:not(.icon) > span { } table.display td > p, table.list td > p { overflow: hidden; text-overflow: ellipsis; } table.display td > p:first-child, table.list td > p:first-child { margin-top: 0px; } table.display td > p:last-child, table.list td > p:last-child { margin-bottom: 0px; } table.display td.menu, table.list td.menu, table.display th.menu, table.list th.menu { text-align: right; } table.display tbody tr, table.list tbody tr { border-bottom: 1px solid #f1f1f1; } table.display tbody tr:first-child, table.list tbody tr:first-child { border-top: 1px solid #f1f1f1; } table.display tbody tr:nth-child(odd), table.list tbody tr:nth-child(odd) { } table.display tbody tr:hover, table.list tbody tr:hover { background: #f5f5f5; } table.display tbody tr > td.empty, table.list tbody tr > td.empty { text-align: center; } table.display.color tbody tr, table.list.color tbody tr { border-bottom: 2px solid #ffffff; } table.display.color tbody tr:first-child, table.list.color tbody tr:first-child { border-top: 0px; } table.display.color tbody tr:last-child, table.list.color tbody tr:last-child { border-bottom: 0px; } table.display.color tbody tr > td.empty, table.list.color tbody tr > td.empty { border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; } table tbody tr[data-method]:hover { cursor: pointer; } table.list td span.icon, table.display td span.icon { color: #aaaaaa; } table.list td span.icon:not([data-category]) svg, table.display td span.icon:not([data-category]) svg { max-height: 14px; } table.display th { padding: 2px 18px 8px 10px; cursor: pointer; position: relative; } table.display th.disable-sort { padding-right: 10px; } table.display th > span.icon { position: relative; left: 3px; } table.display th > span.icon svg { width: 10px; height: auto; } table.display th > span.icon svg:first-child { vertical-align: top; opacity: 0.2; } table.display th > span.icon svg:first-child ~ svg { vertical-align: middle; opacity: 1; } table.display th[data-sort*="asc"] > span.icon svg:first-child, table.display th[data-sort*="desc"] > span.icon svg:first-child { display: none; } table.display th:not([data-sort*="asc"]) > span.icon svg:first-child + svg { display: none; } table.display th:not([data-sort*="desc"]) > span.icon svg:first-child + svg + svg { display: none; } table.display th.disable-sort > span.icon { display: none; } table.display td { padding: 6px 10px; } table.list th { padding: 4px 50px 8px 4px; } table.list td { padding: 4px 50px 4px 4px; } table.list th:last-child, table.list td:last-child { padding-right: 3px; } .datatable { margin: 12px 0px; } .datatable > .options { margin-top: 0px; display: flex; flex-flow: row nowrap; align-items: center; } .datatable > .options > div { white-space: nowrap; } .datatable > .options > div:first-child { flex: 1 1 auto; } .datatable > .options > div:first-child input[type=search] { max-width: 250px; } .datatable > .options > div + div { flex: 0 1 auto; text-align: right; padding-left: 20px; } .datatable > .options > div > .count { display: inline-block; margin-left: 10px; vertical-align: middle; } .datatable > .options > div > menu.paginate { display: inline-block; margin: 0px; line-height: 1; } .datatable > .options > div > menu.paginate > *[type=button] { height: 20px; padding: 0px; display: inline-block; } .datatable > .options > div > menu.paginate > *[type=button] { padding-left: 5px; padding-right: 5px; } .datatable > .options > div > menu.paginate > *[type=button]:first-child, .datatable > .options > div > menu.paginate > *[type=button]:last-child { padding-left: 6px; padding-right: 6px; } .datatable > .options > div > menu.paginate > *[type=button] > span.icon svg { height: 10px; } .datatable > .options > div > menu.paginate > span { display: inline-block; margin: 0px 2px; } .datatable > .options > div > menu.paginate > span::before { display: inline-block; content: "…"; } .datatable > table { margin: 0px auto; } /* OTHER */ .tooltip { position: absolute; z-index: 9999999; border: 1px solid #7f7f7f; background: #ffffff; padding: 5px 8px; border-radius: 2px; font-size: 0.95em; overflow: hidden; box-sizing: border-box; } .tooltip h1 { font-size: 1em; margin: 2px 0px; } .tooltip ul, .tooltip dl { margin: -2px 0; display: table; border-collapse: separate; border-spacing: 0px 2px; } .tooltip ul > li, .tooltip dl > div { display: table-row; } .tooltip ul > li > label:first-child, .tooltip dl > div > dt { display: table-cell; vertical-align: top; padding-right: 8px; text-align: right; white-space: nowrap; } .tooltip ul > li > label:first-child + *, .tooltip dl > div > dt + dd { display: table-cell; } .tooltip ul > li > label:first-child + *.limit, .tooltip dl > div > dt + dd.limit { overflow: hidden; text-overflow: ellipsis; max-width: 300px; } .tooltip ul > li > label:first-child + ul { display: table; } .tooltip ul > li > label:first-child:empty, .tooltip dl > div > dt:empty { padding: 0px; width: 0px; } .tooltip ul > hr { margin: 1px 0px; border: 0px; } .tooltip > *:first-child { margin-top: 0px; } .tooltip > *:last-child { margin-bottom: 0px; } .record { margin: 8px 0px; } .record > dl { margin: -6px 0 !important; display: table; border-collapse: separate; border-spacing: 0px 6px; } .record > dl > div { display: table-row; } .record > dl > div > * { display: table-cell; vertical-align: top; } .record > dl > div > dt { white-space: nowrap; padding-right: 15px; } .record > dl > div > dd > .tabs { margin: 0px; } .record > dl > div > dd img { max-width: 100%; } .record > dl > div > dd > p, .record > dl > div > dd > pre { margin: 0px; padding: 8px; background-color: var(--back); box-sizing: border-box; } .options { padding: 14px; margin: 12px 0px; background-color: var(--back); } .options > *:first-child { margin-top: 0px; } .options > *:last-child { margin-bottom: 0px; } .options.nested { margin: 0px; padding: 12px; border: 1px solid var(--back-detail); background-color: #ffffff; } p.info, section.info { position: relative; padding: 14px; margin: 10px auto; background-color: #000000; color: #ffffff; } p.info > *:first-child, section.info > *:first-child { margin-top: 0px; } p.info > *:last-child, section.info > *:last-child { margin-bottom: 0px; } .options p.info, .options section.info { padding: 10px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .attention { background-color: #fffbd8 !important; color: #000000 !important; } .alert { background-color: #ffd9d9 !important; color: #000000 !important; } .tip { background-color: #eeeeee !important; color: #000000 !important; } .options .tip { background-color: #ffffff !important; } table .info > span { vertical-align: middle; } table .info > span.icon { cursor: pointer; } table .info > span + span { margin-left: 4px; } small.identifier { margin-left: 0.6em; font-size: 1rem; font-family: var(--font-mono) } small.identifier::before { content: "("; margin-right: 0.1em; } small.identifier::after { content: ")"; margin-left: 0.1em; } .fieldsets { margin: 8px 0px; } .fieldsets > div { margin: -6px !important; } .fieldsets > div > fieldset { display: inline-block; margin: 6px !important; } .fieldsets > div > fieldset.full { max-width: calc(100% - 12px); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } @-moz-document url-prefix() { .fieldsets > div > fieldset.full { display: table-cell; } } .fieldsets > div > fieldset.full > div, .fieldsets > div > fieldset.full > ul { max-width: 100%; overflow-x: auto; } .overlay { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 100; padding: 60px; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .overlay > div:first-child { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.2); } body > .overlay > div:first-child { position: fixed; } .overlay > .dialog { position: relative; display: inline-block; margin: 0px auto; text-align: left; background-color: #ffffff; padding: 15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .overlay > .dialog > nav { display: none; position: absolute; top: -23px; right: 0px; line-height: 1; } .overlay.active > .dialog > nav { display: block; } .overlay > .dialog > nav > *[type=button] { width: 18px; height: 18px; padding: 0px; margin: 0px; display: inline-block; } .overlay > .dialog > nav > *[type=button] > span.icon svg { height: 9px; } .overlay > .dialog > nav > *.next { margin-right: 12px; } .overlay > .dialog > nav > *.prev { margin-right: 4px; } .overlay > .dialog > .content h1:first-child { margin-top: 0px; } .overlay > .dialog > .content > *[type=submit] { float: right; margin: 5px 0px; } .overlay > .dialog > .content img, .overlay > .dialog > .content video { vertical-align: middle; } .overlay > .dialog > .content > *:first-child, .overlay > .dialog > .content > *:first-child:not(.toolbox) > *:first-child, .overlay > .dialog > .content > *:first-child:not(.toolbox) > *:first-child > *:first-child, .overlay > .dialog > .content > .toolbox + *, .overlay > .dialog > .content > .toolbox + * > *:first-child, .overlay > .dialog > .content > .toolbox + * > *:first-child > *:first-child, .overlay > .dialog > .content > .popup > *:first-child > *:first-child > *:first-child, .overlay > .dialog > .content > .popup > form:first-child > *:first-child > *:first-child > *:first-child { margin-top: 0px; } .overlay > .dialog > .content > *:last-child, .overlay > .dialog > .content > *:last-child > *:last-child, .overlay > .dialog > .content > *:last-child > *:last-child > *:last-child, .overlay > .dialog > .content > .popup > *:last-child > *:last-child > *:last-child, .overlay > .dialog > .content > .popup > form:first-child > *:last-child, .overlay > .dialog > .content > .popup > form:first-child > *:last-child > *:last-child, .overlay > .dialog > .content > .popup > form:first-child > *:last-child > *:last-child > *:last-child { margin-bottom: 0px; } .overlay > .dialog > .content > *:first-child:empty + *, .overlay > .dialog > .content > .toolbox + *:empty + * { margin-top: 0px; } .overlay > .dialog > .content > *:has(+ *:last-child:empty) { margin-bottom: 0px; } .overlay > .dialog > .content table.display { max-width: 0px; display: table; } body.overlaying > .container, body.overlaying > #cms-body, body.overlaying > #cms-header, *:not(body).overlaying > *:not(.overlay), .overlaying > .overlay:not(.active) > .dialog { } .overlay.fit-width > .dialog, .overlay.fit > .dialog { max-width: calc(100vw - 120px); } body > .overlay.fit-width, body > .overlay.fit { max-width: 100vw; } body > .overlay.fit-width > .dialog, body > .overlay.fit > .dialog { max-width: 100%; } .overlay.fit > .dialog { max-height: calc(100vh - 120px); } body > .overlay.fit { max-height: 100vh; } body > .overlay.fit > .dialog { max-height: 100%; } body > .overlay.full-width, body > .overlay.full { width: 100vw; max-width: 100%; } .overlay.full-width > .dialog, .overlay.full-width > .dialog > .content, .overlay.full-width > .dialog > .content > .popup, .overlay.full > .dialog, .overlay.full > .dialog > .content, .overlay.full > .dialog > .content > .popup { width: 100%; } body > .overlay.full { height: 100vh; } body > .overlay.full.ratio { height: auto; } .overlay.full > .dialog, .overlay.full > .dialog > .content, .overlay.full > .dialog > .content > .popup { height: 100%; } .overlay.force-full-width > .dialog { width: calc(100vw - 120px); } .overlay.fit-width > .dialog > .content img, .overlay.fit > .dialog > .content img, .overlay.full > .dialog > .content img, .overlay.force-full-width > .dialog > .content img, .overlay.fit-width > .dialog > .content video, .overlay.fit > .dialog > .content video, .overlay.full > .dialog > .content video, .overlay.force-full-width > .dialog > .content video { max-width: 100%; } .overlay.fit > .dialog > .content img, .overlay.full > .dialog > .content img, .overlay.fit > .dialog > .content video, .overlay.full > .dialog > .content video { max-height: 100%; } ul.select > li { margin-top: 2px; } ul.select.diverse > li { margin-top: 12px; } ul.select > li:first-child { margin-top: 0px; } ul.select > li > label > * { vertical-align: middle; display: inline-block; } ul.select > li > label > input + div { margin-left: 5px; } ul.sorter > li { margin-top: 5px; display: flex; flex-flow: row nowrap; } ul.sorter.diverse > li { margin-top: 12px; } ul.sorter > li:first-child { margin-top: 0px; } ul.sorter > li > span, ul.sorter > li > div, ul.sorter > li > ul { display: inline-block; vertical-align: middle; white-space: nowrap; flex: 0 1 auto; } ul.sorter > li > ul > li + li { margin-top: 5px; } ul.sorter.full > li > ul > li { display: inline-block; } ul.sorter.full > li > ul > li + li { margin-top: 0px; margin-left: 5px; } ul.sorter > li > div > *, ul.sorter > li > ul > li > * { vertical-align: middle; } ul.sorter > li > ul > li .body-content { white-space: normal; } ul.sorter > li > span, ul.sorter span.handle { position: relative; cursor: ns-resize; padding-right: 5px; } ul.sorter > li > span:last-child, ul.sorter span.handle:last-child { padding-right: 0px; padding-left: 5px; } ul.sorter > li > span { vertical-align: top; } ul.sorter > li > span::before { content: ''; display: block; height: calc(50% - (12px / 2)) /* 12px is icon height */; min-height: 0px; max-height: 6px; } ul.sorter > li > span > span.icon, ul.sorter span.handle > span.icon { color: #000000; } ul.sorter > li > span > span.icon svg, ul.sorter span.handle > span.icon svg { height: 12px; } ul.sorter > li > span span.handle, ul.sorter > li > div span.handle { vertical-align: middle; display: inline-block; } ul.sorter.state-single > li > span, ul.sorter.state-single span.handle, ul.sorter.state-single > li > span:last-child, ul.sorter.state-single span.handle:last-child { display: none; } select.state-empty:not([multiple]) { width: 100px; } select.state-placeholder:not([multiple]):not(:checked) { color: var(--input-placeholder); } select.state-placeholder:not([multiple]):not(:checked) option, select.state-placeholder:not([multiple]):not(:checked) optgroup { color: var(--input-text); } ul.sorter:not(.state-single) select.state-empty { width: unset; } menu.sorter { margin: 0px; text-align: left; } menu.sorter button.order { height: 1.7em; font-size: 10px; padding: 0px 5px; } menu.sorter button.order > span { } menu.sorter button.order > span svg { height: 8px; } ul > li.sortsorter-placeholder { opacity: 0; } div.tool-extras { position: absolute; margin-right: 8px; margin-top: 8px; white-space: nowrap; } div.tool-extras > * { display: inline-block; cursor: pointer; opacity: 0.36; } div.tool-extras > *:hover { opacity: 1; } div.tool-extras > button { height: 20px; padding: 0px 6px; margin: 0px; } div.tool-extras > button > span.icon svg { height: 10px; } div.tool-extras > button:not(.hide) + button { margin-left: 4px; } div.tool-extras > .fullscreen:not(.minimize) > span.icon:first-child + span.icon { display: none; } div.tool-extras > .fullscreen.minimize > span.icon:first-child { display: none; } div.tool-extras > .tools.active:not(:hover) { opacity: 0.15; } .tool-extras-placeholder { display: inline-block; vertical-align: middle; border: 0 !important; padding: 0 !important; background-color: var(--back-nested) !important; } textarea.tool-extras-big, input.tool-extras-big, .input.tool-extras-big, .editor-content.tool-extras-big > div { width: 100% !important; min-height: 600px !important; } body.in-fullscreen div.tool-extras-big { width: 100%; height: 100%; top: 0px; right: 0px; bottom: 0px; right: 0px; position: fixed; z-index: 101; } body.in-fullscreen { overflow: hidden; } div.tool-extras-class-editor-inline { margin-right: 0px; margin-top: 0px; } .editor-content { display: inline-block; } .editor-content > menu { margin: 0px 0px 8px 0px; text-align: left; } .editor-content > menu button > span { } .editor-content.inline > menu { margin-bottom: 4px; } .editor-content.inline > menu button { height: 20px; padding: 0px 6px; } .editor-content.inline > menu button > span { } .editor-content.inline > menu button > span svg { height: 10px; } .editor-content > div { position: relative; overflow: auto; padding: 0px; background-color: var(--input-edit-background); } .editor-content textarea, .editor-content pre code { width: 100% !important; padding: 15px !important; height: auto; font-size: 1.4rem; line-height: 1.5; text-size-adjust: none; font-family: var(--font-mono); border: 0; margin: 0; top: 0; left: 0; position: absolute; overflow: hidden; background: transparent; box-sizing: border-box; } .editor-content textarea { z-index: 2; height: auto; box-shadow: none; resize: none; text-fill-color: transparent; -webkit-text-fill-color: transparent; } .editor-content pre { white-space: pre-wrap; word-wrap: break-word; } .editor-content pre code { z-index: 1; } .editor-content textarea { color: #000000; } .editor-content pre code { color: var(--text); } .editor-content[data-tools=""] > div { background-color: #ffffff; } .editor-content > menu button.heading > span, .editor-content > menu button.bold > span, .editor-content > menu button.italic > span { font-size: 14px; } .editor-content.inline > menu button.heading > span, .editor-content.inline > menu button.bold > span, .editor-content.inline > menu button.italic > span { font-size: 12px; } .editor-content > menu button.heading > span { font-weight: bold; } .editor-content > menu button.heading > span > span:first-child + span + span { font-size: 0.8em; } .editor-content > menu button.heading > span > span:first-child + span + span + span { font-size: 0.6em; } .editor-content > menu button.bold > span { font-weight: bold; } .editor-content > menu button.italic > span { font-weight: normal; font-style: italic; font-size: 16px; } .editor-content.inline > menu button.italic > span { font-size: 14px; } .editor-content > menu button.quote > span svg { height: 12px; } .editor-content.inline > menu button.quote > span svg { height: 9px; } .regex > span:first-child::before, .regex > span:first-child + input + span::before { content: "/"; font-size: 1.3em; vertical-align: middle; } .regex > span:first-child + input + span + input + span::before { content: ":"; font-size: 1.3em; vertical-align: middle; } .regex > span:first-child::before { margin-right: 4px; } .regex > span:first-child + input + span { margin: 0px 4px; } .regex > span:first-child + input + span + input + span { margin: 0px 4px; } .regex > input[name$="[flags]"] { width: 35px; } .regex > label > input[name$="[enable]"] + span { letter-spacing: 2px; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #c60000; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #6ba100; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; background: hsla(0, 0%, 100%, .5); } .token.atrule, .token.attr-value, .token.keyword { color: #777777; } .token.function, .token.class-name { color: #DD4A68; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } .token.cc1100punctuation { color: #999999; } .token.cc1100tag { color: #009cff; } .token.cc1100tag-attribute { color: #777777; } .token.cc1100flag { color: #009cff; } .token.cc1100variable, .token.cc1100variable-value { color: #009cff; } /* ICONS */ span.icon, span[class*=icon-] { display: inline-block; } span.icon svg, span[class*=icon-] svg { height: 16px; width: auto; fill: currentColor; vertical-align: middle; } span.icon[data-category="full"], button > span.icon, .tags > ul > li > span.handler .icon { height: 100%; } span.icon[data-category="full"] svg, .tags > ul > li > span.handler .icon svg, button > span.icon svg, button > span.icon-text { position: relative; top: 50%; transform: perspective(1px) translateY(-50%); vertical-align: top; } button > span.icon-text:first-child { display: inline-block; margin-right: 5px; } button > span.icon-text:last-child { display: inline-block; margin-left: 5px; } button > span.icon svg { height: 14px; } span.icon[data-category="direction"] { padding: 0em 0.4em; } span.icon[data-category="direction"] svg { height: 0.8em; max-width: 0.8em; } span.icon[data-category="status"] svg { height: auto; width: 14px; } span.icon[data-category="increase"] svg { } span.icon ~ sup, span[class*=icon-] ~ sup, span.icon ~ sub, span[class*=icon-] ~ sub { vertical-align: middle; font-weight: bold; background-color: #ffffff; color: #000000; padding: 1px 2px; margin-left: -5px; border-radius: 2px; line-height: 1; position: absolute; } span.icon ~ sup > span, span[class*=icon-] ~ sup > span, span.icon ~ sub > span, span[class*=icon-] ~ sub > span { display: block; } span.icon:hover + sup, span[class*=icon-]:hover + sup, span.icon:hover + sub, span[class*=icon-]:hover + sub { } @font-face { font-family: 'icons-fontawesome-brands'; src: url('/CMS/css/fonts/fa-brands-400.eot'); src: url('/CMS/css/fonts/fa-brands-400.eot?#iefix') format('embedded-opentype'), url('/CMS/css/fonts/fa-brands-400.woff') format('woff'), url('/CMS/css/fonts/fa-brands-400.woff2') format('woff2'), /*url('/CMS/css/type/filename.otf') format('opentype'),*/ url('/CMS/css/fonts/fa-brands-400.ttf') format('truetype'); font-style: normal; font-weight: normal; } span[class*=icon-fontawesome-] { font-family: icons-fontawesome-brands; } .icon-fontawesome-facebook::before { content: "\f09a"; } .icon-fontawesome-twitter::before { content: "\f099"; } .icon-fontawesome-youtube::before { content: "\f167"; } .icon-fontawesome-instagram::before { content: "\f16d"; } .icon-fontawesome-linkedin::before { content: "\f08c"; } .icon-fontawesome-mastodon::before { content: "\f4f6"; } /* FEEDBACK */ body > .result { position: fixed; z-index: 99999; pointer-events: none; } body > .result > div { position: relative; display: table; padding: 10px; margin: 0px auto; margin-top: 10px; pointer-events: auto; } body > .result > div:first-child { margin-top: 0px; } body > .result > div > ul > li { margin-top: 10px; display: flex; flex-flow: row nowrap; align-items: baseline; } body > .result > div > ul > li:first-child { margin-top: 0px; } body > .result > div > ul > li > * { vertical-align: top; flex: 0 1 auto; } body > .result > div > ul > li > label, body > .result > div > ul > li > div { display: inline-block; } body > .result > div > ul > li > div { margin-left: 10px; color: #ffffff; white-space: pre-wrap; } body > .result > div > ul > li > div > a { color: #ffffff; text-decoration: underline; } body > .result > div > ul > li > div code { font-family: var(--font-mono); } body > .result > div > ul > li > label, body > .result > div > ul > li:first-child > div { padding: 2px 10px; background-color: #ffffff; font-size: 1.4rem; font-weight: bold; color: inherit; } body > .result > .alert { color: #a00000 !important; background-color: #a00000 !important; } body > .result > .attention { color: #ffb400 !important; background-color: #ffb400 !important; } body > .result > .status { color: #00ccff; background-color: #00ccff; } body > .result > .mediate { color: #000000; background-color: #000000; } body > .result > .loading { background-color: #e0e0e0; } body > .result > .loading span { display: block; width: 16px; height: 11px; background: url('/CMS/css/images/loading.gif') no-repeat 0px 0px; } /* MESSAGE */ body > .system { position: relative; top: 0px; left: 0px; } body > .system > div { box-sizing: border-box; text-align: center; font-size: 1.6rem; } body > .system > div > p:first-child > span.icon { vertical-align: middle; margin-right: 10px; } body > .system > div > p:first-child > span.icon svg { height: 30px; } body > .system > div > p { display: inline-block; vertical-align: middle; margin: 12px 16px; } body > .system > .important { color: #ffffff; background-color: #ffb400; } :root { } /* GERERAL */ html { font-size: 62.5%; } /* Ensure body will stretch along with its content */ body { --font-body: var(--font-site); display: flex; flex-flow: column nowrap; align-content: stretch; align-items: stretch; justify-content: flex-start; position: relative; font-family: var(--font-body); color: #000000; background: #ffffff; line-height: 1.26; font-size: 12px; font-size: 1.2rem; } body.framed { overflow-y: hidden; } p { margin: 8px 0px; } figure { text-align: center; } figurecaption { display: block; margin: 6px 0px 0px 0px; text-align: left; } pre { margin: 12px 0px; } blockquote { margin: 8px 0px; padding: 6px; quotes: "“" "”" "‘" "’"; } blockquote::before { content: open-quote; font-size: 16px; font-weight: bold; line-height: 12px; } blockquote::after { content: close-quote; font-size: 16px; font-weight: bold; line-height: 12px; } blockquote header { font-weight: bold; } blockquote header::after { content: ":"; } h1 { font-size: 20px; font-weight:bold; margin: 8px 0px; } h2 { font-size: 16px; font-weight:bold; margin: 8px 0px; } h3 { font-size: 14px; font-weight:bold; margin: 4px 0px; } h4 { font-size: 12px; font-weight:bold; margin: 4px 0px; } legend { font-size: 14px; font-weight:bold; margin: 2px 0px; } a, a:link, a:visited, a:active, a:hover, .a { cursor: pointer; color: inherit; text-decoration: none; } a:hover, .a:hover { color: var(--highlight); text-decoration: underline; } a.more, a.more:link, a.more:visited, a.more:active, a.more:hover, .a.more { color: var(--highlight); text-decoration: none; } a.more:hover, .a.more:hover { text-decoration: underline; } ::selection { color: #ffffff; background-color: var(--highlight); text-fill-color: currentColor; -webkit-text-fill-color: currentColor; } ::-moz-selection { color: #ffffff; background-color: var(--highlight); text-fill-color: currentColor; -webkit-text-fill-color: currentColor; } hr { margin: 8px 0px; border: 0px; border-bottom: 4px solid #000000; } .mod > *:first-child, .mod > *:first-child:not(.toolbox) > *:first-child, .mod > *:first-child:not(.toolbox) > *:first-child > *:first-child, .mod > .toolbox + *, .mod > .toolbox + * > *:first-child, .mod > .toolbox + * > *:first-child > *:first-child { margin-top: 0px; } .mod > *:last-child, .mod > *:last-child > *:last-child, .mod > *:last-child > *:last-child > *:last-child { margin-bottom: 0px; } .mod > *:first-child:empty + *, .mod > *:first-child:empty + * > *:first-child, .mod > .toolbox + *:empty + *, .mod > .toolbox + *:empty + * > *:first-child { margin-top: 0px; } .mod > *:has(+ *:last-child:empty), .mod > *:has(+ *:last-child:empty) > *:last-child { margin-bottom: 0px; } /* Hide any additional html elements added at the end of the document, except named (class) elements */ .container ~ *:not([class]) { position: absolute; height: 0px; width: 0px; font-size: 0px; overflow: hidden; } /* TEMPLATE */ .container { position: relative; } .container, .site { -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .container:after, .site:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0px; } /* Basic modular positioning */ .back, .con, .mod { float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; } .overlay .mod { float: none; } /* Helps absolute positionsing inside modules, otherwise set position to static on specific modules for parent positioning */ .mod { position: relative; } /* Clear height presence of empty mods and backs, but preserve closing margin of a closing div, to preserve width template needs a min-height */ .back:empty, .mod:empty { margin-top: 0px !important; height: 0px !important; } .back { background: #ffffff; } /* MOD ADAPTATION */ /* INTERFACE */ textarea { width: 250px; } .body-content { width: 700px; height: 450px; } fieldset > ul > li > label + *[type=submit], fieldset > ul > li > label + *[type=button], fieldset > ul > li > label + div > input.invalid + *[type=submit], fieldset > ul > li > label + div > input.invalid + *[type=button] { margin: 0px; width: 100%; } fieldset > ul > li > label:first-child + * input[type=text], fieldset > ul > li > label:first-child + * input[type=search], fieldset > ul > li > label:first-child + * input[type=password], fieldset > ul > li > label:first-child + * textarea { width: 100%; } fieldset > ul > li > label:first-child + * > input[type], fieldset > ul > li > label:first-child + * > *[type=button], fieldset > ul > li > label:first-child + * > textarea, fieldset > ul > li > label:first-child + * > select, fieldset > ul > li > label:first-child + * > .input { display: inline-block; margin-top: 0px; margin-bottom: 0px; } fieldset > ul > li > label:first-child + * > .options { margin: 0px; } .options fieldset > ul > li > label:first-child + input[type=text], .options fieldset > ul > li > label:first-child + input[type=search], .options fieldset > ul > li > label:first-child + input[type=password], .options fieldset > ul > li > label:first-child + * input[type=text], .options fieldset > ul > li > label:first-child + * input[type=search], .options fieldset > ul > li > label:first-child + * input[type=password] { width: 250px; } .options fieldset > ul > li > label:first-child + input.date, .options fieldset > ul > li > label:first-child + input.datepicker, .options fieldset > ul > li > label:first-child + * input.date, .options fieldset > ul > li > label:first-child + * input.datepicker { width: 9.4em; } .options fieldset > ul > li > label:first-child + input.date-time, .options fieldset > ul > li > label:first-child + * input.date-time { width: 4em; } .options fieldset > ul > li > label:first-child + textarea, .options fieldset > ul > li > label:first-child + * textarea { width: 250px; } .options fieldset > ul > li > label:first-child + * .regex > input[name$="[flags]"] { width: 35px; } ul.sorter > li > div > input.date, ul.sorter > li > div > input.datepicker, ul.sorter > li > ul > li > input.date, ul.sorter > li > ul > li > input.datepicker { width: 9.4em; } ul.sorter > li > div > input.date-time, ul.sorter > li > ul > li > input.date-time { width: 4em; } .network { text-align: center; overflow-x: auto; overflow-y: hidden; } .network .node { display: block; } .network .node > h4 { margin: 0px; background-color: var(--back-nested); padding: 0px 8px; height: 2.3em; line-height: 2.3em; } .network .node > h4 + div { display: block; vertical-align: top; } .network .node > h4 + div > fieldset > * { text-align: left; } .network > .node, .network .node > div + div { display: inline-block; vertical-align: top; white-space: nowrap; } .network .node > div + div > div { display: inline-block; white-space: nowrap; vertical-align: top; } .network .node > div + div > div + div { margin-left: 10px; } /* TABLE */ table.display td, table.list td, table.display th, table.list th { max-width: 300px; } table.display { width: 100%;} td.max, th.max { width: 100%; } td.limit, th.limit { max-width: 300px; } table.list th, table.list td { padding-right: 20px; } table.list tbody tr:hover { background: #eeeeee; } /* OTHER */ fieldset > legend { margin-top: 0px; margin-bottom: 5px; } fieldset > legend > * { display: inline-block; vertical-align: middle; } fieldset > ul { margin: -5px 0px !important; display: table; vertical-align: middle; border-collapse: separate; border-spacing: 0px 5px; } fieldset > ul > li { display: table-row; height: 100%; } fieldset > ul > li > label:first-child { display: table-cell; vertical-align: top; padding: 2px 15px 2px 0px; text-align: right; width: 1%; white-space: nowrap; height: 100%; } /* fieldset > ul > li > label:first-child::before { content: ''; display: block; height: calc(40% - (1em / 2)); min-height: 2px; max-height: 6px; } */ fieldset > ul > li > label:first-child + * { display: table-cell; width: 100%; vertical-align: middle; margin-left: 0px; border-spacing: 0px; } fieldset > ul > li > label:first-child:empty { padding: 0px; width: 0%; } .options fieldset { margin: 8px 0px; vertical-align: top; } .options fieldset fieldset { margin: 0px; margin-left: 30px; } .options fieldset .options *:not(li) > fieldset { margin-left: 0px; } .options fieldset fieldset > *:first-child { margin-top: 0px; } .options fieldset fieldset > *:last-child { margin-bottom: 0px; } .options fieldset > ul { position:relative; display: inline-block; margin-left: 5px; } .options fieldset > ul:first-child, .options fieldset > legend + ul { margin-left: 0px; } .options fieldset > ul > li > label:first-child { text-align: left; width: auto; } .options fieldset > ul > li > label:first-child + * { display: inline-block; width: auto; } .options fieldset > ul > li > label:first-child + span, .options fieldset > ul > li > label:first-child + div { display: table-cell; } time.date, time.time { font-family: var(--font-serif); font-size: 1.2rem; color: #999999; line-height: 1; } time.date span { display: block; text-align: justify; } time.time span { display: inline-block; } time.time span + span { margin-left: 2px; } /* BBCODE */ .tab {margin-left: 2.5em;} img.resized {width: 450px;} span.center { display: block; text-align: center; } span.center img { margin: 0px auto; } /* ICONS */ /* ERROR */ body > .result { top: 20px; left: 20px; right: 20px; } .label-popup .options fieldset > ul > li > label:first-child + * textarea { width: 400px; height: 100px; } .label-popup menu { text-align: center; } .logout { height: 30px; line-height: 30px; padding: 0px 15px; text-align:center; font-weight:bold; color: #ffffff; background-color: #000000; float: right;} .logout:hover { background-color: #ffffff; } .logout li { display: inline-block; margin-left: 12px; } .logout li > a, .logout li > .a, .logout li.info > div { line-height:1; display: inline-block; vertical-align: middle; text-decoration: none; } .logout a:not(:hover), .logout .a:not(:hover) { color: #ffffff; } .logout a:hover, .logout .a:hover { text-decoration: underline; } .logout li > a > sup { margin-top: -4px; } .logout li:first-child, .logout li.logout-options { margin-left: 0px; } .logout li.logout-options > span { margin-left: 5px; vertical-align: middle; } .logout li.logout-options > span:first-child { margin-left: 0px; } .logout li.logout-options { display: none; } .logout li.info { text-align: left; } .logout li.info > div > span { display: block; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout li.info > div > span:first-child { font-size: 10px; } .logout li.info > div > span:first-child + span { } .account .select input[name=lang_code] + span > img { margin-right: 4px; } .messaging .conversations > tbody tr.unread > td:first-child, .messaging .conversations > tbody tr.unread > td:first-child + td { font-weight: bold; } .messaging .conversations > tbody td + td:last-child { text-align: right; } .messaging .conversations > tbody td span.body { color: #aaaaaa; font-size: inherit; } .messaging .conversation { margin-top: 10px; } .messaging .conversation > fieldset { margin: 12px 0px; } .messaging .conversation input.autocomplete-multi { width: 175px; } .messaging .conversation > ul { } .messaging .conversation > ul > li { margin-top: 10px; margin-right: 20%; } .messaging .conversation > ul > li:first-child { margin-top: 0px; } .messaging .conversation > ul > li.own { margin-right: 0px; margin-left: 20%; } .messaging .conversation > ul > li > cite { display: block; } .messaging .conversation > ul > li.own > cite { text-align: right; } .messaging .conversation > ul > li > cite > span:first-child { font-weight: bold; } .messaging .conversation > ul > li.own > cite > span:first-child { display: none; } .messaging .conversation > ul > li > cite > span:first-child + span { display: inline-block; margin-left: 5px; } .messaging .conversation > ul > li > cite + div { margin-top: 5px; padding: 10px 10px; background-color: #ffffff; } .messaging .conversation > .compose textarea { width: 100%; height: 150px; } .sitemap > ul { display: inline-block; vertical-align: top; margin-right: 30px; } .sitemap > ul:last-child { margin-right: 0px; } .sitemap > ul > li:first-child { font-weight: bold; } .sitemap > ul > li:empty { display: none; } .header { position: relative; } .header > .navigation input[type=checkbox], .header > .navigation input[type=checkbox] + label { display: none; } .header_dropdown { } .header_dropdown .toolbar { height:300px; display:none; background:#0068B1; } .header_dropdown .toolbar > .info { position:relative; float:left; width:150px; height:150px; border: 1px solid #e5e3e3; border-radius: 4px; color: #000; background:#fcfcfc; margin:15px; } .header_dropdown .menu { position:relative; background-color: #f5f5f5; border-bottom: 1px solid #e5e3e3; border-top: 5px solid #0068B1; height:40px; width:100%; } .header_dropdown .toolbar-handle { display: block; position:absolute; left:50%; margin-left:-15px; width:30px; height: 22px; border-left: 1px solid #e5e3e3; border-right: 1px solid #e5e3e3; border-bottom: 1px solid #e5e3e3; border-radius: 0px 0px 4px 4px; color: #e5e3e3; background: #fcfcfc url(/css/images/icon_slide_default.png) no-repeat center center;} .header_dropdown .toolbar-handle:hover, .header_dropdown .toolbar-handle.active { border-left: 1px solid #00497E; border-right: 1px solid #00497E; border-bottom: 1px solid #00497E; background:#0068B1 url(/css/images/icon_slide_active.png) no-repeat center center; cursor:pointer; } .header_dropdown .menu .clock { position: relative; float: right; width: 75px; height: 28px; line-height: 28px; text-align: center; font-weight: bold; font-size: 16px; margin: 5px; border: 1px solid #e5e3e3; border-radius: 4px; color: #000000; background:#fcfcfc; } .header_dropdown .navigation > div { position:relative; float:left; padding:0px; border: 1px solid #e5e3e3; border-radius: 4px; background:#fcfcfc; margin:5px; } .header_dropdown .navigation > div ul, .header_dropdown .navigation > div ul li { display: inline-block; margin: 0px; padding: 0px; border: 0px; background: none; height: auto; } .header_dropdown .navigation ul:before { content:"\00BB"; color: #e5e3e3; font-size: 20px; line-height: 1; font-weight: bold; padding: 0px 4px; } .header_dropdown .navigation ul:first-child:before, .header_dropdown .navigation ul.dropdown:before { content:""; padding: 0px; } .header_dropdown .navigation ul li a { display: none; } .header_dropdown .navigation ul li.active a, .header_dropdown .navigation > div.no-active-page ul:last-child li:first-child a, .header_dropdown .navigation ul.dropdown li a, .header_dropdown .navigation > .logout a, .header_dropdown .navigation > .logout .a { position:relative; display: block; line-height:26px; height:26px; color:#0068B1; font-size:14px; text-align: left; font-weight: bold; padding:0px 8px; border:1px solid transparent; white-space: nowrap; } .header_dropdown .navigation ul li a:hover, .header_dropdown .navigation > div.no-active-page ul:last-child li:first-child a:hover, .header_dropdown .navigation > .logout a:hover, .header_dropdown .navigation > .logout .a:hover { border: 1px solid #00497E; border-radius: 4px; background: #0068B1; cursor:pointer; color: #ffffff; text-decoration: none; } .header_dropdown .navigation ul.dropdown { position: absolute; display: block; margin: -1px 0px 0px -1px; } .header_dropdown .navigation ul.dropdown li { display: block; background:#fcfcfc; border-left: 1px solid #e5e3e3; border-right: 1px solid #e5e3e3; } .header_dropdown .navigation ul.dropdown li:last-child { border-bottom: 1px solid #e5e3e3; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .header_dropdown .navigation ul.dropdown li:first-child { border-top: 1px solid #e5e3e3; border-left: 1px solid #fcfcfc; border-right: 1px solid #fcfcfc; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .header_dropdown .navigation ul.dropdown.first li:last-child { border-bottom-left-radius: 4px; } .header_dropdown .navigation ul.dropdown.last li:last-child { border-bottom-right-radius: 4px; } .header_dropdown .navigation ul.dropdown.first li:first-child { border-left: 1px solid #e5e3e3; border-top-left-radius: 4px; } .header_dropdown .navigation ul.dropdown.last li:first-child { border-right: 1px solid #e5e3e3; border-top-right-radius: 4px; } .header_dropdown .navigation ul.dropdown li.active a:not(:hover) { color: #515151; } .header_dropdown .navigation > .logout { float: right; height: auto; line-height: 28px; } .header_dropdown .navigation > .logout span { float: left; margin-left: 4px; } .header_dropdown .navigation > .logout span:first-child, .container .header_dropdown .navigation > .logout span.logout-options { margin-left: 0px; } .header_dropdown .navigation > .logout > span + span { font-size: 20px; color: #e5e3e3; font-weight: bold; } .header_dropdown .navigation > .logout > .logout-options > span:first-child { padding-left: 8px; font-size:14px; color: #000000; line-height: 28px; } .footer { position: relative; } .search form > input[type=search] { border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .search form > input[type=submit] { margin-left: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .search dl { margin-top: 20px; } .search dl > dt { margin-top: 12px; } .search dl > dt > a { font-size: 1.4rem; font-weight: bold; } .search dl > dt > .hits { font-size: 1rem; display: inline-block; } .search dl > dt > .link { display: block; margin-top: 4px; } .search dl > dd { color: #666666; margin-top: 8px; } .search dl > dd em { font-style: normal; font-weight: bold; color: var(--text); background-color: #fffc5b; } .search dl > dt > a em { font-style: normal; } .search_box { text-align: right; } .search_box form > input[type=search] { width: 125px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .search_box form > button[type=submit] { margin-left: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .language ul > li { display: inline-block; } .language ul > li:not(:first-child)::before { content: "/"; margin: 0px 0.15em; } .dashboard > div { width: 100%; display: flex; flex-flow: row nowrap; min-height: 40px; } .dashboard > div > ul { flex: 1 1 100%; vertical-align: top; overflow: hidden; margin-top: 0px !important; margin-bottom: 0px !important; margin-right: 0px !important; } .dashboard > div > ul:first-child { margin-left: 0px !important; } .dashboard > div > ul > li { margin-left: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; } .dashboard > div > ul > li:first-child { margin-top: 0px !important; } .dashboard > div > ul > li h3 { font-size: 12px; margin: 0px; padding: 0px 4px; color: #ffffff; background-color: #00497e; line-height: 24px; } .dashboard > div > ul > li h3 > span { vertical-align: middle; } .dashboard > div > ul > li:not(.locked) h3 > span { cursor: move; } .dashboard > div > ul > li h3 > ul { float: right; } .dashboard > div > ul > li h3 > ul > li { cursor: pointer; display: inline-block; vertical-align: middle; margin-left: 4px; } .dashboard > div > ul > li h3 > ul > li.size { width: 14px; height: 14px; background: url(/css/images/widget_buttons_w.png) no-repeat 0px 0px; } .dashboard > div > ul > li.min h3 > ul > li.size { background-position: -14px 0px; } .dashboard > div > ul > li.min > div { display: none; } .dashboard > div > ul > li h3 > ul > li a { display: block; width: 14px; height: 14px; background: url(/css/images/widget_buttons_w.png) no-repeat -28px 0px; } .dashboard > div > ul > li > div { padding: 4px; padding-bottom: 0px; } .slider { overflow: hidden; } .slider > div { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; } .slider > div > div { text-align: center; width: 100%; height: 100%: } .slider > div > div > img { max-width: 100%; vertical-align: middle; } .slider > div[data-effect=flow] { cursor: ew-resize; } .slider > div[data-effect=flow] > div { display: block; position: absolute; } .slider > div[data-effect=scroll] { overflow: visible; --slider-image-one: none; --slider-image-two: none; --slider-opacity: 0; } .slider > div[data-effect=scroll] > .flip { display: block; position: -webkit-sticky; position: sticky; z-index: 0; top: 0px; width: 100%; height: 100vh; } .slider > div[data-effect=scroll] > .flip:before, .slider > div[data-effect=scroll] > .flip:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .slider > div[data-effect=scroll] > .flip:before { background-image: var(--slider-image-one); } .slider > div[data-effect=scroll] > .flip:after { background-image: var(--slider-image-two); opacity: var(--slider-opacity); transition: opacity 1s ease-in-out; } .slider > div[data-effect=scroll] > div:not(.flip) { display: block; position: absolute; top: 0; left: 0; right: 0; height: 100vh; z-index: 1; } .slider > div[data-effect=scroll] > div:not(.flip) > p, .slider > div[data-effect=scroll] > div:not(.flip) > figure > figurecaption { position: absolute; bottom: 20%; left: 20%; right: 20%; margin: 0px; padding: 2em; background-color: #ffffff; } .slider > nav.album-items button { z-index: 2; color: #ffffff; background-color: #000000; } .slider > nav.album-items button:hover { color: #000000; background-color: #ffffff; } .slider > nav.pager { position: absolute; z-index: 2; bottom: 20px; left: 50%; transform: translateX(-50%); line-height: 1; font-size: 0px; text-align: center; pointer-events: none; } .slider > nav.pager a { display: inline-block; height: 10px; width: 10px; margin: 0px 5px; border-radius: 50%; background-color: #000000; border: 2px solid #ffffff; text-decoration: none; pointer-events: auto; } .slider > nav.pager a.active, .slider > nav.pager a:hover { background-color: #ffffff; } .slider > nav.album-items button.prev, .slider > nav.album-items button.next, .slider > nav.pager { opacity: 0; transition: opacity 0.4s; } .slider:hover > nav.album-items button.prev, .slider:hover > nav.album-items button.next, .slider:hover > nav.pager { opacity: 1; } .slider > .carousel { display: flex; flex-direction: row; align-items: normal; --slider-speed: 1000ms; --slider-index: 0; } .slider > .carousel > div { position: relative; flex: 0 0 100%; overflow: hidden; } .slider > .carousel > div:not(.body) { display: flex; justify-content: center; align-items: center; } .slider > .carousel[data-effect=vertical] { flex-direction: column; } .slider > .carousel[data-effect=vertical].no-height { height: 100vh; } .slider > .carousel[data-effect=fade] > div { left: calc(-100% * var(--slider-index)); opacity: 0; transition: opacity var(--slider-speed) ease-in-out; } .slider > .carousel[data-effect=fade] > div.active, .slider > .carousel[data-effect=fade]:not(:has( > div.active)) > div:first-child { opacity: 1; } .object_interaction .objects { width: 100%; height: 100%; } .object_interaction > .objects { display: none; } .object_interaction .objects > .object { position: absolute; } .object_interaction .objects > .object .hotspot { position: relative; z-index: 1; margin: 0px auto; max-width: 100%; max-height: 100%; display: block; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .object_interaction .objects > .object .hotspot.shape { background-color: #000000; opacity: 0; width: 99999px; height: 99999px; } .object_interaction .objects > .object .hotspot.shape.circle, .object_interaction .objects > .object .hotspot.shape.square { opacity: 0.3; } .object_interaction .objects > .object .hotspot.shape.circle { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .object_interaction .objects > .object.shadow .hotspot.shape { box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 80); -webkit-box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 80); } .object_interaction .objects > .object.hover-shadow:hover .hotspot.shape { box-shadow: 5px 5px 8px 0px rgba(255, 0, 0, 80); -webkit-box-shadow: 5px 5px 8px 0px rgba(255, 0, 0, 80); } .contact_form form { overflow: hidden; } .contact_form form fieldset textarea { height: 200px; } .contact_info > ul { float: left; width: 225px; } .contact_info > ul li { line-height: 18px; } .contact_info > ul .split { height: 14px; } .contact_info > ul li > span { display: inline-block; vertical-align: middle; } .contact_info > ul li > span:first-child { width: 24px; text-align: left;} .contact_map > div { width: 100%; height: 500px; } .blog { } .blog > article { position: relative; overflow: hidden; margin-top: 20px; } .blog > article + h1 { margin-top: 25px; } .blog > article > time { display: inline-block; vertical-align: top; padding: 8px; } .blog > article > h1 { display: inline-block; vertical-align: top; margin: 0px; margin-left: 10px; margin-top: 10px; max-width: calc(100% - 100px); box-sizing: border-box; } .blog > article > h1 > a, .blog > article > h1 > a:hover { text-decoration: none; color: #000000; } .blog > article > cite { display: block; } .blog > article > section.body { margin-top: 15px; } .blog > article > section.body .more { margin-left: 4px; } .blog > article > div.tags { margin-top: 15px; } .blog > article > a { display: block; text-align: right; white-space: nowrap; } .blog > article > a > span { display: inline-block; text-decoration: inherit; } .blog > article > a > span + span { margin-left: 5px; } .blog .nextprev { text-align: center; margin: 40px 0px 0px 0px; font-size: 14px; font-weight: bold; } .blog .nextprev > a > span.icon svg { height: 0.9em; } .blog .nextprev > a > span.icon { color: var(--highlight); } .blog .nextprev > a > span + span { margin-left: 10px; } .blog .nextprev > a > span:not(.icon) { vertical-align: middle; } .blog .nextprev > a.prev + a.next { margin-left: 40px; } .blog_post_comments .comment { position: relative; margin: 10px 0px 0px 0px; background-color: #eeeeee; } .blog_post_comments .comment:first-child { margin-top: 0px; } .blog_post_comments .comment > div:first-child { float: left; position: relative; margin-top: 10px; } .blog_post_comments .comment > div:first-child + div { padding: 10px 14px 10px 14px; min-height: 50px; margin-left: 90px; } .blog_post_comments .comment > div:first-child + div > cite { margin: 4px 0px; display: block; font-size: 1.4rem; font-weight: bold; } .blog_post_comments .comment > div:first-child + div > div { margin-top: 4px; } .blog_post_comments time { display: block; } .blog_post_comments time span:first-child, .blog_post_comments time span:first-child + span, .blog_post_comments time span:first-child + span + span { display: inline-block; font-size: 11px; line-height: 11px; } .blog_post_comments time span:first-child ~ span { margin-left: 3px; } .blog_post_comments > span.a.more { display: block; } .blog_post_comments form { display: none; margin: 20px 0px; } .blog_post_comments form textarea { height: 100px; } .blog_post_comments form + div { margin: 20px 0px; } .blog.titles ul, .blog.comments ul { margin: 0px; padding: 0px; list-style: none } .blog.titles li a, .blog.comments li a { display: block; min-height: 22px; line-height: 22px; border-bottom: 1px dashed #c0c0c0; color: #000000; text-decoration: none; } .blog.titles li:first-child a, .blog.comments li:first-child a { border-top: 1px dashed #c0c0c0; } .blog.titles li a span, .blog.comments li a span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog.titles li a > span:first-child, .blog.comments li a > span:first-child { float:left; margin-right: 6px; text-align: center; color: #ffffff; font-weight: bold; width: 4px; height: 22px; } .blog.titles li a:hover, .blog.comments li a:hover { text-decoration: none;} .blog.titles li a:hover > span:first-child, .blog.comments li a:hover > span:first-child { background-color: #c0c0c0;} .blog.titles li a:hover > span + span, .blog.comments li a:hover > span + span { color: #666666;} .blog.comments li a { height: 38px;} .blog.comments li a > span:first-child { height: 38px;} .blog.comments li a > span + span > span + span { margin-top: -6px;} .blog_tag_cloud { } .blog_tag_cloud > div { margin: 8px 0px 0px 0px; text-align: justify; } .blog_tag_cloud > div a { display: inline-block; color: #000000; text-decoration: none; vertical-align: middle; line-height: 1.25; margin: 3px 0px; padding: 3px 4px; max-width: 100%; box-sizing: border-box; background-color: #e1e1e1; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .blog_tag_cloud > div a + a { margin-left: 3px; } .blog_tag_cloud > div:last-child > a:last-child { margin-bottom: 3px; } .blog_tag_cloud > div a:hover { color: #666666; text-decoration: none; } .blog_tag_cloud > div a > sup { margin-left: 2px; } .blog_tag_cloud > div > input[id^=hide-show] ~ label { margin-left: 5px; } .blog_tag_cloud > div { font-size: 1.0rem; } .blog_tag_cloud > div a > span { font-size: calc(150% + 1.0rem); } .blog_tag_cloud > div a > sup { font-size: calc(100% + 0.9rem); } .feed { } .feed > article { position: relative; overflow: hidden; } .feed > article + article { margin-top: 20px; } .feed > article.highlight { } .feed > nav > button { display: block; } .feed > nav > button > .icon svg { height: 11px; } .feed > article > div.tags { margin-bottom: 0px; } .feed > article > div.tags .icon { display: none; } .feed > article > a:first-child, .feed > article > a:first-child:hover { text-decoration: none; } .feed > article > a:first-child > time { display: inline-block; } .feed > article > .feed-media, .feed > article > h1, .feed > article > section.body, .feed > article > .tags { margin-top: 8px; margin-bottom: 0px; } .feed > article > section a.link-only { display: inline-block; vertical-align: top; white-space: nowrap; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; } figure.feed-media { display: block; text-align: left; } .album.feed-media { display: flex; flex-flow: row nowrap; align-items: flex-start; } .album.feed-media > figure { } figure.feed-media > img, figure.feed-media > video, .album.feed-media > figure > img, .album.feed-media > figure > video { max-width: 100%; max-height: 100%; height: auto; } .feed_ticker { } .feed_ticker > div > article { position: relative; overflow: hidden; } .feed_ticker > div > article + article { margin-top: 12px; } .feed_ticker > div > article, .feed_ticker > div > article > time, .feed_ticker > div > article > .body { font-size: 1.2rem; } .feed_ticker > div > article > a { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } .feed_ticker > div > article > .feed-media, .feed_ticker > div > article > section.body { margin-top: 6px; margin-bottom: 0px; } .feed_ticker > div > a.more { display: block; margin-top: 12px; } .poll form input[type=submit] { text-transform: uppercase; } .poll dl dt { margin-top: 6px; font-size: 0.9em; } .poll dl dt:first-child { margin-top: 0px; } .poll dl dd { position: relative; background: #f2f2f2; padding: 2px 4px; } .poll dl dd > span:first-child { position: absolute; top: 0px; left: 0px; background: #00497e; height: 100%; } .poll dl dd > span:first-child + span { position: relative; color: #ffffff; font-weight: bold; } .newsletters > ul { margin: -4px -8px; display: table; border-collapse: separate; border-spacing: 8px 4px; } .newsletters > ul > li { display: table-row; } .newsletters > ul > li > a { display: table-cell; } .newsletters > ul > li > time { display: table-cell; } .newsletters > ul > li > time > span { font-size: 1.2em; display: inline; margin-left: 2px; } .newsletters > ul > li > time > span:first-child { margin-left: 0px; } .newsletters > .content { position: relative; } .newsletters > .content > h1 { margin-top: 0px; } .newsletters > .content > iframe { width: 100%; height: 100%; } .calendar { text-align: center; } .calendar > * { text-align: left; } .calendar > section { display: inline-block; } .calendar > section > figure { display: inline-block; vertical-align: bottom; position: relative; margin-left: 1px; margin-top: 18px; margin-bottom: 18px; } .calendar > section > figure.month > figcaption, .calendar > section > figure.week > figcaption, .calendar > section > figure.day > figcaption { position: absolute; top: -18px; left: 50%; text-align: center; } .calendar > section > figure.month > figcaption > span, .calendar > section > figure.week > figcaption > span, .calendar > section > figure.day > figcaption > span { position: absolute; left: -50%; width: 100%; font-weight: bold; } .calendar > section > figure > span.range { position: absolute; bottom: -14px; width: 100%; height: 8px; background-color: var(--back-super); } .calendar > section > figure.month { width: 8px; background-color: var(--back-super); height: 140px; } .calendar > section > figure.month > figcaption { width: 60px; } .calendar > section > figure.week { width: 6px; background-color: #e1e1e1; height: 115px; } .calendar > section > figure.week > figcaption { width: 20px; } .calendar > section > figure.day { width: 8px; height: 100px; } .calendar > section > figure.day > figcaption { display: none; top: -8px; width: 80px; z-index: 1; } .calendar > section > figure.day > figcaption > span { padding: 2px 0px; background-color: var(--back-super); color: #ffffff; } .calendar > section > figure.day > span.today { position: absolute; top: -9px; width: 100%; height: 8px; background-color: var(--back-super); } .calendar > section > figure.day:hover > figcaption { display: block; } .calendar > section > figure.day > div { height: 100%; background-color: var(--back); } .calendar > section > figure.day > div > span { display: block; width: 100%; border-top: 1px solid #ffffff; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .calendar > section > figure.day > div > span:first-child { border-top-width: 0px; } .calendar > section > menu { text-align: center; } .calendar > section > menu > .prev_day { margin-right: 10px; } .calendar > section > menu > .prev_day + span + button { margin: 0px 10px; } .calendar > section > menu > .next_day { margin-left: 10px; } .calendar > section:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0px; } .calendar > dl.range { display: table; margin: -10px 0px; border-collapse: separate; border-spacing: 0px 10px; } .calendar > dl.day { display: table; margin: -15px 0px; border-collapse: separate; border-spacing: 0px 15px; } .calendar > dl:empty { display: block; margin: 0px; } .calendar > dl > div { display: table-row; } .calendar > dl > div:first-child { padding-top: 0px; } .calendar > dl dt, .calendar > dl.range dt + div, .calendar > dl.day dt + dd { display: table-cell; vertical-align: top; } .calendar > dl dt > .date { font-size: 0.8em; } .calendar > dl dt > .time { font-size: 0.7em; } .calendar > dl.range dt + div, .calendar > dl.day dt + dd { padding-left: 10px; } .calendar > dl.range dd { margin-top: 2px; } .calendar > dl.range dd:first-child { margin-top: 0px; } .calendar > dl.range dd > span, .calendar > dl.range dd > a { display: inline-block; vertical-align: middle; margin-left: 10px; } .calendar > dl.range dd > span:first-child { display: inline-block; width: 20px; height: 1.26em; margin-left: 0px; } .calendar > dl.day dt > .date:first-child + .time { margin-top: 4px; } .calendar > dl.day dt > .time { margin-top: 2px; color: var(--text); } .calendar > dl.day dd > h1 { margin-top: 0px; } .calendar > dl.day dd > h1 > span { display: inline-block; vertical-align: text-top; margin-right: 8px; width: 20px; height: 1.26em; } .documentation > nav.breadcrumbs > a > span.icon { padding: 0 5px; } .documentation > nav.breadcrumbs > a > span.icon > svg { height: 10px; } .documentation > nav.breadcrumbs > a > span:not(.icon) { vertical-align: middle; } .documentation > nav.breadcrumbs > a:hover { text-decoration: none; } .documentation > nav.breadcrumbs > a:hover > span:not(.icon) { text-decoration: underline; } .documentation > nav.nextprev { display: flex; justify-content: space-between; margin-top: 40px; } .documentation > nav.nextprev a > span:not(.icon) { vertical-align: middle; } .documentation > nav.nextprev a > span.icon svg { height: 0.8em; } .documentation > nav.nextprev a > span + span { margin-left: 10px; } .documentation_overview > section { margin-bottom: 20px; } .documentation_overview ul li a span.indentation { width: 10px; display: inline-block;} .upload dl > div > dt { font-weight: bold; } .form form > div + fieldset { margin-top: 10px; } .form li.field_address span.input-split > span:first-child { width: 60%; } .form li.field_address span.input-split > span:first-child + span { width: 25%; } .form li.field_address span.input-split > span:first-child + span + span { width: 15%; } .images { } .images > .album > table { width: 100%; border-spacing: 10px 10px; } .images > .album > table td { vertical-align: top; text-align: center; } .images > .album > table td img[data-original] { background-color: #f5f5f5; width: 100%; height: 150px; } .images > .album > table td figurecaption { display: none; } @font-face { font-family:"playfair-display"; src:url("https://use.typekit.net/af/681d80/00000000000000007735a11e/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/681d80/00000000000000007735a11e/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/681d80/00000000000000007735a11e/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; } @font-face { font-family:"parry"; src:url("https://use.typekit.net/af/496c41/000000000000000077371ce3/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/496c41/000000000000000077371ce3/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/496c41/000000000000000077371ce3/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; } @font-face { font-family:"parry"; src:url("https://use.typekit.net/af/4d1ea2/000000000000000077371cdd/31/l?subset_id=2&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/4d1ea2/000000000000000077371cdd/31/d?subset_id=2&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/4d1ea2/000000000000000077371cdd/31/a?subset_id=2&fvd=i4&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; } @font-face { font-family:"parry-grotesque"; src:url("https://use.typekit.net/af/b7fdea/000000000000000077371cf0/31/l?subset_id=2&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/b7fdea/000000000000000077371cf0/31/d?subset_id=2&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/b7fdea/000000000000000077371cf0/31/a?subset_id=2&fvd=n4&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; } @font-face { font-family:"parry-grotesque"; src:url("https://use.typekit.net/af/12ee4f/000000000000000077371ceb/31/l?subset_id=2&fvd=n8&v=3") format("woff2"),url("https://use.typekit.net/af/12ee4f/000000000000000077371ceb/31/d?subset_id=2&fvd=n8&v=3") format("woff"),url("https://use.typekit.net/af/12ee4f/000000000000000077371ceb/31/a?subset_id=2&fvd=n8&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:800;font-stretch:normal; } @font-face { font-family:"parry-grotesque"; src:url("https://use.typekit.net/af/ee86d3/000000000000000077371ce9/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/ee86d3/000000000000000077371ce9/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/ee86d3/000000000000000077371ce9/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; } @font-face { font-family:"parry-grotesque"; src:url("https://use.typekit.net/af/3c161c/000000000000000077371cf4/31/l?subset_id=2&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/3c161c/000000000000000077371cf4/31/d?subset_id=2&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/3c161c/000000000000000077371cf4/31/a?subset_id=2&fvd=i4&v=3") format("opentype"); font-display:auto;font-style:italic;font-weight:400;font-stretch:normal; } @font-face { font-family:"panel-sans"; src:url("https://use.typekit.net/af/789464/00000000000000007750bcfd/31/l?subset_id=2&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/789464/00000000000000007750bcfd/31/d?subset_id=2&fvd=n9&v=3") format("woff"),url("https://use.typekit.net/af/789464/00000000000000007750bcfd/31/a?subset_id=2&fvd=n9&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:900;font-stretch:normal; } @font-face { font-family:"panel-sans"; src:url("https://use.typekit.net/af/09280c/00000000000000007750bd05/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/09280c/00000000000000007750bd05/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/09280c/00000000000000007750bd05/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype"); font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; } body { --icon-menu: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 25 25'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fbe2ee; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='25' height='25'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st2' x='1' y='1' width='23' height='23'/%3E%3Cg class='st3'%3E%3Crect class='st1' x='1' y='1' width='23' height='23'/%3E%3C/g%3E%3Cline class='st1' x1='5.5' y1='8.17' x2='19.5' y2='8.17'/%3E%3Cline class='st1' x1='5.5' y1='16.83' x2='19.5' y2='16.83'/%3E%3Cline class='st1' x1='5.5' y1='12.5' x2='19.5' y2='12.5'/%3E%3C/svg%3E"); --icon-i: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 70 70'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1, .st2 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st3 %7B clip-path: url(%23clippath-1); %7D .st4 %7B fill: %23fff; %7D .st5 %7B fill: %23cfe5cb; %7D .st6 %7B fill: %23333b8f; %7D .st2 %7B stroke: %23333b8f; stroke-width: 1.44px; %7D .st7 %7B fill: %23e41f2e; %7D .st8 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='70' height='70'/%3E%3C/clipPath%3E%3CclipPath id='clippath-1'%3E%3Crect class='st0' x='30.07' y='22.18' width='10.65' height='24.85'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st5' x='.5' y='.5' width='69' height='69'/%3E%3Cg class='st8'%3E%3Crect class='st1' x='.5' y='.5' width='69' height='69'/%3E%3Cpath class='st4' d='M35.49,52.51c9.94,0,18-8.06,18-18s-8.06-18-18-18-18,8.06-18,18,8.06,18,18,18'/%3E%3Ccircle class='st1' cx='35.49' cy='34.51' r='18'/%3E%3C/g%3E%3Cg class='st3'%3E%3Cpath class='st2' d='M125.02,14.73c-.9-5.52-5.73-9.74-11.56-9.74H4.47c-5.83,0-10.66,4.22-11.56,9.74-10.02,1.34-17.75,9.81-17.75,20.1s7.73,18.76,17.75,20.1c.91,5.52,5.73,9.74,11.56,9.74h108.99c5.83,0,10.66-4.22,11.56-9.74,10.02-1.34,17.76-9.82,17.76-20.1s-7.74-18.76-17.76-20.1Z'/%3E%3Cpath class='st6' d='M-4.99,29.75c0-1.51,1.69-2.74,4.26-2.69,2.12.04,3.14.6,3.46.73.45.17,1.62.71,1.62,2.11,0,.18-.04.43-.11.68.05.09.14.14.24.18h0s.35.01.37,0c.61-2.02,1.51-4.1,2.7-6.23-.11-.29-.47-.5-.79-.5l-.18.04c-.48.51-.73,1.62-1.95,1.21-.92-.31-2.77-1.33-5.94-1.25h0c-4.12.07-7.15,2.61-7.15,5.91s2.28,5.31,7.39,6.74c2.09.55,3.49,1.09,4.28,1.64.8.58,1.23,1.34,1.23,2.24,0,1.95-1.85,3.37-4.94,3.37-.65,0-1.42-.11-2-.2-2.8-.52-4.52-2.4-4.52-4.53,0-.32.04-.61.11-.94-.11-.11-.25-.18-.43-.18l-.19.04c-.72,2.63-1.8,4.83-3.35,7.16.04.32.4.61.79.61h.07c.39-.5.62-.73.93-.82.11-.03.24-.04.39-.04.4,0,.96.19,1.75.54,2.45,1.01,4.17,1.44,6.85,1.44h.03c4.9,0,8.32-2.75,8.32-6.7,0-3.23-2.19-5.25-7.11-6.56-2.36-.64-3.92-1.22-4.76-1.79-.93-.58-1.39-1.32-1.39-2.21'/%3E%3Cpath class='st6' d='M24.59,40.27c.08.18.12.42.12.72,0,1.53-1.9,3.24-4.61,3.24-3.07,0-5.47-2.46-5.47-5.62s2.23-5.58,5.3-5.58c2.08,0,3.42.93,3.42,2.38,0,1.82-.98,3.49-2.39,4.06l-.4.17.17-.4c.1-.24.16-.43.16-.65,0-.72-.56-1.22-1.36-1.22-.86,0-1.44.55-1.44,1.37,0,.91.69,1.44,1.84,1.44,2.25,0,3.27-1.85,4.17-3.48,1.14-2.02,2.02-3.18,3.87-4.31,0-.24-.11-.45-.3-.59-.54.28-.93.4-1.25.4-.36,0-.86-.19-1.57-.6-1.78-1.02-2.98-1.34-4.95-1.34-2.27,0-4.38.88-5.94,2.46-1.55,1.57-2.38,3.67-2.34,5.9-.04,2.27.81,4.39,2.36,5.97,1.54,1.56,3.6,2.42,5.81,2.42,3.62,0,6.67-1.55,8.19-4.15-1.18-.45-2.52-1.59-3.15-2.69-.12,0-.19.04-.24.11'/%3E%3Cpath class='st6' d='M40.1,45.79c0-.18-.07-.32-.18-.5h-.65c-.98-.09-1.55-.3-1.85-1.42-.12-.73-.15-1.78-.17-3.28v-6.88c0-1.28.41-3.46.88-4.99.06-.17-.2-.22-.49-.32-.25-.09-.45-.09-.49.04-.88,2.55-3.08,4.1-5.4,4.15-.1.02-.12.26-.12.37s0,.42.12.45h.57c1.57.01,1.87,1.76,1.87,4.99v2.21c0,1.53-.09,2.61-.3,3.37-.44,1.09-1.23,1.33-2.4,1.33-.11.18-.18.32-.18.5s.07.32.18.5c.11,0,.24,0,.37,0h7.62c.16,0,.3,0,.44,0,.11-.18.18-.32.18-.5M37.31,25.11c0-1.32-.88-2.17-2.21-2.17s-2.17.92-2.17,2.17.92,2.17,2.17,2.17c1.32,0,2.21-.92,2.21-2.17'/%3E%3Cpath class='st7' d='M44.01,45.25v1.04h11.09v-1.04c-3.28-1.26-4.98-2.59-4.98-6.17v-2.96h4.32c2.39,0,3.62.22,4.76,2.39h.88v-7.21h-.88c-1.13,2.43-2.36,2.43-4.76,2.43h-4.32v-2.05c0-2.43,1.7-4.38,4.79-4.38h2.96c2.8,0,4.76,1.51,6.33,3.44l.76-.28-1.36-6.21h-19.6v1.04c2.59,1.14,4.22,2.55,4.22,5.83v8.28c0,3.28-1.64,4.72-4.22,5.86'/%3E%3Cpath class='st7' d='M64.45,45.25v1.04h10.49v-1.04c-2.02-.53-3.34-1.61-3.34-3.28,0-.95.19-1.89.6-3.12h10.33c.35,1.1.6,2.27.6,3.12,0,1.67-1.32,2.74-3.34,3.28v1.04h10.49v-1.04c-2.46-.95-3.97-2.11-5.07-4.98l-3.59-9.36c-.34-.88-.53-1.64-.53-2.3,0-1.51,1.16-2.58,2.9-3.34v-1.04h-13.24v1.04c1.73.75,3,1.83,3,3.34,0,.66-.16,1.41-.5,2.3l-3.62,9.36c-1.1,2.87-2.7,4.04-5.16,4.98M73.14,36.34l3.53-9.01h1.35l3.59,9.01h-8.47Z'/%3E%3Cpath class='st7' d='M92.64,45.25v1.04h10.78v-1.04c-2.77-1.14-4.44-2.59-4.44-5.86v-8.28c0-3.28,1.67-4.69,4.44-5.83v-1.04h-10.78v1.04c2.77,1.14,4.44,2.55,4.44,5.83v8.29c0,3.28-1.67,4.72-4.44,5.86'/%3E%3Cpath class='st7' d='M106.45,45.25v1.04h10.65v-1.04c-3-1.2-4.54-2.64-4.54-5.89v-2.93h4.57l2.11,4.07c1.8,3.43,4.1,5.76,6.24,6.27l3.31-3.81-.73-.85c-.69.32-1.26.44-2.02.44-2.08,0-4.79-2.49-6.21-5.04l-.6-1.07h.95c4.53,0,7.15-2.18,7.15-5.92s-2.77-6.27-7.15-6.27h-13.74v1.04c2.74,1.2,4.22,3.05,4.22,6.14v7.97c0,3.12-1.47,4.66-4.22,5.86M112.56,34.1v-3.28c0-2.18,1.23-3.43,3.34-3.43h5.35c2.49,0,3.94,1.2,3.94,3.28s-1.51,3.44-3.94,3.44h-8.69Z'/%3E%3C/g%3E%3C/svg%3E"); --icon-swirl: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 16.25 4.5'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' y='.12' width='16.25' height='4.25'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M-4,2.25C-2.01.29,1.99.29,3.98,2.25c2,1.96,5.99,1.96,7.99,0,2-1.96,5.99-1.96,7.99,0,2,1.96,5.99,1.96,7.99,0'/%3E%3C/g%3E%3C/svg%3E"); --icon-play: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fae2ec; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st3'%3E%3Cpath class='st2' d='M27.83,20.59c.45-.33.45-.85,0-1.18l-11.97-8.75c-.45-.33-.81-.14-.81.41v17.86c0,.55.36.74.81.41l11.97-8.75Z'/%3E%3Cpath class='st1' d='M27.83,20.59c.45-.33.45-.85,0-1.18l-11.97-8.75c-.45-.33-.81-.14-.81.41v17.86c0,.55.36.74.81.41l11.97-8.75Z'/%3E%3C/g%3E%3C/svg%3E"); --icon-play-yellow-background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fef8d1; %7D .st3 %7B fill: %23fae2ec; %7D .st4 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st2' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st4'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st3' d='M27.83,20.59c.45-.33.45-.85,0-1.18l-11.97-8.75c-.45-.33-.81-.14-.81.41v17.86c0,.55.36.74.81.41l11.97-8.75Z'/%3E%3Cpath class='st1' d='M27.83,20.59c.45-.33.45-.85,0-1.18l-11.97-8.75c-.45-.33-.81-.14-.81.41v17.86c0,.55.36.74.81.41l11.97-8.75Z'/%3E%3C/g%3E%3C/svg%3E"); --icon-play-round-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 100 100'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1, .st2 %7B fill: none; %7D .st1 %7B stroke-linecap: round; stroke-linejoin: round; %7D .st1, .st2 %7B stroke: %232c479e; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='100' height='100'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st3'%3E%3Cpath class='st2' d='M50,99.5c27.29,0,49.5-22.21,49.5-49.5S77.29.5,50,.5.5,22.71.5,50s22.21,49.5,49.5,49.5Z'/%3E%3Cpath class='st1' d='M72.58,50l-35.84-26.15v52.31c11.95-8.72,23.89-17.43,35.84-26.15Z'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrowlong-right: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 60 20'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='60' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M60,10.08c-5.48,0-9.92,4.44-9.92,9.92'/%3E%3Cpath class='st1' d='M60,9.92C54.52,9.92,50.08,5.48,50.08,0'/%3E%3Cline class='st1' x1='60' y1='10' y2='10'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrowlong-left: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 60 20'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='60' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M0,10.08c5.48,0,9.92,4.44,9.92,9.92'/%3E%3Cpath class='st1' d='M0,9.92C5.48,9.92,9.92,5.48,9.92,0'/%3E%3Cline class='st1' y1='10' x2='60' y2='10'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrowhead-right: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M28.22,20c-6.61,0-11.97,5.38-11.97,12.01'/%3E%3Cpath class='st1' d='M28.19,20.01c-6.61,0-11.97-5.38-11.97-12.01'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrowhead-right-blue-border-yellow-backgound: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath-1); %7D .st3 %7B fill: %23fff; %7D .st4 %7B fill: %23fef8d1; %7D .st5 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3CclipPath id='clippath-1'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st3' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st5'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3C/g%3E%3Crect class='st4' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st2'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M28.22,20c-6.61,0-11.97,5.38-11.97,12.01'/%3E%3Cpath class='st1' d='M28.19,20.01c-6.61,0-11.97-5.38-11.97-12.01'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrowhead-left: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M15.72,20c6.61,0,11.97,5.38,11.97,12.01'/%3E%3Cpath class='st1' d='M15.75,20.01c6.61,0,11.97-5.38,11.97-12.01'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrowhead-left-blue-border-yellow-backgound: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath-1); %7D .st3 %7B fill: %23fff; %7D .st4 %7B fill: %23fef8d1; %7D .st5 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3CclipPath id='clippath-1'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st3' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st5'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3C/g%3E%3Crect class='st4' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st2'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M11.78,20c6.61,0,11.97,5.38,11.97,12.01'/%3E%3Cpath class='st1' d='M11.81,20.01c6.61,0,11.97-5.38,11.97-12.01'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrow-right-blue-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M30,20.08c-5.48,0-9.92,4.44-9.92,9.92'/%3E%3Cpath class='st1' d='M30,19.92c-5.48,0-9.92-4.44-9.92-9.92'/%3E%3C/g%3E%3Cline class='st1' x1='30' y1='20' x2='10' y2='20'/%3E%3C/svg%3E"); --icon-arrow-left-blue-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M10,20.08c5.48,0,9.92,4.44,9.92,9.92'/%3E%3Cpath class='st1' d='M10,19.92c5.48,0,9.92-4.44,9.92-9.92'/%3E%3C/g%3E%3Cline class='st1' x1='10' y1='20' x2='30' y2='20'/%3E%3C/svg%3E"); --icon-arrow-up-blue-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M20.08,10c0,5.48,4.44,9.92,9.92,9.92'/%3E%3Cpath class='st1' d='M19.92,10c0,5.48-4.44,9.92-9.92,9.92'/%3E%3C/g%3E%3Cline class='st1' x1='20' y1='10' x2='20' y2='30'/%3E%3C/svg%3E"); --icon-arrow-down-blue-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M19.92,30c0-5.48-4.44-9.92-9.92-9.92'/%3E%3Cpath class='st1' d='M20.08,30c0-5.48,4.44-9.92,9.92-9.92'/%3E%3C/g%3E%3Cline class='st1' x1='20' y1='30' x2='20' y2='10'/%3E%3C/svg%3E"); --icon-arrow-left-blue: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 20 20'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='20' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M0,10.08c5.48,0,9.92,4.44,9.92,9.92'/%3E%3Cpath class='st1' d='M0,9.92C5.48,9.92,9.92,5.48,9.92,0'/%3E%3Cline class='st1' y1='10' x2='20' y2='10'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrow-right-blue: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 20 20'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='20' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M20,10.08c-5.48,0-9.92,4.44-9.92,9.92'/%3E%3Cpath class='st1' d='M20,9.92C14.52,9.92,10.08,5.48,10.08,0'/%3E%3Cline class='st1' x1='20' y1='10' y2='10'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrow-up-blue: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 20 20'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='20' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M9.92,0C9.92,5.48,5.48,9.92,0,9.92'/%3E%3Cpath class='st1' d='M10.08,0c0,5.48,4.44,9.92,9.92,9.92'/%3E%3Cline class='st1' x1='10' x2='10' y2='20'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrow-down-blue: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 20 20'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='20' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M9.92,20C9.92,14.52,5.48,10.08,0,10.08'/%3E%3Cpath class='st1' d='M10.08,20c0-5.48,4.44-9.92,9.92-9.92'/%3E%3Cline class='st1' x1='10' y1='20' x2='10'/%3E%3C/g%3E%3C/svg%3E"); --icon-cross-blue: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %232c479e; %7D %3C/style%3E%3C/defs%3E%3Cline class='st0' x1='31.49' y1='8.51' x2='8.51' y2='31.49'/%3E%3Cline class='st0' x1='8.51' y1='8.51' x2='31.49' y2='31.49'/%3E%3C/svg%3E"); --icon-cross-blue-border: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fff; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st2' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st3'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3C/g%3E%3Cline class='st1' x1='31.49' y1='8.51' x2='8.51' y2='31.49'/%3E%3Cline class='st1' x1='8.51' y1='8.51' x2='31.49' y2='31.49'/%3E%3C/svg%3E"); --icon-cross-blue-bold: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 17 17'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: none; stroke: %232c479e; %7D %3C/style%3E%3C/defs%3E%3Cline class='st0' x1='13.25' y1='3.71' x2='3.75' y2='13.29'/%3E%3Cline class='st0' x1='3.75' y1='3.71' x2='13.25' y2='13.29'/%3E%3C/svg%3E"); --icon-cross-blue-border-blue-background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st2 %7B fill: %23c3dde9; %7D .st1 %7B stroke: %232c479e; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st2' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st3'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3C/g%3E%3Cline class='st1' x1='31.49' y1='8.51' x2='8.51' y2='31.49'/%3E%3Cline class='st1' x1='8.51' y1='8.51' x2='31.49' y2='31.49'/%3E%3C/svg%3E"); --icon-cross-blue-border-yellow-background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 17 17'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fef8d1; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='17' height='17'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st2' x='.5' y='.5' width='16' height='16'/%3E%3Cg class='st3'%3E%3Crect class='st1' x='.5' y='.5' width='16' height='16'/%3E%3C/g%3E%3Cline class='st1' x1='13.25' y1='3.71' x2='3.75' y2='13.29'/%3E%3Cline class='st1' x1='3.75' y1='3.71' x2='13.25' y2='13.29'/%3E%3C/svg%3E"); --icon-arrow-right-yellow: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %23fef8d1; stroke-width: 2px; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M40.03,20.18c-10.98,0-19.87,8.9-19.87,19.87'/%3E%3Cpath class='st1' d='M40.03,19.87C29.05,19.87,20.15,10.98,20.15,0'/%3E%3Cline class='st1' x1='40.03' y1='20.02' x2='-.02' y2='20.02'/%3E%3C/g%3E%3C/svg%3E"); --icon-arrow-left-yellow: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %23fef8d1; stroke-width: 2px; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M-.03,20.18c10.98,0,19.87,8.9,19.87,19.87'/%3E%3Cpath class='st1' d='M-.03,19.87C10.95,19.87,19.85,10.98,19.85,0'/%3E%3Cline class='st1' x1='-.03' y1='20.02' x2='40.02' y2='20.02'/%3E%3C/g%3E%3C/svg%3E"); --icon-magnifyingglass: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 23 23'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fef8d1; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='23' height='23'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st3'%3E%3Cpath class='st2' d='M15.81,15.81c3.44-3.44,3.44-9.03,0-12.47-3.44-3.44-9.03-3.44-12.47,0C-.11,6.78-.11,12.36,3.33,15.81c3.44,3.44,9.03,3.44,12.47,0'/%3E%3Cpath class='st1' d='M15.81,15.81c3.44-3.44,3.44-9.03,0-12.47-3.44-3.44-9.03-3.44-12.47,0C-.11,6.78-.11,12.36,3.33,15.81c3.44,3.44,9.03,3.44,12.47,0Z'/%3E%3Cline class='st1' x1='15.85' y1='15.85' x2='22.4' y2='22.4'/%3E%3C/g%3E%3C/svg%3E"); --icon-network: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 26 26'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23cfe5cb; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='26' height='26'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st3'%3E%3Cpath class='st2' d='M22.77,5.47c1.23,0,2.23-1,2.23-2.23s-1-2.24-2.23-2.24-2.23,1-2.23,2.24,1,2.23,2.23,2.23'/%3E%3Cpath class='st1' d='M22.77,5.47c1.23,0,2.23-1,2.23-2.23s-1-2.24-2.23-2.24-2.23,1-2.23,2.24,1,2.23,2.23,2.23Z'/%3E%3Cpath class='st2' d='M22.77,25c1.23,0,2.23-1,2.23-2.23s-1-2.23-2.23-2.23-2.23,1-2.23,2.23,1,2.23,2.23,2.23'/%3E%3Cpath class='st1' d='M22.77,25c1.23,0,2.23-1,2.23-2.23s-1-2.23-2.23-2.23-2.23,1-2.23,2.23,1,2.23,2.23,2.23Z'/%3E%3Cpath class='st2' d='M2.81,13.39c1,0,1.81-.81,1.81-1.81s-.81-1.81-1.81-1.81-1.81.81-1.81,1.81.81,1.81,1.81,1.81'/%3E%3Ccircle class='st1' cx='2.81' cy='11.58' r='1.81'/%3E%3Cpath class='st2' d='M11.83,18.1c2.31,0,4.19-1.88,4.19-4.19s-1.88-4.19-4.19-4.19-4.19,1.88-4.19,4.19,1.88,4.19,4.19,4.19'/%3E%3Cpath class='st1' d='M11.83,18.1c2.31,0,4.19-1.88,4.19-4.19s-1.88-4.19-4.19-4.19-4.19,1.88-4.19,4.19,1.88,4.19,4.19,4.19Z'/%3E%3C/g%3E%3Cline class='st1' x1='21.35' y1='4.65' x2='14.55' y2='10.93'/%3E%3Cline class='st1' x1='4.67' y1='11.94' x2='7.79' y2='13.02'/%3E%3Cline class='st1' x1='15.07' y1='16.63' x2='20.83' y2='21.35'/%3E%3C/svg%3E"); --icon-globe: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 26 26'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='26' height='26'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M21.48,21.49c4.69-4.69,4.69-12.28,0-16.97C16.8-.17,9.2-.17,4.51,4.51-.17,9.2-.17,16.8,4.51,21.49c4.69,4.69,12.29,4.69,16.97,0Z'/%3E%3Cline class='st1' x1='.93' y1='13' x2='25.07' y2='13'/%3E%3Cellipse class='st1' cx='13' cy='13' rx='4.19' ry='12'/%3E%3C/g%3E%3C/svg%3E"); --icon-globe-yellow-background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 26 26'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fef8d1; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='26' height='26'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st3'%3E%3Cpath class='st2' d='M21.48,21.49c4.69-4.69,4.69-12.28,0-16.97C16.8-.17,9.2-.17,4.51,4.51-.17,9.2-.17,16.8,4.51,21.49c4.69,4.69,12.29,4.69,16.97,0'/%3E%3Cpath class='st1' d='M21.48,21.49c4.69-4.69,4.69-12.28,0-16.97C16.8-.17,9.2-.17,4.51,4.51-.17,9.2-.17,16.8,4.51,21.49c4.69,4.69,12.29,4.69,16.97,0Z'/%3E%3Cline class='st1' x1='.93' y1='13' x2='25.07' y2='13'/%3E%3Cellipse class='st1' cx='13' cy='13' rx='4.19' ry='12'/%3E%3C/g%3E%3C/svg%3E"); --icon-refresh: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg class='st2'%3E%3Cpath class='st1' d='M11.23,16.83c3.97-2.47,9.2-1.27,11.67,2.67'/%3E%3Cpath class='st1' d='M11.13,16.59c3.94-2.48,5.14-7.7,2.67-11.67'/%3E%3Cpath class='st1' d='M9.76,23.62c.76,6.15,6.35,10.52,12.5,9.77,6.15-.76,10.52-6.35,9.77-12.5-.76-6.15-6.35-10.52-12.5-9.77-2.01.25-3.82,1.01-5.34,2.14'/%3E%3C/g%3E%3C/svg%3E"); --icon-refresh-pink-background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 40 40'%3E%3C!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) --%3E%3Cdefs%3E%3Cstyle%3E .st0, .st1 %7B fill: none; %7D .st1 %7B stroke: %232c479e; %7D .st2 %7B fill: %23fae2ec; %7D .st3 %7B clip-path: url(%23clippath); %7D %3C/style%3E%3CclipPath id='clippath'%3E%3Crect class='st0' width='40' height='40'/%3E%3C/clipPath%3E%3C/defs%3E%3Crect class='st2' x='.5' y='.5' width='39' height='39'/%3E%3Cg class='st3'%3E%3Crect class='st1' x='.5' y='.5' width='39' height='39'/%3E%3Cpath class='st1' d='M11.23,16.83c3.97-2.47,9.2-1.27,11.67,2.67'/%3E%3Cpath class='st1' d='M11.13,16.59c3.94-2.48,5.14-7.7,2.67-11.67'/%3E%3Cpath class='st1' d='M9.76,23.62c.76,6.15,6.35,10.52,12.5,9.77,6.15-.76,10.52-6.35,9.77-12.5-.76-6.15-6.35-10.52-12.5-9.77-2.01.25-3.82,1.01-5.34,2.14'/%3E%3C/g%3E%3C/svg%3E"); --blue: #2c479e; --lightblue: #b6d6e2; --yellow: #fef8d1; --pink: #fae2ec; --green: #c2e0c6; } @media all and (max-width : 1275px) { body, html { font-size: 8px; } } @media all and (max-width : 500px) { body, html { font-size: 6px; } } /* HOME STYLE */ body, html { } body { height: 100%; background-color: #fff; color: var(--blue); font-family: 'parry', arial, verdana, sanserif; font-weight: 400; } body.overlaying { overflow: hidden; } h1, h2 { font-family: 'panel-sans'; font-weight: 900; } h1 { font-size: 6rem; line-height: 7.2rem; } h2 { font-family: 'parry-grotesque'; font-size: 2.4rem; line-height: 3.4rem; border-bottom: 1px solid var(--blue); width: auto; display: inline-block; } h3 { font-family: 'parry-grotesque'; font-weight: 700; font-size: 2.4rem; line-height: 3.4rem; border-bottom: 1px solid var(--blue); width: max-content; } h4 { font-family: 'parry-grotesque'; font-weight: 700; font-size: 1.8rem; line-height: 2.4rem; border-bottom: 1px solid var(--blue); width: max-content; } h5 { font-family: 'parry-grotesque'; font-weight: 700; font-size: 1.3rem; line-height: 1.7rem; text-transform: uppercase;} h6 { font-family: 'parry-grotesque'; font-weight: 700; font-size: 1.1rem; line-height: 1.3rem; text-transform: uppercase;} html, body, body > .container, body > .container > .full, body > .container > .full > .site { height: 100% !important; width: 100% !important;} body > .container > .full > .site { display: flex; flex-direction: column; } /* TEMPLATE */ .mod.header { background-image: url(/css/images/scifair_logo.svg); background-color: #fff; background-repeat: no-repeat; background-position: center 100px; background-size: auto 150px; min-height: 400px; border: 0; display: flex; justify-content: center; align-items: end;} .page-home .mod.header { background-position: center center; min-height: 350px; } .page-stories .mod.header { background-image: url(/css/images/scifair_logo_stories.svg); } .page-database .mod.header { background-image: url(/css/images/scifair_logo_database.svg); } .mod.header > a { background-repeat: no-repeat; background-size: contain;} .mod.header .search_box {display: none;} .page-home .mod.header .navigation { display: none; } .mod.header .navigation { padding-bottom: 50px; } .mod.header .navigation nav ul { } .mod.header .navigation nav ul li { display: inline-block; margin-right: 50px; padding-right: 50px; } .mod.header .navigation nav ul li:last-child { margin-right: 0; padding-right: 0; } .mod.header .navigation nav ul li.active { } .mod.header .navigation nav ul li a { font-family: 'playfair-display'; display: inline-block; text-transform: uppercase; font-size: 1.8rem; color: var(--blue); letter-spacing: 1.5px; padding-bottom: 22px; } .mod.header .navigation nav ul li a:hover, .mod.header .navigation nav ul li.active a, .mod.header .navigation nav ul li.active a:hover { text-decoration: none; color: var(--blue); background-image: var(--icon-swirl); background-repeat: repeat-x; background-size: 20px auto; background-position: left bottom; } /* MOD ADAPTATION */ .site .mod.body { height: 100%; box-sizing: border-box; } .page-home .site .mod.body { font-size: 0px; } .page-home .site .mod.body > div { display: inline-block; height: 100%; width: 50%; padding: 0; background-repeat: no-repeat; background-position: center center; background-size: cover; } .page-home .site .mod.body > div.database { background-image: url(/css/images/background_database.jpg);} .page-home .site .mod.body > div.stories { background-image: url(/css/images/background_stories.jpg);} .page-home .site .mod.body > div > a { display: block; font-size: 0px; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center center; background-size: 50% auto; } .page-home .site .mod.body > div.database > a { background-image: url(/css/images/button_database.gif); } .page-home .site .mod.body > div.stories > a { background-image: url(/css/images/button_stories.gif); } .case_studies { } .case_studies div.overview { position: relative; padding: 150px 20% 300px 20%; box-sizing: border-box; background-repeat: no-repeat; background-size: cover; background-position: center center; background-color: var(--lightblue); /* background-image: url(/css/images/background_stories.jpg); */ text-align: center; } .case_studies div.overview > a { position: relative; display: inline-block; vertical-align: top; font-family: 'panel-sans'; text-align: center; color: var(--blue); width: 215px; height: 302px; box-sizing: border-box; padding: 30px 3px; margin: 20px; border: 2px solid var(--blue); background-color: var(--pink); background-position: -99999px -99999px; background-repeat: no-repeat; } .case_studies div.overview > a:hover { text-decoration: none; } .case_studies div.overview > a.yellow { background-color: var(--yellow); } .case_studies div.overview > a.green { background-color: var(--green); } .case_studies div.overview > a.lightblue { background-color: var(--lightblue); } .case_studies div.overview > a.pink { background-color: var(--pink); } .case_studies div.overview > a > span:first-of-type { display: block; font-size: 2.1rem; } .case_studies div.overview > a > span:last-of-type { position: absolute; bottom: 30px; left: 0px; width: 100%; text-transform: uppercase; display: block; padding-bottom: 30px; font-size: 1.1rem; letter-spacing: 1.5px; background-repeat: no-repeat; background-size: 60px 20px; background-position: center bottom; background-image: var(--icon-arrowlong-right) } .case_studies .case-study { position: relative; width: 930px; margin: 0 auto; box-sizing: border-box; } .case_studies .case-study + h2 { padding: 100px 20% 10px 20%; box-sizing: border-box; width: 100%; border: none; text-decoration: none; margin-top: 100px; background-color: #fff; background-image: var(--icon-swirl); background-repeat: repeat-x; background-size: 20px auto; background-position: left top; } .case_studies .case-study + h2 + style + .overview { padding-top: 0px; padding-bottom: 0px; background-size: 0px; background-color: #fff; } .case_studies .case-study .meta > h1 { width: 100%; text-align: center; margin-bottom: 40px; } .case_studies .case-study .meta > span.author { display: block; width: 100%; text-align: center; font-family: 'panel-sans'; font-size: 2.4rem; line-height: 3.2rem; margin-bottom: 50px;} .case_studies .case-study .meta > .intro { margin-bottom: 40px; } .case_studies .case-study .meta > .intro > p { font-size: 2.4rem; line-height: 3.4rem; } .case_studies .case-study .meta > nav { margin-bottom: 10rem; margin-left: 10rem; } .case_studies .case-study .meta > nav > ul > li { margin-bottom: 15px; padding-left: 38px; background-image: var(--icon-arrow-right-blue); background-repeat: no-repeat; background-position: left center; background-size: 22px 22px; } .case_studies .case-study .meta > nav > ul > li > a { font-family: 'parry-grotesque'; font-weight: 700; font-size: 1.8rem; line-height: 2.4rem; border-bottom: 1px solid var(--blue); width: max-content; } .case_studies .case-study .meta > nav > ul > li > a:hover { color: var(--blue); text-decoration: none; } .case_studies .case-study .slider { position: relative; padding-bottom: 50px;} .case_studies .case-study .slider > .carousel { position: relative; } .case_studies .case-study .slider > .carousel > .body { } .case_studies .case-study .slider > .carousel > .body > figure { position: relative; } .case_studies .case-study .slider > .carousel > .body > figure > .image { position: relative; } .case_studies .case-study .slider > .carousel > .body > figure > .image:hover { cursor: pointer; } .case_studies .case-study .slider > .carousel > .body > figure > .image > img { width: 100%; height: 50rem; object-fit: contain; } .case_studies .case-study .slider > .carousel > .body > figure > figurecaption { padding: 10px; box-sizing: border-box; position: absolute; bottom: 20px; left: 20px; width: max-content; max-width: 300px; background-color: #fff; border: 1px solid var(--blue); } .case_studies .case-study .slider > .carousel > .body > figure > figurecaption > p { margin: 0; font-family: 'parry-grotesque'; font-weight: 400; font-size: 1.2rem; } .case_studies .case-study .slider > .carousel > .body > figure > figurecaption > a { display: none; } .case_studies .case-study .slider > nav.album-items button { background-color: transparent; width: 6rem; height: 6rem; top: calc(50% - 3rem); } .case_studies .case-study .slider > nav.album-items button.prev { left: 20px; background-image: var(--icon-arrow-left-blue-border); background-repeat: no-repeat; background-size: 6rem 6rem; } .case_studies .case-study .slider > nav.album-items button.next { right: 20px; background-image: var(--icon-arrow-right-blue-border); background-repeat: no-repeat; background-size: 6rem 6rem; } .case_studies .case-study .slider > nav.album-items button > .icon { display: none; } .case_studies .case-study .slider > nav.pager > a { border: 1px solid var(--blue); background-color: var(--pink);} .case_studies .case-study .slider > nav.pager > a.active { border: 1px solid var(--blue); background-color: var(--green); } .case_studies .case-study .furherreading > h2, .case_studies .case-study .cite-as > h2 { text-decoration: none; font-size: 1.1rem; line-height: 1.6rem; text-transform: uppercase; margin-top: 20px; border: none; } .case_studies .case-study .album > figure { display: inline-block; margin: 16px 24px 0 0; padding: 0; height: 166px; } .case_studies .case-study .album > figure div { position: relative; width: min-content;} .case_studies .case-study .album > figure div > img { width: auto; height: 166px; } .case_studies .case-study .album > figure > figurecaption { display: none; } .case_studies .case-study > div, .case_studies .case-study > section { margin: 20px; } .case_studies .case-study > section { padding: 6rem 7rem 4rem 7rem; } .case_studies .case-study > section h2 { margin-bottom: 4.5rem; } .case_studies .case-study > section:nth-of-type(1) { background-color: var(--yellow); } .case_studies .case-study > section:nth-of-type(2) { background-color: var(--green); } .case_studies .case-study > section:nth-of-type(3) { background-color: var(--lightblue); } .case_studies .case-study > section:nth-of-type(4) { background-color: var(--pink); } .case_studies .case-study > section:nth-of-type(5) { background-color: var(--yellow); } .case_studies .case-study > section:nth-of-type(6) { background-color: var(--green); } .case_studies .case-study > section:nth-of-type(7) { background-color: var(--lightblue); } .case_studies .case-study > section:nth-of-type(8) { background-color: var(--pink); } .case_studies .case-study > section:nth-of-type(9) { background-color: var(--yellow); } .case_studies .case-study > section:nth-of-type(10) { background-color: var(--green); } .case_studies .case-study > section:nth-of-type(11) { background-color: var(--lightblue); } .case_studies .case-study > section:nth-of-type(12) { background-color: var(--pink); } .case_studies .case-study > section:nth-of-type(13) { background-color: var(--yellow); } .case_studies .case-study > section:nth-of-type(14) { background-color: var(--green); } .case_studies .case-study > section:nth-of-type(15) { background-color: var(--lightblue); } .case_studies .case-study > section:nth-of-type(16) { background-color: var(--pink); } .case_studies .case-study > div.visualisation > h2 { display: none; } .case_studies .case-study > div.visualisation > p { border: 1px solid var(--blue); font-family: 'parry-grotesque'; font-weight: 700; font-size: 1.2rem; line-height: 1.6rem; margin: 40px 0 20px 0; padding: 15px; width: auto; } .case_studies .case-study > section > h5 { margin: 30px 0 20px 0; } .case_studies .case-study > section > .album { border-top: 1px solid var(--blue); padding-top: 20px; } /* CUSTOM & BODY CONTENT */ .body p { color: var(--blue); font-size: 1.8rem; } .page-about .body { position: relative; text-align: center; width: 930px !important; margin: 0 auto !important; min-height: 800px; box-sizing: border-box; font-family: 'parry-grotesque'; font-weight: 700; font-size: 2.4rem; line-height: 3.4rem; background-image: url(/css/images/about.png); background-repeat: no-repeat; background-position: center 200px; background-size: auto; } .page-about .body p a, .page-about .body p a:hover { color: var(--blue); } .body.footer { text-align: center; padding: 100px 0; } .body.footer a { font-family: 'playfair-display'; text-decoration: none; display: inline-block; text-transform: uppercase; font-size: 1.8rem; color: var(--blue); letter-spacing: 1.5px; padding-bottom: 22px;} .body.footer a:hover { text-decoration: none; color: var(--blue); background-image: var(--icon-swirl); background-repeat: repeat-x; background-size: 20px auto; background-position: left bottom; } /* INTERFACE */ .overlay { padding-top: 120px; } .overlay > div:first-child { background-color: rgba(0,0,0,0.9); } .overlay > .dialog { background-color: transparent; } .overlay > .dialog > nav { position: fixed; top: 30px; right: 30px; } .overlay > .dialog > nav > [type="button"] { background-image: var(--icon-cross-blue-border-yellow-background); background-repeat: no-repeat; background-size: 45px 45px; width: 45px; height: 45px; background-color: transparent; border: 0;} .overlay > .dialog > nav > [type="button"] span { display: none; } .overlay > .dialog .content { padding: 0 100px; } .overlay > .dialog .album-viewer { text-align: center; } .overlay > .dialog .album-viewer > img { max-height: calc(100vh - 240px); } .overlay > .dialog .album-viewer > nav > button, .overlay > .dialog .album-viewer:hover > nav > button { display: block; position: absolute; width: 45px; height: 45px; top: calc(50% - 22px); background-color: transparent; cursor: pointer; text-align: center; border: 0;} .overlay > .dialog .album-viewer > nav > button.next { right: -100px; background-image: var(--icon-arrow-right-yellow); background-repeat: no-repeat; background-size: 45px 45px; } .overlay > .dialog .album-viewer > nav > button.prev { left: -100px; background-image: var(--icon-arrow-left-yellow); background-repeat: no-repeat; background-size: 45px 45px; } .overlay > .dialog .album-viewer > nav > button > .icon { display: none; } .overlay > .dialog .album-viewer > div { font-family: 'parry-grotesque'; font-weight: 700; margin: 10px auto; padding: 10px; color: var(--blue); background-color: #fff; border: 1px solid var(--blue); text-align: center; font-size: 1.4rem; line-height: 2.1rem; width: max-content; } .overlay > .dialog .album-viewer > div p { font-family: 'parry-grotesque'; } .overlay > .dialog .album-viewer > div > a { font-family: 'parry-grotesque'; font-weight: 900; display: block; width: max-content; padding: 5px; color: var(--blue); background-color: var(--yellow); text-transform: uppercase; border: 1px solid var(--blue); text-align: center; font-size: 14px; line-height: 21px;} @media all and (max-width : 1275px) { .mod.header { background-position: center 25px; background-size: auto 50px; min-height: 200px; } .mod.header .navigation nav ul li { margin-right: 0; } .page-database .mod.header { min-height: 150px; } .page-database .mod.header .navigation { padding-bottom: 0px; } .case_studies div.overview { padding: 30px 20px 50px 20px; } .page-about .body, .case_studies .case-study { width: auto !important; margin: 0 20px !important; } .overlay { padding: 120px 0 0 0; } .overlay > .dialog, .overlay > .dialog .content, .overlay > .dialog .album-viewer { padding: 0px; } .overlay > .dialog > nav { top: -30px; right: 10px; } .overlay > .dialog .album-viewer > img { max-height: 100vh; } .overlay > .dialog .album-viewer > nav > button, .overlay > .dialog .album-viewer:hover > nav > button { top: auto; bottom: -60px; } .overlay > .dialog .album-viewer > nav > button.prev { left: 10px; } .overlay > .dialog .album-viewer > nav > button.next { right: 10px; } .mod.walks div.walk > section > div.image > figure { width: auto; } } /* TABLE */ /* OTHER */ /* BBCODE */ /* ICONS */ #template-1 .site { width: 1000px; margin: 0px auto; } #template-1 .back-spacing { margin: 0px; border-width: 0px; } #template-1 .mod-spacing { margin: 0px; border-width: 0px; } #template-1 #full-0 { } #template-1 #mod-0_0 { width: calc(100% - 0px); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } #template-1 #mod-0_1 { width: calc(100% - 0px); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } #template-2 .site { width: 1000px; margin: 0px auto; } #template-2 .back-spacing { margin: 0px; border-width: 0px; } #template-2 .mod-spacing { margin: 0px; border-width: 0px; } #template-2 #full-0 { } #template-2 #mod-0_0 { width: calc(100% - 0px); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } #template-2 #mod-0_1 { width: calc(100% - 0px); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } #template-2 #mod-0_2 { width: calc(100% - 0px); margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; } /**end**/