@charset "UTF-8";

/* Animations */
@keyframes spinner {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes flash {
    0%, 100% {
        background-color: var(--red);
        outline-offset: 0;
        outline-color: transparent;
    }
    50% {
        background-color: var(--red-d2);
        outline-offset: 4px;
        outline-color: var(--red-d2);
    }
}

@keyframes attention {
    0% {
        outline-offset: -1px;
        outline-color: transparent;
    }
    50% {
        outline-offset: 2px;
        outline-color: var(--red-50);
    }
    100% {
      outline-offset: -1px;
      outline-color: var(--red);
    }
}

@keyframes clearattention {
  0% {
    outline-offset: -1px;
    outline-color: var(--red);
  }
  50% {
    outline-offset: 2px;
    outline-color: var(--red-50);
  }
  100% {
    outline-offset: -1px;
    outline-color: transparent;
  }
}

/* Vars */
:root {
    /* Background colors */
    --body-bg: hsl(0, 0%, 95%) !important;
    --header-gradient: linear-gradient(to bottom, var(--blue-d2) 0%, var(--blue) 100%) !important;
    --header-bg: var(--blue) !important;
    --favorites-bg: var(--blue-d2) !important;
    --favorites-hover: var(--blue) !important;
    --footer-bg: var(--blue-d2) !important;
    --formDescription-bg: var(--blue-10) !important;
    --module-gradient: linear-gradient(180deg, var(--blue-05) 0%, var(--white) 100%) !important;
    --white-97: hsla(var(--white-hsl), 97%);
    /* Text and element colors */
    --h1-color: var(--orange) !important;
    --h2-color: var(--orange) !important;
    --h3-color: var(--orange) !important;
    --h4-color: var(--orange) !important;
    --a-color: var(--red) !important;
    --a-hover: var(--blue) !important;
    --header-min-a: var(--blue) !important;
    /* Form colors */
    --formDescription-bg: var(--cyan-20) !important;
}

/* Classes */
.align-left {text-align: left !important; float: left !important}
.align-right {float: right !important; float: right !important}
.autofilled {color: var(--cyan-80) !important; border-color: var(--cyan-d2); background: var(--cyan-05) !important; resize: none}
.break {flex: 0 0 calc(100% * 2 / 5 - var(--gutter-double)) !important}
.color-white {color: var(--white) !important}
.color-blue {color: var(--blue) !important}
.color-blue-hover:hover {color: var(--blue) !important}
.color-red {color: var(--red) !important}
.color-orange {color: var(--orange) !important}
.disabled {pointer-events: none !important; color: #999 !important; background: var(--black-05) !important}
.flex-inline {display: inline-flex !important}
.float-left {float: left !important}
.float-right {float: right !important}
.flex-order-0 {order: 0}
.flex-order-1 {order: 1}
.flex-order-2 {order: 2}
.flex-order-3 {order: 3}
.flex-order-4 {order: 4}
.flex-button {display: flex; justify-content: center; align-items: center; line-height: 0 !important; padding: 0 var(--gutter) !important; min-width: auto !important}
.noborder {border: none !important}
.orange {color: var(--orange)}
.pre-line {white-space: pre-line}
.span-row {position: absolute !important; display: block; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; opacity: 0; z-index: 1}
.sticky-module {position: sticky; top: calc(var(--header-min-height) + var(--gutter))}
.white {color: var(--white)}

/* Typeface */
h4 {
    font-variation-settings: var(--weight-h-medium) !important;
}

/* Template elements */
header {
    padding-inline: calc((100vw - var(--main-max-width)) / 2);
}
.frontend-fs header {
    top:calc(-1 * (var(--header-height) + var(--favorites-height)));
}
header::before {
    background: linear-gradient(to bottom, var(--blue-d2) 0%, var(--blue-d1) 100%) !important;
}
#header-mid {
    flex-wrap: wrap;
}
#logo {
    justify-content: center;
    flex-wrap: wrap;
}
#logo img {
    max-width: 320px !important;
    filter: none !important;
    flex: 100%;
    z-index: 1;
}

.frontend-fs #favorites {
    top:calc(-1 * var(--header-height));
}

#user-info {
    position: fixed;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: var(--cyan-d2);
    outline: 1px solid var(--cyan-d2);
    line-height: 100%;
    transition: var(--transition-50);
    z-index: 10000;
    cursor: pointer;
    & img {
      width: 100%;
      height: auto;
      aspect-ratio: 1;
    }
}
#user-info:hover {
    background-color: var(--cyan);
}
#user-info a {
    padding: var(--gutter-half);
    color: var(--white);
    font-variation-settings: var(--weight-450);
}
#user-info a:hover {
    color: var(--white);
}
.frontend-fs #user-info {
    top: var(--gutter);
}
#quick-actions {
    position: fixed;
    top: calc(var(--header-height) + var(--favorites-height) + var(--gutter-double));
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: calc(100vh - calc(2 * var(--gutter)));
    transition: var(--transition-50);
    right: 0;
    z-index: 10000;
    & :is(button, a) {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--gutter-half);
        white-space: nowrap;
        line-height: 100%;
        color: var(--white);
        font-variation-settings: var(--weight-450);
        transition: var(--transition-30);
        border: none !important;
        cursor: pointer;
        width: 40px;
        height: 40px;
        min-width: initial;
        min-height: initial;
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-bottom: var(--gutter-half);
        right: 0;
        text-shadow: 1px 1px 1px var(--transparent);
        &#user-logout {
            margin: auto 0 0 auto !important;
        }
        &:hover {
            width: 60px;
            text-shadow: 1px 1px 1px var(--black-80);
        }
    }
}
.frontend-fs #quick-actions {
    top: var(--gutter);
}

main {
    position: relative;
    background: var(--white);
    padding-inline: var(--gutter);
    box-shadow: var(--box-shadow-446-10);
}
.frontend-fs main {
    margin-top: var(--gutter) !important;
}
/*
main::before {
    position: absolute;
    content: '';
    inset: 0;
    background: url('../../../images/_system/logo.svg') center center no-repeat;
    background-size: cover;
    opacity: 0.03;
}
*/
#title {
    padding-top: 0 !important;
    transition: var(--transition-30);
}
.frontend-fs #title {
    padding-bottom: var(--gutter) !important;
}
#title h1 {
    margin-bottom: 0;
}
#title h4 span {
  font-family: inherit;
  color: inherit;
  font-variation-settings: var(--weight-350);
}
#filter-trigger {
  position: absolute;
  top: 0;
  left: 0;
}
#help-trigger {
  position: absolute;
  top: 0;
  right: 0;
}
.article-links {
    margin-top: initial !important;
}
#back-home {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--orange);
    z-index: 1000;
    &:hover {
        color: var(--blue);
    }
}
#page-loader {
    position: fixed;
    inset: 0;
    background: var(--white-80);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    backdrop-filter: blur(5px);
    transition: opacity 0.5s ease;
    &.top {
        z-index: 1000000;
    }
    & .spinner {
        width: 48px;
        height: 48px;
        border: 5px solid var(--grey-30);
        border-top-color: var(--blue);
        border-radius: 50%;
        animation: spinner 0.8s linear infinite;
    }
}
.frontend-edit {
    top: 0 !important;
}
#print-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white-60);
    backdrop-filter: blur(5px);
    z-index: 100;
}
#print-dialog-outer {
    display: block;
    position: relative;
    min-width: var(--main-min-width);
    max-width: var(--main-max-width);
    height: auto;
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: center;
    margin: 0 auto;
    padding: 0 var(--gutter) 0;
    border-bottom: var(--gutter) solid var(--white);
    background-color: var(--white);
    border-radius: 16px;
    box-shadow: var(--box-shadow-15-30);
    z-index: 10000;
    & h2 {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        width: calc(100% + var(--gutter-double));
        margin: calc(-1 * var(--gutter)) 0 0 calc(-1 * var(--gutter));
        padding: var(--gutter);
        background: var(--blue);
        color: var(--white);
        justify-content: space-between;
        z-index: 10002;
    }
    & #print-dialog-title {
        padding: var(--gutter);

    }
}
#print-dialog-close {
    top: var(--gutter-half);
    right: var(--gutter-half);
    background: var(--red);
    color: var(--white);
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-radius: 100%;
    cursor: pointer;
}
#print-dialog-inner {

}
#title {
    border-bottom: var(--border-default) !important;
    padding-bottom: var(--gutter-double) !important;
    margin-bottom: var(--gutter) !important;
    background: none !important;
    box-shadow: none !important;
    order: 0;
}
#title.with-attachments {
    padding-bottom: var(--gutter) !important;
}
#title #pacijent-cave {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: var(--gutter);
    right: 0;
    padding: var(--gutter-half);
    background-color: var(--red);
    height: 48px;
    animation: flash 0.6s ease-in-out 5;
    outline: 2px solid transparent;
}
#title #pacijent-cave #cave-icon {
    color: var(--white);
    margin-right: var(--gutter-half);
}
#title #pacijent-cave #cave-title {
    color: var(--white);
    font-variation-settings: var(--weight-450);
}
#title #pacijent-cave #cave-content {
    position: absolute !important;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.title-block-image {
    margin-bottom: var(--gutter-half);
}
#tags {
    order: 1;
}

