@font-face {
     font-family: Moderat;
     src: url(https://cdn.shopify.com/s/files/1/0687/0722/1792/files/Moderat-Regular.woff?v=1673457969) format("woff");
     font-weight: 400;
     font-style: normal
 }

 @font-face {
     font-family: Moderat;
     src: url(https://cdn.shopify.com/s/files/1/0687/0722/1792/files/Moderat-Bold.woff?v=1673457968) format("woff");
     font-weight: 700;
     font-style: normal
 }

 @font-face {
     font-family: Moderat;
     src: url(https://cdn.shopify.com/s/files/1/0687/0722/1792/files/Moderat-Medium.woff?v=1673457968) format("woff");
     font-weight: 500;
     font-style: normal
 }

 @font-face {
     font-family: Moderat;
     src: url(https://cdn.shopify.com/s/files/1/0687/0722/1792/files/Moderat-Medium.woff?v=1673457968) format("woff");
     font-weight: 600;
     font-style: normal
 }

 @font-face {
     font-family: Moderat;
     src: url(https://cdn.shopify.com/s/files/1/0687/0722/1792/files/Moderat-Light.woff?v=1673457973) format("woff");
     font-weight: 300;
     font-style: normal
 }

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

 ul {
     list-style: none;
     padding-left: 0;
 }

 ul,
 li,
 a,
 img,
 button,
 .bannerhd {
     transition: all ease .5s;
 }

 a:hover {
     text-decoration: underline !important;
     color: #3EB1C9 !important;
 }

 img {
     max-width: 95%;
 }

 #mainwrapper {
     width: 100%;
     float: left;
 }

 .wrapper {
     max-width: 1364px;
     margin: 0 auto;
     width: 100%;
 }

 header {
     width: 100%;
     float: left;
 }

 .topbar {
     width: 100%;
     float: left;
     background: #F8F8F8;
     border-bottom: 0px solid #ccc;
     position: relative;
     padding-top: 1px;
     height: 53px;
 }

 .topbar .wrapper {
     display: flex;
     justify-content: space-between;
     padding: 12px;
     height: 54px;
     align-items: center;
     max-width: 1364px;
     width: 94% !important;
     position: relative;

 }

 .topbar-list {
     list-style: none;
     display: flex;
     align-items: center;
     margin: 0;
     padding: 0;
 }

 .topbar-list li {
     padding: 0 10px;
     border-left: solid 1px #ccc;
     align-items: center;
     display: flex;
     height: 20px;
 }

 .topbar-list li:first-child {
     padding-left: 0;
     border: 0;
 }

 .btn-blue {
     height: 40px;
     background: #38A0B5 !important;
     border-radius: 20px !important;
     color: #fff !important;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 29px;
     border: 0;
     font-size: 14px;
     text-decoration: none;
 }

 .btn-blue:hover {

     background: #38A0B5 !important;
     text-decoration: none !important;
     color: #fff !important;

 }


 button.btn-blue.disabled {
     background: #a4a2a240;
     color: #A4A2A2;
 }

 .topbar a.btn-blue {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     border-radius: 20px;
     letter-spacing: 0;
     height: 33px;
     width: 171px;
     line-height: 1;
     padding: 0;
     min-height: 0;
     font-size: 14px;
     appearance: none;
     background-color: #38A0B5 !important;
 }

 /*
.btn-blue {
    height: 40px;
    background: #3EB1C9;
    border-radius: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    border: 0;
    font-size: 14px;
    text-decoration: none;
}
*/

 .logobar {
     width: 100%;
     float: left;
     /*padding: 10px 0;*/
     padding: 24px 310px;
 }

 .logobar .wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo-leftpanel {
     display: flex;
 }

 .logo {
     margin-right: 28px;
 }

 /* Logged in logo */
 .logo-rightpanel .dropdown-loggin {
     left: 0;
     top: 0;
     max-width: 250px;
     margin: 4rem -12.5rem;
     border-radius: unset;
 }


 button.arrow-down-closed[aria-expanded="true"] img {
     transform: rotate(-180deg);
 }

 button.btn.arrow-down-closed img {
     min-width: 9.5px;
     min-height: 6px;
 }

 .logo-rightpanel .cart-menu li:last-child img {
     min-width: 20px;
     min-height: 26px;
 }

 button.btn.arrow-down-closed {
     padding-left: 0.2rem;
 }

 .dropdown-loggin .dropdown-item-user {
     font-size: 14px;
     padding: 10px 10px 10px 10px;
 }

 .dropdown-loggin li {
     border-bottom: solid 1px #ddd;
     width: 15rem;
     max-width: 100%;
 }

 /*
.dropdown-loggin .dropdown-item-user {
    font-size: 14px;
    padding: 10px 92px 10px 10px;        
}    

.dropdown-loggin li {
    border-bottom: solid 1px gray;
}
*/
 .dropdown-loggin li:last-child {
     border-bottom: 0;
 }

 .logo-rightpanel .dropdown-loggin .dropdown-item-user {
     font-weight: 600;
     color: #3EB1C9;
 }

 .nav-item .arrow-down-closed {
     display: none;
 }

 .nav-item .arrow-down-closed {
     display: flex;
     right: 0;
     position: absolute;
     margin: 5px 2rem;
 }

 /* End logged in */


 .main-menu {
     list-style: none;
     display: flex;
     align-items: center;
 }

 .main-menu li {
     padding: 0 17px;
     align-items: center;
     display: flex;
 }

 .main-menu li a {
     color: #373A36;
     text-decoration: none;
 }

 .logo-rightpanel {
     display: flex;
 }

 .cart-menu {
     list-style: none;
     display: flex;
     align-items: center;
     margin: 0;
     padding: 0;
 }

 .cart-menu li {
     padding: 0 6.5px;
     height: 56px;
     align-items: center;
     display: flex;
     color: #373A36;
     position: relative;
 }

 .cart-menu li a {
     color: #3EB1C9;
     text-decoration: none;
     margin: 0 8px;
 }

 .banner {
     float: left;
     width: 100%;
 }

 .banner .wrapper {
     width: 1087px;
 }

 .bannerbg {
     background-size: cover !important;
     height: 769px;
     float: left;
     width: 100%;
     padding: 80px 0;
     box-sizing: border-box;
 }

 .bannerhd {
     float: left;
     width: 100%;
     margin-bottom: 34px;
 }

 .bannertext {
     float: left;
     width: 35%;
     margin-right: 5%;
     color: #fff;
     font-size: 14px;
     line-height: 25px;
 }

 .bannerhighlighter {
     float: left;
     width: 50%;
     background: rgba(255, 255, 255, 0.75);
     padding: 10px 19px;
 }

 .text {
     float: left;
     width: 90%;
 }

 .highlighter-row {
     float: left;
     width: 100%;
     padding: 14px 0;
 }

 .highlighter-row p {
     font-size: 14px;
     line-height: 25px;
     padding: 0;
     margin: 0;
 }



 /* TWK-868 : The drop down menu alignment is not as per the designs and also decreased the width of the icon */

 .icon {
     width: 38px;
     float: left;
 }

 /* end of TWK-868 */



 .arrow-link {
     color: #38A0B5;
     padding-right: 23px;
     font-size: 14px;
     font-weight: bold;
     text-decoration: none;
     background: url(../png/icon-arrow.png) right center no-repeat;
     background-position-y: 3px;
 }

 .arrow-link:hover {
     text-decoration: underline !important;
     color: #38A0B5 !important;
 }

 footer {
     background: #F8F8F8;
     float: left;
     width: 100%;
     padding-top: 48px;
     padding-bottom: 0px;
 }

 .logobot {
     float: left;
     width: 100%;
     text-align: center;
     margin: 20px 0;

 }

 .footerlinks,
 .footerrow {
     float: left;
     width: 100%;
     padding: 0 5px;
 }

 .footerrow .wrapper {
     width: 900px;
 }

 .footerlinks {
     margin: 0;
     padding-bottom: 3.5rem;
 }

 /*
.footerlinks li {
    float: left;
    width: 25%;
    list-style: none;
    font-weight: bold;
    color: #373A36;
    font-size: 14px;
    line-height: 17px;
}
*/

 .footerlinks li a {
     color: #373A36 !important;
     text-decoration: none;
 }

 .footerlinks li a:hover {
     text-decoration: underline !important;
     /*color: #38A0B5 !important;*/
     font-weight: bold;
 }

 .footerlinks li ul {
     float: left;
     width: 100%;
     margin: 0;
     padding: 0;
 }

 .footerlinks li ul li {
     font-weight: normal;
     width: 100%;
 }


 .copyrightrow {
    float: left;
    width: 100%;
    background: #373A36;
    padding: 0;
    color: #fff;
    font-size: 13px;
    background-color: #373a36;
    height: 69.19px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 3.2rem;
 }

 .applinks {
     width: auto;
     margin: 10px auto;
     text-align: center;
 }

 .appicon {
     display: inline-block;
     color: #373A36;
     font-size: 14px;
     font-weight: bold;
     margin-right: 40px;
     height: 25px;
     padding-left: 20px;
     line-height: 25px;
     text-decoration: none;
 }

 .downloadlink {
     display: inline-block;
     color: #373A36;
     font-size: 14px;
     margin: 0 13px;
     padding-left: 15px;
     text-decoration: none
 }

 .copyrighttxt {
     float: left;
 }

 .copyrightlinks {
     list-style: none;
     float: right;
     margin: 0;
     padding: 0;
     font-size: 14px;
 }

 .copyrightlinks li {
     float: left;
     /*margin: 0 5px;*/
     margin: 0 10px;
 }

 .copyrightlinks li a {
     color: #fff;
     text-decoration: none;
     letter-spacing: .3px;
 }

 .visible-mobile {
     display: none !important;
 }

 .visible-desktop {
     display: flex;
 }

 .copyrightlinks li.xwell-logo {
    margin-left: 30px !important;
    margin-right: 0 !important;
 }

 .btn-nobg {
     background: none;
     border: 0;
 }

 header .navbar {
     padding: 0;
     background: #FFFFFF;
     border-bottom: 1px solid rgba(55, 58, 54, 0.1);
     margin-bottom: 0;
     position: relative;
     height: 80px;
 }

 header .navbar .dropdown-toggle::after {
     display: none;
 }

 .navbar .menuicon {
     padding: 0;
     border: 0;
 }

 .navbar .nav-item {

     z-index: 99;
     position: relative;
     margin-right: 45px;
 }

 /*.navbar .dropdown-item {
    border-bottom: solid 2px #A4A2A21A;
    font-size: 14px;
    padding: 10px 92px 10px 10px;
}*/
 .navbar .dropdown-item {
     font-size: 14px;
     padding: 1.2rem 92px 1.2rem 10px;
 }


 /*TWK-868:The drop down menu alignment is not as per the designs*/

 .navbar-expand-lg .navbar-nav .dropdown:hover ul {
     display: block;
     border-radius: 0 !important;
     padding: 0;
     margin: 0rem 0 0 0;
 }



 .navbar .dropdown-menu li:last-child .dropdown-item {
     border: 0;
 }

 /* .inner-bannerbg {
    min-height: 195px;
    background-size: contain !important;
} */

 ul.navbar-nav li ul li a {
     text-transform: unset !important;
 }

 .navbar-expand-lg .navbar-nav li a.nav-link:hover {
     text-decoration: underline !important;
 }


 .inner-bannerbg {
     height: 250px;
     background-size: cover !important;
     display: flex;
     align-items: center;
 }


 .inner-bannerbg-home .bannerhd {
     margin-top: 0px;
     font-size: 5.7rem;
     font-weight: 700;
     background: linear-gradient(to right, #f9d28a 35%, #ec4a2d 55%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-align: center;
 }

 .inner-bannerbg .bannerhd {
     margin-top: 0px;
     font-size: 5.7rem;
     font-weight: 700;
     background: linear-gradient(to right, #f9d28a 35%, #ec4a2d 55%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     text-align: center;
 }

 .inner-content {
     float: left;
     width: 100%;
 }

 .tabs {
     border-bottom: solid 2px #A4A2A21A;
 }

 .tabs .nav-link {
     color: #373A36
 }

 .tabs .nav-link.active {
     text-decoration: underline;
 }

 .innerwrap {
     width: 1088px;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
 }

 .serviceblock {
     width: 23%;
     margin: 10px 1%;
 }

 .serviceinfo {
     width: 100%;
     background: #5d5d5c;
     padding: 23px 18px;
     min-height: 217px;
     box-sizing: border-box;
 }

 .serviceinfo h5 {
     font-size: 14px;
     color: #FAD78E;
 }

 .serviceinfo p {
     font-size: 14px;
     color: #fff;
     margin: 0;
 }

 .servicetime {
     width: 100%;
     background: #A4A2A21A;
     padding: 7px 18px 8px;
     box-sizing: border-box;
 }

 .servicetime a {
     margin: 0;
     font-size: 14px;
     color: #3EB1C9;
     text-decoration: none !important;
     font-weight: bold;
 }

 .servicetime a img {
     margin: 0 0 0 10px;
 }

 section.inner-content ul li a {
     height: 60px !important;
 }

 section.inner-content ul li a:focus {
     color: #3EB1C9 !important;
 }


 .servicetime a .fa {
     margin-left: 7px;
 }

 .accordion {
     float: left;
     width: 100%;
     padding: 30px 0;
 }

 .accordionleft {
     float: left;
     width: 50%;
     padding-right: 13%;
     box-sizing: border-box;
     border-right: solid 2px #A4A2A21A;
 }

 .accordionright {
     float: left;
     width: 50%;
     padding-left: 10%;
     box-sizing: border-box;
 }

 .accordion-item {
     float: left;
     width: 100%;
     border: 0 !important;
     border-bottom: solid 2px #A4A2A21A !important;
 }

 .accordion-button {
     /* padding: 15px 0 15px 0px !important; */
     border-radius: 0 !important;
     color: #373A36 !important;
 }

 .accordion-button:not(.collapsed) {
     background: none !important;
     border: 0 !important;
     outline: 0 !important;
 }

 .accordion-button:focus {
     box-shadow: none !important;
 }

 .accordion .card-body {
     padding: 0px 20px 30px 40px;
     font-size: 14px;
 }

 .accordion-button.collapsed::after {
     position: absolute;
     left: 0;
     display: none !important;
 }

 .accordion-button.collapsed .icon-add {
     display: block;
     color: #3EB1C9;
 }

 .accordion-button.collapsed .icon-remove {
     display: none;
 }

 .accordion-button::after {
     position: absolute;
     left: 0 !important;
     display: none !important;
 }

 .accordion-button .icon-add {
     display: none;
     margin-right: 10px;
 }

 .accordion-button .icon-remove {
     display: block;
     margin-right: 10px;
     color: #3EB1C9;
 }

 /*appt css*/

 .appt-content-section {
     background: #505050;
     padding: 50px 40px;
     line-height: 25px;
     color: #fff;
 }

 .appt-content-section .appt-form {
     background: #FFFFFFd1;
     padding: 30px;
     min-height: 190px;
 }

 .appt-content-section .appt-form form.row {
     margin-top: 20px;
     width: 100%;
 }

 section.appt-form .col-md-6 {
     margin-bottom: 19px;
 }

 .appt-content-section .appt-form .step {
     color: #373A36;
     font-weight: 500;
 }

 .keypad {
     position: relative;
 }

 .col-md-6 input {
     height: 69px;
     border-radius: 0;
     background: #fff;
     padding-left: 20px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 /*TWK-858 : UI issues in Sign Up form, margin bottom removed for address field*/

 .col-md-12 input {
     height: 69px;
     border-radius: 0;
     background: #fff;
     padding-left: 20px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     margin-bottom: 0px;
 }

 .col-md-3 input {
     height: 69px;
     border-radius: 0;
     background: #fff !important;
     padding-left: 20px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     margin-bottom: 0px;
 }

 .col-md-3 select,
 .select .selectBtn,
 .select .selectDropdown {
     background: #fff !important;
 }

 .keypad .icon {
     position: absolute;
     right: 20px;
     top: 0;
     transform: translateY(20px);
     bottom: 0;
     cursor: pointer;
 }

 .appt-content-section section.appt-form form select {
     height: 69px;
     border-radius: 0px;
     padding-left: 20px;
 }

 .appt-content-section section.appt-form .form-select:disabled {
     background-color: #e9ecef;
     color: #0000007a;
 }

 .appt-content-section p {
     margin-bottom: 20px;
 }

 section.appt-form button.btn-blue {
     width: 86px;
     margin-right: 15px;
     white-space: nowrap;
 }

 section.appt-form button.btn-blue:hover {
     background: #318799;
 }

 a.btn-blue:hover {
     text-decoration: none;
     color: var(--bs-gray-200);
 }

 .step-location {
     color: #373A36;
     margin-bottom: 10px;
 }

 .btn-section {
     display: flex;
     justify-content: flex-start;
     width: 100%;
 }

 .btn-section .btn-back {
     height: 40px;
     color: #3EB1C9 !important;
     border-radius: 50px;
     background: #fff !important;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 15px;
     border: 0;
     font-size: 14px;
     width: 86px;
     margin-right: 15px;
     border: 1px solid #38A0B5 !important;
 }

 .btn-back:hover {
     background: #fff;
     color: #3EB1C9;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: unset;
     padding: 0 15px;
 }

 .input-group-append {
     cursor: pointer;
 }

 /*custom css for calendar*/

 .select {
     position: relative;
     margin-bottom: 15px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }

 .select .selectBtn {
     padding: 10px 20px;
     box-sizing: border-box;
     border-radius: 3px;
     width: 100%;
     cursor: pointer;
     position: relative;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     background: #F5F4F4;
     height: 69px;
     color: #373A36;
     display: flex;
     align-items: center;
 }

 .select .selectBtn:after {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     right: 15px;
     margin: auto;
     width: 6px;
     height: 6px;
     -webkit-transform: translateY(-50%) rotate(45deg);
     transform: translateY(-50%) rotate(45deg);
     border-right: 2px solid #666;
     border-bottom: 2px solid #666;
     transition: 0.2s ease;
 }

 .select .selectBtn.toggle {
     border-radius: 3px 3px 0 0;
 }

 .select .selectBtn.toggle:after {
     -webkit-transform: translateY(-50%) rotate(-135deg);
     transform: translateY(-50%) rotate(-135deg);
 }

 .select .selectDropdown {
     position: absolute;
     top: 100%;
     width: 100%;
     border-radius: 0 0 3px 3px;
     overflow: hidden;
     background: #f5f4f4;
     border-top: 1px solid #eee;
     z-index: 1;
     -webkit-transform: scale(1, 0);
     transform: scale(1, 0);
     -webkit-transform-origin: top center;
     transform-origin: top center;
     visibility: hidden;
     transition: 0.2s ease;
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
 }

 .select .selectDropdown .option {
     padding: 10px 20px;
     box-sizing: border-box;
     cursor: pointer;
     color: #373A36;
 }

 .select .selectDropdown .option:hover {
     background: #f8f8f8;
 }

 .select .selectDropdown.toggle {
     visibility: visible;
     -webkit-transform: scale(1, 1);
     transform: scale(1, 1);
 }

 .select-time-section {
     margin: 25px 0;
 }

 .select-time-section h3 {
     color: #373A36;
 }

 .select-time-section ul {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     margin-top: 25px;
     padding-left: 0
 }

 .select-time-section ul li {
     color: #000;
     border: 1px solid #5EAFC6;
     padding: 5px 15px;
     background: #fff;
     border-radius: 30px;
     cursor: pointer;
 }

 .down-arrow {
     color: #5EAFC6;
     font-weight: 700 !important;
     margin: 0px 0 20px !important;
     cursor: pointer;
     padding-left: 0 !important;
 }

 .select-time-section ul li.disabled {
     background: #fff6;
     cursor: not-allowed;
     border-color: #b3b3b373;
     user-select: none;
 }

 button.btn-blue.disabled {
     background: #a4a2a263;
     color: #A4A2A2;
 }

 /*app-step-3d accordion*/

 .accordion-item {
     background: none;
 }

 .appt-step-3d .accordion-item button {
     background: none;
     color: #38A0B5 !important;
     font-weight: 500;
     position: relative;
 }

 .appt-step-3d .accordion-body {
     padding-left: 0;
 }

 .appt-step-3d button img {
     margin: 0 10px;
     position: relative;
     top: 2px;
 }

 .accordion-item {
     border: none !important;
 }

 button.accordion-button img {
     transform: rotate(180deg);
 }

 button.accordion-button[aria-expanded="false"] img {
     transform: rotate(0deg);
 }

 button.accordion-button[aria-expanded="true"] img {
     transform: rotate(180deg);
 }

 .appt-step-3d .form-check {
     margin-bottom: 15px;
     color: #373A36;
     display: flex;
     align-items: center;
 }

 .appt-step-3d .form-check-input[type=radio] {
     width: 30px;
     height: 30px;
     margin-right: 15px;
     margin-top: 0;
 }

 .appt-step-3d.accordion {
     padding: 10px 0 25px;
 }

 .appt-content-section .appt-form {
     color: #383A36;
     padding: 15px 30px 35px;
 }

 .appt-content-section .appt-form p {
     font-weight: 500;
     margin-bottom: 20px;
 }

 .appt-content-section .appt-form p span {
     color: #38A0B5;
 }

 input::placeholder,
 .appt-content-section .appt-form input::-moz-placeholder,
 .appt-content-section .appt-form input::-webkit-placeholder,
 .appt-content-section .appt-form input::placeholder,
 .appt-content-section .appt-form .selectBtn {
     color: #000 !important;
 }

 .checkbox-section {
     margin-bottom: 25px;
 }

 .checkbox-section .form-check {
     margin: 10px 0 20px;
 }

 section.inner-content.appt-step-4-section .col-md-6 .select {
     margin-bottom: 0;
 }

 section.inner-content.appt-step-4-section .form-check-input[type=checkbox] {
     border: 2px solid;
     width: 22px;
     height: 22px;
     margin-right: 10px;
 }

 .select-time-section ul li.active {
     background: #5EAFC6;
     color: #fff;
 }

 /*Signup*/

 .signup-form h1 {
     padding: 20px 0;
     text-align: center;
     font-size: 30px !important;
     text-transform: uppercase;
     font-weight: 700 !important;
 }

 /* country code */

 .country-code dl#country-select {
     width: 100%;
     margin: 0;
 }

 .dropdown dd ul li a span:first-child,
 .dropdown dt a span span:first-child {
     background-image: url(../png/flag-list.png);
     background-repeat: no-repeat;
     width: 16px;
     height: 11px;
     display: inline-block;
     margin: 10px 15px;
     vertical-align: top;
 }

 .dropdown dt a span {
     cursor: pointer;
     display: flex;
     padding: 5px;
     white-space: nowrap;
     align-items: center;
 }

 .dropdown dt a img {
     position: relative;
     z-index: 1;
 }

 .dropdown dt a span span:first-child:before {
     position: absolute;
     content: '';
     width: 15px;
     height: 10px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
 }

 .dropdown dt a span span {
     display: inline-block;
     padding: 0;
 }

 .dropdown dt a span span:first-child {
     padding: 0;
 }

 .dropdown dd {
     position: relative;
 }

 .nav-link.active,
 .dropdown a,
 .dropdown a:visited {
     color: var(--bs-navbar-active-color);
     text-decoration: none;
     outline: none;
 }


 .dropdown dt a {
     position: relative;
     background: #fff;
     overflow: hidden;
     width: 100%;
     height: 69px;
     display: flex;
     align-items: center;
     box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
 }

 .dropdown dt a span {
     font-weight: 400 !important;
     font-size: 1rem !important;
 }

 .dropdown dt a:after {
     content: "";
     position: absolute;
     top: 45%;
     right: 15px;
     width: 6px;
     height: 6px;
     -webkit-transform: translateY(-50%) rotate(45deg);
     transform: translateY(-50%) rotate(45deg);
     border-right: 2px solid #666;
     border-bottom: 2px solid #666;
     transition: 0.2s ease;
 }

 .dropdown dd ul {
     background: #ffffff;
     color: #C5C0B0;
     display: none;
     left: 0px;
     padding: 5px 0px;
     position: absolute;
     list-style: none;
     max-height: 170px;
     overflow-y: scroll;
     top: 10px;
     z-index: 2;
     width: 100%;
 }

 /*footer list font weight is now as per figma*/
 .footerlinks li ul li a {
     font-size: 14px;
     padding: 3px 0;
     text-decoration: none !important;
     font-weight: 400;
 }

 li a span:nth-child(2) {
     line-height: 2em;
 }

 .dropdown dd ul::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
     border-left: 1px solid rgba(0, 0, 0, 0.1);
 }

 .dropdown dd ul::-webkit-scrollbar-thumb {
     background: rgba(0, 0, 0, 0.4);
 }

 .dropdown dd ul::-webkit-scrollbar-thumb:window-inactive {
     background: blue;
 }

 .dropdown span.value {
     display: none;
 }

 .dropdown dd ul li a {
     padding: 5px 20px 5px 10px;
     display: block;
     font-size: 12px !important;
     border-bottom: 1px solid #ebebeb;
 }

 .dropdown dd ul li a:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }

 dl.dropdown {
     display: inline-block;
     width: 240px;
     margin: -3px 0 0 1px;
 }

 dl.dropdown span:nth-child(3) {
     color: rgba(0, 0, 0, 0.4)
 }

 dl.dropdown>span:nth-child(2) {
     overflow: hidden;
     white-space: nowrap;
     display: inline-block;
 }

 dl.dropdown span:nth-child(3) {
     float: right;
 }

 dl.dropdown dt span:nth-child(2) {
     color: rgba(0, 0, 0, 0.6);
     font-size: 14px;
     font-weight: bold;
     line-height: 1.6em;
 }

 dl.dropdown dt span:nth-child(3) {
     display: none;
 }

 .countryFlag {
     padding: 0;
     background-image: url("https://imgur.com/OQiDoZe");
     background-repeat: no-repeat;
     display: inline-block;
     height: 11px;
     margin-right: 4px;
     width: 16px;
     cursor: pointer;
     white-space: nowrap;
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     border-color: #BFBFC1 #B6B6B6 #969696;
     border-image: none;
     border-radius: 2px 2px 2px 2px;
     border-style: solid;
     border-width: 1px;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.09);
 }

 [type=button]:not(:disabled),
 [type=reset]:not(:disabled),
 [type=submit]:not(:disabled),
 button:not(:disabled) {
     cursor: pointer;
     border: none;
 }

 button:focus:not(:focus-visible) {
     outline: 0;
     border: none;
     box-shadow: none;
 }

 section.my-profile-list ul li a {
     color: #38A0B5;
     height: auto !important;
 }

 div#ddlLocation,
 div#ddlService {
     max-height: 200px;
     overflow-y: auto;
 }

 .loader {
     position: fixed !important;
     bottom: 50% !important;
     z-index: 9;
 }

 .forgot-pwd {
     display: flex;
     align-items: center;
 }


 section.appt-form.create-new-account section.appt-form.signup-form p {
     text-align: left;
     margin: 0;
 }

 section.appt-form.create-new-account section.appt-form.signup-form {
     margin-top: 0 !important;
     padding-top: 0;
 }

 section.appt-form.create-new-account h1 {
     margin-top: 0px;
     padding-top: 10px;
 }

 section.appt-form.create-new-account .createAccount {
     align-items: center;
     justify-content: center;
     max-width: 100%;
 }

 section.appt-form.create-new-account h1 {
     margin-bottom: 0;
     padding-bottom: 5px;
 }

 .appt-content-section.signup-page-section div#commonBody p {
     text-align: center;
 }

 .appt-content-section.signup-page-section h1 {
     margin-bottom: 0;
     padding-bottom: 5px;
 }

 .appt-content-section.signup-page-section {
     padding-top: 0;
 }


 .title {
     margin: 33px auto 33px;
     width: 100%;
     max-width: 1088px;
     text-align: center;
     color: #373A36;
 }

 .title p {
     margin-bottom: 0 !important;
 }

 .h1,
 h1 {
     font-size: calc(1.375rem + 1.5vw) !important;
     font-family: Moderat;
     font-style: var(--font-heading-style);
     font-weight: var(--font-heading-weight) !important;
     letter-spacing: calc(var(--font-heading-scale) * .06rem);
     color: rgb(var(--color-foreground));
     line-height: calc(1 + .3/max(1, var(--font-heading-scale))) !important;
     word-break: break-word;
 }

 .external-pages {
     margin: 180px auto 54px;
     max-width: 1240px;
     padding: 0 34px;
 }

 .navbar-collapse.collapse.show ul li ul li a {
     border-bottom: 1px solid #ddd;
 }

 .user-detail-section section.appt-form.signup-form {
     justify-content: flex-start;
     align-items: flex-start;
 }

 /*header submenu font weight is now as per figma*/
 header .navbar ul li.nav-item.dropdown ul li a {
     background: none;
     font-weight: 400;
     border-bottom: 1px solid #ddd;
     position: relative;
     color: #2d2526 !important;
     padding-left: 17px;
     text-decoration: none !important;
 }

 header .navbar ul li.nav-item.dropdown ul li a:hover {
     color: #444 !important;
 }

 header .navbar ul li.nav-item.dropdown ul li a:focus {
     color: #444 !important;
 }


 header .navbar ul li:hover a {
     background: none;
 }

 .accordion-item button {
     border-bottom: 1px solid #ddd !important;
 }

 .iti.iti--allow-dropdown.iti--separate-dial-code input#phone {
     padding-left: 95px !important;
 }

 form .iti--separate-dial-code .iti__selected-flag {
     width: 80px
 }

 .date-picker .input button {
     background-color: #fff !important;
 }

 ul.topbar-list.visible-desktop li a img {
     height: 15px;
     position: relative;
     top: -3px;
 }

 header .navbar .navbar-nav .nav-link.active,
 header .navbar .navbar-nav .show>.nav-link {
     color: #373A36 !important;
 }

 header .navbar .navbar-nav .nav-link:hover,
 header .navbar .navbar-nav .show:hover {
     color: #000 !important;
     text-decoration: underline !important;
 }

 li.nav-item.dropdown:hover a {
     position: relative;
 }

 /*footer gap was inproper for service, company and connect */

 /* a#Shop\ All,
a#Services,
a#Company,
a#Connect {
    margin-bottom: 12px;
} */


 .grecaptcha-badge {
     display: none !important;
     visibility: visible !important;
 }

 .logo-rightpanel ul li a {
     font-size: 14px;
     font-weight: 700 !important;
     letter-spacing: 0.02rem;
 }

 header .logo {
     margin-right: 49px;
     margin-left: 10px;
 }


 /* header a.logo img {
    max-width: 170px;
    width: 100%;
} */

 #myTab li a:hover {
     color: #373A36 !important;
 }


 .nav-item .arrow-closed {
     display: none;
 }

 .dropdown-menu[data-bs-popper] {
     margin: 0 !important;
     padding: 0 !important;
     border-radius: 0;
 }

 /* Yellow Bar & 404-notfound & SuccessMessage */

 .yellow-bar {
     display: flex;
     width: 100%;
     background: #F8E0A3;
     min-height: 50px;
     text-align: center;
     line-height: normal;
     font-size: 14px;
     font-weight: 500;
     color: #373A36;
     align-items: center;
     justify-content: center;
 }


 #notfound {
     position: relative;
     height: 100vh;
 }

 #notfound .notfound {
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }

 .notfound {
     max-width: 620px;
     width: 100%;
     line-height: 1.4;
     text-align: center;
 }

 .notfound .notfound-404 {
     position: relative;
     height: 240px;
 }

 .notfound .notfound-404 h3 {

     position: relative;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     color: #262626;
     margin: 0;
     letter-spacing: 3px;
     padding-left: 6px;
 }

 .notfound .notfound-404 h1 {
     font-family: 'Montserrat', sans-serif !important;
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-size: 240px !important;
     font-weight: 900 !important;
     margin: 0;
     color: #262626;
     text-transform: uppercase;
     letter-spacing: -40px;
     margin-left: -20px;
     transition: all ease .5s;
     width: 100%;
 }

 .notfound .notfound-404 h1>span {
     text-shadow: -8px 0 0 #fff;
     font-family: 'Montserrat', sans-serif !important;
 }

 .notfound h2 {

     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase;
     color: #727272;
     margin-top: 0;
     margin-bottom: 25px;
 }


 div#commonSuccessMessage a {
     font-weight: 700;
     color: #38A0B5;
 }

 section.appt-form.signup-form .select {
     margin-bottom: 0;
 }

 section.appt-form .col-md-12 {
     margin-bottom: 19px;
 }


 /*TWK-882: Footer links formatting is not as per designs in few devices*/

 footer .wrapper {
     width: 100%;
 }

 footer .wrapper .copyrightlinks li {
     margin: 0 10px;
 }

 /*TWK-837 adding padding in time*/
 span.app-time {
     padding-left: 13px;
     position: relative;
 }


 span.app-time::after {
     position: absolute;
     content: '/';
     left: 0;
     top: -3px;
     width: 10px;
     height: 10px;
     background: none;
 }


 /*TWK-848 - For static labels in the footer hover and click actions are not required*/
 ul.footerlinks.visible-desktop li:first-child:hover {
     text-decoration: underline;
     cursor: pointer;
 }


 /*TWK-895 : reset password page, error msg was overlapping.*/
 .reset-password .col-md-12 span {
     bottom: 0 !important;
     font-size: 14px !important;
 }

 .reset-password .btn-section .btn-blue {
     min-width: 86px !important;
     width: auto;
 }


 /*TWK-912 : (4) Alignment of checkboxes isn't inline with the labels vertically*/
 .checkbox-section .form-check .form-check-input {
     margin-top: 6px;
 }

 /*error message font size will be consistent*/
 span#emailValid,
 span#emailValidNew,
 span#passwordValid,
 .signup-form form span {
     font-size: 14px;
 }

 /*TWK: 835 > (7.) UI issues while booking an appointment*/


 .date-picker .ui-datepicker-header {
     height: 100%;
     line-height: 50px;
     background: #4d4d4f !important;
     color: #fff;
     margin-bottom: 10px;
     display: flex;
     justify-content: center;
 }

 .date-picker .ui-datepicker-prev {
     float: none;
     margin-left: 0;
     margin-right: 8px;
     order: 1;
     margin-top: 7px !important;
     border: none !important;
 }

 .date-picker .ui-datepicker-title {
     order: 2;
     background: #4D4D4F;
     height: 37px;
     display: flex;
     align-items: center;
     justify-content: center;
     transform: translateY(-2px);
 }

 .date-picker .ui-datepicker-next {
     float: none;
     margin-right: 0;
     margin-left: 8px;
     order: 3;
     margin-top: 7px !important;
     border: none !important;
 }

 table.ui-datepicker-calendar thead {
     border-bottom: 1px solid #707070;
 }

 .date-picker .ui-state-default {

     color: #000000 !important;
     font-size: 14px !important;
     font-weight: 700;

 }

 .date-picker .ui-datepicker-inline {

     padding-bottom: 17px;
 }


 .date-picker .ui-state-active {
     background-color: #BBE3EC !important;
     font-weight: 600;
     min-width: 30px;
     min-height: 30px;
     border-radius: 50px !important;
     display: initial !important;
     padding: 5px 6.5px !important;
     width: 30px !important;
     text-decoration: none !important;
     color: #000000 !important;
     font-weight: 700;
 }

 .date-picker .ui-state-active:hover {
     background: #BBE3EC;
     color: #000 !important;
 }

 .toast-message .text-success,
 .text-success {
     color: #fff !important;
 }

 .date-picker .calendar {

     border: 2px solid #373A36;
 }


 .date-picker .ui-datepicker-prev:after {
     content: "";
     position: absolute;
     display: block;
     width: 8px !important;
     height: 9px !important;
     background: url(../svg/left-arrow.svg) no-repeat;
     border: none !important;
     transform: rotate(0) !important;
     animation: none;

 }

 .date-picker .ui-datepicker-next:after {
     content: "";
     position: absolute;
     display: block;
     width: 8px !important;
     height: 9px !important;
     background: url(../svg/right-arrow.svg) no-repeat;
     border: none !important;
     transform: rotate(0) !important;
     animation: none;
 }

 .date-picker .ui-datepicker-calendar thead tr th span {
     color: #000 !important;
 }

 p.mobile-view-only {
     display: none;
 }

 /*my-profile css*/

 section.inner-content.myprofile .my-profile-section {
     margin-top: 0;
 }


 section.inner-content.myprofile .my-profile {
     color: #fff;
     max-width: 1088px;
     margin: 35px auto 0;
     padding: 39px 25px;
     background: #373A36;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 section.inner-content.myprofile .my-profile h4 {
     color: #fff;
     font-weight: 700;
     font-size: 24px;
     line-height: 29px;
     display: flex;
     align-items: flex-start;
     text-align: left;
     color: #F8F8F8;
 }

 .user-detail-section-loyalty-points h4 {
     display: flex;
     flex-direction: column;
 }


 section.inner-content.myprofile h4.name span {
     font-weight: 700;
     font-size: 48px;
     line-height: 40px;
     margin-top: 10px;
     display: flex;
     align-items: center;
 }

 section.inner-content.myprofile .btn-redeem {
     padding: 8px 16px;
     gap: 5px;
     width: 85px;
     height: 33px;
     background: #FFFFFF;
     border-radius: 20px;
     color: #38A0B5;
     font-weight: 700 !important;
     font-size: 14px !important;
     line-height: 17px !important;
     cursor: pointer;
     margin-left: 15px;
 }


 section.inner-content.myprofile img.arrow {
     width: 7.2px !important;
 }

