/*
  xs: 0,
  sm: 576px,    -> 540
  md: 768px,    -> 720
  lg: 992px,    -> 960
  xl: 1200px,   -> 1140
  xxl: 1400px   -> 1320
*/

/* rem reference
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
36px = 2.25rem
40px = 2.5rem
44px = 2.75rem
50px = 3.125rem
*/

/*
    https://www.color-hex.com/color/xxxxxx

    convert hex to filter
    https://codepen.io/sosuke/pen/Pjoqqp

    menu: #4FA0A3
    opacity 30%

    svg cards: #4FA0A3  invert(59%) sepia(15%) saturate(1031%) hue-rotate(133deg) brightness(91%) contrast(100%);
    svg hover: #D9D9D9  invert(96%) sepia(0%) saturate(1149%) hue-rotate(147deg) brightness(88%) contrast(100%);

    banner cards: #ffffff invert(100%) sepia(100%) saturate(2%) hue-rotate(225deg) brightness(105%) contrast(101%)

    pipe #CAE2E3: invert(97%) sepia(7%) saturate(551%) hue-rotate(135deg) brightness(94%) contrast(90%)
*/

@import url("/styles/variables.css");

html {
    position: fixed;
    height: 100.1%;
    overflow: hidden;
    /*scroll-behavior: auto !important;*/
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    font-size: 16px; /* aka 1rem */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-text);
    font-optical-sizing: auto;
}

header, main, footer {
    outline: none;
    width: 100%;
}

header {
    z-index: 2;
}

main {
    display: flex;
    flex-direction: column;
    z-index: 0;
    flex: 1;
}

footer {
    z-index: 1;
}

html.no-scroll,
html.no-scroll body {
    overflow-y: hidden;
}

h1,
h2,
h3,
h3 a,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: var(--font-serif);
}

h1 {
    font-size: var(--h1-size);
    /*line-height: 40px;*/
}

h2 {
    font-size: var(--h2-size);
}

h3,
h3 a {
    font-size: var(--h3-size);
}

h4 {
    font-size: var(--h4-size);
}

h5 {
    font-size: var(--h5-size);
}

h6 {
    font-size: var(--h6-size);
    font-family: var(--font-sans-serif);
}

@media (max-width: 600px) {
    h1 {
        font-size: calc(var(--h1-size) * 0.9);
    }

    h2 {
        font-size: calc(var(--h2-size) * 0.9);
    }
}



.color-maroon {
    color: var(--color-maroon);
}

h6.color-maroon {
    font-weight: 100;
}

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

.bg-light-gray {
    background-color: var(--color-light-gray);
}

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

a {
    color: var(--color-text);
}

.container {
    max-width: var(--container-max-width);
}

.loading-overlay {
    display: none;
    background: #c0c0c0 url('/images/loader-gray.gif') center center no-repeat;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.75;
    z-index: 99999999;
    transition: all .5s;
    overflow-y: scroll; /* see html height */
}

.block-ui {
    display: none;
    background: transparent;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    overflow-y: scroll; /* see html height */
}

/* see hack for flatpickr */
.hidden:not(.flatpickr-day) {
    display: none !important;
}

.picture {
    display: inline-block;
    width: 100%;
    height: auto;
}

.picture-img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.img-raw {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.has-error {
    color: red !important;
}

.fs-normal {
    font-size: 1rem;
}

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

.fs-larger {
    font-size: 1.5rem;
}

/* JALERT */
#alertsOverlay {
    background: #c0c0c0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.75;
    z-index: 999999998;
}

#alertsContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999;
}

#alertsContent {
    position: fixed;
    min-width: 320px;
    max-height: 100vh;
    background-color: #fff;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: auto;
    /*border: solid 15px lightgrey;*/
    padding: 30px;
    /*    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    /*box-shadow: 0 0.125rem 0.25rem rgb(147 158 170 / 40%);*/
    box-shadow: 0 0.125rem 1.25rem 0 rgb(38 60 85 / 60%);
    /*border-radius: 0.5em;*/
}

#alertsButtons {
    padding: 20px;
    text-align: center;
}

    #alertsButtons button {
        margin: 0 5px 5px 5px;
    }

#alertsMessage {
    text-align: center;
    font-size: 1.15em;
    padding: 20px 0;
}

#alertsIcon {
    text-align: center;
}

    #alertsIcon:before {
        font-family: bootstrap-icons !important;
        font-size: 2rem;
        line-height: 2rem;
    }

    #alertsIcon._info:before {
        font-weight: 900;
        content: "\F335"; /**/
        color: var(--color-gold);
    }

    #alertsIcon._alert:before {
        font-weight: 900;
        content: "\F33A"; /**/
        color: var(--color-maroon);
    }

    #alertsIcon._confirm:before {
        font-weight: 900;
        content: "\F504"; /**/
        color: var(--color-maroon);
    }

    #alertsIcon._modal:before {
        font-weight: 900;
        content: "\F26D"; /**/
        color: var(--color-gold);
    }
/* JALERT */

/* TOAST */
._toast {
    display: none;
    position: fixed;
    bottom: 25px;
    left: 25px;
    right: 25px;
    padding: 10px 15px;
    font-size: 16px;
    //font-family: Arial, sans-serif;
    cursor: pointer;
    z-index: 999999997;
    -webkit-box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    /*border-radius: 5px;*/
}

