/* Modals */
.modal .modal-card.slide-in-right {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(200%, -50%);
    transition: transform 0.4s ease;
}

.modal.is-active .modal-card.slide-in-right {
    transform: translate(-50%, -50%);
}

.modal-card ul {
    left: 1em;
    position: relative;
}

.modal-card-foot {
    justify-content: right !important;
}


/* General layout helpers */
.is-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.is-fullscreen-with-navbar {
    position: absolute;
    left: 0em;
    top: 3.25rem;
    right: 0em;
    bottom: 0em;
    background-color: var(--body-background-color);
}

.is-fullscreen-with-navbar-and-margin {
    position: absolute;
    left: 1rem;
    top: 4.25rem;
    right: 1rem;
    bottom: 0rem;
    background-color: var(--body-background-color);
    padding-bottom: 1rem;
}

.is-full-size {
    position: absolute;
    left: 0em;
    top: 0em;
    right: 0em;
    bottom: 0em;
}

.dock-relative-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.is-rounded {
    border-radius: var(--radius) !important;
}

.is-centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

p {
    margin-bottom: 1em !important;
}

.is-only-hover-visible {
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
}

.is-only-hover-visible:hover,
.is-only-hover-visible:hover {
    opacity: 1;
}

.SimpleLayer:hover .is-only-hover-visible {
    opacity: 1 !important;
}



/* NavBar */
.navbar-item img {
    min-height: 2rem;
}

.navbar-item.has-dropdown .navbar-link::after {
    top: 1.7em
}

/* Navbar-Menu auf allen Geräten sichtbar */
.navbar-menu {
    display: flex !important;
    /* statt display: none auf Mobile */
}

/* Dropdown standardmäßig ausblenden */
.navbar-item.has-dropdown .navbar-dropdown {
    display: none;
    /* ausblenden, bis is-active */
}

/* Dropdown bei Klick (is-active) anzeigen */
.navbar-item.has-dropdown.is-active .navbar-dropdown {
    display: block;
}

.navbar .breadcrumb ul {
    display: flex !important;
    align-items: center !important;
    /* zentriert Text vertikal */
}

.breadcrumb li a {
    display: flex !important;
    align-items: center !important;
}


/* Project tiles */
.card.is-project-card:hover {
    background-color: var(--color-accent-one);
    transition: all 0.1s ease-out;
}

.card.is-project-card .card-content {
    height: 6em;
    max-height: 6em;
    overflow: hidden;
}

.card.is-project-card .card-image img {
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
}

.card.is-project-card .card-image:hover {
    opacity: 0.5;
}



/* Body and HTML */
body,
html {
    font-family: var(--body-family);
    background-color: var(--body-background-color);
}

/* Sidebars */
.panel {
    background-color: var(--color-white);
    margin: 0em;
    border-radius: var(--radius) !important;
}

.panel-heading {
    border-top-right-radius: var(--radius) !important;
    border-top-left-radius: var(--radius) !important;
    background-color: var(--color-white) !important;
}


/* color helpers */
.text-accent-one {
    color: var(--color-accent-one) !important;
}

.text-accent-two {
    color: var(--color-accent-two) !important;
}

.text-accent-three {
    color: var(--color-accent-three) !important;
}

.text-accent-four {
    color: var(--color-accent-four) !important;
}

.background-accent-one {
    background-color: var(--color-accent-one) !important;
}

.background-accent-two {
    background-color: var(--color-accent-two) !important;
}

.background-accent-three {
    background-color: var(--color-accent-three) !important;
}

.background-accent-four {
    background-color: var(--color-accent-four) !important;
}

/* flexgelöt */
.flex-container-horizontal {
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.flex-container-vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    padding-bottom: 1em;
    margin-bottom: -1em;
}

.flex-left,
.flex-top {
    flex: 0 0 auto;
    order: 0;
}

.flex-right,
.flex-bottom {
    flex: 0 0 auto;
    order: 100;
}

.no-flex-container {
    display: block !important;
}

.flex-container-horizontal>.flex-size-10 {
    width: 10%;
}

.flex-container-horizontal>.flex-size-15 {
    width: 15%;
}

