@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
/*--------------------------------------------------------------
# Tools For Bistro
--------------------------------------------------------------*/

/* Light mode */

.main-bg {
    background-color: var(--linkooc-bg) !important;
}

.secondary-bg {
    background-color: var(--linkooc-second-bg) !important;
}

.second-bg-on-hover:hover {
    background-color: var(--linkooc-hover-second-bg) !important;
}

.nav-link {
    color: var(--linkooc-text-display) !important;
}

    .nav-link.active, .nav-link:hover {
        background-color: var(--linkooc-hover-second-bg) !important;
        color: var(--linkooc-text-display) !important;
        font-weight: 500;
    }

    .nav-link .bi {
        color: var(--linkooc-text-secondary) !important;
    }

    .nav-link.active .bi, .nav-link:hover .bi {
        color: var(--linkooc-text-display-second) !important;
    }

.nav-item:hover, .nav-item:active {
    /*background-color: var(--linkooc-hover-second-bg) !important;*/
}

@media (min-width: 768px) {

    .navbar-expand-md .navbar-nav {
        flex-direction: column;
    }
}
/*--------------------------------------------------------------
# Split Button
--------------------------------------------------------------*/

.k-button-group > .k-button:first-child:not(:only-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
.k-button-group > .k-button:last-child:not(:only-child) {
    border-bottom-right-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}
}