._toast--success {
    color: white;
    background-color: green;
}

._toast--error {
    color: white;
    background-color: red;
}
/* TOAST */

/* COLLAPSIBLE */
.r-collapsible {
}

.r-collapsible-item {
    background: #fff;
    box-shadow: var(--box-shadow); /*0px 5px 25px 0px rgba(0, 0, 0, 0.1);*/
}

    .r-collapsible-item:not(:last-of-type) {
        margin-bottom: 1rem;
    }

.r-collapsible-title {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
}

    .r-collapsible-title.r-collapsible-title-opened i {
        transform: rotate(180deg);
    }

    .r-collapsible-title h5 {
        font-family: var(--font-sans-serif);
        font-size: 1.125rem;
    }

.r-collapsible .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1rem;
    width: 1rem;
    transform-origin: center;
}


.r-collapsible-title:hover {
}

.r-collapsible-content {
}
/* COLLAPSIBLE */

/* TABS */
/*
.r-tabs {
}

.r-tabs__titles {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin-bottom: 10px;
}

.r-tabs__title {
}

    .r-tabs__title:not(:last-of-type) {
        margin-right: 10px;
    }

    .r-tabs__title:hover {
    }

.r-tabs__title--active {
}
*/
.r-tabs .r-tabs-content {
    display: none;
}
/* TABS */
/* TABLE */
.r-table {
    overflow-x: auto;
}

    .r-table .table-wrapper {
        display: block;
        width: fit-content;
    }

    .r-table table th,
    .r-table table td {
        padding: 10px 15px;
    }

.r-table--style-styled .table-wrapper {
}

.r-table--style-styled table {
    border-collapse: collapse;
    overflow: hidden;
    margin: 0;
}

    .r-table--style-styled table th {
        background: var(--color-beige);
        border-bottom: 1px solid #e0e0e0;
    }

    .r-table--style-styled table td {
        border-bottom: 1px solid #e0e0e0;
    }

        .r-table--style-styled table th:not(last-child),
        .r-table--style-styled table td:not(last-child) {
        }

.r-table--alignment-left .table-wrapper {
    margin-left: 0;
    margin-right: auto;
}

.r-table--alignment-center .table-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.r-table--alignment-right .table-wrapper {
    margin-left: auto;
    margin-right: 0;
}

.r-table p,
.r-table p {
    margin-bottom: 0 !important;
}
/* TABLE */
/* GALLERY */
.r-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -20px; /*gap*/
}

.r-gallery-item {
    display: block;
    width: 100%;
    padding-left: 20px; /*gap*/
    padding-bottom: 20px;
    color: black;
    text-decoration: none;
}

@media only screen and (min-width: 577px) {
    .r-gallery-item {
        width: 50%;
    }
}

@media only screen and (min-width: 993px) {
    .r-gallery-item {
        width: 33.33%;
    }
}

@media only screen and (min-width: 1201px) {
    .r-gallery-item {
        width: 25%;
    }
}

.r-gallery-item img {
    display: inline-block;
    object-fit: cover;
    width: 100%;
    height: auto;
    box-shadow: var(--box-shadow);
    /*border-radius: 3px;*/
}

.r-gallery-item small {
    display: block;
}
/* GALLERY */

/* form */
.r-form {
}

    .r-form .form-wrapper {
        display: block;
        width: fit-content;
    }

.r-form-alignment-left .form-wrapper {
    margin-left: 0;
    margin-right: auto;
}

.r-form-alignment-center .form-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.r-form-alignment-right .form-wrapper {
    margin-left: auto;
    margin-right: 0;
}

.r-form .file-upload {
    position: relative;
    display: inline-block;
}

    .r-form .file-upload .file-upload-button {
        position: relative;
        padding: 8px 10px;
        background-color: var(--color-gold);
        color: #fff;
        border: solid 1px var(--color-gold);
        font-size: 15px;
        font-family: var(--font-sans-serif);
        cursor: pointer;
        max-width: 300px;
        text-align: left;
        letter-spacing: 1.2px;
        text-decoration: none;
        z-index: 1;
    }

    .r-form .file-upload input:hover + .file-upload-button {
        background-color: #fff;
        color: #000;
    }

    .r-form .file-upload input {
        position: absolute;
        z-index: 2;
        top: 0px;
        left: 0px;
        opacity: 0;
        border-bottom: none;
    }

.r-form .file-upload-filename a.remove {
    text-decoration: none;
}

.r-form input.form-control:not([type="checkbox"]),
.r-form textarea,
.r-form select {
    border: 1px solid #f1f1f1 !important;
    background-color: #f4f4f4 !important;
    padding: 0.75rem 0.95rem !important;
}

    .r-form input.form-control:not([type="checkbox"])::placeholder,
    .r-form textarea::placeholder {
        font-style: italic;
        color: gray;
    }

    .r-form select option:first-child {
        font-style: italic;
        color: gray;
    }

    .r-form select.italic {
        font-style: italic;
        color: gray;
    }

    .r-form select option {
        font-style: normal;
        color: initial;
    }

