/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */


:root {
    /* generic */
    --gutterSm: 0.4rem;
    --gutterMd: 0.8rem;
    --gutterLg: 1.6rem;
    --gutterXl: 2.4rem;
    --gutterXx: 7.2rem;
    --colorBgPrimary400: #279989;
    --colorPrimary400: #ffffff;
    --colorBgPrimary600: #0376db;
    --colorPrimary600: #ffffff;
    --colorBgPrimary800: #023c6e;
    --colorPrimary800: #ffffff;
    --fontFamily: "Dosis", sans-serif;
    --fontSizeSm: 0.8rem;
    --fontSizeMd: 1.2rem;
    --fontSizeLg: 1.2rem;
    --fontSizeXl: 1.2rem;
    --fontSizeXx: 2rem;
    --lineHeightSm: 1.1;
    --lineHeightMd: 2;
    --transitionDuration: 300ms;
    --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1);

    /* floated labels */
    --inputPaddingV: var(--gutterMd);
    --inputPaddingH: var(--gutterLg);
    --inputFontSize: var(--fontSizeLg);
    --inputLineHeight: var(--lineHeightMd);
    --labelScaleFactor: 0.8;
    --labelDefaultPosY: 50%;
    --labelTransformedPosY: calc((var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) * var(--inputLineHeight)));
    --inputTransitionDuration: var(--transitionDuration);
    --inputTransitionTF: var(--transitionTF);
}

html,
body {
    color: #363636;
    font-size: clamp(0.9rem, 1rem, 1rem);
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #F4F1EE;
    user-select: none;
    /* Standard syntax */
}

a:active {
    color: #eeeeee;
}

a {
    color: eeeeee;
}

footer {
    display: flex;
    background: #E1DDDA;
    color: #363636;
    padding: 10px 20px 10px 20px;
    font-size: 0.7rem;
}

.footerLeftContent {
    flex: 1;
}

/* The article fills all the space between header & footer */

main {
    flex: 1;
}

h3 {
    font-size: clamp(1rem, 2.2vw, 1.4rem);
}

.btn.btnNext,
.btn.btnBack {
    display: flex;
    align-items: center !important;
}

.btn.btnNext i {
    padding-left: 10px;
}

.btn.btnBack i {
    padding-right: 10px;
}

.checkbox-lg .form-check-input {
    top: 0.8rem;
    scale: 1.4;
    margin-right: 0.7rem;
}

.checkbox-lg .form-check-label {
    padding-top: 13px;
}

.modalTermsConditions {
    cursor: pointer;
}

.navbar {
    padding: 0.5rem 1rem;
}

.groupFrame {
    border: 1px solid #e3e3e3;
    padding: 12px;
    -webkit-box-shadow: 0 10px 10px -10px #a3a3a3;
    -moz-box-shadow: 0 10px 10px -10px #a3a3a3;
    box-shadow: 0 10px 10px -10px #a3a3a3;
    background-color: var(--colorPrimary400);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bg-primary {
    background-color: var(--colorBgPrimary400) !important;
}

.btn {
    color: var(--colorPrimary400);
    font-size: 2vh;
    -webkit-box-shadow: 0 10px 10px -10px #a3a3a3;
    -moz-box-shadow: 0 10px 10px -10px #a3a3a3;
    box-shadow: 0 10px 10px -10px #a3a3a3;
    font-family: "Sofia Sans Extra Condensed";
}

.languageSelect {
    cursor: pointer;
}

.language-selection h2 {
    font-size: clamp(1rem, 2.2vw, 1.4rem);
}

.bg-dark {
    background-color: #A59C94;
}

.btn-primary {
    background-color: var(--colorBgPrimary400);
}

.btn-secondary {
    background-color: #279989;
}

.btn_confirmPayment {
    font-size: 1.6rem !important;
}

.badge {
    margin-left: 5px;
    cursor: pointer;
}

.language-flag {
    width: 5rem;
    height: 5rem;
}

.language-selection {
    margin-top: 20px;
}

.formTitle {
    color: #2a2a2a;
}

#pageSelectLanguage {
    max-width: 800px;
    margin: auto;
}

