*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth !important;
}

.first_hr{
    display: flex;
    margin: 10% auto;
    border: solid 3px rgb(124, 191, 246);
    width: 90%;
}

/*-------------------------------------------styling header----------------------------------------- */

.header{
    display: block;
    height: 100vh;
    width: 100%;
    background-image: url(../images/heroimage.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: 100% 100%;
}

.top-header{
    display: flex;
    transform: scale(100%);
    align-items: center;
    padding-inline: 4px;
    justify-content: space-between;
    flex-direction: row;
    background-color: rgb(124, 191, 246);
    transition: 400ms ease-in-out;
}

.top-header.hide{
    transform: scale(0%);
    transition: 400ms ease-in-out;
}

.header .menu-nav.sticky{
    position: fixed;
    background-color: rgb(124, 191, 246); 
    z-index: 999;
    width: 100%;
    top: 0;
    transition: 300ms ease-in-out;
}

.top-header img{
    width: 90px;
    height: 100px;
    border-radius: 50%;
}

.top-header .search-bar .search_input_wrapper{
    position: relative;
    display: flex;
}

.top-header .search-bar .search_input_wrapper input{
    margin-left: -50px;

}


/*--------------------------------------styling search bar------------------------------------------*/

.top-header .search-bar button{
    font-size: clamp(12px,1.6rem,1.5vw);
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    background-color: #4162F7;
    border: none;
    outline: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 5px;
}

.top-header .search-bar input[type="search"]{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    width: min(150px,25vw);
    padding: 5px;
}

/*--------------------------------------styling registration icon------------------------------------------*/

.top-header .registration-connexion{
    display: flex;
    flex-direction: column;
    font-size: clamp(15px,1.6rem,1.5vw);
    color: white;
    padding: 0;
    margin: 0;
}

.top-header .registration_hover_ul{
    position: absolute;
    right: 0;
    top: calc(-100% - 60px);
    list-style-type: none;
    color: white;
}

.top-header .registration_hover_ul li a{
    text-decoration: none;
    color: white;
}

.top-header .registration_hover_ul li{
    background-color: rgb(124, 191, 246); 
    border-bottom: 1px solid lightgray;
    padding: 10px;
}

.top-header .registration_hover_ul li:hover{
    background-color: rgb(44, 123, 188);
    cursor: pointer; 
    transition: all 350ms;
}

.top-header .registration-connexion span{
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: center;
}
.top-header .registration-connexion p{
    margin: 0;
    padding: 0;
}


.top-header .registration-connexion label:hover .registration_hover_li_icon{
    cursor: pointer;
    color: #4162F7;
    transition: 500ms linear;
}

.top-header:has(input:checked) .registration_hover_ul{
    bottom: 0;
    top: 100%;
    padding: 0;
    margin: 0;
}

.top-header .registration-connexion label{
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transition: all 400ms;
}

.top-header:has(input:checked) .registration-connexion label{
    transform: rotate(90deg);
    transition: all 400ms;
}


/*--------------------------------------styling nav menu------------------------------------------*/

.header .menu-nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* background-color: rgb(67, 133, 220);   */
    background-color: transparent;  
    /* box-shadow: 0px 5px 5px rgb(67, 133, 220) ;   */
}

.menu-nav .menu li a:hover{
    box-shadow: inset 0px -4px 0px 0px rgba(163, 248, 255,0.8);
    color: rgba(163, 248, 255,0.8);
    transition: 300ms linear;
    height: 100%;
}

.menu-nav .menu li a.breadcrumb{
    box-shadow: inset 0px -4px 0px 0px rgba(163, 248, 255,0.8);
    color: rgba(163, 248, 255,0.8);
}

/*--------------------------------------styling mobile menu------------------------------------------*/

.header .menu-nav .hamburger-icon{
    padding-inline: 10px;
    font-size: clamp(18px,2.2rem,2.3vw);
    color: white;
    font-weight: 500;
}

.header .menu-nav .hamburger-icon:hover{
    transform: scale(1.4);
    color:rgba(163, 248, 255,0.8);
    cursor: pointer;
    transition: all 250ms linear;
}

.menu.mobile{
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding-left: 0;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    width: 100%;
    transition: 350ms linear;

}

.menu.mobile li{
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-basis: 30%;
    flex-shrink: 0;
}

.menu.mobile li a{
    display: flex;
    padding-bottom: 5px;
    font-size: clamp(13px,2.1rem,2.2vw);
    text-decoration: none;
    color: white;
}