.popup-outer {
    position: fixed;
    left: 0; top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    background: var(--white-30);
    overflow: hidden;
    backdrop-filter: blur(5px);
    z-index: 9999;
    & .popup-inner {
        display: block;
        position: relative;
        min-width: var(--main-min-width);
        max-width: var(--main-max-width);
        height: auto;
        max-height: 60vh;
        overflow-x: hidden;
        overflow-y: auto;
        align-self: center;
        margin: 0 auto;
        padding: 0;
        border-bottom: var(--gutter) solid var(--white);
        background-color: var(--white);
        border-radius: 16px;
        box-shadow: var(--box-shadow-15-30);
        z-index: 10000;
    }
    & .popup-overlay {
        background-color:transparent;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        display:block;
        z-index: 10000;
    }
    & .popup-title {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        width: 100%;
        margin: 0;
        padding: var(--gutter);
        background: var(--blue);
        justify-content: space-between;
        z-index: 10002;
        & .popup-heading {
            flex: 0 0 calc(100% - 64px);
            color: var(--white);
            margin: 0;
            padding: 0;
            border: none;
        }
        & .popup-close {
            flex: 0 0 64px;
            margin: 0;
            padding: 0;
            border: none;
            background: none;
            min-width: initial;
            min-height: initial;
            font-size: 1.75em;
            &:focus {
                box-shadow: none;
            }
        }
    }
    & .popup-content {
        position: relative;
        width: 100%;
        padding: var(--gutter);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10001;
        & h3 {
            color: #fff;
            text-align: center;
            background: var(--cyan);
        }
        & :where(p, li, strong, em) {
            color: #333;
        }
        & a {
            color: var(--cyan);
        }
        & *:last-child {
            margin-bottom: 0;
        }
    }
}

.ft-tooltip.checkin {
    &::before {
        z-index: 1001;
        color: var(--white);
        filter: drop-shadow(var(--box-shadow-226-30));
    }
    &::after {
        border: 1px solid var(--white);
        translate: 0 -33%;
    }
}

.ft-tooltip.kp-dijagnoza-tooltip,
.ft-tooltip.kp-napomena-tooltip {
    &::before {
        z-index: 1001;
    }
    &::after {
        justify-content: flex-start;
        min-width:   320px !important;
        min-height:  100px !important;
        font-size:   0.9em !important;
        line-height: 1.2em !important;
    }
}
.ft-tooltip.kp-dijagnoza-tooltip {
    &::before {
        transform: translate(100%, -75%) !important;
    }
    &::after {
        transform: translate(calc(100% + 14px), -50%) !important;
    }
}
.ft-tooltip.kp-napomena-tooltip {
    &::before {
        transform: translate(calc(100% - 20px), -90%) !important;
    }
    &::after {
        transform: translate(calc(-100% - 2px), -50%) !important;
    }
}

#modules {

}
#modules .moduletable {
    border:var(--border-default-10);
}
#cms {

}
#cms section {
    transition: var(--transition-30);
}

/* Context Menu */
#context-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
}
#context {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
    background-color: var(--cyan-d1);
    border: 3px solid var(--cyan-d2);
    box-shadow: var(--box-shadow-15-60);
    z-index: 1001;
    transition: var(--transition-30);
    & h3 {
        color: var(--white);
        border-bottom-color: var(--white-30);
        text-shadow: var(--text-shadow-12-40);
        font-variation-settings: var(--weight-400);
    }
    & ul {
        & li {
            padding: 0;
            margin: 0;
            transition: var(--transition-30);
            & a {
                position: relative;
                display: block;
                padding: 5px 5px 5px 32px;
                width: 100%;
                color: var(--white);
                transition: var(--transition-30);        
                &::before {
                    position: absolute;
                    left: 5px;
                    display: block;
                    font-family: var(--font-fa);
                    width: 20px;
                    height: 100%;
                    color: var(--white);
                }
            }
            &:hover {
                background-color: var(--blue-d2);
                & a {
                    color: var(--white);
                }
            }
            &.spacer {
                height: 1px;
                margin: 3px 0;
                background-color: var(--white-20);
                &:hover {
                    background-color: var(--white-20);
                }
            }
            &#context-link-profil a::before {
                content: '\f007';
            }
            &#context-link-karton a::before {
                content: '\f07b';
            }
            &#context-link-karton-edit a::before {
                content: '\f07c';
            }
            &#context-link-qr a::before {
                content: '\f029';
            }
        }
    }
    &.active {
        opacity: 1;
        pointer-events: all;
    }
}

#debug {
    position: fixed;
    top: 150px;
    left: 50px;
    padding: 20px;
    border: 1px solid #000;
    box-shadow: var(--box-shadow-15-30);
}

/* Forms */
/* General layout, labels and controls */
.rsform-block:nth-last-child(2) .formDescription {
    margin-bottom: 0;
}
/* Field type: spacer */
.rsform-block-spacer  {
    width: 100% !important;
    background: var(--black-10) !important;
    height: 1px !important;
    &.rsfs-bottom {
        margin-bottom: var(--gutter);
    }
    &.rsfs-top {
        margin-top: var(--gutter);
    }
}
/* Field type: login input */
.rsform-block-login .controls {
    max-width: 100%;
}
/* Field type: calendar */
.rsform-type-calendar input {
    margin-right: var(--gutter-quarter) !important;
    width: calc(100% - var(--gutter-quarter) - 75px) !important;
}
.rsform-type-calendar button {
    margin: 0 !important;
}
/* Field type: checkbox group */
.rsform-block.rsform-type-checkboxgroup {
    padding-left: 0 !important;
}
/* Specific fields */
.rsform-block-ordinacija {
    margin-bottom: calc(var(--gutter-double) - 15px) !important;
    padding-bottom: var(--gutter);
    border-bottom: 1px solid var(--black-10);
    & #ordinacija {
        &.soft-locked {
            opacity: 0.4 !important;
            cursor: url("../images/unlock.png") 10 10, not-allowed;
        }
    }
}
.rsform-block-noemail {
    margin-top: calc(-3 * var(--gutter-quarter)) !important;
    & .formControls {
        padding: var(--gutter-half) !important;
        border: 3px solid var(--red);
        & .formDescription {
            margin-bottom: 0 !important;
        }
    }
}
.rsform-block-notel {
  margin-top: calc(-3 * var(--gutter-quarter)) !important;
  & .formControls {
    padding: var(--gutter-half) !important;
    border: 3px solid var(--red);
    & .formDescription {
      margin-bottom: 0 !important;
    }
  }
}
.rsform-block-sms {
  margin-top: calc(-1 * var(--gutter-quarter)) !important;
  & .formControls {
    padding: var(--gutter-half) !important;
    border: 3px solid var(--green);
    & .formDescription {
      margin-bottom: 0 !important;
    }
  }
}
.rsform-block-jmbg {
    & .formDescription {
        margin-bottom: 0 !important;
    }
}
.rsform-block-nojmbg {
    margin-top: calc(-2 * var(--gutter-quarter)) !important;
    & .formControls {
        padding: var(--gutter-half) !important;
        border: 3px solid var(--red);
        & .formDescription {
            margin-bottom: 0 !important;
        }
    }
}
.rsform-block-mesto {
	& .formDescription {
		margin-bottom: 0 !important;
	}
}

.rsform-block-cave {
    & .formDescription {
        margin-bottom: 0 !important;
    }
}
.rsform-block-nocave {
    margin-top: calc(-2 * var(--gutter-quarter)) !important;
    & .formControls {
        padding: var(--gutter-half) !important;
        border: 3px solid var(--red);
        & .formDescription {
            margin-bottom: 0 !important;
        }
    }
}
.rsform-block-zakazi-pregled {
    margin-top: calc(-1 * var(--gutter-quarter)) !important;
	margin-bottom: calc(4 * var(--gutter-quarter)) !important;
    & .formControls {
        padding: var(--gutter-half) !important;
        border: 5px solid var(--green);
        & .formDescription {
            margin-bottom: 0 !important;
        }
    }
}
.rsform-block-naredni-pregled-datum {
    margin-top: var(--gutter-negative-half) !important;
    margin-bottom: 0 !important;
}
.rsform-block-naredni-pregled-kategorija {
    float: right !important;
    width: calc(30% - var(--gutter-half)) !important;
    margin-right: 0 !important;
    & .formControls {
        width: 100% !important;
    }
    & label {
        display: none;
    }
}
.rsform-block-naredni-pregled-sat {
    float: right !important;
    width: 10% !important;
    margin-right: var(--gutter-quarter) !important;
    & .formControls {
        width: 100% !important;
        & select {
            width: 100%;
        }
    }
    & label {
        display: none;
    }
}
.rsform-block-naredni-pregled-minut {
    float: right !important;
    width: 10% !important;
    margin-right: var(--gutter-quarter) !important;
    & .formControls {
        width: 100% !important;
        & select {
            width: 100%;
        }
    }
    & label {
        display: none;
    }
}
.rsform-block-kontakt-ostalo {
    margin-top: calc(-1 * var(--gutter));
}
/* Buttons */
button.btn-primary {
    background: var(--blue) !important;
}
button.btn-primary:hover {
    background: var(--blue-d2) !important;
}
button.btn-secondary {
    background: var(--red) !important;
}
button.btn-secondary:hover {
    background: var(--red-d2) !important;
}
button.btn-orange {
    background: var(--orange) !important;
}
button.btn-orange:hover {
    background: var(--orange-d2) !important;
}
button.btn-green {
    background: var(--green) !important;
}
button.btn-green:hover {
    background: var(--green-d2) !important;
}
button.btn-danger {
    background: var(--red) !important;
}
button.btn-danger:hover {
    background: var(--red-d2) !important;
}
.btn.dt-button {
    margin: 0 var(--gutter-quarter) 0 0;
}
.btn.dt-button > span {
    color: var(--white) !important;
    line-height: 0;
}
.btn.dt-button.disabled {
    opacity: 0.33;
}
.rsform-calendar-button {
    font-family: var(--font-fa);
    background: var(--blue);
    min-width: 75px;
}
.rsform-calendar-button:hover {
    background: var(--blue-d2);
}
/* Error Messages */
form > .formRed {
    width: 100%;
    max-width: 1020px;
    color: var(--red-d2);
    border: var(--border-oe-rsform-error);
    background: var(--rsform-error-bg);
    padding:var(--gutter);
    text-align: center;
    margin-inline: auto;
    margin-bottom: var(--gutter);
    font-variation-settings: var(--weight-medium);
}
/* Password strength meter */
#password-strength {
    position: fixed;
    top: var(--gutter);
    left: 50%;
    transform: translateX(-50%);
    width: max(300px, 35vw);
    padding: var(--gutter);
    background-color: var(--white-90);
    border: 1px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease, border-color 0.5s ease;
    z-index: 9999;
    pointer-events: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px 2px var(--red);
    & #password-strength-bar {
        height: 100%;
        height: 3px;
        background-color: var(--red);
        transition: width 0.5s ease, background-color 0.5s ease;
    }
    & #password-strength-text {
        margin: 0 0 var(--gutter-half) 0 !important;
        font-variation-settings: var(--weight-500);
        color: var(--red);
        font-size: 0.85em;
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* QR generator */
#qrForm {
    padding: var(--gutter) var(--gutter) 0 var(--gutter) !important;
    & textarea {
        resize: none;
    }
}
#qrForm #R1 {
    width: 15%;
    margin-right: 5px;
}
#qrForm #R2 {
    width: 70%;
    margin-right: 5px;
}
#qrForm #R3 {
    width: calc(15% - 5px);
    float:right;
}
#qrForm .rsform-block-send {
    padding-top: 0;
    border: none;
    & .formBody {
        text-align: right;
        & #send {
            margin: 0;
        }
    }
}
#response {
    padding: var(--gutter) var(--gutter) 0 var(--gutter) !important;
}
#ipqr  {
    aspect-ratio: 1;
    border: 5px solid var(--green);
    &:not(:has(img)) {
        background: var(--cyan-15);
        border-color: var(--red);
    }
    & img {
        margin: 0 !important;
    }
}

