/*#region IMPORTS*/
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import "Header.css";
@import "NavMenu.css";
@import "Footer.css";
@import "Dashboard.css";
@import "Lists.css";
@import "TemplateListView.css";
@import "Validation.css";
@import "Buttons.css";
@import "AccountingPages.css";
@import "CustomCard.css";
@import "Windows.css";
@import "Animations.css";
@import "Shepherd_ida.css";
@import "Manual.css";
/*#endregion IMPORTS*/

html, body {
    background: var(--background);
    position: relative;
}

:root {
    --clr-white: hsl(0 0% 100%);
    --clr-black: hsl(0 0% 16%);
    --clr-dark: hsl(0 0% 25%);
    --clr-dark-500: hsl(0 0% 21%);
    --clr-gray-100: hsl(0 0% 95%);
    --clr-gray-500-base: 0, 0%, 75%;
    --clr-gray-500: hsl(var(--clr-gray-500-base));
    --clr-gray-800: hsl(0 0% 41%);
    --clr-lightblue: hsl(231.43 63.64% 95.69%);
    --clr-darkblue_1: hsl(218.71 21.09% 28.82%);
    --clr-darkblue_2: hsl(217.14 22.11% 18.63%);
    --clr-blue-base: 200, 93%, 41%;
    --clr-blue: hsl(var(--clr-blue-base));
    --clr-blue-hover: hsl(200 48% 47%);
    --clr-green-base: 134, 87%, 32%;
    --clr-green: hsl(var(--clr-green-base));
    --clr-green-hover: hsl(134 50% 32%);
    --clr-red-base: 360, 92%, 42%;
    --clr-red: hsl(var(--clr-red-base));
    --clr-red-hover: hsl(0 94% 31%);
    --clr-purple: hsl(261 51% 51%);
    /**/
    --primary-clr-500: hsl(36.24deg 100% 50%);
    --primary-clr-300: hsl(36.06deg 94.29% 58.82%);
    --primary-clr-700: hsl(27.21deg 77.48% 56.47%);
    --primary-clr-shadow: hsl(36.24deg 100% 50% / 50%);
    /* EZEKET KI KELL GYOMLÁLNI */
    --menu-element-color: var(--clr-white);
    --primary-highlight: #222729;
    --content-title-clr: rgb(121, 126, 144);
}

:root {
    --background: var(--clr-lightblue);
    --font-clr: var(--clr-black);
    --header-bg: var(--clr-white);
    --input-bg: var(--clr-white);
    --input-border-clr: var(--clr-gray-500);
    --picker-btn-bg: var(--clr-gray-100);
    --picker-btn-clr: var(--clr-black);
    --border-clr: var(--clr-gray-500);
    --popup-bg: var(--clr-white);
    --popup-title-bg: var(--primary-clr-500);
    --uploaded-ul-bg: var(--clr-white);
    /* GRID */
    --grid-bg: var(--clr-white);
    --grid-header-bg: var(--clr-darkblue_1);
    --grid-header-clr: var(--clr-white);
    --grid-pager-bg: var(--grid-header-bg);
    --grid-pager-clr: var(--grid-header-clr);
    --grid-cell-bg: var(--clr-white);
    --grid-cell-bg-alt: var(--clr-lightblue);
    --grid-cell-clr: var(--clr-black);
    --grid-cell-border-clr: var(--clr-gray-500);
    /* LIST CONTENT */
    --list-page-content-bg: var(--clr-white);
    --list-page-content-title-clr: var(--content-title-clr);
    --box-shadow-clr: var(--clr-gray-500);
    /* VALIDATION */
    --validation-masterdata-bg: var(--clr-lightblue);
}