.menu.mobile li a.show{
    font-size: clamp(13px,2.1rem,2.2vw);
    transition: 350ms linear;
}


.menu-nav:has(.mobile) .hamburger-icon{
    display: flex;
}

.menu-nav:has(.mobile) li a{
    width: 100%;
    font-size: 0vh;
}

/*--------------------------------------styling destop-menu------------------------------------------*/

.menu.desktop{
    display: flex;
    flex-direction: row;
    margin: 10px;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    width: 100%;
}

.menu-nav:has(.desktop) .hamburger-icon{
    display: none;
}

.menu.desktop li{
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-basis: 30%;
    flex-shrink: 0;
}

.menu.desktop li a{
    display: flex;
    padding-bottom: 5px;
    font-size: clamp(13px,2.1rem,2.2vw);
    text-decoration: none;
    color: white;
    transition: 350ms linear;
}

/*----------------------------------styling weather info containing div----------------------*/

.my_housing_weather{
    position: relative;
    margin-inline: 10%;
    display: grid;
    place-items: center;
    grid-template-rows: 1fr 3fr;
    min-height: 40vh;
}

.my_housing_weather h1{
    display: flex;
    margin: 5% auto;
    text-align: center;
}

.my_housing_weather .weather_wrapper_0{
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    grid-template-columns: 1fr 1fr;
}

.my_housing_weather .weather_wrapper_1{
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    grid-template-rows: 2fr 1fr;
}

.my_housing_weather .weather_wrapper_2{
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    grid-template-columns: 1fr 1fr;
}

.my_housing_weather .weather-picture{
    background-image: var(--image_url);
    background-color: rgb(111, 195, 244);
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}

.my_housing_weather .temperature{
    display: grid;
    place-content: center;
    width: 100%;
    font-size: clamp(18px,2.4rem,2.5vw);
}

.my_housing_weather .weather-type{
    display: grid;
    place-content: center;
    width: 100%;
    font-size: clamp(18px,2.4rem,2.5vw);
}

.my_housing_weather .weather_forecast_div{
    display: grid;
    height: 100%;
    width: 100%;
    place-items: center;
}

.my_housing_weather button{
    max-width: 80%;
    border-radius: 100vmax;
}

/*-----------------------------styling image gallery---------------------------------------*/

.my_housing_image_gallery .list_images li img{
    width: 100%;
    height:100%;
    object-fit: cover;
}

.my_housing_image_gallery .list_images{
    padding: 20px;
    margin: 0;
    display: grid;
    list-style-type: none;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 20px;
}


.my_housing_image_gallery .list_images li:nth-child(n + 5):nth-child(-n + 5){
    grid-column:span 2;
} 

.my_housing_image_gallery .list_images li:first-child{
    grid-column:span 2;
} 

.my_housing_image_gallery .list_images li:last-child{
    grid-column:span 3;
} 

.my_housing_image_gallery h1{
    display: grid;
    place-items: center;
    padding-bottom: 10%;
}


.my_housing_image_gallery .list_images li:nth-child(2n){
    opacity: 0;
    transform: translateX(-100%);
    transition: all 850ms ease;
}

.my_housing_image_gallery .list_images li:nth-child(2n).showit{
    opacity: 1;
    transform: translateX(0%);
    transition: all 850ms ease;
}

.my_housing_image_gallery .list_images:has(img:hover) img:not(:hover){
    opacity:0.5;
    transition: all 850ms ease;
}



/*----------------Styling reservation section--------------------*/

.my_housing_reservation{
    display: grid;
    grid-template-rows: auto auto 1fr 1fr 0.5fr 0.5fr;
    gap: 1rem;
    place-items: center;
}

.my_housing_reservation .customer_pricing_info{
    display: flex;
    width: 80%;
    font-size: clamp(18px,2.4rem,2.5vw);
    flex-direction: column;
    border: 2px solid rgb(43, 144, 226);
    border-radius: 6px;
    text-align: justify;
    padding: 20px;
    margin: 20px;
}

.my_housing_reservation .customer_pricing_info .highlight{
    font-size: 1.6rem;
    color: red;
}

.my_housing_reservation .customer_pricing_info p::first-letter{
    font-size: larger;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: rgb(26, 167, 232);
}

.my_housing_reservation .customer_pricing_info .rental_price{
    background-color: rgb(238, 242, 184);
    padding: 10px;
    border-radius: 5px;
    border: 2px solid gold;
}