/*.form-check .form-check-input {
    padding: 0;
    margin-left: 0;
    margin-right: 0.5rem;
}*/
/* flatpickr datetime */
.flatpickr-input {
    cursor: pointer;
}

    .flatpickr-input + input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512'%3E%3Cpath d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
/* flatpickr datetime */

/* news years */
.dropdown-news-years {
    display: flex;
    cursor: pointer;
}

    .dropdown-news-years::after {
        display: inline-block;
        font-family: bootstrap-icons;
        content: "\F282";
        /*font-size: .75em;*/
        margin-left: 8px;
        margin-right: -8px; /* compensate for no-break */
        transform-origin: center;
        /*transform: translateY(-2px);*/
        opacity: .5;
        transition: transform 300ms ease-out;
    }

    .dropdown-news-years.show::after {
        transform-origin: center;
        transform: rotate(180deg) /*translateY(1px)*/;
    }

.dropdown-menu-news-years {
    min-width: auto;
    border-radius: 0;
}
/* news years */

/* paginaion */
.pagination li a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

    .pagination li a.active {
        border-radius: 50%;
        background: var(--color-gold);
        color: #fff;
    }
/* pagination */

/* skip to content */
.skip-to-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

    .skip-to-content a {
        position: fixed;
        background: #000;
        color: #fff;
        left: 0;
        top: 0;
        transform: translateY(-100%);
        transition: transform 0.3s;
        border: none;
        margin: 0;
        padding: .5rem 1rem;
        text-decoration: none;
    }

        .skip-to-content a:focus {
            transform: translateY(0%);
        }
/* skip to content */

/* scroll to top */
.scroll-to-top {
    display: inline-block;
    position: fixed;
    bottom: 0.5rem;
    right: 1.5rem;
    overflow: hidden;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 300ms;
}

    .scroll-to-top i {
        color: #c0c0c0;
        font-size: 2.5rem;
    }

    .scroll-to-top.show {
        opacity: .75;
        visibility: visible;
    }
/* scroll to top */

.responsive-bg-img {
    position: absolute;
    object-fit: cover;
    object-position: center center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: grayscale(95%) brightness(30%);
}

/* disable tel on desktop */
@media(min-width: 992px) {
    a[href ^= "tel"] {
        pointer-events: none;
        text-decoration: none;
    }
}


.flatpickr-current-month span.cur-month {
    font-weight: inherit;
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
    color: inherit;
}

/* footer */
footer {
    font-weight: 300;
    color: var(--color-footer);
    background: var(--bg-color-footer);
    transform: translateZ(0); /* remove traces */
    -webkit-backface-visibility: hidden;
}

    footer.gold-color-profile {
        background: var(--color-gold);
    }

footer.mrakova-domacija-profile {
    background: #e0dfd1;
    color: #000;
}

footer a {
    color: var(--color-footer);
    text-decoration: none;
}

footer.mrakova-domacija-profile a {
    color: #000;
}

    footer.mrakova-domacija-profile a.btn-footer-row.active {
        color: #000;
    }

footer .logo {
    width: 100%;
    max-width: 120px;
    height: auto;
}

    footer.mrakova-domacija-profile .logo {
        max-width: 160px;
    }

footer .sm-icons a {
    font-size: 1.5rem;
}

footer .form-control[type=email] {
    border-radius: 0;
}

/* footer */

/* buttons */
ul.r-links {
    margin-bottom: 0;
}

    ul.r-links.flex-column li:not(:first-child) {
        padding-top: 2rem;
    }

    ul.r-links.flex-row.justify-content-start li {
        padding: 0 2rem 2rem 0;
    }

    ul.r-links.flex-row.justify-content-end li {
        padding: 0 0 2rem 2rem;
    }

