/* Check Availability Page Start */
.check-availability-page .logo {
    max-height: 150px;
    padding: 5px;
}

.check-availability-page .logo img {
    max-height: 120px;
    max-width: 100%;
}

.check-availability-page #output {
    max-width: 400px;
    border: 1px solid #cccccc;
}

.check-availability-page #output img {
    max-width: 48px;
    max-height: 48px;
}

.check-availability-page .booking_label {
    float: none;
    display: block;
    width: 100%;
}

.check-availability-page h2 {
    padding: 10px;
    margin: 0;
}

.check-availability-page {
    max-width: 900px;
    margin: 0 auto;
}

.check-availability-page .pet_details .form-select {
    box-sizing: border-box;
}

.check-availability-page input[type="button"],
.check-availability-page input[type="submit"] {
    width: auto;
}

/* Flatpickr edits */

.flatpickr-calendar span {
    width: auto;
    margin: 0;
    padding-bottom: 0;
}

/* Check Availability Page End*/

/* Choices.js library modifications */
/* Below makes the dropdown list width 100% */
.choices__list[role="listbox"],.choices__item,.choices {
    width: 100% !important;
}

.container section {
    list-style-type: none;
}

body {
    font-family: 'Helvetica Light','Helvetica Neue',Helvetica,Arial,sans-serif;
    margin: 0px;  /**/
}

.logo {
    background-color: #ffffff;
    font-style: italic;
    margin: 10px 0 15px;
    min-height: 0;
    max-height: 150px;
    padding: 5px;
    margin-right:5px;
    margin-left:5px;
    border-radius:0.25em;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-width: 100%;
    max-height: 150px;
}


.new_online_bookings_availability_form, .booking_details {
    padding: 0 0 20px;
    position: relative;
    letter-spacing: 0.01em;
    margin: 0 auto 10px;

}

.wrapper {
    overflow:hidden;
    border: 1px solid #cccccc;
    border-radius: .5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    min-height: 97vh;
    background-color: #f5f5f5;
    opacity: .8;
    margin-top: 5px;  }


.booking_header {
    border-bottom: 1px dotted #cccccc;
    clear: both;
    margin: 0 0 5px;
    padding: 1% 1em;
}

.booking_header h2 {
    font-style: normal;
    font-weight: normal;
    clear: left;
    margin: 10px auto 5px auto;
    float: left;
    width: 100%;
}


.menu {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
}

.menu_icon {
    float: right;
    font-style: normal;
    padding-right: 10px;
}

.menu_icon::after {
    clear: both;
}

.menu td {
    background-color: #F2F7FD;
    border: 1px solid #3498db;
    border-radius: 4px;
    box-shadow: none;
    cursor: pointer;
    line-height: 1.42857;
    padding: 6px 12px;
    margin-bottom: 1px;
    white-space: nowrap;
}

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


ul::after,  li::after,  li div::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    padding: 15px;
}


/* current bookings table/list */
.current_bookings {
    width:100%;
}

#future_bookings_panel {
    min-height: 600px;
    padding: 10px 20px;
    max-width: 100%;  
    float: none; 
}

/* #future_bookings_panel .border.rounded {
    overflow: hidden;
}

#future_bookings_panel .table {
    margin-bottom: 0;
} */

/* .current_bookings table {
    width: 96%;
    left-margin: auto;
    right-margin: auto;

}

.current_bookings th {
    background-color: #75b8e5;
    color: #fff;
} */


/*

Form rows are laid out as and <li> containing a <label> and a <div> with the <input> element and a hidden <p> of user instruction within

The <li> is 100% of screen width, the hidden instruct <p> is 24%  and is shown absolutely positioned "over the top" on the RHS (left: 70%)
and with its  top edge at the bottom of the input field so as not to obscure the data

Within the <li> the <label> occupies 28% and the <div> 65% unused space is consumed by margins

Within the div the <input occupies 100%, the hidden <p> is absolutely positioned outside the div to the right when it is shown

*/

li {
    padding: 9px 1% 9px;
    width: 100%;
    background-color: transparent;
    clear: both;
    margin: 0;
    position: relative;
    transition: background-color 350ms ease-out 0s;
}

#output {
    width: 51% !important;
    margin-top: 1.5em;
    margin: auto;
    border: 1px solid #75b8e5;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    padding: 0.5em 0;
}

#output img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.success p, .failure p, .instructions p, .login_required p {
    font-style: italic;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

li div {
    color: #444;
    margin: 0;
    padding: 0;
    float: left;
    width: 50%;
}




.booking_label {
    float: left;
    width: 240px;
    margin-right: 0.5em;
    font-weight: bold;
    line-height: 1.42857;
    padding: 0 0 3px;
    white-space: normal;
    display: block;
}

input, select {
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #75b8e5;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    height: 36px;
    line-height: 1.42857;
    width: 100%;
    padding-left: .2em;
}

.instruct {
    margin-right: 5px;
    width: 24%;
    border: 1px solid #cccccc;
    border-radius: 0.25em;
    font-size: 105%;
    padding: 8px 10px 10px;
    position: absolute;
    top: 24px;  /* displays with top at bottom edge of relevant field */
    transition: opacity 350ms ease-out 0s;
    visibility: hidden;
    z-index: 1000;
    background-color: #ddeaf4;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}

.instruct:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 0.625em solid transparent;
    border-bottom-color:  #ddeaf4;
    border-top: 0;
    border-left: 0;
    margin-left: -0.312em;
    margin-top: -0.625em;
}

/* Tooltip start */

li.focused .instruct {
    left: 68%;
    opacity: 1;
    visibility: visible;
}

.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    border: 1px solid #6c757d;
    background: none;
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0.4em;
}

.help-btn:hover,
li.focused .help-btn {
    background-color: #6c757d;
    color: white;
}

