@import "fonts.css";
@import "../bootstrap-icons-1.13.1/icons.css";

:root {
    --background-colour: #F4F5F4;
    --accent-colour: #FAFBFC;
    --gray-colour: #888888;

    --primary-colour: #768226;

    --border-radi: 5px;

    --form-movement: 5px;
    --content-height: 400px;

    --selection-element-top: 0px;
    --active-selection-bg: #fff;

    --form-animation-duration: 2ms;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0; /* Remove default body margin */
    min-height: 100vh; /* Make body height at least viewport height */
    background-image: url('../media/bg.jpg'); /* Replace with your image path */
    background-repeat: no-repeat; /* Prevent tiling */
    background-position: center center; /* Center the image */
    background-size: cover; /* Scale the image to cover entire body */

    font-family: RobotoRegular;
    padding: 30px 0;
}

.radi {
    border-radius: var(--border-radi);
}

.window {
    background: var(--accent-colour);
    /*position: absolute;*/
    /*margin: 100px 0;*/
    margin: 0 auto;
    /*left: 50%;*/
    padding: 0 var(--form-padding);
    /*transform: translateX(-50%);*/
    width: min(940px, 100%);
}

.window > div {
    /*background: var(--accent-colour);*/
}

#logo {
    display: flex;
    align-items: center;
    padding: 20px 0;
    justify-content: space-between;
    margin-bottom: 10px;
}

#page-title {
    font-size: 24px;
}

.col {
    display: flex;

}

.row {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none !important;
}

.inv {
    visibility: hidden;
}

.form > .header {
    /*background: violet;*/

    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 50px var(--nav-padding) 0 var(--nav-padding);
    margin: 0 calc(-1 * var(--form-padding))
    /*width: 500px;*/
}

.header .gap:after {
    content: ' ';
    position: absolute;
    height: 2px;
    background: #768226;
    width: 100%;
    top: 50%;
    /*transform: translateX(-50%);*/
}

.gap {
    /* For 3 elements gap width set to 200px */
    --gap-width: 100px;
    position: relative;
    width: var(--gap-width);
    margin: 0 30px;
}

:root {
    --step-width: 40px;
    --form-padding: 50px;
    --nav-padding: calc(var(--form-padding) * 3);
}

.step .num {
    z-index: 2;
}

.step {
    border-radius: 50%;
    width: var(--step-width);
    aspect-ratio: 1;
    border: 2px solid #768226;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;

    transition: color .4s;
}

.step.past{
    background: #768226;
    color: white;
}

.step.current {
    /*background: #FFD900;*/
    color: white;
    /*border: none;*/
}
.check {
    font-size: 28px;
    display: flex;
    position: absolute;
    /*top: 50%;*/
    /*transform: translateY(-43%);*/
    transform: translateY(7%);
    /*font-weight: lighter;*/
}

.step.future {
    /*background: #c1c1c1;*/
    /*color: #c1c1c1;*/
    /*border: 2px solid #c1c1c1;*/
}

.under-header {
    display: flex;
    justify-content: space-around;
    height: 50px;
    padding: 0 var(--nav-padding) 50px var(--nav-padding);
    margin: 0 calc(-1 * var(--form-padding));
}

.under-header .description {
    width: var(--step-width);
    /*position: absolute;*/
    text-align: center;
}