.my_housing_reservation .transportation_detail_wrapper{
    display: grid;
    place-items: center;
    grid-template-rows: auto 1fr;
    gap: 1.5rem;
}

.my_housing_reservation .transportation_detail_wrapper h2{
    display: grid;
    place-items: center;
}

.my_housing_reservation .transportation_detail_wrapper2{
    display: grid;
    place-items: center;
    margin-inline: 0.5rem;
    grid-template-columns: 1fr 2fr 1fr;
    padding-bottom: 2.5rem;
}

.my_housing_reservation .transportation_detail_wrapper .transportation_description{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: white;
    padding-left: 5px;
    font-size: clamp(18px,2.4rem,2.5vw);
    font-family: Georgia, 'Times New Roman', Times, serif;
    background: rgb(37, 109, 176);
    border-radius: 10px;
}

.my_housing_reservation .transportation_details{
    background-image: url(../images/private_service_car.jpg);
    border-radius: 10px;
    background-size: 100% 100%;
    box-shadow: 5px 5px 5px 5px rgb(211, 218, 226);
    object-fit: contain;
    height: max(400px,40vw);
    width: max(320px,50vw);
    margin-bottom: 2rem;
    animation: opacityChange 10s linear;
    animation-timeline: view();
}

.my_housing_reservation .transportation_details::before{
    display: grid;
    place-items: center;
    content:"New!";
    position: absolute;
    border-radius: 50%;
    width: fit-content;
    aspect-ratio: 1/1;
    font-size: clamp(15px,2.2rem,2.3vw);
    background-color: rgba(255, 255, 0, 1);
    opacity: 1;
    transform: rotate(-45deg) translate(10%,-75%);
    transform-origin: center;
    padding: 10px;
}


.my_housing_reservation .reservation_date{
    background-image: url(../images/plage_et_parasole.jpg);
    background-size: 100% 100%;
    object-fit: cover;
    min-width: fit-content;
    width: 100%;
    /* padding-inline: 10px; */
    height: 100%;
}

.my_housing_reservation .reservation_date h2{
    display: grid;
    font-size: clamp(15px,2.2rem,2.3vw);
    place-items: center;
    padding: 1rem;
    background-color: aliceblue;
}

.my_housing_reservation .reservation_date form{
    display: grid;
    height: 100%;
    grid-template-rows: 2fr 1fr;
    gap: 1rem;
}

.my_housing_reservation form .column_dir{
    display: grid;
    place-items: center;
    gap: 2rem;
    grid-template-columns: repeat(2,1fr);
}

.my_housing_reservation form .row_dir{
    display: grid;
    place-items: center;
    font-size: clamp(18px,2.4rem,2.5vw);
    gap: 2rem;
    grid-template-rows: repeat(2,1fr);
}

.my_housing_reservation form .row_dir label{
    background-color: white;
    border-radius: 10px;    
    padding: 5px;
}

.my_housing_reservation form .center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.my_housing_reservation form .center button{
    padding: 10px 20px;
    border-radius: 100vmax;
    font-size:clamp(15px,2.2rem,2.3vw);
}

.my_housing_reservation .transportation_prices{
    display: flex;
    border-radius: 10px;
    background: linear-gradient(45deg,rgb(0,212,255), rgb(181, 223, 237), rgb(188, 227, 239));
}

.my_housing_reservation .transportation_prices button{
    margin: 5px;
    border-radius: 100vmax;
}

.my_housing_reservation .transportation_prices form{
    display: flex;
    justify-content:space-between;
    text-align: center;
    align-items: center;
    flex-direction: column;
    font-size: clamp(15px,2.2rem,2.3vw);
    flex-grow: 1;
    flex-basis: 100%;
    flex-shrink: 0;
}

.my_housing_reservation .transportation_prices form label{
    display: grid;
    justify-items: center;
}