.dark-mode {
    --background: var(--clr-gray-800);
    --font-clr: var(--clr-white);
    --header-bg: var(--clr-black);
    --input-bg: var(--clr-dark-500);
    --input-border-clr: var(--clr-gray-800);
    --picker-btn-bg: var(--clr-gray-800);
    --picker-btn-clr: var(--clr-white);
    --border-clr: var(--clr-gray-800);
    --popup-bg: var(--clr-dark);
    --uploaded-ul-bg: var(--clr-dark);
    /* GRID */
    --grid-bg: var(--clr-dark-500);
    --grid-cell-bg: var(--clr-black);
    --grid-cell-bg-alt: var(--clr-dark);
    --grid-cell-clr: var(--clr-white);
    --grid-cell-border-clr: var(--clr-gray-800);
    /* LIST CONTENT */
    --list-page-content-bg: var(--clr-dark);
    --list-page-content-title-clr: var(--clr-white);
    --box-shadow-clr: var(--clr-black);
    /* VALIDATION */
    --validation-masterdata-bg: var(--clr-black);
}

/*#region GENERAL*/
.cursorPointer {
    cursor: pointer !important;
}

.scrollbar-stable {
    scrollbar-gutter: stable;
}

.gtc-50 {
    grid-template-columns: 1fr 1fr;
}

.no-shadow {
    box-shadow: none;
}

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

.justify-self-end {
    justify-self: end;
}

:focus-visible {
    outline: none;
}

.bg-green {
    background-color: var(--clr-green);
}

.bg-red {
    background-color: var(--clr-red);
}

.bg-yellow {
    background-color: var(--primary-clr-500);
}

.shadow-red {
    box-shadow: 0 0 15px 5px var(--clr-red);
}

.shadow-green {
    box-shadow: 0 0 15px 5px var(--clr-green);
}

.shadow-yellow {
    box-shadow: 0 0 15px 5px var(--primary-clr-500);
}

.shadow-blue {
    box-shadow: 0 0 15px 10px var(--clr-blue);
}

.basic-grid-item {
    display: grid;
    gap: 0.25rem;
    align-items: end;
    grid-template-rows: 1fr;
}

.checkbox-with-label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .checkbox-with-label span.k-checkbox-wrap {
        align-self: center;
    }