/* gold */
.btn-gold,
.btn-working-hours {
    position: relative;
    padding: 8px 31px 10px 11px;
    background-color: var(--color-gold);
    color: #fff;
    border: solid 1px var(--color-gold);
    font-size: 13px;
    font-family: var(--font-sans-serif);
    cursor: pointer;
    max-width: 300px;
    text-align: left;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all .2s ease-in-out;
    -webkit-backface-visibility: hidden;
}

    .btn-gold:after,
    .btn-working-hours:after {
        content: "\F285";
        font-family: "bootstrap-icons";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-gold:hover,
    .btn-gold.active,
    .btn-working-hours:hover {
        border: solid 1px var(--color-gold);
        background-color: #fff;
        color: var(--color-gold);
    }

/* this is custo for tabs - arrow down */
.r-tab.btn-gold:after {
    content: "\f282";
}

/* maroon */
.btn-maroon,
.btn-tickets {
    position: relative;
    padding: 8px 31px 10px 11px;
    background-color: var(--color-maroon);
    color: #fff;
    border: solid 1px var(--color-maroon);
    font-size: 13px;
    font-family: var(--font-sans-serif);
    cursor: pointer;
    max-width: 300px;
    text-align: left;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all .2s ease-in-out;
    -webkit-backface-visibility: hidden;
}

    .btn-maroon:after,
    .btn-maroon.active,
    .btn-tickets:after {
        content: "\F285";
        font-family: "bootstrap-icons";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-maroon:hover,
    .btn-tickets:hover {
        background-color: #fff;
        color: var(--color-maroon);
    }

/* link */
.btn-link {
    position: relative;
    padding: 8px 20px 4px 0px;
    margin: 0 11px 5px 11px;
    background-color: transparent;
    color: #000;
    border-bottom: solid 1px #000;
    font-size: 13px;
    font-family: var(--font-sans-serif);
    font-weight: 500;
    cursor: pointer;
    max-width: 300px;
    text-align: left;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all .2s ease-in-out;
    -webkit-backface-visibility: hidden;
}

    .btn-link:after {
        content: "\F285";
        font-family: "bootstrap-icons";
        position: absolute;
        right: 0px;
        top: 70%;
        transform: translateY(-70%);
    }

    .btn-link:hover {
        color: var(--color-maroon);
        border-bottom: solid 1px var(--color-maroon);
    }

.btn-footer-row {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    color: #fff;
    font-weight: initial;
}

    .btn-footer-row.active {
        background: var(--color-footer);
        color: var(--bg-color-footer);
        /*border-radius: 2rem;*/
    }

.btn-search {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    color: #fff;
    background: var(--color-gold);
    border: solid 1px var(--color-gold);
    border-radius: 50%;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 300ms linear;
}

    .btn-search:hover {
        color: var(--color-maroon);
        background: #fff;
        border: solid 1px var(--color-maroon);
        -webkit-text-stroke: .5px;
    }

.btn-attachment * {
    color: #000;
    text-decoration: none;
    font-family: var(--font-btn);
    font-weight: 600;
}

/* mobile */
@media (max-width: 1199px) {
    .btn-tickets {
        background: transparent;
        color: var(--color-maroon);
        border: none;
        padding: 0.5rem;
        -webkit-text-stroke: .5px;
    }

        .btn-tickets:after {
            content: none;
        }

    /*    .btn-tickets {
        border: none;
        padding: 0.5rem;
        -webkit-text-stroke: .5px;
    }*/

    .btn-working-hours {
        background: transparent;
        color: var(--color-gold);
        border: none;
        padding: 0.5rem;
        -webkit-text-stroke: .5px;
    }

        .btn-working-hours:after {
            content: none;
        }

    /*    .btn-working-hours {
        border: none;
        padding: 0.5rem;
        -webkit-text-stroke: .5px;
    }*/

    .btn-search {
        -webkit-text-stroke: .5px;
    }
}
/* buttons */

/* delimiter */
.r-delimiter {
    position: relative;
    width: 100%;
    line-height: 0;
    transform: translateZ(0); /* remove traces */
    -webkit-backface-visibility: hidden;
}

    .r-delimiter.space {
    }

    .r-delimiter.line-left:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
    }

    .r-delimiter.line-right:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 80%;
    }

    .r-delimiter.gold:before {
        border-top: 1px solid var(--color-gold);
    }

    .r-delimiter.maroon:before {
        border-top: 1px solid var(--color-maroon);
        transform: translate3d(0, 0, 0);
    }
/* delimiter */
/* checkbox */
/* The container */
.chk-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    /*font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .chk-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.chk-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: solid 2px var(--color-maroon);
    border-radius: 0.375rem;
}

/* On mouse-over, add a grey background color */
.chk-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked */
.chk-container input:checked ~ .checkmark {
    background-color: var(--color-gold);
}

/* Create the checkmark/indicator (hidden when not checked) */
.chk-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chk-container input:checked ~ .chk-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chk-container .chk-checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* checkbox */

/* radio TODO make separate for calendar and form */
.rad-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    padding-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default radio button */
    .rad-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* Create a custom radio button */
.rad-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    border: solid 1px #c0c0c0;
}

