/**/

:root {
  --blue: #1DA3DD;
  --orange: #FF8330; 
  --white: #ffffff; 
  --gray: #FDFDFD;
  --green: #22B14C;
  --yellow: #FFC80A;
  --red: #FF0000;
}

body{font-family: "Inter", serif;background-color: #f2f2f2;padding: 0px;margin: 0px;}

.social_topbar {background: var(--blue);}
.social_topbar .topbar_left { padding: 13px 20px;}
.social_topbar .topbar_left ul.social_links {padding: 0;list-style: none;margin: 0;display: flex;gap: 20px;align-items: center;}
.social_topbar .topbar_right {padding: 13px 20px;display: flex;justify-content: space-between;align-items: center;position: relative;}
.social_topbar .topbar_right:before {content: '';position: absolute;top: 0;left: 7.5px;background: var(--orange);width: 100%;height: 100%;z-index: 0; clip-path: polygon(3% 0, 100% 0%, 100% 100%, 0 100%);}
.social_topbar .topbar_right .topbar_text {font-size: 14px;line-height: 24px;font-weight: 500;color: #fff;width: 50%;text-align: center;position: relative;z-index: 1;}
.social_topbar .topbar_right ul {margin: 0;padding: 0;display: flex;list-style: none;gap: 3rem;position: relative;z-index: 1;}
.social_topbar .topbar_right ul li a {font-size: 14px;line-height: 24px;font-weight: 400;color: #fff;}

nav.main_header_cls {box-shadow: 0px 4px 9.1px 0px #00000014;margin-bottom: 35px; padding: 10px 20px;}
nav.main_header_cls ul.header_left_col li a {font-size: 22px;line-height: 24px;font-weight: 600;color: #1A1919;}

nav.main_header_cls ul.header_right_col {align-items: center;}
nav.main_header_cls ul.header_right_col .profile_area {display: flex;align-items: flex-start;gap: 10px;padding-right: 15px;border-right: 1px solid #C1C1C1;}
nav.main_header_cls ul.header_right_col .profile_area h3 {font-size: 14px;line-height: 17px;font-weight: 500;margin: 0;color: #404040;}
nav.main_header_cls ul.header_right_col .profile_area ul.user_info {padding: 0;margin: 0;list-style: none;}
nav.main_header_cls ul.header_right_col .profile_area ul.user_info li {font-size: 12px;line-height: 15px;font-weight: 300;margin: 0 0 5px;color: #202224;}
nav.main_header_cls ul.header_right_col .profile_area ul.user_info li span {color: #000;font-weight: 400;}

nav.main_header_cls ul.header_right_col .dropdown.avatar_area {padding-left: 15px;}
nav.main_header_cls ul.header_right_col .avatar_area > a {display: flex;gap: 10px;align-items: center;color: #404040;}
nav.main_header_cls ul.header_right_col .avatar_area > a p {margin: 0;font-size: 14px;line-height: 24px;font-weight: 700;font-family: "Nunito", serif;color: #404040;}

.content-wrapper {padding-left: 10px;background-color: #f2f2f2;}

.sidebar-mini .main-sidebar {box-shadow: 0px 4px 51.9px 16px #00000008;}
.sidebar-mini .main-sidebar .sidebar{padding-left: 0px;padding-right: 0px;}
.sidebar-mini .main-sidebar .brand-link {padding: 23px 32px;border: 0;}
.sidebar-mini .main-sidebar .brand-link img { width: 100%;}

.sidebar-mini .nav-sidebar{padding-left: 0px;padding-right: 0px;}
.sidebar-mini .nav-sidebar, .sidebar-mini .nav-sidebar .nav-link, 
.sidebar-mini .nav-sidebar > .nav-header {overflow: visible;}
.main-sidebar .nav-sidebar>.nav-item>.nav-link{border-radius: 8px; padding: 12px;display: flex;align-items: center;gap: 15px;position: relative;}
.main-sidebar .nav-sidebar>.nav-item>.nav-link img{width: 20px;height: 20px;}

.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link:before {content: '';position: absolute;left: -32px;top: 0px;background-image: url(../images/menu-icons/active-left.svg);background-size: contain;background-repeat: no-repeat;background-position: center;height: 100%;width: 8px;opacity: 0;}


[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link img,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active img{filter: invert(1);}
.main-sidebar .nav-sidebar>.nav-item>.nav-link {font-size: 14px;line-height: 24px;font-weight: 400;}

[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {background-color: var(--blue);color: var(--gray);box-shadow: unset;}

[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link:before,
.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active:before{opacity: 1;}

[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link,
.main-sidebar .nav-sidebar>.nav-item>.nav-link.active {font-weight: 500;}

.main-sidebar .nav-sidebar>li.nav-item.sidebar_logout_btn {padding: 50px 32px;margin-bottom: 60px;}
.main-sidebar .nav-sidebar>li.nav-item.sidebar_logout_btn a {background-color: var(--orange);display: block;padding: 12px;text-align: center;color: #fff;font-size: 14px;line-height: 24px;font-weight: 600;border-radius: 24px;}

.sidebar-collapse .main-sidebar .sidebar{padding: 10px 12px;}
.sidebar-collapse .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link {gap: 0px;}
.sidebar-collapse .main-sidebar .brand-link {padding: 10px 5px;}
.main-sidebar .sidebar .orange-bg-wrap { display: flex; flex-direction: column; list-style-type: none; padding-left: 0px; background-color: #FFF3EB;padding: 15px 0px;}
.main-sidebar .sidebar .blue-bg-wrap { display: flex; flex-direction: column; list-style-type: none; padding-left: 0px; background-color: #EDF7FD;padding: 15px 0px; }
.main-sidebar .sidebar .nav-sidebar .nav-item{padding-left: 32px; padding-right: 32px;margin-bottom: 15px;}
/* Account Detail Page Css RJ */

.account-detail-container {background: #fff;border-radius: 14px;padding: 36px 30px;}
.account-detail-container .account-user-image {padding-bottom: 62px;}
.account-detail-container form { width: 60%;}
.account-detail-container form .info-row {display: flex;flex-wrap: wrap;gap: 20px; margin-bottom: 20px;}
.account-detail-container form .info-row .col_1 {width: 35%;}
.account-detail-container form .info-row label {font-size: 14px;line-height: 24px;text-transform: capitalize;margin: 0;font-weight: 400;display: flex;gap: 10px;align-items: center;}
.account-detail-container form .info-row label:not(.form-check-label):not(.custom-file-label) {}
.account-detail-container form .info-row label span {color: #888;}

.account-detail-container form .form-button {display: flex;gap: 40px;align-items: center;padding-top: 50px;}
.account-detail-container form .form-button a {width: 200px; font-size: 14px;font-weight: 600;line-height: 22px;color: #fff;border-radius: 100px;padding: 12px;text-align: center;}
.account-detail-container form .form-button a.orange_btn {border: 1px solid var(--orange);background: var(--orange);}
.account-detail-container form .form-button a.blue_btn {border: 1px solid var(--blue);background: var(--blue);}
.account-detail-container form .form-button a:hover{background: transparent;}
.account-detail-container form .form-button a.orange_btn:hover{color: var(--orange);}
.account-detail-container form .form-button a.blue_btn:hover{color: var(--blue);}

/* Eye Exam Page Css RJ */

.eye-exam-time-remaining,
.eye-exam-date-location {padding: 42px 33px 52px;background: #ffffff;border-radius: 10px 10px 10px 10px;}
.eye-exam-time-remaining,
.eye-exam-date-location h3 {font-size: 22px;font-weight: 400;line-height: 24px;color: #202224;}

.remaining-time-content-box {display: flex;gap: 30px;padding-top: 44px;text-align: center;}
.remaining-time-content-box .remaining-time {background: #1da3dd;width: 100px;height: 100px;border-radius: 22px;text-align: center;font-size: 42px;font-weight: 600;line-height: 50.83px;color: #fff;padding: 25px;}
.remaining-time-content-box .time-content {font-size: 22px;font-weight: 300;line-height: 26.63px;color: #000;padding-top: 20px;text-transform: uppercase;}
.eye-exam-date-location {margin-top: 42px;padding: 38px 33px;}
.eye-exam-date-location-content-box {display: flex;gap: 70px;padding: 39px 0px 49px;}
ul.date-location-content-box {display: flex;padding-left: 0px;list-style-type: none;gap: 10px;}
ul.date-location-content-box li.date-location {font-size: 16px;font-weight: 400;line-height: 24px;color: #202224;}
.book-appointment {display: inline-block;padding: 12px 40px;background: var(--orange);border-radius: 100px;}
.book-appointment a {color: #fff;font-size: 14px;font-weight: 600;line-height: 24px;}
.content-height {height: 400px;}

/* Favorite Frame Page Css */
.favorite-frame-box {background: #ffffff;border-radius: 20px;margin-bottom: 30px;position: relative;}
.favorite-frame-box .wish-box {padding:35px 15px;}
.favorite-frame-box .heart {position: absolute;top: 20px;right: 20px;}
.favorite-frame-box .glasses-img img {width: 100%;padding: 37px 0px 0px;}
.favorite-frame-box .john-jacobs {padding: 33px 0px 15px 14px;display: flex;font-size: 14px;font-weight: 400;line-height: 14px;}
.favorite-frame-box .john-jacobs .vertical-align {border: 0.5px solid #bebebe;margin: 0px 5px 0px 8px;}

.view-frame-box {display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 15px;}
.view-frame-box .price {font-size: 32px;font-weight: 500;line-height: 24px;}

.view-frame-box .view,
.view-frame-box .try-on {width: 42%;}

.view-frame-box .view a,
.view-frame-box .try-on a {font-size: 14px;font-weight: 600;line-height: 24px; display: inline-block;width: 100%;cursor: pointer;border-radius: 100px;padding: 10px 27px;text-align: center;}

.view-frame-box .view a {color: #1da3dd !important;border: 1px solid #1da3dd;}
.view-frame-box .try-on a {background: #ff8330;color: #fff !important;border: 1px solid #ff8330;}

.favorite-frame-images {display: flex;justify-content: center;border: 0.5px solid #bebebe;border-radius: 15px;}
.favorite-frame-images .view-img {padding: 19px 12px 16px 18px;width: 33%;text-align: center;border-right: 0.5px solid #bebebe;}
.favorite-frame-images .view-img:last-child{border-right: 0px;}
.view-img img {width: 65%;}

/* message alert css */

.accordion-item {background: #fff;border-radius: 10px;margin-bottom: 30px;position: relative;}
.accordion-item:first-of-type,.accordion-item:last-of-type {border-radius: 10px;}
.accordion-item.orange-vertical-line::before,.accordion-item.blue-vertical-line::before {position: absolute;content: "";width: 11px;height: 100%;border-radius: 10px 0px 0px 10px;}
.accordion-item.orange-vertical-line::before {background: #ffdfc9;}
.accordion-item.blue-vertical-line::before {background: #1ea3dd42;}
.accordion-button {cursor: pointer;}
.message-alert-icon,.accordion-angle { width: 42px; height: 42px; border-radius: 50%; text-align: center;}
.message-alert-icon { padding: 10px 20px; color: #fff; margin: 25px 19px 20px 25px;}
.message-alert-icon.orange-alert-icon {background: #ff8330;}
.message-alert-icon.blue-alert-icon {background: #1ea3dd;}
.accordion-button h5 { font-size: 16px; font-weight: 600; line-height: 24px; text-transform: capitalize; margin-bottom: 0px;}
.accordion-button .title-content .heading-content { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;}
.accordion-button .title-content .heading-content p { font-size: 14px; font-weight: 400; line-height: 24px; margin-bottom: 0px;}
.title-content .date-time { font-size: 14px; font-weight: 400; line-height: 24px; color: #888; padding-top: 6px; }
.accordion-button .accordion-angle { border: 1px solid black; color: #000; padding: 13px; margin: 19px; position: absolute; right: 0;}
.accordion-item .accordion-collapse {border-top: 1px solid #ececec;line-height: 26px;}
.accordion-item .accordion-collapse p{padding: 15px 36px 15px 25px;margin-bottom: 0px;font-size: 14px;font-weight: 400;color: #5c5c5c;}
.accordion-button.collapsed .fa-angle-up {display: none;}
.accordion-button.collapsed .fa-angle-down {display: block;}
.accordion-button .fa-angle-up {display: block;}
.accordion-button .fa-angle-down {display: none;}

/* Receipt Details */


.back-to-btn i { color: #979797; width: 24px;}
.back-to-btn a { font-size: 16px; font-weight: 500; line-height: 24px; color: #202224;}

.receipt-main {border: 0.3px solid #b9b9b9;border-radius: 14px;background: #ffffff;margin-top: 30px;}
.receipt-main .receipt-header {border-bottom: 0.4px solid #97979760;padding: 20px 31px 26px 20px;}
.receipt-main .receipt-header .left-logo-col {display: flex;align-items: center;gap: 10px;}
.receipt-main .receipt-header .left-logo-img img {width: 100%;}
.receipt-main .receipt-header .left-logo-col p {font-size: 14px;font-weight: 500;line-height: 21px;color: #202224;max-width: 36%;margin-bottom: 0px;}
.receipt-main .receipt-header .right-logo-col {display: flex;align-items: flex-start;gap: 26px;justify-content: flex-end;}
.receipt-main .receipt-header .right-receipt-content {display: flex;flex-direction: column;align-items: center;}
.receipt-main .receipt-header .right-col-receipt h3 {font-size: 42px;font-weight: 600;line-height: 48px;color: #7d7d7d;margin-bottom: 0px;}
.receipt-main .receipt-header .right-col-receipt label,
.receipt-main .receipt-header .right-col-receipt span {font-size: 14px;font-weight: 400;line-height: 24px;margin-bottom: 0px;}
.receipt-main .receipt-header .right-col-receipt span {color: #888;padding-left: 6px;}

.receipt-main .patient-datail {padding: 30px 49px 43px 20px;border-bottom: 0.4px solid #97979760;}
.receipt-main .patient-datail h4 {font-size: 16px;font-weight: 500;line-height: 24px;margin-bottom: 0px;padding-bottom: 22px;}
.receipt-main .patient-datail ul.patient-info {display: flex;align-items: center;gap: 49px;margin-bottom: 0px;list-style-type: none;padding-left: 0px;}
.receipt-main .patient-datail ul.patient-info label,
.receipt-main .patient-datail ul.patient-info span {font-size: 14px;font-weight: 400 !important;line-height: 24px;margin-bottom: 0px;}
.receipt-main .patient-datail ul.patient-info span {color: #888;padding-left: 6px;}
.receipt-main .product-details {padding: 20px 80px 20px 20px;border-bottom: 0.4px solid #97979760;position: relative;}
.receipt-main .product-details:after {content: '';position: absolute;right: 36%;top: 0;width: 1px;height: 100%;background: #97979760;}
.receipt-main .product-details .inner_row1 {display: flex;justify-content: space-between;width: 80%;}
.receipt-main .product-details .inner_row1 h3,
.receipt-main .product-details .inner_row1 h2 {font-size: 18px;font-weight: 600;line-height: 24px;margin-bottom: 0px;}
.receipt-main .product-details .inner_row1 h2 {font-size: 22px;}
.receipt-main .product-details .inner_row2,
.receipt-main .product-details .inner_row4 {font-size: 16px;font-weight: 500;line-height: 24px;padding: 20px 0px 10px;}

.receipt-main .product-details .inner_row3 .inner_row3_col1,
.receipt-main .product-details .inner_row5 .inner_row5_col1 {width: 70%;}

.receipt-main .product-details .inner_row3 .inner_row3_col2,
.receipt-main .product-details .inner_row5 .inner_row5_col2 {width: 30%;text-align: right;}

.receipt-main .product-details .inner_row3 {display: flex;justify-content: space-between;}
.receipt-main .product-details .inner_row3 ul.patient-info {display: flex;align-items: flex-start;gap: 52px;list-style-type: none;margin-bottom: 5px;padding-left: 0px;}
.receipt-main .product-details .inner_row3 ul.patient-info li {width: 26%;}

.receipt-main .product-details label,
.receipt-main .product-details span {font-size: 14px;font-weight: 400 !important;line-height: 24px;margin-bottom: 0px;}
.receipt-main .product-details span {color: #888;padding-left: 6px;}
.receipt-main .product-details .inner_row5 {display: flex;flex-wrap: wrap;}
.receipt-main .product-details .inner_row5 ul.patient-info {list-style-type: none;margin-bottom: 5px;padding-left: 0px;}

.receipt-main .price {font-size: 18px;font-weight: 500 !important;line-height: 24px;color: #202224;}


.receipt-main .payment-details {padding: 20px 77px 49px 20px;display: flex;position: relative;}
.receipt-main .payment-details:after {content: '';position: absolute;right: 36%;top: 0;width: 1px;height: 100%;background: #97979760;}
.receipt-main .payment-details h3 {font-size: 18px;font-weight: 600;line-height: 24px;margin-bottom: 20px;}
.receipt-main .payment-details .payment-left {width: 70%;}
.receipt-main .payment-details .payment-left .row2 {display: flex;}
.receipt-main .payment-details .payment-left .row2_col1 {width: 40%;}
.receipt-main .payment-details .payment-left .row2_col1 p {font-size: 14px;font-weight: 400;line-height: 24px;margin-bottom: 0px;padding: 16px 0px;}
.receipt-main .payment-details .payment-left .row2_col1 .credit-card {width: fit-content;border-radius: 4px;border: 0.5px solid #cccccc;text-align: center;padding: 10px 30px;font-size: 16px;font-weight: 500;line-height: 24px;}
.receipt-main .payment-details .payment-left .row2_col2 label {display: block;font-size: 14px;font-weight: 400 !important;line-height: 24px;margin-bottom: 0px;padding-bottom: 21px;}
.receipt-main .payment-details .payment-left .row2_col2 span {color: #888;padding-left: 6px;}

.receipt-main .payment-details .payment-right {width: 30%;text-align: right;}
.receipt-main .payment-details .payment-right .eye-exam-cost {display: flex;justify-content: space-between;margin-bottom: 5px;}
.receipt-main .payment-details .payment-right .eye-exam-cost label {width: 87%;font-size: 14px;font-weight: 500;line-height: 24px;color: #1a1919;margin-bottom: 0px;text-align: left; }
.receipt-main .payment-details .payment-right .total-Sale {margin-top: 21px;}
.receipt-main .payment-details .payment-right .total-Sale label {background: #1da3dd;border-radius: 8px;display: flex;justify-content: center;gap: 18px;padding: 20px;width: 100%;font-size: 18px;font-weight: 400 !important;line-height: 24px;color: #fff;margin-bottom: 0px;}
.receipt-main .payment-details .payment-right .total-Sale span {font-size: 32px;font-weight: 500;}

/* store locator css */

.store-locator-container {background: #fff;border-radius: 14px;display: flex;}
.store-locator-container .left-content .store-locator-box {display: flex;justify-content: space-around;align-items: center;padding: 36px 34px 28px 23px;border-bottom: 0.4px solid #979797;gap: 30px;}
.store-locator-container .left-content .store-locator-box:hover,
.store-locator-container .left-content .store-locator-box.active {background: #1da3dd26;}
.store-locator-container .left-content .store-locator-box:first-child:hover,
.store-locator-container .left-content .store-locator-box.active {border-radius: 14px 0px 0px 0px;}
.store-locator-container .left-content .store-locator-box:last-child:hover,
.store-locator-container .left-content .store-locator-box.active {border-radius: 0px 0px 0px 14px;}
.store-locator-container .left-content .store-locator-box:last-child,
.store-locator-container .left-content .store-locator-box.active {border: 0px;}
.store-locator-container .left-content .store-locator-box .content-box h3 { font-size: 16px; font-weight: 500; line-height: 24px; color: #202224; margin-bottom: 0px; padding-bottom: 13px;}
.store-locator-container .left-content .store-locator-box .content-box p { font-size: 14px; font-weight: 400; line-height: 24px; color: #565656; margin-bottom: 0px;}
.store-locator-container .left-content ul.store-locator-link { margin-bottom: 0px; padding-left: 0px; list-style-type: none; display: flex; flex-wrap: wrap; gap: 0px 23px }
.store-locator-container .left-content ul.store-locator-link li { font-size: 14px; font-weight: 400; line-height: 24px; color: #565656; padding-top: 6px;}
.store-locator-container .left-content { overflow-y: scroll; height: 90vh; width: 34%;}
.store-locator-container .right-content {width: 66%;}

/*  Change Password Page Css */
.change-password-main {background: #fff;border-radius: 14px;padding: 34px 31px;}
.change-password-main .form-container {width: 50%;padding-top: 54px;}
.change-password-main .form-group {position: relative;margin-bottom: 30px;}
.change-password-main .form-group label {font-size: 14px;font-weight: 300 !important;line-height: 16.94px;color: #1c1b1f;position: absolute;top: -8px;left: 20px;background: #fff;padding: 0px 4px 0px 2px;}
.change-password-main .form-group input {background: unset;border: 1px solid #79747e;border-radius: 32px;padding: 15px 28px;width: 100%;}
.change-password-main .change-password_btn {}
.change-password-main .change-password_btn a,
.change-password-main .change-password_btn button {color: #fff;font-size: 14px;font-weight: 600;line-height: 24px;width: 100%;border-radius: 100px;background: #ff8330;text-align: center;padding: 12px 0px;margin-top: 48px;border:1px solid #ff8330;}

/* Profile Page Css */
.update-acnt-detail-container {background: #fff;border-radius: 14px;padding: 34px 31px;}
.update-acnt-detail-container .form-container {width: 50%;padding-top: 54px;}
.update-acnt-detail-container .form-group {position: relative;margin-bottom: 30px;}
.update-acnt-detail-container .form-group label {font-size: 14px;font-weight: 300 !important;line-height: 16.94px;color: #1c1b1f;position: absolute;top: -8px;left: 28px;background: #fff;padding: 0px 4px 0px 2px;}
.update-acnt-detail-container .form-group input,
.update-acnt-detail-container .form-group select {font-size: 16px;font-weight: 400;line-height: 19.36px;color: #1c1b1f;background: unset;border: 1px solid #79747e;border-radius: 32px;padding: 15px 28px;width: 100%;}
.update-acnt-detail-container .Update-button {}
.update-acnt-detail-container .Update-button a,
.update-acnt-detail-container .Update-button button {width: 100%;border-radius: 100px;background: #ff8330;text-align: center;padding: 12px 0px;margin-top: 48px;color: #fff;font-size: 14px;font-weight: 600;line-height: 24px;border:1px solid #ff8330;}



/* custom scroll style starts */
/* width */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #ddd;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--blue); 
  border-radius: 10px;
}
/* custom scroll style ends */