@charset "UTF-8";

:root {
    --hx-form-spacing: 8px;
    --hx-calendar-day-selected-background: #e6027c;
    --hx-calendar-day-disabled-text-decoration: none;
    --hx-calendar-day-names-font-weight: 1000;
    --hx-calendar-day-today-background: none;
    --hx-calendar-day-today-color: #a50034;
    --primary-pink: #e6027c
}



html {
    font-size: 15px;
    font-family: "Inter", sans-serif;
    height: 100%;
}

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

.app,
.page {
    height: 100%;
}

form {
    min-width: 320px;
}

@media screen and (min-width: 768px) {
    form {
        width: 100%;
    }
}

#fullscreen-div {
    height: 100vh;
    width: 100vw;
    background-color: #add8e6;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 768px) {
    body {
        background-color: #ece9f2;
    }
}

header {
    background-color: #ece9f2;
}

p {
    margin: 0;
}

.hide {
    display: none;
}

@media screen and (max-width: 768px) {
    .phoneHide {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .col-sm-6 {
        flex: 0 0 auto;
        width: fit-content !important;
    }
}

.navbar {
    width: 100% !important;
    padding: 0 15px;
}

.navbar .container {
    width: 100% !important;
    margin: 0 15px;
    display: flex;
    justify-content: space-between;
}

.navbar-expand-md {
    justify-content: space-between;
    width: 100%;
}

.navbar-nav {
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

nav .navbar-nav li a {
    color: #000 !important;
    font-weight: 700;
    font-size: 20px;
}

.navbar-brand {
    color: #000 !important;
    font-weight: 600;
}

.nav-item {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}

.navbar-toggler {
    border: 0;
}

.navbar-toggler-icon-custom {
    color: #e6027c;
    font-weight: bold;
}

.top-row {
    box-shadow: 0 4px 27.2px 0 rgba(0, 0, 0, .1);
    border-bottom: 0 !important;
    background-color: #fff !important;
}

.top-row a,
.top-row .dropdown {
    color: #000 !important;
}

.card {
    border: 0 !important;
    margin-top: 5%
}

.card-body {
    padding: 0 8%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

@media screen and (min-width: 768px) {

    .card-body {
        padding: 5%;
    }
}

@media screen and (min-width: 768px) {
    .form-card {
        background: #fff;
        border: 0;
        width: 960px;
        border-radius: 40px;
        box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
    }
}

.form-card-title {
    flex: 100%;
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align:center;
}


.card-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 100%;
    background-color: #fff;
    border-radius: 22px;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
    width: 65%;
}

.titleBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex: 100%;
}

.form-card-text {
    flex: 100%;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 56px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .form-card-text {
        margin-bottom: 32px;
    }
}

.reservationTextBox {
    flex: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.hx-form-group {
    flex: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reservation-created-heading {
    font-size: 20px;
    font-weight: 700;
    flex: 100%;
}

.reservation-created {
    flex: 100%;
}

.reservation-created-text {
    font-size: 20px;
    max-width: 560px;
    margin-top: 25px;
}

.edit-mail-link {
    font-size: 19px;
    font-weight: 700;
    color: #3e2985;
    text-decoration: underline;
}

.buttonPrint {
    position: absolute;
    top: 30px;
    right: 43px;
}

.form-card-control {
    width: 265px;
    border-radius: 30px;
    padding-left: 30px;
    border-color: #999696 !important;
}

.form-card-control-long {
    border-radius: 30px;
    padding-left: 30px;
    border-color: #999696 !important;
}

.form-control::placeholder {
    color: rgba(0, 0, 0, .3);
    opacity: 1;
}

@media screen and (min-width: 768px) {
    .form-card-control {
        width: 330px !important;
    }

    .form-card-control-long {
        border-radius: 30px;
        padding-left: 30px;
        border-color: #999696 !important;
    }
}

.form-label {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    text-align: right;
}

.form-title {
    width: 450px;
}

.form-control {
    font-size: 20px;
    border-color: #999696 !important;
}

.dialling-code {
    width: 90px;
    height: 60px;
    border-radius: 30px;
    background-color: #fff;
}

.form-card-consent-section {
    margin-top: 40px;
}

.form-card-control-consent {
    font-size: 14px;
    line-height: 17px;
}

.form-text {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    text-align: center;
}

.form-text-bigger {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.register-summary {
    background-color: #3e2985;
    width: 760px;
    height: 95px;
    border-radius: 40px;
}

.register-summary-text {
    font-size: 24px;
    font-weight: 700;
    padding-left: 30px;
    color: #fff;
}

.register-summary-icon {
    font-size: 65px;
    padding-left: 15px;
    color: #fff;
}

/*Buttons*/

.register-button-icon {
    font-size: 50px;
    padding-left: 15px;
    color: #fff;
    transform: translateX(70%);
    opacity: 0;
    transition: opacity .5s ease-out, transform .5s ease-out;
}

.btn:hover .register-button-icon {
    display: inline-block;
    transform: translateX(0);
    opacity: 1;
}

.register-button-text {
    transform: translateX(20%);
    transition: transform .5s ease-out;
}

.btn:hover .register-button-text {
    transform: translateX(0);
}

#button-text-email-confirmed {
    transform: translateX(10%);
}

.btn:hover #button-text-email-confirmed {
    transform: translateX(0);
}

#button-text-confirm-phone {
    transform: translateX(35%);
}

.btn:hover #button-text-confirm-phone {
    transform: translateX(0);
}