/* Frontend profile editor */
.dataTable-transposed {
    display: grid;
    grid-template-columns: auto auto; /* Adjust the number of columns as needed */
}
.dataTable-transposed thead,
.dataTable-transposed tbody,
.dataTable-transposed tfoot,
.dataTable-transposed colgroup,
.dataTable-transposed col {
    display: contents;
}
.dataTable-transposed tr {
    display: grid;
}
.dataTable-transposed th,
.dataTable-transposed td {
    border: 1px solid #ccc;
    padding: 8px;
}
/* Transpose the first column of headers */
.dataTable-transposed thead th:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1;
}
.dataTable-transposed thead th:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2;
}
/* Transpose the first row of data */
.dataTable-transposed tbody td:nth-child(1) {
    grid-column: 2 / 3;
    grid-row: 1;
}
.dataTable-transposed tbody td:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 2;
}

/* DataTables v2 */

    /* Fixed Header */
    .dtfh-floatingparent.dtfh-floatingparent-head {
        background: var(--white);
        z-index: 1000 !important;
        overflow: visible !important;
        & > div:not(.dtcc-dropdown) {
            border-bottom: 1px solid var(--cyan-d2);
        }
        & table {
            border-top: none;
            border-bottom: none;
            & th {
                padding: var(--table-padding-default);
                background: var(--th-bg);
                border-bottom: var(--border-table-outer);
                text-transform: uppercase;
                text-align: center;
                font-variation-settings: var(--weight-medium);
            }
            & tr#columnControl {
                box-shadow: 0 3px 4px var(--black-20);
            }
            & td {
                padding: var(--table-padding-default);
            }
        }
        & .dtcc-dropdown {
            translate: 2px 15px;
            & .dtcc-list-buttons {
                max-height: var(--dtcc-list-buttons_max-height-fixed);
            }
        }
    }
    body:has(>.dtfh-floatingparent.dtfh-floatingparent-head .dtcc-dropdown) main #datatable tbody {
        filter: blur(5px);
    }
    #datatable_wrapper:has(>.dtcc-dropdown) {
        & #datatable tbody {
            filter: blur(5px);
        }
        & .dtcc-dropdown {
            translate: 2px -6px;
        }
    }

    /* Column Filtering */
    #datatable_wrapper>.dt-layout-row:has(.buttons-columnVisibility) {
        & .dt-buttons {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--gutter-half);
            padding: 0 var(--gutter-half) var(--gutter-half) var(--gutter-half);
            & button {
                height: 24px;
                border: none;
                background: none;
                margin: 0;
                padding: 0;
                cursor: pointer;
                & span {
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 24px;
                    text-align: left;
                    padding-left: 30px;
                    font-size: 0.9em;
                    &::before {
                        position: absolute;
                        display: block;
                        content: '';
                        left: 0;
                        top: 0;
                        width: 24px;
                        height: 24px;
                        margin: 0 10px 0 0;
                        border: var(--border-default);
                        background-color: var(--white);
                    }
                    &::after {
                        position: absolute;
                        display: block;
                        content: "";
                        left: 4px;
                        top: 4px;
                        width: 16px;
                        height: 16px;
                        transition: 120ms transform ease-in-out;
                        transform-origin: bottom left;
                        transform: scale(0);
                        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
                        box-shadow: inset 1em 1em var(--cyan);   
                    }
                }
                &.dt-button-active {
                    & span {
                        &::after {
                            transform: scale(1);
                        }
                    }
                }
                &#dt-btn-remember-columns {
                    grid-row: 3;
                    grid-column: 5;
                    cursor: pointer;
                    font-size: 1em;
                    outline: 0;
                    min-width: var(--button-min-width);
                    max-width: 205px;
                    height: var(--button-height);
                    border: var(--border-default);
                    & span {
                        position: static;
                        width: 100%;
                        height: 24px;
                        text-align: center;
                        color: var(--white) !important;
                        padding-left: 0;
                        font-size: 1em;
                        font-variation-settings: var(--weight-medium);
                        &::before {
                            display: none;
                        }
                        &::after {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    #datatable_wrapper .dtsp-panesContainer:not(:has(.dtsp-searchPanes)),
    #datatable_wrapper .dtsp-panesContainer:has(.dtsp-emptyMessage) {
        display: none !important;
        visibility: hidden;
        padding-right: 0 !important;
        border: none !important;
    }
    .dtsb-searchBuilder:empty {
        border-left: none !important;
        border-right: none !important;
    }

    /* Filters and Page Size */
    #datatable_wrapper > .dt-layout-row:has(.dt-length) {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        padding-inline: 2px;
        margin-bottom: var(--gutter);
        & .dt-layout-cell {
            padding: 0;
            &.dt-layout-start {
                display: flex;
                flex: 0 0 calc(100% - 330px);
                & .dtsp-panesContainer {
                    flex: 0 0 330px;
                    padding-right: var(--gutter);
                }
                & .dtsb-searchBuilder {
                    padding-inline: var(--gutter);
                    flex: 0 0 calc(100% - 330px);
                    border-left: 1px solid var(--black-10);
                    border-right: 1px solid var(--black-10);
                }
            }
            &.dt-layout-end {
              flex: 0 0 330px;
              & .dt-length {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 0 0 0 var(--gutter);
                & select {
                  margin: 0 5px 0;
                  width: 100px;
                  cursor: pointer;
                }
              }
            }
            & .dt-search {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 0;
                & label {
                    margin-right: 10px;
                }
                & input {
                    min-width: 33vw;
                }
            }
        }
    }
    #datatable_wrapper:has(.dtsp-panesContainer .dtsp-emptyMessage) .dtsb-searchBuilder {
        border-left: none !important;
        padding-left: 0 !important;
    }

    /* Table header */
    #datatable:has(.dtcc) th {
        border-bottom: var(--border-table-outer);
        &:is(.dt-col-ord, .dt-col-ime, .dt-col-dgs, .dt-col-eml, .dt.col-lek, .dt-col-kon, .dt-col-cav, .dt-col-nap):not([class*="dt-ordering-"]) {
            text-indent: 10px;
        }
        &:is(.dt-col-ord, .dt-col-ime, .dt-col-dgs, .dt-col-eml, .dt.col-lek, .dt-col-kon, .dt-col-cav, .dt-col-nap):is([class*="dt-ordering-"]) > div {
            padding-left: 10px;
        }
        &.dt-col-ord {
            & > div {
                justify-content: flex-start;
            }
        }
        &.dt-col-dat {
            & > div {
                justify-content: center;
            }
        }
        &.dt-col-rod {
            & > div {
                display: flex;
                padding-right: var(--table-padding-default);
                justify-content: flex-end;
            }
        }
        &.dt-col-tel {
            & > div {
                display: flex;
                padding-right: var(--table-padding-default);
                justify-content: flex-end;
            }
        }
        &.dt-col-nap {
            max-width: 50ch;
        }
    }
    .dt-column-title {
        font-variation-settings: var(--weight-light);
        color: var(--datatable-th);
    }
    th[class*="dt-orderable"] {
        position: relative;
        cursor: pointer;
        transition: background 0.5s ease;
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, transparent 0%, var(--cyan-15) 10%, var(--cyan-30) 20%, var(--cyan-30) 80%, var(--cyan-15) 90%, transparent 100%);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
        }
        &:hover {
            & .dt-column-title {
                color: var(--cyan-d3);
            }
            &::after {
                opacity: 1;
            }
        }
    }
    th:is(.dt-ordering-asc, .dt-ordering-desc) {
    & .dt-column-header {
        display: inline-flex;
        align-items: stretch;
        vertical-align: middle;
    }
        & .dt-column-title {
            font-variation-settings: var(--weight-medium);
        }
        & .dt-column-order {
            display: flex;
            align-items: center;
            margin-left: 5px;
            &::before {
                display: block;
                color: var(--datatable-th);
                font-size: 24px;
            }
        }
    }
    th.dt-ordering-asc {
        & .dt-column-order {
            &::before {
                content: '▴';
            }   
        }
    }
    th.dt-ordering-desc {
        & .dt-column-order {
            &::before {
                content: '▾';
            }
        }
    }

    /* Footer: info and paging */
    #datatable_info {
        display: flex;
        flex-wrap: wrap;
        margin: var(--gutter) 0;
        padding-inline: var(--gutter);
        & > span {
            flex: 0 0 calc(100% / 3);
            font-variation-settings: var(--weight-medium);
            & > span {
              font-variation-settings: inherit;
            }
            & .value {
                color: var(--red);
            }
        }
        & .dt-info-count {
            text-align: left;
        }
        & .dt-info-total {
            text-align: center;
        }
        & .dt-info-pages {   
            text-align: right;
        }
    }
    .dt-paging {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: var(--gutter) 0;
        padding: var(--gutter) var(--gutter) 0 var(--gutter);
        border-top: var(--border-default) !important;
        & button {
            min-width: 90px;
            width: 45px;
            height: 45px;
            padding: 8px 15px;
            margin-inline: var(--gutter-quarter);
            border-radius: 8px;
            border-color: transparent;
            background: var(--cyan-l2);
            color: var(--white);
            &.current {
                border-color: transparent;
                background: var(--red);
                box-shadow: none;
                &:hover {
                    background: var(--red);
                }
            }
            &:focus {
                border-color: transparent;
                box-shadow: none;
            }
            &:hover {
                background: var(--cyan);
            }
            &.dt-paging-button.first:not(.disabled) {
                background: var(--cyan-d2);
                &:hover {
                    background: var(--cyan-d4);
                }
            }
            &.dt-paging-button.previous:not(.disabled) {
                background: var(--cyan-d1);
                &:hover {
                    background: var(--cyan-d3);
                }
            }
            &.dt-paging-button.next:not(.disabled) {
                background: var(--cyan-d1);            
                &:hover {
                    background: var(--cyan-d3);
                }
            }
            &.dt-paging-button.last:not(.disabled) {
                background: var(--cyan-d2);         
                &:hover {
                    background: var(--cyan-d4);
                }
            }
        }
    }