/*--------------------------------------------------------------
# Progress Bar Animation
--------------------------------------------------------------*/
@keyframes progress-animate {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.progress {
    height: 0.1rem;
}

.progress-fill {
    background-color: var(--linkooc-button-primary) !important;
}

.progress-bar-animated {
    animation: progress-animate 7s linear infinite;
}

/*--------------------------------------------------------------
# BS Gutter
--------------------------------------------------------------*/
.row {
    --bs-gutter-x: 0 !important;
}

/*@media (min-width: 1024px) {

    .row {
        --bs-gutter-x: 1.5rem !important;
    }
}*/
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.k-content {
    background-color: var(--linkooc-bg) !important;
    color: var(--linkooc-text-secondary) !important;
}

.avatar {
    width: 96px;
    height: 96px;
}

@media (min-width: 1024px) {
    .avatar {
        width: 128px;
        height: 128px;
    }
}

.top-10 {
    top: 10% !important;
}
/*--------------------------------------------------------------
# Progress Bar
--------------------------------------------------------------*/

.k-progressbar .k-selected {
    color: #ffffff;
    background-color: #08781B !important;
}

/*--------------------------------------------------------------
# Modifier
--------------------------------------------------------------*/

.modifier-container {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(100%); /* Start hidden below */
    opacity: 0;
}

.bg-green-1:hover .modifier-container {
    transform: translateY(0); /* Move to original position */
    opacity: 1;
}

.bg-green-2:hover .modifier-container {
    transform: translateY(0); /* Move to original position */
    opacity: 1;
}

.page-bar:hover .modifier-container {
    transform: translateY(0); /* Move to original position */
    opacity: 1;
}

/*--------------------------------------------------------------
# Badge
--------------------------------------------------------------*/

.toolsforbistro-pill {
    background-color: var(--linkooc-hover-second-bg) !important;
}

.toolsforbistro-pill-online {
    padding-right: 25px !important;
}

.k-loader-primary {
    color: var(--linkooc-text-display-second) !important;
}

@media (min-width: 1024px) {
    .w-lg-50 {
        width: 50% !important;
    }
}
/*--------------------------------------------------------------
# Category Menu
--------------------------------------------------------------*/
.menu-category-card {
    max-height: 70px !important;
}


/*--------------------------------------------------------------
# Custom Style
--------------------------------------------------------------*/

.marker {
    position: absolute;
    z-index: 1;
    top: 0%;
    right: 45%;
    width: 40px;
    height: 20px;
}

.first-tab {
    z-index: 2;
    position: relative;
    height: 45px;
}

.second-tab {
    border-radius: 0 !important;
    border-bottom-left-radius: 0.5rem !important;
}

.custom-style-container {
    border-top-right-radius: 1.5rem !important;
    position: relative;
    overflow: hidden;
}

/*--------------------------------------------------------------
# Telerik Upload
--------------------------------------------------------------*/
.k-upload .k-dropzone, .k-upload .k-upload-dropzone {
    display: flex !important;
    flex-wrap: wrap !important;
}

/*--------------------------------------------------------------
# AOE4 Hero
--------------------------------------------------------------*/
/* Base Styles */
.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.margin-top-6 {
    margin-top: 1.5rem;
}

.margin-bottom-3 {
    margin-bottom: .75rem;
}

.margin-x-negative-4 {
    margin-left: -1rem;
    margin-right: -1rem;
}

.gap-3 {
    gap: .75rem;
}

.custom-width {
    width: 1100px;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.rounded-lg {
    border-radius: .5rem;
}

.overflow-hidden {
    overflow: hidden;
}

.flex-basis-1-6 {
    flex-basis: 16.666667%;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

.height-72 {
    height: 18rem;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.anchor-inherit {
    color: inherit;
    text-decoration: inherit;
}

.transition-duration-500 {
    transition-duration: .5s;
}

.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.background-position-top {
    background-position: top;
}

.background-cover {
    background-size: cover;
}

.width-full {
    width: 100%;
}

.height-full {
    height: 100%;
}

.opacity-100 {
    opacity: 1;
}

.text-center {
    text-align: center;
}

.button-as-text {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    text-align: inherit;
}

.absolute-center-horizontally {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.background-gradient {
    background-image: linear-gradient(to bottom, var(--gradient-stops));
}

.align-items-center {
    align-items: center;
}

.position-left-0 {
    left: 0;
}

.position-bottom-negative-6 {
    bottom: -1.5rem;
}

.drop-shadow-xl {
    filter: var(--tw-drop-shadow);
}

.ring {
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.border-black-opacity-30 {
    border-color: rgba(0, 0, 0, .3);
    border-width: 1px;
}

.rounded {
    border-radius: 1.5rem !important;
}

.width-auto {
    width: auto;
}

.fst-small {
    font-size: clamp(0.675rem, 0.5rem + 1vw, 0.875rem) !important
}

.fst-normal {
    font-size: clamp(0.6rem, 0.7rem + 1vw, 1.25rem) !important;
}

.k-window-title {
    font-size: clamp(0.6rem, 0.7rem + 1vw, 1.25rem) !important;
}

.py-3-responsive {
    padding-top: clamp(0rem, 0rem + 1vw, 1rem) !important;
    padding-bottom: clamp(0rem, 0rem + 1vw, 1rem) !important;
}

.pt-3-responsive {
    padding-top: clamp(0rem, 0rem + 1vw, 1rem) !important;
}

.height-12 {
    height: 3rem;
}

.block-middle {
    display: block;
    vertical-align: middle;
}

.line-height-tight {
    line-height: 1.25;
}

.font-bold {
    font-weight: 700;
}

.padding-x-1 {
    padding-left: .25rem;
    padding-right: .25rem;
}

.margin-bottom-4 {
    margin-bottom: 1rem;
}

.reset-margin {
    margin: 0;
}

.opacity-0 {
    opacity: 0;
}

/* Media Queries */
@media (min-width: 640px) {
    .sm-flex-wrap {
        flex-wrap: wrap;
    }

    .sm-width-auto {
        width: auto;
    }

    .sm-flex-basis-1-4 {
        flex-basis: 25%;
    }

    .sm-margin-x-0 {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 1024px) {
    .lg-flex-nowrap {
        flex-wrap: nowrap;
    }

    .lg-flex-basis-1-6 {
        flex-basis: 16.666667%;
    }
}

@media (min-width: 1280px) {
    .xl-height-96 {
        height: 24rem;
    }
}

@media (min-width: 576px) {
    /*.container, .container-sm {
        max-width: 645px !important;
    }*/
}

/*--------------------------------------------------------------
# Image component container
--------------------------------------------------------------*/
.image-component-container {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease, transform 0.3s ease;
}

    .image-component-container.loaded {
        opacity: 1;
    }

.image-zoom-in img {
    transition: transform 0.3s ease;
}

.image-zoom-in:hover img {
    filter: blur(2px) brightness(0.9);
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0); /* No background initially */
    transition: background 0.3s ease;
}

.image-component-container:hover .overlay {
    background: rgba(0, 0, 0, 0.001); /* Dark overlay */
    display: flex;
    align-items: start;
    justify-content: end;
}

.image-component-container .icon {
    display: none;
    color: white;
    margin: 10px;
    font-size: 24px;
}

.image-component-container:hover .icon {
    display: block;
}


/*--------------------------------------------------------------
# Ring container
--------------------------------------------------------------*/
.ring-container {
    position: relative;
    top: 2px;
    left: 8px;
}

.circle {
    width: 8px;
    height: 8px;
    background-color: var(--linkooc-text-display-second);
    border-radius: 50%;
    position: absolute;
}

.ringring {
    border: 3px solid var(--linkooc-text-display-second);
    -webkit-border-radius: 30px;
    height: 15px;
    width: 15px;
    position: absolute;
    left: -3px;
    top: -3px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    opacity: 0.0;
}

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0.0;
    }

    50% {
        opacity: 1.0;
    }

    100% {
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0.0;
    }
}

/*--------------------------------------------------------------
# Hide on mobile
--------------------------------------------------------------*/
.hide-on-mobile {
    display: none !important;
}

@media (min-width: 1024px) {
    .hide-on-mobile {
        display: block !important;
    }
}

/*--------------------------------------------------------------
# Show on mobile
--------------------------------------------------------------*/
.show-on-mobile {
    display: flex !important;
}

@media (min-width: 1024px) {
    .show-on-mobile {
        display: none !important;
    }
}


/*--------------------------------------------------------------
# Borders
--------------------------------------------------------------*/

.border-bottom {
    border-bottom: 1px solid var(--linkooc-border-color) !important;
}

.border-top {
    border-top: 1px solid var(--linkooc-border-color) !important;
}

/*--------------------------------------------------------------
# toggle-viewmode
--------------------------------------------------------------*/

.text-to-hide {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 0;
    transition: width 0.5s ease;
    vertical-align: top;
}

.toggle-viewmode:hover .text-to-hide {
    width: 100px;
    width: 120px;
    padding-left: 5px;
}

.toggle-viewmode .k-button-solid-base:focus, .toggle-viewmode .k-button-solid-base.k-focus {
    box-shadow: 0 0 0 0.25rem var(--linkooc-button-primary-rgba) !important;
}



@media (max-width: 767px) {

    .toggle-viewmode {
        font-size: 1rem !important;
        padding: .25rem !important;
        min-width: 40px !important;
    }

    .text-to-hide {
        display: none !important;
    }
}

/*--------------------------------------------------------------
# Radio List
--------------------------------------------------------------*/
.k-radio-list {
/*    border: 1px solid var(--linkooc-border-color) !important;
    border-radius: .25rem !important;
    padding: .5rem !important;*/
}

.k-radio-item, .k-radio-list-item {
    padding: .5rem !important;
}


/*--------------------------------------------------------------
# Tailwind like utilities
--------------------------------------------------------------*/
.vh-50 {
    height: 50vh !important;
}

.vh-25 {
    height: 25vh !important;
}

.vh-33 {
    height: 33vh !important;
}

.vh-75 {
    height: 75vh !important;
}

.vh-13 {
    height: 13vh !important;
}

.max-width-300 {
    max-width: 300px !important;
}

.min-vh-50 {
    min-height: 50vh !important;
}

.min-vh-40 {
    min-height: 40vh !important;
}

.min-vh-25 {
    min-height: 25vh !important;
}

.min-vh-33 {
    min-height: 33vh !important;
}

.min-vh-75 {
    min-height: 75vh !important;
}

.min-vh-13 {
    min-height: 13vh !important;
}

.max-vh-50 {
    max-height: 50vh !important;
}

.max-vh-40 {
    max-height: 40vh !important;
}

.max-vh-25 {
    max-height: 25vh !important;
}

.max-vh-33 {
    max-height: 33vh !important;
}

.max-vh-75 {
    max-height: 75vh !important;
}

.max-vh-13 {
    max-height: 13vh !important;
}

.max-vw-95 {
    max-width: 95vw !important;
}

@media (min-width: 1024px) {
    .w-md-50 {
        width: 50% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }

    .w-md-33 {
        width: 33% !important;
    }

    .w-md-75 {
        width: 75% !important;
    }

    .w-md-13 {
        width: 13.33% !important;
    }

    .vh-md-50 {
        height: 50vh !important;
    }

    .vh-md-25 {
        height: 25vh !important;
    }

    .vh-md-33 {
        height: 33vh !important;
    }

    .vh-md-75 {
        height: 75vh !important;
    }

    .vh-md-13 {
        height: 13vh !important;
    }
}

/*--------------------------------------------------------------
# List Item
--------------------------------------------------------------*/
.k-list-ul {
    padding: 0.3rem;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: #ffffff;
    background-color: var(--linkooc-button-primary) !important;
    border-radius: 1.5rem;
}

    .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
        color: #ffffff;
        background-color: var(--linkooc-button-primary) !important;
    }

.k-list-item:focus, .k-list-optionlabel:focus, .k-list-item.k-focus, .k-focus.k-list-optionlabel {
    box-shadow: 0 0 0 0.25rem var(--linkooc-button-primary-rgba) !important;
}
/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.k-button-solid-primary {
    color: white !important;
    border-color: var(--linkooc-button-primary) !important;
    background-color: var(--linkooc-button-primary) !important;
}

    .k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
        border-color: var(--linkooc-text-display-second) !important;
        background-color: var(--linkooc-text-display-second) !important;
    }

.k-button-solid-base.k-selected {
    border-color: var(--linkooc-button-primary) !important;
    color: white !important;
    background-color: var(--linkooc-button-primary) !important;
}

.k-button-solid-primary .k-button-solid-base:focus, .k-button-solid-primary .k-button-solid-base.k-focus {
    box-shadow: 0 0 0 0.25rem var(--linkooc-button-primary-rgba) !important;
}

.k-button-solid-primary:focus, .k-button-solid-primary.k-focus {
    box-shadow: 0 0 0 0.25rem var(--linkooc-button-primary-rgba) !important;
}

.k-button-md {
    border-radius: 1.5rem !important;
}

.k-input-md .k-input-button {
    border-radius: 0 !important;
}

.k-md-hidden span.k-button-text {
    display: none !important;
}

@media (min-width: 1024px) {
    .k-md-hidden span.k-button-text {
        display: block !important;
    }
}

.k-group-end.k-button-solid.k-rounded-md {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.k-group-start.k-button-solid.k-rounded-md {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.k-button:disabled, .k-button.k-disabled {
    opacity: 0.65 !important;
}
/*--------------------------------------------------------------
# Context Menu
--------------------------------------------------------------*/

.k-menu-item {
    margin: .5rem !important;
    color: var(--linkooc-text-secondary) !important;
    box-shadow: none;
    border-radius: 1.5rem !important;
    padding-bottom: 4px;
    padding-top: 4px;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 8px;
    margin-right: 8px;
}

    .k-menu-link.active, .k-menu-link:hover, .k-menu-item.active, .k-menu-item:hover {
        background-color: var(--linkooc-hover-second-bg) !important;
        color: var(--linkooc-text-display) !important;
        font-weight: 500;
    }

        .k-menu-link.active .k-icon, .k-menu-item.active .k-icon, .k-menu-item:hover .k-icon {
            color: var(--linkooc-text-display-second) !important;
        }

.k-menu-group, .k-menu.k-context-menu {
    background-color: var(--linkooc-second-bg) !important;
    border-color: var(--linkooc-border-color) !important;
}

.menu.k-context-menu .k-item:focus > .k-link {
    box-shadow: none !important;
}

.k-context-menu {
    border-radius: 1.5rem !important;
}
/*--------------------------------------------------------------
# Tooltip (not used)
--------------------------------------------------------------*/
.custom-tooltip {
    background-color: var(--background-color-reverse) !important;
    color: var(--text-color-reverse) !important;
    padding: 10px !important;
    margin: 5px !important;
    z-index: 4 !important;
    opacity: 1 !important;
}

    .custom-tooltip .tooltip-inner {
        background-color: var(--background-color-reverse) !important;
        color: var(--text-color-reverse) !important;
    }

/*--------------------------------------------------------------
# Breadcrumb 
--------------------------------------------------------------*/

.k-breadcrumb-root-item-container:hover, .k-breadcrumb-container:hover {
    background-color: var(--linkooc-hover-second-bg) !important;
    color: var(--linkooc-text-display) !important;
    font-weight: 500;
    border-radius: 1.5rem !important;
    cursor: pointer !important;
}

.k-breadcrumb-root-item-container {
    color: var(--linkooc-text-display) !important;
    font-weight: 500;
}

.k-breadcrumb {
    background-color: var(--linkooc-bg) !important;
}

.k-breadcrumb-root-link, .k-breadcrumb-item, .k-breadcrumb-link {
    text-decoration: none !important;
}

.k-breadcrumb-delimiter-icon {
    color: var(--linkooc-text-display-second) !important;
}

.k-breadcrumb-md .k-breadcrumb-link, .k-breadcrumb-md .k-breadcrumb-root-link {
    padding-block: 0 !important;
    padding-inline: 0 !important;
}

.k-breadcrumb-item-text {
    color: var(--linkooc-text-display) !important;
    display: block;
    padding: .5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/*--------------------------------------------------------------
# Accordion
--------------------------------------------------------------*/

.accordion-item {
    background-color: var(--linkooc-second-bg) !important;
    /* border: 1px solid var(--linkooc-border-color) !important;*/
}

.accordion-body {
    background-color: var(--linkooc-second-bg) !important;
    color: var(--linkooc-text) !important;
}

.accordion-button {
    background-color: var(--linkooc-second-bg) !important;
    color: var(--linkooc-text) !important;
}

    .accordion-button:focus {
        box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
    }

    .accordion-button:hover {
        background-color: var(--linkooc-hover-second-bg) !important;
        color: var(--linkooc-text-display) !important;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
        font-weight: 600 !important;
    }

        /* .accordion-button .bi, .accordion-button::after {
        color: var(--linkooc-text-secondary) !important;
    }*/

        .accordion-button.active .bi, .accordion-button:hover .bi, .accordion-button.active::after, .accordion-button:hover::after {
            color: var(--linkooc-text-display-second) !important;
        }

    .accordion-button:not(.collapsed)::after {
        background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23000000"%3e%3cpath fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/%3e%3c/svg%3e');
        transform: rotate(-180deg);
    }

@media (max-width: 1024px) {
    .accordion-body {
        padding: 0.5rem;
    }
}

/*--------------------------------------------------------------
# toolsforbistro-three-dots
--------------------------------------------------------------*/
.toolsforbistro-three-dots .bi-three-dots-vertical {
    color: var(--linkooc-text-display) !important;
}

.toolsforbistro-three-dots:hover .bi-three-dots-vertical {
    color: var(--linkooc-button-primary) !important;
}

.toolsforbistro-three-dots:hover {
    background-color: var(--linkooc-hover-second-bg) !important;
}

/*--------------------------------------------------------------
# Texts
--------------------------------------------------------------*/
.text-display {
    color: var(--linkooc-text-display);
}

.text-display-second {
    color: var(--linkooc-text-display-second) !important;
}

.text-display-second-on-hover:hover {
    color: var(--linkooc-text-display-second) !important;
}


.text-primary {
    color: var(--linkooc-text) !important;
}

.text-primary-reverse {
    color: var(--linkooc-reverse-text) !important;
}

.text-secondary {
    color: var(--linkooc-text-secondary);
}

.text-error {
    --bs-danger-bg-subtle: #dc3545;
    color: var(--bs-danger-bg-subtle);
}

.text-secondary-display {
    font-size: 1em;
    color: var(--linkooc-text-secondary);
}

.text-ternary-display {
    color: var(--linkooc-text-display-tertiary);
}

.text-button-primary {
    color: var(--linkooc-button-primary) !important;
}

.form-check-input:checked {
    background-color: var(--linkooc-button-primary) !important;
    border-color: var(--linkooc-button-primary) !important;
}

.form-check-input:focus {
    border-color: var(--linkooc-button-primary) !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.w-90 {
    width: 90% !important;
}

.hover-on-icon.active .bi, .hover-on-icon:hover .bi {
    color: var(--linkooc-text-display-second) !important;
}

.hover-on-card:hover {
    background-color: var(--linkooc-hover-second-bg) !important;
    color: var(--linkooc-text-display) !important;
}

/*--------------------------------------------------------------
# Custom Switch
--------------------------------------------------------------*/
.custom-switch-size-1 {
    --size: 1;
}

.custom-switch-size-2 {
    --size: 2;
}

.custom-switch-size-3 {
    --size: 3;
}

.custom-switch {
    --switch-width: calc(40px * var(--size)); /* 200px when --size is 5 */
    --switch-height: calc(20px * var(--size)); /* 100px when --size is 5 */
    --switch-circle-size: calc(18px * var(--size)); /* 90px when --size is 5 */
    --switch-circle-move: calc(100% - calc(19px * var(--size))); /* Correct position when toggled */
}

    .custom-switch input[type=checkbox] {
        height: 0;
        width: 0;
        visibility: hidden;
        position: absolute;
        margin: 0;
    }

    .custom-switch label {
        cursor: pointer;
        text-indent: -9999px;
        width: var(--switch-width);
        height: var(--switch-height);
        background: grey;
        display: block;
        border-radius: calc(20px * var(--size)); /* 100px when --size is 5 */
        position: relative;
        transition: background-color 0.3s;
    }

        .custom-switch label:after {
            content: '';
            position: absolute;
            top: calc(1px * var(--size)); /* 5px when --size is 5 */
            left: calc(1px * var(--size)); /* 5px when --size is 5 */
            width: var(--switch-circle-size);
            height: var(--switch-circle-size);
            background: #fff;
            border-radius: 50%; /* Fully rounded */
            transition: 0.3s;
        }

    .custom-switch input:checked + label {
        background: var(--linkooc-text-display-second); /* Color when the switch is active (on) */
    }

        .custom-switch input:checked + label:after {
            left: calc(100% - 2px);
            transform: translateX(-100%);
        }

    .custom-switch label:active:after {
        width: calc(21px * var(--size)); /* 130px when --size is 5 */
    }




/*--------------------------------------------------------------
# Tabs
--------------------------------------------------------------*/
li.k-tabstrip-items-wrapper li.k-item.k-active {
    background-color: var(--linkooc-hover-second-bg) !important;
    border-bottom-color: var(--linkooc-text-display-second) !important;
    font-weight: 500 !important;
    border-width: 2px !important;
    border-right-width: 0px !important;
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    margin-bottom: 0px !important;
}


.k-tabstrip-item {
    border-color: var(--linkooc-border-color) !important;
}

.k-tabstrip-items .k-item {
    border: 0 !important;
}

div.k-tabstrip-content, .k-tabstrip > .k-content {
    border: none !important;
}

.k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-bottom-width: 1px;
    border-color: var(--linkooc-border-color) !important;
}

    .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
        margin-bottom: 0px !important;
    }

.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected, li.k-tabstrip-item:hover {
    border-bottom-width: 2px !important;
    border-bottom-color: #22AD01 !important;
    border-bottom-style: solid !important;
    font-weight: 500 !important;
    background-color: var(--linkooc-hover-second-bg) !important;
    color: var(--linkooc-text-display) !important;
}
/*div.k-tabstrip-content, div.k-tabstrip > div.k-content {
    border: 0;
    z-index: 1;
}*/
/*div.k-tabstrip-top > .k-tabstrip-items-wrapper {
    border-bottom-width: 0px;
}*/
/*div.k-tabstrip-items-wrapper .k-item:hover, .k-tabstrip-items-wrapper .k-item.k-state-hover, .k-tabstrip-items-wrapper .k-item.k-hover {
    border-color: #e9ecef;
    color: #212529;
}*/
.k-tabstrip-items-wrapper .k-item {
    color: var(--linkooc-text-display) !important;
    border: 0 !important;
}

/*--------------------------------------------------------------
# Label
--------------------------------------------------------------*/

label {
    color: var(--linkooc-text-display) !important;
}

/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/
.k-grid {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg) !important;
}

.k-table-thead, .k-table-header, .k-table-group-sticky-header {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg) !important;
}

    .k-table-thead span.k-link {
        margin-left: 0.5rem !important;
    }

.k-column-title {
    font-size: 0.8em;
    color: var(--linkooc-text-secondary);
    font-weight: 500;
    margin-right: .5rem !important;
}

    .k-column-title:hover {
        font-size: 0.8em;
        color: var(--linkooc-text);
        font-weight: 500;
    }

.k-grid-header {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg) !important;
}

    .k-grid-header .k-sort-icon, .k-grid-header .k-sort-order {
        color: var(--linkooc-text-display-second) !important;
    }

.k-grid col.k-sorted, .k-grid .k-table-th.k-sorted {
    background-color: inherit !important;
}


.btn-select {
    color: var(--linkooc-text) !important;
}

.k-grid {
    border: 0 !important;
}

    .k-grid td {
        border-color: var(--linkooc-border-color) !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .k-grid a {
        color: var(--linkooc-text) !important;
        text-decoration: none !important;
    }

.k-grid-header .k-header {
    border-color: var(--linkooc-border-color) !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
}

.k-table-td {
    border-width: 0 !important;
}

.k-grid .k-table-alt-row {
    background-color: inherit !important;
}

.k-table-row {
    background-color: inherit !important;
}

.cursor-text {
    cursor: text !important;
}

.cursor-auto {
    cursor: auto !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.toolsforbistro-select {
    cursor: pointer;
}

    .toolsforbistro-select .bi-box-arrow-right {
        visibility: hidden !important;
    }

    .toolsforbistro-select:hover .bi-box-arrow-right {
        color: var(--linkooc-text-display-second) !important;
        visibility: visible !important;
    }

    .toolsforbistro-select:hover {
        background-color: var(--linkooc-hover-second-bg) !important;
        color: var(--linkooc-text-display-second) !important;
        font-weight: 500;
    }

/*--------------------------------------------------------------
# Menu Sortable List
--------------------------------------------------------------*/
.toolsforbistro-menu-item {
    border: 1px solid var(--linkooc-border-color) !important;
    border-radius: 1.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    margin-bottom: .5rem !important;
}

.toolsforbistro-item {
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

.toolsforbistro-tertiary-item {
    text-align: right;
}

.rounded-bottom-0 {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.rounded-top-0 {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

/*--------------------------------------------------------------
# K-Inputs
--------------------------------------------------------------*/
.k-input-solid {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg) !important;
}

    .k-input-solid:focus, .k-input-solid.k-focus {
        border-color: var(--linkooc-border-color) !important;
        color: var(--linkooc-text) !important;
        background-color: var(--linkooc-second-bg) !important;
        box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
    }

    .k-input-solid:focus-within {
        border-color: var(--linkooc-border-color) !important;
        color: var(--linkooc-text) !important;
        background-color: var(--linkooc-second-bg) !important;
        box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
    }
/*--------------------------------------------------------------
# Establishment Website pages carousel
--------------------------------------------------------------*/

.custom-slider-container {
    height: 100% !important;
}

.page-item {
    width: 10vw !important;
}

    .page-item.active {
        width: 50vw !important;
    }

.page-item-name {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.page-item-name-display {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

@media (min-width: 1440px) {
    .page-item {
        width: inherit !important;
    }

        .page-item.active {
            width: inherit !important;
        }

    .page-item-name {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .page-item-name-display {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }

    .custom-slider-container {
        height: 415px !important;
    }
}


.bg-color-item {
    transition: flex-basis 0.5s ease, opacity 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    border-radius: 1rem !important;
}

.flex-lg-4 {
    flex: 0 1 80%;
    opacity: 1;
}

.flex-lg-2 {
    flex: 0 1 0%;
}

/*--------------------------------------------------------------
# Establishment Edit
--------------------------------------------------------------*/

.establishment-website-link {
    cursor: pointer !important;
}

    .establishment-website-link:hover span {
        color: var(--linkooc-button-primary) !important;
        text-decoration: underline !important;
    }

/*--------------------------------------------------------------
# Preview Edit
--------------------------------------------------------------*/

.preview-website-link {
    cursor: pointer !important;
    transition: all 0.3s ease-in-out;
}

    .preview-website-link:hover {
        background-color: var(--linkooc-blue-var-1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

    .preview-website-link i {
        transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
        color: var(--bs-dark);
    }

    .preview-website-link:hover i {
        transform: rotate(20deg);
        color: #fff;
    }

    .preview-website-link span {
        color: var(--bs-dark);
        transition: color 0.3s ease-in-out;
    }

    .preview-website-link:hover span {
        color: #fff;
        text-decoration: none !important;
    }
/*--------------------------------------------------------------
# Radio
--------------------------------------------------------------*/

.k-radio:checked, .k-radio.k-checked {
    border-color: var(--linkooc-button-primary) !important;
    color: white;
    background-color: var(--linkooc-button-primary) !important;
}

    .k-radio:checked:focus, .k-radio.k-checked.k-focus {
        border-color: var(--linkooc-button-primary) !important;
        box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
    }
/*--------------------------------------------------------------
# No Elements Establishment
--------------------------------------------------------------*/
.custom-bg-container.no-element-establishment {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.no-element-establishment .custom-bg-container img.img-fluid {
    width: 100%;
    height: auto;
    display: block;
}

.no-element-establishment .overlay-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.no-element-establishment .small-image {
    position: absolute;
    width: 25%;
    height: auto;
}

.no-element-establishment .top-right {
    bottom: 158px;
    right: 90px;
    width: 45%;
    z-index: 3;
}

.no-element-establishment .center-middle {
    top: 35%;
    left: 69%;
    /* transform: translate(-50%, -50%); */
    width: 19%;
    z-index: 4;
}

.no-element-establishment .bottom-left {
    bottom: 74px;
    left: 27px;
    width: 57%;
    z-index: 0;
}

.no-element-establishment .between-center-bottom {
    bottom: 9%;
    width: 36%;
    left: 31%;
    /* transform: translateX(-50%); */
}

/*--------------------------------------------------------------
# No Elements Menus
--------------------------------------------------------------*/
.custom-bg-container.no-element-menus {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.no-element-menus .custom-bg-container img.img-fluid {
    width: 100%;
    height: auto;
    display: block;
}

.no-element-menus .overlay-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.no-element-menus .small-image {
    position: absolute;
    width: 25%;
    height: auto;
}

.no-element-menus .top-right {
    right: 30%;
    width: 40%;
    z-index: 3;
}

/*--------------------------------------------------------------
# matrixfilepicker-card
--------------------------------------------------------------*/

.matrixfilepicker-listview {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.matrixfilepicker-card .k-card {
    width: 150px;
    height: 200px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}


/*--------------------------------------------------------------
# card-list
--------------------------------------------------------------*/
.card-list {
    max-width: 1320px;
}
.toolsforbistro-card {
    width: 300px;

}
.establishment-card:hover.background-image {
    transform: scale(1.1);
}

.dropdown-list {
    width: fit-content !important;
    min-width: 300px !important;
}
/*--------------------------------------------------------------
# establishment-card
--------------------------------------------------------------*/
.establishment-card .k-card {
    width: 250px;
    height: 330px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .establishment-card .k-card .background-image {
        position: absolute;
        width: 100%;
        height: 100%;
        /*background-image: url('https://static.aoe4world.com/assets/dlc/jeannedarc-keyart-9211d43882d4504db014df06d685def484e90c37e44dd8596eda167a3202561a.jpg');*/
        background-image: url('bg-1.JPG');
        background-position: center;
        background-size: cover;
        transition: transform 0.8s cubic-bezier(0.5, 1, 0.89, 1);
    }

.bg-126 {
    background-image: url('bg-2.JPG') !important;
}

.bg-127 {
    background-image: url('bg-3.JPG') !important;
}

.bg-128 {
    background-image: url('bg-4.JPG') !important;
}

.bg-133 {
    background-image: url('bg-5.JPG') !important;
}

.bg-134 {
    background-image: url('bg-6.JPG') !important;
}

.g-4, .gy-4 {
    margin-top: calc(-1* 1.5rem) !important;
    margin-right: calc(-.5* 1.5rem) !important;
    margin-left: calc(-.5* 1.5rem) !important;
}

.visibleonhover {
    display: none !important;
}

.parentvisibleonhover:hover .visibleonhover {
    display: block !important;
}


i.bi.bi-info-circle {
    cursor: pointer !important;
}

.establishment-listview {
    overflow-y: auto !important;
    height: 75vh !important;
    overflow-x: hidden !important;
}




.establishment-card:hover .k-card .background-image {
    transform: scale(1.1);
}

.establishment-card .k-card > *:not(.background-image) {
    position: relative;
    z-index: 1;
}
/*
.establishment-card:hover .k-card::before {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*/
.k-card {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg) !important;
}

.k-card-reverse {
    border-color: var(--linkooc-reverse-border-color) !important;
    color: var(--linkooc-reverse-text) !important;
    background-color: var(--linkooc-reverse-second-bg);
}

.establishment-card .k-card-footer, .establishment-card .k-card-title {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg);
    opacity: 0;
}

.establishment-card:hover .k-card-footer {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text) !important;
    background-color: var(--linkooc-second-bg);
    opacity: 0.8;
}

    .establishment-card:hover .k-card-footer .k-card-title {
        border-color: var(--linkooc-border-color) !important;
        color: var(--linkooc-text) !important;
        background-color: var(--linkooc-second-bg);
        opacity: 1;
        font-weight: bold;
    }


/*--------------------------------------------------------------
# Popup
--------------------------------------------------------------*/
.k-popup {
    border-color: var(--linkooc-border-color) !important;
    color: var(--linkooc-text);
    background-color: var(--linkooc-second-bg);
    box-shadow: var(--kendo-elevation-4, 0px 6px 13px rgba(0, 0, 0, 0.125));
    border-radius: 1.5rem !important;
}

.custom-tooltip-class {
    z-index: 1100 !important;
}
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.root-container, root-container-collapsed {
    display: block;
}

.main {
    width: 100%;
}


@media (min-width: 768px) {
    .root-container {
        display: grid;
        grid-template-columns: auto 1fr;
        transition: 0.2s ease-in-out;
    }

    .root-container-collapsed .sidebar {
        width: 60px;
    }

    .sidebar {
        width: 200px;
        transition: width 0.2s ease-in-out;
        background: url(/Themes/ToolsForBistro.T4BTheme/custom-bg-sidebar.png) bottom right no-repeat;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        height: 100vh; /* Optional: to ensure the sidebar takes the full height of the viewport */
    }

    /*.root-container {
        display: grid;
        grid-template-columns: 200px auto;
        transition: width 0.5s ease-in-out;
    }
    .root-container-collapsed {
        display: grid;
        grid-template-columns: 60px auto;
        transition: width 0.5s ease-in-out;
    }*/

    .menu-scrollable {
        overflow-y: auto;
        max-height: 85vh;
    }
}

.sidebar {
    top: 0; /* Adjust this value based on your header's height if you have one */
    background-color: var(--linkooc-second-bg) !important;
    color: var(--linkooc-text-secondary) !important;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto; /* Enable scrolling within the sidebar if the content exceeds the viewport height */
    border-right: 1px solid var(--linkooc-border-color) !important;
    /*z-index: 1000;*/ /* Ensure the sidebar stays on top of other content */
}

.vh-100 {
    height: 100vh !important;
}

.navbar {
    height: 100vh;
}

.offcanvas {
    width: 200px;
    height: 100vh;
    transition: width 0.2s ease-in-out;
    z-index: 1050;
}

.menu-scrollable {
    flex: 1;
    overflow-y: auto;
}

.sidebar-header, .sidebar-footer {
    flex-shrink: 0;
}


.sidebar-header, .sidebar-footer {
    flex: 0 0 auto;
}

.sidebar-footer {
    background-color: var(--linkooc-second-bg) !important;
    position: absolute;
}

@media (min-width: 768px) {
    .sidebar-footer {
        bottom: 0;
    }
}

.menu-scrollable {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 85vh;
}

.sidebar-collapsed {
    width: 60px;
}

    .sidebar-collapsed .nav-link-text {
        display: none !important;
    }

/*--------------------------------------------------------------
# Reservations
--------------------------------------------------------------*/

.collapsed {
    height: 50px;
}

.bg-success-subtle {
    background-color: var(--bs-success-bg-subtle) !important;
}

/*--------------------------------------------------------------
# Custom ScrollBar
--------------------------------------------------------------*/
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffff;
    display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    display: none;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
        border-radius: 20px;
        display: block;
    }



/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
.main {
    flex: 1;
    background-color: var(--linkooc-bg) !important;
}


.content {
    /*padding-top: 5.25rem;*/
}

* {
    outline: none !important;
}

    *:not(.oi):not(.k-icon) {
        font-family: 'Inter', sans-serif;
    }

body {
    height: 100%;
    margin: 0;
    --bs-bg-opacity: 1;
}


span.k-state-disabled, span.k-disabled, .k-widget[disabled], .k-disabled {
    outline: none;
    cursor: default;
    opacity: 1 !important;
    filter: grayscale(0.1);
    pointer-events: none;
    box-shadow: none;
}

.table > :not(caption) > * > * {
    box-shadow: none;
}

.table .form-control {
    background-color: #ffffff !important;
    border-width: 0.5px !important;
    border-bottom-color: #ccc !important;
}

.table .form-select {
    background-color: #ffffff !important;
    border-width: 0.5px !important;
    border-bottom-color: #ccc !important;
}
/*
button.btn-primary,
a.btn-primary {
    color: var(--linkooc-bg);
    background: linear-gradient( 180deg, var(--linkooc-green-400), var(--linkooc-button-primary) ) repeat-x;
    border-color: var(--linkooc-green-400);
}

    button.btn-primary:focus,
    button.btn-primary.focus,
    a.btn-primary:focus,
    a.btn-primary.focus {
        color: var(--linkooc-bg);
        background: linear-gradient( 180deg, var(--linkooc-green-400), var(--linkooc-button-primary) ) repeat-x;
        border-color: var(--linkooc-green-400);
        box-shadow: 0 0 0 0.2rem color-mix( in srgb, var(--linkooc-green-400) 50%, transparent );
    }*/
.table .btn-primary {
    background-color: var(--bs-primary);
}

.table .btn-secondary {
    background-color: var(--bs-secondary);
}

.alert-dismissible .btn-close {
    z-index: 1;
}

.bg-grad-primary {
    background-image: linear-gradient(65deg, #0d6dfd 0, #1f3259 80%, #000044 100%);
}

.bg-grad-lightblue {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEF9FF), color-stop(40%, #fff));
    background-image: -webkit-linear-gradient(top, #EEF9FF 0, #fff 40%);
    background-image: -o-linear-gradient(top, #EEF9FF 0, #fff 40%);
    background-image: linear-gradient(to bottom, #EEF9FF 0, #fff 40%);
}

.pt-70 {
    padding-top: 70px;
}

.bg-blue {
    background-color: #007bff;
}

.shadow-ring {
    box-shadow: 0 0 0 0.25rem var(--linkooc-button-primary-rgba) !important;
}

.selected-bg {
    background-color: var(--linkooc-hover-second-bg) !important;
}

.shadow-existing-ring {
    box-shadow: 0 0 0 0.25rem #0d6efd6e !important;
}

.selected-existing-bg {
    background-color: #0d6efd17 !important;
}

.bg-danger {
    background-color: rgb(var(--bs-danger-rgb)) !important;
}

.bg-green:hover {
    border-color: var(--linkooc-text-display-second) !important;
    background-color: var(--linkooc-text-display-second) !important;
}

.bg-green-1 {
    background-color: var(--linkooc-green-var-1) !important;
}

    .bg-green-1:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-green-2 {
    background-color: var(--linkooc-green-var-2) !important;
}

    .bg-green-2:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-green-3 {
    background-color: var(--linkooc-green-var-3) !important;
}

    .bg-green-3:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-green-4 {
    background-color: var(--linkooc-green-var-4) !important;
}

    .bg-green-4:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-green-5 {
    background-color: var(--linkooc-green-var-5) !important;
}

    .bg-green-5:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-green-6 {
    background-color: var(--linkooc-green-var-6) !important;
}

    .bg-green-6:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-blue-1 {
    background-color: var(--linkooc-blue-var-1) !important;
}

    .bg-blue-1:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-blue-2 {
    background-color: var(--linkooc-blue-var-2) !important;
}

    .bg-blue-2:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-blue-3 {
    background-color: var(--linkooc-blue-var-3) !important;
}

    .bg-blue-3:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-blue-4 {
    background-color: var(--linkooc-blue-var-4) !important;
}

    .bg-blue-4:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-blue-5 {
    background-color: var(--linkooc-blue-var-5) !important;
}

    .bg-blue-5:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-blue-6 {
    background-color: var(--linkooc-blue-var-6) !important;
}

    .bg-blue-6:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-red-1 {
    background-color: var(--linkooc-red-var-1) !important;
}

    .bg-red-1:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-red-2 {
    background-color: var(--linkooc-red-var-2) !important;
}

    .bg-red-2:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-red-3 {
    background-color: var(--linkooc-red-var-3) !important;
}

    .bg-red-3:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-red-4 {
    background-color: var(--linkooc-red-var-4) !important;
}

    .bg-red-4:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-red-5 {
    background-color: var(--linkooc-red-var-5) !important;
}

    .bg-red-5:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-red-6 {
    background-color: var(--linkooc-red-var-6) !important;
}

    .bg-red-6:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-orange-1 {
    background-color: var(--linkooc-orange-var-1) !important;
}

    .bg-orange-1:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-orange-2 {
    background-color: var(--linkooc-orange-var-2) !important;
}

    .bg-orange-2:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-orange-3 {
    background-color: var(--linkooc-orange-var-3) !important;
}

    .bg-orange-3:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-orange-4 {
    background-color: var(--linkooc-orange-var-4) !important;
}

    .bg-orange-4:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-orange-5 {
    background-color: var(--linkooc-orange-var-5) !important;
}

    .bg-orange-5:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-orange-6 {
    background-color: var(--linkooc-orange-var-6) !important;
}

    .bg-orange-6:hover .modifier-container {
        transform: translateY(0); /* Move to original position */
        opacity: 1;
    }

.bg-success {
    background-color: var(--linkooc-button-primary) !important;
}


.bg-ai {
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    line-height: 1.6 !important;
    border: none !important;
    background: hsla(108, 99%, 34%, 1);
    background: linear-gradient(270deg, hsla(108, 99%, 34%, 1) 0%, hsla(130, 87%, 15%, 1) 100%) !important;
    background: -moz-linear-gradient(270deg, hsla(108, 99%, 34%, 1) 0%, hsla(130, 87%, 15%, 1) 100%) !important;
    background: -webkit-linear-gradient(270deg, hsla(108, 99%, 34%, 1) 0%, hsla(130, 87%, 15%, 1) 100%) !important;
}

    .bg-ai:hover {
        background: hsla(108, 99%, 34%, 1) !important;
        background: linear-gradient(90deg, hsla(108, 99%, 34%, 1) 0%, hsla(108, 99%, 49%, 1) 100%) !important;
        background: -moz-linear-gradient(90deg, hsla(108, 99%, 34%, 1) 0%, hsla(108, 99%, 49%, 1) 100%) !important;
        background: -webkit-linear-gradient(90deg, hsla(108, 99%, 34%, 1) 0%, hsla(108, 99%, 49%, 1) 100%) !important;
    }

.bg-warning {
    background-color: rgb(var(--bs-warning-rgb)) !important;
}

.bg-azul {
    background-color: #0070BB !important;
}

.bg-bronze {
    background-color: #CD7F32 !important;
}

.bg-indigo {
    background-color: #6F00FF !important;
}

.bg-navy {
    background-color: #001f3f;
}

.bg-maroon {
    background-color: #800000;
}

.bg-brown {
    background-color: #8B4513;
}

.bg-purple {
    background-color: #6f42c1;
}

.bg-pink {
    background-color: #ff69b4;
}

.bg-magenta {
    background-color: #ff00ff;
}

.bg-red {
    background-color: #dc3545;
}

.bg-orange {
    background-color: #fd7e14;
}

.bg-yellow {
    background-color: #ffc107;
}

.bg-lime {
    background-color: #01ff70;
}

.bg-green {
    background-color: #28a745;
}

.bg-teal {
    background-color: #20c997;
}

.bg-cyan {
    background-color: #17a2b8;
}

.bg-gray {
    background-color: #6c757d;
}

.bg-white {
    background-color: #ffffff;
}

.bg-avocado {
    background-color: #568203;
}


.bg-gluten {
    background-color: #F5E6D3;
}

.bg-crustacean {
    background-color: #FFE4E1;
}

.bg-egg {
    background-color: #FFF8DC;
}

.bg-fish {
    background-color: #E0F6FF;
}

.bg-peanut {
    background-color: #F5E6D3;
}

.bg-soy {
    background-color: #E8F5E8;
}

.bg-milk {
    background-color: #F0F8FF;
}

.bg-nuts {
    background-color: #F4E4BC;
}

.bg-celery {
    background-color: #E8F5E8;
}

.bg-mustard {
    background-color: #FFF8DC;
}

.bg-sesame {
    background-color: #F5E6D3;
}

.bg-sulfite {
    background-color: #F0E6FF;
}

.bg-lupin {
    background-color: #F5E6FF;
}

.bg-mollusc {
    background-color: #E0F6FF;
}

.bg-no-allergen {
    background-color: #F8F8F8;
}

.bg-aerial {
    background-color: #563D65;
}

.bg-delicate {
    background-color: #E5B94E;
}

.bg-canaille {
    background-color: #983023;
}

.bg-tendre {
    background-color: #A63F2C;
}

.bg-vif {
    background-color: #C2A269;
}

.bg-generous {
    background-color: #697000;
}

.bg-charnel {
    background-color: #5E251A;
}

.bg-powerful {
    background-color: #231C12;
}

/* New classes */
.bg-robust {
    background-color: #8B5E3C;
}

.bg-luscious {
    background-color: #B45F06;
}

.bg-warm {
    background-color: #D2691E;
}

.bg-harmony {
    background-color: #A8A9AD;
}

.bg-fresh {
    background-color: #7FFFD4;
}

.bg-fruity {
    background-color: #FF8C00;
}

.bg-bright {
    background-color: #FFD700;
}

.bg-classic {
    background-color: #708090;
}

.bg-berry {
    background-color: #8B0000;
}

.bg-spritzy {
    background-color: #00CED1;
}

.bg-color-primary {
    background-color: var(--linkooc-button-primary) !important
}

.bg-color-display {
    background-color: var(--linkooc-text-display) !important
}

.bg-color-secondary {
    background-color: var(--linkooc-text-secondary) !important
}

.bg-color-display-second {
    background-color: var(--linkooc-text-display-second) !important
}

.bg-color-display-tertiary {
    background-color: var(--linkooc-text-display-tertiary) !important
}

.rounded {
    border-radius: 2.25rem !important;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.min-vh-45 {
    min-height: 45vh !important;
}

.controls {
    z-index: 2000;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 10px;
}

.controls-group {
    display: flex;
}

.app-menu .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .app-menu .nav-item a {
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        padding-left: 1rem;
    }

        .app-menu .nav-item a.active {
            background-color: rgba(255,255,255,0.25);
            color: white;
        }

        .app-menu .nav-item a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

.app-menu .nav-link .oi {
    width: 1.5rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-toggler {
    border: none;
}

.btn-outline-secondary {
    color: #f8f9fa;
    border: none;
}

div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
    color: #000000;
}

div.k-grid-header-wrap {
    border-right-width: 0px;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.text-underline {
    cursor: pointer;
    text-decoration: underline;
}

.text-underline-on-hover:hover {
    text-decoration: underline;
}

/*
.k-grid-header .k-header {
    text-align: center;
}

tr.k-master-row td.k-grid-content-sticky {
    border-color: rgb(222, 226, 230);
    color: #212529;
    background-color: #ffffff;
    border-top-color: #dee2e6;
}

tr.k-grid-header tr.k-grid-header-sticky {
    color: #212529;
    background-color: #f8f9fa;
    border-color: rgb(222, 226, 230);
}
*/
div.hidden {
    color: white;
}

div.hovering {
    color: gray;
}


.alert-dismissible {
    width: 93%;
}

div.custom-alert-primary {
    color: #cfe2ff;
    background-color: #cfe2ff;
    position: relative;
    z-index: 100;
}

div.builder-module-card {
    position: relative;
}

.fullrowwidth {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.z-index-10000 {
    z-index: 10000;
}

.z-index-10 {
    z-index: 10;
}

div.blazored-toast-container {
    z-index: 10100 !important;
    max-width: 90vw;
}

div.position-bottomright {
    margin-left: 4.5vw;
}
/*--------------------------------------------------------------
# Shake Button
--------------------------------------------------------------*/
.shake-vertical {
    -webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-vertical 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/**
 * ----------------------------------------
 * Document Designer
 * ----------------------------------------
 */
.slide-out {
    transition: transform 0.5s ease-in-out, opacity 0.5s, visibility 0s 0.5s, max-height 0.5s ease-in-out;
    transform: translateY(-100%);
    visibility: hidden; /* Hides the element after transition */
    opacity: 0;
    max-height: 0; /*Collapse the element after transition */
    overflow: hidden; /* Prevents content from spilling out during collapse */
}

.slide-in {
    transition: transform 0.5s ease-in-out, opacity 0.5s, visibility 0s, max-height 0.5s ease-in-out;
    transform: translateY(0%);
    opacity: 1;
    visibility: visible; /* Shows the element */
    max-height: 100%; /* Adjust as per the max height of your content */
    overflow: hidden;
}

.navbar {
    display: block !important;
}

.multi-line {
    right: 30px !important;
}

.right-5 {
    right: 5%;
}

/*--------------------------------------------------------------
# Window Telerik blazor
--------------------------------------------------------------*/

.k-window {
    border-color: var(--linkooc-border-color) !important;
    background-color: var(--linkooc-second-bg) !important;
    color: var(--linkooc-text) !important;
}

.k-window-titlebar {
    border-color: var(--linkooc-border-color) !important;
    background: url(/Themes/ToolsForBistro.T4BTheme/custom-bg-topbar-2.png) top right no-repeat;
}

.k-window-content {
    background: url(/Themes/ToolsForBistro.T4BTheme/custom-bg-topbar-3.png) bottom right no-repeat !important;
}

.k-window.telerik-blazor {
    max-width: 95%;
    width: 95%;
    max-height: 90%;
}

@media (min-width: 1024px) {
    .k-window.telerik-blazor {
        max-width: none !important;
        width: 70% !important;
        max-height: 90% !important;
        min-height: 400px !important;
    }

        .k-window.telerik-blazor.k-window-size-20 {
            max-width: none !important;
            width: 20% !important;
            max-height: 90% !important;
            min-height: 300px !important;
        }

        .k-window.telerik-blazor.k-window-size-30 {
            max-width: none !important;
            width: 30% !important;
            max-height: 90% !important;
        }

        .k-window.telerik-blazor.k-window-size-40 {
            max-width: none !important;
            width: 30% !important;
            max-height: 90% !important;
        }

        .k-window.telerik-blazor.k-window-size-90 {
            max-width: none !important;
            width: 90% !important;
            max-height: 90% !important;
        }

        .k-window.telerik-blazor.k-window-size-60 {
            max-width: none !important;
            width: 60% !important;
            max-height: 90% !important;
        }

    .k-window.telerik-blazor {
        max-width: none !important;
        width: 70% !important;
        max-height: 90% !important;
    }

        .k-window.telerik-blazor.loading-cook-ai {
            max-height: 250px !important;
            max-width: 330px !important;
        }

        .k-window.telerik-blazor.w-40 {
            width: 40% !important;
        }
}

/**
 * ----------------------------------------
 * animation shake-vertical
 * ----------------------------------------
 */
@-webkit-keyframes shake-vertical {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%, 40%, 60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

@keyframes shake-vertical {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%, 40%, 60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}
/*--------------------------------------------------------------
# Animation blink
--------------------------------------------------------------*/
/*//animation: blink 2s infinite;*/
@keyframes blink {
    0%, 100% {
        border-color: transparent;
        color: transparent;
    }

    50% {
        border-color: #fc1d1d;
        color: #fc1d1d;
    }
}
/*--------------------------------------------------------------
# Menu Designer
--------------------------------------------------------------*/

.isSelected {
    /*border: solid 2px #6f42c1;*/
}

.elementOnDocument.secondary-items {
    border: 1mm solid #6f42c1;
    filter: opacity(0.2);
}

.elementOnDocument.hovered {
    border: 1mm solid #6f42c1;
}

.data-canvas.elementOnDocument.secondary-items {
    border: 1mm solid #ffc107;
    filter: opacity(0.2);
}

    .data-canvas.elementOnDocument.secondary-items.isSelected {
        border: 1mm solid #ffc107;
        filter: opacity(1);
    }

.elementOnDocument button {
    /*    background-color: transparent;
    color: transparent;
    border-color: transparent;*/
    display: none;
}

.k-menu-group .k-item:focus > .k-link, .k-menu-group .k-item.k-focus > .k-link, .k-menu.k-context-menu .k-item:focus > .k-link, .k-menu.k-context-menu .k-item.k-focus > .k-link {
    box-shadow: none !important;
}

.elementOnDocument.hovered button {
    display: block;
}

.editpencilbutton {
    display: none !important;
}

.hovered .editpencilbutton {
    background-color: #6f42c1;
    color: #fff;
    display: block !important;
}

.editpencilbutton.elementOnDocument.hovered button {
    background-color: #6f42c1;
    color: #fff;
}

.elementOnDocument {
    position: absolute;
    cursor: grab;
}

body.designerIsOpened div.k-tabstrip-items-wrapper {
    z-index: 1;
}

body.designerIsOpened button.telerik-blazor.k-button.k-input-button.k-button-solid.k-bg-light.k-button-rectangle.k-button-md.k-button-solid-base.k-icon-button.k-rounded-md.k-rounded-left-0 {
    z-index: 1 !important;
}

.mainBlockClass img {
    width: 100%;
    height: 100%;
}

.draggable {
    border: 1mm solid transparent;
}

    .draggable:hover {
        /* filter: brightness(85%);*/
    }


.resize-handle-bottom-class {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 20px;
    background-color: transparent;
    cursor: ns-resize;
}

.resize-handle-right-class {
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    width: 20px;
    height: 20%;
    min-height: 40px;
    background-color: transparent;
    cursor: ew-resize;
}

.icon-center {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    color: transparent;
}

.hovered .icon-center {
    color: white;
}
/*--------------------------------------------------------------
# NavBar
--------------------------------------------------------------*/

ul, li {
    list-style: none;
}

.dropdown-menu {
    z-index: 1000; /* Adjust this value based on your needs */
}

.custom-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900; /* Ensure this value is lower than the dropdown z-index */
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and transparency as needed */
    display: none;
    /*display: block;*/
}

.show-backdrop {
    display: block;
}
/*
#maincontainer .hovered {
    filter: blur(2px);
}

.dropdown-toggle::after {
    margin-left: 0.5em;
}*/
/*--------------------------------------------------------------
# Animation container
--------------------------------------------------------------*/
.k-animation-container {
    border-radius: 1.5rem !important;
}

/*.k-overlay {
    border-radius: 1.5rem !important;
}
*/
/*--------------------------------------------------------------
# Login
--------------------------------------------------------------*/
.fade-in-up {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

.fade-in-left {
    -webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.animated-once-slower {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}
/**
 * ----------------------------------------
 * animation fade-in-left
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
/* * ----------------------------------------
 * Login
 * ----------------------------------------*/
.Oqtane-Modules-Admin-Login {
    max-width: 300px;
    min-width: 200px;
}

@media (min-width: 768px) {

    .Oqtane-Modules-Admin-Login {
        max-width: 400px;
        min-width: 350px;
    }
}


.btn-grad-login {
    background-image: linear-gradient(to right, #0d6dfd 0%, #1f3259d4 51%, #000428 100%);
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    display: block;
}

    .btn-grad-login:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

button.btn-grad-primary {
    background-image: linear-gradient(to right, #4776E6 0%, #8E54E9 51%, #4776E6 100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
}

    button.btn-grad-primary:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }

/*.k-button-solid-base {
    color: white !important;
    border-color: var(--linkooc-button-primary) !important;
    background-color: var(--linkooc-button-primary) !important;
}

    .k-button-solid-base:hover, .k-button-solid-base.k-hover {
        color: white !important;
        border-color: var(--linkooc-text-display-second) !important;
        background-color: var(--linkooc-text-display-second) !important;
    }
*/
.btn-establishment-picker {
    background-color: var(--linkooc-hover-second-bg) !important;
    color: var(--linkooc-text-display) !important;
    font-weight: 500;
    font-size: 25px;
    line-height: 30px;
}

/* Small screens */
.button-switch-category {
    width: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .button-switch-category .k-button-text {
        display: flex;
        align-items: center;
        visibility: hidden;
        position: relative;
    }

        .button-switch-category .k-button-text .bi {
            visibility: visible;
            position: absolute;
            right: 0;
            left: 0;
            margin: auto;
        }

/* Larger screens */
@media (min-width: 768px) {
    .button-switch-category {
        width: auto !important;
    }

        .button-switch-category .k-button-text {
            visibility: visible;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .button-switch-category .k-button-text .bi {
                position: relative;
                right: auto;
                left: auto;
                margin: 0;
            }
}


.btn:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
}


@media (min-width: 768px) {
    .navbar-expand-md .offcanvas {
        position: fixed;
        bottom: 0;
        z-index: 1045;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        visibility: hidden !important;
        background-color: #fff;
        background-clip: padding-box;
        outline: 0;
        transition: transform .3s ease-in-out;
    }

        .navbar-expand-md .offcanvas.show {
            visibility: visible !important;
        }

    .navbar-expand-md .offcanvas-header {
        display: flex;
    }

    .navbar-expand-md .offcanvas-body {
        padding: 1rem 1rem;
    }
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 2100px !important;
    }


    /*   @media (max-width: 767px) {
        .app-menu {
            width: 100%
        }

        .navbar {
            position: fixed;
            top: 60px;
            width: 100%;
        }

        .controls {
            height: 60px;
            top: 15px;
            position: fixed;
            top: 0px;
            width: 100%;
            background-color: rgb(0, 0, 0);
        }

        .controls-group {
            display: flex;
        }

        .content {
            position: relative;
            top: 60px;
        }
    }*/

    .matrixlist {
        /* min-height: 650px;*/
    }

    div.sk-chasing-dots {
        margin: 120px auto;
        width: 120px;
        height: 120px;
    }

    div.sk-double-bounce div.sk-child {
        background-color: #0d6efd;
    }

    .underline {
        text-decoration: underline;
    }

    div.btn-outline-secondary {
        color: #f8f9fa;
        /* border-color: #f8f9fa; */
    }

    .border {
        border: 1px solid var(--linkooc-border-color) !important;
    }

    div.bordered {
        /*border: 1px #dee2e6 solid;*/
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: .25rem;
    }

    div.bordered-only {
        border: 1px #dee2e6 solid;
        padding: 0;
        border-radius: .25rem;
    }

    div.padded {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
    }

    div.dropdown-menu {
        /*background-color: #0d6efd;*/
    }

    .container {
        margin-right: 0;
        margin-left: 0;
    }

    div.cmt-2 {
        margin-top: 0.5rem !important;
    }

    div.cml-2 {
        margin-left: 0.5rem !important;
    }

    div.cmt-4 {
        margin-top: 1.5rem !important;
    }

    div.cml-4 {
        margin-left: 1.5rem !important;
    }

    div.cmt-6 {
        margin-top: 2.5rem !important;
    }

    div.cml-6 {
        margin-left: 2.5rem !important;
    }

    div.cmt-8 {
        margin-top: 3.5rem !important;
    }

    div.cml-8 {
        margin-left: 3.5rem !important;
    }

    div.cmt-10 {
        margin-top: 4.5rem !important;
    }

    div.cml-10 {
        margin-left: 4.5rem !important;
    }

    div.cmt-12 {
        margin-top: 5.5rem !important;
    }

    div.cml-12 {
        margin-left: 5.5rem !important;
    }

    .mt-6 {
        margin-top: 2.5rem !important;
    }

    div.k-tabstrip > .k-content {
        padding: 1rem;
    }

    .mcol-1 {
        max-width: 300px;
    }

    .mcol-2 {
        max-width: 600px;
    }

    .mcol-3 {
        max-width: 900px;
    }

    .mcol-4 {
        max-width: 1200px;
    }

    .mcol-5 {
        max-width: 1500px;
    }

    .mcol-6 {
        width: 800px;
    }

    .mcol-7 {
        width: 700px;
    }

    div.mp-disabled {
        background-color: #dee2e6;
    }

        div.mp-disabled:hover {
            background-color: #dee2e6;
        }

    div.matrix-button-icon {
        margin-left: 50px;
        padding-top: 12px;
        width: 50px;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

        div.matrix-button-icon:hover {
            border-color: #0d6efd;
            color: #ffffff;
            background-color: #0d6efd;
        }

    .mrow-1 {
        min-height: 50px;
    }

    .mrow-2 {
        min-height: 300px;
    }

    .mrow-3 {
        min-height: 450px;
    }

    .mrow-4 {
        min-height: 600px;
    }

    .mrow-5 {
        min-height: 750px;
    }

    .mrow-6 {
        min-height: 900px;
    }

    .mdrow-1 {
        /*min-height: 90px;*/
        min-height: 45px;
    }

    .mdrow-2 {
        /*min-height: 180px;*/
        min-height: 90px;
    }

    .mdrow-3 {
        min-height: 270px;
    }

    .mdrow-4 {
        min-height: 360px;
    }

    .mdrow-5 {
        min-height: 450px;
    }

    .mdrow-6 {
        min-height: 540px;
    }

    .mselected {
        color: #0f5132;
        background-color: #d1e7dd;
        border-color: #badbcc;
    }

    span.app-tooltip::before, span.app-tooltip::after {
        z-index: 200000;
    }
}

.floatright {
    float: right;
}

.largebutton {
    min-width: 140px;
}

.reversedRow {
    display: flex;
    flex-flow: column-reverse;
}

.row-gap-2 {
    row-gap: .5rem !important;
}

div.k-grid-layout {
    row-gap: 0px;
}

/*Remove title from Oqtane*/
.app-moduletitle {
    display: none;
}

.app-rule {
    display: none;
}
/*--------------------------------------------------------------
# Notes module
--------------------------------------------------------------*/

.notes-line {
    width: 43%;
    height: 0;
    border: 1px solid #C4C4C4;
    margin: 3px;
    display: inline-block;
}

.notes-date {
    display: inline-block;
    font-size: small;
    white-space: pre;
}

.notes-container {
    border-radius: 10px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
    max-width: 95%;
    padding: 0.5rem !important;
}

    .notes-container:hover {
        background-color: lightgrey;
    }

/*--------------------------------------------------------------
# Theme module
--------------------------------------------------------------*/

.matrix-template .card {
    color: rgba(0,0,0,.8);
}

.matrix-template-objectname {
    max-width: 400px;
    margin-bottom: 15px !important;
}

.template-selected .card-body {
    color: whitesmoke;
    background: rgba(11, 94, 215, .5);
}

.template-selected .fw-light {
    color: whitesmoke;
}

.template-selected .card-header {
    color: #fff;
    background-color: #0b5ed7;
}

.template-selected {
    border: 0px #007bff solid !important;
}


/*--------------------------------------------------------------
# Error message component
--------------------------------------------------------------*/

.tooltip {
    position: absolute;
    z-index: 1;
    background-color: #000;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    left: 0;
    top: 100%;
    visibility: visible;
}

    .tooltip::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 10px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #000 transparent;
    }

/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/

.k-slider .k-slider-selection {
    background-color: #054810 !important;
}

.k-slider .k-draghandle {
    border-color: #054810 !important;
    color: white;
    background-color: #054810 !important;
    border-radius: 50%;
}



    .k-slider .k-draghandle:active, .k-slider .k-draghandle.k-pressed {
        border-color: #0548101f !important;
        color: white;
        background-color: #0548101f !important;
    }

/*--------------------------------------------------------------
# Item Configurator module
--------------------------------------------------------------*/

div.ic-card {
    min-height: 80px;
}


/*--------------------------------------------------------------
# Applications module
--------------------------------------------------------------*/
.applications-title {
    color: #1579c4 !important;
    text-align: center;
}

    .applications-title h2 {
        color: #ffffff !important;
        text-align: center;
    }

.applications-approach {
    color: #212427 !important;
    text-align: justify;
    margin-top: 15px;
    font-size: 20px;
}

.applications-t4b-container {
    border-radius: 10px;
    border: 1px solid #efefef;
    margin-bottom: 30px;
}

    .applications-t4b-container:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

.applications-subtitle {
    opacity: 0.8;
    color: #ffffff;
    font-style: italic;
}

.applications-name {
    color: #1579c4 !important;
    text-align: left;
    font-size: 14px;
    margin-bottom: 0;
}

.applications-description {
    color: #212427 !important;
    text-align: justify;
    font-size: 14px;
    margin-bottom: 0;
}

.applications-icon {
    text-align: center;
    background-color: darkturquoise;
    width: 33px;
    height: 33px;
    border-radius: 10px;
}

.applications-t4b-icon {
    text-align: center;
    font-size: 4rem;
    color: #1579c4;
    background-color: #f8f9fa;
}

.applications-container:hover .howwedoit-icon {
    color: #ffffff;
    border: 6px solid #ffffff;
    background-color: #1579c4;
}

.applications-container {
    border-radius: 10px;
    border: 1px solid #efefef;
    margin-bottom: 30px;
    padding: 1.5rem !important;
}

    .applications-container:hover {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

.applications:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url(images/overlay-round.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: -1;
}


/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
    .largebutton {
        width: 100%;
        min-width: 150px;
    }
}


/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
    .applications-icon {
        text-align: center;
        font-size: 4rem;
        color: #1579c4;
    }


    /*align cntent horizontaly*/
    /*.col-12 {
        width: 106%;
    }*/

    .application-container {
        padding: inherit;
    }

    /*--------------------------------------------------------------
    # List View (List module)
    --------------------------------------------------------------*/

    div.k-listview-content {
        margin: 0;
        padding: 0;
        outline: 0;
        flex-grow: 1;
        display: grid;
        position: relative;
        overflow: auto;
        gap: 30px 15px;
        grid-template-columns: repeat(auto-fill, 100%);
    }
}


/*--------------------------------------------------------------
# Include all css for SpinKit loading
--------------------------------------------------------------*/

:root {
    --sk-size: 40px;
    --sk-color: #333
}

.sk-center {
    margin: auto
}

.sk-plane {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    animation: sk-plane 1.2s infinite ease-in-out
}

@keyframes sk-plane {
    0% {
        transform: perspective(120px) rotateX(0) rotateY(0)
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0)
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)
    }
}

.sk-chase {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    animation: sk-chase 2.5s infinite linear both
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2.0s infinite ease-in-out both
}

    .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: var(--sk-color);
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both
    }

    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s
    }

    .sk-chase-dot:nth-child(2) {
        animation-delay: -1.0s
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1.0s
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s
    }

@keyframes sk-chase {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes sk-chase-dot {
    80%,100% {
        transform: rotate(360deg)
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4)
    }

    100%,0% {
        transform: scale(1.0)
    }
}

.sk-bounce {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-bounce-dot {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--sk-color);
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    animation: sk-bounce 2s infinite cubic-bezier(0.455,0.03,0.515,0.955)
}

    .sk-bounce-dot:nth-child(2) {
        animation-delay: -1.0s
    }

@keyframes sk-bounce {
    0%,100% {
        transform: scale(0)
    }

    45%,55% {
        transform: scale(1)
    }
}

.sk-wave {
    width: var(--sk-size);
    height: var(--sk-size);
    display: flex;
    justify-content: space-between
}

.sk-wave-rect {
    background-color: var(--sk-color);
    height: 100%;
    width: 15%;
    animation: sk-wave 1.2s infinite ease-in-out
}

    .sk-wave-rect:nth-child(1) {
        animation-delay: -1.2s
    }

    .sk-wave-rect:nth-child(2) {
        animation-delay: -1.1s
    }

    .sk-wave-rect:nth-child(3) {
        animation-delay: -1.0s
    }

    .sk-wave-rect:nth-child(4) {
        animation-delay: -0.9s
    }

    .sk-wave-rect:nth-child(5) {
        animation-delay: -0.8s
    }

@keyframes sk-wave {
    0%,40%,100% {
        transform: scaleY(0.4)
    }

    20% {
        transform: scaleY(1)
    }
}

.sk-pulse {
    width: var(--sk-size);
    height: var(--sk-size);
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-pulse 1.2s infinite cubic-bezier(0.455,0.03,0.515,0.955)
}

@keyframes sk-pulse {
    0% {
        transform: scale(0)
    }

    100% {
        transform: scale(1);
        opacity: 0
    }
}

.sk-flow {
    width: calc(var(--sk-size) * 1.3);
    height: calc(var(--sk-size) * 1.3);
    display: flex;
    justify-content: space-between
}

.sk-flow-dot {
    width: 25%;
    height: 25%;
    background-color: var(--sk-color);
    border-radius: 50%;
    animation: sk-flow 1.4s cubic-bezier(0.455,0.03,0.515,0.955) 0s infinite both
}

    .sk-flow-dot:nth-child(1) {
        animation-delay: -0.30s
    }

    .sk-flow-dot:nth-child(2) {
        animation-delay: -0.15s
    }

@keyframes sk-flow {
    0%,80%,100% {
        transform: scale(0.3)
    }

    40% {
        transform: scale(1)
    }
}

.sk-swing {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    animation: sk-swing 1.8s infinite linear
}

.sk-swing-dot {
    width: 45%;
    height: 45%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: var(--sk-color);
    border-radius: 100%;
    animation: sk-swing-dot 2s infinite ease-in-out
}

    .sk-swing-dot:nth-child(2) {
        top: auto;
        bottom: 0;
        animation-delay: -1s
    }

@keyframes sk-swing {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes sk-swing-dot {
    0%,100% {
        transform: scale(0.2)
    }

    50% {
        transform: scale(1)
    }
}

.sk-circle {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-circle-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

    .sk-circle-dot:before {
        content: '';
        display: block;
        width: 15%;
        height: 15%;
        background-color: var(--sk-color);
        border-radius: 100%;
        animation: sk-circle 1.2s infinite ease-in-out both
    }

    .sk-circle-dot:nth-child(1) {
        transform: rotate(30deg)
    }

    .sk-circle-dot:nth-child(2) {
        transform: rotate(60deg)
    }

    .sk-circle-dot:nth-child(3) {
        transform: rotate(90deg)
    }

    .sk-circle-dot:nth-child(4) {
        transform: rotate(120deg)
    }

    .sk-circle-dot:nth-child(5) {
        transform: rotate(150deg)
    }

    .sk-circle-dot:nth-child(6) {
        transform: rotate(180deg)
    }

    .sk-circle-dot:nth-child(7) {
        transform: rotate(210deg)
    }

    .sk-circle-dot:nth-child(8) {
        transform: rotate(240deg)
    }

    .sk-circle-dot:nth-child(9) {
        transform: rotate(270deg)
    }

    .sk-circle-dot:nth-child(10) {
        transform: rotate(300deg)
    }

    .sk-circle-dot:nth-child(11) {
        transform: rotate(330deg)
    }

    .sk-circle-dot:nth-child(1):before {
        animation-delay: -1.1s
    }

    .sk-circle-dot:nth-child(2):before {
        animation-delay: -1s
    }

    .sk-circle-dot:nth-child(3):before {
        animation-delay: -0.9s
    }

    .sk-circle-dot:nth-child(4):before {
        animation-delay: -0.8s
    }

    .sk-circle-dot:nth-child(5):before {
        animation-delay: -0.7s
    }

    .sk-circle-dot:nth-child(6):before {
        animation-delay: -0.6s
    }

    .sk-circle-dot:nth-child(7):before {
        animation-delay: -0.5s
    }

    .sk-circle-dot:nth-child(8):before {
        animation-delay: -0.4s
    }

    .sk-circle-dot:nth-child(9):before {
        animation-delay: -0.3s
    }

    .sk-circle-dot:nth-child(10):before {
        animation-delay: -0.2s
    }

    .sk-circle-dot:nth-child(11):before {
        animation-delay: -0.1s
    }

@keyframes sk-circle {
    0%,80%,100% {
        transform: scale(0)
    }

    40% {
        transform: scale(1)
    }
}

.sk-circle-fade {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-circle-fade-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

    .sk-circle-fade-dot:before {
        content: '';
        display: block;
        width: 15%;
        height: 15%;
        background-color: var(--sk-color);
        border-radius: 100%;
        animation: sk-circle-fade 1.2s infinite ease-in-out both
    }

    .sk-circle-fade-dot:nth-child(1) {
        transform: rotate(30deg)
    }

    .sk-circle-fade-dot:nth-child(2) {
        transform: rotate(60deg)
    }

    .sk-circle-fade-dot:nth-child(3) {
        transform: rotate(90deg)
    }

    .sk-circle-fade-dot:nth-child(4) {
        transform: rotate(120deg)
    }

    .sk-circle-fade-dot:nth-child(5) {
        transform: rotate(150deg)
    }

    .sk-circle-fade-dot:nth-child(6) {
        transform: rotate(180deg)
    }

    .sk-circle-fade-dot:nth-child(7) {
        transform: rotate(210deg)
    }

    .sk-circle-fade-dot:nth-child(8) {
        transform: rotate(240deg)
    }

    .sk-circle-fade-dot:nth-child(9) {
        transform: rotate(270deg)
    }

    .sk-circle-fade-dot:nth-child(10) {
        transform: rotate(300deg)
    }

    .sk-circle-fade-dot:nth-child(11) {
        transform: rotate(330deg)
    }

    .sk-circle-fade-dot:nth-child(1):before {
        animation-delay: -1.1s
    }

    .sk-circle-fade-dot:nth-child(2):before {
        animation-delay: -1.0s
    }

    .sk-circle-fade-dot:nth-child(3):before {
        animation-delay: -0.9s
    }

    .sk-circle-fade-dot:nth-child(4):before {
        animation-delay: -0.8s
    }

    .sk-circle-fade-dot:nth-child(5):before {
        animation-delay: -0.7s
    }

    .sk-circle-fade-dot:nth-child(6):before {
        animation-delay: -0.6s
    }

    .sk-circle-fade-dot:nth-child(7):before {
        animation-delay: -0.5s
    }

    .sk-circle-fade-dot:nth-child(8):before {
        animation-delay: -0.4s
    }

    .sk-circle-fade-dot:nth-child(9):before {
        animation-delay: -0.3s
    }

    .sk-circle-fade-dot:nth-child(10):before {
        animation-delay: -0.2s
    }

    .sk-circle-fade-dot:nth-child(11):before {
        animation-delay: -0.1s
    }

@keyframes sk-circle-fade {
    0%,39%,100% {
        opacity: 0;
        transform: scale(0.6)
    }

    40% {
        opacity: 1;
        transform: scale(1)
    }
}

.sk-grid {
    width: var(--sk-size);
    height: var(--sk-size)
}

.sk-grid-cube {
    width: 33.33%;
    height: 33.33%;
    background-color: var(--sk-color);
    float: left;
    animation: sk-grid 1.3s infinite ease-in-out
}

    .sk-grid-cube:nth-child(1) {
        animation-delay: .2s
    }

    .sk-grid-cube:nth-child(2) {
        animation-delay: .3s
    }

    .sk-grid-cube:nth-child(3) {
        animation-delay: .4s
    }

    .sk-grid-cube:nth-child(4) {
        animation-delay: .1s
    }

    .sk-grid-cube:nth-child(5) {
        animation-delay: .2s
    }

    .sk-grid-cube:nth-child(6) {
        animation-delay: .3s
    }

    .sk-grid-cube:nth-child(7) {
        animation-delay: 0s
    }

    .sk-grid-cube:nth-child(8) {
        animation-delay: .1s
    }

    .sk-grid-cube:nth-child(9) {
        animation-delay: .2s
    }

@keyframes sk-grid {
    0%,70%,100% {
        transform: scale3D(1,1,1)
    }

    35% {
        transform: scale3D(0,0,1)
    }
}

.sk-fold {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative;
    transform: rotateZ(45deg)
}

.sk-fold-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    transform: scale(1.1)
}

    .sk-fold-cube:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--sk-color);
        animation: sk-fold 2.4s infinite linear both;
        transform-origin: 100% 100%
    }

    .sk-fold-cube:nth-child(2) {
        transform: scale(1.1) rotateZ(90deg)
    }

    .sk-fold-cube:nth-child(4) {
        transform: scale(1.1) rotateZ(180deg)
    }

    .sk-fold-cube:nth-child(3) {
        transform: scale(1.1) rotateZ(270deg)
    }

    .sk-fold-cube:nth-child(2):before {
        animation-delay: .3s
    }

    .sk-fold-cube:nth-child(4):before {
        animation-delay: .6s
    }

    .sk-fold-cube:nth-child(3):before {
        animation-delay: .9s
    }

@keyframes sk-fold {
    0%,10% {
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0
    }

    25%,75% {
        transform: perspective(140px) rotateX(0);
        opacity: 1
    }

    90%,100% {
        transform: perspective(140px) rotateY(180deg);
        opacity: 0
    }
}

.sk-wander {
    width: var(--sk-size);
    height: var(--sk-size);
    position: relative
}

.sk-wander-cube {
    background-color: var(--sk-color);
    width: 20%;
    height: 20%;
    position: absolute;
    top: 0;
    left: 0;
    --sk-wander-distance: calc(var(--sk-size) * 0.75);
    animation: sk-wander 2.0s ease-in-out -2.0s infinite both
}

    .sk-wander-cube:nth-child(2) {
        animation-delay: -0.5s
    }

    .sk-wander-cube:nth-child(3) {
        animation-delay: -1.0s
    }

@keyframes sk-wander {
    0% {
        transform: rotate(0)
    }

    25% {
        transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6)
    }

    50% {
        transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg)
    }

    50.1% {
        transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg)
    }

    75% {
        transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6)
    }

    100% {
        transform: rotate(-360deg)
    }
}
/*--------------------------------------------------------------
# End of SpinKit loading css
--------------------------------------------------------------*/


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Admin Modal */
.app-admin-modal .modal {
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    display: block;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background: rgba(0,0,0,0.3); /* Dim background */
}

.app-admin-modal .modal-dialog {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    max-width: none; /* Override default of 500px */
}

.app-admin-modal .modal-content {
    margin: 5% auto; /* 5% from the top and centered */
    width: 80%; /* Could be more or less, depending on screen size */
}

/* Action Dialog */
.app-actiondialog .modal {
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    left: 0;
    top: 0;
    display: block;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background: rgba(0,0,0,0.3); /* Dim background */
}

.app-actiondialog .modal-dialog {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    max-width: none; /* Override default of 500px */
}

.app-actiondialog .modal-content {
    margin: 15% auto; /* 15% from the top and centered */
    width: 40%; /* Could be more or less, depending on screen size */
}

/* Admin Pane */
.app-pane-admin-border {
    width: 100%;
    border-width: 1px;
    border-style: dashed;
    border-color: gray;
}

.app-pane-admin-title {
    width: 100%;
    text-align: center;
    color: gray;
}

.app-moduleactions .dropdown-submenu {
    position: relative;
}

    .app-moduleactions .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: 0px;
        margin-left: 0px;
    }

.app-progress-indicator {
    background: rgba(0,0,0,0.2) url('../loading.gif') no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999; /* Sit on top */
}

.app-rule {
    width: 100%;
    color: gray;
    height: 1px;
    background-color: gray;
    margin: 0.5rem;
}

.app-link-unstyled, .app-link-unstyled:visited, .app-link-unstyled:hover, .app-link-unstyled:active, .app-link-unstyled:focus, .app-link-unstyled:active:hover {
    font-style: inherit;
    color: inherit;
    background-color: transparent;
    font-size: inherit;
    text-decoration: none;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
    border-radius: inherit;
    border: inherit;
    outline: inherit;
    box-shadow: inherit;
    padding: inherit;
    vertical-align: inherit;
}

.app-alert {
    padding: 20px;
    background-color: #f44336; /* red */
    color: white;
    margin-bottom: 15px;
}

.app-moduletitle a {
    scroll-margin-top: 7rem;
}

/* Tooltips */
.app-tooltip {
    cursor: help;
    position: relative;
}

    .app-tooltip::before,
    .app-tooltip::after {
        left: 25%;
        opacity: 0;
        position: absolute;
        z-index: -100;
    }

    .app-tooltip:hover::before,
    .app-tooltip:focus::before,
    .app-tooltip:hover::after,
    .app-tooltip:focus::after {
        opacity: 1;
        transform: scale(1) translateY(0);
        z-index: 100;
    }

    .app-tooltip::before {
        border-style: solid;
        border-width: 1em 0.75em 0 0.75em;
        border-color: #3E474F transparent transparent transparent;
        bottom: 100%;
        content: "";
        margin-left: -0.5em;
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
        transform: scale(.6) translateY(-90%);
    }

    .app-tooltip:hover::before,
    .app-tooltip:focus::before {
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    }

    .app-tooltip::after {
        background: #3E474F;
        border-radius: .25em;
        bottom: 140%;
        color: #EDEFF0;
        content: attr(data-tip);
        margin-left: -8.75em;
        padding: 1em;
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
        transform: scale(.6) translateY(50%);
        width: 17.5em;
    }

    .app-tooltip:hover::after,
    .app-tooltip:focus::after {
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
    }

@media (max-width: 760px) {
    .app-tooltip::after {
        font-size: .75em;
        margin-left: -5em;
        width: 10em;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/*--------------------------------------------------------------
# loading-linkooc 
--------------------------------------------------------------*/
.loading-linkooc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: blink 1.5s infinite; /* Adjust the duration as needed */
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.slow-blink {
    animation: blink 4s infinite;
}

/*--------------------------------------------------------------
# Window Dialog 
--------------------------------------------------------------*/

div.k-window.k-dialog {
    width: 300px !important;
}

/*--------------------------------------------------------------
# Calendar 
--------------------------------------------------------------*/

.time-slot:hover {
    background-color: var(--linkooc-hover-second-bg);
}

.time-slot-active:hover {
    background-color: var(--linkooc-text-display-second);
    font-weight: 500;
}

.time-slot-active {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
    background-color: var(--linkooc-text-display-second);
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
}

.k-input-solid:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
}

.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
    color: white !important;
    border-color: var(--linkooc-button-primary) !important;
    background-color: var(--linkooc-button-primary) !important;
}

.k-calendar .k-calendar-view .k-today .k-calendar-cell-inner, .k-calendar .k-calendar-view .k-today .k-link {
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
}

.k-calendar .k-calendar-td.k-selected:focus .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected:focus .k-link, .k-calendar .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected.k-focus .k-link {
    box-shadow: 0 0 0 0.25rem rgba(8, 120, 27, 0.25) !important;
}

.k-link, .k-calendar-title, .k-calendar-nav-prev, .k-calendar-nav-next {
    border-radius: 2.25rem !important;
}

.k-calendar-nav-today {
    color: var(--linkooc-text-display-second) !important;
    border-radius: 2.25rem !important;
}

.closed-day {
    background-color: #ffcccc; /* Red for closed */
    color: #a94442;
}

.open-day {
    background-color: #ccffcc; /* Green for open */
    color: #3c763d;
}

.unknown-day {
    background-color: #f5f5f5; /* Grey for unknown */
    color: #666;
}

.day-is-past {
    filter: brightness(0.8);
}

.k-card-dark-pastel {
    background-color: #cc4b24;
    color: #ffffff;
    border-color: #f5c6cb;
}

/**
 * ----------------------------------------
 * Custom Tag Badges
 * ----------------------------------------
 */

/* Tag Badge Styles - Consistent Design */
.badge-chef-special {
    background: #F9F7ED !important;
    color: var(--linkooc-text-display-tertiary) !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-new {
    background: #F9F7ED !important;
    color: #198754 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-spicy {
    background: #F9F7ED !important;
    color: #dc3545 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-vegetarian {
    background: #F9F7ED !important;
    color: #198754 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-premium {
    background: #F9F7ED !important;
    color: #ffc107 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-healthy {
    background: #F9F7ED !important;
    color: #0dcaf0 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-popular {
    background: #F9F7ED !important;
    color: #0d6efd !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-linkooc {
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-limited {
    background: #F9F7ED !important;
    color: #6c757d !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-organic {
    background: #F9F7ED !important;
    color: #198754 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

.badge-signature {
    background: #F9F7ED !important;
    color: #6f42c1 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    transition: all 0.15s ease-in-out !important;
}

    /* Hover effects for all badges */
    .badge-chef-special:hover,
    .badge-new:hover,
    .badge-spicy:hover,
    .badge-vegetarian:hover,
    .badge-premium:hover,
    .badge-healthy:hover,
    .badge-popular:hover,
    .badge-limited:hover,
    .badge-organic:hover,
    .badge-signature:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
    }

    /* Icon color consistency */
    .badge-chef-special i,
    .badge-new i,
    .badge-spicy i,
    .badge-vegetarian i,
    .badge-premium i,
    .badge-healthy i,
    .badge-popular i,
    .badge-limited i,
    .badge-organic i,
    .badge-signature i {
        color: inherit !important;
    }