.under-header .description span {
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.navigation {
    /*padding: 0 var(--form-padding);*/
    /*margin-bottom: 50px;*/
    margin-bottom: 20px;
    display: flex;
}

.navigation .back {
    user-select: none;
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid #aeaeae;
    /*color: #aeaeae;*/
}




html {
    overflow-x: hidden;
}

.form-step > .title {
    margin-bottom: 20px;
}

.content {
    padding-bottom: 50px;
}

.content .location {
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*transition: .4s;*/
}

/*.content .location .card {*/
/*    width: 49%;*/
/*    height: 250px;*/
/*    border: 1px solid black;*/
/*    cursor: pointer;*/
/*    transform: scale(0.96);*/
/*    transition: transform 0.3s ease;*/

/*}*/

/*.content .location .card:first-child {*/
/*    transform-origin: left top;*/
/*}*/

/*.content .location .card:last-child {*/
/*    transform-origin: right top;*/
/*}*/

.location .list .list-element {
    display: flex;
}

.location .list .list-element .icon {
    font-size: 25px;
    margin-right: 30px;
}

.location .list .list-element .text * {
    margin: 0;
}


.header .check {
    position: relative;
    display: none;
}

.header .check.show {
    display: block;
}

.header svg {
    width: 30px;
    height: auto;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.header svg path {
    stroke: white;
}

.header .check.show svg path {
  stroke-dasharray: 11.313708305358887;
  stroke-dashoffset: 11.313708305358887;
  animation: draw-line 0.8s ease-out forwards;
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

.step {
    position: relative;

}

.step.ff::before {
}

.step.current.ff::before {
    transition: clip-path 0s;
}

.step::before {
    content: '';
    position: absolute;
    inset:0;
    background: #768226;
    clip-path:inset(0 100% 0 0);
    transform-origin: left;
    transition: clip-path .4s ease;
    z-index: 1;
    border-radius: 50%;
}

.step.current::before {
    clip-path:inset(0 0 0 0);
}

/* FORM STEPS */

.content {
    position: relative;
    /*display: flex;*/

}

.stop-layer {
    /*width: calc(100% - var(--form-padding) * 2);*/
    position: absolute;
    height: var(--content-height);
    /*background: #FFD900;*/
    z-index: 2;
    width: 100%;
    transform: translateX(calc(-1 * var(--form-padding)));

}

/*.content {*/

/*    padding-bottom: var(--form-padding);*/
/*}*/

.content .form-step {
    position: absolute;
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
    z-index: 1;
    transform: translateX(var(--form-movement));
    top: -1000000px;
}

.content .form-step.show {
    opacity: 1;
    z-index: 3;
    transform: translateX(0);
    /*overflow: auto;*/
    position: relative;
    top: 0;
}

.content .form-step.exit-left {
    opacity: 0;
    transform: translateX(calc(var(--form-movement) * -1));
}

.content .specialist .person {
    padding-left: 5%;
    padding-right: 5%;

}

.added-cost {
    display: flex;
}

h6.asterix {
    margin: 0;
    padding-left: 3px;
}

.content .specialist .person .right {
    margin-left: auto;
}

.list-element {
/*.content .specialist .person {*/
    display: flex;
    padding: 10px 20px;
    /*background: #F4F5F4;*/
    align-items: center;

    border-bottom: 1px solid #b7b7b7;
}

.list:not(.sub-list) > .list-element:first-child,
.list:not(.sub-list) > .nested-list-element > .list-element:first-child {
/*.content .specialist .person:first-child {*/
    border-top-left-radius: var(--border-radi);
    border-top-right-radius: var(--border-radi);
}

.list:not(.sub-list) >  .list-element:last-child,
.list:not(.sub-list) > .nested-list-element > .list-element:last-child {
/*.content .specialist .person:last-child {*/
    border-bottom-left-radius: var(--border-radi);
    border-bottom-right-radius: var(--border-radi);
    border-bottom: none;
}

.list-element:nth-child(even) {
/*.content .specialist .person:nth-child(even) {*/
/*    background: #eee;*/
}

/* HOVER */
@media (hover: hover) and (pointer: fine) {
    .content .location .card:hover {
        transform: scale(1);
    }
    .navigation .back:hover {
        border: 1px solid black;
        cursor: pointer;
    }

    .list-element:hover {
    /*.content .specialist .person:hover {*/

        /*background: #dbdbdb !important;*/
        background: #F4F5F4 !important;
        cursor: pointer;
    }

    .timeslot .left.disable:hover,
    .timeslot .right.disable:hover {
        background: #e5e5e5;
        cursor: not-allowed;
        color: black;
    }

    .popup .selection .list .list-element:hover {
        background: #F4F5F4 !important;
    }

    .timeslot .left:hover,
    .timeslot .right:hover {
        background: var(--primary-colour);
        color: white;
        cursor: pointer;
        /*box-shadow: 0 0 8px 1px var(--primary-colour);*/
    }

}

.list-element .image {
/*.content .specialist .person .image {*/
    height: 50px;
    margin-right: 20px;
}

.list-element .image img {
/*.content .specialist .person .image img {*/
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    border-radius: 10px;
}

.list .image.no-radi img {
    border-radius: 0;
}

.flex {
    display: flex;

}

.justify {
    justify-content: space-between;
}

.centre {
    justify-content: center;
}

.equal3 > div {
    width: 33%;
}

.equal3 > div:nth-child(2) {
    text-align: center;
}

.equal3 > div:last-child {
    text-align: right;
}

.align {
    align-items: center;
}

.list .left {
    display: flex;
    align-items: center;
}

.description {
    color: gray;
    font-size: 0.8rem;
}

.list .bubble-area {
    display: flex;
    gap: 10px;
}

.list .bubble {
    color: #727272;
    margin: 0 20px;
    border: 1px solid #727272;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 5px 10px;

    /*align-self: anchor-center;*/
}

.list .bubble > span {
    white-space: nowrap;
}

.information {
    display: flex;
    align-items: center;
}


.list .bubble svg {
    stroke: #727272;
}

.list .bubble .icon {
    /*padding: 2px;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.list .bubble .icon {
    margin-right: 5px;
}

.bubble.info {
    color: #0B6FFD;
    /*background: #0B6FFD;*/
    border: 1px solid #0B6FFD !important;
}

.bubble.info .icon path {
    stroke: #0B6FFD;
}


.list .right {
    white-space: nowrap;
}

.bubble.info {
}

.bubble.primary {
    border-color: var(--primary-colour);
    color: var(--primary-colour);
}

.list.activated > div {
    display: none;
}

.list.activated > div.activated {
    display: flex;
}

.sub-list {
    width: 80%;
    margin: auto;
}

.immediately {
    transition: 0s !important;
}

.popup1 .selection.appear {
    top: 50px;
}

.popup .selection .list .list-element {
    cursor: default;
}

#filter {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 4;

    background: black;
    opacity: .4;
    display: none;
}


#filter.shown {
    display: block;
}

.procedure,
.specialist{
    /*max-height: calc(100% - var(--form-padding));*/
    /*overflow-y: auto;*/
    /*padding-bottom: 50px;*/
    /*padding-bottom: var(--form-padding);*/
    /*  box-shadow: inset 10px 0 10px rgba(0, 0, 0, 0.2); !* Default shadow, will be modified *!*/

      /*box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 -4px 6px rgba(0, 0, 0, 0.2); !* Shadow on top and bottom *!*/
      /*box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.2), inset 0 4px 6px rgba(0, 0, 0, 0.2); !* Shadow on top and bottom *!*/
}

.procedure-specific > div {
    display: none;
}


.procedure-specific > div.show {
    display: block;
}

.procedure-specific .selection {
    background: #F4F5F4;
    height: 70px;
    padding: 10px 20px;
    border-radius: var(--border-radi);
    border: 2px solid var(--primary-colour);
}
.procedure-specific .selection .image {
/*.content .specialist .person .image {*/
    height: 50px;
    margin-right: 20px;
}

.procedure-specific .selection .image img {
/*.content .specialist .person .image img {*/
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    border-radius: 10px;
}

.procedure-specific .list-element > div > div.name {
    margin-left: 10px;
}


.row {
    margin: 20px 0 5px 0;
}



/* Calendar */

.calendar-placement {
    /*width: 50%;*/
    width: calc(7 * (var(--date-side) + 2px))
    /*background: violet;*/
}

.calendar {
    padding-bottom: 30px;
    border-bottom: 1px solid #b5b5b5;
}

.calendar .header {
    padding: 0;
    /*margin: 0;*/
    /*display: flex;*/
    /*justify-content: space-around;*/
    margin-bottom: 10px;
}

:root {
    --date-side: 50px;
    --date-gap: 4px;
}

.calendar .data {
    display: grid;
    /*grid-template-columns: 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857% 14.2857142857%;*/
    /*grid-template-columns: 55px 55px 55px 55px 55px 55px 55px;*/
    grid-template-columns: repeat(7, 50px);
    grid-auto-rows: 50px;
    /*gap: var(--date-gap);*/
    gap: 2px;
}



.calendar .data .date:not(.placeholder) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--date-side);
    height: var(--date-side);

    /*background: #e5e5e5;*/
    /*color: #989898;*/
    opacity: .4;
    border-radius: var(--border-radi);
    user-select: none;
    transition: .1s;
}

