.panel-break {
    width: 95%;

}

.border-panel {
    border: #eee solid 1.5px;
    border-width: 1.5px 0;
    margin: 10px;
}

/* General styling */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;600&display=swap');

:root {
    --background-color: #FFF;
    --ff-header: 'Bebas Neue', sans-serif;
    --ff-text: 'Montserrat', sans-serif;

    --ff-profile: 'Van Basten Bold', sans-serif;
    --btn-secondary: #a1a1a1;
    --carousel-height: 70vh;

}

/* Typography */
.header {
    font-family: var(--ff-header);
    font-size: 2.7rem;
    position: relative;
}

.header::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    width: 40%;
    height: 20%;
    color: black;
    background: #000;
}


body {
    font-family: var(--ff-text);
}

/* FORM CONTROL */

/* INPUT */
.form-control {
    border-radius: 0;
    border: 0.5px solid #0000005c !important;
    /* padding: .90rem .75rem; */
    margin-bottom: 10px;
    line-height: 2rem;
    /* max-width: 350px; I'll put this back when I add the responsivness */
}

.form-control:focus {
    box-shadow: none;
}

/* different font family for normal text and montserrat for heading */

/* Accordion */
.accordion-item {
    border: none !important;
    border-radius: 0 !important;

}

.accordion-button:not(.collapsed) {
    color: #000;
    background-color: #fff;
}

.accordion-button:focus {
    border: none !important;
    box-shadow: none !important;
}

/* MENU */



#reserveSlotModal .modal-content {
    width: 100%;
}

.form-group {
    position: relative;
}

.form-group>label,
.card-details label {
    position: absolute;
    font-size: 0.7em !important;
    margin: 1px 10px;
    top: -9999px;
    transition: opacity .2s ease-in;
    opacity: 0;
}

.form-group>select:focus-within~label,
.form-group>input:focus-within~label,
.card-details input:focus-within~label {
    opacity: 1;
    top: -20%;
    background: white;
}

/* #newCustomer .form-group input,
#newCustomer .form-group select,
#newCustomer .form-group textarea,
#loginModal .form-group input {
    padding: .90rem .75rem; 
} */

#newCustomer .form-group select {
    height: 100%;
}


.total input[readonly] {
    padding: 1px 15px;
    margin: 0 !important;
    border: none !important;
    cursor: default;
    text-align: end;
    width: 100%;
}

.total input[readonly]:focus-visible {
    outline: none;
}

#newCustomer .quick-reserve,
#newCustomer .full-reserve {
    padding: 1% 2%;
    margin-bottom: 2%;
    box-shadow: #00000012 4px 5px 9px 4px;
}

#newCustomer .quick-reserve-final-payments p,
#newCustomer .cart_total p {
    margin-bottom: 0;
    margin-top: 0;

}



#newCustomer .modal-header,
.modal-footer {
    padding: 0;
    border: none !important;
}


#newCustomer .payment-details p {
    font-weight: normal;
}

/* BTN */
.btn {
    /* padding: .90rem .75rem; */
    border-radius: 0 !important;
    /* max-width: 350px; */
}

.btn:focus,.btn:active:focus{
    box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 50%);
}

/* Button primary */
*.btn-primary,
*.btn-success,
input::file-selector-button {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;

}

*.btn-primary:hover,
*.btn-success:hover,
*.btn-primary:focus,
*.btn-success:focus {
    background: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}

*.btn-primary[disabled]:hover,
*.btn-success[disabled]:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    cursor: not-allowed !important;
}

/* Button inverse */
button.btn-inverse,
a.btn-inverse {
    background: #000;
    color: #fff;
    border-color: #000;

}

button.btn-inverse:hover,
a.btn-inverse:hover {
    background: #fff;
    color: #000;
    border-color: #000
}

/* Button  secondary*/
.btn-secondary
{
    background: #fff;
    color: var(--btn-secondary);
    border: 1px solid var(--btn-secondary);

}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    color: #000 !important;
    background: #fff;
    border: 1px solid #000;
}

/* utitlity */

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

.br-0 {
    border-radius: 0;
}