/* Table */
#datatable.icd-10 {

}
#datatable.icd-10 thead th {
    text-align: left;
}
#datatable.icd-10 thead th span.dt-column-title {
    font-variation-settings: var(--weight-light);
    color: var(--datatable-th);
}
#datatable.icd-10 thead th span.dt-column-order {
    color: var(--blue-d2);
}
#datatable.icd-10 tr:hover > td {
    cursor: pointer;
    background-color: var(--blue-10);
}
/* Selection */
.select-info {
    display: block;
}
.select-info .select-item {
    display: block;
}
/* Pagination */
/* Popups */
.DTED_Lightbox_Background {
    z-index: 10000;
}
.DTED.DTED_Lightbox_Wrapper {
    z-index: 10001;
}

/* Common Elements */
/* Quick Index */
#index {
    padding: var(--gutter);
    margin-bottom: var(--gutter);
    background-image: var(--module-gradient);
    border: var(--border-default-10);
}
#index ul.pregled-index {
    padding: 0;
    margin: 0;
    list-style: none;
    border-left: var(--border-article-list);
}
#index ul.pregled-index li {
    position: relative;
    width: 100%;
    padding-left: var(--gutter-half);
    margin-bottom: var(--gutter-half);
    line-height: 150%;
}
#index ul.pregled-index li::before {
    position: absolute;
    left: -1px;
    top: 0;
    content: ' ';
    width: 2px;
    height: 100%;
    background-color: transparent;
    transition: var(--transition-30);
}
#index ul.pregled-index li:hover::before {
    background-color:var(--cyan-50);
}
#index ul.pregled-index a {
    background: none;
    line-height: 130%;
}
.pregled-zapis {
    scroll-margin-top: calc(var(--header-min-height) - 5px);
}

/* Views */

/* Kartoni (cat) */

    /* Filter */
    #ft-dt-filter {
        --filter-max-h: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
        &.expanded {
            max-height: var(--filter-max-height);
            padding-bottom: var(--gutter-half);
            margin-bottom: var(--gutter);
            border-bottom: var(--border-default-10);
        }
    }

    /* Iskljuceno obelezavanje boja */
    #datatable.coloring-off > tbody > tr > td {
        background: transparent !important;
        text-decoration: none !important;
        color: initial !important;
        font-variation-settings: var(--weight-normal) !important;
    }
    #datatable.coloring-off > tbody > tr > :where(td.kp-imeprez, td.kp-edit) a {
        color: var(--a-color) !important;
        &:hover {
            color: var(--a-hover) !important;
        }
    }

    /* Naizmenicno sencenje */
    #datatable > tbody > tr:nth-child(odd) {
        background-color: var(--black-05);
    }

    /* Dnevni pregledi */
    tr.danas {

      /* Pregled zakazan (neobavljen) */
      &.zakazan {

      }

      /* Pacijent u cekaonici */
      &.cek1 {
        & td {
          background: var(--red-40);
        }
        & * {
          color: var(--red) !important;
          font-variation-settings: 'wght' 500 !important;
        }
      }

      /* Pregled u toku */
      &.u-toku {
        & td {
          background: var(--green) !important;
          font-variation-settings: var(--weight-400);
          color: var(--white) !important;
        }
        & a {
          font-variation-settings: inherit !important;
          color: var(--white) !important;
        }
      }

      /* Pregled zavrsen */
      &.obavljen {
        & td {
          background: var(--black-20) !important;
          color: var(--black-30) !important;
          font-variation-settings: var(--weight-medium) !important;
          & :is(.kp-pfv, .kp-pfd, .kp-pfk) {
            color: var(--black-30) !important;
          }
        }
        & a:not(.checkin) {
          color: var(--black-50) !important;
          font-variation-settings: var(--weight-medium) !important;
        }
        & span:not(.kp-pfv, .kp-pfd, .kp-pfk) {
          color: var(--black-50) !important;
          font-variation-settings: var(--weight-medium) !important;
        }
      }

      /* Pregled otkazan */
      &.otkazan {
        & td {
          text-decoration: line-through !important;
          & :is(.kp-pfv, .kp-pfd, .kp-pfk) {
            text-decoration: line-through !important;
          }
        }
      }

    }

    /* Zauzeti slogovi */
    tr.checked {
      & * {
        color: var(--red) !important;
      }
      & td {
        background: var(--red-30) !important;
        & .checkin {
          position: relative;
          margin-right: 7px;
          z-index: 1000 !important;
        }
      }
    }

    /* Highlighting */
    #datatable tbody tr.karton:hover > td {
      color: var(--white) !important;
      text-decoration: none !important;
      cursor: pointer !important;
      & :is(a, span, p, div:not(.indicator-info)) {
        color: var(--white) !important;
      }
    }
    #datatable tbody tr.karton:not(.checked):hover > td {
      background: var(--blue-d2) !important;
    }
    #datatable tbody tr.karton.checked:hover > td {
      background: var(--red-d2) !important;
    }

    /* Ordinacija */
    #datatable tbody tr .kp-ord {
        text-indent: 10px;
    }

    /* Datum pregleda */
    #datatable tbody tr .kp-pregled-datum {
        font-size: 0;
        & .kp-pf {
            display: flex;
            justify-content: center;
            & span {
                display: inline-flex;
                transition: var(--transition-30);
            }
            & .kp-pfv {
                width: 4.25ch;
                justify-content: flex-end;
                font-variation-settings: 'wght' 500;
                margin-right: 15px;
            }
            & .kp-pfd {
                width: 8.5ch;
                justify-content: flex-end;
                font-variant-numeric: tabular-nums lining-nums;
                letter-spacing: -0.6px;
            }
            & .kp-pfk {
                width: 2.25ch;
                justify-content: flex-start;
                font-variation-settings: 'wght' 500;
                margin-left: 10px;
            }
        }
    }

    /* Ime i prezime */
    #datatable tbody tr td.kp-imeprez {
        padding-left: calc(10px + var(--table-padding-default));
    }

    /* Dijagnoze */
    #datatable tbody tr td.kp-dijagnoze {
        padding-left: calc(10px + var(--table-padding-default));
        & div.kp-dijagnoza {
            display: -webkit-box;
            position: relative;
            width: 100%;
            height: 100%;
            max-height: 2.4em; /* 2 * line-height */
            overflow: hidden;
            cursor: alias;
            z-index: 100;
            font-size: 0.8em !important;
            font-variation-settings: var(--weight-350);
            line-height: 1.2em;
            white-space: normal;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            transition: color 0.3s ease;
            mask: linear-gradient(to top, transparent 5%, #000 50%, #000 100%);
            & br {
                display: block;
                margin: 6px 0;
            }
            &::first-letter {
                text-transform: uppercase;
            }
        }
    }

    /* Datum rođenja */
    #datatable tbody tr td.kp-datum {
        padding-inline-end: calc(10px + var(--table-padding-default));
        font-variant-numeric: tabular-nums lining-nums;
        letter-spacing: -0.6px;
    }

    /* E-mail adresa */
    #datatable tbody tr td.kp-email {
        padding-left: calc(10px + var(--table-padding-default));
    }

    /* Broj telefona */
    #datatable tbody tr td.kp-telefon {
        padding-inline-end: calc(10px + var(--table-padding-default));
    }

    /* Odgovorni lekar */
    #datatable tbody tr td.kp-lekar {
        padding-left: calc(10px + var(--table-padding-default));
    }

    /* Kontakt */
    #datatable tbody tr td.kp-kontakt {
        padding-left: calc(10px + var(--table-padding-default));
    }

    /* Cave */
    #datatable tbody tr td.kp-cave {
        padding-left: calc(10px + var(--table-padding-default));
    }

    /* Napomene */
    #datatable tbody tr td.kp-napomene {
        padding-left: calc(10px + var(--table-padding-default));
        & div.kp-napomena {
            position: relative;
            width: 100%;
            height: 2.4em;
            padding-top: 3px;
            overflow: hidden;
            cursor: alias;
            z-index: 100;
            mask: linear-gradient(to top, transparent 5%, #000 50%, #000 100%);
            & span {
                transition: color 0.3s ease;
                &.dt-nap-txt {
                    display: -webkit-box;
                    font-size: 0.8em !important;
                    font-variation-settings: var(--weight-350);
                    line-height: 1.2em;
                    max-height: 2.4em; /* 2 * line-height */
                    white-space: normal;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                &.dt-nap-datum {
                    display: none;
                }
            }
            & .dt-nap-txt::first-letter {
                text-transform: uppercase;
            }
        }
    }
    #datatable tbody tr:has(td.kp-napomene) > td {
        vertical-align: top;
    }
    div.indicator-info {
        bottom: calc(1/2 * var(--table-padding-default));
        right: var(--table-padding-default);
        font-size: 0.7em;
        color: var(--black-30) !important;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    td:has(.indicator-info):hover div.indicator-info {
        color: var(--black-30) !important;
        opacity: 0;
    }

/* Kartoni (cat) => karton redirekcija */
p.loader {display: block; animation: spinner 1.5s linear infinite}

/* Karton */
/* Index: specijalni format */
#index ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
#index ul li {
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
}
#index a {
    font-variation-settings: var(--weight-500) !important;
}
#index.moduletable.fa-icon-toc h3::after {
    content: '\e1d1' !important;
}