/* Tooltip End */

.booking_field {
    float: left;
    margin: 0 0.3em 0 0;
    padding: 0;
}

/* specific formatting for various types of inputs */
select {
    box-sizing: content-box;
}


input.radio {
    background-color: white;
    border: 1px solid #c3c3c3;
    border-radius: 50px;
    display: inline-block;
    height: 20px;
    margin-top: 5px;
    padding: 9px;
    position: absolute;
    width: 20px;
}

input.checkbox {
    background-color: white;
    border: 1px solid #c3c3c3;
    border-radius: 3px;
    display: inline-block;
    height: 20px;
    margin-top: 5px;
    position: absolute;
    width: 20px;
}

/* formatting for additional field labels, two column layout, and checkbox and radio box choices */
li div span {
    display: block;
    float: left;
    margin: 0;
    width: 100%
}

div span {
    margin: 0 5px 0 0;
    width: 48%;
    padding-bottom: 5px;
}

/*to negate the above width setting for after buttons*/
#after_buttons a {
    width: auto;
}

.button_container{
    display: flex;
    gap: 10px;
    justify-content: center;
}

label.subfield {
    clear: both;
    display: block;
    line-height: 160%;
    margin: 0px 0px 0px 10px;
    padding-top: 3px;
    font-size: 75%;
}

.choice {
    display: inline-block;
    margin-left: 10px;
    padding-left: 20px;
    font-family: inherit;
    font-size: 100%;
    font-style: normal;
    font-weight: normal;
}

.mt2 {
    margin-top: 2em !important;
}

/* ---- */

fieldset {
    border: medium none;
    display: block;
    margin: 0;
    padding: 0;
}

.captcha-container {
    width: 90% !important;
    margin: auto;
    margin-top: 1em;


}

.buttons  {
    width: 90% !important;
    margin: auto;
    margin-top: 1em;
    line-height: 40px;

}

.right-buttons {
    width: 96%;
    text-align: right;
}

.buttons div {
    float: none;
}

.middleButton, .nextButton, .prevButton, .saveButton, .newButton, .editButton, .actionButton {
    -moz-user-select: none;
    background-color: #3498db;
    border-radius: 4px;
    box-shadow: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: visible;
    width: auto;
    opacity: .8;
    border: 1px solid #75b8e5;
    line-height: 1.4em;
    padding: 0px 12px;
    vertical-align: top;
}

a.nextButton, a.newButton, a.middleButton, a.prevButton, a.editButton, a.actionButton { /* anchor element has padding and border added to height */
    text-decoration: none;
    display: inline-block;
    padding: 8px;
    height: 36px;

}

input.nextButton, input.newButton, input.middleButton, input.prevButton, input.editButton, input.actionButton {
    height: 36px;
}

.nextButton:hover, .newButton:hover, .middleButton:hover, .prevButton:hover, .editButton:hover, .actionButton:hover {
    background-color: #526275;
}

.actionButton {
    display: block;  /* stack em vertically in the table column */
}


/* Booking Details styles */
.booking_details {
    padding-bottom: 10px;
}

.booking_summary {
    width: 90% !important;
    margin: 10px auto 15px auto;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.rates_summary, .booking_dates {
    margin:0px;
    padding:0px;
    width:100%;

}

.rates_summary table, .booking_dates table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
}

.booking_dates tr:nth-child(even){ background-color:#F2F7FD; }
.booking_dates tr:nth-child(odd){ background-color:#ffffff; }

.rates_summary tr:nth-child(odd){ background-color:#F2F7FD; }
.rates_summary tr:nth-child(even){ background-color:#ffffff; }

.rates_summary td, .booking_dates td{
    vertical-align:middle;
    text-align:left;
    padding:7px;
    font-size:100%;
    font-weight:normal;
    color:#000000;

}

.rates_summary tr:first-child td, .booking_dates tr:first-child td{

    background-color:#3498DB;
    font-size:100%;
    font-weight:bold;
    color:#ffffff;
    padding: 10px;
}

.rates_summary th {
    font-size:120%;
    font-weight:bold;
}


/* validator styles */
label.error {
    display: inline;
    margin-left: 10px;
    width: auto;
    color: red;
    font-style: italic;
    position: absolute;
    right: 30px;
}

/* follow up screens */
h2.follow_up_header {
    font-style: normal;
    font-weight: normal;
    text-align: center;
    width: 100%;
}

ul.follow_up {
    margin: 20px;
}

.icon-sizing{
    max-width: 48px;
    max-height: 48px;
}

/* login form and fields */

.login_form {
    display: block;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 10;
    outline: 9999px solid rgba(0,0,0,0.5);
}


.login_label {
    font-weight: bold;
    line-height: 1.42857;
    margin: 0 15px 0 0;
    padding: 0 0 3px;
    white-space: normal;
}

.login_field {
    padding: 10px;
}

.login_form ul {
    padding: 0;
}

/* Add a black background color to the top navigation */
.topnav-wrapper {
    width:99%;
    text-align: center;
}

.topnav {
    overflow: hidden;
    margin: 0 auto;
    display: inline-block;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #ffffff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin-left: 2px;
    border-radius: .25em;
    background-color: #75b8e5;
    line-height: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #526275;
}

/* Hide the link that should open and close the top on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
} */

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
/* @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
} */

h2 {
    font-family: 'Dancing Script';
    background-color: #75b8e5;
    color: white;
}

/* .animal_list {
    width: 100%;
    padding: 20px 15px;
}

.animal_list_row td {
    line-height: 1.2em;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;

} */


.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width:100%;
}

.booking-info {
    font-size: 0.6em;
    color: #7058D1;
}

.eway_paynow_button {
    background-color: #FFC000;
}