/* Add border to bottom of the nav to separate */

nav.navbar {
    border-bottom: 1px solid var(--light-grey) !important;
}

nav .book-nav-btn {
    border-bottom: 1px solid var(--light-grey) !important;
    border-left: 1px solid var(--light-grey) !important;
    border-right: 1px solid var(--light-grey) !important;
}

#loginArea #bookerAccount {
    overflow: auto;
}

#loginArea #bookerAccount .padding-right {
    padding-right: 70px;
}

#loginArea .right-nav ul.menu.loginAreaNav hr {
    border-color: rgba(var(--mid-tone-grey-rgb) / 0.3)!important;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Breadcrumbs */

#loginArea .breadCrumbs p i {
    color: var(--massage-green);
    font-size: 13px;
}

#loginArea .breadCrumbs p {
    display: flex;
    align-items: center;
    gap: 10px;
}

#loginArea .breadCrumbs p a.home-link {
    font-weight: 500;
    color: var(--mid-tone-grey);
}

#loginArea .breadCrumbs p a.current-link {
    font-weight: 700;
    color: var(--dark-grey);
}

#loginArea .breadCrumbs {
    margin-bottom: 30px;
}

/* Subnav */

#loginArea .right-nav ul.menu.loginAreaNav {
    background: var(--light-grey-50);
    padding: 25px;
    border-radius: 25px;
}

#loginArea .right-nav ul li::before {
    display: none!important;
}

#loginArea .right-nav ul li {
    padding-left: 0px;
}

#loginArea .right-nav ul.menu.loginAreaNav .button {
    width: 100%;
}

#loginArea .right-nav ul.menu.loginAreaNav li.menuLink,
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    transition: all .5s ease;
}

#loginArea .right-nav ul.menu.loginAreaNav li.menuLink a,
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link a {
    width: 100%;
    padding: 0px;
    color: var(--darkest-grey);
}

#loginArea .right-nav ul.menu.loginAreaNav li.menuLink a:hover,
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link a:hover,
#loginArea .right-nav ul.menu.loginAreaNav li.menuLink a:focus,
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link a:focus {
    background: transparent!important;
    color: var(--darkest-grey);
    outline: none!important;

}

#loginArea .right-nav ul.menu.loginAreaNav li.menuLink i,
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link i {
    color: var(--mid-tone-grey);
    font-size: 23px;
    transition: all .5s ease;
}

#loginArea .right-nav ul.menu.loginAreaNav li.menuLink.currentlink,
#loginArea .right-nav ul.menu.loginAreaNav li.menuLink:hover, 
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link:hover 
{
    background: #ffffff;
    border-radius: 10px;
    
}

#loginArea .right-nav ul.menu.loginAreaNav li.menuLink.currentlink i,
#loginArea .right-nav ul.menu.loginAreaNav li.menuLink:hover i,
#loginArea .right-nav ul.menu.loginAreaNav li.logout-link:hover i {
    color: var(--massage-green);
}

#loginArea .form-group label + span.subLabel {
    display: block;
    margin-bottom: 10px;
    color: var(--mid-tone-grey);
}

#loginArea .form-group label[for="phoneNumber"] {
    margin-bottom: 0px;
}

#loginArea .form-group label[for="email"] {
    margin-top: 20px;
}

#loginArea h1.customerName {
    font-size: 34px;
    line-height: 38px;
    margin-bottom: 5px;
    margin-top: 0px;
}

#loginArea h4.sectionTitle {
    margin-top: 0px;
    font-size: 23px;
    line-height: 26px;
    font-weight: 500;
    color: var(--mid-tone-grey);
}

#loginArea hr.green-hr {
    margin-top: 20px;
    margin-bottom: 35px;
    border-top: 3px solid var(--massage-green);
}

#loginArea .grey-hr {
    margin-top: 35px;
    margin-bottom: 35px;
    border-top: 2px solid var(--light-grey-50);
}

#loginArea .has-sublabel {
    margin-top: 20px;
    margin-bottom: 2px;
    font-size: 18px;
    line-height: 21px;
}

#loginArea .has-sublabel + span {
    display: block;
    color: var(--mid-tone-grey);
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 15px;
}

#loginArea .checkbox span {
    color: var(--darkest-grey);
    font-size: 17px;

}

#loginArea .checkbox {
    margin-bottom: 18px;
}

#loginArea #errorMsg {
    color: red;
}

/* Appointments Page */

#appointmentsSection .appointmentCard {
    border: 1px solid var(--light-grey);
    border-radius: 15px;
    margin-bottom: 30px;
}

#appointmentsSection .appointmentCard .appointmentCardHeader {
    display: flex;
    justify-content: space-between;
    background-color: var(--light-grey-50);
    border-bottom: 1px solid var(--light-grey);
    padding: 20px;
    border-radius: 15px 15px 0 0;
}

