:root {
  --myc-grey: #9e9e9e;
  --myc-dark: #323e48;
  --myc-gray-dark: #616161;
  --myc-gray-light: #d7d7d7;
  --myc-blue: #01bdc3;
  --myc-primary: #01bdc3;
  --myc-primary-focus: #d8f3f4;
  --myc-blue-light: #d8f3f4;
  --myc-pink: #fc3868;
  --text-color-rgb: 50, 62, 72;
  --scroll-color: #c1c1c1;
  --scroll-color-hover: #969696;
  --shadow-color: 0deg 0% 40%;
  --pale-blue: #CEF1F2;
  --pale-indigo: #B2B9E1;
  --pale-green: #B7DFB9;
  --pale-brown: #C9BBB6;
  --pale-purple: #D7A9DF;
  --pale-red: #FBB4AF;
  --pale-orange: #FFBCA7;
  --pale-yellow: #FFF7B1;
  --border-radius: 5px;
  --myc-transition: .2s ease-in-out;
  --myc-spacing: 1rem;
  --myc-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --myc-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --myc-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --myc-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --myc-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --myc-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --myc-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

#search-speciality-form-holder {
  clear: both;
}

.autocomplete-suggestions {
  border-radius: 5px 0 5px 5px;
  box-shadow: none;
  border: 1px solid #ddd;
}
.autocomplete-suggestions:last-child {
  border-bottom: 0;
}

