@media (max-width: 1100px) {
    .login-container {
        flex-direction: column;
    }
    .register-form-footer {
        flex-direction: column-reverse;
    }
    .register-form-footer .form-check {
        margin: 0;
        margin-bottom: 50px;
    }
    .register-form {
        padding: 70px 16px 100px 16px;
        width: 100%;
    }
    .register-sidebar {
        padding-right: 20px;
    }
    .register-sidebar-container {
        flex: 0 0 285px;
    }

    .date_of_birth {
        width: 100%;
        padding-left: 0px !important;
    }
    .acf-form .date_of_birth .acf-field[data-name="day"] {
        flex: 0 0 30% !important;
    }
    .acf-form .date_of_birth .acf-field[data-name="month"] {
        flex: 0 0 30% !important;
    }
    .acf-form .date_of_birth .acf-field[data-name="year"] {
        flex: 0 0 30% !important;
    }
    .occupation {
        width: 100%;
        top: 0px;
        padding-right: 0px !important;
    }
    .register-step-icon {
        margin-left: 10px;
        width: 30px;
    }
    .register-step-name p {
        font-size: 16px;
        line-height: 16px;
    }
    .campaign-header {
        padding: 24px 16px;
    }

    .booking-field-label {
        -ms-flex: 0 0 175px;
        flex: 0 0 175px;
    }
    .select-location-options {
        max-width: 350px;
    }
    .select-booking-date {
        margin-left: 20px;
    }
    .datepicker-inline {
        width: 350px;
    }
    .datepicker table tr td,
    .datepicker table tr th {
        width: 51px;
        height: 49px;
    }
    .day:not(.disabled):not(.new)::after {
        width: 34px;
        height: 34px;
    }
    .booking-time-picker {
        padding: 12px;
    }
    .header-code-label p {
        font-size: 20px;
        line-height: 24px;
    }
    .header-links {
        padding-left: 16px;
        padding-right: 16px;
    }
    .header-link-label {
        font-size: 24px;
        line-height: 26px;
    }
    .home-intiative {
        right: 66px;
        width: calc(100% - 70px);
        bottom: 100px;
    }
    .login-form {
        padding-top: 0px;
    }
    .profile-sidebar-header {
        margin-bottom: 20px;
    }
    .profile-sidebar-header p {
        margin: 0;
    }
    #profile-tab .nav-link {
        margin-left: 30px;
    }
    #profile-general .secondary-btn {
        height: 60px;
        padding: 6px 30px;
    }
    #details-contact {
        margin-top: 15px;
    }
    .account-forms {
        padding-left: 4%;
    }
    #profile-family .acf-field.field-col-4 {
        width: calc(100% / 2);
    }
    #profile-family .acf-field.field-col-6 {
        width: 100%;
        padding-left: 0px !important;
    }
    .acf-field-group.field-col-6 {
        width: 100%;
        padding-left: 0 !important;
    }

    .confirm-card-buttons .secondary-btn {
        height: initial;
    }
    .admin-bar #home-hero {
        height: calc(100vh - 70px);
    }
    #home-hero {
        height: calc(100vh - 48px);
    }
}
@media (max-width: 1100px) and (min-width: 993px) {
    .appointment-details-footer a span {
        display: block;
    }
    .add-to-calendar {
        display: flex;
    }
    .add-to-calendar img {
        margin-left: 10px;
    }
}
@media (max-width: 992px) {
    ::-webkit-input-placeholder {
        font-size: 17px;
    }

    .contact-info ul {
        margin-top: 45px;
    }
    .contact-info {
        max-width: 80%;
    }
    #site-footer p {
        font-size: 16px;
        line-height: 24px;

        margin: 0;
    }

    .contact-info ul li {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 4px;
    }
    .contact-info ul li img {
        width: 12px;
    }
    h1 {
        font-size: 32px;
        line-height: 38px;
    }
    .header-code-label p {
        font-weight: 600;
        font-size: 24px;
        line-height: 29px;
    }
    .header-code-label p.english {
        font-size: 20px;
        line-height: 24px;
        color: #000000;
    }
    .header-link-label {
        font-size: 16px;
        line-height: 19px;
    }
    #home-hero h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .header-codes {
        flex: 1;
    }
    .header-code {
        flex-direction: row-reverse;
        display: none;
    }
    .header-code-icon {
        width: 58px;
    }
    .header-code-icon img {
        max-height: 31px;
    }
    .header-code:last-of-type {
        display: flex;
    }
    .header-links {
        padding-left: 18px;
        padding-right: 18px;
        flex: 0 0 162px;
        border-bottom: 2px solid #000000;
    }
    #home-hero {
        padding: 50px 16px;
        justify-content: flex-end;
        height: calc(100vh - 53px);
        padding-top: 100px;
        padding-bottom: 180px;
    }
    
    .admin-bar #home-hero {
        height: calc(100vh - 99px);
        padding-bottom: 180px;
    }
    .home-hero-button {
        font-size: 22px;
        width: 100%;
        line-height: 28px;
        padding: 10px 10px;
    }
    #site-footer {
        padding: 57px 16px 120px;
        text-align: left;
    }
    .sawa-logo {
        margin-bottom: 10px;
    }
    .welcome-login {
        border-left: none;
        padding: 0;
        margin: 24px 16px 32px;
        padding-bottom: 32px;
        margin-bottom: 32px;
        border-bottom: 1px solid #e0e0e0;
    }
    .welcome-login h2 {
        font-size: 28px;
        line-height: 33px;
        text-align: center;
    }
    .this-system-will-allow-you {
        margin-bottom: 20px;
        text-align: center;
    }
    .before-start-header {
        justify-content: center;
        font-size: 20px;
        line-height: 24px;
    }
    .before-start .requirements li::before {
        position: absolute;
        right: -35px;
        top: 8px;
    }
    .before-start-content {
        padding: 16px 16px 32px;
        text-align: center;
    }
    .before-start .requirements {
        margin-right: 70px;
        margin-left: 20px;
        text-align: right;
        display: flex;
    flex-direction: column;
    align-items: center;
    }
    .before-start .requirements li {
        line-height: 24px;
    }
    .primary-btn {
        font-size: 18px;
        line-height: 21px;
        padding: 7px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .login-form {
        min-width: initial;
        padding: 16px;
        text-align: center;
    }
    .already-account span {
        display: block;
        margin-bottom: 9px;
    }
    .login-form h1 {
        margin-bottom: 20px;
    }
    .login-form .primary-btn {
        width: 100%;
    }
    .input-container {
        text-align: right;
    }
    #page-container {
        padding-bottom: 56px;
    }
    .register-form {
        padding: 32px 16px 100px 16px;
    }
    .register-form-step-1 {
        max-width: initial;
        padding: 32px 16px 0;
    }
    .register-form-header h2 {
        font-size: 36px;
        line-height: 120%;
        text-align: center;
    }
    .register-form-header p {
        line-height: 22px;
        text-align: center;
    }
    .register-form-header {
        margin-bottom: 20px;
    }
    .register-form-footer .form-check-input {
        margin-left: 8px;
        display: inline;
    }
    .register-form-footer .form-check-label {
        display: inline;
    }
    .register-form-footer .primary-btn {
        width: 100%;
    }
    .acf-form .acf-field-group .acf-fields > .acf-field:not(.acf-field-group) {
        margin-bottom: 21px;
        flex: 0 0 100%;
        margin-left: 0px;
    }
    .user_title {
        width: 100%;
        padding-left: 0px !important;
    }
    .occupation {
        width: 100%;
        top: 0px;
        padding-right: 0px !important;
    }
    .acf-field.field-col-8,
    .acf-field.field-col-6,
    .acf-field.field-col-4 {
        width: 100% !important;
    }
    .acf-field.right-field {
        padding-left: 0px !important;
    }
    .acf-field.left-field {
        padding-right: 0px !important;
    }
    .hide-if-value {
        display: none;
    }
    .primary-btn {
        width: 100%;
    }
    .acf-form .acf-field-image.field-col-6 .acf-label,
    .acf-form .acf-field-file.field-col-6 .acf-label {
        right: 1px;
        width: calc(100% - 2px);
    }
    .register-confirm-page {
        padding: 20px 16px;
    }
    .register-confirm-card {
        justify-content: center;
        margin-bottom: 24px;
    }
    .confirm-card-qrcode {
        margin-left: 0;
        margin-bottom: 16px;
    }
    .confirm-card-info {
        flex: initial;
        margin-bottom: 20px;
        text-align: center;
    }
    .confirm-card-buttons {
        flex: initial;
    }
    .confirm-card-buttons a {
        width: 100%;
        margin-bottom: 16px;
        font-weight: 500;
    }
    .confirm-card-name {
        display: block;
        text-align: center;
        margin-bottom: 13px;
    }
    .register-confirm-page h1 {
        font-size: 24px;
        line-height: 30px;
        text-align: center;
    }
    .campaign-header {
        padding: 24px 16px;
        flex-wrap: wrap;
        text-align: center;
        margin-bottom: 40px;
    }
    .campaign-header-info {
        order: 1;
    }
    .campaign-header-image {
        order: 2;
        margin: 0;
        flex: 0 0 100%;
    }
    .campaign-header-image img {
        width: 100%;
    }
    .campaign-header-note {
        order: 3;
    }
    .campaign-header-note {
        flex-wrap: wrap;
    }
    .available-dates {
        flex: 0 0 100%;
        flex-direction: column;
    }
    .campaign-header-note img {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 6px;
    }
    .booking-field {
        flex-wrap: wrap;
    }
    .booking-field-label {
        flex: 0 0 75%;
    }
    .select-location-options {
        order: 1;
        height: initial;
        max-height: 454px;
        max-width: initial;
        border-left: 1px solid #e0e0e0;
    }
    .register-container {
        flex-direction: column;
    }
    .register-sidebar {
        padding-right: 12px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .register-step {
        display: none;
    }
    .register-step.active {
        display: flex;
        margin-bottom: 0px;
        align-items: center;
    }
    .register-sidebar-container {
        flex: 1;
        max-width: initial;
    }
    .register-sidebar .active:after {
        display: none;
    }
    .register-step-name p {
        display: inline-block;
        font-size: 15px;
        line-height: 18px;
        font-weight: 500;
        margin-left: 6px;
        margin-bottom: 0;
    }
    .register-step-icon {
        margin-left: 13px;
        width: 24px;
    }
    .register-step-number {
        font-size: 15px;
        line-height: 18px;
    }
    .profile-sidebar {
        margin-left: -16px;
        margin-right: -16px;
        margin-bottom: 30px;
    }
    .page-dashboard {
        padding-top: 0;
    }
    .profile-sidebar-header {
        border-bottom: 1px solid #e0e0e0;
        justify-content: center;
    }

    .profile-sidebar-header p {
        margin-bottom: 1rem;
        margin-left: 10px;
        margin-right: 10px;
    }
    .page-dashboard h2 span {
        margin-bottom: 4px;
        display: block;
        text-align: center;
        font-size: 32px;
        line-height: 120%;
        font-weight: normal;
    }
    .appointment-item {
        flex-direction: column;
    }
    .appointment-item-date {
        flex-direction: column;
    }
    .appointment-item-content {
        padding: 14px 16px;
    }
    .appointment-item-day {
        margin-bottom: 15px;
    }
    .appointment-item-time {
        margin-bottom: 15px;
    }
    .appointment-item-footer {
        flex-direction: column;
        align-items: center;
    }
    .add-to-calendar {
        background: #f4f5f8;
        padding: 20px;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    .user-avatar {
        flex: 0 0 100px;
        margin-left: 14px;
    }
    .user-avatar img {
        width: 100%;
        height: auto;
    }
    .back-to-dashboard {
        margin-top: 20px;
    }
    .account-name {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 0;
    }
    .account-name span {
        margin-bottom: 8px;
        display: block;
    }
    .id-card {
        margin-bottom: 20px;
    }
    .user-account-info {
        align-items: center;
    }
    #profile-tab {
        overflow: scroll;
        flex-wrap: nowrap;
        padding-top: 14px;
        padding-bottom: 11px;
        padding-right: 16px;
        background: #f4f5f8;
    }
    #profile-tab .nav-link {
        white-space: nowrap;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
    }
    #profile-tab .nav-link.active {
        font-weight: 600;
    }
    #profile-tab::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
    #show-password-fields {
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
    }
    #password-fields {
        flex-wrap: wrap;
    }
    .acf-field.center-field {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    #details-contact {
        margin-top: 33px;
    }
    .submit-container {
        width: 100%;
        margin-bottom: 48px;
    }
    .page-template-page-account .profile-sidebar {
        margin-top: 48px;
    }
    .datepicker-inline {
        width: 100%;
        padding: 18px 16px;
        margin-bottom: 32px;
    }

    .select-booking-date {
        margin-left: 0px;
        margin-top: 16px;
        flex: 0 0 50%;
    }
    .select-booking-time {
        flex: 0 0 47%;
        margin-right: auto;
    }
    .datepicker table tr .dow {
        font-size: 12px;
        line-height: 14px;
    }
    .datepicker table tr td,
    .datepicker table tr th {
        width: 44px;
        height: 44px;
    }
    .day:not(.disabled):not(.new)::after {
        width: 32px;
        height: 32px;
    }
    .booking-map {
        height: 214px;
        flex: 0 0 100%;
        margin-top: 24px;
    }
    .booking-details {
        margin-top: 23px;
    }
    .appointment-confirm-header {
        flex-direction: column-reverse;
        align-items: center;
        margin-top: 25px;
    }
    .appointment-confirm-header h2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 24px;
        text-align: center;
        font-size: 32px;
        line-height: 120%;
    }
    .appointment-confirm-header h2 img {
        margin-bottom: 12px;
    }
    .appointment-details-title h5 {
        font-size: 20px;
        line-height: 25px;
    }
    .appointment-details-date {
        display: block;
    }
    .appointment-details-day {
        margin-bottom: 22px;
    }
    .appointment-details-footer {
        background: none;
        display: block;
        padding: 16px;
        text-align: center;
    }
    .appointment-confirm-info {
        margin-bottom: 32px;
    }
    .login-form .woocommerce-form-login {
        margin: auto;
    }
    .footer-logos {
        width: 100%;
    }
    .exclamation-mark {
        flex: 0 0 100%;
    }

    .home-intiative {
        width: calc(100% - 32px);
        right: initial;
        bottom: 110px;
        /*        position: static;*/
    }
    .print-button {
        margin: auto;
    }
    .account-forms {
        padding-left: 0%;
    }
    .acf-form .acf-field-group.child_date_of_birth .acf-fields > .acf-field:not(.acf-field-group){
        flex: 0 0 33%;
    }
    /* 
   */
}
@media (max-width: 576px) {
    .footer-logos {
        margin-left: auto;
    }
    .contact-info {
        margin-top: 50px;
    }

    .footer-a {
        max-width: 220px !important;
        float: right;
    }

    .footer-logos {
        width: 58%;
        margin-top: 24px;
    }

    .acf-form .date_of_birth .acf-field[data-name="day"] {
        flex: 0 0 50% !important;
        padding-left: 11px;
    }
    .acf-form .date_of_birth .acf-field[data-name="month"] {
        flex: 0 0 50% !important;
        padding-right: 11px;
    }
    .acf-form .date_of_birth .acf-field[data-name="year"] {
        flex: 0 0 100% !important;
    }
    #profile-tab {
        margin-right: -16px;
        margin-left: -16px;
    }
    .select-booking-date {
        flex: 0 0 100%;
    }
    .select-booking-time {
        flex: 0 0 100%;
    }

    .acf-form .acf-field-group.child_date_of_birth .acf-fields > .child_date_of_birth_day{
        flex: 0 0 50% !important;
        padding-left: 11px;
    }
    .acf-form .acf-field-group.child_date_of_birth .acf-fields > .child_date_of_birth_month{
        flex: 0 0 50% !important;
        padding-right: 11px;
    }
    .acf-form .acf-field-group.child_date_of_birth .acf-fields > .child_date_of_birth_year{
        flex: 0 0 100% !important;
    }
}