.buttons-container {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.list-page-content span,
.list-page-content p,
.list-page-content h1 {
    hyphens: auto;
}

.designer-btn {
    display: flex;
    align-items: center;
    padding-block: 0.25em;
    padding-inline: 0.5em;
    border: none;
    background-color: var(--primary-clr-300);
    border-radius: 5px;
    color: var(--clr-white);
    gap: 0.25rem;
    font-size: 0.9rem;
    transition: all .1s ease-in-out;
}

    .designer-btn:hover,
    .designer-btn:focus {
        background-color: var(--primary-clr-700);
        transform: scale(1.1);
    }

.page-not-found {
    display: grid;
    gap: 2rem;
    place-content: center;
    width: min(35rem, 100%);
    margin-top: 3rem;
    margin-inline: auto;
}

    .page-not-found img {
        max-width: 20rem;
        padding: 2em;
        margin-inline: auto;
        border-radius: 50%;
        background: linear-gradient(180deg, var(--clr-gray-500), transparent);
    }

    .page-not-found a {
        width: fit-content;
        font-size: 1.5rem;
        margin-inline: auto;
    }

.page-not-found__details {
    font-size: 1.3rem;
    text-align: center;
}

    .page-not-found__details span {
        display: block;
        color: var(--clr-black);
        font-size: 3rem;
        font-variant: small-caps;
        font-family: fantasy;
        letter-spacing: 3px;
    }

.k-loader-container.main-loader, .k-loader-container-overlay.main-loader
{
    position:fixed;
}
/*#endregion GENERAL*/
/*#region VALIDATION ERRORS */
span.validation-error__input,
input.validation-error__input {
    outline: 1px solid var(--clr-red);
}

.validation-message {
    color: var(--clr-red);
}


/*Data field type pop up start*/
.error-msg-container {
    color: var(--clr-red);
}

.custom-label {
    flex: 70%;
}

.end {
    cursor: pointer;
    color: #3498db;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
    float: right;
}

    .end:hover {
        color: #2980b9;
        float: right;
    }

/*Data field type popup end */
/*#endregion VALIDATION ERRORS */



.k-animation-container {
    position: absolute;
}

.window .k-window-titlebar {
    background: var(--primary-highlight) !important;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.k-window {
    border-color: var(--primary-highlight);
    border-radius: 8px !important;
    max-width: 90%;
}

.k-button-group > .k-button.k-selected {
    background-color: var(--primary-clr-500);
}

.k-grid td[role="gridcell"] {
    padding-block: 0.5rem;
}


.document-operation__type {
    padding-block: 0.25em;
    margin-top: 1rem;
    color: var(--clr-white);
    font-size: 1.25rem;
    text-align: center;
    font-variant: small-caps;
    letter-spacing: 1px;
}

.approval-grid {
    width: min(25rem, 100%);
    margin-bottom: 1.5rem;
    margin-inline: auto;
}

.validation-grid {
    width: min(25rem, 100%);
    margin-inline: auto;
}

.document-operation__grid {
    display: grid;
    row-gap: 1rem;
}

.document-operation__grid-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    column-gap: 1rem;
}

    .document-operation__grid-item label {
        font-weight: 600;
        font-variant: small-caps;
        letter-spacing: 1px;
    }

.approval-item {
    display: grid;
    grid-template-rows: 1fr;
    row-gap: 1rem;
}

.approval-info-box {
    display: grid;
    place-content: center;
    padding: 0.5em;
    border-radius: 3px;
    box-shadow: 2px 2px 5px 0px var(--box-shadow-clr);
    background-color: var(--clr-lightblue);
    text-align: center;
    font-size: 0.8rem;
}

.contains-escalated {
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--clr-gray-500);
    opacity: 0.6;
}

.escalated-approval-item {
    width: fit-content;
}

.right-arrow {
    margin-block: auto;
    font-size: 4rem;
}

.down-arrow {
    font-size: 7rem;
}

.escalated-span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    padding: 0.25rem;
    background-color: var(--clr-white);
    color: var(--clr-blue);
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 1px;
}

.circle {
    width: 8rem;
    aspect-ratio: 1;
    margin-inline: auto;
    border: 3px solid var(--font-clr);
    border-radius: 50%;
    overflow: hidden;
}

    .circle img {
        aspect-ratio: 1;
        max-width: 100%;
        object-fit: cover;
    }

.speech-bubble {
    position: relative;
    max-width: 10rem;
    padding: 0.5em;
    margin-bottom: 1rem;
    border-radius: 10px;
    box-shadow: 3px 3px 8px 0px var(--box-shadow-clr);
    background-color: var(--clr-blue);
    color: var(--clr-white);
}

    .speech-bubble::after {
        --magic-number: 10px;
        content: "";
        position: absolute;
        top: 98%;
        left: 50%;
        bottom: calc(var(--magic-number) * -1);
        margin-left: calc(var(--magic-number) * -1);
        border: var(--magic-number) solid transparent;
        border-bottom: 0;
        border-top-color: var(--clr-blue);
    }

.fs-08 {
    font-size: 0.8rem;
}

.selected-approvals-list {
    list-style-type: auto;
    margin-block: 1rem;
    border: 1px solid;
    padding-inline: 3rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    border-radius: 5px;
    background: var(--clr-lightblue);
}

.selected-approvals-list:empty {
    display: none;
}

.selected-approvals-list li {
    padding: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid;
    border-radius: 5px;
    background-color: var(--clr-white);
}

        .selected-approvals-list li[draggable="true"] {
            cursor: grab;
        }

        .selected-approvals-list li.drag {
            background-color: var(--primary-clr-shadow);
        }

.doc-type-span {
    font-weight: 600;
    font-variant: small-caps;
}