.calendar .data .date.available {
    border: 2px solid var(--primary-colour);
    color: black;
    cursor: pointer;
    opacity: 1;
}

/*.calendar .data .header:nth-child(6),*/
/*.calendar .data .header:nth-child(7){*/
/*    color: red;*/
/*}*/

.calendar .data .date.weekend,
.calendar .data .date.weekend.available {
    color: red;
}

.calendar .data .date.selected,
.timeslot .times .time.selected {
    background: var(--primary-colour);
    color: white;
    cursor: pointer;
    opacity: 1;
}

.calendar .data .date.available:hover {
    background: var(--primary-colour);
    color: white;
    /*transition: .1s;*/

}

.calendar-placement .times {
    margin-top: 30px;
}

.calendar-placement .times .available-times-header {
    font-size: 1.1em;
    display: flex;
    justify-content: center;
}



.calendar-placement .times .available-times {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 10px;

    margin-top: 20px;
}

.calendar-placement .times .available-times .time {
    /*width: 30%;*/
    border: 1px solid var(--primary-colour);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.calendar-placement .times .available-times .time:hover {
    cursor: pointer;

}

.calendar {
    position: relative;
}

#hider {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #FAFBFC;
    z-index: 12;
    display: flex;
    justify-content: center;
    align-items: center;
}