/* On mouse-over, add a grey background color */
.rad-container:hover input ~ .rad-checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.rad-container input:checked ~ .rad-checkmark {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.rad-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.rad-container input:checked ~ .rad-checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.rad-container .rad-checkmark:after {
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: maroon;
}
/* radio */

/* menu animation, coud be applied only for desktop */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 15%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animated {
    animation-duration: 500ms;
    animation-fill-mode: both;
}

.animatedIn {
    opacity: 0;
    animation-name: fadeInUp;
}
/* animation */

/* navi */
.navi {
    background-color: var(--nav-color-background);
    /*color: var(--nav-color-text);*/
    position: fixed;
    pointer-events: none; /* enable scroll */
    top: 0;
    width: 100%;
    z-index: 2000000000; /* ultimative value 2147483647 */
    min-height: var(--nav-min-height); /* fixed navi height see '.navi .menu' */
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.175);
}

    .navi .container-lg {
        display: flex;
        pointer-events: all; /* enable pointer event back */
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
    }

    .navi .logo {
        flex: 1;
        display: flex;
        padding: 1rem;
    }

        .navi .logo img {
            width: auto;
            min-height: var(--nav-min-height); /* according to design */
            max-width: 120px;
        }

        .navi.mrakova-domacija-profile .logo img {
            width: auto;
            min-height: var(--nav-min-height); /* according to design */
            max-width: 160px;
        }

    .navi .menu-toggler {
        display: none;
        background-color: var(--nav-toggle-color-background);
        cursor: pointer;
    }

        .navi .menu-toggler a i {
            font-size: 30px;
            padding: 10px;
        }

        .navi .menu-toggler a {
            color: var(--nav-toggle-color);
        }

    .navi .menu,
    .navi .langs {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        position: relative;
        align-items: stretch;
    }

    .navi .menu {
        flex: 1 auto;
    }

        .navi .menu * {
            font-family: var(--nav-menu-font);
        }

        .navi .menu > li,
        .navi .langs > li {
            position: relative;
            background: var(--nav-menu-color-background);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 5px; /* to see whole focused-outline - for accessibility*/
            /*width: 100%;*/
            /*height: 98px;*/ /* because of fixed megamenu position */
            white-space: nowrap;
        }

    .navi .langs > li {
        padding: 0;
    }

    .navi .langs .submenu li a {
        font-family: var(--font-sans-serif);
    }

    .navi .menu a, .navi .langs a {
        display: block;
        padding: var(--nav-menu-item-padding);
        color: var(--nav-menu-color-text);
        font-size: var(--nav-menu-font-size);
        text-decoration: none;
    }

    .navi .menu li:hover,
    .navi .menu li:focus-within,
    .navi .menu > li.active,
    .navi .langs li:hover,
    .navi .langs li:focus-within,
    .navi .langs > li.active { /* could be separate color */
        background: var(--nav-menu-active-color-background);
        cursor: pointer;
    }

        .navi .menu li:hover > a,
        .navi .menu li:focus-within > a,
        .navi .menu > li.active > a,
        .navi .langs li:hover > a,
        .navi .langs li:focus-within > a,
        .navi .langs > li.active > a { /* could be separate color */
            color: var(--nav-menu-active-color-text);
            cursor: pointer;
        }

        .navi .menu li:hover > .submenu,
        .navi .menu li:focus-within > .submenu,
        .navi .menu li.submenu-open > .submenu,
        .navi .langs li:hover > .submenu,
        .navi .langs li:focus-within > .submenu,
        .navi .langs li.submenu-open > .submenu {
            display: block;
            cursor: pointer;
        }

    .navi .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--nav-submenu-color-background);
        list-style: none;
        padding: 0;
        margin: 0;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
        /*border-radius: 5px;*/
    }

        .navi .submenu.left {
            left: unset;
            right: 0;
        }

        .navi .submenu .submenu {
            top: 0;
            left: 100%;
        }

            .navi .submenu .submenu.left {
                right: unset;
                top: 0;
                left: -100%;
            }

        .navi .submenu li {
            position: relative;
            width: 200px;
            padding: 5px; /* to see whole focused-outline - for accessibility*/
            white-space: normal;
        }

    .navi .langs .submenu li {
        width: unset;
    }

    .navi .submenu li:hover,
    .navi .submenu li:focus-within,
    .navi .submenu > li.active { /* could be separate color */
        background: var(--nav-submenu-active-color-background);
        cursor: pointer;
    }

        .navi .submenu li:hover > a,
        .navi .submenu li:focus-within > a,
        .navi .submenu > li.active > a { /* could be separate color */
            color: var(--nav-submenu-active-color-text);
            cursor: pointer;
        }

    .navi .submenu li a {
        color: var(--nav-submenu-color-text);
        padding: var(--nav-submenu-item-padding);
        font-family: var(--nav-submenu-font);
        font-size: var(--nav-submenu-font-size);
    }

    /*   for arrow */
    .navi li a span {
        padding-right: 15px;
    }

    .navi li a i {
        margin-left: -15px;
        font-size: 13px;
    }

/* mobile */
@media (max-width: 991px) {
    .navi .container-lg {
        flex-wrap: wrap;
    }

    .navi .logo img {
    }

    .navi .menu-toggler {
        display: flex;
        align-items: center;
    }

        .navi .menu-toggler.active + .menu {
            display: flex;
            flex-basis: 100%;
            flex-grow: 1;
        }

    .navi .menu {
        flex-direction: column;
        display: none;
        order: 2; /* place menu next from logo */
        max-height: calc(100vh - 100px); /* adjust */
        overflow: auto;
    }

        .navi .menu > li {
            background: var(--nav-mobile-menu-color-background);
            border-bottom: var(--nav-mobile-menu-item-border-bottom);
            height: auto;
            white-space: normal;
        }

        .navi .menu a {
            color: var(--nav-mobile-menu-color-text);
        }

        /*.navi .menu li:hover,*/
        .navi .menu li:focus-within,
        .navi .menu > li.active { /* could be separate color */
            background: var(--nav-mobile-menu-active-color-background);
            cursor: pointer;
        }

            /*.navi .menu li:hover > a,*/
            .navi .menu li:focus-within > a,
            .navi .menu > li.active > a { /* could be separate color */
                color: var(--nav-mobile-menu-active-color-text);
                cursor: pointer;
            }

        .navi .menu li:hover > .submenu {
            display: none;
        }

        /*.navi .menu li:hover > .submenu,*/
        .navi .menu li:focus-within > .submenu,
        .navi .submenu li:focus-within > .submenu {
            display: block;
            cursor: pointer;
        }

    .navi .submenu {
        position: static;
        background-color: var(--nav-mobile-submenu-color-background);
    }

    .navi .langs .submenu {
        position: absolute;
    }

    .navi .submenu .submenu {
        position: static;
    }

    .navi .submenu li {
        width: auto; /* dropdown width */
        border-bottom: var(--nav-mobile-submenu-item-border-bottom);
    }

        /*.navi .submenu li:hover,*/
        .navi .submenu li:focus-within,
        .navi .submenu > li.active { /* could be separate color */
            background: var(--nav-mobile-submenu-active-color-background);
        }

            /*.navi .submenu li:hover > a,*/
            .navi .submenu li:focus-within > a,
            .navi .submenu > li.active > a { /* could be separate color */
                color: var(--nav-mobile-submenu-active-color-text);
            }

    .navi .submenu a {
        color: var(--nav-mobile-submenu-color-text);
    }
}
/* navi */
/* banner */
.no-banner {
    position: relative;
    z-index: 0;
    text-align: center;
}