/*#region TABS */
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 1em 1em 1.5em;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    font-weight: 600;
}

    .tabset > label::after {
        content: "";
        position: absolute;
        left: 1rem;
        bottom: 10px;
        width: 1.5rem;
        height: 3px;
        background: var(--clr-gray-500);
    }

input:focus-visible + label {
    outline: 2px solid var(--primary-clr-shadow);
    border-radius: 5px;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
    background: var(--primary-clr-500);
}

.tabset > input:checked + label::after {
    width: calc(100% - 2rem);
    transition: width 0.25s;
}

.tabset > input:checked + label {
    border-color: var(--clr-gray-500);
}

.tab-panel {
    padding-block: 2rem;
    border-top: 1px solid var(--clr-gray-500);
}
/*#endregion TABS */

/*#region FILE UPLOAD DROPZONE */
.k-external-dropzone.hover .k-dropzone-inner {
    border-color: var(--primary-clr-500);
    color: var(--primary-clr-500);
}

.k-external-dropzone .k-dropzone-inner {
    padding-inline: 1rem;
    border-width: 5px;
    border-style: dotted;
    border-color: var(--clr-gray-500);
    border-radius: 1rem;
}

.hide-uploaded-files .k-upload-files {
    display: none;
}
/*#endregion FILE UPLOAD DROPZONE */


.remove-approval-icon {
    position: absolute;
    top: 0;
    right: -1.5rem;
    font-size: 1.5rem;
    color: var(--clr-red);
    cursor: pointer;
}


/*#region TELERIK OVERRIDE */
/*#region INPUT */
body .k-checkbox:focus,
body .k-checkbox.k-focus,
body .k-input:focus,
body .k-input.k-focus,
body .k-input:focus-within,
body .k-radio:focus,
body .k-radio.k-state-focus,
body .k-radio.k-focus,
body .form-check-input:focus,
body .k-button-solid-base:focus,
body .k-button-solid-base.k-focus,
body .btn:focus,
body .k-picker:focus,
body .k-picker.k-focus,
body .k-picker:focus-within {
    box-shadow: 0 0 0 3px var(--primary-clr-shadow);
}

body .k-input-solid,
body .k-input-solid:hover,
body .k-input-solid.k-hover {
    border-color: var(--input-border-clr);
    background-color: var(--input-bg);
    color: var(--font-clr);
}

body fieldset[disabled] .k-input-solid {
    opacity: 0.6;
}

body .k-input-md .k-input-button,
body .k-input-md .k-spinner-increase,
body .k-input-md .k-spinner-decrease,
body .k-picker-md .k-input-button,
body .k-picker-md .k-spinner-increase,
body .k-picker-md .k-spinner-decrease {
    background: var(--picker-btn-bg);
    color: var(--picker-btn-clr);
}

body .k-picker-solid,
body .k-picker-solid:hover,
body .k-picker-solid.k-hover {
    background-color: var(--input-bg);
    background-image: none;
    border-color: var(--input-border-clr);
    color: var(--font-clr);
}
/*#endregion INPUT */
/*#region RADIO & CHECKBOX */
body .k-radio,
body .k-checkbox,
body .k-radio:checked,
body .k-radio.k-checked,
body .k-checkbox:checked,
body .k-checkbox.k-checked,
body .form-check-input:checked {
    border-color: var(--content-title-clr);
}

    body .k-radio:checked,
    body .k-radio.k-checked,
    body .k-checkbox:checked,
    body .k-checkbox.k-checked,
    body .form-check-input:checked {
        background-color: var(--primary-clr-500);
    }
/*#endregion RADIO & CHECKBOX */
/*#region CALENDAR */
body .k-calendar .k-calendar-td.k-state-selected .k-link,
body .k-calendar .k-calendar-td.k-selected .k-link,
body .k-button-solid-primary {
    background-color: var(--primary-clr-500);
    border-color: var(--primary-clr-500);
}

    body .k-calendar .k-calendar-td.k-state-selected .k-link:hover,
    body .k-calendar .k-calendar-td.k-selected .k-link:hover,
    body .k-button-solid-primary:hover {
        background-color: var(--primary-clr-300);
        border-color: var(--primary-clr-500);
    }