.my_housing_reservation .transportation_prices input[type="radio"] {
    appearance: none;
    border-radius: 50%;
    height: 1.6rem;  /* size */
    aspect-ratio: 1;
    padding: .1rem;  /* gap */
    color: rgb(18, 141, 223); /* color */
    border: 2px solid;
    cursor: pointer;
    transition: 0.2s;
  }
  .my_housing_reservation .transportation_prices input[type="radio"]:checked {
    background: currentColor content-box;
  }

  .my_housing_reservation .reservation_calendar {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 2rem;
  }

  .my_housing_reservation .reservation_calendar::before{
    content:"Reservé";
    display: list-item;
    color: black;
    list-style-image: radial-gradient(circle closest-side,rgb(220, 75, 75) 90%,#0000);
    position: absolute;
    bottom: -30%;
    left: 10%;
  }

  .my_housing_reservation .reservation_calendar::after{
    content:"Aujourd'hui";
    display: list-item;
    color: black;
    list-style-image: radial-gradient(circle closest-side,rgb(124, 182, 227) 90%,#0000);
    position: absolute;
    bottom: -30%;
    right: 10%;
  }

  .my_housing_reservation .reservation_calendar .bi-arrow-left-circle{
    position: absolute;
    left: 0;
    top: 50%;
    margin: 0 -2rem;
    transform: translate(-100%,0);
  }

  .my_housing_reservation .reservation_calendar .bi-arrow-right-circle{
    position: absolute;
    margin: 0 -2rem;
    right: 0;
    top: 50%;
    transform: translate(100%,0);

  }


  .my_housing_reservation .reservation_calendar i{
    cursor: pointer;
}

.my_housing_reservation .reservation_calendar i:hover{
    color:#4162F7;
}


  .my_housing_reservation .reservation_calendar .dateWrapperDiv{
    display: flex;
    flex-direction: column;
  }

  .my_housing_reservation .reservation_calendar .dateWrapperDiv p{
    display: grid;
    place-items: center;
  }

  .my_housing_reservation .reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0.5rem;
  }

  .my_housing_reservation .reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv .inactive_days{
    color: rgba(97, 103, 103, 0.8);
  }

  .my_housing_reservation .reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv span{
    text-align: center;
  }


  .my_housing_reservation .reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv .active_day{
    background-color: rgba(159, 230, 221, 0.8);
    min-height: 1lh;
    aspect-ratio: 1;
    border-radius: 50%;
  }

  .my_housing_reservation .reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv .reserved_days{
    background-color: rgba(220, 27, 14, 0.8);
    min-height: 1lh;
    aspect-ratio: 1;
    border-radius: 50%;
  }


  .my_housing_reservation .reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv .dateSpanWeekDays_class{
    color:blue;
    font-family: monospace;
  }

    .my_housing_reservation .reservation_details{
    display: grid;
    width: 100%;
    text-align: center;
    margin: 5rem 0;
  }

  .my_housing_reservation .reservation_details .details_recap{
    display: flex;
    font-size: clamp(15px,2.2rem,2.3vw);
    flex-direction: column;
    padding-inline: 10px;
    gap: 2rem;
    width: 100%;
  }

  .my_housing_reservation .reservation_details .details_recap form{
    display: flex;
    flex-direction: column;
    /* flex: 1 0 100%; */
    align-items: center;
    gap: 0.5rem;
  }

  .my_housing_reservation .reservation_details .details_recap form table th{
    background: rgb(18, 141, 223);
    color: white;

  }

  .my_housing_reservation .reservation_details .details_recap form button{
    display: grid;
    place-content: center;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    justify-content: space-around;
    border-radius: 100vmax;
  }

/*------styling details section table------*/

.my_housing_reservation .reservation_details .details_recap form table{
    width: 80%;;
}
.my_housing_reservation .reservation_details .details_recap form table input{
    padding: 1px;
    font-size: 12px;
}

.my_housing_reservation .reservation_details .details_recap.changing_res input[type="date"]{
    position: relative;
    padding: 0 0 15px 0;
}

.my_housing_reservation .reservation_details .details_recap.changing_res input[type="date"]::-webkit-datetime-edit-fields-wrapper{
    padding:1px;
    border: 1px solid rgb(19, 0, 128);
    border-radius: 5px;
}
.my_housing_reservation .reservation_details .details_recap.changing_res input[type="date"]::-webkit-calendar-picker-indicator{
    position:absolute;
    font-size: 0.8rem;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 0;
}

.my_housing_reservation .reservation_details .details_recap.changing_res td button{
    border: none;
    outline: none;
    margin-inline: auto;
    background: transparent;
    border-radius:100vmax;

}

/*-----------Styling date picker-------------------*/

input[type="date"]{
    border-radius: 8px;
    border: none;
}

input[type="date"]#arrival_date::-webkit-datetime-edit{
    padding: 5px;
    color: rgb(19, 0, 128);
}

input[type="date"]::-webkit-datetime-edit{
    padding: 5px;
    cursor: pointer;
    color: green;
}

input[type="date"]#arrival_date::-webkit-datetime-edit-fields-wrapper{
    padding: 5px;
    border: 2px solid rgb(19, 0, 128);
    border-radius: 5px;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper{
    padding: 5px;
    border: 2px solid green;
    border-radius: 5px;
}