/*    .no-banner .background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        z-index: -1;
        background-color: var(--color-beige);
    }*/

/*    .no-banner h1 {
        display: inline-block;
        padding: 10px 30px;
        border-radius: 30px;
        background: url('/images/old-paper.jpg') center no-repeat;
        max-width: 90%;
        text-align: center;
    }*/

.simple-banner {
    position: relative;
    background-color: var(--color-beige);
}

    .simple-banner .container-fluid {
        position: relative;
        z-index: 0;
        margin-top: 30px;
        padding: 60px 0 40px 0;
        min-height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*    .simple-banner h1 {
        position: absolute;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 10px 30px;
        border-radius: 30px;
        top: -30px;
        left: 0;
        background: url('/images/old-paper.jpg') center no-repeat;
        left: 50%;
        transform: translateX(-50%);
        min-width: 400px;
        max-width: 90%;
        text-align: center;
    }*/

    .simple-banner h1 {
        color: #fff;
        text-shadow: 1px 0px 2px black;
    }

    .simple-banner img {
        display: inline-block;
        position: absolute;
        object-fit: cover;
        object-position: center center;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
    }

    .simple-banner h2 {
        color: #fff;
        text-shadow: 1px 0px 5px #000;
    }

@media (max-width: 991px) {
    .simple-banner {
        zoom: 0.65;
    }

        .simple-banner .banner-calendar {
            zoom: 1.45;
        }

    /*        .simple-banner h1 {
            min-width: 300px;
        }*/

    .no-banner {
        zoom: 0.65;
    }
}
/* banner */

/* breadcrumbs */
.p-breadcrumbs {
}

    .p-breadcrumbs .breadcrumb-item a {
        text-decoration: none;
    }

    .p-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
        content: none;
    }

    .p-breadcrumbs .breadcrumb-item.active {
        color: var(--color-maroon);
    }

    .p-breadcrumbs .breadcrumb {
        font-size: 13px;
    }
/* breadcrumbs */
/* banner calendar */
.banner-calendar {
    background: var(--color-beige);
    padding: 15px;
    width: 310px;
}

    .banner-calendar .filter .rad-container {
        margin-bottom: 6px;
        font-size: 14px;
        padding-bottom: 0;
    }

        .banner-calendar .filter .rad-container:not(:first-child) {
            border-top: solid 1px #c0c0c0;
            padding-top: 6px;
        }

        .banner-calendar .filter .rad-container .rad-checkmark {
            top: unset;
        }

    .banner-calendar .filter .flatpickr-calendar {
        margin-bottom: 1rem;
    }
/* banner calendar */

/* video */
.r-video {
    position: relative;
    display: flex;
}

.r-video-yt {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 razmerje */
    height: 0;
    overflow: hidden;
}

    .r-video-yt iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


.r-video video {
    display: inline-block;
    width: 100%;
    height: auto;
}

.video-controls {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
}

    .video-controls button {
        background: transparent;
        border: none;
        cursor: pointer;
    }

        .video-controls button i {
            color: #fff;
            font-size: 2rem;
            text-shadow: 1px 0px 2px black;
        }
/* video */

/* event list item */
.catalogue-list-item {
}

    .catalogue-list-item .custom-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .catalogue-list-item .custom-image {
        margin-left: 1rem; /* Zamaknjeno v levo z 1rem */
        display: block;
    }

    .catalogue-list-item .custom-body {
        position: relative;
        margin-top: -2rem; /* Prekrivanje slike */
        margin-right: 1rem; /* Zamaknjeno v desno z 1rem */
        background: var(--color-beige);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Vidna senca */
        z-index: 1;
    }

    .catalogue-list-item .custom-button {
        margin-top: auto; /* Postavitev gumba na dno */
    }

    .catalogue-list-item .custom-body h3 {
        font-size: 18px;
    }

    .catalogue-list-item .custom-body .d-table * {
        /*font-family: var(--font-serif);*/
    }

    .catalogue-list-item .custom-body .d-table a {
        /*text-decoration-color: var(--color-maroon);*/
    }
/*.catalogue-list-item .content {
        position: relative;
        display: flex;
        flex-direction: column;
        margin-bottom: 1.5rem;
        z-index: 0;
        text-decoration: none;
    }

        .catalogue-list-item .content .figure {
            position: relative;
            z-index: -1;
            padding-left: 1rem;
            margin: 0;*/ /* annulate bootstrap margin */