#appointmentsSection .appointmentCard .appointmentCardHeader .appointmentCardHeaderInfo {
    display: flex;
    gap: 90px;
}

#appointmentsSection .appointmentCard .appointmentCardHeader .appointmentCardHeaderInfo .appointmentDetail {
    width: auto;
    margin-bottom: 0px;
}

#appointmentsSection .appointmentCard  .appointmentDetail {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-bottom: 0px;
}

#appointmentsSection .appointmentCard .appointmentDetail .appointmentDetailLabel {
    font-weight: 700;
    font-size: 18px;
    color: var(--darkest-grey);
    line-height: 21px;
    margin-bottom: 5px;
}

#appointmentsSection .appointmentCard .appointmentDetail .appointmentDetailText {
    font-weight: 500;
    font-size: 18px;
    color: var(--dark-grey);
    line-height: 21px;
}
            
#appointmentsSection .appointmentCard .appointmentCardBody {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 20px;
}

#appointmentsSection .appointmentCard .appointmentDetail.mb-25 {
    margin-bottom: 25px;
}

#appointmentsSection .appointmentCardHeader button {
    border: none !important;
}

#appointmentsSection .appointment-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

#appointmentsSection .appointmentDetailText.cancelled {
    color: #DA3A32!important;
}

.appointment-cards-wrapper .appointmentCard:nth-last-of-type(1) {
    margin-bottom: 0px !important;
} 

/* Media Queries */

@media (min-width: 1367px) and (max-width: 1450px) {

}

@media (min-width: 1200px) and (max-width: 1366px) {
    #loginArea ul.menu.nav.loginAreaNav a.button {
        font-size: 18px;
        line-height: 21px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav li.menuLink,
    #loginArea .right-nav ul.menu.loginAreaNav li.logout-link {
        font-size: 15px;
        gap: 10px;
        padding: 10px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav {
        padding: 17px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #loginArea ul.menu.nav.loginAreaNav a.button {
        font-size: 18px;
        line-height: 21px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav li.menuLink,
    #loginArea .right-nav ul.menu.loginAreaNav li.logout-link {
        font-size: 15px;
        gap: 10px;
        padding: 10px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav {
        padding: 17px;
    }

    #loginArea #bookerAccount .padding-right {
        padding-right: 30px;
    }

    #loginArea .genderButton {
        font-size: 14px;
    }

    /* Appointments Page */

    #appointmentsSection .appointmentCard .appointmentDetail {
        width: 100%;
    }

    #appointmentsSection .appointmentCard .appointmentCardHeader .appointmentCardHeaderInfo {
        display: block;
    }

    #appointmentsSection .appointmentCard .appointmentCardHeader {
        align-items: start;
    }

    .appointmentCardHeaderInfo .appointmentDetail:first-child {
        margin-bottom: 15px!important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #loginArea #bookerAccount .padding-right {
        padding-right: 0px;
        margin-top: 40px;
    }

    #loginArea ul.menu.nav.loginAreaNav a.button {
        font-size: 18px;
        line-height: 21px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav li.menuLink,
    #loginArea .right-nav ul.menu.loginAreaNav li.logout-link {
        font-size: 15px;
        gap: 10px;
        padding: 10px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav {
        padding: 17px;
    }

    /* Appointments Page */

    #appointmentsSection .appointmentCard .appointmentDetail {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #loginArea #bookerAccount .padding-right {
        padding-right: 0px;
        margin-top: 40px;
    }

    #loginArea ul.menu.nav.loginAreaNav a.button {
        font-size: 18px;
        line-height: 21px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav li.menuLink,
    #loginArea .right-nav ul.menu.loginAreaNav li.logout-link {
        font-size: 15px;
        gap: 10px;
        padding: 10px;
    }

    #loginArea .right-nav ul.menu.loginAreaNav {
        padding: 17px;
    }

    #loginArea .genderButtonContainer {
        display: flex;
        gap: 15px;
    }

    #loginArea .genderButton {
        font-size: 15px;
    }

    /* Appointments Page */

    #appointmentsSection .appointmentCard .appointmentDetail {
        width: 100%;
    }

    #appointmentsSection .appointmentCard .appointmentCardHeader {
        flex-direction: column;
        gap: 20px;
    }

    #appointmentsSection .appointmentCard .appointmentCardHeader .appointmentCardHeaderInfo {
        display: flex;
        gap: 25px;
    }

    #appointmentsSection .appointmentCard .appointmentCardHeader .appointmentCardHeaderInfo .appointmentDetail,
    #appointmentsSection .appointment-btn-wrapper > * {
        flex: 1;
    }
}

@media (max-width: 575px) {
    #loginArea .genderButtonContainer {
        flex-wrap: wrap;
    }

    #loginArea .genderButton {
        width: 47%!important;
    }
}

/* This is for the table scaling on the payment methods */
@media only screen and (max-width: 767px) {
    
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	#no-more-tables td:before { content: attr(data-title); }
}