.hidden, .hidden2, .force-hidden {
    display: none !important;
}

.invisible { /* make invisible but occupy space, have correct sizes etc. */
    visibility: hidden !important;
}

.inline { display: inline; }
.display-block { display: block; }
.iblock, .inline-block, .inline.inline-block { display: inline-block; }
.children-iblock > * { display: inline-block; }
.display-flex { display: flex; }
.clear-both { clear: both; }
.relative { position: relative; }

/*.flex-3-columns { flex-direction: row; }
.flex-3-columns > * { flex-basis: 33.33%; }*/

.display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 25%);
    justify-content: space-between;
    grid-gap: var(--pad-default-small);
}
.display-grid.grid-3-columns {
    grid-template-columns: repeat(auto-fill, calc(33% - var(--pad-default-small)));
}
.display-grid.grid-3-columns > * {
    max-width: 100% !important;
}
@media (max-width: 1199px) {
 .display-grid.grid-3-columns { grid-template-columns: repeat(auto-fill, calc(50% - var(--pad-default-small))); }
}
@media (max-width: 899px) {
 .display-grid.grid-3-columns { grid-template-columns: repeat(auto-fill, 100%); }
}

.nowrap { white-space: nowrap; }

.click { cursor: pointer; }
.cursor-hint { cursor: pointer; cursor: help; }

.hover-transp:hover { opacity: 0.64; }

.force-collapse-v {
    -webkit-transition: transform 0.32s ease, opacity 0.5s ease !important;
    transition: transform 0.32s ease, opacity 0.5s ease !important;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0 !important;
}

.fs-title-big { font-size: var(--fs-title-big); }
.fs-title-med { font-size: var(--fs-title-med); }
.fs-title-sm { font-size: var(--fs-title-sm); }
.fs-normal { font-size: var(--f); }
.fs-sm { font-size: var(--f-sm); }
.fs-xs { font-size: var(--f-xs); }
.fs-12-fixed { font-size: 12px; }
.fs-13 { font-size: var(--f-13); }
.fs-tiny { font-size: var(--f-tiny); }

.line-height-title { line-height: var(--f-title); }
.line-height-text { line-height: var(--lh); }
.line-height-bigger { line-height: var(--lh-bigger); }

body .pad-input { padding: var(--pad-field); }

body .pad-top-block { padding-top: var(--pad-block); }
body .pad-bottom-block { padding-bottom: var(--pad-block); }
body .pad-v-block { padding-top: var(--pad-block); padding-bottom: var(--pad-block); }
body .pad-block { padding: var(--pad-block) var(--pad-block); }

body .pad-top-2 { padding-top: 2px; }
body .pad-top-4 { padding-top: 4px; }
body .pad-top-6 { padding-top: 6px; }
body .pad-top-8 { padding-top: 8px; }
body .pad-top-16 { padding-top: 16px; }
body .pad-top-24 { padding-top: 24px; }
body .pad-top-32 { padding-top: 32px; }

body .pad-top-align-btn { padding-top: 8px; } /*//TODO calc from vars*/

body .pad-top-p { padding-top: var(--p); }
body .pad-top-p2 { padding-top: var(--p2); }
body .pad-top-px { padding-top: var(--px); }
body .pad-bottom-2 { padding-bottom: 2px; }
body .pad-bottom-4 { padding-bottom: 4px; }
body .pad-bottom-8 { padding-bottom: 8px; }
body .pad-bottom-16 { padding-bottom: 16px; }
body .pad-bottom-p { padding-bottom: var(--p); }
body .pad-bottom-p2 { padding-bottom: var(--p2); }
body .pad-bottom-px { padding-bottom: var(--px); }
body .pad-left-8 { padding-left: 8px; }
body .pad-left-16 { padding-left: 16px; }
body .pad-h-4 { padding-left: 4px; padding-right: 4px; }
body .pad-h-8 { padding-left: 8px; padding-right: 8px; }
body .pad-h-p { padding-left: var(--p); padding-right: var(--p); }
body .pad-h-px { padding-left: var(--px); padding-right: var(--px); }
body .pad-v-p { padding-top: var(--p); padding-bottom: var(--p); }
body .pad-v-p2 { padding-top: var(--p2); padding-bottom: var(--p2); }
body .pad-bottom-2 { padding-bottom: 2px; }