body .k-calendar .k-button-flat-primary {
    color: var(--primary-clr-500);
}

    body .k-calendar .k-button-flat-primary:hover {
        color: var(--primary-clr-300);
    }
/*#endregion CALENDAR */
/*#region PAGER */
body .k-grid .k-pager:focus {
    box-shadow: none;
}

body .k-pager-numbers .k-button-flat,
body .k-pager-numbers .k-button-flat-primary {
    color: var(--primary-clr-500);
}

    body .k-pager-numbers .k-button-flat.k-selected,
    body .k-pager-numbers .k-button-flat-primary.k-selected {
        background-color: var(--primary-clr-500) !important;
        color: var(--clr-white);
    }
/*#endregion PAGER */
/*#region STATUS BADGE */
.k-badge.k-badge-solid {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-variant: small-caps;
    letter-spacing: 0.5px;
}

.k-badge-solid.k-badge-black {
    border-color: var(--clr-dark);
    color: var(--clr-white);
    background-color: var(--clr-dark);
}

.k-badge-solid.k-badge-gray {
    border-color: var(--clr-gray-500);
    color: var(--clr-black);
    background-color: var(--clr-gray-500);
}

.k-badge-solid.k-badge-blue {
    border-color: var(--clr-blue);
    color: var(--clr-white);
    background-color: var(--clr-blue);
}

.k-badge-solid.k-badge-purple {
    border-color: var(--clr-purple);
    color: var(--clr-white);
    background-color: var(--clr-purple);
}

.k-badge-solid.k-badge-green {
    border-color: var(--clr-green);
    color: var(--clr-white);
    background-color: var(--clr-green);
}

.k-badge-solid.k-badge-yellow {
    border-color: var(--primary-clr-300);
    color: var(--clr-black);
    background-color: var(--primary-clr-300);
}

.k-badge-solid.k-badge-red {
    border-color: var(--clr-red);
    color: var(--clr-white);
    background-color: var(--clr-red);
}
/*#endregion STATUS BADGE */
/*#region SWITCH */
body .k-switch-off .k-switch-thumb,
body .k-switch-off .k-switch-track {
    border-color: var(--clr-dark);
}

body .k-switch-on .k-switch-track {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
}
/*#endregion SWITCH */
/*#region WIZARD */
body .k-wizard .k-stepper .k-step-indicator {
    width: 2.5rem;
    height: 2.5rem;
}

    body .k-wizard .k-stepper .k-step-indicator .k-icon {
        font-size: 1.5rem;
    }

body .k-step-list-horizontal ~ .k-progressbar {
    top: 1.5rem;
}

body .k-stepper .k-step-current .k-step-indicator,
body .k-stepper .k-step-done .k-step-indicator {
    background-color: var(--primary-clr-500);
    border-color: var(--primary-clr-500);
}

body .k-stepper .k-step-current:hover .k-step-indicator,
body .k-stepper .k-step-current.k-hover .k-step-indicator,
body .k-stepper .k-step-current.k-step-hover .k-step-indicator,
body .k-stepper .k-step-done:hover .k-step-indicator,
body .k-stepper .k-step-done.k-hover .k-step-indicator,
body .k-stepper .k-step-done.k-step-hover .k-step-indicator {
    background-color: var(--primary-clr-500);
}

body .k-progressbar .k-selected {
    border-color: var(--primary-clr-500);
    background-color: var(--primary-clr-500);
}
/*#endregion WIZARD */