#napomene {
  margin-bottom: var(--gutter);
  & * {
    transition: var(--transition-30)
  }
  & .napomena {
    display: block;
    margin-bottom: var(--gutter-half);
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  & ul {
    list-style: none;
    padding: var(--gutter-half) 0 var(--gutter) 20px;
    & li {
      display: flex;
      align-content: center;
      width: 100%;
      margin-bottom: 15px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
  & a {
    display: flex;
    background: none !important;
  }
  & :where(summary, time, strong) {
    color: var(--a-color);
    &:hover {
      color: var(--a-hover);
    }
  }
  & .napomena-text {
    display: block;
    width: 100%;
    padding-left: var(--gutter);
  }
}

#prilozi {
  margin-bottom: var(--gutter);
  & * {
    transition: var(--transition-30)
  }
  & .prilog {
    display: block;
    margin-bottom: 5px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  & ul {
    list-style: none;
    padding: var(--gutter-half) 0 var(--gutter) 20px;
    & li {
      display: flex;
      align-content: center;
      width: 100%;
      margin-bottom: 15px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
  & a {
    display: flex;
    background: none !important;
  }
  & :where(summary, time, strong) {
    color: var(--a-color);
    &:hover {
      color: var(--a-hover);
    }
  }
}

#pregledi {
    flex-direction: column-reverse;
}
.pregled-zapis:last-of-type { /* last-of-type jer je flex-direction: column-reverse */
    margin-bottom: var(--gutter);
}
.pregled-zapis:not(:first-of-type) { /* first-of-type jer je flex-direction: column-reverse */
    border-bottom: 5px double var(--orange);
    padding-bottom: var(--gutter);
}
.pregled-zapis h2 > .heading_text {
    line-height: 50%;
    padding-bottom: var(--gutter);
    color: var(--blue);
}
.pregled-zapis h2 > .heading_text span {
    color: inherit;
    font-family: inherit;
    line-height: 100%;
    font-size: 0.75em;
}
#pregledi .anchor {
    scroll-margin-top: calc(var(--header-min-height) - var(--gutter) + 5px);
}
.pregled-zapis .pregled-toolbar {
    position: absolute;
    right: 0;
    margin: 0;
    flex-direction: column;
    z-index: 100;
}
.pregled-zapis .pregled-toolbar button:not(:last-of-type) {
    margin-bottom: 5px;
}
.pregled-zapis > section > section > p::first-letter {
    text-transform: uppercase;
}
.pregled-zapis > section > section[data-type="kontrola-txt"] > p:last-of-type::first-letter {
    text-transform: lowercase;
}
.pregled-zapis > section p:empty {
    display: none !important;
}
/* Karton: Fullscreen */
.fullscreen :where(header, nav, #modules-fs, #modules, footer) {
    display: none !important;
}
.fullscreen #cms {
    flex: 0 0 100% !important;
}
/* Karton: Print */
html.print {
    margin-top: 0 !important;
    background: #fff;
    overflow: hidden;

	& body {
    margin-top: 0 !important;
		background: #fff;
	}

	& :where(header, nav, joomla-alert, #modules-fs, #modules, #user-info, #quick-actions, #back-home, #title, .pregled-toolbar, .fullscreen-toggle, #tags, #index, #napomene, #prilozi, .rl_quickindex, #txt, footer, .print-hidden, #back-top) {
		display: none !important;
	}
    
        & main {
            margin-top: 0 !important;
            box-shadow: none !important;
            background: none !important;

            &::before {
                display: none !important;
            }

            & article {
                display: block !important;
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;

                & #cms {
                    display: block !important;
                    width: 100% !important;

                    & * {
                        line-height: 130%;
                    }

                    & .pacijent-info {
                        width: 100% !important;
                        margin-bottom: var(--gutter);
                        padding-bottom: var(--gutter);
                        border-bottom: var(--border-default-20);
                        & .pacijent-info-table {
                            border: none !important;
                            margin: 0 !important;
                            width: 100% !important;
                            max-width: 100% !important;
                            & td {
                                border: none !important;
                                background: none !important;
                                padding: 0 !important;
                            }
                            & td:not(:is(.pacijent-info-jmbg, .pacijent-info-email)) {
                                &.pacijent-info-ime p strong {
                                    font-size: 21px !important;
                                }
                            }
                            & td:is(.pacijent-info-jmbg, .pacijent-info-email) {
                                & p {
                                    margin-bottom: 0.5cm;
                                }
                            }
                        }
                    }

                    & .pregled-kat {
                        & h3 {
                            width: 100% !important;
                            line-height: 150% !important;
                            margin: var(--gutter) 0 !important;
                            padding: 0 !important;
                            text-align: center !important;
                        }
                    }

                    & #pregledi {
                        border: none !important;
                
                        & * {
                            font-family: Calibri, Tahoma, "Sans Serif" !important;
                            color: #000 !important;
                            text-transform: initial;
                        }
                                
                        & oe-pregled {
                            border: none !important;
                            padding: 0 !important;
                            margin: 0 !important;
                            &:not(.ft-pregled-print) {
                                display: none !important;
                            }
                            & p {
                                margin: 0 !important;
                                text-align: left !important;
                            }
                            & section {
                                margin: var(--p-margin);
                                width: 100%;
                                & table.print-only {
                                    display: table !important;
                                    width: 100%;
                                    min-width: 100%;
                                    max-width: 100%;
                                    border-collapse: collapse;
                                    border: none;
                                    & tr {
                                        border: none !important;
                                        & td {
                                            background: none !important;
                                            border: none !important;
                                            padding: 0 !important;
                                            border: none !important;
                                            text-align: left !important;
                                            vertical-align: top !important;
                                            &:first-of-type {
                                                width: 1.5cm;
                                                font-weight: bold;
                                            }
                                            &:last-of-type {
                                                width: calc(100% - 1.5cm);
                                            }   
                                        }
                                    }
                                }
                                & table#print-potpis {
                                    & tr {
                                        & td:first-of-type {
                                            width: 25%;
                                            font-weight: normal;
                                            text-align: left !important;
                                            padding-left: 0 !important;
                                            padding-top: 0.35cm !important
                                        }
                                        & td:last-of-type {
                                            width: 75%;
                                            text-align: right !important;
                                            font-weight: normal;
                                            padding-right: 0 !important;
                                            padding-top: 0.35cm !important;
                                            & span {
                                                white-space: pre-wrap;
                                            }
                                        }
                                    }
                                }
                            }
                            & section[data-type="dijagnoza"] {
                                clear: both;
                                & > p.print-only {
                                    margin-right: 8mm !important
                                }
                                & section[data-type="dijagnoza-txt"] {
                                    float:left;
                                }
                            }
                            & section[data-type="terapija"] {
                                clear: both;
                                & > p.print-only {
                                    margin-right: 8mm !important
                                }
                                & section[data-type="terapija-txt"] {
                                    float: left;
                                }
                            }
                            & section[data-type="plan"] {
                                clear: both;
                                & > p.print-only {
                                    margin-right: 3mm !important
                                }
                            }
                        }
                    }

                }

            }

        }
    
        & .print-only:not(.flex) {
            display: block !important;
        }
    
        & .print-only.flex {
            display: flex !important;
        }
    
}
html:not(.print) .print-only {
    display: none !important
}


/* Modules */
/* Filter (mod_custom) */
.moduletable.fa-icon-filter h3::after {
    content: '\f0b0' !important;
}