.flex-container-horizontal>.flex-size-20 {
    width: 20%;
}

.flex-container-horizontal>.flex-size-25 {
    width: 25%;
}

.flex-container-horizontal>.flex-size-33 {
    width: 33.33%;
}

.flex-container-horizontal>.flex-size-50 {
    width: 50%;
}

.flex-container-horizontal>.flex-size-66 {
    width: 66.66%;
}

.flex-container-horizontal>.flex-size-75 {
    width: 75%;
}

.flex-container-vertical>.flex-size-10 {
    height: 10%;
}

.flex-container-vertical>.flex-size-15 {
    height: 15%;
}

.flex-container-vertical>.flex-size-20 {
    height: 20%;
}

.flex-container-vertical>.flex-size-25 {
    height: 25%;
}

.flex-container-vertical>.flex-size-33 {
    height: 33.33%;
}

.flex-container-vertical>.flex-size-50 {
    height: 50%;
}

.flex-container-vertical>.flex-size-66 {
    height: 66.66%;
}

.flex-container-vertical>.flex-size-75 {
    height: 75%;
}

.flex-fill {
    flex: 1;
}

.flex-splitter-vertical {
    width: 1rem;
    cursor: e-resize;
    background-color: transparent !important;
    flex-shrink: 0;
}

.flex-splitter-vertical:last-child,
.flex-splitter-vertical:first-child,
.flex-splitter-vertical:has(+ .is-hidden),
.is-hidden+.flex-splitter-vertical {
    display: none;
}



.flex-splitter-horizontal {
    height: 1rem;
    cursor: n-resize;
    background-color: transparent !important;
    flex-shrink: 0;
}

.flex-splitter-horizontal:last-child,
.flex-splitter-horizontal:first-child,
.flex-splitter-horizontal:has(+ .is-hidden),
.is-hidden+.flex-splitter-horizontal {
    display: none !important;
}


.pagecontrol-page {
    overflow: auto;
}

/* Optionales Ausblenden */
.flex-left:empty,
.flex-right:empty,
.flex-top:empty,
.flex-bottom:empty {
    display: none;
}

.flex-container-horizontal .panel,
.flex-container-vertical .panel {
    margin: 0 !important;
}


.flex-container-horizontal>[class*="flex-size-"] {
    flex-shrink: 0;
}

.grid {
    margin-top: -3.67rem;
    pointer-events: none;
}

.grid .dx-toolbar-after,
.grid .dx-datagrid-headers,
.grid .dx-datagrid-rowsview {
    pointer-events: auto;
}


.tabs .is-active {
    background-color: var(--color-electric-blue);
    color: var(--color-white) !important;
}

.tabs a:hover {
    background-color: var(--color-accent-one) !important;
}

.omni #appContainer {
    --size-1: 1.2rem;
    --size-2: 1.0rem;
    --size-3: 0.9rem;
    --size-4: 0.8rem;
    --size-5: 0.7rem;
    --size-6: 0.6rem;
    --size-7: 0.5rem;
}


input[type="checkbox"],
input[type="checkbox"]::after,
input[type="checkbox"]::before {
    accent-color: var(--color-primary) !important;
    /* position: relative;
    left: 0.3em;
    top: 0.1em; */
}

input[type="radio"],
input[type="radio"]::after,
input[type="radio"]::before {
    accent-color: var(--color-primary) !important;
}

.checkbox input[type="checkbox"] {
    margin-right: 0.5em;
}

input[type="checkbox"]:not(label *),
input[type="checkbox"]:not(label *)::after,
input[type="checkbox"]:not(label *)::before {
    position: relative;
    left: 0.3em;
    top: 0.1em;
}




.omni :is(label.radio, .label.radio, label.checkbox, .label.checkbox) {
    font-weight: normal !important;
}

.omni .columns.is-gapless:not(:last-child) {
    margin-bottom: 0rem;
}

.floating-block {
    float: left;
}

.floating-block-clear {
    clear: both;
}

.footer-section {
    background-color: var(--color-core-medium);
}

.footer-section * {
    color: var(--color-core-light) !important;
}

.footer-section .level-item a:hover {
    color: var(--color-nav-one) !important;
}