/*-------------------------------------------------- Standard definitions for backward compatibility ---------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 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, dl, dt, dd, ol, nav ul, nav, 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; vertical-align: baseline; } article, aside, details, div, figcaption, figure, footer, header, hgroup, menu, nav, section, h1, h2, h3, h4, h5, h6 { display: block; unicode-bidi: isolate; } summary, details { outline: none; } a, a:link { text-decoration: none; outline: none; } ol, ul, li { list-style: none; margin: 0; padding: 0; } blockquote, q { quotes: none; } blockquote::before, blockquote:after, q::before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } em { font-style: italic; } img { max-width: 100%; object-fit: contain; } /*details summary::-webkit-details-marker { display: none; }*/ *, ::after, ::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } /*----------------------------------------------------------------------------------------------------- Naming Convention - Class Type Prefixes -----------------------------------------------------------------------------------------------------*/ /* ------- defined in base CSS ------- (1) --vr = variables (2) .fn = class causing Function / Action in Javascript (transformation, slide, etc.) or defining a state (hover, active, error, loading, etc.) (3) .gi = class for Grid structure (4) .hi = class for Html structure (5) .ci = class with one or mutiple properties with children classes, Combo Structure (loading, overlay, notification, etc.) (6) .ui = class with one property (7) .mi = class with mutiple properties with no child class ------- defined in custom CSS ------- (1) --vx = variables (2) .fx = class causing Function / Action in Javascript (transformation, slide, etc.) or defining a state (hover, active, error, loading, etc.) (3) .gx = class for Grid structure (4) .hx = class for Html structure (5) .cx = class with one or mutiple properties with children classes, Combo Structure (loading, overlay, notification, etc.) (6) .ux = class with one property (7) .mx = class with mutiple properties with no child class */ /*----------------------------------------------------------------------------------------------------- Naming Convention - Property Name Shortword -----------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------- Properties Naming Convention to be used for single property classes definitions (ui, ux), mutiple properties classes definitions (mi, mx), and variable definitions (--vr, --vx) ---------------------------------------------------*/ /* [propertyCode = propertyName] b = border c = color d = display f = font h = height l = list m = margin o = outline p = padding s = position t = text w = width bg = backgroubnd-color bc = border-color br = border-radius bs = border-style bw = border-width bz = box-shaow bx = box-sizing ff = font-family fs = font-size ft = font-style fw = font-weight lh = line-height ls = list-style mh = max-height nh = min-height mw = max-width nw = min-width oc = outline-color os = outline-style ow = outline-width ta = text-align td = text-decoration tt = text-transform va = vertical-align ffd = flex-direction ffw = flex-wrap fac = align-content fjc = justify-content fai = align-items fji = justify-items lsi = list-style-image lsp = list-style-position lst = list-style-type tsa = text-size-adjust (sides - optional) --l = left --r = right --t = top --b = bottom (mark important - optional) ---i = !important */ /*-------------------------------------------------- Naming Convention - Variables ---------------------------------------------------*/ /* [frequently used properties] container = background-color, background-image, width, height, postion, display, border, text-align, vertical-align, padding, margin, line-height, box-shadow font = color, font-size, font-weight, text-shadow icon = color, font-size, font-weight, text-shadow image = height, width, max-height, max-width prefix theme container object state property side (optional) --vr base (default) html body (default) normal (default) color left .ui sharp header a focus background-color bottom .fn dim footer button active font-weight right .hi highlight nav hover font top .gi contrast link padding usage: :root { --prefix-theme-container-object-state-property--side: value --vr-base-html-body-normal-color: #cccccc; --vr-base-html-a-hover-color: #eeeeee; } Example: .prefix-theme, object.prefix-theme:state { property: var(--prefix-theme-container-object-state-property); property-side: var(--prefix-theme-container-object-state-property--side); } .prefix-theme object:state, object.prefix-theme:state { property: var(--prefix-theme-container-object-state-property); property-side: var(--prefix-theme-container-object-state-property--side); } .hi-base, section.hi-base { background-color: var(--vr-base-html-body-normal-backgroundColor); } .hi-base a:hover, a.hi-base:hover { color: var(--vr-base-html-body-a-hover-color); } */ /*---------------------------------------------------------------------------- Naming Convention - Single Property Class, Multiple Property Single Class -----------------------------------------------------------------------------*/ /* Usage: .ui-propertyCode-propertyValue { property: value; } .ui-propertyCode-propertyValue--side(optional) { property-side: value; } .ui-propertyCode-propertyValue--side(optional)---i(optional) { property-side: value !important; } Example: .ui-c-red { color: red; } .ui-p-12px--t { padding-top: 12px; } .ui-p-24px--b---i { padding-bottom: 24px !important; } */ /*----------------------------------------------------------------------------------------------------- SECTIONS 1 (Variables --vr) -----------------------------------------------------------------------------------------------------*/ :host, :root { /* ---------- theme --------- */ --vr-theme-html-body-normal-transition: all 0.3s ease-in-out; --vr-theme-html-body-normal-fontFamily: 'Nunito', 'Muli', sans-serif; --vr-theme-html-body-title-fontFamily: 'Jost', sans-serif; --vr-theme-html-body-header-fontFamily: 'Jost', sans-serif; --vr-theme-html-body-button-fontFamily: 'Jost', sans-serif; --vr-theme-html-body-link-fontFamily: 'Jost', sans-serif; --vr-theme-html-body-normal-fontSize: 15px; --vr-theme-html-body-normal-fontWeight: 400; --vr-theme-html-body-normal-lineHeight: 28px; --vr-theme-header-navigation-normal-height: 60px; --vr-theme-header-link-normal-lineHeight: 28px; --vr-theme-header-link-normal-padding: 16px; /* 16 + 16 + 28 = 60 Header height */ /** base theme shades **/ --vr-base-html-normal-shade: 255,255,255; --vr-base-html-alter-shade: 239,246,255; --vr-base-html-proxy-shade: 245,250,255; --vr-base-html-light-shade: 239,239,255; --vr-base-html-control-shade: 242,246,247; --vr-base-html-text-shade: 43,43,99; --vr-base-html-dim-shade: 128,128,128; --vr-base-html-title-shade: 255,111,0; --vr-base-html-caption-shade: 88,88,188; --vr-base-html-link-shade: 88,88,188; --vr-base-html-sharp-shade: 88,88,188; /* 18, 102, 227 */ --vr-base-html-hover-shade: 34,186,204; /* base html */ --vr-base-html-body-normal-backgroundColor: rgba(var(--vr-base-html-normal-shade), 1); --vr-base-html-body-alter-backgroundColor: rgba(var(--vr-base-html-alter-shade), 1); --vr-base-html-body-proxy-backgroundColor: rgba(var(--vr-base-html-proxy-shade), 1); --vr-base-html-body-light-backgroundColor: rgba(var(--vr-base-html-light-shade), 1); --vr-base-html-body-control-backgroundColor: rgba(var(--vr-base-html-control-shade), 1); --vr-base-html-body-normal-borderColor: rgba(var(--vr-base-html-sharp-shade), 1); --vr-base-html-body-normal-borderColorMid: rgba(var(--vr-base-html-sharp-shade), 0.5); --vr-base-html-body-normal-borderColorDim: rgba(var(--vr-base-html-sharp-shade), 0.25); --vr-base-html-body-normal-borderColorLight: rgba(var(--vr-base-html-sharp-shade), 0.15); --vr-base-html-body-normal-boxShadowColor: rgba(var(--vr-base-html-sharp-shade), 0.15); --vr-base-html-body-dim-color: rgba(var(--vr-base-html-dim-shade), 1); --vr-base-html-body-normal-color: rgba(var(--vr-base-html-text-shade), 1); --vr-base-html-body-title-color: rgba(var(--vr-base-html-title-shade), 1); --vr-base-html-body-caption-color: rgba(var(--vr-base-html-caption-shade), 1); --vr-base-html-link-normal-color: rgba(var(--vr-base-html-link-shade), 1); --vr-base-html-link-hover-color: rgba(var(--vr-base-html-hover-shade), 1); /** base header **/ --vr-base-header-link-normal-backgroundColor: rgba(var(--vr-base-html-normal-shade), 1); --vr-base-header-link-normal-borderColor: rgba(var(--vr-base-html-link-shade), 1); --vr-base-header-link-normal-boxShadowColor: rgba(var(--vr-base-html-link-shade), 0.15); --vr-base-header-link-normal-color: rgba(var(--vr-base-html-link-shade), 1); --vr-base-header-link-hover-backgroundColor: rgba(var(--vr-base-html-link-shade), 1); --vr-base-header-link-hover-borderColor: rgba(var(--vr-base-html-normal-shade), 1); --vr-base-header-link-hover-boxShadowColor: rgba(var(--vr-base-html-normal-shade), 0.15); --vr-base-header-link-hover-color: rgba(var(--vr-base-html-normal-shade), 1); /** base button **/ --vr-base-html-button-normal-backgroundColor: rgba(var(--vr-base-html-normal-shade), 1); --vr-base-html-button-normal-borderColor: rgba(var(--vr-base-html-sharp-shade), 1); --vr-base-html-button-normal-boxShadowColor: rgba(var(--vr-base-html-sharp-shade), 0.2); --vr-base-html-button-normal-color: rgba(var(--vr-base-html-sharp-shade), 1); /* */ --vr-base-html-submit-normal-backgroundColor: rgba(var(--vr-base-html-sharp-shade), 1); --vr-base-html-submit-normal-borderColor: rgba(var(--vr-base-html-sharp-shade), 1); --vr-base-html-submit-normal-boxShadowColor: rgba(var(--vr-base-html-sharp-shade), 0.2); --vr-base-html-submit-normal-color: rgba(var(--vr-base-html-normal-shade), 1); /* */ --vr-base-html-action-normal-backgroundColor: rgba(var(--vr-base-html-light-shade), 1); --vr-base-html-action-normal-borderColor: rgba(var(--vr-base-html-sharp-shade), 1); --vr-base-html-action-normal-boxShadowColor: rgba(var(--vr-base-html-sharp-shade), 0.4); --vr-base-html-action-normal-color: rgba(var(--vr-base-html-sharp-shade), 1); /* base notification */ --vr-base-html-notification-normal-backgroundColor: rgba(var(--vr-base-html-sharp-shade), 1); --vr-base-html-notification-normal-textShadowColor: #00000091; --vr-base-html-notification-normal-color: #ffffff; --vr-base-html-required-normal-backgroundColor: #ff33061f; --vr-base-html-required-normal-color: #ff3306; --vr-base-html-information-normal-backgroundColor: #3bb5901f; --vr-base-html-information-normal-color: #3bb590; --vr-base-html-note-normal-backgroundColor: #1d96ff1f; --vr-base-html-note-normal-color: #1d96ff; --vr-base-html-success-normal-backgroundColor: #009f141f; --vr-base-html-success-normal-color: #009f14; --vr-base-html-alert-normal-backgroundColor: #ff9b201f; --vr-base-html-alert-normal-color: #ff9b20; --vr-base-html-warning-normal-backgroundColor: #ff45001f; --vr-base-html-warning-normal-color: #ff4500; --vr-base-html-error-normal-backgroundColor: #cc00001f; --vr-base-html-error-normal-color: #cc0000; /* contrast theme */ --vr-contrast-html-normal-shade: 88,88,188; --vr-contrast-html-alter-shade: 52,52,118; --vr-contrast-html-proxy-shade: 28,28,64; --vr-contrast-html-high-shade: 37,67,162; --vr-contrast-html-light-shade: 190,190,255; --vr-contrast-html-text-shade: 255,255,255; --vr-contrast-html-title-shade: 255,11,0; --vr-contrast-html-caption-shade: 88,88,188; --vr-contrast-html-link-shade: 190,190,255; --vr-contrast-html-sharp-shade: 255,255,255; --vr-contrast-html-hover-shade: 255,255,255; /* contrast html */ --vr-contrast-html-body-normal-backgroundColor: rgba(var(--vr-contrast-html-normal-shade), 1); --vr-contrast-html-body-alter-backgroundColor: rgba(var(--vr-contrast-html-alter-shade), 1); --vr-contrast-html-body-proxy-backgroundColor: rgba(var(--vr-contrast-html-proxy-shade), 1); --vr-contrast-html-body-high-backgroundColor: rgba(var(--vr-contrast-html-high-shade), 1); --vr-contrast-html-body-light-backgroundColor: rgba(var(--vr-contrast-html-light-shade), 1); --vr-contrast-html-body-normal-borderColor: rgba(var(--vr-contrast-html-sharp-shade), 1); --vr-contrast-html-body-normal-boxShadowColor: rgba(var(--vr-contrast-html-sharp-shade), 0.15); --vr-contrast-html-body-normal-color: rgba(var(--vr-contrast-html-text-shade), 1); --vr-contrast-html-body-title-color: rgba(var(--vr-contrast-html-title-shade), 1); --vr-contrast-html-body-caption-color: rgba(var(--vr-contrast-html-caption-shade), 1); --vr-contrast-html-link-normal-color: rgba(var(--vr-contrast-html-link-shade), 1); --vr-contrast-html-link-hover-color: rgba(var(--vr-contrast-html-hover-shade), 1); /** contrast button **/ --vr-contrast-html-button-normal-backgroundColor: rgba(var(--vr-contrast-html-normal-shade), 1); --vr-contrast-html-button-normal-borderColor: rgba(var(--vr-contrast-html-light-shade), 1); --vr-contrast-html-button-normal-boxShadowColor: rgba(var(--vr-contrast-html-sharp-shade), 0.2); --vr-contrast-html-button-normal-color: rgba(var(--vr-contrast-html-sharp-shade), 1); /* */ --vr-contrast-html-submit-normal-backgroundColor: rgba(var(--vr-contrast-html-sharp-shade), 1); --vr-contrast-html-submit-normal-borderColor: rgba(var(--vr-contrast-html-sharp-shade), 1); --vr-contrast-html-submit-normal-boxShadowColor: rgba(var(--vr-contrast-html-sharp-shade), 0.2); --vr-contrast-html-submit-normal-color: rgba(var(--vr-contrast-html-normal-shade), 1); /* */ --vr-contrast-html-action-normal-backgroundColor: rgba(var(--vr-contrast-html-light-shade), 1); --vr-contrast-html-action-normal-borderColor: rgba(var(--vr-contrast-html-light-shade), 1); --vr-contrast-html-action-normal-boxShadowColor: rgba(var(--vr-contrast-html-sharp-shade), 0.4); --vr-contrast-html-action-normal-color: rgba(var(--vr-contrast-html-normal-shade), 1); } /*----------------------------------------------------------------------------------------------------- SECTIONS 2 (Functions .fn) -----------------------------------------------------------------------------------------------------*/ .fn-toggle, .fn-toggle::before, .fn-toggle::after { cursor: pointer; -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .fn-trigger { display: none !important; } .fn-target { -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .fn-parent { } .fn-child { } .fn-parent:has(.fn-child:active) { /* Styles parent when child is clicked */ } .fn-mobile { } .fn-link { } .fn-notlink { color: inherit; } .fn-active { } .fn-group { } .fn-tip { } .fn-wide { } .fn-100p { } .fn-horizontal { } .fn-vertical { } .fn-bottom { } .fn-top { } .fn-left { } .fn-right { } .fn-more { } .fn-included { } .fn-paid { } .fn-responsive { } .fn-border { } .fn-small { } .fn-required { color: var(--vr-base-html-required-normal-color); } .fn-information { color: var(--vr-base-html-information-normal-color); } .fn-note { color: var(--vr-base-html-note-normal-color); } .fn-success { color: var(--vr-base-html-success-normal-color); } .fn-alert { color: var(--vr-base-html-alert-normal-color); } .fn-warning { color: var(--vr-base-html-warning-normal-color); } .fn-error { color: var(--vr-base-html-error-normal-color); } .fn-brand { } .fn-labelicon { max-height: 46px; padding: 2px; } @media only screen and (max-width: 480px) { .fn-labelicon { max-height: 36px; } } @media only screen and (max-width: 360px) { .fn-labelicon { max-height: 30px; padding: 0; } } .fn-contrast { } .fn-nofa { } .fn-noscroll { } .fn-noprint { } .fn-clearfix { } .fn-clearfix::after { display: block; clear: both; content: ""; } .fn-close { transform: rotate(0deg); -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .fn-close:hover { transform: rotate(270deg); } .fn-transition { -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .fn-html-noscroll { overflow-y: -moz-scrollbars-hidden !important; -ms-overflow-y: hidden !important; overflow-y: hidden !important; } /*----------------------------------------------------------------------------------------------------- SECTIONS 3 (Grid .gi) -----------------------------------------------------------------------------------------------------*/ /* - hi-section ------------------------- width:unset, height: unset, padding:unset, margin:unset, display:block --- one for body -- hi-article ------------------------ width:unset, height: unset, padding:unset, margin:unset, display:block --- one for each objective --- hi-wrap -------------------------- width:set for each screen size, height: unset, padding:0, margin:0, display:block --- one for each article --- gi-grid -------------------------- width:unset, height: 100vh min or unset, padding:0, margin:0, display:flex, fd-col, jc-center, ai-center, ac-center --- one for each article ---- gi-row --------------------------- width:unset, height: unset, padding:as-needed 0, margin:0, display:flex, fd-row, jc-center, ai-flex-start --- ore or multiple for each grid ----- gi-col --------------------------- width:varies, height: unset, padding:1em, margin:0 auto --- ore or multiple for each row */ .gi-grid { display: flex; align-content: center; align-items: normal; flex-direction: column; flex-wrap: nowrap; justify-content: center; } .gi-row { display: flex; align-content: center; align-items: stretch; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .gi-col { margin: 0 auto 0 0; } .gi-col.gi-col-auto { margin: 0 auto; } .gi-col-1 { width: calc(100% * 1 / 12); } .gi-col-2 { width: calc(100% * 2 / 12); } .gi-col-3 { width: calc(100% * 3 / 12); } .gi-col-4 { width: calc(100% * 4 / 12); } .gi-col-5 { width: calc(100% * 5 / 12); } .gi-col-6 { width: calc(100% * 6 / 12); } .gi-col-7 { width: calc(100% * 7 / 12); } .gi-col-8 { width: calc(100% * 8 / 12); } .gi-col-9 { width: calc(100% * 9 / 12); } .gi-col-10 { width: calc(100% * 10 / 12); } .gi-col-11 { width: calc(100% * 11 / 12); } .gi-col-12 { width: calc(100%); } .gi-col-w640 { max-width: 640px; } .gi-col-w640--l { max-width: 640px; margin-right: 0; padding-right: 1em; } .gi-col-w640--r { max-width: 640px; margin-left: 0; padding-left: 1em; } @media only screen and (max-width: 1440px) { .gi-col-3----w1440 { width: calc(100% * 1 / 4); } .gi-col-6----w1440 { width: calc(100% * 2 / 4); } .gi-col-9----w1440 { width: calc(100% * 3 / 4); } .gi-col-10----w1440 { width: calc(100% * 10 / 12); } .gi-col-12----w1440 { width: calc(100%); } } @media only screen and (max-width: 1200px) { .gi-col-3----w1200 { width: calc(100% * 1 / 4); } .gi-col-6----w1200 { width: calc(100% * 2 / 4); } .gi-col-9----w1200 { width: calc(100% * 3 / 4); } .gi-col-10----w1200 { width: calc(100% * 10 / 12); } .gi-col-12----w1200 { width: calc(100%); } } @media only screen and (max-width: 1024px) { .gi-col-3----w1024 { width: calc(100% * 1 / 4); } .gi-col-6----w1024 { width: calc(100% * 2 / 4); } .gi-col-9----w1024 { width: calc(100% * 3 / 4); } .gi-col-10----w1024 { width: calc(100% * 10 / 12); } .gi-col-12----w1024 { width: calc(100%); } .gi-col-12----w1024.gi-col-w640--l { margin-right: auto; padding-right: 0; } .gi-col-12----w1024.gi-col-w640--r { margin-left: auto; padding-left: 0; } } @media only screen and (max-width: 800px) { .gi-row:not(.gi-row----w800) { align-items: flex-start; flex-direction: column; justify-content: flex-start; } .gi-col-1, .gi-col-2, .gi-col-3, .gi-col-4, .gi-col-5, .gi-col-6, .gi-col-7, .gi-col-8, .gi-col-9, .gi-col-10, .gi-col-11, .gi-col-12 { width: 100%; } .gi-col-3----w800 { width: calc(100% * 1 / 4); } .gi-col-6----w800 { width: calc(100% * 2 / 4); } .gi-col-9----w800 { width: calc(100% * 3 / 4); } .gi-col-12----w800 { width: calc(100%); } .gi-col:empty { display: none; } .gi-col-w640--l { margin-right: auto; padding-right: 0; } .gi-col-w640--r { margin-left: auto; padding-left: 0; } } @media only screen and (max-width: 640px) { .gi-row:not(.gi-row----w640) { align-items: flex-start; flex-direction: column; justify-content: flex-start; } .gi-col-1, .gi-col-2, .gi-col-3, .gi-col-4, .gi-col-5, .gi-col-6, .gi-col-7, .gi-col-8, .gi-col-9, .gi-col-10, .gi-col-11, .gi-col-12 { width: 100%; } .gi-col-3----w640 { width: calc(100% * 1 / 4); } .gi-col-6----w640 { width: calc(100% * 2 / 4); } .gi-col-9----w640 { width: calc(100% * 3 / 4); } .gi-col-12----w640 { width: calc(100%); } } /*----------------------------------------------------------------------------------------------------- SECTIONS 4 (Html .hi) -----------------------------------------------------------------------------------------------------*/ /* ------------------------------------------- Html Elements ------------------------------------------- */ html { scroll-behavior: smooth; } body.hi-body { background: var(--vr-base-html-body-normal-backgroundColor); color: var(--vr-base-html-body-normal-color); font-family: var(--vr-theme-html-body-normal-fontFamily); font-size: var(--vr-theme-html-body-normal-fontSize); font-weight: var(--vr-theme-html-body-normal-fontWeight); line-height: var(--vr-theme-html-body-normal-lineHeight); margin: 0; overflow-x: hidden; overflow-y: auto; overflow-wrap: break-word; padding: 0; } a:not(:link) { cursor: unset; color: inherit; } a i, a span { cursor: inherit; color: inherit; } a > i ~ span { padding-left: 7px; } a > i + h1, a > i + h2, a > i + h3, a > i + h4, a > i + h5, a > i + h6 { padding-left: 10px; } a:link, .hi-link { cursor: pointer; color: var(--vr-base-html-link-normal-color); font-weight: 500; } a:link:hover, .hi-link:hover { color: var(--vr-base-html-link-hover-color); } dialog { box-shadow: 0 0 10px 0px var(--vr-base-html-body-normal-boxShadowColor); border-width: 0; border-radius: 7px; display: flex; overflow: hidden; outline: none; padding: 0; } dialog::backdrop { background-color: var(--vr-base-html-body-normal-boxShadowColor); } dialog:focus, dialog:focus-visible, dialog:focus-within { border-width: 0; outline: none; } label[for] { cursor: pointer; } /*select, select::picker(select) { -webkit-appearance: base-select; -moz-appearance: base-select; appearance: base-select; } */ select, select::picker(select) { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { height: 6em; resize: vertical; } input, output, select, textarea { background: var(--vr-base-html-body-control-backgroundColor); background-clip: padding-box; border: 1px solid var(--vr-base-html-body-normal-borderColorDim); border-radius: .375rem; box-shadow: none; color: inherit; display: block; font-family: inherit; font-size: inherit; font-weight: 500; outline: 0; padding: 1em; width: 100%; } input:focus, select:focus, textarea:focus, output { background: var(--vr-base-html-body-normal-backgroundColor); border-color: var(--vr-base-html-body-normal-borderColorMid); -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } input:focus:not([type="range"]), select:focus, textarea:focus { /*box-shadow: 0 0 0 3px rgba(var(--vr-base-html-sharp-shade), 0.35);*/ box-shadow: inset 2px 2px 4px 0px rgba(var(--vr-base-html-sharp-shade), 0.25); } input[type="range"] { padding-left: 0; padding-right: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* file selector */ input[type=file] { cursor: pointer; overflow: hidden; white-space: nowrap; -webkit-user-select: none; } input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button { /*visibility: hidden; width:0;*/ background-image: linear-gradient(to bottom, #ffffff, var(--vr-base-html-action-normal-backgroundColor)); border: 0; border-left: 1px solid var(--vr-base-html-body-normal-borderColorDim); cursor: pointer; position: absolute; top: 0; bottom: 0; right: 0; left: calc(100% - 7em); width: 7em; font-family: var(--vr-theme-html-body-button-fontFamily); -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } input[type=file]::-ms-browse:hover { background-image: linear-gradient(to top, #ffffff, var(--vr-base-html-action-normal-backgroundColor)); } input[type=file]::file-selector-button:hover { background-image: linear-gradient(to top, #ffffff, var(--vr-base-html-action-normal-backgroundColor)); } input[type=file]::-webkit-file-upload-button:hover { background-image: linear-gradient(to top, #ffffff, var(--vr-base-html-action-normal-backgroundColor)); } input[type=file]::-ms-browse:active { background-image: linear-gradient(to bottom, var(--vr-base-html-action-normal-backgroundColor), var(--vr-base-html-submit-normal-backgroundColor)); } input[type=file]::file-selector-button:active { background-image: linear-gradient(to bottom, var(--vr-base-html-action-normal-backgroundColor), var(--vr-base-html-submit-normal-backgroundColor)); } input[type=file]::-webkit-file-upload-button:active { background-image: linear-gradient(to bottom, var(--vr-base-html-action-normal-backgroundColor), var(--vr-base-html-submit-normal-backgroundColor)); } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* 1. Hide the default checkbox button */ input[type="checkbox"] { /* pointer-events: none;*/ appearance: none; background-color: #fff; color: var(--vr-base-html-body-normal-borderColor); cursor: pointer; display: grid; margin: 0; /*padding: 0; */ /* x */ padding: 0 0 0 36px; /* y */ width: 24px; height: 24px; border: 2px solid var(--vr-base-html-body-normal-borderColor); border-radius: 4px; place-content: center; /* outline: 2px solid var(--vr-base-html-body-normal-borderColor); accent-color: var(--vr-base-html-body-normal-borderColor);*/ } /* 2. Create the 'dot' using a pseudo-element */ input[type="checkbox"]::before { content: ""; width: 16px; height: 16px; border-radius: 3px; margin-left: -34px; /* y */ /*transform: scale(0);*/ /* Hidden by default */ /* x */ transition: var(--vr-theme-html-body-normal-transition); box-shadow: inset 0.15em 0.15em 1em var(--vr-base-html-body-normal-borderColorMid), inset -0.15em -0.15em 1em var(--vr-base-html-body-normal-borderColorMid); /* Color of the dot */ } /* 3. Show the dot when the checkbox is checked */ input[type="checkbox"]:checked::before { /*transform: scale(1);*/ /* x */ margin-left: -18px; /* y */ box-shadow: inset 0.15em 0.15em 1em var(--vr-base-html-body-normal-borderColor), inset -0.15em -0.15em 1em var(--vr-base-html-body-normal-borderColor); /* Color of the dot */ } /* 4. Optional focus indicator for accessibility */ input[type="checkbox"]:focus { box-shadow: none; border-color: none; /*outline: max(0px, 2px) solid var(--vr-base-html-body-normal-borderColor);*/ /* x */ /* outline-offset: max(0px, 2px);*/ } /* 1. Hide the default radio button */ input[type="radio"] { /* pointer-events: none;*/ appearance: none; background-color: #fff; color: var(--vr-base-html-body-normal-borderColor); cursor: pointer; display: grid; margin: 0; padding: 0; height: 24px; width: 24px; border: 2px solid var(--vr-base-html-body-normal-borderColor); border-radius: 50%; place-content: center; } /* 2. Create the 'dot' using a pseudo-element */ input[type="radio"]::before { content: ""; width: 16px; height: 16px; border-radius: 50%; transform: scale(0); /* Hidden by default */ /*transition: 300ms transform ease-in-out;*/ transition: var(--vr-theme-html-body-normal-transition); /*box-shadow: inset 1em 1em var(--vr-base-html-body-normal-borderColor);*/ box-shadow: inset 0.15em 0.15em 1em var(--vr-base-html-body-normal-borderColor), inset -0.15em -0.15em 1em var(--vr-base-html-body-normal-borderColor); /* Color of the dot */ } /* 3. Show the dot when the radio is checked */ input[type="radio"]:checked::before { transform: scale(1); } /* 4. Optional focus indicator for accessibility */ input[type="radio"]:focus { box-shadow: none; border-color: none; outline: max(0px, 2px) solid var(--vr-base-html-body-normal-borderColor); outline-offset: max(0px, 1px); } h1, h2, h3, h4, h5, h6 { font-family: var(--vr-theme-html-body-header-fontFamily); font-weight: normal; line-height: normal; color: inherit; } h1 { font-size: 68px; } h2 { font-size: 58px; } h3 { font-size: 48px; } h4 { font-size: 38px; } h5 { font-size: 28px; } h6 { font-size: 24px; } @media only screen and (max-width: 1440px) { h1 { font-size: 63px; } h2 { font-size: 54px; } h3 { font-size: 45px; } h4 { font-size: 36px; } h5 { font-size: 27px; } h6 { font-size: 23px; } } @media only screen and (max-width: 1200px) { h1 { font-size: 58px; } h2 { font-size: 50px; } h3 { font-size: 42px; } h4 { font-size: 34px; } h5 { font-size: 26px; } h6 { font-size: 22px; } } @media only screen and (max-width: 800px) { h1 { font-size: 53px; } h2 { font-size: 46px; } h3 { font-size: 39px; } h4 { font-size: 32px; } h5 { font-size: 25px; } h6 { font-size: 21px; } } @media only screen and (max-width: 640px) { h1 { font-size: 48px; } h2 { font-size: 42px; } h3 { font-size: 36px; } h4 { font-size: 30px; } h5 { font-size: 24px; } h6 { font-size: 20px; } } @media only screen and (max-width: 480px) { h1 { font-size: 43px; } h2 { font-size: 38px; } h3 { font-size: 33px; } h4 { font-size: 28px; } h5 { font-size: 23px; } h6 { font-size: 19px; } } @media only screen and (max-width: 360px) { h1 { font-size: 38px; } h2 { font-size: 34px; } h3 { font-size: 30px; } h4 { font-size: 26px; } h5 { font-size: 22px; } h6 { font-size: 18px; } } /* ------------------------------------------- Controls ------------------------------------------- */ /* ------------------------------------------- Buttons ------------------------------------------- */ .hi-button { border: 0 solid transparent; border-radius: 4px; cursor: pointer; font-family: var(--vr-theme-html-body-button-fontFamily); font-size: 18px; font-weight: 500; margin: 0 6px; padding: 7px 40px; text-align: center; width: auto; -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .hi-button.fn-wide { border-radius: 50px; padding-left: 64px; padding-right: 64px; } .hi-button.fn-100p { width: 100%; text-align: center; } .hi-button.fn-small { font-size: 15px; font-weight: 400; padding: 7px 28px; } .hi-button, .hi-button.hi-reset { background: var(--vr-base-html-button-normal-backgroundColor); box-shadow: 0 0 0 2px var(--vr-base-html-button-normal-backgroundColor),0 0 0 6px var(--vr-base-html-button-normal-boxShadowColor); /*-webkit-box-shadow: 0 0 0 2px var(--vr-base-html-button-normal-backgroundColor),0 0 0 6px var(--vr-base-html-button-normal-boxShadowColor);*/ color: var(--vr-base-html-button-normal-color); } .hi-button.hi-submit, .hi-button.fn-selected { background: var(--vr-base-html-submit-normal-backgroundColor); box-shadow: 0 0 0 2px var(--vr-base-html-submit-normal-backgroundColor), 0 0 0 6px var(--vr-base-html-submit-normal-boxShadowColor); /* -webkit-box-shadow: 0 0 0 2px var(--vr-base-html-submit-normal-backgroundColor), 0 0 0 6px var(--vr-base-html-submit-normal-boxShadowColor);*/ color: var(--vr-base-html-submit-normal-color); } .hi-button.hi-action { background: var(--vr-base-html-action-normal-backgroundColor); box-shadow: 0 0 0 2px var(--vr-base-html-action-normal-backgroundColor), 0 0 0 6px var(--vr-base-html-action-normal-boxShadowColor); /* -webkit-box-shadow: 0 0 0 2px var(--vr-base-html-action-normal-backgroundColor), 0 0 0 6px var(--vr-base-html-action-normal-boxShadowColor);*/ color: var(--vr-base-html-action-normal-color); } .hi-button:hover, .hi-button.hi-reset:hover { box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-base-html-button-normal-boxShadowColor); /* -webkit-box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-base-html-button-normal-boxShadowColor);*/ } .hi-button.hi-submit:hover, .hi-button.fn-selected:hover { box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-base-html-submit-normal-boxShadowColor); /*-webkit-box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-base-html-submit-normal-boxShadowColor);*/ } .hi-button.hi-action:hover { background: unset; box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-base-html-action-normal-boxShadowColor); /* -webkit-box-shadow:0 0 0 2px transparent, 0 0 0 6px var(--vr-base-html-action-normal-boxShadowColor);*/ } .hi-button.fn-contrast, .hi-button.hi-reset.fn-contrast { background: var(--vr-contrast-html-button-normal-backgroundColor); box-shadow: 0 0 0 2px var(--vr-contrast-html-button-normal-backgroundColor), 0 0 0 6px var(--vr-contrast-html-button-normal-boxShadowColor); /* -webkit-box-shadow: 0 0 0 2px var(--vr-contrast-html-button-normal-backgroundColor), 0 0 0 6px var(--vr-contrast-html-button-normal-boxShadowColor);*/ color: var(--vr-contrast-html-button-normal-color); } .hi-button.hi-submit.fn-contrast, .hi-button.fn-selected.fn-contrast { background: var(--vr-contrast-html-submit-normal-backgroundColor); box-shadow: 0 0 0 2px var(--vr-contrast-html-submit-normal-backgroundColor), 0 0 0 6px var(--vr-contrast-html-submit-normal-boxShadowColor); /*-webkit-box-shadow:0 0 0 2px var(--vr-contrast-html-submit-normal-backgroundColor), 0 0 0 6px var(--vr-contrast-html-submit-normal-boxShadowColor);*/ color: var(--vr-contrast-html-submit-normal-color); } .hi-button.hi-action.fn-contrast { background: var(--vr-contrast-html-action-normal-backgroundColor); box-shadow: 0 0 0 2px var(--vr-contrast-html-action-normal-backgroundColor), 0 0 0 6px var(--vr-contrast-html-action-normal-boxShadowColor); /* -webkit-box-shadow: 0 0 0 2px var(--vr-contrast-html-action-normal-backgroundColor), 0 0 0 6px var(--vr-contrast-html-action-normal-boxShadowColor);*/ color: var(--vr-contrast-html-action-normal-color); } .hi-button.fn-contrast:hover, .hi-button.hi-reset.fn-contrast:hover { box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-contrast-html-button-normal-boxShadowColor); /*-webkit-box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-contrast-html-button-normal-boxShadowColor);*/ color: var(--vr-contrast-html-button-normal-color); } .hi-button.hi-submit.fn-contrast:hover, .hi-button.fn-selected.fn-contrast:hover { box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-contrast-html-submit-normal-boxShadowColor); /*-webkit-box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-contrast-html-submit-normal-boxShadowColor);*/ color: var(--vr-contrast-html-submit-normal-color); } .hi-button.hi-action.fn-contrast:hover { box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-contrast-html-action-normal-boxShadowColor); /*-webkit-box-shadow: 0 0 0 2px transparent, 0 0 0 6px var(--vr-contrast-html-action-normal-boxShadowColor);*/ color: var(--vr-contrast-html-action-normal-color); } .hi-buttons { display: flex; align-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } /* .hi-buttons .hi-button { }*/ @media only screen and (max-width: 480px) { .hi-buttons { align-content: center; flex-direction: column-reverse; flex-wrap: nowrap; justify-content: center; } } /* ------------------------------------------- Content ------------------------------------------- */ /* --------------- inner html --------------------- */ /* groups - can be used with any class from section to block */ /*.fn-group, .fn-social, .fn-contact, .fn-row {}*/ /* level 11*/ /*.hi-pack, .hi-i { }*/ /* level 10*/ /*.hi-label, .hi-span, .hi-h { }*/ /* level 09*/ /*.hi-image, .hi-tag, .hi-social, .hi-contact, .hi-item, .hi-subgroup { }*/ /* level 08*/ /*.hi-group, .hi-tags, .hi-socials, .hi-contacts, .hi-list { }*/ /* level 07*/ /*.hi-block, .hi-detail, .hi-breadcrumb { }*/ /* level 06*/ /*.hi-headline, .hi-content, .hi-object, .hi-breadcrumbs, .hi-data { }*/ /* level 05*/ /*.gi-col { }*/ /* level 04*/ /*.hi-container, .hi-box, .hi-form, .hi-canvas, .gi-row { }*/ /* level 03*/ /*.hi-wrap, .hi-envelop, .gi-grid { }*/ /* level 02*/ /*.hi-article, .hi-navigation, .hi-placeholder { }*/ /* level 01*/ /*.hi-section, .hi-header, .hi-footer, .hi-overlay { }*/ /* --- breadcrumbs--- */ .hi-breadcrumbs { display: flex; flex-direction: row; flex-wrap: wrap; padding-top: 2em; } .hi-breadcrumbs > .hi-breadcrumb { } .hi-breadcrumbs > .hi-breadcrumb > .hi-link { font-weight: 600; padding: 0.25em; } .hi-breadcrumbs > .hi-breadcrumb > .hi-link:not(.fn-nofa)::after { color: inherit; content: '\f105'; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.5em; font-family: "Font Awesome 6 Free"; font-style: normal; font-variant: normal; position: relative; text-rendering: auto; -webkit-font-smoothing: antialiased; } .hi-breadcrumbs > .hi-breadcrumb > .hi-label { } @media only screen and (max-width: 480px) { .hi-breadcrumbs > .hi-breadcrumb > .hi-link { padding: 0.1em; } .hi-breadcrumbs > .hi-breadcrumb > .hi-link:not(.fn-nofa)::after { padding: 0 0.2em; } } /* --- headline--- */ .hi-headline { text-align: center; } /* .hi-headline > .hi-title { } .hi-headline > .hi-title > .hi-h { } .hi-headline > .hi-subtitle { } .hi-headline > .hi-subtitle > .hi-h { } .hi-headline > .hi-caption { } .hi-headline > .hi-caption > .hi-h { }*/ /* --- content--- */ .hi-content { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 1em; -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .hi-block { display: flex; align-items: stretch; flex-direction: column; flex-wrap: nowrap; /*justify-content: flex-start;*/ height: 100%; overflow: hidden; -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); width: 100%; } .hi-content .hi-block .hi-title { /* width: 100%;*/ } .hi-content .hi-block .hi-list { display: flex; flex-direction: column; } .hi-content .hi-block .hi-list.fn-row { flex-direction: row; } .hi-content .hi-block .hi-list .hi-item { } .hi-content .hi-block .hi-list .hi-item.fn-vertical { flex-direction: column; } .hi-content .hi-block .hi-list .hi-item.fn-center { justify-content: center; } .hi-content .hi-block .hi-list .hi-item.fn-right { justify-content: flex-end; } .hi-content .hi-block .hi-list > .hi-item:before { color: inherit; content: none; display: inline-flex; align-items: center; justify-content: center; margin: 6px 12px 6px 0; /*lineHeight:28 = 6px + 6px + 16px height*/ font-family: "Font Awesome 6 Free"; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 900; height: 16px; position: relative; text-rendering: auto; -webkit-font-smoothing: antialiased; width: 16px; min-width: 16px; } .hi-content .hi-block .hi-list .hi-item .hi-a { display: flex; flex-direction: row; align-items: flex-start; } .hi-content .hi-block .hi-list .hi-item .hi-a::before { color: inherit; content: '\f105'; display: inline-flex; align-items: center; justify-content: center; padding-right: 1em; font-family: "Font Awesome 6 Free"; font-style: normal; font-variant: normal; font-weight: 900; position: relative; text-rendering: auto; -webkit-font-smoothing: antialiased; } .hi-content .hi-block .hi-list .hi-item > .hi-i { line-height: inherit; /*padding-right: 12px;*/ } /*.hi-content .hi-block > .hi-list > .hi-item:not(:first-of-type) {padding-top: 2em;}*/ /*.hi-content .hi-block > .hi-list > .hi-item {}*/ /*.hi-content .hi-block > .hi-list > .hi-item .hi-list {}*/ /*.hi-content .hi-block > .hi-list > .hi-item .hi-list > .hi-item {}*/ .hi-content .hi-block > .hi-list > .hi-item > .hi-list > .hi-item > .hi-a::before { content: '\f0da'; font-size: 10px; } .hi-content .hi-block > .hi-list > .hi-item > .hi-list > .hi-item > .hi-list > .hi-item > .hi-a::before { content: '\f068'; font-size: 10px; } /* fn-group - applicable in all fn-group */ .hi-content.fn-group .hi-block { /*border: 1px solid var(--vr-base-html-body-normal-boxShadowColor);*/ background: var(--vr-base-html-body-normal-backgroundColor); -webkit-box-shadow: 0px 1px 2px 0px var(--vr-base-html-body-normal-boxShadowColor); box-shadow: 0px 1px 2px 0px var(--vr-base-html-body-normal-boxShadowColor); border-radius: 0.5rem; color: var(--vr-base-html-body-normal-color); text-align: left; } /*.hi-content.fn-group .hi-block > .hi-group { }*/ .hi-content.fn-group .hi-block > .hi-tags, .hi-content.fn-group .hi-block > .hi-group > .hi-tags { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } .hi-content.fn-group .hi-block > .hi-tags:empty, .hi-content.fn-group .hi-block > .hi-group > .hi-tags:empty { display: none; } .hi-content.fn-group .hi-block > .hi-tags > .hi-tag, .hi-content.fn-group .hi-block > .hi-group > .hi-tags > .hi-tag { background: #f9f9f9; border-radius: 40px; border: 1px solid #ebebeb; cursor: pointer; margin: 0.5em; padding: 0.1em 1em; } .hi-content.fn-group .hi-block > .hi-socials, .hi-content.fn-group .hi-block > .hi-group > .hi-socials { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } .hi-content.fn-group .hi-block > .hi-socials:empty, .hi-content.fn-group .hi-block > .hi-group > .hi-socials:empty { display: none; } .hi-content.fn-group .hi-block > .hi-socials > .hi-social, .hi-content.fn-group .hi-block > .hi-group > .hi-socials > .hi-social { margin: 0.5em; padding: 0.1em 1em; } .hi-content.fn-group .hi-block > .hi-socials > .hi-social > .hi-i + .hi-span, .hi-content.fn-group .hi-block > .hi-group > .hi-socials > .hi-social > .hi-i + .hi-span { padding-left: 12px; } /* fn-group-01 - Icon or Image in the center, flex direction = columns, - content vertically placed */ .hi-content.fn-group.fn-group-01 .hi-block { padding: 2em; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-icon { background-color: rgba(242, 246, 247, 1); border: 1px solid rgba(232, 237, 239, 1); border-radius: 50%; cursor: pointer; display: block; font-size: 36px; height: 120px; line-height: 120px; margin: 0 auto; overflow: hidden; transition: all 0.5s; text-align: center; width: 120px; } /*.hi-content.fn-group.fn-group-01 .hi-block > .hi-icon > .hi-i {}*/ .hi-content.fn-group.fn-group-01 .hi-block > .hi-image { background: var(--vr-base-html-body-normal-backgroundColor); border-radius: 4px; -webkit-box-shadow: 0px 1px 2px 0px var(--vr-base-html-body-normal-boxShadowColor); box-shadow: 0px 1px 2px 0px var(--vr-base-html-body-normal-boxShadowColor); /* box-shadow: 0.5px 1px 0 rgba(0, 0, 0, 0.05), 0 0 1px 0 rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0.5px 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0.5px 1px 0 0 rgba(0,0,0,0.05), 0 0 1px 0 rgba(0,0,0,0.1); -o-box-shadow: 0.5px 1px 0 0 rgba(0,0,0,0.05), 0 0 1px 0 rgba(0,0,0,0.1);*/ cursor: pointer; display: flex; overflow: hidden; padding: 1em; transition: all 0.5s; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-image:hover { /*-webkit-box-shadow: 0px 10px 15px -10px var(--vr-base-html-body-normal-boxShadowColor); box-shadow: 0px 10px 15px -10px var(--vr-base-html-body-normal-boxShadowColor);*/ -webkit-box-shadow: 0px 10px 15px -10px #777777; box-shadow: 0px 10px 15px -10px #777777; } /*.hi-content.fn-group.fn-group-01 .hi-block > .hi-image > img {}*/ .hi-content.fn-group.fn-group-01 .hi-block > .hi-subject { font-size: 18px; text-align: center; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-subject:not(:first-child) { margin-top: 2em; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-list:not(:first-child) { margin-top: 2em; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-list > .hi-item:not(:first-of-type) { margin-top: 1em; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-list.fn-content > .hi-item:not(:first-of-type) { margin-top: 2em; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-list > .hi-item .hi-list { padding-left: 1.5em; } .hi-content.fn-group.fn-group-01 .hi-block > .hi-list > .hi-item .hi-list > .hi-item { padding-top: 0.5em; } /* fn-group-02 - Icon or Image on the left, flex direction = row, - content horizontally placed */ .hi-content.fn-group.fn-group-02 .hi-block { flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .hi-content.fn-group.fn-group-02 .hi-block > .hi-image, .hi-content.fn-group.fn-group-02 .hi-block > .hi-link > .hi-image { min-width: 240px; text-align: left; } .hi-content.fn-group.fn-group-02 .hi-block > .hi-image > .hi-h, .hi-content.fn-group.fn-group-02 .hi-block > .hi-link > .hi-image > .hi-h { padding: 0 1em; } .hi-content.fn-group.fn-group-02 .hi-block > .hi-list { padding: 0 1em; } .hi-content.fn-group.fn-group-02 .hi-block > .hi-list > .hi-item { padding: 1em; } .hi-content.fn-group.fn-group-02 .hi-block > .hi-list > .hi-item > .hi-i { padding-right: 1em; } @media only screen and (max-width: 800px) { .hi-content.fn-group.fn-group-02 .hi-block { flex-direction: column; align-items: center; } } /* fn-group-03 - Primarily for Item List, Image in the center, flex direction = columns, - content vertically placed over the image */ .hi-content.fn-group.fn-group-03 .hi-block { /*padding: 2em;*/ text-align: center; } .hi-content.fn-group.fn-group-03 .hi-block > .hi-image { border-radius: 4px; cursor: pointer; display: flex; align-items: center; flex-wrap: nowrap; justify-content: center; overflow: hidden; } .hi-content.fn-group.fn-group-03 .hi-block > .hi-image > img { /*object-fit: cover;*/ } .hi-content.fn-group.fn-group-03 .hi-block > .hi-image:hover > img { transform: scale(1.2); } .hi-content.fn-group.fn-group-03 .hi-block > .hi-title { cursor: pointer; } .hi-content.fn-group.fn-group-03 .hi-block > .hi-subtitle { /* font-size: 18px;*/ min-height: calc(2 * var(--vr-theme-html-body-normal-lineHeight)); } .hi-content.fn-group.fn-group-03 .hi-block > .hi-caption { } .hi-content.fn-group.fn-group-03 .hi-block > .hi-subject { font-size: 24px; } .hi-content.fn-group.fn-group-03 .hi-block > .hi-text { } .hi-content.fn-group.fn-group-03 .hi-block > .hi-link { font-size: 24px; font-weight: 400; } .hi-content.fn-group.fn-group-03 .hi-block > *:not(:first-child) { margin: 0.5em; } .hi-content.fn-group.fn-group-03 .hi-block > *:last-child { margin: 1em; } /* fn-group-04 - Primarily for Item List arranged with 100% width, Image on left, flex direction = row, - content horizontally placed next to image */ .hi-content.fn-group.fn-group-04 .hi-block { padding: 0.5em; flex-direction: row; justify-content: space-between; } .hi-content.fn-group.fn-group-04 .hi-block > .hi-image { cursor: pointer; display: flex; align-items: flex-start; flex-wrap: nowrap; justify-content: center; overflow: hidden; min-width: 7em; max-width: 7em; padding: 0.5em; } .hi-content.fn-group.fn-group-04 .hi-block .hi-image > img { object-fit: cover; border-radius: 4px; } .hi-content.fn-group.fn-group-04 .hi-block > .hi-group { text-align: left; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .hi-content.fn-group.fn-group-04 .hi-block > .hi-group > .hi-vgroup { display: flex; flex-direction: column; } .hi-content.fn-group.fn-group-04 .hi-block > .hi-group .hi-title { text-align: left; } .hi-content.fn-group.fn-group-04 .hi-block > .hi-group > .hi-hgroup { display: flex; flex-direction: row; } .hi-content.fn-group.fn-group-04 .hi-detail { padding: 1em; display: flex; flex-direction: column; align-items: flex-end; } .hi-content.fn-group.fn-group-04 .hi-detail > *:not(:first-child) { margin-top: 1em; } @media only screen and (max-width: 800px) { .hi-content.fn-group.fn-group-04 .hi-block > .hi-image { min-width: 5em; max-width: 5em; } /*.hi-content.fn-group.fn-group-04 .hi-block > .hi-group { flex-direction: column; }*/ .hi-content.fn-group.fn-group-04 .hi-block > .hi-group > .hi-hgroup { flex-direction: column; } .hi-content.fn-group.fn-group-04 .hi-detail { align-items: center; } .hi-content.fn-group.fn-group-04 .hi-detail > * { text-align: center; } } @media only screen and (max-width: 480px) { .hi-content.fn-group.fn-group-04 .hi-block > .hi-group { flex-direction: column; } } /* all fn-group above */ .hi-form { } .hi-form.fn-border { border-top: 1px dashed var(--vr-base-html-body-normal-boxShadowColor); } .hi-form.hi-container { } .hi-form .hi-headline { padding-left: 1em; padding-right: 1em; text-align: left; } /* .hi-form .gi-col:not(.gi-col-12) > .hi-headline { padding-top: 1em; } .hi-form .gi-col:not(:first-of-type) > .hi-headline { padding-top: 2em; } .hi-form .hi-headline:not(:first-of-type) { padding-top: 2em; }*/ /* .hi-form .hi-headline > .hi-title { } .hi-form .hi-headline > .hi-title > .hi-h { } .hi-form .hi-headline > .hi-caption { } .hi-form .hi-headline > .hi-caption > .hi-h { }*/ .hi-form .hi-object { padding: 1em; } .hi-form.fn-narrow { padding: 0.5em; } .hi-form .hi-object.fn-narrow { padding: 0.5em; } /* .hi-form.fn-narrow .hi-object.fn-long { padding-top: 1em; }*/ /* .hi-form.fn-narrow .hi-object { padding-bottom: 0; }*/ /*.hi-form.fn-narrow .hi-object.fn-long, .hi-form.fn-narrow .gi-col:last-of-type .hi-object { padding-bottom: 1em; }*/ .hi-form .hi-object .hi-control { } .hi-form .hi-object .hi-control > .hi-label, .hi-form .hi-object .hi-control > .fn-required { font-family: var(--vr-theme-html-body-header-fontFamily); font-weight: 400; pointer-events: none; position: absolute; top: 1em; -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .hi-form .hi-object .hi-control > .hi-label { color: rgba(var(--vr-base-html-caption-shade), 0.85); left: 1em; } .hi-form .hi-object .hi-control > .fn-required { right: 1em; top: 1.25em; } .hi-form .hi-object .hi-control > input[type=file] ~ .fn-required { right: 11em; } .hi-form .hi-object .hi-control > .hi-i { color: rgba(var(--vr-base-html-caption-shade), 0.85); pointer-events: none; position: absolute; right: 1em; top: 2em; font-size: 13px; -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .hi-form .hi-object .hi-control > .fn-required + .hi-i { top: 3.25em; } /* .hi-form .hi-object .hi-control > .hi-tag { } .hi-form .hi-object .hi-control > .hi-radio { } .hi-form .hi-object .hi-control > .hi-checkbox { } .hi-form .hi-object .hi-control > .hi-range { } */ .hi-form .hi-object .hi-control > .hi-input { padding: 2em 1em 0.5em 2em; } .hi-form.fn-bright .hi-object .hi-control > .hi-input { background-color: var(--vr-base-html-body-normal-backgroundColor); } .hi-form .hi-object .hi-control > .hi-input:user-invalid { box-shadow: 0 0 0 1px var(--vr-base-html-error-normal-color); } .hi-form .hi-object .hi-control > .hi-input:focus ~ .hi-label, .hi-form .hi-object .hi-control > .hi-input:not(:placeholder-shown) ~ .hi-label { top: 0; font-size: 13px; } .hi-form .hi-object .hi-control > .hi-input:focus ~ .fn-required, .hi-form .hi-object .hi-control > .hi-input:not(:placeholder-shown) ~ .fn-required { top: 0; } .hi-form .hi-object .hi-control > .hi-input:focus ~ .hi-i, .hi-form .hi-object .hi-control > .hi-input:not(:placeholder-shown) ~ .hi-i { top: 1em; } .hi-form .hi-object .hi-control > .hi-input:focus ~ .fn-required + .hi-i, .hi-form .hi-object .hi-control > .hi-input:not(:placeholder-shown) ~ .fn-required + .hi-i { top: 2.75em; } .hi-form .hi-data { padding: 0.25em 1em; } .hi-form .fn-border { border-top: 1px dashed var(--vr-base-html-body-normal-boxShadowColor); } .hi-form .hi-data.fn-border { padding: 1em; } .hi-form .hi-data .hi-control { } .hi-form .hi-data .hi-control .hi-label { opacity: 0.7; } .hi-form .hi-data .hi-control .hi-label > .hi-i { } .hi-form .hi-data .hi-control .hi-value { /* color: var(--vr-base-html-link-normal-color);*/ /*font-family: var(--vr-theme-html-body-header-fontFamily);*/ font-weight: 500; } .hi-form .hi-data .hi-control .hi-value:not(.ui-d-block) { margin-left: 12px; } .hi-form .hi-buttons .hi-button { margin: 1em; } /*@media only screen and (max-width: 800px) { .hi-form .gi-col .hi-object { padding-top: 0.5em; padding-bottom: 0.5em; } }*/ /* --------------- outer html --------------------- */ .hi-wrap { width: 82%; margin: 0 auto; } @media only screen and (max-width: 1440px) { .hi-wrap { width: 85%; } } @media only screen and (max-width: 1200px) { .hi-wrap { width: 88%; } } @media only screen and (max-width: 800px) { .hi-wrap { width: 90%; } } @media only screen and (max-width: 640px) { .hi-wrap { width: 92%; } } @media only screen and (max-width: 480px) { .hi-wrap { width: 95%; } } @media only screen and (max-width: 360px) { .hi-wrap { width: 98%; } } /*.hi-wrap .hi-container { } .hi-article .hi-wrap { } .hi-article .hi-wrap .hi-container { }*/ .hi-section .hi-article { width: 100%; } .hi-section .hi-article > .hi-background { background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } /* .hi-section .hi-article .hi-wrap { } .hi-section .hi-article .hi-wrap .hi-container { }*/ /* ------------------------------------- Header and Footer ------------------------------------ */ /* level 01*/ .hi-header { -webkit-box-shadow: 0 5px 30px 0 var(--vr-base-header-link-normal-boxShadowColor); box-shadow: 0 5px 30px 0 var(--vr-base-header-link-normal-boxShadowColor); position: sticky; top: 0; z-index: 10000; } /* level 02*/ .hi-header .hi-navigation { background: var(--vr-base-header-link-normal-backgroundColor); color: var(--vr-base-header-link-normal-color); display: flex; align-items: center; -webkit-align-items: center; flex-direction: row; height: var(--vr-theme-header-navigation-normal-height); -webkit-tap-highlight-color: transparent; } /* level 01*/ .hi-footer { } /* level 02*/ .hi-footer .hi-navigation { background: var(--vr-contrast-html-body-alter-backgroundColor); color: var(--vr-contrast-html-body-normal-color); -webkit-tap-highlight-color: transparent; } .hi-footer .hi-navigation.hi-reserved { background: var(--vr-contrast-html-body-proxy-backgroundColor); color: var(--vr-contrast-html-body-normal-color); } /* level 03*/ .hi-header .hi-navigation .hi-wrap { } /* level 04*/ .hi-header .hi-navigation .hi-wrap .hi-box { } /* level 05*/ .hi-header .hi-navigation .hi-wrap .hi-box .hi-nav { display: flex; } /* level 03*/ .hi-footer .hi-navigation .hi-wrap { } /* level 04*/ .hi-footer .hi-navigation .hi-wrap .hi-box { } /* level 05*/ .hi-footer .hi-navigation .hi-wrap .hi-box .hi-nav { padding: 4em 1em; } .hi-footer .hi-navigation.hi-reserved .hi-wrap .hi-box { } .hi-footer .hi-navigation.hi-reserved .hi-wrap .hi-box .hi-nav { padding: 1em; } /* .hi-navigation .hi-nav.fn-responsive {}*/ /* level 06*/ .hi-navigation .hi-nav .hi-menu { /*z-index: 10001;*/ } .hi-header .hi-navigation .hi-nav .hi-menu:not(:first-of-type) { margin-left: 1em; } /*.hi-navigation .hi-nav .hi-menu.fn-cart { } .hi-navigation .hi-nav .hi-menu ul { }*/ .hi-navigation .hi-nav .hi-menu > ul { display: flex; align-content: center; align-items: stretch; flex-wrap: nowrap; } .hi-navigation .hi-nav .hi-menu > ul.ui-fai-center { align-items: center; } .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul { flex-direction: row; justify-content: space-evenly; } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul { flex-direction: column; justify-content: flex-start; } .hi-navigation .hi-nav .hi-menu ul li { } .hi-navigation .hi-nav .hi-menu ul li .hi-link { display: flex; align-content: center; align-items: center; flex-direction: row; flex-wrap: nowrap; justify-content: left; font-family: var(--vr-theme-html-body-link-fontFamily); font-weight: 400; line-height: var(--vr-theme-html-body-normal-lineHeight); -webkit-transition: var(--vr-theme-html-body-normal-transition); -moz-transition: var(--vr-theme-html-body-normal-transition); -o-transition: var(--vr-theme-html-body-normal-transition); transition: var(--vr-theme-html-body-normal-transition); } .hi-header .hi-navigation .hi-nav .hi-menu ul li .hi-link:not(.fn-notlink) { color: var(--vr-base-header-link-normal-color); } .hi-footer .hi-navigation .hi-nav .hi-menu ul li .hi-link:not(.fn-notlink) { color: var(--vr-contrast-html-link-normal-color); } .hi-navigation .hi-nav .hi-menu ul li .hi-link.fn-notlink { color: inherit; } .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link { } .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li > .hi-link { padding: var(--vr-theme-header-link-normal-padding) 10px; } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link { padding: 10px var(--vr-theme-header-link-normal-padding); } .hi-header .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link { } .hi-footer .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link { padding: 5px var(--vr-theme-header-link-normal-padding); } .hi-header .hi-navigation .hi-nav .hi-menu ul li:hover > .hi-link:not(.fn-notlink), .hi-header .hi-navigation .hi-nav .hi-menu ul li:hover > .hi-link:not(.fn-notlink) > label { background: var(--vr-base-header-link-hover-backgroundColor); color: var(--vr-base-header-link-hover-color); } .hi-footer .hi-navigation .hi-nav .hi-menu ul li:hover > .hi-link:not(.fn-notlink), .hi-footer .hi-navigation .hi-nav .hi-menu ul li:hover > .hi-link:not(.fn-notlink) > label { color: var(--vr-contrast-html-link-hover-color); } .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more { } .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more::before, .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more::after { border-style: solid; border-width: 0 1px 1px 0; display: block; height: 7px; margin-left: 7px; margin-right: 5px; margin-top: 0px; width: 7px; } /*.hi-header .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more::before, .hi-header .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more::after { border-color: transparent inherit inherit transparent; } .hi-footer .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more::before, .hi-footer .hi-navigation .hi-nav .hi-menu > ul > li > .hi-link.fn-more::after { border-color: transparent inherit inherit transparent; }*/ .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li > .hi-link.fn-more::after { content: ""; margin-top: -5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-more::after { content: ""; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); -o-transform: rotate(315deg); transform: rotate(315deg); } .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left > ul > li > .hi-link.fn-more::after, .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-left.fn-more::after { content: none; } .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left > ul > li > .hi-link.fn-more::before, .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-left.fn-more::before { content: ""; margin-left: -12px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } /*.hi-header .hi-navigation .hi-nav .hi-menu > ul > li:hover > .hi-link.fn-more::before, .hi-header .hi-navigation .hi-nav .hi-menu > ul > li:hover > .hi-link.fn-more::after { border-color: transparent inherit inherit transparent; } .hi-footer .hi-navigation .hi-nav .hi-menu > ul > li:hover > .hi-link.fn-more::before, .hi-footer .hi-navigation .hi-nav .hi-menu > ul > li:hover > .hi-link.fn-more::after { border-color: transparent inherit inherit transparent; }*/ .hi-navigation .hi-nav .hi-menu ul li .hi-link.hi-title { font-size: 18px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; } .hi-footer .hi-navigation .hi-nav .hi-menu ul li .hi-title { /*color: var(--vr-contrast-theme-normal-color);*/ color: inherit; } .hi-header .hi-navigation .hi-nav .hi-menu ul li .hi-link.hi-title { } .hi-footer .hi-navigation .hi-nav .hi-menu ul li .hi-link.hi-title { margin-bottom: 1em; } .hi-navigation .hi-nav .hi-menu ul li .hi-link.hi-title .hi-h { color: inherit; font-size: inherit; font-weight: inherit; } .hi-navigation .hi-nav .hi-menu ul li .hi-link .hi-i { line-height: inherit; } /*.hi-navigation .hi-nav .hi-menu ul li .hi-link .hi-span { }*/ .hi-navigation .hi-nav .hi-menu.fn-cart > ul > li > .hi-link .hi-span { background-color: var(--vr-base-html-body-title-color); border-radius: 20px; color: var(--vr-base-html-body-normal-backgroundColor); font-size: 13px; font-weight: 500; line-height: 20px; min-width: 20px; padding: 0 2px; position: absolute; bottom: 12px; left: 20px; text-align: center; display: none; } /* -- slide - responsive -- */ .hi-navigation .hi-nav.fn-responsive .hi-menu.fn-toggle { display: none; /* z-index: 10002;*/ } /* .hi-navigation .hi-nav .hi-menu.fn-toggle > ul > li > .hi-link label.fn-toggle { cursor: inherit; }*/ .hi-navigation .hi-nav .hi-menu.fn-toggle > ul > li label.fn-toggle > .hi-i { font-size: 25px; } .hi-navigation .hi-nav .hi-menu > ul > li > ul { background: var(--vr-base-header-link-normal-backgroundColor); border: none; border-radius: 7px; box-shadow: 0px 0px 50px 0px var(--vr-base-header-link-normal-boxShadowColor); -webkit-box-shadow: 0px 0px 50px 0px var(--vr-base-header-link-normal-boxShadowColor); display: none; margin: 0; min-width: 150px; padding: 0px; position: absolute; white-space: nowrap; z-index: 10000; } /*.hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li > ul { right: auto; }*/ .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li:last-of-type > ul, .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-left > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li > .hi-link.fn-left + ul { right: 0; } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > ul { left: 100%; top: -12px; } .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-left + ul { left: auto; right: 100%; } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li:last-of-type > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-bottom > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-bottom + ul { top: auto; bottom: -12px; } .hi-navigation .hi-nav .hi-menu > ul > li > ul::before { background: var(--vr-base-header-link-normal-backgroundColor); content: ""; height: 20px; position: absolute; width: 20px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li > ul::before { left: 25px; top: -10px; } .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li:last-of-type > ul::before, .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-left > ul > li > ul::before, .hi-navigation .hi-nav .hi-menu.fn-horizontal > ul > li > .hi-link.fn-left + ul::before { left: auto; right: 25px; } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > ul::before { left: -10px; top: 25px; } .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left > ul > li > ul::before, .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-left + ul::before { left: auto; right: -10px; } .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li:last-of-type > ul::before, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-bottom > ul > li > ul::before, .hi-navigation .hi-nav .hi-menu.fn-vertical > ul > li > .hi-link.fn-bottom + ul::before { top: auto; bottom: 25px; } .hi-navigation .hi-nav .hi-menu > ul > li:hover > ul { display: block; } /*.hi-navigation .hi-nav .hi-menu > ul > li > ul > li { }*/ .hi-navigation .hi-nav .hi-menu > ul > li > ul > li > .hi-link { padding: 10px 36px; } .hi-navigation .hi-nav .hi-menu > ul > li > ul > li:first-of-type > .hi-link { border-top-left-radius: 7px; border-top-right-radius: 7px; } /*.hi-navigation .hi-nav .hi-menu > ul > li > ul > li:not(:last-of-type) > .hi-link { }*/ .hi-header .hi-navigation .hi-nav .hi-menu > ul > li > ul > li:not(:last-of-type) > .hi-link { border-bottom-color: var(--vr-base-header-link-normal-boxShadowColor); border-bottom-style: solid; border-bottom-width: 1px; } /*.hi-footer.hi-navigation .hi-nav .hi-menu > ul > li > ul > li:not(:last-of-type) > .hi-link { border-bottom-color: var(--vr-contrast-nav-normal-boxShadowColor); border-bottom-style: solid; border-bottom-width: 1px; }*/ .hi-navigation .hi-nav .hi-menu > ul > li > ul > li:last-of-type > .hi-link { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } /* level 06*/ .hi-navigation .hi-nav .hi-company { } .hi-navigation .hi-nav .hi-company .hi-logo { display: block; height: 46px; } .hi-navigation .hi-nav .hi-company .hi-logo > .hi-image { max-height: 100%; } .hi-navigation .hi-nav .hi-menu.hi-company ul li .hi-link.hi-logo { padding: 0; margin: 0; } .hi-navigation .hi-nav .hi-menu.hi-company ul li .hi-link.hi-logo:hover { background: none; } .hi-footer .hi-navigation .hi-nav .hi-menu.hi-company ul li .hi-link.hi-logo { padding-left: 16px; padding-right: 16px; } @media only screen and (max-width: 800px) { .hi-header .hi-navigation .hi-wrap .hi-box { flex-direction: row; } .hi-footer .hi-navigation .hi-wrap .hi-box { } .hi-footer .hi-navigation .hi-wrap .hi-box .hi-nav:not(:last-of-type) { padding-bottom: 0; } .hi-navigation .hi-nav.fn-responsive .hi-menu.fn-toggle { display: block; } .hi-navigation .hi-nav.fn-responsive .hi-menu.fn-target { background: var(--vr-base-header-link-normal-boxShadowColor); overflow: hidden; overflow-y: auto; position: fixed; bottom: 0; left: 0; right: 0; top: var(--vr-theme-header-navigation-normal-height); } .hi-navigation .hi-nav .hi-menu.fn-target > ul { background: var(--vr-base-header-link-normal-backgroundColor); } .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-target > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul { display: flex; align-content: flex-start; align-items: stretch; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; overflow: hidden; min-height: calc(100vh - var(--vr-theme-header-navigation-normal-height)); max-width: 280px; } .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-target > ul > li > .hi-link, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link { padding: 10px 16px; } .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left.fn-target > ul > li > .hi-link.fn-more::before, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link.fn-left.fn-more::before { content: none; } .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link.fn-more::after, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left.fn-target > ul > li > .hi-link.fn-more::after, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link.fn-left.fn-more::after { content: ""; margin-left: 7px; margin-top: -5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .hi-navigation .hi-nav .hi-menu.fn-target > ul > li > ul { background: transparent; box-shadow: none; } .hi-navigation .hi-nav .hi-menu.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-target > ul > li > .hi-link + ul, .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-target > ul > li:last-of-type > ul, .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-left.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-horizontal.fn-target > ul > li > .hi-link.fn-left + ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li:last-of-type > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link.fn-left + ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-bottom.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link.fn-bottom + ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-left.fn-bottom.fn-target > ul > li > ul, .hi-navigation .hi-nav .hi-menu.fn-vertical.fn-target > ul > li > .hi-link.fn-left.fn-bottom + ul { display: block; position: relative; bottom: auto; left: auto; right: auto; top: auto; } .hi-navigation .hi-nav .hi-menu.fn-target > ul > li > ul::before { content: none; } .hi-navigation .hi-nav .hi-menu.fn-target > ul > li > ul > li > .hi-link { border-radius: 0; font-size: small; margin-left: 24px; padding: 4px 10px; } .hi-navigation .hi-nav.fn-responsive .fn-trigger ~ .hi-menu.fn-target { display: none; } .hi-navigation .hi-nav.fn-responsive .fn-trigger:checked ~ .hi-menu.fn-target { display: block; } /* .hi-navigation .hi-nav.fn-responsive .fn-trigger ~ .hi-menu.fn-horizontal.fn-target > ul, .hi-navigation .hi-nav.fn-responsive .fn-trigger ~ .hi-menu.fn-vertical.fn-target > ul { max-width: 0; } .hi-navigation .hi-nav.fn-responsive .fn-trigger:checked ~ .hi-menu.fn-horizontal.fn-target > ul, .hi-navigation .hi-nav.fn-responsive .fn-trigger:checked ~ .hi-menu.fn-vertical.fn-target > ul { max-width: 280px; } */ } @media only screen and (max-width: 640px) { .hi-header .hi-navigation .hi-wrap .hi-box { flex-direction: row; } } /*----------------------------------------------------------------------------------------------------- SECTIONS A-5 (Positioning, Combo .ci) -----------------------------------------------------------------------------------------------------*/ /*------------------------------------ Input Select ------------------------------------*/ .ci-inputselect-object { /*padding: 3em;*/ } .ci-inputselect-object > .ci-inputselect-control { position: relative; display: flex; align-items: center; } .ci-inputselect-object > .ci-inputselect-control > input { } /*.ci-inputselect-object > .ci-inputselect-control > input.fc-matched { background-color: rgba(0,255, 0, 0.05); } */ .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-clear { background: none; border: none; color: var(--vr-base-html-body-normal-color); cursor: pointer; display: none; /* Hidden by default */ font-size: 24px; position: absolute; right: 12px; top: 1em; } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-clear:hover { color: var(--vr-base-html-body-title-color); } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list { outline: none; background-color: var(--vr-base-html-body-control-backgroundColor); background-clip: padding-box; /* border-radius: 0 0 .375rem .375rem;*/ border-radius: 0; border: 1px solid var(--vr-base-html-body-normal-borderColorMid); border-top: none; display: flex; align-items: center; justify-content: flex-start; position: absolute; top: 100%; left: 0; right: 0; max-height: 178px; overflow-y: auto; margin: 0; padding: 0; list-style: none; z-index: 1000; display: none; } .ci-inputselect-object > .ci-inputselect-control > input:has(~ .ci-inputselect-list[style*="display: block"]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li { cursor: pointer; padding: 5px 1em; line-height: 25px; font-size: 14px; font-weight: 500; display: flex; align-items: center; } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li:not(:last-child) { border-bottom: 1px dotted var(--vr-base-html-body-normal-borderColorDim); } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li.fc-unmatched { color: var(--vr-base-html-body-dim-color); } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li.fc-hovered { background-color: var(--vr-base-html-warning-normal-backgroundColor); } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li.fc-matched { background-color: var(--vr-base-html-alert-normal-backgroundColor); } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li.fc-selected { background-color: var(--vr-base-html-success-normal-backgroundColor); font-weight: 600; } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li > img { padding-right: 12px; max-height: 36px; width: 36px; object-fit: cover; } .ci-inputselect-object > .ci-inputselect-control > .ci-inputselect-list > li.fc-unmatched > img { opacity: 0.25; } /*------------------------------------ Input File input[type=file] CSS is also defined up, and can be used as it is without using ci-inputfile-object css ------------------------------------*/ .ci-inputfile-object { } .ci-inputfile-object > .ci-inputfile-control { overflow: hidden; position: relative; /* pointer-events: none;*/ } .ci-inputfile-control > input[type=file]:has(~ .ci-inputfile-cover) { opacity: 0; height: 100%; position: absolute; pointer-events: all; } .ci-inputfile-control > .ci-inputfile-cover { /* copied from input - cover would resemble input look */ background: var(--vr-base-html-body-normal-backgroundColor); background-clip: padding-box; border: 1px solid var(--vr-base-html-body-normal-borderColorDim); border-radius: .375rem; box-shadow: none; color: inherit; display: block; font-family: inherit; font-size: inherit; font-weight: 500; outline: 0; width: 100%; /* copied from input - cover would resemble input look */ cursor: pointer; margin: 0; padding: 0; overflow: hidden; position: relative; pointer-events: none; display: flex; justify-content: space-between; align-items: center; } .ci-inputfile-control > .ci-inputfile-cover > .ci-inputfile-label { cursor: pointer; padding: 1em; pointer-events: none; max-width: calc(100% - 120px); z-index: 1; } .ci-inputfile-control > .ci-inputfile-cover > .ci-inputfile-select { border: none; border-left: 1px solid; border-color: inherit; background-image: linear-gradient(to bottom, #ffffff, var(--vr-base-html-action-normal-backgroundColor)); cursor: pointer; font-family: var(--vr-theme-html-body-button-fontFamily); padding: 1em 2em; pointer-events: none; position: absolute; top: 0; bottom: 0; right: 0; z-index: 2; width: 120px; height: 100%; } .ci-inputfile-control > input[type=file]:has(~ .hi-label) ~ .ci-inputfile-cover > .ci-inputfile-label { padding: 1.5em 1em 0.5em 2em; } /*.ci-inputfile-control > .ci-inputfile-cover > .ci-inputfile-select:hover { background-image: linear-gradient(to top, #ffffff, var(--vr-base-html-action-normal-backgroundColor)); } .ci-inputfile-control > .ci-inputfile-cover > .ci-inputfile-select:active { background-image: linear-gradient(to bottom, var(--vr-base-html-action-normal-backgroundColor), var(--vr-base-html-submit-normal-backgroundColor)); }*/ .ci-inputfile-object > .ci-inputfile-control > .ci-inputfile-cover > .ci-inputfile-select::before { content: 'Select File'; } .ci-inputfile-control > input[type=file]:not([data-file=""]) ~ .ci-inputfile-cover > .ci-inputfile-select::before { content: 'File Selected'; } .ci-inputfile-control > .ci-inputfile-update { /* copied from input - cover would resemble input look */ background: var(--vr-base-html-body-normal-backgroundColor); background-clip: padding-box; border: 1px solid var(--vr-base-html-body-normal-borderColorDim); border-radius: .375rem; /* copied from input - cover would resemble input look */ color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; width: 100%; display: none; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin-top: 2em; padding: 12px; overflow: hidden; position: relative; } .ci-inputfile-control > .ci-inputfile-update > .ci-inputfile-status { } .ci-inputfile-control > .ci-inputfile-update > .ci-inputfile-progress { width: 100%; } .ci-inputfile-control > .ci-inputfile-update > .ci-inputfile-clear { background: none; border: none; color: var(--vr-base-html-body-normal-color); cursor: pointer; font-size: 24px; position: absolute; right: 12px; top: 12px; } .ci-inputfile-control > .ci-inputfile-update > .ci-inputfile-clear:hover { color: var(--vr-base-html-body-title-color); } .ci-inputfile-control.ci-inputfile-inactive > input[type=file]:has(~ .ci-inputfile-cover) { opacity: 1; position: inherit; } .ci-inputfile-control.ci-inputfile-inactive > .ci-inputfile-cover { display: none !important; } .ci-inputfile-control.ci-inputfile-inactive > .ci-inputfile-update { display: none !important; } /*-------------------------------------------------- Loading ---------------------------------------------------*/ /*.ci-loading { }*/ .ci-loading-progress { display: block; } .ci-loading-indicator { display: block; } .ci-loading-container { background-color: var(--vr-base-html-body-normal-boxShadowColor); background-image: url('/images/loading/loadingTiny.gif'); background-position: center center; background-repeat: no-repeat; border-radius: 4px; display: block; position: absolute; bottom: 0px; left: 0px; right: 0px; top: 0px; z-index: 11000; } /*.ci-loading-container .ci-loading-progress { }*/ /*.ci-loading-container .ci-loading-indicator { }*/ body > .ci-loading-container { border-radius: 0; background-image: url('/images/loading/loadinglarge.gif'); background-size: 120px 120px; position: fixed; } .ci-loading-placeholder { display: block; } /* .ci-loading-placeholder .ci-loading-container { }*/ /*-------------------------------------------------- Notification ---------------------------------------------------*/ /*.ci-notification { }*/ /*.ci-notification-text { }*/ .ci-notification-i { font-size: 28px; line-height: 28px; padding: 12px; width: auto; } /*.ci-notification-icon { } .ci-notification-i { } .ci-notification-close { }*/ .ci-notification-subject { color: inherit; font-size: 16px; font-weight: 500; line-height: 28px; padding: 12px; } /* for ISS Errors */ .ci-notification-subject .content-container, .ci-notification-subject .content-container * { color: #fff !important; background-color: transparent !important; } /*.ci-notification-detail { } .ci-notification-content { }*/ .ci-notification-container { cursor: pointer; margin: 0 auto; position: fixed; left: 1em; right: 1em; top: 1em; text-align: center; max-width: 1000px; z-index: 12000; max-height: calc(100vh - 2em); overflow-x: hidden; overflow-y: hidden; border-radius: 5px; } /* .ci-notification-container > .ci-notification-content {}*/ .ci-notification-container > .ci-notification-content > .ci-notification-detail { background-color: var(--vr-base-html-notification-normal-backgroundColor); border-radius: 3px; color: var(--vr-base-html-notification-normal-color); display: flex; align-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; text-shadow: 0 0 1px var(--vr-base-html-notification-normal-textShadowColor); } .ci-notification-container > .ci-notification-content > .ci-notification-detail.ci-notification-note { background-color: var(--vr-base-html-note-normal-color); } .ci-notification-container > .ci-notification-content > .ci-notification-detail.ci-notification-information { background-color: var(--vr-base-html-information-normal-color); } .ci-notification-container > .ci-notification-content > .ci-notification-detail.ci-notification-success { background-color: var(--vr-base-html-success-normal-color); } .ci-notification-container > .ci-notification-content > .ci-notification-detail.ci-notification-alert { background-color: var(--vr-base-html-alert-normal-color); } .ci-notification-container > .ci-notification-content > .ci-notification-detail.ci-notification-warning { background-color: var(--vr-base-html-warning-normal-color); } .ci-notification-container > .ci-notification-content > .ci-notification-detail.ci-notification-error { background-color: var(--vr-base-html-error-normal-color); } /*.ci-notification-container > .ci-notification-content > .ci-notification-detail > .ci-notification-close { }*/ .ci-notification-container > .ci-notification-content > .ci-notification-detail > .ci-notification-close:hover { text-shadow: 0 0px 12px var(--vr-base-html-notification-normal-textShadowColor); } /*-------------------------------------------------- Notification - Error ---------------------------------------------------*/ .ci-error { padding: 0; margin: 0; color: red; font-size: 12px; font-weight: 600; } /*-------------------------------------------------- Overlay ---------------------------------------------------*/ .ci-overlay { background: var(--vr-base-html-body-normal-boxShadowColor); position: fixed; bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; z-index: 10000; } .ci-overlay .ci-placeholder { position: absolute; bottom: 0; left: 0; right: 0; top: 0; overflow-x: hidden; overflow-y: auto; } .ci-overlay .ci-envelop { margin: 0 auto; padding: 2em; max-width: 1000px; } .ci-overlay .ci-canvas { background-color: var(--vr-base-html-body-normal-backgroundColor); border-radius: 5px; box-shadow: 0 0 10px 35px var(--vr-base-html-body-normal-boxShadowColor); padding: 1em; position: relative; } .ci-overlay .ci-canvas > .ci-loading-container { margin: 24px; } .ci-overlay .ci-close { background: var(--vr-base-html-body-normal-backgroundColor); border-radius: 4px; color: var(--vr-base-html-link-normal-color); cursor: pointer; display: inline-flex; font-size: 32px; font-weight: 700; line-height: 32px; position: absolute; right: 1rem; top: 1rem; width: 32px; z-index: 1; } .ci-overlay .ci-close > .ci-i { color: inherit; display: block; font-size: inherit; font-weight: inherit; line-height: inherit; position: relative; width: inherit; } .ci-overlay .ci-close > .ci-i:hover { color: var(--vr-base-html-link-hover-color); } /*-------------------------------------------------- Modal Dialog ---------------------------------------------------*/ .ci-remove { background-color: #fff; border-bottom-left-radius: inherit; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; height: 48px; width: 48px; } .ci-remove:hover { color: var(--vr-base-html-link-hover-color); border-radius: inherit; } .ci-remove::before { color: inherit; content: '\f00d'; cursor: pointer; font-family: "Font Awesome 6 Free"; font-style: normal; font-variant: normal; font-size: 32px; font-weight: 900; position: relative; text-rendering: auto; -webkit-font-smoothing: antialiased; } /*------------------------------------ Scroll to Top ------------------------------------*/ #ci-scroll-top { border-radius: 4px; box-shadow: 0 0 10px 0px var(--vr-base-html-body-normal-boxShadowColor); cursor: pointer; display: none; font-size: 20px; height: 32px; line-height: 32px; overflow: hidden; position: fixed; bottom: 16px; right: 16px; text-align: center; text-decoration: none; width: 32px; z-index: 99999; } #ci-scroll-top > .hi-i { background: var(--vr-base-html-body-normal-backgroundColor); color: var(--vr-base-html-link-normal-color); font-size: inherit; height: inherit; line-height: inherit; width: inherit; } #ci-scroll-top > .hi-i:hover { color: var(--vr-base-html-link-hover-color); } /*------------------------------------ Preloader ------------------------------------*/ @keyframes ci-preloader { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(1, 1); opacity: 0; } } @-webkit-keyframes ci-preloader { 0% { -webkit-transform: scale(0, 0); opacity: 0.5; } 100% { -webkit-transform: scale(1, 1); opacity: 0; } } #ci-preloader-placeholder, .ci-preloader-placeholder { background-color: #f7f7f7; position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 999999; } .ci-preloader-container { box-sizing: border-box; display: inline-block; height: 50px; margin-left: -25px; margin-top: -25px; padding: 0px; position: absolute; left: 50%; top: 50%; text-align: left; width: 50px; } .ci-preloader-container .ci-preloader-content { background: #00a94f; border-radius: 100%; display: inline-block; position: absolute; height: 50px; width: 50px; animation: ci-preloader 1.3s linear infinite; -webkit-animation: ci-preloader 1.3s linear infinite; } .ci-preloader-container .ci-preloader-content:last-child { animation-delay: -0.8s; -webkit-animation-delay: -0.8s; } /*----------------------------------------------------------------------------------------------------- SECTIONS 6 (Single Property Single Class .ui) -----------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------- Background Color ---------------------------------------------------*/ .ui-bg-white { background-color: #ffffff; } .ui-bg-none { background-color: transparent; } .ui-bg-none---i { background-color: transparent !important; } /*-------------------------------------------------- Border - Border Color ---------------------------------------------------*/ .ui-bc-html { border-color: var(--vr-base-html-body-normal-boxShadowColor); } .ui-bc-white { border-color: #ffffff; } .ui-bc-gray { border-color: gray; } /*-------------------------------------------------- Border - Border Radius ---------------------------------------------------*/ .ui-br-2px { border-radius: 2px; } .ui-br-3px { border-radius: 3px; } .ui-br-4px { border-radius: 4px; } .ui-br-6px { border-radius: 6px; } /*-------------------------------------------------- Border - Border Style ---------------------------------------------------*/ .ui-bs-solid { border-style: solid; } .ui-bs-dashed { border-style: dashed; } .ui-bs-dashed--t { border-top-style: dashed; } .ui-bs-dashed--b { border-bottom-style: dashed; } .ui-bs-dashed--l { border-left-style: dashed; } .ui-bs-dashed--r { border-right-style: dashed; } /*-------------------------------------------------- Border - Border Width ---------------------------------------------------*/ .ui-bw-1px { border-width: 1px; } .ui-bw-1px--t { border-top-width: 1px; } .ui-bw-1px--b { border-bottom-width: 1px; } .ui-bw-1px--l { border-left-width: 1px; } .ui-bw-1px--r { border-right-width: 1px; } /*-------------------------------------------------- Box Shadow ---------------------------------------------------*/ .ui-bz-none { -webkit-box-shadow: none; box-shadow: none; } .ui-bz-none---i { -webkit-box-shadow: none !important; box-shadow: none !important; } /*-------------------------------------------------- Color ---------------------------------------------------*/ .ui-c-title { color: var(--vr-base-html-body-title-color); } .ui-c-caption { color: var(--vr-base-html-body-caption-color); } .ui-c-link { color: var(--vr-base-html-link-normal-color); } .ui-c-hover { color: var(--vr-base-html-link-hover-color); } .ui-c-darkorange { color: darkorange; } .ui-c-red { color: red; } .ui-c-darkred { color: #da0000; } .ui-c-error { color: var(--vr-base-html-error-normal-color); } .ui-c-green { color: green; } .ui-c-lightseagreen { color: lightseagreen; } .ui-c-forestgreen { color: forestgreen; } .ui-c-gray { color: gray; } .ui-c-lightgray { color: lightgray; } /*-------------------------------------------------- Display ---------------------------------------------------*/ .ui-d-none { display: none; } .ui-d-block { display: block; } .ui-d-inline { display: inline; } .ui-d-inlineBlock { display: inline-block; } .ui-d-flex { display: flex; } .ui-ffd-row { flex-direction: row; } .ui-ffd-row---i { flex-direction: row !important; } .ui-ffd-column { flex-direction: column; } .ui-ffd-columnReverse { flex-direction: column-reverse; } .ui-ffd-column---i { flex-direction: column !important; } .ui-ffw-wrap { flex-wrap: wrap; } .ui-ffw-nowrap { flex-wrap: nowrap; } .ui-fac-center { align-content: center; } .ui-fac-flexStart { align-content: flex-start; } .ui-fac-flexEnd { align-content: flex-end; } .ui-fac-spaceAround { align-content: space-around; } .ui-fac-spaceBetween { align-content: space-between; } .ui-fac-stretch { align-content: stretch; } .ui-fjc-center { justify-content: center; } .ui-fjc-flexStart { justify-content: flex-start; } .ui-fjc-flexEnd { justify-content: flex-end; } .ui-fjc-spaceBetween { justify-content: space-between; } .ui-fjc-spaceAaround { justify-content: space-around; } .ui-fjc-spaceEvenly { justify-content: space-evenly; } .ui-fai-center { align-items: center; } /*.ui-fai-center---i { align-items: center !important; }*/ .ui-fai-flexStart { align-items: flex-start; } /*.ui-fai-flexStart---i { align-items: flex-start !important; }*/ .ui-fai-flexEnd { align-items: flex-end; } /* .ui-fai-flexEnd---i { align-items: flex-end !important; }*/ .ui-fai-stretch { align-items: stretch; } /*.ui-fai-stretch---i { align-items: stretch !important; }*/ .ui-fai-baseline { align-items: baseline; } /* .ui-fai-baseline---i { align-items: baseline !important; }*/ /* -- display-direct-wrap-alignItems-justifycontent-- */ .ui-flex-row { display: flex; flex-direction: row; } .ui-flex-row-nowrap { display: flex; flex-direction: row; flex-wrap: nowrap; } .ui-flex-row-nowrap-stretch { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; } .ui-flex-row-nowrap-left { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } .ui-flex-row-nowrap-center { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .ui-flex-row-nowrap-center-spaceBetween { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .ui-flex-row-nowrap-right { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; } .ui-flex-row-wrap { display: flex; flex-direction: row; flex-wrap: wrap; } .ui-flex-column { display: flex; flex-direction: column; } .ui-flex-column-nowrap { display: flex; flex-direction: column; flex-wrap: nowrap; } .ui-flex-column-wrap { display: flex; flex-direction: column; flex-wrap: wrap; } @media only screen and (max-width: 1200px) { /* .ui-ffd-column----w1200 { flex-direction: column; } .ui-ffd-column----w1200---i { flex-direction: column !important; }*/ /* .ui-ffd-columnReverse----w1200 { flex-direction: column-reverse; } .ui-ffd-columnReverse----w1200---i { flex-direction: column-reverse !important; }*/ .ui-ffd-column----w1200 { flex-direction: column; } .ui-ffd-column-reverse----w1200, .gi-row:not(.gi-row----w1200).ui-ffd-column-reverse----w1200 { flex-direction: column-reverse; } } @media only screen and (max-width: 1024px) { /* .ui-ffd-column----w1024 { flex-direction: column; } .ui-ffd-column----w1024---i { flex-direction: column !important; }*/ /* .ui-ffd-columnReverse----w1024 { flex-direction: column-reverse; } .ui-ffd-columnReverse----w1024---i { flex-direction: column-reverse !important; }*/ .ui-ffd-column----w1024 { flex-direction: column; } .ui-ffd-column-reverse----w1024, .gi-row:not(.gi-row----w1024).ui-ffd-column-reverse----w1024 { flex-direction: column-reverse; } } @media only screen and (max-width: 800px) { /* .ui-ffd-column----w800 { flex-direction: column; } .ui-ffd-column----w800---i { flex-direction: column !important; }*/ /* .ui-ffd-columnReverse----w800 { flex-direction: column-reverse; } .ui-ffd-columnReverse----w800---i { flex-direction: column-reverse !important; }*/ .ui-ffd-column----w800 { flex-direction: column; } .ui-ffd-column-reverse----w800, .gi-row:not(.gi-row----w800).ui-ffd-column-reverse----w800 { flex-direction: column-reverse; } } @media only screen and (max-width: 640px) { .ui-ffd-column----w800 { flex-direction: column; } .ui-ffd-column-reverse----w640, .gi-row:not(.gi-row----w640).ui-ffd-column-reverse----w640 { flex-direction: column-reverse; } } /*-------------------------------------------------- Font Family ---------------------------------------------------*/ .ui-ff-initial { font-family: initial; } .ui-ff-none { font-family: none; } .ui-ff-title { font-family: var(--vr-theme-html-body-title-fontFamily); } .ui-ff-header { font-family: var(--vr-theme-html-body-header-fontFamily); } .ui-ff-link { font-family: var(--vr-theme-html-body-link-fontFamily); } .ui-ff-button { font-family: var(--vr-theme-html-body-button-fontFamily); } .ui-ff-serif { font-family: serif; } /*-------------------------------------------------- Font Size ---------------------------------------------------*/ .ui-fs-10px { font-size: 10px; } .ui-fs-11px { font-size: 11px; } .ui-fs-12px { font-size: 12px; } .ui-fs-13px { font-size: 13px; } .ui-fs-14px { font-size: 14px; } .ui-fs-15px { font-size: 15px; } .ui-fs-16px { font-size: 16px; } .ui-fs-18px { font-size: 18px; } .ui-fs-20px { font-size: 20px; } .ui-fs-22px { font-size: 22px; } .ui-fs-24px { font-size: 24px; } .ui-fs-30px { font-size: 30px; } .ui-fs-36px { font-size: 36px; } .ui-fs-120p { font-size: 120%; } .ui-fs-150p { font-size: 150%; } .ui-fs-200p { font-size: 200%; } /*-------------------------------------------------- Font Style ---------------------------------------------------*/ .ui-ft-italic { font-style: italic; } .ui-ft-oblique { font-style: oblique; } .ui-ft-normal { font-style: normal; } /*-------------------------------------------------- Font Weight ---------------------------------------------------*/ .ui-fw-normal { font-weight: normal; } .ui-fw-100 { font-weight: 100; } .ui-fw-200 { font-weight: 200; } .ui-fw-300 { font-weight: 300; } .ui-fw-400 { font-weight: 400; } .ui-fw-500 { font-weight: 500; } .ui-fw-600 { font-weight: 600; } .ui-fw-700 { font-weight: 700; } .ui-fw-800 { font-weight: 800; } .ui-fw-900 { font-weight: 900; } /*-------------------------------------------------- Height ---------------------------------------------------*/ .ui-h-100vh { height: 100vh; } .ui-h-100p { height: 100%; } .ui-h-auto { height: auto; } .ui-h-unset { height: unset; } .ui-mh-100vh { max-height: 100vh; } .ui-mh-100p { max-height: 100%; } .ui-mh-auto { max-height: auto; } .ui-mh-unset { max-height: unset; } .ui-nh-100vh { min-height: 100vh; } .ui-nh-100p { min-height: 100%; } .ui-nh-100vh--banner { min-height: calc(100vh - var(--vr-theme-header-navigation-normal-height)); } .ui-nh-auto { min-height: auto; } .ui-nh-unset { min-height: unset; } /*-------------------------------------------------- Line Height ---------------------------------------------------*/ .ui-lh-30px { line-height: 30px; } .ui-lh-34px { line-height: 34px; } .ui-lh-inherit { line-height: inherit; } .ui-lh-initial { line-height: initial; } .ui-lh-normal { line-height: normal; } .ui-lh-unset { line-height: unset; } /*-------------------------------------------------- Margin ---------------------------------------------------*/ .ui-m-auto { margin: auto; } .ui-m-auto--h { margin-left: auto; margin-right: auto; } .ui-m-auto--v { margin-bottom: auto; margin-top: auto; } .ui-m-0 { margin: 0; } .ui-m-0--h { margin-left: 0; margin-right: 0; } .ui-m-0--v { margin-bottom: 0; margin-top: 0; } .ui-m-0--b { margin-bottom: 0; } .ui-m-0--l { margin-left: 0; } .ui-m-0--r { margin-right: 0; } .ui-m-0--t { margin-top: 0; } .ui-m-6px { margin: 6px; } .ui-m-6px--h { margin-left: 6px; margin-right: 6px; } .ui-m-6px--v { margin-bottom: 6px; margin-top: 6px; } .ui-m-6px--b { margin-bottom: 6px; } .ui-m-6px--l { margin-left: 6px; } .ui-m-6px--r { margin-right: 6px; } .ui-m-6px--t { margin-top: 6px; } .ui-m-12px { margin: 12px; } .ui-m-12px--h { margin-left: 12px; margin-right: 12px; } .ui-m-12px--v { margin-bottom: 12px; margin-top: 12px; } .ui-m-12px--b { margin-bottom: 12px; } .ui-m-12px--l { margin-left: 12px; } .ui-m-12px--r { margin-right: 12px; } .ui-m-12px--t { margin-top: 12px; } .ui-m-18px { margin: 18px; } .ui-m-18px--h { margin-left: 18px; margin-right: 18px; } .ui-m-18px--v { margin-bottom: 18px; margin-top: 18px; } .ui-m-18px--b { margin-bottom: 18px; } .ui-m-18px--l { margin-left: 18px; } .ui-m-18px--r { margin-right: 18px; } .ui-m-18px--t { margin-top: 18px; } .ui-m-24px { margin: 24px; } .ui-m-24px--h { margin-left: 24px; margin-right: 24px; } .ui-m-24px--v { margin-bottom: 24px; margin-top: 24px; } .ui-m-24px--b { margin-bottom: 24px; } .ui-m-24px--l { margin-left: 24px; } .ui-m-24px--r { margin-right: 24px; } .ui-m-24px--t { margin-top: 24px; } .ui-m-36px { margin: 36px; } .ui-m-36px--h { margin-left: 36px; margin-right: 36px; } .ui-m-36px--v { margin-bottom: 36px; margin-top: 36px; } .ui-m-36px--b { margin-bottom: 36px; } .ui-m-36px--l { margin-left: 36px; } .ui-m-36px--r { margin-right: 36px; } .ui-m-36px--t { margin-top: 36px; } .ui-m-1em { margin: 1em; } .ui-m-1em--h { margin-left: 1em; margin-right: 1em; } .ui-m-1em--v { margin-bottom: 1em; margin-top: 1em; } .ui-m-1em--b { margin-bottom: 1em; } .ui-m-1em--l { margin-left: 1em; } .ui-m-1em--r { margin-right: 1em; } .ui-m-1em--t { margin-top: 1em; } .ui-m-2em { margin: 2em; } .ui-m-2em--h { margin-left: 2em; margin-right: 2em; } .ui-m-2em--v { margin-bottom: 2em; margin-top: 2em; } .ui-m-2em--b { margin-bottom: 2em; } .ui-m-2em--l { margin-left: 2em; } .ui-m-2em--r { margin-right: 2em; } .ui-m-2em--t { margin-top: 2em; } .ui-m-3em { margin: 3em; } .ui-m-3em--h { margin-left: 3em; margin-right: 3em; } .ui-m-3em--v { margin-bottom: 3em; margin-top: 3em; } .ui-m-3em--b { margin-bottom: 3em; } .ui-m-3em--l { margin-left: 3em; } .ui-m-3em--r { margin-right: 3em; } .ui-m-3em--t { margin-top: 3em; } .ui-m-4em { margin: 4em; } .ui-m-4em--h { margin-left: 4em; margin-right: 4em; } .ui-m-4em--v { margin-bottom: 4em; margin-top: 4em; } .ui-m-4em--b { margin-bottom: 4em; } .ui-m-4em--l { margin-left: 4em; } .ui-m-4em--r { margin-right: 4em; } .ui-m-4em--t { margin-top: 4em; } .ui-m-5em { margin: 5em; } .ui-m-5em--h { margin-left: 5em; margin-right: 5em; } .ui-m-5em--v { margin-bottom: 5em; margin-top: 5em; } .ui-m-5em--b { margin-bottom: 5em; } .ui-m-5em--l { margin-left: 5em; } .ui-m-5em--r { margin-right: 5em; } .ui-m-5em--t { margin-top: 5em; } .ui-m-6em { margin: 6em; } .ui-m-6em--h { margin-left: 6em; margin-right: 6em; } .ui-m-6em--v { margin-bottom: 6em; margin-top: 6em; } .ui-m-6em--b { margin-bottom: 6em; } .ui-m-6em--l { margin-left: 6em; } .ui-m-6em--r { margin-right: 6em; } .ui-m-6em--t { margin-top: 6em; } .ui-m-7em { margin: 7em; } .ui-m-7em--h { margin-left: 7em; margin-right: 7em; } .ui-m-7em--v { margin-bottom: 7em; margin-top: 7em; } .ui-m-7em--b { margin-bottom: 7em; } .ui-m-7em--l { margin-left: 7em; } .ui-m-7em--r { margin-right: 7em; } .ui-m-7em--t { margin-top: 7em; } /*-------------------------------------------------- Padding ---------------------------------------------------*/ .ui-p-0 { padding: 0; } .ui-p-0---i { padding: 0 !important; } .ui-p-0--h { padding-left: 0; padding-right: 0; } .ui-p-0--h---i { padding-left: 0 !important; padding-right: 0 !important; } .ui-p-0--v { padding-bottom: 0; padding-top: 0; } .ui-p-0--v---i { padding-bottom: 0 !important; padding-top: 0 !important; } .ui-p-0--b { padding-bottom: 0; } .ui-p-0--b---i { padding-bottom: 0 !important; } .ui-p-0--l { padding-left: 0; } .ui-p-0--l---i { padding-left: 0 !important; } .ui-p-0--r { padding-right: 0; } .ui-p-0--r---i { padding-right: 0 !important; } .ui-p-0--t { padding-top: 0; } .ui-p-0--t---i { padding-top: 0 !important; } .ui-p-3px { padding: 3px; } .ui-p-3px--h { padding-left: 3px; padding-right: 3px; } .ui-p-3px--v { padding-bottom: 3px; padding-top: 3px; } .ui-p-3px--b { padding-bottom: 3px; } .ui-p-3px--l { padding-left: 3px; } .ui-p-3px--r { padding-right: 3px; } .ui-p-3px--t { padding-top: 3px; } .ui-p-6px { padding: 6px; } .ui-p-6px--h { padding-left: 6px; padding-right: 6px; } .ui-p-6px--v { padding-bottom: 6px; padding-top: 6px; } .ui-p-6px--b { padding-bottom: 6px; } .ui-p-6px--l { padding-left: 6px; } .ui-p-6px--r { padding-right: 6px; } .ui-p-6px--t { padding-top: 6px; } .ui-p-12px { padding: 12px; } .ui-p-12px--h { padding-left: 12px; padding-right: 12px; } .ui-p-12px--v { padding-bottom: 12px; padding-top: 12px; } .ui-p-12px--b { padding-bottom: 12px; } .ui-p-12px--l { padding-left: 12px; } .ui-p-12px--r { padding-right: 12px; } .ui-p-12px--t { padding-top: 12px; } .ui-p-18px { padding: 18px; } .ui-p-18px--h { padding-left: 18px; padding-right: 18px; } .ui-p-18px--v { padding-bottom: 18px; padding-top: 18px; } .ui-p-18px--b { padding-bottom: 18px; } .ui-p-18px--l { padding-left: 18px; } .ui-p-18px--r { padding-right: 18px; } .ui-p-18px--t { padding-top: 18px; } .ui-p-24px { padding: 24px; } .ui-p-24px--h { padding-left: 24px; padding-right: 24px; } .ui-p-24px--v { padding-bottom: 24px; padding-top: 24px; } .ui-p-24px--b { padding-bottom: 24px; } .ui-p-24px--l { padding-left: 24px; } .ui-p-24px--r { padding-right: 24px; } .ui-p-24px--t { padding-top: 24px; } .ui-p-36px { padding: 36px; } .ui-p-36px--h { padding-left: 36px; padding-right: 36px; } .ui-p-36px--v { padding-bottom: 36px; padding-top: 36px; } .ui-p-36px--b { padding-bottom: 36px; } .ui-p-36px--l { padding-left: 36px; } .ui-p-36px--r { padding-right: 36px; } .ui-p-36px--t { padding-top: 36px; } .ui-p-1em { padding: 1em; } .ui-p-1em--h { padding-left: 1em; padding-right: 1em; } .ui-p-1em--v { padding-bottom: 1em; padding-top: 1em; } .ui-p-1em--b { padding-bottom: 1em; } .ui-p-1em--l { padding-left: 1em; } .ui-p-1em--r { padding-right: 1em; } .ui-p-1em--t { padding-top: 1em; } .ui-p-2em { padding: 2em; } .ui-p-2em--h { padding-left: 2em; padding-right: 2em; } .ui-p-2em--v { padding-bottom: 2em; padding-top: 2em; } .ui-p-2em--b { padding-bottom: 2em; } .ui-p-2em--l { padding-left: 2em; } .ui-p-2em--r { padding-right: 2em; } .ui-p-2em--t { padding-top: 2em; } .ui-p-3em { padding: 3em; } .ui-p-3em--h { padding-left: 3em; padding-right: 3em; } .ui-p-3em--v { padding-bottom: 3em; padding-top: 3em; } .ui-p-3em--b { padding-bottom: 3em; } .ui-p-3em--l { padding-left: 3em; } .ui-p-3em--r { padding-right: 3em; } .ui-p-3em--t { padding-top: 3em; } .ui-p-4em { padding: 4em; } .ui-p-4em--h { padding-left: 4em; padding-right: 4em; } .ui-p-4em--v { padding-bottom: 4em; padding-top: 4em; } .ui-p-4em--b { padding-bottom: 4em; } .ui-p-4em--l { padding-left: 4em; } .ui-p-4em--r { padding-right: 4em; } .ui-p-4em--t { padding-top: 4em; } .ui-p-5em { padding: 5em; } .ui-p-5em--h { padding-left: 5em; padding-right: 5em; } .ui-p-5em--v { padding-bottom: 5em; padding-top: 5em; } .ui-p-5em--b { padding-bottom: 5em; } .ui-p-5em--l { padding-left: 5em; } .ui-p-5em--r { padding-right: 5em; } .ui-p-5em--t { padding-top: 5em; } .ui-p-6em { padding: 6em; } .ui-p-6em--h { padding-left: 6em; padding-right: 6em; } .ui-p-6em--v { padding-bottom: 6em; padding-top: 6em; } .ui-p-6em--b { padding-bottom: 6em; } .ui-p-6em--l { padding-left: 6em; } .ui-p-6em--r { padding-right: 6em; } .ui-p-6em--t { padding-top: 6em; } .ui-p-7em { padding: 7em; } .ui-p-7em--h { padding-left: 7em; padding-right: 7em; } .ui-p-7em--v { padding-bottom: 7em; padding-top: 7em; } .ui-p-7em--b { padding-bottom: 7em; } .ui-p-7em--l { padding-left: 7em; } .ui-p-7em--r { padding-right: 7em; } .ui-p-7em--t { padding-top: 7em; } /*-------------------------------------------------- Position ---------------------------------------------------*/ .ui-s-initial { position: initial; } .ui-s-inherit { position: inherit; } .ui-s-absolute { position: absolute; } .ui-s-fixed { position: fixed; } .ui-s-relative { position: relative; } .ui-s-static { position: static; } .ui-s-sticky { position: sticky; } .ui-s-unset { position: unset; } /*-------------------------------------------------- Text Align ---------------------------------------------------*/ .ui-ta-left { text-align: left; } .ui-ta-center { text-align: center; } .ui-ta-right { text-align: right; } /*-------------------------------------------------- Text Decoration ---------------------------------------------------*/ .ui-td-lineThrough { text-decoration: line-through; } .ui-td-underline { text-decoration: underline; } .ui-td-unset { text-decoration: unset; } .ui-td-none { text-decoration: none; } /*-------------------------------------------------- Text Transform ---------------------------------------------------*/ .ui-tt-uppercase { text-transform: uppercase; } .ui-tt-lowercase { text-transform: lowercase; } .ui-tt-capitalize { text-transform: capitalize; } .ui-tt-fullWidth { text-transform: full-width; } .ui-tt-initial { text-transform: initial; } .ui-tt-inherit { text-transform: inherit; } .ui-tt-unset { text-transform: unset; } .ui-tt-none { text-transform: none; } /*-------------------------------------------------- Vertical Align ---------------------------------------------------*/ .ui-va-top { vertical-align: top; } .ui-va-middle { vertical-align: middle; } .ui-va-bottom { vertical-align: bottom; } /*-------------------------------------------------- Width ---------------------------------------------------*/ .ui-w-100vw { width: 100vw; } .ui-w-100p { width: 100%; } .ui-w-50p { width: 50%; } .ui-w-auto { width: auto; } .ui-w-unset { width: unset; } .ui-mw-100vw { max-width: 100vw; } .ui-mw-100p { max-width: 100%; } .ui-mw-auto { max-width: auto; } .ui-mw-unset { max-width: unset; } .ui-nw-100vw { min-width: 100vw; } .ui-nw-100p { min-width: 100%; } .ui-nw-auto { min-width: auto; } .ui-nw-unset { min-width: unset; } @media only screen and (max-width: 800px) { .ui-d-none----w800 { display: none; } .ui-d-inherit----w800 { display: inherit; } .ui-d-initial----w800 { display: initial; } .ui-m-0--b----w800 { margin-bottom: 0; } .ui-m-0--t----w800 { margin-top: 0; } .ui-p-0--b----w800 { padding-bottom: 0; } .ui-p-0--t----w800 { padding-top: 0; } } /*----------------------------------------------------------------------------------------------------- SECTIONS 7 (Multiple Properties Single Class .mi) -----------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------- Responsive Definitions ---------------------------------------------------------------------------------------------------*/ @media only screen and (max-width: 800px) { /*:root { }*/ } @media only screen and (max-width: 640px) { /*:root { }*/ } @media only screen and (max-width: 480px) { /*:root { }*/ } @media only screen and (max-width: 360px) { /* :root { }*/ } @media print { /* All print related styles to be added here */ .fn-noprint, header, footer { display: none !important; } }