input[type="date"]::-webkit-datetime-edit-text{
    padding-inline: 5px;
}

input[type="date"]::-webkit-calendar-picker-indicator{
    padding-inline: 5px;
    cursor: pointer;
}


/*------------------styling footer-----------------------------------*/

section.my_housing_footer{
    position: relative;
    bottom: 0;
    inset: auto auto 0 0;
    height: fit-content;
    max-width: 100vw;
}

.menu_list {
    list-style: none;
}

.menu_list a{
    text-decoration: none;
}

.menu_footer{
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 30px 0;
}

.menu_footer .menu{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    padding: 0;
    margin: 0;
}

.menu_footer p a{
    text-decoration: none;
    font-weight: 500;
}

.menu_list {
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 500;
}

.social_icon_link, .menu_link {
    font-size: clamp(15px,2.2rem,2.3vw);
    color: rgb(18, 141, 223) ;
    margin: 0 10px;
    display: inline-block;
    transition: 0.5s;
}

.menu_link:hover, .social_icon_link:hover{
	transform: scale(1.3);
}

.footer p {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 300;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  background: url("../images/blue-waves.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


/*-----styling waving div------*/

.wave#wave1 {
  opacity: 1;
  bottom: 0;
  animation: animateWaves 12s linear alternate infinite;
}

.wave#wave2 {
  opacity: 0.5;
  bottom: 0;
  animation: animate 10s ease-in-out infinite alternate !important;
}

.wave#wave3 {
  opacity: 0.2;
  bottom: 0;
  animation: animateWaves 8s linear alternate infinite;
}

.wave#wave4 {
  opacity: 0.7;
  bottom: 0;
  animation: animate 6s linear infinite alternate;
}



/*----------------------------keyframe-----------------------------*/


@keyframes opacityChange{
    0%{
        transform: scale(0.6);
        opacity: 0.8;
    }

    100%{
        transform: scale(0.8);
        opacity: 1 ;
    }
}

@keyframes animateWaves {
    0% {
      background-position-x: 100vw;
    }
    100% {
      background-positon-x: -100vw;
    }
  }
  
  @keyframes animate {
    100% {
      background-position-x: -100vw;
    }
    0% {
      background-positon-x: 100vw;
    }
  }

/*--------------------media-sceen mobile styling-------*/

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

    main .my_housing_reservation h2{
        display: flex;
        text-align: center;
    }

    .top-header .registration-connexion{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .top-header .registration-connexion p{
        margin: 0;
        padding: 0;
    }

    main .my_housing_reservation .transportation_detail_wrapper2{
        display: grid;
        place-items: center;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .my_housing_reservation{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.1fr auto 2fr 1fr auto;
        gap: 1rem;
        place-items: center;
    }

    .my_housing_reservation .reservation_date form .column_dir {
        display: grid;
        place-items: center;
        gap: 2rem;
        grid-template-columns: repeat(1, 1fr);
    }
}

/*-----------------styling confirmation.php---------------------*/

.confirmation_form{
    margin-top: 2rem;
}

.confirmation_form .confirmation_div h1.new_registration_h1{
    display: grid;
    place-items: center;
}

.confirmation_div .customer_personnal, .confirmation_div .customer_place{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.confirmation_div .customer_personnal input, .confirmation_div .customer_place input{
    padding: 5px;
    border-radius: 5px;
    border: 3px solid rgb(18, 141, 223) ;
}

.confirmation_div .customer_personnal input:focus, .confirmation_div .customer_place input:focus{
    outline: 2px solid rgb(135, 213, 235) ;
    border: 2px solid rgb(135, 213, 235) ;
    box-shadow: 3px 3px 3px 1px rgb(135, 213, 235);
}

.confirmation_div input[type="date"]::-webkit-datetime-edit, .confirmation_div input[type="date"]::-webkit-datetime-edit-fields-wrapper{
    padding: 5px;
    border: 2px solid rgb(18, 141, 223);
    border-radius: 5px;
}

.confirmation_div input[type="date"]::-webkit-datetime-edit{
    border: none;
    color: currentColor;
}

.confirmation_div label{
    display: flex;
    width: fit-content;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.confirmation_div form{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
    gap:1.2rem;
}

.confirmation_div #country_selection{
    width: 100%;
    padding: 5px;
    border: 3px solid rgb(18, 141, 223);
    border-radius: 5px;
}

.confirmation_div #country_selection:focus{
    outline: 2px solid rgb(135, 213, 235) ;
    border: 2px solid rgb(135, 213, 235) ;
    box-shadow: 3px 3px 3px 1px rgb(135, 213, 235);
}

#aligning_div{
    position: relative;
}