#pageSelectTicket {
    max-width: 800px;
    margin: auto;
}

#pageSelectDate {
    max-width: 1000px;
    margin: auto;
}

#pagePayment {
    max-width: 600px;
    margin: auto;
}

#pageSelectTicket .verticalSpacer:after {
    content: "";
    display: block;
    border-bottom: 1px solid #dddcdc;
    margin-bottom: 14px;
    height: 20px;
}

#pageEditReservations .verticalSpacer:after {
    content: "";
    display: block;
    border-bottom: 1px solid #dddcdc;
    margin-bottom: 14px;
    height: 20px;
}

.ticketQty .plus i {
    border: 1px solid var(--colorBgPrimary400);
    background: var(--colorBgPrimary400);
    border-radius: 30px;
    color: #fff;
    padding: 5px 6px;
    font-size: 12px;
}

.ticketQty .minus i {
    border: 1px solid #e6007e;
    background: #e6007e;
    border-radius: 30px;
    color: #fff;
    padding: 5px 6px;
    font-size: 12px;
}

.ticketQty .disable {
    border: 1px solid #979797 !important;
    background: #fff !important;
    color: #979797 !important;
}

.ticketQty input {
    max-width: 50px;
}

.titleBanner {
    background-color: #A59C94;
    /*border-radius: 16px 16px 0px 0px;*/
    color: var(--colorPrimary400);
    height: 50px;
    display: flex;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    padding-left: 16px;
    margin-bottom: 20px;
    font-size: 1rem;
    font-weight: 500;
}

.hello-week {
    background-color: white;
}

.hello-week .day.is-weekend {
    background-color: var(--colorBgPrimary400);
    color: white !important;
}

.hello-week .day.is-today {
    border: 1px solid #636363;
    background-color: white !important;
    color: black !important;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
    margin-bottom: 20px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
    height: 14rem;
    background-color: black;
    text-align: center;
}

.background-blur {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(8px);
    background-repeat: no-repeat;
    background-size: cover;
}

.carousel-item>img {
    position: absolute;
    top: 0;
    left: 0;
    /*min-width: 100%;*/
    height: 32rem;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

.marketing h2 {
    font-weight: 400;
}

.marketing .col-lg-4 p {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
}

/* Featurettes
------------------------- */

.featurette-divider {
    margin: 3rem 0;
    /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.05rem;
}

/*************** <PageLoader> ***************/

.PageLoader {
    z-index: 1000;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -48px;
    display: none;
}

.loading-bar {
    display: inline-block;
    width: 24px;
    height: 104px;
    border-radius: 16px;
    animation: loading 1s ease-in-out infinite;
}

.loading-bar:nth-child(1) {
    background-color: var(--colorBgPrimary400);
    animation-delay: 0;
}

.loading-bar:nth-child(2) {
    background-color: var(--colorBgPrimary600);
    animation-delay: 0.09s;
}

.loading-bar:nth-child(3) {
    background-color: var(--colorBgPrimary800);
    animation-delay: 0.18s;
}

.loading-bar:nth-child(4) {
    background-color: var(--colorBgPrimary400);
    animation-delay: 0.27s;
}

@keyframes loading {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1, 2.2);
    }

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

/*************** </PageLoader> ***************/

/*************** <Modal> ***************/
.modal-header {
    background-color: #77706A;
    color: var(--colorPrimary400);
}

/*************** <Modal> ***************/

/*************** <Calendar slots> ***************/


/* width */
::-webkit-scrollbar {
    width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--colorBgPrimary400);
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--colorBgPrimary400);
}

.timeSlotsContainer {
    height: 600px;
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    justify-content: space-between;

}