#button-text-confirm-phone {
    transform: translateX(12%);
}

.btn:hover #button-text-confirm-phone {
    transform: translateX(0);
}

.btn-logout{
    margin: 0 !important;
    font-weight: bold;
    width: fit-content !important;
    min-width: 0 !important;
}
    .btn-logout:hover{
        background-color: none !important;
    }

.btn-round{
    background-color: var(--primary-pink);
    color: white;
    border-radius: 50%;
    border: none;
    font-size: 25px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-round:hover{
    background-color: #cf0270 ;
}

.form-code-container {
    margin-top: 40px;
}

.form-button {
    border-radius: 50px;
    font-weight: 700;
    padding-left: 35px;
    padding-right: 35px;
    justify-content: center;
}

.print-button {
    display: none;
    width: 73px;
    height: 49px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: 700;
    justify-content: center;
}

@media screen and (min-width: 768px) {
    .print-button {
        display: block;
    }
}

/*Icons*/

.doc-icon{
    font-size: 50px;
    color: var(--primary-pink);
}

.reservationContainer {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
}

.reservationBox {
    flex: 100%;
    border-radius: 20px;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
    margin: 17px 0 30px 0;
    padding: 10%;
    max-width: 75%;
}

@media screen and (min-width: 768px) {
    .reservationBox {
        margin: 17px auto 50px auto;
        display: flex;
        justify-content: space-evenly;
        width: calc(100% - 160px);
        padding: 10px 20px;
        height: auto;
    }
}

.summary-row {
    display: flex;
    justify-content: left;
}

@media screen and (min-width: 768px) {
    .summary-row {
        justify-content: center;
    }
}

.bi-person,
.bi-house {
    color: #3e2985;
    font-size: 40px;
    padding: 5px 20px 5px 0;
}

.bi-calendar {
    color: #3e2985;
    font-size: 35px;
    padding: 5px 20px 5px 0;
}

@media screen and (min-width: 768px) {

    .bi-person,
    .bi-house {
        font-size: 54px;
        padding: 0 10px 0 0;
    }

    .bi-calendar {
        font-size: 49px;
        padding: 0 10px 0 0;
    }
}

.termInfo {
    margin-top: 48px;
}

@media screen and (max-width: 768px) {

    .termInfo,
    .personalData {
        max-width: 320px;
        margin: auto;
        margin-bottom: 20px;
    }

    .confirmGrey {
        display: block;
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    .termInfo {
        margin-top: 0;
    }
}

@media screen and (min-width: 768px) {
    .responsive-space-between {
        justify-content: space-between;
    }
}

@media screen and (max-width: 768px) {
    .buttonContainer {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .buttonBoxLeft {
        position: absolute;
        top: -60px;
        left: 4%;
        padding: 0 !important;
        width: 100px;
    }

    .buttonBoxLeft .form-button {
        padding: 0;
    }

    .buttonBoxRight,
    .buttonBoxCancel {
        display: flex;
        justify-content: center;
        align-content: center;
    }

    .buttonBoxCancel {
        margin-top: 20px;
        order: 3;
    }
}

.buttonCancel {
    border: 3px solid #e6027c;
    border-radius: 50px;
    width: 260px;
    color: #e6027c;
}

.buttonCancel:hover {
    color: #cf0270;
    border: 3px solid #cf0270;
    border-radius: 50px;
}

@media screen and (min-width: 768px) {
    .buttonContainer {
        display: flex;
        width: 100%;
    }

    .buttonBoxLeft,
    .buttonBoxCancel {
        flex: 50%;
        display: flex;
        justify-content: left;
        padding-left: 120px;
    }

    .buttonBoxRight {
        flex: 50%;
        display: flex;
        justify-content: right;
        padding-right: 120px;
    }
}

.form-button-primary {
    background: #e6027c;
    border-color: #e6027c;
    color: #fff;
    font-size: 23px;
    width: fit-content;
    padding: 11px 51px;
}

.form-button-primary:hover {
    background-color: #cf0270;
    color: #fff;
}

.form-listbutton-primary {
    background: #e6027c;
    border-color: #e6027c;
    color: #fff;
    font-size: 16px;
    min-width: 150px;
}

.form-listbutton-primary:hover {
    background-color: #cf0270;
    color: #fff;
}

.form-button-secondary {
    background: #3e2985;
    border-color: #3e2985;
    color: #fff;
    font-size: 23px;
}

.form-button-secondary:hover {
    background-color: #3e2985;
    color: #fff;
}

.buttonViolet {
    background-color: #3e2985;
    color: #fff;
    font-size: 23px;
}

.form-button-back {
    color: #e6027c;
    font-weight: 900;
}

@media screen and (min-width: 768px) {
    .form-button-back {
        background: #dadada;
        border-color: #dadada;
        color: #000;
        font-size: 23px;
        font-weight: normal;
        text-align: center;
    }

    .form-button-back:hover {
        background-color: #c4c4c4;
    }
}

.form-button-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

.button-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: auto;
}

.form-button-icon-info {
    background-image: url("../img/Info.png");
}

.form-button-icon-checked {
    background-image: url("../img/Check Mark.png");
}

.form-button-icon-cancel {
    background-image: url("../img/Cancel.png");
}

.form-button-icon-edit {
    background-image: url("../img/Edit Pencil.png");
}

.form-button-container {
    margin-top: 60px;
}

.code-input {
    width: 88px;
    height: 60px;
    border-radius: 30px;
    text-align: center;
}

.form-check-label-text {
    font-weight: 500;
}

.summary-label {
    margin-left: 115px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.custom-checkbox {
    cursor: pointer;
}

.custom-checkbox i {
    font-size: 34px;
}

@media screen and (min-width: 768px) {
    html {
        font-size: 35px;
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
}

input[type=checkbox]:checked {
    accent-color: #e61e11;
}

a {
    color: #000;
    font-weight: 700;
    text-decoration-line: none;
}

a:hover {
    color: #e61e11;
}

.navbar-toggler-icon {
    filter: invert(88%) sepia(70%) saturate(4012%) hue-rotate(325deg) brightness(100%) contrast(94%);
}

.success-color {
    color: #008000;
}

.error-color {
    color: #f00;
}

.secondary-px {
    padding-left: 150px;
    padding-right: 150px;
}

.carousel {
    margin: 30px 0 0 0;
}

@media screen and (max-width: 768px) {
    .carousel {
        position: static;
        margin-bottom: 15px;
    }

    .carousel-item .row .col-4 {
        flex: 100%;
        margin-bottom: 15px;
    }

    .carouselItemBox {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }

    .carousel-item {
        margin: auto;
        position: static;
        display: block;
        transition: none !important;
        padding: 0 !important;
    }

    .carousel-control-prev,
    .carousel-control-next {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .carousel-inner {
        padding: 10px 0;
    }

    .carousel-item {
        height: 140px;
    }

    .carousel-px {
        padding: 0 100px !important;
    }

    carousel-indicators {
        margin-bottom: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .carousel-indicators {
        display: none !important;
    }
}

.block-card {
    width: 211px;
    height: 145px;
    margin: 0 19px;
    border-radius: 36px;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
    border: 0;
    font-size: 18px;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .carousel-terms {
        height: 210px;
    }
}

.carousel-px {
    padding: 0 150px;
}

.carousel-control-prev,
.carousel-control-next {
    padding-bottom: 58px;
}

.noBlocks {
    text-align: center;
    margin: 40px 0;
    color: #e6027c;
    font-weight: bold;
}

.invalid-feedback {
    text-align: center;
    font-size: 15px;
}

.block-body {
    padding: 15px 15px 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    Flex-direction: column;
    height: 100%;
}

.block-title {
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    flex: 25%;
}

.fw-bolder {
    flex: 25%;
    font-size: 17px;
    margin-top: 7px;
}

.doctorName {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}

.block_selected {
    background-color: #e6027c;
    color: #fff;
}

.ps-100 {
    padding-left: 100px;
}

.pe-100 {
    padding-right: 100px;
}

.px-50 {
    padding-left: 50px;
    padding-right: 50px;
}

.checkbox-big {
    width: 20px;
    height: 20px;
    border-color: #999696;
}

.checkbox-big:checked {
    background-color: #e6027c;
    border-color: #e6027c;
}

.check-card {
    background: #fff;
    border: 0;
    border-radius: 10px;
}

.res-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 100%;
    background: #fff;
    border: 0;
    padding: 15px;
    border-radius: 30px;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
    margin: 17px 0;
    max-width: 586px;
    position: relative;
}

@media screen and (min-width: 768px) {
    .res-card {
        width: 586px;
        margin: 0 0 23px 0;
        padding: 27px 32px;
    }
}

.res-card:hover {
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.res-card-actual:hover {
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.res-card-new {
    align-content: center;
    color: #3e2985;
    border: dashed 1px #3e2985;
}

.res-card-old {
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .1);
}

.res-card-old:hover {
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.resCardIcon {
    flex: 25%;
}

.bi-calendar-event {
    font-size: 30px;
    color: #3e2985;
}

@media screen and (min-width: 768px) {
    .bi-calendar-event {
        font-size: 60px;
    }
}

.resCardInfo {
    flex: 75%;
}

.arrowButton {
    display: flex;
    justify-content: right;
    align-items: center;
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 100;
}

@media screen and (min-width: 768px) {
    .arrowButton {
        position: static;
        justify-content: center;
    }

    .resCardIcon,
    .arrowButton {
        flex: 5%;
    }

    .resCardInfo {
        flex: 50%;
    }
}

.res-title {
    color: #3e2985;
    font-size: 18px;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .res-title {
        font-size: 20px;
    }
}

@media screen and (max-width: 768px) {
    .fw-normal {
        display: block;
    }
}

.res-title-old {
    color: #d3d3d3;
    font-size: 18px;
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .res-title-old {
        font-size: 20px;
    }
}

.reservationOverviewText {
    font-size: 20px;
    font-weight: 500;
    align-content: center;
    margin: 32px auto;
}

.res-text {
    font-size: 16px;
    font-weight: normal;
}

.res-text-bold {
    font-size: 16px;
    font-weight: bold;
}

.res-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3e2985;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 15px;
}

@media screen and (min-width: 768px) {
    .res-button {
        width: 45px;
        height: 45px;
        font-size: 24px;
    }
}

.res-button-white {
    background-color: #fff;
    border-radius: 50px;
    font-size: 24px;
}

.res-button-white:hover {
    background-color: #fff;
    box-shadow: 0 0 11px white;
}

.res-button:hover {
    background-color: #3e2985;
    color: #fff;
    box-shadow: 0 0 11px rgba(33, 33, 33, .2);
}

.warning-card {
    background: rgba(227, 148, 29, .2);
    border: 0;
    padding: 15px 15px;
    border-radius: 20px;
}

.warning-card {
    color: #9a8433;
    font-size: 20px;
    font-weight: bold;
}

.confirm-card {
    background: rgba(5, 148, 72, .2);
    border: 0;
    padding: 15px 15px;
    border-radius: 20px;
}

.confirm-card-x {
    background: rgba(255, 99, 71, .2);
    border: 0;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 585px;
}

.confirmX {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 10%;
    background-color: #fefefe;
    margin-right: 20px;
    border-radius: 10px;
}

.bi-x-lg {
    font-size: 40px;
}

.confirmXText {
    flex: 80%;
}

.confirm-title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 4px;
}

.confirmText {
    font-size: 19px;
    font-weight: 700;
}

.confirmGrey {
    color: #b4b2b2 !important;
}

.recomendationText {
    font-size: 19px;
}

.border-bottom-1-black {
    border-bottom: 1px solid #000;
}

.hyper-link {
    text-decoration: underline;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
}

.hyper-link:hover {
    text-decoration: underline;
    font-size: 18px;
    font-weight: normal;
    color: #696969;
}

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

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

.font-size-14 {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-18 {
    font-size: 18px;
}

.font-size-20 {
    font-size: 20px;
}

.alert {
    margin: 0 auto;
    text-align: center;
}

.xxx {
    all: unset;
}

.card-center-text {
    text-align: center;
    flex: 100%;
}

.only-print {
    display: none;
}

@media print {
    .only-print {
        display: block;
    }

    .no-print {
        display: none;
    }

    * {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 3px !important;
    }
}

.form-select-custom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 56px;
}

@media screen and (min-width: 768px) {
    .form-select-custom {
        margin-bottom: 34px;
    }
}

.form-summary {
    width: 400px;
    height: 64px;
}

.reservation-form {
    row-gap: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hx-calendar-day {
    font-weight: bold;
}

.hx-calendar-month-year-select select {
    font-weight: bold;
    border: 1px solid #d3d3d3 !important;
    border-radius: 10px;
}

.hx-calendar-month-year-select select option:disabled {
    text-decoration: line-through;
    color: #d3d3d3;
}

.formsContainer {
    margin-bottom: 24px;
}

.validation-message {
    display: none;
}

@media screen and (min-width: 768px) {
    .validation-message {
        flex: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #dc3545;
    }
}

@media screen and (max-width: 768px) {
    .invalid-feedback {
        display: none !important;
    }

    .formsBox {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        max-width: 320px !important;
    }

    .formBox {
        flex: 100%;
    }
}

.formBox {
    flex: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 768px) {
    .countryCode {
        max-width: 265px;
    }
}

.containerAgree {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    margin-bottom: 5px;
    padding: 0 15px;
}

@media screen and (min-width: 768px) {
    .containerAgree {
        min-width: 500px;
    }
}

.boxAgree {
    flex: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    font-size: 13px;
}

.boxAgree2 {
    flex: 90%;
    display: flex;
    flex-wrap: wrap;
    line-height: .8;
    margin-bottom: 0;
    padding-top: 7px;
    padding-left: 5px;
}

@media screen and (min-width: 768px) {
    .boxAgree {
        font-size: 15px;
    }
}

.boxCheckbox {
    flex: 10%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.reservation-form>:nth-last-child(2) {
    margin-bottom: 69px;
}

@media screen and (min-width: 768px) {
    .form-row {
        width: 744px;
    }

    .formsBox {
        margin-bottom: 26px;
    }

    .reservation-form>:nth-last-child(2) {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 768px) {
    .forms {
        margin-bottom: 13px;
        padding: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container,
    .container-fluid,
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm {
        padding: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    .smallSize {
        font-size: 13px;
    }
}

.consent-link:hover {
    color: #e6027c;
}

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

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

.card-responsive-width {
    width: 95%;
}

.hx-pager {
    justify-content: center;
    margin-top: 20px;
}

.hx-pager .page-item {
    margin: 0 4px;
}

.hx-pager .page-item.active .page-link {
    background-color: #3e2985;
    border-color: #3e2985;
    color: #fff;
}

.hx-pager .page-item.disabled .page-link {
    background-color: #dadada;
    border-color: #dadada;
    color: #fff;
}

.hx-pager .page-item .page-link {
    border-radius: 20px;
    border: 2px solid #3e2985;
    background-color: #fff;
    color: #3e2985;
    font-weight: bold;
    transition: all .2s ease;
}

.hx-pager .page-item .page-link:hover {
    background-color: #3e2985;
    border-color: #3e2985;
    color: #fff;
}

.invisible-btn {
    visibility: hidden;
    pointer-events: none;
}

.status-pending {
    color: #ffa500 !important;
}

.status-processed {
    color: #008000 !important;
}

.status-canceled {
    color: #f00 !important;
}

.nowrap {
    white-space: nowrap;
}

.grid-input {
    font-size: .875rem;
    height: 30px;
}

.center-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
}

.primary-color-text {
    color: #e6027c;
    font-weight: bold;
}

.user-name {
    color:black;
}