.loader {
    border: 5px solid #f3f3f3;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: rgb(243, 243, 243);
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 30%;
    height: auto;
    aspect-ratio: 1;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.timeslot .calendar-placement .calendar .data .date.hidden {
    display: none;
}

.timeslot .left svg,
.timeslot .right svg {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.timeslot .left,
.timeslot .right {
    border-radius: 10px;
    width: 40px;
    height: 40px;
    padding: 10px;
    transition: .1s ease;
}

.disable {
    cursor: not-allowed;
    /*pointer-events: none;*/
}

.content .confirmation {
    padding: 0 var(--form-padding);
}


.content table {
    border-collapse: collapse;
    width: 100%;

}

.content .details table td {
    border-bottom: 1px solid gray;
    padding: 20px 0;
}

.content .details table tr:last-child td {
    border: none;
}

.content .confirmation .row {
    margin: 25px 0;

}


.btn {
    width: 100%;
    padding: 15px 15px;
    border-radius: 10px;
    background: var(--primary-colour);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    height: 48px;
    transition: .2s;
}

.btn:hover {
    background: rgba(51, 51, 51, 0.81);
    cursor: pointer;
}

.btn.inactive {
    cursor:default;
    background: #ECECEC;
    color: #B0B0B0;
}


.dropdown {
    /*position: relative;*/
    margin: 30px 5% 0 5%;
    padding: 20px;
    border: 1px solid gray;
    border-radius: var(--border-radi);
}

.dropdown-options {
    border-radius: var(--border-radi);
    border: 1px solid gray;
    /*margin: 5px 5%;*/


}

.dropdown-options .element,
.dropdown-options .list-element {
    height: 100%;
    padding: 20px;
    border-bottom: 1px solid gray;
    cursor: pointer;
}

.dropdown-options .element:hover {
    background: #F4F5F4;
}

.dropdown-options .element:last-child,
.dropdown-options .list-element:last-child{
    border-bottom: none;
}

.dropdown-options.specialist .list-element {
    padding-top: 10px;
    padding-bottom: 10px;
}

.timeslot .times .button {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.timeslot .times .button .btn {
    width: 50%;
}



.confirmation .details {
    display: flex;
    gap: 20px;
}

.confirmation .details .side.picture {
    width: 20%;

    img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}

.confirmation .details .side.info {

    .location {
        font-weight: bold;
        color: gray;
        font-size: 0.8rem;
    }

    .procedure {

    }

}





.fieldset {
    position: relative;
    color: #999;
    /*background: #F4F5F4;*/
    background: #FAFBFC;
    border-radius: var(--border-radi);
    border: 1px solid #DEE2E5;
    height: 50px;
    font-size: 14px;
    padding: 0;
    margin: 0;

}

.fieldset label {
    position: absolute;
    display: block;
}

.fieldset input {
    outline: none;
    height: 100%;
    margin: 0 13px;
    border: none;
    background: transparent;
    width: calc(100% - 13px * 2);
}

.fieldset label {
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    transition: .2s ease-out;
    /*background: #F4F5F4;*/
    background: #FAFBFC;
    padding: 0 5px;
}

.fieldset:has(input:focus),
.fieldset:has(input:not(:placeholder-shown)),
.fieldset.danger {
    label {
        top: 0;
        left: 11px;
    }
}

.fieldset.danger {
    border: 1px solid #c60000;
}

.fieldset.danger label {
    color: #c60000;
}

.fieldset.danger::after {
    content: 'Šis lauks ir obligāts';
    color: #c60000;
    position: absolute;
    font-size: 12px;
    bottom: 0;
    left: 5px;
    transform: translateY(calc(100% + 2px));
}

.fieldset.danger input {
    margin-bottom: 2px;
}




/*#phone > .flag-area {*/
/*    width: auto;*/
/*    height: 100%;*/
/*    aspect-ratio: 1;*/
/*    border-right: 1px solid #DEE2E5;*/
/*}*/



.description:empty {
    display: none;
}


.confirmation .summary {
    /*display: flex;*/


    .head {
        display: flex;
        height: 70px;

        .date-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radi);
            /*background: #F4F5F4;*/
            background: var(--primary-colour);
            color: white;
            /*box-shadow: inset 0 0 2px gray;*/
            /*background-clip: padding-box;*/
            width: auto;
            aspect-ratio: 1;
            /*height: 100%;*/

            margin-right: 20px;

            .date {
                /*width: auto;*/
                font-size: 1.8rem;
                font-weight: bold;
            }
        }

        .text-area {
            /*display: inline-block;*/
            /*width: auto;*/
            display: flex;
            flex-direction: column;
            .title {
                flex: 0 0 auto;
            }

            .duration {
                color: gray;
            }

            .time {
                font-weight: bold;
            }

            .location {
                font-weight: bold;
                color: gray;
                font-size: 0.8rem;

                flex: 0 0 auto;
            }

            .date {
                height: 100%;
                font-weight: bold;
                font-size: 0.8rem;
                flex: 1 1 auto;

                display: flex;
                align-items: end;
            }
        }
    }

    .sep {
        height: 1px;
        width: 100%;
        background: gray;
        margin: 20px 0 0 0;
    }

    .body {

        margin-top: 30px;

        table td.sub {
            color: gray;
            font-weight: bold;
        }


        table td:last-child {
            width: 10px;
            text-align: right;
            padding: 0;
            /*height: 30px;*/
        }

        table tr:nth-last-child(2) {
            /*height: 40px;*/

            td {
                vertical-align: top;
                border-bottom: 1px solid gray;
                padding-bottom: 30px;
            }
        }


        table tr:last-child td {
            padding-top: 8px;
            /*height: 40px;*/
        }

        .table {
            width: 100%;


        }

        .table .trow {
            display: flex;
            /*height: 45px;*/
            align-items: center;
            justify-content: space-between;
        }

        .trow .left.sub {
            color: gray;
            font-weight: bold;
            /*font-size: 0.8rem;*/
        }

        .table .trow .right {
            /*text-align: end;*/
        }

        .table .trow:nth-last-child(2) {
            /*height: 30px;*/
        }

        .table .trow:last-child {
            border-top: 1px solid gray;
            margin-top: 30px;
            height: 25px;
        }

    }
}




/*fieldset {*/
/*    position: relative;*/
/*    color: #999;*/
/*    background: #fff;*/
/*    border-radius: var(--border-radi);*/
/*    border: 1px solid #DEE2E5;*/
/*    height: 50px;*/
/*    font-size: 14px;*/
/*    padding: 0;*/
/*    display: flex;*/
/*}*/


/*fieldset input {*/
/*    outline: none;*/
/*    height: calc(100% - 13px);*/
/*    margin: 13px 10px 0 10px;*/
/*    border: none;*/
/*    background: transparent;*/
/*    width: calc(100% - 13px * 2);*/
/*}*/

/*fieldset label {*/
/*    !*top: 50%;*!*/
/*    !*left: 15px;*!*/
/*    !*transform: translateY(-50%);*!*/
/*    !*transition: .2s ease-in-out;*!*/
/*    !*background: #F4F5F4;*!*/

/*    position: absolute;*/
/*    !*padding: 0 5px;*!*/
/*    font-size: 11px;*/
/*    transform: translate(calc(50% + 13px), 5px);*/
/*    !*position: absolute;*!*/
/*    !*top: 10px;*!*/
/*}*/

#phone > .flag-area {
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    border-right: 1px solid #DEE2E5;
    background: #F4F5F4;
    display: flex;
    justify-content: center;
    align-items: center;
}