.k-loader-container-inner.k-loader-container-panel {
    background-color: var(--primary-clr-500);
}
.k-loader.k-loader-primary {
    color: var(--clr-black);
}
.k-loader-container-label.k-text-primary {
    color: var(--font-clr);
    font-variant: small-caps;
    letter-spacing: 1px;
}
/*#endregion TELERIK OVERRIDE */
.k-filtercell-operator button[aria-label=Clear][aria-disabled=true] {
    display: none;
}

.k-filtercell-operator span:has(+ button[aria-disabled=false]) {
    display: none;
}

.k-filtercell-wrapper button,
.k-filtercell-wrapper input.k-input-inner {
    padding: 0.125em !important;
}

.doc-type-selector-ddl {
    width: min(20rem, 100%);
}


.approval-btn-group label {
    background-color: var(--clr-dark);
    color: var(--clr-white);
}

.approval-btn-group input.checked + label {
    background-color: var(--primary-clr-500);
    color: var(--clr-white);
}

.file-template {
    display: grid;
    grid-template-columns: 2rem auto 3rem;
    column-gap: 1rem;
    border: 1px solid var(--clr-gray-500);
    border-radius: 5px;
    padding: 0.5em;
    align-items: center;
}

.file-template .tall {
    grid-row: span 2;
}

    .file-template .k-icon {
        font-size: 2.5rem;
    }

    .file-template .message.success {
        color: var(--clr-green);
    }

    .file-template .message.error {
        color: var(--clr-red);
    }

    .file-template.template-test.cursorPointer {
        transition: all 0.2s;
    }

        .file-template.template-test.cursorPointer:hover,
        .file-template.template-test.cursorPointer:focus {
            background-color: var(--primary-clr-500);
            scale: 1.05;
            transition: all 0.2s;
        }

        .file-template.template-test.cursorPointer:hover span,
        .file-template.template-test.cursorPointer:focus span {
            color: var(--clr-white);
        }

.k-dropzone-inner .k-icon.tall,
.k-dropzone-inner .k-dropzone-icon.tall {
    color: var(--clr-black);
}

.progress-bar-container {
    align-self: end;
    width: min(15rem, 100%);
}

.approval-icon {
    display: grid;
    place-content: center;
    width: 2rem;
    font-size: 2rem;
}

.approval-icon-between {
    display: grid;
    place-content: center;
    margin-block: auto;
    width: 6rem;
    font-size: 6rem;
}

.api-key-textbox {
    max-width: 25rem;
    margin-inline-end: 1rem;
}

.bigImageModeText {
    background-color: #0b992cb3;
    z-index: 1;
    right: 5px;
    font-size: 10px;
    border: 2px solid #98989887;
    border-radius: 12px 0px 12px 12px;
    top: 5px;
    font-family: math;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.EndTextBubble {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: larger;
    background-color: red;
    padding: 5px 15px;
    border-radius: 10px 10px 0px 0px;
    color: white;
}

.DataSeparatorBubble {
    color: white;
    background-color: #00000069;
    font-size: larger;
    transform: rotate(90deg);
    top: 57px;
    width: 150px;
    padding: 5px;
    border-radius: 10px 10px 0px 0px;
    right: -97px;
    overflow: hidden;
}

.TableHeaderBubble {
    margin-top: -43px;
    position: fixed!important;
    font-size: larger;
    background: #0000007d;
    color: white;
    padding: 5px 10px;
    border-radius: 10px 10px 0px 0px;
}

.NoEndText {
    background-color: #fc6b6b;
    padding: 5px;
    animation-name: redcolor;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    border-radius: 8px;
}

@keyframes redcolor {
    0% {
        background-color: #fff;
    }

    50% {
        background-color: #fc6b6b;
    }

    100% {
        background-color: #fff;
    }
}

.tutorial-special-text {
    font-style: italic;
    color: var(--primary-clr-500);
}

.tutorial-special-text-2 {
    font-weight: 600;
    color: var(--clr-blue);
}

.fire {
    color: var(--primary-clr-300);
}