.checkout-grid {
    display: grid;

    grid-template-rows: auto auto auto;
    grid-template-columns: 60% 40%;
    grid-template-areas: "checkout checkout"
        "total total"
        "card card";
    grid-row-gap: 3rem;

    /* grid-template-areas:"chec" */
}

.checkout {
    grid-area: checkout;
}

.total {
    grid-area: total;
}

.card {
    grid-area: card;
}

/* Profile section */

.profile {
    display: grid;
    grid-template-areas:
        "img text"
        "img small";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 40% auto;

}

.profile img {
    grid-area: img;
    clip-path: circle(35% at 50% 40%);
    width: 100%;
}

.profile h4 {
    font-family: var(--ff-profile);
    grid-area: text;
    font-size: 1.6em;
    align-self: center;

}

.profile small {
    grid-area: small;
}

.profile h4::before {
    content: 'Hello '
}

.profile h4::after {
    content: '!'
}


/* Sessions page */

.li-photo-sessions-month:last-of-type {
    padding-bottom: 20px;
}

/* TIME SLOTS */
.time-slots {
    display: block !important;
    column-count: 3 !important;
    column-gap: 0 !important;
}

.time-slots .time-slot {
    max-width: 250px;
    font-size: .7rem;
}

.time-slots .time-slot:first-of-type {
    margin-top: 0 !important;
}

.time-slot.active {
    font-weight: bold;
    border: solid 2px #000 !important;
}

.time-slot.disabled {
    cursor: not-allowed;
    color: lightgray;
    border-color: lightgray !important;
}

/* Utility */
.close {
    position: absolute;
    top: 1%;
    right: 0;
}


.w-40 {
    width: 40%;

}

.mx-100 {
    max-width: 100%;
}

.mw-center {
    max-width: 100%;
    margin: 0 auto;
}

.h-100 {
    height: 100%;
}


.h-100vh {
    min-height: 100vh;
}

.h-min {
    height: min-content;
}

.equal-col-spacing [class*="col-"] {
    padding-right: 0;
}

.flex-baseline {
    display: flex;
    align-items: baseline;
}

.flex-justify-end {
    display: flex;
    justify-content: end;
}
.h100vh{
    height: 100vh;
}
.blue {
    color: blue;
}

.red,
.req {
    color: red;

}
.no-before::before{
    display: none !important;
}
.font-header{
    font-family: var(--ff-header);
}

.equal-col-spacing [class*="col-"] {
    padding-right: 0;
}

.orange {
    color: orange;
}

.accordion-button:not(.collapsed)::after {
    filter: grayscale(1);
}

.form-check-input:checked {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25) !important;
    border-color: black;
}

a,
a:hover,
a:visited,
a:focus,
a:active {
    color: #000;
}

.thank-you {
/*    background: url(https://www.enchanted.media/wp-content/uploads/2021/10/Free-Confetti-Effect-Overlay-Gold-Transparent.png);*/
    background-position: 50% 228%;
    background-repeat: no-repeat;

}
/* Gallery  */
.img-gallery {
    /* Prevent vertical gaps */
    line-height: 0;

    -webkit-column-count: 3                          ;
    -webkit-column-gap: 0px;
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    column-count: 3;
    column-gap: 5px;
}

.img-gallery img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
    margin: 2.5px 0;
}
/* OFF CANVAS */
.offcanvas-end {
    width: 100%;
}
.offcanvas img{
    object-fit: contain;
}
.swap-active{
    background-color: #000;
    color: #fff;
}
.swap-content .border-panel{
    margin: 0;
}


body {
    margin: 0;
    padding: 0;
}






/* Gallery Cards */

.gallery-card h5 {
    position: absolute;
    top: 5%;
    left: 5%;
    color: #000;
}

.gallery-card:hover {
    color: #000;
}

.gallery-card:hover {
    box-shadow: 0px 0px 13px 2px #0000004d !important;
    transition: box-shadow .4s ease-in-out;
}

.img-card {
    position: relative;
}

.top-bar {
    position: absolute;
    display: flex;
    width: 100%;
    background: transparent;
    align-items: baseline;
    min-height: min-content;
    justify-content: flex-end;
    top: 0;
    transition: opacity ease-in-out .5s;
}


