/*@font-face {
    font-family: "Spartan MB";
    src: url('fonts/spartan-mb/SpartanMB-Medium.otf') format('opentype');
}

@font-face {
    font-family: "Spartan MB";
    font-weight: bold;
    src: url('fonts/spartan-mb/SpartanMB-Bold.otf') format('opentype');
}*/

@font-face {
    font-family: Century Gothic;
    src: url('fonts/CenturyGothic.ttf');
}

html, body {
    font-family: 'Century Gothic', sans-serif;
    letter-spacing: -0.1px;
    height: 100vh;
    width: 100%;
}

.h-90 {
    height: 90% !important;
}

.text-wrap-attachment {
    text-wrap: auto;
    font-weight: bold
}

.subbody {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.header {
    flex: 1;
    max-height: fit-content;
    margin-bottom: 10px;
}

.maxBody {
    flex: 2;
    overflow-x: auto;
    min-height: 340px;
}

    .maxBody > div {
        height: 100%;
        width: 100%;
        min-width: -moz-available; /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        width: fill-available;
        min-height: -moz-available; /* WebKit-based browsers will ignore this. */
        height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        height: fill-available;
    }

.content {
    padding-right: 15px;
    height: calc(100vh - 190px);
    width: 100vw;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.mobile-content {
    padding-right: 15px;
    height: calc(100vh - 255px);
    width: 100vw;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.break-word {
    word-wrap: break-word;
}

.copyright {
    padding-left: 4px;
}

.sidebar {
    background: #F1F1F1;
}

.no-tools .k-toolbar {
    display: none;
}

.custom-notification .k-notification {
    width: 350px;
    height: 100px;
    font-size: 20px;
    z-index: 1234;
}

.no-headers-grid .k-grouping-header {
    display: none;
}

.main {
    height: 100%;
    display: block;
    overflow: visible;
}

.k-filter .k-filter-container {
    -webkit-margin-after: 0px !important;
    margin-block-end: 0px !important;
}

.btn-toolbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.left-group {
    display: flex;
    justify-content: flex-start;
}

.right-group {
    display: flex;
    justify-content: flex-end;
}

.inner-cb-button {
    margin-left: -3.0em;
    z-index: 1000;
}

.form-inner-cb-button {
    z-index: 1000;
    float: right;
    margin-right: 18px;
    margin-top: 0px;
    margin-left: -45px;
}

.grid-inner-cb-button {
    z-index: 1000;
    float: right;
    margin-right: 9px;
    margin-top: 0px;
    margin-left: -43px;
}

.top-stick-buttons {
    margin-top: -20px;
    z-index: 1001 !important;
    display: flex;
    flex-wrap: wrap;
}

.bottom-buttons {
}



.my-toolbar {
    width: fit-content;
    border-color: rgba(0, 0, 0, .08);
    color: #424242;
    background-color: #fafafa;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    outline: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4285714286;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    /*overflow: hidden;*/
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.k-toolbar .k-input, .k-toolbar .k-picker {
    width: 14em !important;
}

/*Výška seznamu sloupců gridu*/
.k-column-list {
    max-height: 400px !important;
}

/*font v headru gridu*/
.k-table-sm .k-column-title {
    font-size: 14px;
}
/*font v gridu*/
.k-table-sm {
    font-size: 13px;
    line-height: 1.3;
}

.k-table-thead {
    background: #e8e8e8;
}

.logo {
    margin-left: -26px;
    margin-top: -11px;
}

.k-disabled {
    border-color: var(--kendo-color-border, rgba(0, 0, 0,0.08));
}

.k-avatar-md, .rounded-btn {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
}

.culture-btn:hover {
    color: var(--kendo-color-primary);
}

.hidden-link, .hidden-link:hover {
    cursor: pointer;
    text-decoration: none !important;
    color: inherit;
}

.culture-popup {
    width: auto !important;
    margin-top: 3px;
}

.search-icon {
    margin-left: -35px;
    z-index: 100;
}

.k-table a {
    display: flex;
    justify-content: left;
    padding: 7px 0px;
    font-weight: bold;
}

    .k-table a:hover {
        color: var(--kendo-color-primary);
    }

.k-rating-item .k-icon-xl {
    width: 19px;
    height: 19px;
    margin-top: -2px;
}

.k-rating-container .k-rating-item {
    padding-block: 0px;
    padding-inline: 0px;
}

.grid-numeric-button {
    margin-top: -2px;
    margin-left: -1px;
}

.Colspan-field .k-form-field-wrap {
    max-width: 100% !important;
}

.Colspan-field .k-form-label {
    width: 16% !important;
}

.k-form-horizontal .k-form-field > .k-label, .k-form-horizontal .k-form-field > kendo-label, .k-form-horizontal .k-form-field > .k-form-label {
    width: 32%;
}

.k-form-horizontal.label-form-40 .k-form-field > .k-label, .k-form-horizontal.label-form-40 .k-form-field > kendo-label, .k-form-horizontal.label-form-40 .k-form-field > .k-form-label {
    width: 40%;
}


.k-form-horizontal.mid-label-form .k-form-field > .k-label, .k-form-horizontal.mid-label-form .k-form-field > kendo-label, .k-form-horizontal.mid-label-form .k-form-field > .k-form-label {
    width: 50%;
}

.k-form-horizontal.big-label-form .k-form-field > .k-label, .k-form-horizontal.big-label-form .k-form-field > kendo-label, .k-form-horizontal.big-label-form .k-form-field > .k-form-label {
    width: 80%;
}

.k-form-horizontal.big-label-form .k-form-field {
    margin-top: 2px;
}

.k-form-horizontal.form-small-label .k-form-field > .k-label, .k-form-horizontal.form-small-label .k-form-field > kendo-label, .k-form-horizontal.form-small-label .k-form-field > .k-form-label {
    width: 25%;
}

.k-switch-sm {
    width: 40px !important;
    height: 20px !important;
    margin-left: 5px;
}

    .k-switch-sm .k-switch-track {
        width: 40px !important;
        height: 20px !important;
    }

    .k-switch-sm .k-switch-thumb {
        width: 16px !important;
        height: 16px !important;
    }

.k-avatar-lg .k-avatar-text {
    font-size: 25px;
}

.k-panelbar > .k-panelbar-header > .k-link {
    color: black;
    font-weight: 600;
}

    .k-panelbar > .k-panelbar-header > .k-link:hover, .k-panelbar > .k-panelbar-header > .k-link.k-hover {
        background-color: #fafafa;
    }

.expanded-menu {
    background-color: #fafafa;
}

.bottom-margin-sm {
    margin-bottom: 2px;
}

.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected {
    color: var(--kendo-color-primary);
}

    .k-tabstrip-items-wrapper .k-item:active:not(:has(.dashboard-tab)), .k-tabstrip-items-wrapper .k-item.k-active:not(:has(.dashboard-tab)), .k-tabstrip-items-wrapper .k-item.k-selected:not(:has(.dashboard-tab)) {
        background-color: rgb(from var(--kendo-color-primary) r g b / 0.20);
    }

.k-tabstrip-items-wrapper .k-item {
    color: black;
}

    .k-tabstrip-items-wrapper .k-item:not(:has(.dashboard-tab)) {
        border-color: var(--kendo-color-border);
    }

    .k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-focus {
        box-shadow: none;
    }

.top-stick-buttons button, .bottom-buttons button {
    background-color: white;
    border-color: gray;
    padding-left: 15px;
    padding-right: 15px;
}

.k-tabstrip-content:focus, .k-tabstrip-content.k-focus, .k-tabstrip > .k-content:focus, .k-tabstrip > .k-content.k-focus {
    outline-width: 0px;
}

.k-form .k-form-field, .k-form .k-form-field-wrap {
    align-items: center;
    display: flex;
}

.k-tooltip {
    border-color: rgba(0,0,0,.70);
    background-color: rgba(0,0,0,.70);
    max-width: 510px;
}

.draggable-field {
    list-style: none;
    text-align: center;
    cursor: move;
    align-content: center;
}

    .draggable-field .text-part {
        margin: 5px 0px;
        padding: 10px 20px 10px 10px;
        background-color: #fafafa;
        border: solid;
        border-width: 1px;
        border-color: var(--kendo-color-border);
    }

    .draggable-field .cb-part {
        margin-left: 10px;
        padding: 6px 5px;
    }

    .draggable-field.selected .text-part {
        background-color: rgb(from var(--kendo-color-primary) r g b / 0.20);
        color: var(--kendo-color-primary);
    }

.dragover {
    /*border: solid;
    border-width: 0px;
    border-top-width: 3px;
    border-color: var(--kendo-color-primary);*/
    padding-top: 20px;
}

.image-cb {
    width: 158px;
    margin-left: -11px;
}

.userOnline {
    width: 10px;
    height: 10px;
    position: relative;
    border-radius: 50%;
    background-color: var(--kendo-color-success);
    border-style: solid;
    border-width: 1px;
    border-color: white;
    left: 33px;
    top: 41px;
}

.userOnlinePopup {
    left: 41px;
    top: 15px;
}

.smallerTeamsPopup {
    width: 22px;
}

.availableWidth {
    width: -webkit-fill-available;
    width: -moz-available;
}

.availableMinWidth {
    min-width: -webkit-fill-available;
    min-width: -moz-available;
}

.fitContent {
    width: fit-content !important;
}

.availableHeight {
    height: 100%;
    height: -webkit-fill-available;
    min-height: -moz-available;
}

.border-left-none {
    border-left: none;
    border-right: none;
}

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

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

.dashboard-grid .k-grid-content {
    overflow-y: auto;
}

.dashboard-grid .k-grid-header,
.dashboard-grid .k-grid-footer {
    padding-right: 0;
}

.dashboard-grid .k-grid-header-wrap,
.dashboard-grid .k-grid-footer-wrap {
    border-right-width: 0;
}

.dashboard .k-tabstrip-content, .dashboard .k-tabstrip > .k-content {
    padding-block: 0px;
    padding-inline: 0px
}

.dashboard {
    height: 342px;
}

.text-button {
    margin-left: 5px;
    text-decoration: underline !important;
}

    .text-button.k-button-link-base:focus, .text-button.k-button-link-base.k-focus {
        box-shadow: none;
    }


.dashboard-grid {
    /*min-width: calc(100vw - 825px);*/
    /*margin-top: 15px;*/
    width: fit-content;
}

.ticket-menu-button {
    padding: 6px 5px 6px 9px !important;
}

.hide-arrow .k-icon-button {
    display: none;
}

.primary-background-light {
    background-color: rgb(from var(--kendo-color-primary) r g b / 0.20);
}

.secondary-background-light {
    background-color: rgb(from var(--kendo-color-secondary) r g b / 0.20);
}

.service-icon {
    position: absolute;
    top: 3px;
    right: 3px;
    color: rgb(from var(--kendo-color-secondary) r g b / 0.40);
}

.k-button-flat:focus::after, .k-button-flat.k-focus::after {
    opacity: 0;
}

.k-menu-group-md .k-menu-item {
    font-size: 14px;
    line-height: 1.4285714286;
    padding: 2px;
}

.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;
}

.k-pager-sm .k-pager-sizes .k-dropdown-list, .k-pager-sm .k-pager-sizes .k-dropdown, .k-pager-sm .k-pager-sizes .k-dropdownlist, .k-pager-sm .k-pager-sizes > select {
    width: 6em;
}

.k-breadcrumb-root-link:hover, .k-breadcrumb-root-link.k-hover {
    background-color: white;
    color: var(--kendo-color-primary);
}

.k-font-bold .k-input-inner {
    font-weight: bold !important;
}

.attachment-img {
    height: 80px;
}

.k-card-body {
    padding-block: 0px !important;
    padding-inline: 0px !important;
}

.k-svg-icon.k-icon-xxxl {
    width: 70px;
    height: 80px;
}

.k-avatar-solid-primary {
    border-color: white !important;
}

.attachment-filename {
    width: 180px;
    overflow: hidden;
}

.k-upload .k-upload-files, .k-upload .k-file {
    display: none;
}

span.k-input ::placeholder,
span.k-picker ::placeholder {
    color: rgb(from var(--kendo-color-secondary) r g b / 0.60);
}

.serviceButton {
    cursor: pointer;
    border: 1px solid rgb(from var(--kendo-color-secondary) r g b / 0.20);
}

.serviceImage {
    width: 80px;
    position: relative;
    top: -9px;
}

.serviceButton > div > div {
    height: 80px;
}

.serviceDescription {
    line-height: 1.2;
    max-height: 45px !important;
}

.triangle-right {
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    border-left: 20px solid transparent;
}

.triangle-left {
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    border-right: 20px solid transparent;
    background-color: rgb(from var(--kendo-color-secondary) r g b / 0.40);
}


@media (min-width: 900px) {
    .top-stick-buttons {
        background-color: white;
        position: sticky;
        position: -webkit-sticky;
        top: -16px;
        z-index: 11;
        margin-top: -16px;
        margin-left: -4px;
    }

    .page {
        flex-direction: row;
    }

    .sidebar {
        /*width: 250px;*/
        height: 100%;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth ::deep a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row, article {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .content {
        height: calc(100vh - 90px);
        width: calc(100vw - 250px);
    }

    .triangle {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 42.5px 0 42.5px 25px;
        border-color: transparent transparent transparent var(--kendo-color-primary);
        transform: rotate(0deg);
        margin-left: -16px;
    }
}

.z-index-10002 {
    z-index: 1002;
}

.z-index-10003 {
    z-index: 1003;
}

.gridlayout {
    /*margin-bottom: -5px;*/
    height: 100%;
    width: 100%;
    min-width: -moz-available; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    min-height: -moz-available; /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}

    .gridlayout > div {
        margin-top: 0px !important;
    }

        .gridlayout > div:first-child {
            margin-top: 0px !important;
        }

.navbar-subtoggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: box-shadow .15s ease-in-out
}

@media (max-width: 1130px) {

    .gridlayout > div {
        margin-top: 30px !important;
    }

        .gridlayout > div:first-child {
            margin-top: 10px !important;
        }
}

.k-selected {
    box-shadow: none !important;
}

.login {
    display: grid;
}

    .login > div > span > input {
        border: solid 2px white;
        background-color: white;
        width: 296px;
        font-size: 16px;
        color: rgb(from var(--kendo-color-secondary) r g b / 0.90);
        margin: 1px;
    }

    .login > div > button {
        border: solid 5px var(--kendo-color-primary);
        background-color: var(--kendo-color-primary);
        width: 300px;
        font-size: 16px;
        color: white;
        margin: 1px;
    }

.loginDesign {
    background-color: var(--kendo-color-primary) !important;
}

    .loginDesign > div:first-child {
        align-content: start;
        justify-items: end;
        margin-top: 5px;
        margin-bottom: 15px;
        display: grid;
    }

    .loginDesign > div {
        align-content: center;
        justify-items: center;
        display: grid;
    }

        .loginDesign > div:last-child {
            align-content: start;
            justify-items: end;
            display: grid;
        }



@media (max-width: 970px) {
    .loginDesign > div:first-child {
        align-content: center;
        justify-items: center;
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

.commentButton {
    position: absolute;
    right: 20px;
    bottom: 10px;
    background-color: var(--kendo-color-primary);
    color: rgba(255,255,255,1.0);
    border-radius: 25px;
    height: 40px;
    width: 40px;
}

    .commentButton > span {
        width: 25px !important;
        height: 25px !important;
    }

        .commentButton > span > svg {
            width: 25px !important;
            height: 25px !important;
        }

    .commentButton:hover {
        background-color: var(--kendo-color-primary);
        color: rgba(255,255,255,1.0);
    }

.border-left {
    border-left: 1px solid #F1F1F1;
    padding-left: 20px;
    justify-content: end;
}

.border-right {
    border-right: 1px solid #F1F1F1;
}

.margin-compare {
    margin-left: -16px;
}

.commentDiv {
    /*max-width: 1100px;*/
    min-width: 330px;
    /*height: 100%;*/
    width: 97%;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-color: LightGray transparent;
    scrollbar-width: thin;
    padding-right: 15px;
    align-content: end;
}

.commentMessage {
    margin-bottom: 15px;
    width: auto;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.commentColor {
    background-color: rgb(from var(--kendo-color-primary) r g b / 0.20);
    border-radius: 20px 20px 20px 0px;
}

.commentAlternateColor {
    background-color: rgb(from var(--kendo-color-secondary) r g b / 0.20);
    border-radius: 20px 20px 0px 20px;
}

.commentEditor {
    min-height: 110px;
}

    .commentEditor .k-editor-content .k-content {
        text-align: start;
        padding-right: 50px;
    }

.flow > p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.flow > span > input[type=checkbox] {
    opacity: 50%;
    border: 1px solid gray;
    width: 13px;
    height: 13px;
    margin-bottom: 3px;
}

.flex-direction-row-reverse {
    flex-direction: row-reverse;
}

.commentMaxHeight {
    /*height: calc(50vh - 150px); */
    /*overflow-x: hidden;*/
    height: 100%;
}

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

@media print {
    .sidebar, .top-row, .top-stick-buttons {
        display: none !important;
    }

    div {
        break-inside: avoid;
    }
}

.mr-minus-15 {
    margin-right: -15px;
}

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

.export {
    display: flex;
    flex-flow: wrap;
    column-gap: 75px;
}

.export-item {
    min-width: 260px;
    margin: 0;
    padding: 10px 10px 10px 20px;
    min-height: 28px;
    line-height: 28px;
    vertical-align: middle;
    border-top: 1px solid rgba(128,128,128,.5);
}

.float-right {
    float: right;
}

.heading {
    font-size: 18px;
    font-weight: bold;
}

.v-none {
    visibility: hidden;
}

.v-visible {
    visibility: visible;
}

.email-body {
    min-height: 300px;
}

.email-button {
    position: absolute;
    right: 15px;
    bottom: 15px;
    background-color: var(--kendo-color-primary);
    color: rgba(255,255,255,1.0);
    border-radius: 25px;
    height: 40px;
    width: 40px;
}

    .email-button > span {
        width: 25px !important;
        height: 25px !important;
    }

        .email-button > span > svg {
            width: 25px !important;
            height: 25px !important;
        }

    .email-button:hover {
        background-color: var(--kendo-color-primary);
        color: rgba(255,255,255,1.0);
    }

/* Replace the existing mobile CSS section with this updated version */
@media (max-width: 900px) {
    /* Remove ALL sticky and fixed positioning for mobile devices */
    .sidebar {
        position: relative !important;
        height: auto !important;
    }

    .top-row {
        position: relative !important;
        top: auto !important;
        z-index: auto !important;
    }

    .nav-scrollable {
        position: relative !important;
        max-height: none !important;
    }

    /* Override z-index positioning classes */
    .z-index-10002 {
        z-index: auto !important;
        position: relative !important;
    }

    .z-index-10003 {
        z-index: auto !important;
        position: relative !important;
    }

    /* Remove position sticky from elements with k-z-1 class */
    .k-z-1 {
        position: relative !important;
    }

    /* Make the page container natural flow */
    .page {
        height: auto !important;
        min-height: 100vh;
        display: block !important; /* Change from flex to block */
        flex-direction: unset !important;
    }

    /* Ensure main content area is naturally flowing */
    main {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
    }

    /* Remove the height restriction from mobile content */
    .mobile-content {
        height: auto !important;
        min-height: 100vh;
        width: 100%;
        overflow: visible !important;
        display: block !important;
        flex-direction: unset !important;
        padding: 15px;
    }

    /* Ensure body can scroll naturally */
    html, body {
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Remove any position sticky from top-stick-buttons */
    .top-stick-buttons {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }
}

/* Custom selection styling for NavMenu - must match Telerik's k-selected styling */
/* Use very specific selectors to override Telerik */
.k-panelbar > .k-panelbar-group > .k-panelbar-item > .k-link.custom-selected,
.k-panelbar > .k-group > .k-panelbar-item > .k-link.custom-selected,
.k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link.custom-selected,
.k-panelbar .k-group > .k-panelbar-item > .k-link.custom-selected,
.k-panelbar .k-group > .k-item > .k-link.custom-selected,
.k-panelbar .k-panelbar-group > .k-item > .k-link.custom-selected {
    color: #fff !important;
    background-color: var(--kendo-color-primary) !important;
}




/* Additional specific rule for very small devices */
@media (max-width: 900px) {
    /* Override the desktop flex layout completely */
    .page {
        display: block !important;
        flex-direction: unset !important;
    }

    .sidebar {
        width: 100% !important;
        position: relative !important;
        height: auto !important;
    }

    main {
        width: 100% !important;
        position: relative !important;
    }
}