/* ===============
    PAGES
   =============== */

   /* === IZMENA PROFILA === */
   .frontendAdminProfileForm {
        & button#fpe-profile-save {
            margin-left: 0 !important;
        }
        & button#fpe-profile-cancel {
            margin-right: 0 !important;
        }
        & button#fpe-profile-delete {
            margin-left: auto !important;
            margin-right: 0 !important;
        }
        & .input-group:has(#fpe-korisnik-datum-rodjenja) {
            position: relative;
            & button {
                position: absolute;
                right: 0;
                font-size: 0;
                min-width: initial;
                width: 52px;
                background: var(--green-l1) !important;
                &:hover {
                    background: var(--green-d2) !important;
                }
                &::after {
                    position: absolute;
                    inset: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--white);
                    font-family: var(--font-fa);
                    font-size: 16px;
                    content: '\f073';
                }
            }
        }
     /* Calendar overrides */
     & .js-calendar {
       box-shadow: none !important;
       border-radius: var(--border-radius) !important;

       & .calendar-container {
         box-shadow: 0 3px 10px var(--black-70);
         border-radius: var(--border-radius) !important;
         padding: var(--gutter-half) !important;
         transform: translate(var(--gutter-half), var(--gutter-half));
       }

       & .calendar-container table {
         padding: 0 !important;
         border: none !important;
         max-width: 360px !important;
         margin-top: 0 !important;
       }

       & div.calendar-container :is(th, td) {
         padding: 10px !important;
         line-height: 100% !important;
       }

       & div.calendar-container table td.title {
         text-align: center;
         vertical-align: middle
       }

       & .calendar-container table thead td.headrow {
         color: #000;
         background: #fff
       }

       & .calendar-container tr:has(td.title-year) {
         & td {
           font-size: 1.4em !important;
           background: var(--blue-d2) !important;
           padding: 6px 0 !important;
           &.title span {
             font-variation-settings: var(--weight-700);
             letter-spacing: 1px;
           }
           & * {
             color: var(--white) !important;
             background: none !important
           }
         }
         & td:first-of-type {
           border-top-left-radius: var(--border-radius) !important;
           & a {
             font-size: 1em;
           }
         }
         & td:last-of-type {
           border-top-right-radius: var(--border-radius) !important;
           & a {
             font-size: 1em;
           }
         }
       }

       & .calendar-container tr:has(td.title-month) {
         & td {
           font-size: 1.25em !important;
           background: var(--red-d1) !important;
           padding: 3px 0 !important;
           &.title span {
             text-transform: uppercase;
             font-variation-settings: var(--weight-500);
             letter-spacing: 1px;
           }
           & * {
             font-size: 1em !important;
             color: var(--white) !important;
             background: none !important
           }
         }
         & td:first-of-type {
           & a {
             font-size: 1.12em !important;
           }
         }
         & td:last-of-type {
           & a {
             font-size: 1.12em !important;
           }
         }
       }

       & .calendar-container tr.time {
         & td {
           background: var(--white) !important;
           padding: 20px 0 20px 10px !important;
           border: none !important
         }
         & td:last-of-type {
           display: none;
         }
         & td.time-title {
           display: table-cell;
           position: relative;
           background-image: none !important;
           &:after {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
             background-color: var(--white);
             font-family: var(--font-fa);
             content: '\f017';
             color: var(--text-color);
             font-size: 1.5em;
           }
         }
       }

       & .calendar-container table tbody td.day {
         font-size: 14px !important;
         background: var(--blue-10) !important;
         color: var(--text-color) !important;
         &.wn {
           background: var(--blue-20) !important;
           font-variation-settings: var(--weight-500);
         }
         &.othermonth {
           background: var(--white) !important;
         }
         &.today {
           background: var(--green-30) !important;
           font-variation-settings: var(--weight-500);
           &::after {
             display: none !important;
           }
         }
         &.weekend {
           color: var(--grey-l2) !important
         }
         &.selected {
           background: var(--red) !important;
           color: var(--white) !important;
           font-variation-settings: var(--weight-500);
         }
       }

       & .calendar-container table tbody td.day.wn {
         text-align: center;
         background-color: var(--calendar-week-bg, #f4f4f4)
       }

       & .calendar-container table tbody td.day:hover {
         color: var(--btn-primary-color);
         cursor: pointer;
         background: var(--btn-primary-bg)
       }

       & .calendar-container table tbody td.day:hover:after {
         background-color: #fff
       }

       & .calendar-container .day-name {
         font-variation-settings: var(--weight-500) !important;
         background: var(--blue-30) !important;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         padding: 10px 0 !important;
       }

       & .calendar-container .time td select {
         color: var(--calendar-select-color, #212529);
         background-color: var(--calendar-select-bg-color, #f0f4fb);
         appearance: none;
         background-repeat: no-repeat;
         background-size: max(100%, 58rem);
         border: 1px solid #cdcdcd;
         border-radius: .25rem;
         width: 100%;
         padding: 5px 9px 3px;
         font-size: 16px;
         font-weight: 400;
         line-height: 1.5;
         display: block
       }

       & .buttons-wrapper {
         padding: 0 !important;
         & .btn {
           position: relative;
           border: none !important;
           box-shadow: none !important;
           color: var(--white) !important;
           background-color: var(--blue) !important;
           padding: 0 16px 0 24px !important;
           text-align: right !important;
           min-width: initial;
           margin-inline: inherit;
           &.btn-clear {
             background-color: var(--red) !important;
             margin-right: 2px !important;
             &::before {
               content: '\f00d';
             }
             &:hover {
               background-color: var(--red-d2) !important;
             }
           }
           &.btn-today {
             &::before {
               content: '\f88d';
             }
           }
           &.btn-exit {
             margin-left: 2px !important;
             &::before {
               content: '\f00c';
             }
           }
           &::before {
             position: absolute;
             left: 16px;
             font-family: var(--font-fa);
             color: var(--white);
             font-size: 1em;
           }
           &:hover {
             background-color: var(--blue-d2) !important;
           }
         }
       }

     }
   }




/* ===============
    MEDIA QUERIES
   =============== */

/* === FT Size "M" === */
@media (max-width:767px) {

}

/* === FT Size "T1" === */
@media (min-width:768px) and (max-width:991px) {

}

/* === FT Size "T2" === */
@media (min-width:992px) and (max-width:1199px) {
    :root {
        --button-min-width: 150px !important;
    }
}

/* === FT Size "D" === */
@media (min-width:1200px) {
    :root {
        --button-min-width: 150px !important;
    }
    /* Common */
    .fullscreen main {margin-top: var(--gutter-double) !important}
    /* com_rsform */
    .formContainer {}
    .formControlLabel, .control-label {max-width: initial !important; width: 50% !important}
    .formControls {max-width: initial !important; width: 50% !important}
    .rsform-block-send {margin-bottom: 0 !important; padding-top: var(--gutter); border-top: var(--border-default)}
    .rsform-block-send.rsform-type-submitbutton > .formControlLabel {display: none !important}
    .rsform-block-send.rsform-type-submitbutton > .formControls {width: 100% !important}
    .rsform-block-send .formBody {text-align: center}
    .rsform-block-send button {margin: 0 var(--gutter-half) !important}
    /* Karton */
    #title :where(h1, .supertitle, .article-links) {padding-inline: calc(var(--gutter) + 86px)}
    .pregled-zapis .pregled-toolbar button {width: 200px; margin-inline: 0 !important}
    .pregled-zapis h2 {padding-right: calc(200px + var(--gutter)) !important}
    /* DataTables */
    #category-filter {z-index: 101}
    #category-filter > .moduletable {margin-bottom: 0}
    #filter-kartoni {margin-top: var(--gutter)}
    .dataTable-wrapper {position: relative}
    .dataTable-top {position: sticky; background: var(--white-97); padding: var(--gutter) 0; z-index: 100}
	body.frontend-fs .dataTable-top {top: 0}
	body:not(.frontend-fs) .dataTable-top {top: var(--header-min-height)}
    .kp-pregled-datum span {font-size: 18px}
}

/* === Mobile (touch) devices === */
@media (hover: none) and (pointer: coarse) {
    /*  
    ========================
        VARIABLES
    ======================== 
    */
    :root {
        --header-height: 90px !important;
        --header-min-height: 45px;
        --favorites-height: 30px;
        --footer-height: 30px !important;
        --gutter: 20px !important;
        --h1-padding: 0;
        --h2-padding: 0;
        --h3-padding: 0;
        --h4-padding: 0;
        --h1-margin: 0 0 30px;
        --h2-margin: 30px 0 15px;
        --h3-margin: 30px 0 15px;
        --h4-margin: 30px 0 15px;
        --h4-title-margin-top: -10px;
        --p-margin:0 0 15px;
        --main-max-width: 1280px;
        --table-max-width: 1280px;
        --table-padding-default: 15px;
        --modules-width: 380px;
        --ul-padding: 40px;
        --ul-margin: 15px 0;
        --li-margin: 0 0 9px;
        --button-height: 36px !important;
        --input-height: 36px !important;
        --button-min-width: 120px;
        --filter-min-width: 300px;
    }
    /*  
    ========================
        CLASSES
    ======================== 
    */
    .hidden-m {display: none !important}
    .flex-m-100 {flex:0 0 100% !important}
    .flex-m-80  {flex:0 0 80%}
    .flex-m-75  {flex:0 0 75%}
    .flex-m-67  {flex:0 0 calc(2/3 * 100%)}
    .flex-m-60  {flex:0 0 60%}
    .flex-m-55  {flex:0 0 55%}
    .flex-m-50  {flex:0 0 50%}
    .flex-m-45  {flex:0 0 45%}
    .flex-m-40  {flex:0 0 40%}
    .flex-m-33  {flex:0 0 calc(1/3 * 100%)}
    .flex-m-25  {flex:0 0 25%}
    .flex-m-20  {flex:0 0 20%}
    .flex-m-reverse {flex-direction: column-reverse}
    .order-m-1 {order:1}
    .order-m-2 {order:2}
    .order-m-3 {order:3}
    .order-m-4 {order:4}
    .order-m-5 {order:5}
    .padding-top-m {padding-top: var(--gutter)!important}
    .padding-bottom-m {padding-bottom: var(--gutter)!important}
    .padding-left-m {padding-left: var(--gutter)!important}
    .padding-right-m {padding-right: var(--gutter)!important}
    .margin-top-m {margin-top: var(--gutter)!important}
    .margin-bottom-m {margin-bottom: var(--gutter)!important}
    .margin-left-m {margin-left: var(--gutter)!important}
    .margin-right-m {margin-right: var(--gutter)!important}
    /* Frontend Fullscreen */
    .frontend-fs {
        --gutter: 20px;
    }
    /*  
    ========================
        TYPOGRAPHY
    ======================== 
    */
    .heading-subtitle {font-size: 0.5em}
    /*  
    ========================
        HTML ELEMENTS
    ========================
    */
    html {
        background: var(--white);
        font-size: 14px;
    }
    header, nav, section, main, footer {
        max-width: 100vw;
    }
    header {
        padding-inline: var(--gutter);
    }
    table {
        max-width: var(--table-max-width);
    }
    /*  
    ========================
        FORMS & ELEMENTS
    ========================
    */
    /* General */
        input[type="checkbox"]:not(.switch) {top: 0 !important}
        label:has(input[type*="checkbox"]:not(.switch)) {text-align: left}
    /* RSForm */
        .formContainer {border: none; padding: 0; width: 100%}
        .rsform-block {display: flex; flex-wrap: wrap; align-items: center}
        .formControlLabel, .control-label {flex:0 0 100%; text-align: left; padding-bottom: var(--gutter-half)}
        .formControls, .controls {flex:0 0 100%}
        .yui-calcontainer {margin-top:5px}
        .rsform-block-send {justify-content: center}
        .rsform-block-send .formBody input {margin:0; width:48%; min-width: 0}
        .rsform-block-send div {text-align: center}
        .rsform-submit-button {min-width: 150px}
        .rsform-reset-button {float:right}
        .rsform-type-freetext p:last-of-type {flex:0 0 calc(100% - 44px)}
        div[class*="-opcije"] > label {display: none}
        .rsform-type-checkboxgroup {padding-left: 44px}
    /*  
    ========================
        VIEWS
    ========================
    */
    /* View: Kartoni (cat) */
        #filter-kartoni {margin-top: var(--gutter)}
    /* View: Karton */
        .pregled-toolbar {inset: 35px 0 0 auto}
    /*  
    ========================
        TEMPLATE SECTIONS
    ========================
    */
    /* Header */
        header {
            padding: 0 var(--gutter);
            & a {
                outline: none !important;
                & img {
                    height: calc(100% - calc(2/3 * var(--gutter))) !important;
                    width: auto !important;
                }
            }
            & #header-mid {
                justify-content: left; 
                padding: 0 !important;
            }
            & #header-right {
                justify-content: right; 
                padding: 0 !important;
            }
        }
        #header-right > a {min-height: 60px !important; max-height: 80px !important}

        #toggle-nav {margin-left: 25px !important; outline: none!important}
        header :where(#header-left a:hover, #header-right a:hover, .toggle.active) {color: var(--header-min-a) !important; outline: none !important; background: none !important; text-shadow: none !important}
    /* Favorites */
        #favorites {display: none}
    /* FS modules */
        #modules-fs h4 {color:var(--h4-color)}
        #modules-fs .module-fs {top: calc(var(--header-height) + var(--favorites-height)); width: 100%; height: 100vh; overflow-y: scroll; padding-bottom: var(--header-min-height)}
        #modules-fs #finder {display: block}
        #modules-fs h4 {margin-bottom: 0}
        #modules-fs .mod-finder input {width: 100%; margin: var(--gutter) 0 0}
        #modules-fs .mod-finder .awesomplete {width: 100%}
        #modules-fs nav {margin-top: var(--gutter); padding: var(--gutter-double) var(--gutter) var(--gutter) var(--gutter); border-top: var(--border-default-30);position: relative;}
    /* Language Switcher */
        .invisible #language-switcher {height: 0}
        .visible #language-switcher {height: 70px}
        #language-list {margin: 0; padding: 0; list-style: none; display: flex}
        #language-list li {display: flex; flex: 0 0 50%; height: 70px}
        .lang {padding: calc(2.75 * var(--gutter)) var(--gutter) var(--gutter); pointer-events: all}
    /* Phone Directory */
        #phone-directory {width: 100%}
        #phone-directory h4.centered {text-align: left!important}
        #phone-directory .cell.directory-call {width: 100px; padding: var(--gutter-half)}
        #phone-directory .cell.directory-call span {font-size: 0.4em; font-variation-settings: var(--weight-medium); line-height: 120%; display: block; margin-top: 5px}
        #phone-directory .cell.directory-address p {font-size: 0.9em}
        #phone-directory .cell {width: calc(100% - 100px)}
    /* Main */
    main {
        margin-top: var(--header-height); 
        padding-inline: var(--gutter);
        box-shadow: none !important;
        &.with-quick-booking {
            margin: 0 auto;
            & #content {
                display: none;
            }
        }
    }
    /* Back to Top */
        #back-top {width: 48px !important; height: 48px !important}
        #back-top {bottom: 10px; right: calc(50% - 24px); width: 48px; height: 48px; border: 3px solid var(--body-bg)}
        #back-top.visible {opacity: 0.85!important}
    /*  
    ========================
        MODULES
    ========================
    */
    /* Common */
    .moduletable {padding: 0; border: none; background: transparent!important; margin-bottom: var(--gutter-double); box-shadow: none !important}
    .moduletable h3 {color: var(--inverted-text); background: var(--inverted-bg); padding: var(--gutter); margin: var(--h3-margin); border-bottom: none}
    .moduletable ul li {margin-bottom: 7px}
    #modules .moduletable:last-of-type {margin-bottom: var(--gutter)}
    #modules-am {padding:var(--gutter) var(--gutter) 0 var(--gutter)}
    .moduletable[class*="fa-icon"] h3:after {top:var(--gutter); right:var(--gutter)}
    /* Quick Booking / Mobile Fields */
    .quick-booking {margin-top:var(--header-height); justify-content: center; align-content: center; background: var(--qb-bg)}
    .quick-booking-row {position: relative; height: 50%; align-content: center; flex:0 0 calc(100% - 2 * var(--gutter)); background: var(--qb-bg-field); margin:var(--gutter) 0 0; outline: 1px solid var(--white-30); border-radius: 8px}
    #quick-booking-bottom {margin: 0}
    #booking-location {flex: 0 0 100%; margin-top: 0}
    .quick-booking-row:last-of-type {margin-bottom:var(--gutter)}
    .quick-booking-row .f3-special-link {background: transparent; border-radius: 8px; box-shadow: var(--box-shadow-446-10)}
    .quick-booking span {display: block; color: #fff}
    .quick-booking .line-1 {font-variation-settings: var(--weight-demi); font-size: 1.75em}
    .booking-icon {display:flex; align-self:center; color:#fff; line-height:100%; padding:var(--gutter)}
    .booking-text {line-height:100%; padding:var(--gutter-half) var(--gutter)}
    #channels {border-radius: 8px; box-shadow: var(--box-shadow-446-10)}
    .channel {display:flex; flex:0 0 calc(100% / 4); justify-content:center; padding:var(--gutter) 0}
    .channel a {text-align: center; position: relative; top: 3px; width:100%; height: 100%}
    .chn {line-height: 100%; margin-bottom: var(--gutter-half)}
    /* Navigation */
    #navigation {width: 100vw}
    #nav-maximize {position: absolute !important; top: calc(var(--gutter-double) - 3px); right: var(--gutter); font-size: 1.85em}
    #nav-controls {display: block; width: 100%; margin: var(--gutter) 0}
    #nav-controls label {display:none}
    #nav-controls input {width: 100%; margin:0}
    #nav-filter {width: 100%; height: initial; margin:0 !important}
    .nav-heading {width: calc(100% + var(--gutter)); margin-left: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 0; font-size: 1.1em; padding-bottom: 3px; font-family: var(--font-heading); letter-spacing: -0.1px; font-variation-settings: var(--weight-normal)}
    #mainnav li {margin: 6px 0}
    #mainnav a {line-height: 100%}
    #mainnav .top-level > .parent > a {font-size: 1.3em; padding: var(--gutter) var(--gutter-half) 6px 0; letter-spacing: 0.15px; color: var(--a-color); font-family: var(--font-heading); font-variation-settings: var(--weight-medium) !important}
    #mainnav .first-item > a {padding-top :0 !important}
    #mainnav ul.sub-level {padding-left:var(--gutter-double);}
    /* mod_f3_popup */
    #f3-popup-inner {width: calc(100vw - var(--gutter-double))}
    #f3-popup-close {top: calc(var(--gutter) + 8px)}
    #f3-popup-close::after {font-size: 1.5em}
    #f3-popup-content h3 {margin: 0 0 var(--gutter) var(--gutter-negative); padding: var(--gutter); width: calc(100% + var(--gutter-double))}
    /*  
    ========================
        COMPONENTS
    ========================
    */
    /* com_content */
        /* Common */
            #title {
                padding: var(--gutter); 
                background: var(--title-bg); 
                margin-bottom: var(--gutter-double);
            }
            h2 span.heading-subtitle {
                margin-top: 5px;
            }
    /*  
    ========================
        DATATABLES
    ========================
    */
}

/* === Desktop devices === */
@media screen and (any-pointer: fine) and (any-hover: hover) {

}

/* Firefox-specific tweaks */
@-moz-document url-prefix() {

}

/* Additional tweaks for "D" screens 1200 < width < 1366 */
@media (min-width:1200px) and (max-width:1365px) {
    :root {
        --header-height: 90px !important;
        --header-min-height: 45px;
        --favorites-height: 30px;
        --footer-height: 30px !important;
        --gutter: 20px !important;
        --h1-padding: 0;
        --h2-padding: 0;
        --h3-padding: 0;
        --h4-padding: 0;
        --h1-margin: 0 0 30px;
        --h2-margin: 30px 0 15px;
        --h3-margin: 30px 0 15px;
        --h4-margin: 30px 0 15px;
        --h4-title-margin-top: -10px;
        --p-margin:0 0 15px;
        --main-max-width: 1280px;
        --table-max-width: 1280px;
        --table-padding-default: 15px;
        --modules-width: 380px;
        --ul-padding: 40px;
        --ul-margin: 15px 0;
        --li-margin: 0 0 9px;
        --button-height: 36px !important;
        --input-height: 36px !important;
        --button-min-width: 120px;
        --filter-min-width: 300px;
    }
    /* Classes */
    .frontend-fs {
        --gutter: 20px;
    }
    /* HTML elements */
    html {font-size: 14px !important}
    header, nav, section, main, footer {max-width: 100vw}
    header {padding-inline: var(--gutter)}
    /* Template */
    #header-right > a {min-height: 60px !important; max-height: 80px !important}
    #favorites > ul > li:not(.languages) > a {font-size: 0.95em}
    /* Forms */
    input[type="checkbox"]:not(.switch) {top: 0 !important}
    /* View: Kartoni (cat) */
    #filter-kartoni {margin-top: var(--gutter)}
    /* View: Karton */
    .pregled-toolbar {inset: 35px 0 0 auto}
    /* Back to Top */
    #back-top {width: 48px !important; height: 48px !important}
}

/* Additional tweaks for 1280x720 and 1366x768 */
@media (min-width:1280px) and (max-width:1366px) and (max-height:768px) {
    :root {
        --main-min-width: calc(100vw - 140px) !important;
        --main-max-width: calc(100vw - 140px) !important;
        --input-height: 28px !important;
    }
    /* HTML elements */
    html {font-size: 13px !important}
    #favorites > ul > li:not(.languages) > a {font-size: 0.95em}
    #user-info {
      writing-mode: sideways-lr;
      top: 0;
      width: 56px;
      & img {
        width: 56px;
        max-width: 56px;
      }
    }
    #toggle-fs {top: 0}
    /* Template Elements */
    html::before {
      position: absolute;
      content: "";
      inset: 0;
      background: url('../../../images/_system/logo.svg') var(--white) center center no-repeat;
      background-size: 90vh;
      background-attachment: fixed;
      opacity: 0.03;
    }
    body {
      background: var(--white) !important;
    }
    main {
      background: transparent !important;
      padding: 0 !important;
      box-shadow: none !important;
      margin-bottom: var(--gutter-double) !important;
      min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--favorites-height) - calc(4 * var(--gutter)));
      &::before {
        display: none
      }
    }
    footer {position: static !important}
    .frontend-fs {
        & :is(#quick-actions, #user-info) {
            top: var(--gutter);
        }
        & header {

        }
        & main {
            min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--favorites-height) - calc(4 * var(--gutter)));
            & :is(#category-articles, .dt-paging) {
                margin-bottom: 0;
            }
        }
        & footer {

        }
    }
    /* View: Kartoteka */

    /* Datatables */

        #datatable colgroup {
          & col[data-dt-column="0"] { /* Ordinacija */
            max-width: 130px;
          }
          & col[data-dt-column="3"] { /* Datum rođenja */
            max-width: 130px;
          }
          & col[data-dt-column="6"] { /* Broj telefona */
            max-width: 150px;
          }
        }
        #datatable tbody td {
            padding: calc(1/4 * var(--table-padding-default)) var(--table-padding-default) !important;
        }
        /* Filters and Page Size */
        #datatable_wrapper > .dt-layout-row:has(.dt-length) {
            padding-inline: 0 !important;
            & .dt-layout-cell {
                &.dt-layout-start {
                  flex: 0 0 calc(100% - 60px - var(--gutter)) !important;
                  & .dtsp-panesContainer {
                      flex: 0 0 200px !important;
                  }
                  & .dtsb-searchBuilder {
                      flex: 0 0 calc(100% - 200px) !important;
                  }
                }
                &.dt-layout-end {
                    display: flex;
                    align-items: flex-start;
                    flex: 0 0 calc(60px + var(--gutter)) !important;
                    & .dt-length {
                        & label {
                            font-size: 0;
                        }
                        & select {
                            font-size: 14px;
                            width: 60px !important;
                            margin: 0 !important;
                            padding: 0 10px !important;
                        }
                    }
                }
            }
        }
        .dt-layout-end {
            flex: 0 0 330px;
            & .dt-length {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 0 0 0 var(--gutter);
                & select {
                  width: 60px !important;
                }
            }
        }
        .kp-pregled-datum span {
            font-size: 13px;
            &.kp-pfv {
                width: 50px;
            }
        }

    /* View: Karton */
    .pregled-toolbar {inset: 38px 0 0 auto}
    #back-home {font-size: 36px; line-height: 36px}
    /* Back to Top */
    #back-top {width: 48px !important; height: 48px !important}
}