.searchbar {
  display: flex;
  flex-direction: row;
}
@media (max-width: 768px) {
  .searchbar {
    flex-direction: column;
  }
}
.searchbar .searchbar-query {
  height: 60px;
  flex: 7 0 0;
  border-left: 1px solid #d2dbde;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 768px) {
  .searchbar .searchbar-query {
    border-radius: 0px;
    margin-bottom: 1rem;
  }
}
.searchbar .searchbar-query .searchbar-query-input {
  padding-left: 15px;
}
.searchbar .searchbar-input-wrapper {
  position: relative;
}
.searchbar .searchbar-input-minchar {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 85%;
  pointer-events: none;
}
.searchbar .searchbar-input {
  height: 60px;
  line-height: 1rem;
  padding-left: 45px;
  padding-right: 5px;
  border: none;
  border-radius: 5px 0 0 5px;
  background-color: #fafafa;
  color: #323e48;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  font-size: 16px;
}
@media (max-width: 768px) {
  .searchbar .searchbar-input {
    border-radius: 0px;
    height: 45px;
  }
}
.searchbar .searchbar-place-input-wrapper {
  position: relative;
  width: 100%;
  border-radius: 5px 0 0 5px;
  padding-left: 0px;
  height: 60px;
}
@media (max-width: 768px) {
  .searchbar .searchbar-place-input-wrapper {
    border-radius: 0px;
    height: 45px;
  }
}
.searchbar .searchbar-place-input-wrapper .searchbar-input-icon {
  position: absolute;
  top: 20px;
  left: 14px;
  height: 20px;
  width: 20px;
  pointer-events: none;
  fill: rgba(67, 95, 113, 0.3);
}
@media (max-width: 1024px) {
  .searchbar .searchbar-place-input-wrapper .searchbar-input-icon {
    top: 12px;
  }
}
.searchbar .searchbar-place {
  height: 60px;
  position: relative;
  flex: 7 0 0;
  border-left: 1px solid #d2dbde !important;
  border-radius: 0px;
}
@media (max-width: 768px) {
  .searchbar .searchbar-place {
    margin-bottom: 1rem;
  }
}
.searchbar .searchbar-place .searchbar-place-input {
  border-radius: 0px;
}
.searchbar .searchbar-place .searchbar-place-around-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  text-align: right;
  cursor: pointer;
}
.searchbar .searchbar-place .searchbar-place-around-me-icon {
  fill: #41a62a;
  height: 25px;
  width: 25px;
  position: relative;
  top: 3px;
}
@media (max-width: 768px) {
  .searchbar .searchbar-place .searchbar-place-around-me-icon {
    display: none;
  }
}
.searchbar .searchbar-place .searchbar-place-around-me-text {
  margin-left: 14px;
}
.searchbar .searchbar-place .searchbar-place-around-me-button {
  position: absolute;
  width: 1px;
  right: -10px;
  top: 20px;
  transform: translateX(100%) translateX(-51px);
  color: #323e48;
  transition: -webkit-transform 400ms;
  transition: transform 400ms;
  transition: transform 400ms, -webkit-transform 400ms;
  transition-delay: 100ms;
  height: 100%;
  text-align: left;
  cursor: pointer;
}
.searchbar .searchbar-place .searchbar-place-around-me-button.active {
  color: #26a69a;
}
.searchbar .searchbar-place .searchbar-place-around-me-button.active .searchbar-place-around-me-icon {
  fill: #26a69a;
}
.searchbar .searchbar-place .searchbar-place-around-me-button.searchbar-place-around-me-button-enabled {
  transform: translateX(0);
}
.searchbar .searchbar-place .searchbar-place-around-me-icon.searchbar-place-around-me-icon-progress {
  animation: animationPulse 1200ms linear infinite;
}
.searchbar .searchbar-place .searchbar-place-around-me-label {
  font-size: 14px;
}
.searchbar .searchbar-place .searchbar-place-around-me-clear {
  width: 44px;
  position: absolute;
  display: inline-block;
  right: 0;
  top: 18px;
}
.searchbar .searchbar-submit-button {
  height: 60px;
  color: #fff;
  border-radius: 0px 5px 5px 0px;
  padding: 14px;
  z-index: 10;
  transition: all 0.4s ease-in-out;
  background: #fc3868;
  border: 1px solid #fc3868 !important;
}
.searchbar .searchbar-submit-button:hover {
  color: #fff;
  background: #ff5b7b !important;
  border: 1px solid #ff5b7b;
}
.searchbar .searchbar-submit-button .searchbar-submit-button-label {
  text-align: center;
  font-size: 1rem;
  line-height: 1rem;
  text-transform: uppercase;
  padding-top: 4px;
}
@media (max-width: 768px) {
  .searchbar .searchbar-submit-button {
    border-radius: 5px;
    height: 3rem;
  }
}
@-moz-document url-prefix() {
  .searchbar .searchbar-submit-button .searchbar-submit-button-label {
    padding-top: 0;
  }
}
.searchbar .search-spec:focus::placeholder,
.searchbar .street-input-field:focus::placeholder {
  color: transparent;
}
.searchbar .search-spec:focus,
.searchbar .street-input-field:focus {
  border: 1px solid #fc3868;
}
.searchbar .searchbar-input::placeholder {
  font-style: normal;
  color: #323e48;
}
.searchbar .searchbar-input::-ms-clear {
  display: none;
}