.green-bg {
    background: #1A7D6F !important;
    min-height: 212px;
    position: relative;
}
.green-bg::after {
    background: url(../svg/graphics.svg) no-repeat !important;
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    width: 420px;
    height: 212px;
}

.hidden {
    display: none !important;
}


.yotpo-widget-visual-redemption-widget .yotpo-headline, .yotpo-description, .yotpo-rule, .yotpo-redemption-reward, 
.yotpo-redemption-cost {
     font-family: Moderat !important;
     margin: 25px 0;
}
.yotpo-widget-visual-redemption-widget .yotpo-tile-wrapper {
    max-width: 100% !important;
    margin: 0 auto;
    background: #f9f9f9;
 }
 .yotpo-redemptions-list {
    background: #fff;
}
.yotpo-widget-visual-redemption-widget .yotpo-tile-box {
    padding: 65px 0 0 !important;
}
.yotpo-widget-visual-redemption-widget .yotpo-rule {
    background: #38A0B5 !important;
    color: #fff !important;
    border-radius: 40px;
}

.yotpo-widget-loyalty-floater-widget .yotpo-banner-low {
    height: 40px;
    background: #38A0B5 !important;
}
.yotpo-widget-visual-redemption-widget .yotpo-redemption-item.four-in-row {
    max-width: 300px !important;
    border-right: 1px solid #7070702e;
}
.yotpo-widget-visual-redemption-widget .yotpo-redemption-item.four-in-row:last-child {
     border-right: 0px solid #7070702e;
}