body .pad-left-p { padding-left: var(--p); }
body .pad-left-small { padding-left: calc(var(--p)*8/16); }
body .pad-left-px { padding-left: var(--px); }
body .pad-right-p { padding-right: var(--p); }
body .pad-right-small { padding-right: calc(var(--p)*8/16); }
body .pad-right-px { padding-right: var(--px); }

body .pad-h-0 { padding-left: 0 !important; padding-right: 0 !important; }

body .marg-top--8 { margin-top: -8px; }
body .marg-top--025em { margin-top: -0.25em; }
body .marg-top-4 { margin-top: 4px; }
body .marg-top-8 { margin-top: 8px; }
body .marg-top-p { margin-top: var(--p); }
body .marg-top-p2 { margin-top: var(--p2); }
body .marg-top-px { margin-top: var(--px); }
body .marg-bottom--8 { margin-bottom: -8px; }
body .marg-bottom-4 { margin-bottom: 4px; }
body .marg-bottom-8 { margin-bottom: 8px; }
body .marg-bottom-12 { margin-bottom: 12px; }
body .marg-bottom-16 { margin-bottom: 16px; }
body .marg-bottom--p { margin-bottom: calc(var(--p) * -1); }
body .marg-bottom--p2 { margin-bottom: calc(var(--p2) * -1); }
body .marg-bottom-p { margin-bottom: var(--p); }
body .marg-bottom-p2 { margin-bottom: var(--p2); }
body .marg-v-p2 { margin-top: var(--p2); margin-bottom: var(--p2); }
body .marg-h-4 { margin-left: 4px; margin-right: 4px; }
body .marg-h-8 { margin-left: 8px; margin-right: 8px; }
body .marg-h-p { margin-left: var(--p); margin-right: var(--p); }
body .marg-h-p2 { margin-left: var(--p2); margin-right: var(--p2); }

body .marg-left-8 { margin-left: 8px; }
body .marg-left-p { margin-left: var(--p); }
body .marg-left-small { margin-left: calc(var(--p)*8/16); }
body .marg-left-px { margin-left: var(--px); }
body .marg-right-0-i { margin-right: 0 !important; }
body .marg-right-8 { margin-right: 8px; }
body .marg-right-p { margin-right: var(--p); }
body .marg-right-small { margin-right: calc(var(--p)*8/16); }
body .marg-right-px { margin-right: var(--px); }

.limit-width-element {
    width: var(--w-limit-element);
    max-width: 100%;
    overflow-x: hidden;
}

.row-underline {
    position:relative;
}
.row-underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--pad-bootstrap);
    right: var(--pad-bootstrap);
    border-bottom: 1px solid var(--c-border);
}

.half-transp { opacity: 0.5; }
.quarter-transp { opacity: 0.25; }

body .ql-toolbar.ql-snow {
    border-color: var(--c-border);
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    background-color: var(--bg-content);
}
body .ql-container.ql-snow {
    border-color: var(--c-border);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    background-color: var(--bg-main);
}
body .ql-toolbar .ql-formats {
    position: relative;
}
body .ql-toolbar .ql-size {
    max-width: 3.2em;
}
body .ql-toolbar .ql-formats::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 50%;
    font-size: var(--p);
    width: 1px;
    height: 1em;
    margin-top: -0.5em;
    border-right: 1px solid var(--c-border);
    z-index: 1;
}
body .ql-container .ql-editor {
    min-height: 5em;
}
body .ql-container .ql-tooltip.ql-editing {
    left: 0 !important;
}