/*height: 225px;
        }

            .catalogue-list-item .content .figure img {
                box-shadow: var(--box-shadow);
            }

        .catalogue-list-item .content section {
            position: relative;
            margin-top: -1rem;
            margin-right: 1rem;
            background: var(--color-beige);
            box-shadow: var(--box-shadow);
        }

            .catalogue-list-item .content section h3 {
                font-size: 18px;
            }

            .catalogue-list-item .content section .d-table * {
                font-family: var(--font-serif);
            }

            .catalogue-list-item .content section .d-table a {
                text-decoration-color: var(--color-maroon);
            }*/
/* event list item */

/* event detail */
.p-event-detail .summary * {
    font-family: var(--font-serif);
    font-size: var(--h5-size);
}

.p-event-detail .info-text {
    font-weight: bold;
    color: var(--color-maroon);
    font-family: var(--font-serif);
}

.p-event-detail .info-card {
    background: var(--color-beige);
    /*border-radius: 10px;*/
}

    .p-event-detail .info-card * {
        /*font-family: var(--font-serif);*/
    }

    .p-event-detail .info-card a {
        /*text-decoration-color: var(--color-maroon);*/
    }

span.tag {
    display: inline-block;
    line-height: 12px;
    font-size: 12px;
    padding: 4px 8px;
    margin-right: 2px;
    margin-bottom: 2px;
}

.info-row .alert-text {
    background: var(--color-maroon);
    color: #fff;
}

.info-row .tags span.tag {
    background: #ebebeb;
}

.p-event-detail .info-for-visitors span.tag {
    background: #fff;
}

.p-event-detail .green-invitation span.tag {
    background: #CBEBA3;
}

.p-event-detail .past-event span.tag {
    background: #f6eaea;
}

/* text with image */
.r-text-with-image .text-part .text p,
.r-text-with-image .text-part .text ul {
    font-size: 0.85rem;
    line-height: 1.475rem;
}

/*.r-text-with-image .text-part .text h6 {
    font-family: var(--font-sans-serif);
}*/

/* normal */
.r-text-with-image.normal {
}
/* normal */

/* castel-pattern */
.section-row.container-fluid.g-0 .container-fluid.g-0 .r-text-with-image[class*='castel-pattern'] .text-part-left {
    padding-right: 10%; /*1.5rem;*/
}

.section-row.container-fluid.g-0 .container-fluid.g-0 .r-text-with-image[class*='castel-pattern'] .text-part-right {
    padding-left: 10%; /*1.5rem;*/
}

.r-text-with-image[class*='castel-pattern'] .text-part-left .text-part {
    width: calc(100% + var(--text-with-image-offset));
    margin-left: var(--text-with-image-offset-);
    align-items: end;
}

.r-text-with-image[class*='castel-pattern'] .text-part-right {
    z-index: 1;
}

    .r-text-with-image[class*='castel-pattern'] .text-part-right .text-part {
        width: calc(100% + var(--text-with-image-offset));
        align-items: start;
    }

.r-text-with-image[class*='castel-pattern'] .text-part {
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 16px -16px gray;
}

    .r-text-with-image[class*='castel-pattern'] .text-part .text {
        width: 100%;
        background: var(--color-beige);
    }