.countryCodeSpan{
    position: absolute;
    transform: translateX(-100%);
    display: grid;
    border: 3px solid rgb(18, 141, 223);
    border-radius: 5px;
    margin-inline: 4px;
    width: 7ch;
    height: 100%;
    place-items: center;
    left: 0;
    bottom: 0;
}

input#customer_phone{
    margin-right: calc(-7ch);
}



/*-----------------styling registration form--------------*/


main .sign_in_registration{
    display: flex;
    flex-direction: column;
    align-items: center;
}

main .sign_in_registration .sign_in_wrapper{
    display: flex;
    flex-direction: column;
    padding: max(10vw,15px);
    align-items: center;
    gap: 1rem;
    border: 3px solid rgb(18, 141, 223);
    border-radius: 5px;
}

main .sign_in_registration .sign_in_wrapper input{
    padding: 5px;
    border-radius: 5px;
    border: 3px solid rgb(18, 141, 223) ;
}

main .sign_in_registration .sign_in_wrapper input:focus{
    outline: 2px solid rgb(135, 213, 235) ;
    border: 2px solid rgb(135, 213, 235) ;
    box-shadow: 3px 3px 3px 1px rgb(135, 213, 235);
}

/*-------------------styling myaccount.php------------------*/

main.myaccount_main{
    display: grid;
    grid-template-columns: 25% 75%;
    font-size: clamp(14px,2.2rem,2.3vw);
}

hr.myaccount_hr{
    border: 3px solid lightblue;
    padding: 0;
    margin:0;
}

main aside.my_reservation_aside{
    height: 30vh;
    background-color: #4162F7;
}

main.myaccount_main .myreservation_section{
    text-align: center;

}

.myaccount_main .myreservation_section .details_recap{
    display: flex;
    font-size: clamp(10px,2rem,2vw);
    flex-direction: column;
    padding-inline: 10px;
    gap: 2rem;
    width: 100%;
  }

.myaccount_main .myreservation_section .details_recap form{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    }

.myaccount_main .myreservation_section .details_recap form input{
    display: block;
    width: 100%;
}

.myaccount_main .myreservation_section .details_recap form table{
    table-layout: fixed;
}


.myaccount_main .myreservation_section .details_recap form table th{
    background: rgb(18, 141, 223);
    color: white;
}

.myaccount_main .myreservation_section .details_recap form table td{
    padding: 0.1rem;
}


main aside.my_reservation_aside ul.myreservation_menu_ul{
    background-color: #7486d5;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

main aside.my_reservation_aside ul.myreservation_menu_ul li{
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    justify-content: center;
    height: 2rem;
    border-bottom: 1px solid lightgray;
    padding: 1.5rem 0;
}

main aside.my_reservation_aside ul.myreservation_menu_ul li:hover{
    background-color: #233480;
    cursor: pointer;
}

main aside.my_reservation_aside ul.myreservation_menu_ul li a{
    width: 100%;
    text-decoration: none;
    color: white;
}

main aside.my_reservation_aside ul.myreservation_menu_ul li.active_myaccount_li{
    background-color: #233480;
}

.myaccount_main .myreservation_section .details_recap form table input{
    padding: 1px;
    font-size: 12px;
}

/*---------------------styling visit counter notif bar--------------------------*/

.notificationBar{
    display:flex;
    position: fixed;
    top: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 10%;
    background: hsl(182, 25%, 50%);
    animation: notifBarMovement 6s steps(50) forwards;
    overflow: hidden;    
}
 
.notificationBar p{
    position: relative;
    display:flex;
    justify-content: center;
    color:white;
    margin: 0  auto;
    opacity: 0;
    white-space: nowrap;
    letter-spacing: .15em;
    font-size: clamp(12px,0.9rem,0.9vw);
    animation: showNumber 2s steps(20) forwards ; 
    overflow: hidden;    
    animation-delay:2s
}
 
@keyframes notifBarMovement{
    0%{
         width: 0;
      }
    30%{
        width:250px;
    }
    60%{
        width:250px;
        }
    90%{
        width:250px;
        }
    100%{
        width:250px;
        display: none;
    }
}

@keyframes showNumber{
    0%{
        opacity:0;
        width: 0px;
      }
  100%{
        opacity:1; 
        width : 230px;
      }
}