.text-main { color: var(--c-main); }
.text-pale { color: var(--c-pale); }
.text-active { color: var(--c-active); }
.text-blue { color: var(--c-blue); }
.text-green { color: var(--c-green); }
.text-orange { color: var(--c-orange); }
.text-orange-darker { color: var(--c-orange-darker); }
.text-yellow { color: var(--c-yellow); }
.text-yellow-darker { color: var(--c-yellow-darker); }
.text-magenta { color: var(--c-magenta); }

.bg-main { background-color: var(--bg-main); }
.bg-content { background-color: var(--bg-content); }
.bg-light-green { background-color: var(--bg-green-pale); }
.bg-light-gray { background-color: var(--bg-selected); }
.bg-light-yellow { background-color: var(--bg-yellow-pale); }
.bg-light-blue { background-color: var(--bg-sky); }
.bg-light-orange { background-color: var(--bg-orange-pale); }

.border { border: 1px solid var(--c-border); }
.border-radius { border-radius: var(--border-radius); }
.border-radius-small { border-radius: var(--border-radius-small); }

.scroll-max-50vh { overflow: auto; max-height: calc(50vh - var(--calc-page-top)); }
.scroll-max-60vh { overflow: auto; max-height: calc(60vh - var(--calc-page-top)); }
.scroll-max-70vh { overflow: auto; max-height: calc(70vh - var(--calc-page-top)); }
.scroll-max-80vh { overflow: auto; max-height: calc(80vh - var(--calc-page-top)); }
.scroll-right-pad { /* for tags without padding - add on the right to distantiate scroll bar fron content */
    margin-right: calc(var(--p) * -1);
    padding-right: var(--p);
}

.overflow-visible { overflow: visible; }
.overflow-h-hidden, .overflow-x-hidden { overflow-x: hidden; overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
/* for vertical overflow see .limit-multiline in layout-items / for search: text-overflow: ellipsis, line-clamp */

.block-centered { margin-left: auto; margin-right: auto; }
.w100 { width: 100%; }
.min-wd-120 { min-width: 120px; }
.min-wd-160 { min-width: 160px; }
.min-wd-240 { min-width: 240px; }
.min-wd-320 { min-width: 320px; }
.min-wd-340 { min-width: 340px; }
.min-wd-342 { min-width: 342px; }
.min-wd-516 { min-width: 516px; }
.max-wd-1024 { max-width: 1024px; }
.max-wd-800 { max-width: 800px; }
.max-wd-640 { max-width: 640px; }
.max-wd-440 { max-width: 440px; }
.max-wd-220 { max-width: 220px; }
.max-wd-150 { max-width: 150px; }
.max-wd-128 { max-width: 128px; }
.max-wd-96 { max-width: 96px; }
.max-wd-64 { max-width: 64px; }
.min-height-100 { min-height: 100%; }
.min-height-96 { min-height: 96px; }
.min-height-48 { min-height: 48px; }
.min-height-132 { min-height: 132px; }
.min-height-160 { min-height: 160px; }
@media (min-width: 640px) {
    .max-w-half-content, .max-w-half-content-centered { max-width: calc(var(--w-central-content) * 0.5); }
    .max-w-half-content-centered { margin-left: auto; margin-right: auto; }
}

.flex-v-spread {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}

.bold { font-weight: bold; }
.nobold { font-weight: normal !important; }
.italic { font-style: italic; }
.underline { text-decoration: underline; }
.uppercase, .text-upper, .text-uppercase { text-transform: uppercase; }
.text-justify { text-align: justify; }
.vmiddle { vertical-align: middle; }

.parent-hover:not(:hover) > .shown-parent-hover {
    display: none !important;
}
.parent-hover:hover > .shown-parent-hover-replacement {
    display: none !important;
}
.parent-hover:not(:hover) > .visible-parent-hover {
    visibility: hidden;
}