/*
// apply a transparent border to avoid layout shift
.searchbar {
    @media (min-width: 1024px) {
        .searchbar-dropdown .searchbar-input-field {
            border-left: 1px solid transparent;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }

        .searchbar-query .searchbar-input-field {
            border-left: 1px solid transparent;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }

        .searchbar-place-submit .searchbar-input-wrapper {
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }

        .searchbar-place-around {
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
            height: 62px !important;
        }

        .searchbar-submit-button {
            height: 62px !important;
        }

        .searchbar-submit-button {
            height: 62px !important;
        }

        .searchbar-dropdown .searchbar-input-wrapper {
            height: 62px !important;
        }
    }
}

.searchbar-bordered {
    // box-shadow: 0 0 20px -4px $myc-pink!important;
    @media (min-width: 1024px) {
        .searchbar-dropdown .searchbar-input-field {
            border-left: 1px solid $myc-pink;
            border-top: 1px solid $myc-pink;
            border-bottom: 1px solid $myc-pink;
        }

        .searchbar-query .searchbar-input-field {
            border-left: 1px solid $myc-pink;
            border-top: 1px solid $myc-pink;
            border-bottom: 1px solid $myc-pink;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }

        .searchbar-place-submit .searchbar-input-wrapper {
            border-top: 1px solid $myc-pink;
            border-bottom: 1px solid $myc-pink;
        }

        .searchbar-place-around {
            border-top: 1px solid $myc-pink;
            border-bottom: 1px solid $myc-pink;
        }
    }
}

.searchbar,
.searchbar-bn,
.searchbar-mobile {
    width: 100%;
    display: flex;
    box-shadow: 0 0 20px 0 rgba(67, 95, 113, 0.2);
    border-radius: 5px;

    .searchbar-place-around-me {
        border-bottom: 1px solid #d2dbde;
    }

    .searchbar-place {
        flex: 7 0 0;
        display: flex;
        border-left: 1px solid #d2dbde;
        position: relative;

        @media (max-width: 1024px) {
            flex: 0 !important;
            display: block !important;
            width: 100% !important;
            border: 0 !important;
            box-shadow: 0 0 20px 0 rgba(67, 95, 113, 0.2);
            margin-bottom: 15px;
        }
    }

    .searchbar-place-around {
        flex: 1 0 0;
        display: flex;
        position: relative;
        background: #fafafa;
        height: 60px;
        overflow: hidden; // hide protip overflow

        @media (max-width: 1024px) {
            flex: 0 !important;
            display: block !important;
            height: 100% !important;
            position: absolute !important;
            right: 35px !important;
            top: 18px !important;
        }
    }

    .searchbar-place-around-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: left;
        cursor: pointer;

        @media (max-width: 1024px) {
            top: 0 !important;
            left: 0 !important;
            right: 10px !important;
            transform: translate(92%, 0);
            text-align: right;
        }
    }

    .searchbar-place-around-me-icon {
        fill: $myc-green;
        height: 25px;
        width: 25px;
        position: relative;
        top: 3px;
    }

    .searchbar-place-around-me-text {
        margin-left: 14px;
    }

    .searchbar-place-around-me-button {
        position: absolute;
        width: 1px;
        right: -10px;
        top: 20px;
        transform: translateX(100%) translateX(-51px);
        color: $myc-dark;
        transition: -webkit-transform 400ms;
        transition: transform 400ms;
        transition: transform 400ms, -webkit-transform 400ms;
        transition-delay: 100ms;
        height: 100%;
        text-align: left;
        cursor: pointer;
    }

    .searchbar-place-around-me-button.active {
        color: $teal;

        .searchbar-place-around-me-icon {
            fill: $teal;
        }
    }

    .searchbar-place-around-me-button.searchbar-place-around-me-button-enabled {
        transform: translateX(0);
    }

    .searchbar-place-around-me-icon.searchbar-place-around-me-icon-progress {
        animation: animationPulse 1200ms linear infinite;
    }

    .searchbar-place-around-me-label {
        // font-family: "Roboto", Arial, sans-serif;
        font-size: 14px;
    }

    .searchbar-place-around-me-clear {
        width: 44px;
        position: absolute;
        display: inline-block;
        right: 0;
        top: 18px;
    }

    .searchbar-place-input-wrapper {
        flex: 1 0 0;
    }

    .searchbar-input-hide-overflowing-around-me {
        overflow: hidden;
        border-radius: 0px;
    }

    @-webkit-keyframes animationPulse {
        50% {
            opacity: 0.25;
        }
    }

    @keyframes animationPulse {
        50% {
            opacity: 0.25;
        }
    }

    .searchbar-dropdown {
        flex: 3 0 0;
        height: 62px;
        border-radius: 5px;
        background: #f5f5f5;

        @media (max-width: 1024px) {
            height: 45px !important;
            margin-bottom: 10px;
            flex: 0 !important;
            display: block !important;
            width: 100% !important;
            box-shadow: 0 0 20px 0 rgba(67, 95, 113, 0.2) !important;
        }

        .select-wrapper input.select-dropdown {
            border-bottom: 0;
            color: $myc-dark;
        }

        .searchbar-input-wrapper {
            background: #f5f5f5;
        }

        input,
        select {
            color: $myc-dark;
        }
    }

    .searchbar-dropdown .searchbar-input-wrapper {
        border-radius: 5px 0 0 5px;
        padding-left: 0px;
        height: 60px;

        @media (max-width: 1024px) {
            height: 45px;
        }

        .select2-container--default .select2-selection--single {
            border: 0;
            background-color: #f5f5f5;
        }

        .select2-selection {
            height: 60px !important;

            @media (max-width: 1024px) {
                height: 45px !important;
            }
        }

        .select2-selection__rendered,
        .select2-selection__arrow {
            line-height: 60px;
            font-size: 16px;

            @media (max-width: 1024px) {
                line-height: 45px;
                font-size: 14px;
            }
        }

        .select2-selection__rendered {
            color: $myc-dark;
            padding-left: 15px;
        }

        .select2-selection__arrow {
            top: 18px;
            width: 30px;

            b {
                border-width: 7px 6px 0 6px !important;
                border-color: $myc-dark transparent !important;
            }

            @media (max-width: 1024px) {
                top: 10px;

                b {
                    border-width: 5px 4px 0 4px !important;
                    border-color: $myc-dark transparent !important;
                }
            }
        }

        @media (max-width: 1024px) {
            border-radius: 5px;
        }
    }

    .searchbar-query {
        flex: 5 0 0;
        border-left: 1px solid #d2dbde;
        border-radius: 5px 0 0 5px;

        @media (max-width: 1024px) {
            flex: 0 !important;
            width: 100% !important;
            box-shadow: none;
            // border-left: 0;
            border-radius: 5px !important;
        }

        .searchbar-input-field {
            border-radius: 5px 0 0 5px;

            @media (max-width: 1024px) {
                box-shadow: 0 0 20px 0 rgba(67, 95, 113, 0.2) !important;
            }
        }
    }

    .searchbar-place-submit {
        flex: 7 0 0;
        display: flex;
        position: relative;

        @media (max-width: 1024px) {
            display: block !important;
            padding-top: 10px !important;
            flex: 0 !important;
            text-align: center;
        }
    }

    .searchbar-query-input {
        border-radius: 0;
    }

    .searchbar-dropdown-input {
        border-radius: 5px 0 0 5px;

        @media (max-width: 1024px) {
            border-radius: 5px !important;
        }
    }

    .searchbar-query-input.searchbar-query-input-opened {
        border-radius: 5px 0 0 0;
    }

    .searchbar-query-input.searchbar-input-other-focused {
        box-shadow: inset -11px 0 14px -16px black;
    }

    .searchbar-place-input.searchbar-input-other-focused {
        box-shadow: inset 11px 0 14px -16px rgba(0, 0, 0, 0.9);
    }

    .searchbar-submit-button-label {
        text-align: center;
        font-size: 16px;
        line-height: 16px;
        text-transform: uppercase;
        padding-top: 4px;
    }

    .searchbar-submit-button-arrow {
        fill: white;
        transition: opacity 500ms;
    }

    .searchbar-submit-button {
        height: 60px;
        color: #fff;
        border-radius: 0px 5px 5px 0px;
        padding: 14px;
        z-index: 10;
        transition: all 0.4s ease-in-out;
        background: $myc-pink;
        border: 1px solid $myc-pink;

        &:hover {
            color: #fff;
            background: $myc-pink-light !important;
            border: 1px solid $myc-pink-light;
        }

        @media (max-width: 1024px) {
            height: 45px !important;
            border-radius: 5px !important;
        }
    }

    .searchbar-submit-button .button-label {
        display: flex;
        text-align: left;

        @media (max-width: 1024px) {
            .searchbar-submit-button-label {
                padding-top: 2px;
            }

            i {
                margin-top: -2px;
            }
        }
    }

    .searchbar-submit-button[disabled] {
        opacity: 1;
        cursor: default !important;
    }

    .searchbar-submit-button[disabled] .searchbar-submit-button-label,
    .searchbar-submit-button[disabled] .searchbar-submit-button-arrow {
        opacity: 0.7;
    }

    .searchbar-submit-button:focus {
        background-color: $myc-pink-light !important;
    }

    .searchbar-result-profile {
        display: flex;
    }

    .searchbar-result-profile-avatar {
        flex-basis: 40px;
        min-width: 40px;
        height: 40px;
    }

    .searchbar-result-profile-avatar img {
        width: 100%;
        height: 100%;
    }

    .searchbar-result-profile-details {
        padding-left: 14px;
    }

    .searchbar-result-profile-subtitle {
        font-size: 12px;
        color: rgba(67, 95, 113, 0.6);
        line-height: 14px;
    }

    .searchbar-result {
        flex: 0 0 auto;
        box-sizing: border-box;
        flex-basis: 100%;
        max-width: 100%;
        font-size: 14px;
        color: $myc-dark;
        position: relative;
        cursor: pointer;
        text-align: left;
        display: flex;
        padding: 12px;
    }

    .searchbar-result.searchbar-result-active {
        background-color: #ccecfa;
        transition: background-color 0ms;
    }

    .searchbar-result-subtitle {
        line-height: 20px;
        flex: 1 0 0;
        text-align: right;
        padding-left: 7px;
        color: rgba(67, 95, 113, 0.6);
        font-size: 12px;
    }

    .searchbar-input-wrapper,
    .searchbar-select-wrapper {
        background: #fff;
        position: relative;
        display: block;
        width: 100%;
    }

    .searchbar-input {
        height: 60px;
        flex: 1 0 0;
        line-height: 16px;
        padding-left: 45px;
        padding-right: 5px;
        border: none;
        background-color: #fafafa;
        color: $myc-dark;
        box-sizing: border-box;
        outline: none;
        width: 100%;
        font-size: 14px;

        @media (min-width: 992px) {
            font-size: 16px;
        }

        @media (max-width: 1024px) {
            height: 45px !important;
        }
    }

    .search-spec {
        padding-left: 15px;
    }

    .searchbar-input-minchar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        font-size: 85%;
    }

    .search-spec:focus::placeholder,
    .street-input-field:focus::placeholder {
        color: transparent;
    }

    .searchbar-input::placeholder {
        font-style: normal;
        color: $myc-dark;
    }

    .searchbar-input::-ms-clear {
        display: none;
    }

    .searchbar-input-icon {
        position: absolute;
        top: 20px;
        left: 14px;
        height: 20px;
        width: 20px;
        pointer-events: none;
        fill: rgba(67, 95, 113, 0.3);

        @media (max-width: 1024px) {
            top: 12px;
        }
    }

    .searchbar-input-icon.searchbar-input-icon-focused {
        fill: $myc-dark;
    }

    .searchbar-place-only {
        max-width: 600px;
        margin: 0 auto;

        .searchbar-place {
            border-left: 0;
        }

        .searchbar-input-wrapper {
            border-radius: 5px 0 0 5px;
        }

        .fill-place-message,
        .select-spec-message {
            display: none;
        }

        .searchbar-mobile {
            box-shadow: none;
        }
    }
}

.searchbar-bn {
    .searchbar-input {
        padding: 0 10px 0 45px;
        flex: 5 0 0;
    }

    .searchbar-place-submit {
        flex: 1 0 0;
    }
}

.ListPage .searchbar {
    width: 85%;
    max-width: 1350px;
    margin: 0 auto;

    @media (min-width: 1280px) {
        width: 75%;
    }

    @media (max-width: 1024px) {
        max-width: 420px;
        margin: 0 auto;

        .searchbar-dropdown {
            display: none !important;
        }

        input,
        select,
        .searchbar-input-wrapper,
        .searchbar-submit-button {
            border-radius: 5px;
        }
    }
}
*/