div#divLoyaltyPoints {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    gap: 4px;
    width: 150px;
    height: 36px;
    background: #373A36;
    border-radius: 36px;
    color: #fff;
    font-size: 14px;
    margin-right: 36px;
    cursor: pointer;
}


.points {
    width: 110px;
    text-align: center;
}
div#divLoyaltyPoints a {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    div#divLoyaltyPoints a:hover {
        color: #fff !important;
        text-decoration: none !important;
    }

 /*media query*/

 @media screen and (max-width: 1525px) {
     .inner-bannerbg-home .bannerhd {
         font-size: 6vw;
     }

     .inner-bannerbg .bannerhd {
         font-size: 6vw;
     }

 }

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

     .wrapper,
     .footerrow .wrapper,
     .banner .wrapper {
         width: 94%;
     }

     .innerwrap {
         width: 90%;
     }

     .serviceblock {
         width: 31%;
     }
 }

 @media screen and (min-width: 992px) {
     .navbar-expand-lg .navbar-nav {
         position: relative;
     }

     .navbar-expand-lg .navbar-nav .dropdown-menu {
         transform: translateY(-1px);
     }
 }

 @media (max-width: 991px) {

     ul.cart-menu.panel-group .dropdown-menu.show {
         width: 180px;
         top: 56px;
         margin: 0 -76px;
         right: 0 !important;
     }

     p.mobile-view-only {
         display: block;
         font-weight: 700;
         margin: 20px 38px 10px;
         display: flex;
         align-items: center;
         font-size: 14px;
         font-weight: 700 !important;
     }

     p.mobile-view-only img {
         margin-right: 20px;
     }

     /*sign out message font size*/
     section.appt-form.signup-form h1 {
         font-size: 20px !important;
         line-height: normal !important;
     }



     .my-profile-section {
         margin: 5px 20px 54px !important;
     }

     .copyrightlinks {
         font-size: 12px;
     }

     .copyrighttxt {
         float: left;
         width: 100%;
         text-align: center;
     }

     footer .wrapper ul.copyrightlinks {
         width: 100%;
         justify-content: center;
         text-align: center;
         margin: 0 auto;
         display: flex;
     }

     header .nav-item a.nav-link {
         height: 60px !important;
     }

     .title {
         margin: 25px auto 33px;
         padding: 0 12px;
     }

     .external-pages {
         margin: 140px auto 54px;

     }

     .dropdown-menu.show {
         display: block !important;
     }

     /*TWK-829 : The alignment of the options is not as per the designs when Services, Locations options are expanded*/
     ul#collapse-services,
     ul#collapse-locations {
         padding: 0 0px;
         width: 100%;
         border: none;
         position: relative;
         left: 0;
         right: 0;
         top: 0;
         border-top: 1px solid #ddd !important;
         border-radius: 0;
         z-index: 9999999 !important;
         text-decoration: none !important;
         border: none;
     }



     /*header top navbar submenu alignment fixed as per xd*/
     ul#collapse-services li a,
     ul#collapse-locations li a {
         padding: 15px 28px 15px 40px;
         background-position: 95% !important;
     }


     .col-lg-6 {
         margin-bottom: 19px;
     }

     .date-picker {
         margin-bottom: 0px;
         max-height: 69px !important;
     }

     .date-picker .input button {
         height: 69px !important;
     }

     .visible-mobile-lg {
         display: block;
     }

     .nav-item .arrow-closed {

         right: 20px;
         position: absolute;
         margin: 0px 0;
         top: 10px;
     }

     .nav-item .arrow-closed {
         display: block;
     }

     .cart-menu button[aria-expanded="false"] img {
         transform: rotate(0deg);
     }


     button[aria-expanded="false"] img {
         transform: rotate(0deg);
     }

     button[aria-expanded="true"] img {
         transform: rotate(-90deg);
     }


     header .navbar {
         padding: 0px 0 0;
         margin-bottom: 0;
         min-height: 60px;
         height: 60px;
     }

     .dropdown a:hover {
         color: #3EB1C9 !important;
         background: none;
     }

     .logo-rightpanel ul li a:hover {
         text-decoration: none !important;
     }


     .topbar .wrapper {
         padding: 10px 0;

     }


     .accordionleft {
         width: 100%;
     }

     div#navbarSupportedContent {
         position: absolute;
         top: 60px;
         background: #fff;
         width: 100%;
         left: 0;
         padding: 0px 0px 0;

     }

     .navbar .nav-item {
         padding: 0px 0px 0px;
         border-bottom: 1px solid #ddd;
         background: #fff;
         display: flex;
         align-items: flex-start;
         flex-direction: column;
         justify-content: center;
         margin-right: 0;
     }


     ul.navbar-nav.me-auto.mb-2.mb-lg-0 {
         margin-bottom: 0px !important;
     }

     .navbar-nav {
         float: left;
         margin: 0;
         width: 100%;
     }

     .navbar-nav {
         margin: 0;
     }

     .navbar .menuicon {
         width: 30px;
         height: 30px;
     }

     .menu-header {
         display: flex;
         align-items: center;
     }

     .logo {
         margin-left: 10px;
     }

     .navbar .dropdown-item {
         font-size: 14px;
         padding: 15px 92px 15px 10px;
     }

     .navbar-expand-lg .navbar-nav .dropdown:hover ul {
         display: block;
         border-radius: 0;
         padding: 10px 0;
         margin: 0px 0;
     }

     .nav-item a.nav-link {
         white-space: nowrap;
         padding: 15px 40px;
         height: 0px;
     }

     .inner-content .nav-item a.nav-link {
         white-space: nowrap;
         padding: 15px 15px;
         height: 0px;
     }

     .edit-section ul {
         width: auto !important;
         padding: 0;
     }

     .dropdown-menu[data-bs-popper] {

         margin-top: unset !important;
     }


     ul#collapse-services:hover li a,
     ul#collapse-locations:hover li a {
         text-decoration: none !important;
     }

     /* my profile list was appearing in two columns on 991px and it is in 3 columns. */
     section.my-profile-list ul {
         gap: 25px !important;
     }


     /* yellow Bar */

     .yellow-bar {
         padding: 10px;
     }

     /* End yellow-bar */



     .dropdown-mobile.collapse {
         display: flex;
         border: 0;
         flex-direction: column;
     }

     .dropdown-mobile li a {
         font-weight: 700;
     }

     .navbar-collapse {
         width: 100%;
         display: flex;
         position: absolute;
         z-index: 9;
         background: #fff;
         top: 80px;
         box-sizing: border-box;
         left: 0px;
     }



     .navbar-expand-lg .navbar-nav .dropdown:hover ul.dropdown-menu.show {
         display: block;
     }

     .mb-2 li.nav-item,
     .mb-2 li.dropdown {
         /* added */
         padding: 0rem 0;
         border-top: solid 0px #ddd;
         position: relative;
         /*display: flex;
       justify-content: space-between;*/
     }

     .accordionleft,
     .accordionright {
         float: left;
         width: 100%;
         border: 0;
         padding: 0;
     }

     .menu-product-image {
         margin-bottom: 20px;
         padding-left: 35px;
     }

 }

 @media screen and (min-width: 641px) {
     .nav-item.dropdown:hover a.nav-link {
         color: #000;
         text-decoration: underline !important;
     }

     .tabs .nav-link.active,
     .nav-link:hover {
         text-underline-offset: unset !important;
     }

     .nav-item:hover a.nav-link.active {
         /*color: #3EB1C9;
        text-decoration: none;*/
         text-decoration: none !important;
     }
 }

 @media screen and (max-width: 767px) {
     .topbar a.btn-blue {
         right: 10px;
     }


 }

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

     /*TWK-912 : (2) Have proper padding between City and Zip code field/ shift Zip code to a new/next line*/
     section.appt-form.signup-form .col-6.col-md-6 {
         width: 100%;
     }

     /*signout message horizontally and vertically center.*/
     section.appt-form.signup-form {
         justify-content: center !important;
         align-items: center !important;
     }

     section.appt-form.signup-form #commonBody p {
         padding-left: 0;
     }

     section.appt-form.signup-form h1 {
         font-size: 22px !important;
         font-weight: 600 !important;
     }

     section.my-profile-list ul {
         gap: 16px !important;
     }

     section.appt-form.signup-form form.row {
         margin-top: 0;
     }

     .edit-section {
         right: 0 !important;
         position: relative !important;
         top: 20px !important;
     }

     section.appt-form.create-new-account h1 {
         margin-top: 0px;
         padding-top: 10px;
         text-align: center;
         width: 100%;
     }

     .appt-content-section.signin-page .createAccount {
         justify-content: flex-start;
     }

     section.appt-form.create-new-account section.appt-form.signup-form p {
         text-align: center;
         margin: 0;
     }

     .appt-content-section.signup-page-section h1 {
         margin-bottom: 0;
         padding-bottom: 5px;
         text-align: center;
         width: 100%;
     }

     .title {
         margin: 10px auto 33px;

     }

     section.appt-form.signup-form label {
         font-size: 14px;
         color: #666;
         margin-bottom: 5px;
     }

     .inner-content#innerContent {
         margin-bottom: 54px;
     }

     #collapse-topheader {
         top: 40px;
     }

     header .navbar {
         padding: 3px 0;
     }

     .banner .bannerbg,
     .banner .inner-bannerbg {
         background-color: #fff !important;
     }

     .appt-content-section .appt-form form.row {
         margin-top: 20px;
         width: 100%;
         margin-right: 0;
         padding-right: 0;
         --bs-gutter-x: 0;
     }

     .inner-bannerbg {
         height: 129px;
         background-size: cover !important;
         display: flex;
         align-items: center;
     }

     .inner-content {
         margin-top: 20px;
     }

     .appt-content-section {
         background: #fff !important;
     }

     .bannertext {
         color: var(--bs-body-color);
     }

     .bannerhighlighter {
         background-color: #E6E6E6;
     }

     .visible-mobile {
         display: flex !important;
         align-items: center;

     }

     footer ul.footerlinks.visible-mobile {
         flex-direction: column !important;
     }

     footer ul.footerlinks.visible-mobile li {
         width: 100%;
     }


     header .topbar button.arrow-down-closed[aria-expanded="false"] img {
         transform: rotate(0deg);
     }

     header .topbar button.arrow-down-closed[aria-expanded="true"] img {
         transform: rotate(-180deg);
     }


     .visible-desktop {
         display: none !important;
     }

     .logo {
         margin: 0 7px;
     }

     a.logo img {
         height: 28px;
     }

     .topbar {
         background-color: #f8f8f8;
     }

     /* .footerrow {
        display: none;
    } */

     .navbar-collapse .mb-2 {
         margin-bottom: 0 !important;
         width: 100%;
     }

     .me-auto {
         margin-right: 0;
     }

     /*
    .nav-item .arrow-closed {
        display: flex;
        right: 0;
        position: absolute;
        margin: 5px 2rem;
    }   
*/
     .bannerbg {
         background-size: 100% 130px;
         background-color: #505050;
         /*padding: 35px 0 0;*/
         padding: 5px 0 0;
         /*yb*/
         float: none;
         background-size: cover !important;
         width: 100%;
         height: 129px;
     }

     .bannerhd {
         margin-bottom: 70px;
         margin-bottom: 20px;
     }

     /*
    .bannertext {
        width: 100%;
        margin-right: 0;
        margin-bottom: 27px;
    }
    */
     .bannertext {
         width: 100%;
         margin-top: 30px;
         /*yb*/
         margin-right: 0;
         margin-bottom: 27px;
         padding: 0 24px;
         /* color: #fff; */
     }

     .banner {
         float: left;
         width: 100%;
         padding: 0px;
     }

     .bannerhighlighter {
         width: 100%;
         margin-bottom: 54px;
     }

     .highlighter-row .text {
         width: 85%;
     }

     .footerlinks {
         flex-wrap: wrap;
         margin: 0;
         padding: 0px;
     }

     .footerlinks li {
         width: 100% !important;
         border-top: 1px solid #ccc;
         text-align: left;
         display: flex;
         justify-content: flex-start;
         padding: 23px 0;
         flex-wrap: wrap;
         padding-left: 20px;
     }

     .footerlinks li ul {
         background: none;
         border: 0;
     }

     .footerlinks li ul.dropdown-menu.show {
         position: relative !important;
         transform: none !important;
         width: 100%;
         margin-top: 10px !important;
         top: 0;
     }

     .footerlinks li ul li {
         border: 0;
         padding: 0;
     }

     .footerlinks .nav-item a.nav-link {
         max-width: 550px;
         height: 25px;
         font-style: normal;
         font-weight: 700;
         font-size: 14px;
         line-height: 17px;
         display: flex;
         align-items: center;
         justify-content: flex-start;
         padding-bottom: 0;
         position: relative;
         padding-top: 0;
         width: 100%;
         text-align: left;
         padding-left: 0;
         text-decoration: none !important;
     }

     .footerlinks .nav-item a.nav-link:hover {
         color: black !important;
     }


     .footerrow .wrapper {
         width: 100%;
     }

     .copyrightrow {
         padding: 20.5px 0;
     }

     .copyrighttxt {
         width: 100%;
         text-align: center;
         font-size: 14px;
         margin-bottom: 12px;
     }

     .copyrightlinks {
         width: 100%;
         display: flex;
         justify-content: center;
         float: none;
     }

     .copyrightlinks li {
         font-size: 12px;
     }

     .xwell-logo {
         display: none;
     }

     .applinks {
         width: 100%;
         border-top: 1px solid #A4A2A2;
         display: flex;
         justify-content: center;
         margin: 0;
         padding: 10px;
         box-sizing: border-box;
     }

     header .navbar-toggler:focus {
         box-shadow: none;
     }


     .inner-bannerbg-home .bannerhd {
         font-size: 3rem;
         font-weight: 700;
         text-align: left;
         line-height: normal;
     }

     .inner-bannerbg .bannerhd {
         font-size: 3rem;
         font-weight: 700;
         text-align: left;
         line-height: normal;
     }

     .serviceblock {
         width: 48%;
     }

     .appt-content-section {
         padding: 20px 20px 40px;
     }

     .col-6.col-md-3 {
         width: 100%;
     }

     .logo-rightpanel .dropdown-loggin {
         left: -80px;
         top: 55px !important;
         max-width: 190px;
         margin: 2.9rem 0;
         border-radius: unset;
     }

     .topbar ul li a img {
         width: auto !important;
     }


     .logobar .wrapper {
         align-items: center;
     }

     .appt-content-section .appt-form {
         background: #e6e6e6;
         padding: 22px 19px 24.24px !important;
         min-height: 190px;
     }

     .btn-section .btn-back {
         min-width: 86px;
     }

     .appt-content-section {
         margin: 0px auto 38px !important;
         padding: 0px 19px !important;
         background: #fff !important;
     }

     .select-time-section h3 {
         font-size: 24px;
     }

     .select-time-section ul {
         padding-left: 0 !important;
     }

     .service-text {
         margin-right: 0 !important;
     }

     section.upcoming-appointment-list h4 {
         padding: 10px 0;
     }

     footer {
         padding: 0rem 0 0;

     }

     .appt-content-section p {
         margin-bottom: 26px;
         padding: 0 20px;
         font-size: 14px;
     }

     button.btn.arrow-down-closed {
         position: relative;
         top: -3px;
     }

     .select {
         margin-bottom: 0;
     }

     .date-picker .input .result {
         height: 69px;
         line-height: 69px;
     }

     .btn-section.mt-3 {
         margin-top: 0 !important;
     }

     .appt-content-section .appt-form .step {
         margin-bottom: 14px;
     }

     .step-location {
         font-size: 14px;
     }

     .navbar .menuicon {
         width: 30px;
         height: 30px;
     }


     .upcoming-list {
         flex-direction: column;
         text-align: center;
         align-items: center;
         padding: 20px 0px;
     }

     .appointment-details-section {
         margin: 0px 20px 0px;
         padding: 20px;
     }

     .forgot-pwd {
         display: flex;
         align-items: flex-start;
         flex-direction: column;
         justify-content: flex-start;
         text-align: left;
     }

     .createAccount {

         margin-top: 20px;
         font-size: 14px;
     }

     .signup-form h1 {
         padding: 0px 0;
     }

     .appt-content-section .appt-form {
         padding: 15px 15px 24.24px !important;
     }

     .btn-section.btnSignIn {
         justify-content: flex-start;
         margin-bottom: 15px;
     }

     .appt-content-section.signin-page {
         margin-bottom: 0 !important;
     }

     footer .footerrow .dropdown-toggle {
         position: relative;
     }

     footer .footerrow .dropdown-toggle::after {
         display: inline-block;
         position: absolute;
         content: "";
         right: 20px;
         top: 8px;
         background: url(../svg/add.svg) no-repeat;
         width: 20px;
         height: 20px;
         border: none;
         transform: rotate(90deg);
     }

     footer .footerrow a.nav-link.dropdown-toggle[aria-expanded="true"]::after {
         display: inline-block;
         position: absolute;
         content: "";
         right: 14px;
         top: 14px;
         background: url(../svg/remove.svg) no-repeat;
         width: 20px;
         height: 20px;
         border: none;
         transform: rotate(0deg);
     }

     /* Not-found */
     .notfound .notfound-404 h1 {
         font-size: 150px;
     }

     .notfound h2 {

         padding: 0 30px;
     }


     section.inner-content.myprofile .my-profile {
         margin: 0 auto 0;
     }
     section.inner-content.myprofile {
        margin-top: 0;
    }

     /* End Not-Found */

     section.appt-form.signup-form {
        display: flex;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-direction: column;
        text-align: left;
    }

    section.inner-content.myprofile .my-profile {
        margin: 0 auto 0;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start;
    }
    section.inner-content.myprofile .my-profile .user-detail-section {
        width: 100%;
        border-bottom: 1px solid #dddddd73;
        padding: 0 0 15px 0;
        margin-bottom: 20px;
    }
    section.appt-form.signup-form p {
        margin-bottom: 0;
    }

}

 @media screen and (max-width: 580px) {
    /* div#divLoyaltyPoints {
        position: relative;
        top: -55px;
        left: -50px;
    } */
    a.logo img {
        height: auto;
    }
    
    div#divLoyaltyPoints {
        margin-right: 15px;
    }


 }
 @media screen and (max-width: 480px) {
     .navbar .nav-item {
         padding: 0;
     }

     div#divLoyaltyPoints a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 8px;
    }
    
     div#divLoyaltyPoints {
        margin-right: 0;
        font-size: 12px;
        padding: 8px 0 !important;
        top: 0;
        left: 0;
        width: 130px;
    }

    .cart-menu li {
        padding: 0 2px;
    }
    .navbar .menuicon {
        width: 24px;
        height: 26px;
    }


     /*TWK-912 : (4) Alignment of checkboxes isn't inline with the labels vertically*/
     .checkbox-section .form-check .form-check-input {
         margin-top: 7px;
     }

     .checkbox-section .form-check {
         margin: 10px 0 10px;
     }


     /* added */
     .serviceblock {
         width: 98%;
     }

     .select-time-section ul {
         gap: 12px;
     }

     .select-time-section ul li {
         font-size: 13px;
         width: 30%;
         white-space: nowrap;
         text-align: center;
         padding: 5px 8px;
         max-width: 93px;
         height: 35px;
     }

     .appt-content-section .appt-form {
         padding: 15px;
     }

     .inner-bannerbg-home .bannerhd {
         font-size: 2.4rem;
     }

     .inner-bannerbg .bannerhd {
         font-size: 2.4rem;
     }

     .checkbox-section {
         margin-bottom: 25px;
         font-size: 13px !important;
     }

     section.inner-content.appt-step-4-section .form-check-input[type=checkbox] {
         width: 18px;
         height: 18px;
     }

     .inner-bannerbg-home {
         height: 155px;
     }

     .inner-bannerbg {
         height: 155px;
     }

     .points {
        width: 100%;
        margin: 0 0px;
    }

 }


 @media screen and (max-width : 360px) {
     footer .wrapper .copyrightlinks li {
         margin: 0 4px;
     }
 }



 /* mobile Toggle opening and close dropdown */

 .navbar-toggler[aria-expanded="false"] .navbar-close-icon {
     display: block;
 }

 .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon,
 .navbar-toggler[aria-expanded="false"] .navbar-close-icon {
     display: none;
 }

 /* Style from Gabe */

 .topbar-list li {
     padding: 0 20px;
 }


 .nav-item a.nav-link {
     width: 50%;
     height: 80px;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
     line-height: normal;
     display: flex;
     align-items: center;
     padding-top: 10px;
 }


 /*
.nav-item a.nav-link {
    width: 50%;
    font-style: normal;
    font-weight: 600;
    line-height: 19px;
    display: flex;
    align-items: center;
}
*/

 a.btn-orange:hover {
     text-decoration: none;
 }

 .btn-orange {
     height: 40px;
     background: #FF6700;
     border-radius: 10px;
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 15px;
     border: 0;
     font-size: 14px;
     text-decoration: none;
 }

 .cart-menu li.visible-desktop a {
     font-weight: 600;
     white-space: nowrap;
 }

 .footerlinks li {
     float: left;
     width: 25%;
     list-style: none;
     font-weight: bold;
     color: #373A36;
     font-size: 1.2rem;
     line-height: 30px;
 }