.r-text-with-image[class*='castel-pattern'] .image-part img {
    display: inline-block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {

    .section-row.container-fluid.g-0 .container-fluid.g-0 .r-text-with-image[class*='castel-pattern'] .text-part-left,
    .section-row.container-fluid.g-0 .container-fluid.g-0 .r-text-with-image[class*='castel-pattern'] .text-part-right {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .r-text-with-image[class*='castel-pattern'] .text-part-left .text-part {
        width: 100%;
        margin-left: 0;
        align-items: center;
    }

    .r-text-with-image[class*='castel-pattern'] .text-part-right .text-part {
        width: 100%;
        align-items: center;
    }
}
/* castel-pattern */

/* gray-background */
.r-text-with-image.gray-background .row {
    margin-top: 3rem;
    background-color: var(--color-light-gray);
    padding-bottom: 3rem;
}

    .r-text-with-image.gray-background .row .image-part {
        margin-top: -3rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }

@media (max-width: 991px) {
    .r-text-with-image.gray-background .row .image-part {
        margin-top: initial;
    }

    .r-text-with-image.gray-background .row {
        margin-top: initial;
    }
}
/* gray-background */

/* text with image */

/* ==============*/
/* Text Marquee */
/* ==============*/
.r-text-marquee {
    overflow: hidden;
    position: relative;
    width: auto;
    white-space: nowrap;
}


@keyframes r-text-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.r-text-marquee .animation {
    animation: r-text-marquee-scroll 45s infinite linear;
}

.r-text-marquee .marquee {
    display: inline-block;
}

    .r-text-marquee .marquee span {
        /*padding: 0 10px;*/
        color: var(--color-gold); /*#eed6d5;*/
        font-family: var(--font-serif);
        font-size: 30px;
        font-style: normal;
        font-weight: bold;
        line-height: 121.3%; /* 36.39px */
    }

    .r-text-marquee .marquee.secondary span {
        color: #f1efe6;
    }

/* Stop animation on hover */
/*
.r-text-marquee .animation:hover {
    animation-play-state: paused; 
}
*/
/* ==============*/
/* Text Marquee */
/* ==============*/


/* ===========*/
/* INFO CARDS */
/* ===========*/
.r-info-cards .background-stripe {
    top: 5rem;
    bottom: 3rem;
    left: 0;
    right: 0;
}

.r-info-cards .col {
    max-width: 330px;
}

.r-info-cards .col-content {
    position: relative;
    margin-top: 2rem;
    padding: 3rem 2rem 2rem;
}

.r-info-cards .content-icon {
    position: absolute;
    top: -2rem;
    background: var(--color-maroon);
    color: white;
    border-radius: 50%;
    line-height: 0;
    padding: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.r-info-cards .content-text {
    font-size: 0.9rem;
    line-height: 1.475rem;
}

    .r-info-cards .content-text p:last-child {
        margin-bottom: 0 !important;
    }
/* ===========*/
/* INFO CARDS */
/* ===========*/


/* events picker owl slider */
.r-events-picker .owl-carousel .catalogue-list-item,
.r-news-picker .owl-carousel .catalogue-list-item {
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.r-events-picker .owl-carousel .owl-stage,
.r-news-picker .owl-carousel .owl-stage {
    display: flex !important;
}

.r-events-picker .owl-carousel .owl-item,
.r-news-picker .owl-carousel .owl-item {
    display: flex;
    align-items: stretch;
}

.catalogue-list-item .title-link {
    all: unset;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.owl-items-nav .nav-buttons {
    padding: 2px 0;
}

    .owl-items-nav .nav-buttons button {
        background: #fff;
        color: var(--color-gold);
        border: solid 1px var(--color-gold);
        padding: 6px 8px;
        font-size: 15px;
    }

        .owl-items-nav .nav-buttons button:hover {
            background: var(--color-gold);
            color: #fff;
        }

.r-gallery-with-data .gallery-item {
    margin-bottom: 2rem;
}

.r-gallery-with-data .gallery-item-data {
    bottom: -1rem;
    right: 1rem;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.175);
    width: 60%;
}

.r-image {
    display: flex;
    flex-direction: column;
}

    .r-image.max-width-3-4 img {
        max-width: calc(var(--container-max-width) * 0.75 )
    }

    .r-image.max-width-1-2 img {
        max-width: calc(var(--container-max-width) * 0.5 )
    }

    .r-image.max-width-1-4 img {
        max-width: calc(var(--container-max-width) * 0.25 )
    }

/* blank page */
body:has(.p-blank-page) {
    background: var(--color-beige);
}


.b2b-member-header {
    position: relative;
    padding: 7px 11px 9px 11px;
    border: solid 1px var(--color-gold);
}
    .b2b-member-header .member-ddl {
        display: none;
        position: absolute;
        z-index: 5;
        left: -1px;
        top: auto;
        width: calc(100% + 2px);
        margin-top: 11px;
        border: solid 1px var(--color-gold);
        padding: 5px 13px;
        background-color: var(--color-beige);
    }

        .b2b-member-header .member-ddl a {
            display: inline-block;
            margin: 2px 0 2px;
        }

.phone-input {
    display: grid;
    grid-template-columns: 250px 60px 1fr;
    grid-gap: 20px;
}
    .phone-input .phone-prefix {
        background-color: #f4f4f4;
        padding: 0.75rem 0.95rem;
        border: 1px solid #f1f1f1;
        border-radius: var(--bs-border-radius);
        font-style: italic;
        color: gray;
        margin-right: -28px;
    }

.notices {

}
.notices__notice {
    color: #fff;
}
.notices__notice__inner {
    padding: 20px 20px;
    display: grid;
    grid-template-columns: 50px 1fr 30px;
    grid-template-areas:
        "one two four"
        "one three three";
    gap: 5px;
}
    .notices__notice__inner > div:nth-child(1) {
        grid-area: one;
    }
    .notices__notice__inner > div:nth-child(2) {
        grid-area: two;
    }
    .notices__notice__inner > div:nth-child(3) {
        grid-area: three;
    }
    .notices__notice__inner > div:nth-child(4) {
        grid-area: four;
    }

.notices__notice.--color-red .notices__notice__inner {
    background-color: var(--color-maroon);
}
    .notices__notice.--color-gold .notices__notice__inner {
        background-color: var(--color-gold);
    }
.notices__notice--icon {
    font-size: 24px;
    color: #fff;
    margin-right: 20px;
}
.notices__notice--title {
    align-content: center;
    color: #fff;
}
.notices__notice--summary,
.notices__notice--summary p,
.notices__notice--summary a,
.notices__notice--summary ul,
.notices__notice--summary ol,
.notices__notice--summary li {
    color: #fff;
    margin-bottom: 0;
}
.notices__notice--close {
    text-align: right;
}
.notices__notice--close i {
    cursor: pointer;
}

@media (max-width: 991px) {
    .notices__notice__inner {
        padding: 10px 10px;
        grid-template-columns: auto 1fr 20px;
        grid-template-areas:
            "one two four"
            "three three three";
    }
        .notices__notice__inner > div:nth-child(1) {
            grid-area: one;
        }
        .notices__notice__inner > div:nth-child(2) {
            grid-area: two;
        }
        .notices__notice__inner > div:nth-child(3) {
            grid-area: three;
        }
}