/* Additional tweaks for "D" screens 1366x768 and 1440x900 (and possibly some resolutions between) */
@media (min-width:1366px) and (max-width:1440px) {
    /* Template elements */
    header {padding-inline: 0}
    /* View: Karton */
    #back-home {font-size: 36px; line-height: 36px}
}

/* Additional tweaks for all "D" screens >= 1366px */
@media (min-width:1366px) {
    /* Classes */
    .frontend-fs {
        --gutter: 20px;
    }
    /* HTML elements */
    #favorites > ul > li:not(.languages) > a {font-size: 0.95em}
    #user-info {
        width: 64px;
        writing-mode: sideways-lr;
        top: calc(var(--header-height) + var(--favorites-height) + var(--gutter-double));
        & img {
          width: 64px;
          max-width: 64px;
        }
    }
    /* View: Karton */
    .pregled-toolbar {inset: 38px 0 0 auto}
    /* Back to Top */
    #back-top {width: 48px !important; height: 48px !important}
}

/* Additional tweaks for all "D" screens > 1440 */
@media (min-width:1441px) {
    /* HTML elements */
    #favorites > ul > li:not(.languages) > a {font-size: 1em}
    /* Template elements */
    #header-mid {padding-left: 1px !important}
    #header-right {padding-right: 1px !important}
    /* Karton (cat view) */
    #filter-pregled-danas {transform: translateY(43px) translateX(275px)}
    /* Karton (content view) */
    #back-home {font-size: 48px; line-height: 48px}
    /* Datatables */
    #datatable colgroup {
      & col[data-dt-column="0"] { /* Ordinacija */
        max-width: 130px;
      }
      & col[data-dt-column="1"] { /* Datum i vreme pregleda */
        max-width: 200px;
      }
      & col[data-dt-column="3"] { /* Dijagnoze */
        max-width: 260px;
      }
      & col[data-dt-column="4"] { /* Datum rođenja */
        max-width: 170px;
      }
      & col[data-dt-column="6"] { /* E-mail adresa */
        max-width: 190px;
      }
      & col[data-dt-column="7"] { /* Broj telefona */
        max-width: 150px;
      }
    }
}