#phone > .flag-area img {
    width: 20px;
}

/*#phone #number {*/
/*    width: auto;*/
/*    margin-left: 0;*/

/*}*/



.description:empty {
    display: none;
}



@media screen and (min-width: 601px) and (max-width: 900px)
{

    :root {
        --nav-padding: var(--form-padding);
    }
    #page-title {
        font-size: 18px;
    }
    .header {
        /*display: none;*/
    }
}


@media screen and (max-width: 600px) {
    #logo {
        flex-direction: column;
        gap: 20px;
    }
    #page-title {
        font-size: 18px;
    }

    body {
        background: #FAFBFC;
        padding: 0;
    }
    .window {
        width: 100%;
        top: 0;
        /*margin-top: 50px;*/
        /*margin: 50px 0;*/
        padding: 0 5%;
        /*padding-top: 50px;*/
        /*padding-bottom: 300px;*/
        background: transparent;
    }
    .content {
        width: 100%;
        padding: 0;
    }
    .window > div > .header,
    .window > div > .under-header {
        display: none;
    }

    .window .radi .content .procedure {
        width: 100%;
    }

    .procedure .list-element {
        height: 120px;
    }

    /*.list .bubble {*/
    /*}*/

    /*.procedure .list-element .description {*/
    /*    margin-top: 10px;*/
    /*}*/

    .procedure .list-element .information {
        flex-direction: column;
        align-items: start;
    }

    .procedure .list-element .bubble {
        margin: 0;
        width: max-content;
        align-self: normal;
        margin-top: 5px;
    }

    .content .form-step.specialist {
        width: unset;
    }

    .price {
        width: max-content;
    }

    .list-element {
        padding: 10px 10px;
    }

    .list-element .image {
        height: 40px;
        margin-right: 15px;
    }

    /*.procedure-specific .selection {*/
    /*    margin: 0 5%;*/
    /*}*/

    .procedure-specific .list {
        margin-top: 20px;
    }

    .procedure-specific .list .list-element {
        height: 65px;
    }

    /*.procedure-specific .row {*/
    /*    margin-left: 5%;*/
    /*    margin-right: 5%;*/
    /*}*/

    /*.dropdown-options {*/
    /*    margin: 5px 5%;*/

    /*}*/

    /*.calendar-placement {*/
    /*    width: 100%;*/
    /*}*/

    :root {
        --date-side: auto;
    }

    .calendar .data {

        grid-template-columns: repeat(7, 1fr);
        grid-auto-rows: auto;
    }

    .calendar-placement {
        margin: 0 20px;
    }

    .calendar-placement .calendar-month-text {
        width: max-content;
    }

    .calendar .data .date {
        aspect-ratio: 1;
    }

    html {
        /*overflow-x: hidden;*/
    }

    .confirmation.form-step {
        padding: 0;
    }


}