/*.timeSlot {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    border: 1px solid #cccccc;
    border-radius: 4px;
    width: 100%;
    height: 50px;
    padding: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    background-color: white;
}

.timeSlot .time {
    font-weight: bold;
    margin: 0px;
}*/


.currentDay {
    border-left: 4px solid #A59C94;
    color: #77706A;
    line-height: normal !important;
    font-weight: 800 !important;
}

.dateTitle {
    padding-left: 4px;
}

.dateTitle .dayName {
    font-weight: bold;
}

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

.timeSlot:hover {
    background-color: #dddddd;
}

.occupancyBar {
    width: 100%;
    height: 10px;
    border-radius: 6px;
}

.percent0 {
    background-color: #45a735;
}

.percent20 {
    background-image: linear-gradient(to right, #ff0000, #45a735 20%);
}

.percent40 {
    background-image: linear-gradient(to right, #ff0000, #45a735 40%);
}

.percent60 {
    background-image: linear-gradient(to right, #ff0000, #45a735 60%);
}

.percent80 {
    background-image: linear-gradient(to right, #ff0000, #45a735 80%);
}

.percent100 {
    background-color: #ff0000;
}

/*************** </Calendar slots> ***************/

.mt-20 {
    margin-top: 20px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

/*************** <sliderTimePicker> ***************/

#dateVisit {
    overflow: visible;
    width: 100px;
    text-align: center;
    margin-right: 5px;
}

#selectDateDatePicker {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

/*#dateVisit {
    border: 0px;
    font-size: 24px;
    border-radius: 12px;
    padding: 6px;
    -webkit-box-shadow: 0 10px 10px -10px #a3a3a3;
    -moz-box-shadow: 0 10px 10px -10px #a3a3a3;
    box-shadow: 0 10px 10px -10px #a3a3a3;
}*/

#selectDateCalendar .calendar {
    max-width: 500px;
    justify-content: center;
}

/* https://blog.hubspot.com/website/html-slider */

/*

230215: Odstrani ta del, ker najbrz ne bo v uporabi

.slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 60px;
    padding: 30px;
    padding-left: 40px;
    background: #fcfcfc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    -webkit-box-shadow: 0 10px 10px -10px #a3a3a3;
    -moz-box-shadow: 0 10px 10px -10px #a3a3a3;
    box-shadow: 0 10px 10px -10px #a3a3a3;
}

.slider p {
    font-size: 26px;
    font-weight: 600;
    padding-left: 30px;
    color: black;
}

.slider input[type="range"] {
    -webkit-appearance: none !important;
    width: 420px;
    height: 2px;
    background: black;
    border: none;
    outline: none;
}

.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 45px;
    height: 45px;
    background: rgb(241, 143, 31);
    border: 2px solid rgb(255, 115, 0);
    border-radius: 50%;
    cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb:hover {
    background: rgb(187, 255, 0);
}

.slider {
    margin-top: 10%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(90deg);
}

*/
/*************** </sliderTimePicker> ***************/

/*************** <stepper> ***************/

.stepperContainer {
    margin-top: 100px;
    display: flex;
    justify-content: center;
}

.bln-stepper {
    width: 80%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    /* margin-top: 1rem; */
    margin-bottom: 2rem;
    font-size: 12px;
}

.bln-stepper .step-container .step {
    display: flex;
    align-items: center;
}

.bln-stepper .step-line {
    flex: 1;
    height: 2px;
}

.bln-stepper .step-line {
    background-color: #A59C94;
}

.bln-stepper .step-container.step-active .step .step-circle {
    border-color: #279989;
    color: #363636;
}

.bln-stepper .step-line-container .line {
    flex: 1;
    display: flex;
    align-items: center;
}

.bln-stepper .step-container .step .step-circle {
    width: 30px;
    height: 30px;
    margin: 0 5.5px;
    border-radius: 50%;
    border: 2px solid #A59C94;
    text-align: center;
    /* font-size: 20px; */
    line-height: 27px;
}

.bln-stepper .step-container .step .step-circle {
    background-color: white;
    color: #707070;
}

.bln-stepper .step-line {
    flex: 1;
    height: 2px;
}

.bln-stepper .step-line {
    background-color: #A59C94;
}

.bln-stepper .step-container.active .step-name {
    color: #000;
}

.bln-stepper .step-line-container {
    flex: 1;
    display: flex;
    flex-flow: column;
}

.bln-stepper .step-container.active .step .step-circle {
    border-color: #ff8200;
    color: #000;
}

.bln-stepper .step-name {
    font-size: 13px;
    line-height: 14px;
    flex-basis: 14px;
    text-align: center;
    white-space: nowrap;
    margin-top: 7px;
    display: none;
}

/*************** </stepper> ***************/

.sign-in-facebook {
    background: url("http://i.stack.imgur.com/e2S63.png") #f2f2f2;
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
}

.sign-in-facebook:hover {
    background: url("http://i.stack.imgur.com/e2S63.png") #e0e0e0;
    background-position: -9px -7px;
    background-repeat: no-repeat;
    background-size: 39px 43px;
    padding-left: 41px;
    color: #000;
}

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

/*.cardDetailes {
    max-width: 460px;
    margin: auto;
}*/


/****************************<Koda 230314  V2>********************************/

.fa-times {
    color: red;
}

.slotStatus {
    font-size: 22px;
    text-align: center;
    min-width: 60px;
}

.timeSlot {
    display: flex;
    /* 230314: flex-wrap: wrap; */
    align-content: space-between;
    border: 1px solid #cccccc;
    border-radius: 4px;
    width: 100%;
    padding: 1px 6px 1px 6px;
    margin-bottom: 1px;
    font-size: 12px;
    background-color: white;
}

.timeSlot .time {
    font-weight: bold;
    margin: 0px;
    min-width: 96px;
    display: flex;
    align-items: center;
}

.occupancyBarContainer {
    width: 100%;
    display: flex;
    align-items: center;
}

.occupancyBar {
    background-color: var(--colorBgPrimary400);
    height: 20px;
    border-radius: 4px;
    border: var(--colorBgPrimary400) 1px solid;
}

.cardExpiration {
    display: flex;
    justify-content: space-between;
}

.expirationInput {
    width: 100px
}

/*
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}*/

#pagePaymentSuccess {
    margin-top: 120px;
}

#paymentSuccessInfo {
    max-width: 460px;
    margin: 40px auto 40px auto;
    border-radius: 10px;
    padding: 40px 20px;
    background-color: #0062cc;
    color: white;
}

#paymentSuccessInfo a {
    color: rgb(151, 205, 255);
}

/****************************</Koda 230314  V2>********************************/

/****************************<Koda 230321  V1>********************************/

.maskInputField {
    -webkit-text-security: disc;
}

/****************************<Koda 230321  V1>********************************/


/* RESPONSIVE CSS
-------------------------------------------------- */

/* Small devices (landscape phones, 576px and up) */

@media only screen and (max-width: 576px) {
    .expirationInput {
        width: 70px;
    }
}

@media (min-width: 36em) {
    .btn {
        font-size: 1rem;
    }

    .bln-stepper .step-name {
        display: block;
    }

    #datePicker {
        display: none;
    }

    .dateTitle {
        display: block !important;
    }

    #selectDateCalendar {
        display: block !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 48em) {

    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        line-height: 1.4;
    }

    .carousel-item {
        height: 20rem;
        text-align: center;
    }

    /* Large devices (desktops, 992px and up) */
    @media (min-width: 62em) {
        .featurette-heading {
            margin-top: 7rem;
        }
    }

    .languageSelect .btn {
        width: 60%;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 75em) {}

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 88em) {}