/* Print view */
@media screen {
    .printable {
        display: none !important;
        pointer-events: none !important;
    }
}

@media only print {
    /* Defaults */
    :root {
        --paper-size: A4;
        --font-size: 11pt;
        --line-height: 1.1;
    }
    @page {
        size: var(--paper-size);
        padding: 0 !important;
        margin: 3.25cm 1.32cm 7cm 2.12cm;
        background: none !important;
        &:header {
            display: none;
        }
        &:footer {
            display: none;
        }
    }
    /* Template print settings */
    article {
        display: block;
        width: 16.82cm;
        background: none !important;
    }
    /* Hide unnecessary elements */
    .pregled-toolbar, #modal-print, #back-top {
        display: none !important;
    }
    /* Pregled defs */
    .ft-pregled-print {
        & > section {
            display: block;
            width: 16.82cm !important;
            max-width: 16.82cm;
            break-inside: avoid-page;
            page-break-inside: avoid;

            &:not(:first-child) {
                break-before: auto;
            }

            &.pacijent-info {
                width: 16.82cm !important;
                max-width: 16.82cm;

                & .pacijent-info-table {
                    width: 16.82cm !important;
                    max-width: 16.82cm;
                }
            }

            &.pregled-kat {
                & h3 {
                    font-size: 16pt !important;
                    width: 100% !important;
                    padding: 0 !important;
                    line-height: 150% !important;
                    margin: 1cm 0 !important;
                    text-align: center !important;
                }
            }
        }
    }
    /* Typography */
    * {
        color: #000 !important;
        /* all: revert; */
    }
    html {
        font-size: var(--font-size) !important;
        background: none !important;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        height: auto;
    }
    body {
        display: block;
        position: static;
        top: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        height: auto;
    }
    h1 {
        font-size: 18pt !important;
    }
    h2 {
        font-size: 16pt !important;
    }
    h3 {
        font-size: 14pt !important;
    }
    p {
        font-size: var(--font-size) !important;
        page-break-inside: avoid;
        break-inside: avoid;
        line-height: var(--line-height) !important;
        & * {
            line-height: inherit !important;
        }
    }
    ul {
        padding-top: 0 !important;
        padding-left: 1.85cm !important;
        margin: 5pt 0 !important;
        list-style: disc !important;
    }
    li {
        list-style: disc !important;
        line-height: var(--line-height) !important;
        &::marker {
            color: #000 !important;
            font-size: inherit !important;
            font-variation-settings: initial !important;
        }
    }
    td {
        line-height: var(--line-height) !important;
        & * {
            line-height: inherit !important;
        }
    }
    /* Optional: Ensure strong/emphasis elements don't cause breaks mid-line */
    strong,
    em {
        break-inside: avoid;
    }
    section {
        margin-bottom: 8pt !important;
    }

}