.top-bar * {
    margin: 10px;
}

.img-card:hover>.top-bar {
    opacity: 1;
}
/* CART */

.cart-section-title {
    position: relative;
}

.cart-section-title::after {
    content: '';
    display: block;
    height: 3px;
    width: 50%;
    left: 0;
    background: #00000057;
    align-items: flex-start;
}
#cart .border-panel, .checkout .border-panel {
    margin: 0;
}


/* CAROUSEL */

.img-wrapper {
    height: var(--carousel-height);
    display: flex;
}

.carousel-inner img {
    height: var(--carousel-height);
    object-fit: contain;
}
.carousel {
    height: var(--carousel-height);
}

.carousel-inner {
    height: var(--carousel-height);

    display: flex;

    align-items: flex-start;
}

.carousel-item.active {
    display: flex !important;
    justify-content: center;
}

.carousel-indicators button {
    height: 7rem !important;
    width: 20% !important;
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: -20vh;
    width: 100%;
    margin: 0;
    z-index: 2;
    display: flex;
    justify-content: space-evenly;
}

/* IMAGE MODAL */



#bigImage .modal-content {
    background-color: transparent;
    border: none;
}

#bigImage .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 70vh;
}

#bigImage img {
    height: 100%;
    max-height: 70vh;
    object-fit: contain;
}

/*MEDIA QEURIES */
@media (min-width: 310px) {
    :root{
        --carousel-height: 80vh;
    }

}
/* Large devices (tabelets, 768px and up) */
@media (min-width: 768px) {
    .w-md-50 {
        width: 50% !important;
    }
    .offcanvas-end {
        width: 45% !important;
    }
    body >.container {
        margin-left: calc(10% - 55px);
        margin-right :calc(10% - 55px);
        transition:  .5s ease-in-out;
        transition-property: margin, width;
    }
    :root{
        --carousel-height: 70vh !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .checkout-grid {
        grid-template-areas: "checkout total""card total";
        grid-gap: 3rem;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .time-slots {
        display: block !important;
        column-count: 4 !important;
    }

    .profile {
        grid-template-columns: 20% auto;

    }
    
}

/*  X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .time-slots {
        display: block !important;
        column-count: 5 !important;
    }
    .offcanvas-end {
        width: 34% !important;
    }
    body>.container.shrink {
        width: 65% !important;
        margin-left: 1% !important;
        }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    body >.container {
        margin-left: auto;
        margin-right :auto;
        transition:  .5s ease-in-out;
        transition-property: margin, width;
    }
    .offcanvas-end {
        width: 29% !important;
    }
    body>.container.shrink {
    width: 70% !important;
    margin-left: 1% !important;
    }

}
@media (min-width: 2156px) {
    .offcanvas-end {
        width: 29% !important;
    }
    body>.container.shrink {
    width: 70% !important;
    margin-left: 10% !important;
    }

}

/* MEDIA QUERIES FOR GALlERY */
@media (min-width: 310px) {
    .img-gallery {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
    :root{
        --carousel-height: 80vh;
    }

}
@media (min-width: 800px) {
    .img-gallery {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
   
}
@media (min-width: 1000px) {
    .img-gallery {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media (min-width: 1200px) {
    .img-gallery {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}




/*new rp css*/

.total + .card {
    padding: 43px 30px 40px 20px !important;
}

.total + .card input.form-control {
    max-width: 100%;
}

.card-details .form-group.col-md-12 {
    margin-bottom: 2px;
}

.deposit_payment_section.col-12 input.form-control {
    max-width: 100%;
}

.deposit_payment_section.col-12 input#apply_coupon_button {
    /* height: 46px; */
    padding: 6px 10px !important;
}

.deposit_payment_section.col-12 {
    padding: 0;
}

div#carouselExampleIndicators i.fa-regular.fa-heart {
    position: absolute;
    right: 0;
    z-index: 22;
}

main.select-gallery button.btn.btn-primary.btn-lg.float-end.mt-4 {
    padding: 8px 16px !important;
    margin-top: 1.5rem!important;
    z-index: 2;
    position: relative;
}

.img-gallery {
    width: 100%;
    column-count: 4;
    column-gap: 4px;
}