@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
body {
	margin: 0px;
	padding: 0px;
}

:root {
	--pluginFontFamily: "Outfit", sans-serif;
}

.rx-container {
	--mainColor: #6DB1DE;
	--mainColorHax: hsl(from var(--mainColor) h s calc(l * .9) / .1);
	--pluginFontFamily: "Outfit", sans-serif;
	--gap: 15px;

	background-color: #f2f2f2;
	display: flex;
	font-family: var(--pluginFontFamily);
	/* font-size: 14px; */
	/*! border:10px solid red; */
	overflow:hidden;
	height: 100svh;
	box-sizing: border-box;
}

.rx-container progress::-webkit-progress-bar {
	background-color: #EBF6FB;
}

.rx-container progress::-webkit-progress-value {
	background-color: var(--mainColor);
}

.rx-container progress {
	background-color: var(--mainColor);
	width: 100%;
	border-radius: 0;
	overflow: hidden;
	inline-size: auto;
	display: flex;
}

.rx-container :where(p, h1, h2, h3, h4, h5, h6, a, div, ul) {
	all: initial;
}

.rx-container :where(h1, h2, h3, h4, h5, h6) {
	font-weight: bold;
}

.rx-container :where(.prescriptionWrapper) {
	border-radius: 10px;
}

.rx-container * {
	font-family: var(--pluginFontFamily);
	font-size: inherit;
	box-sizing: border-box;
}

.rx-container .rx-containerLeft {
	flex: 0 0 50%;
	width: 50%;
	max-width: 100%;
	display:flex;
	align-items:center;
	overflow:hiddden;
	padding:20px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.rx-container .rx-containerLeft img {
	max-width: 100% !important;
	mix-blend-mode: darken;
	max-width: 80%;
	max-width: min(100%, 350px);
	margin-bottom: 30px;
	min-width: 100%;
}
.rx-container .rx-containerLeft .adv_lens_product_title{
	font-weight: bold;
	font-size:clamp(20px, 2vw, 25px);
	text-align: center;
}
.rx-container .rx-containerRight {
	min-height: 100%;
	background: #fff;
	display: -moz-flex;
	display: flex;
	-moz-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: center;
	justify-content: center;
	flex: 0 0 50%;
	width: 50%;
	height: 100vh;
	gap: 20px;
	padding-top: 0px;
	/*Step 2*/
	position: relative;
}

.rx-container .rx-containerRight .rxScrollHolder {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/*! overflow: hidden; */
	height: auto;
}

.rx-container .rx-containerRight .btnPlugin {
	background: var(--mainColor);
	color: #fff;
	border: none;
	padding: 15px 40px;
	border-radius: 5px;
	cursor: pointer;
	display: inline-block;
}

.rx-container .rx-containerRight .setButton{
	margin:10px 0;
	display: flex;
	margin-bottom: 20px;
	gap: 10px;
	& .btnPlugin{
		padding:0px;
		padding:0px;
		text-transform: uppercase;
		padding: 6px 40px;
	}
}

.rx-container .rx-containerRight .rx-stepAction {
	display: flex;
	justify-content: space-between;
}

.rx-container .rx-containerRight .rx-stepAction .stepButton {
	display: flex;
	gap: 3px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0px;
	align-items: center;
}

.rx-container .rx-containerRight .rx-stepAction svg {
	width: 20px;
}

.rx-container .rx-containerRight .rx-step-wrapper {
	flex: 1;
}

.rx-container .rx-containerRight .rxstepWrapper {
	position: relative;
	overflow: hidden;
}

.rx-container .rx-containerRight .rxstepWrapper .slider {
	display: grid;
	transition: all 0.2s ease-out 0s;
	display: flex;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] {
	flex: 0 0 100%;
	background: #fff;
	/*! overflow: hidden; */
	max-width: 100%;
	width: 100%;
	height: calc(100vh - 200px);
	/*! border: 2px solid red; */
	overflow-y: auto;
	@media(max-width:767px){
		& .usage{
			& .subOption{
				/*! border:1px solid red; */
				position: relative;
			}
			& .sub-contentWrapper{
				position:unset;
			}
		}
	}
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .learnMore{
	display: flex;
	align-items: center;
	gap:4px;
	cursor: pointer;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .rx-sub-options:is([open]):has(.colorOptionholder2) .sub-contentWrapper,
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2:not(:last-child){
	border-bottom:0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important; 
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2:not(:last-child){
	border-bottom:1px solid hsl(from var(--mainColor) h s calc(l * .9) / .3) !important;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2{
	background: var(--mainColorHax);
	padding:11px 20px;
	border:1px solid var(--mainColor);
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-block-start: 0;
	z-index: 1;
	/*! border-radius: 0; */
	position: relative;
	/*! border-top: 0; */
	/*! padding-bottom: 40px; */
	display: flex !important;
	border-top: 0 !important;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .choose_tint{
	padding:7px 30px;
	font-weight: normal;
	letter-spacing: 0;
	border-radius: 5px;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .contentWrapperRight{
	display: flex;
	& .adv_lens_price{
		font-size: 24px;
		color: var(--mainColor);
		font-weight: bold; 
		margin-left: 20px;
	}
	& .colorOptionholder{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	& p:first-child{
		flex:1;
		padding-right: 10px;
	}
	width: 100%;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .colorOptionholder2{
	margin:0px !important;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .subOption{
	padding:0px;
	border:none;

}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .subOptionInner .subOption{

	display: flex;
	flex-direction: unset;
	justify-content: space-between;
	align-items: center;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .subOptionInner .subOption:has(.contentWrapperRight){
	flex-direction: column;
	align-items: flex-start;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder2 .subOptionInner .subOption .contentWrapperRight{

}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder .tintname{
	margin-block-end: 10px;
	display: block;
	font-weight: bold;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder .colorOption,
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .ajax_tint ~ .colorOptionholder .colorOption,
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .ajax_tint ~ .colorOptionholder .colorOption .colorOptionAjax > li{
	display: flex;
	flex-direction: unset;
	gap: 10px;
	margin-bottom: 17px; 
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .ajax_tint ~ .colorOptionholder .colorOption .colorOptionAjax > li{
	margin:0px;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder .colorOption >li,
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .ajax_tint ~ .colorOptionholder .colorOption .colorOptionAjax > li > span{  
	width:20px;
	height:20px;
	border-radius: 100% !important;
	position: relative;
	padding:3px; 
	&:after{
		border:1px solid transparent;
		content: "";
		position: absolute;
		top:-3px;
		left:-3px;
		width: 120%;
		height: 120%;
		border-radius: 100%;
		background: #fff;
		z-index: -1
	}
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .ajax_tint ~ .colorOptionholder .colorOption .colorOptionAjax > li > span{
	font-size: 0;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder .colorOption >li.selectedTint,
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder .colorOption >li:hover{
	border:0px solid var(--mainColor);
	&:after{
		border:1px solid #000 !important;
	}
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .colorOptionholder .colorOption >li span{
	font-size:0px;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .ajax_tint{
	display: flex;
	flex-direction: column;
	gap:10px;
	margin-block-start: 10px;
	& .color-radio{
		display: flex;
		gap:14px;
		& .raido-wrap{
			display: flex;
			gap:5px;
			align-items: center;
			cursor: pointer;
			& input{
				margin:0px;
				appearance: none;
				width:20px;
				height:20px;
				border:1px solid #ccc;
				border-radius: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				&:checked:after{
					content:"";
					background: var(--mainColor);
					width: 80%;
					height: 80%;
					display: block;
					border-radius: 100%;
				}
			}
		}
	}
	margin-block-end: 10px;
}


.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].rxStepsColored .optionImg {
	width: 48px;
	height: 48px;
	border-radius: 100%;
	padding: 3px;
	/*! position: absolute; */
	left: 18px;
	top: 24px;
	background: none;
	margin-right: 20px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].rxStepsColored .optionImg img {
	width: 100%;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].rxStepsColored .sub-contentWrapper {
	/*! padding-left: 80px; */
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper.withnoNG{
	padding: 0;
	background: none !important;
	border: none !important;
	width: 100%;
	align-items: center;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].rxStepsColored .sub-contentWrapper:hover {
	background: var(--mainColorHax);
	color: #000;
}



.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper:has(.contentWrapperMid, .contentWrapperRight) {
	flex-direction: revert;
	@media(max-width:767px){ 
		flex-wrap: wrap;
		/*! padding:15px; */
		& .contentWrapperMid{ 
			flex:1; 
			gap:8px;
			padding-right: 0;
		}
		& .optionImg img{ 
			width:50px;
			margin-right: 8px;
		}
		& .contentWrapperRight{
			flex:0 0 100%;
			position: absolute;
			right: 10px;
			top: 20px;

			& .priceContent{
				font-size:14px;
				/*! padding-left:65px; */
				color: var(--mainColor);
			}
		}
		& .subOption{
			top:140px !important;
			border:1px solid red !important;
		}
	}
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper .contentWrapperLeft {
	width: 62px;
	flex: 0 0 62px;
	height: 62px;
	/*! box-shadow: 0px 0px 8.4px 3px rgba(0, 0, 0, 0.0392156863); */
	/*! background: #fff; */
	padding: 4px;
	border-radius: 4px;
	margin-right: 15px;
	@media(max-width:767px){
		width:40px;
		flex: 0 0 40px;
		height: 40px;
		padding: 0;
		margin-right: 10px;
	}
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper .contentWrapperLeft img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper .contentWrapperRight {
	margin-left: auto;
	flex:0 0 auto;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper .contentWrapperRight .priceContent,
.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .princeHolder .adv_lens_price{
	font-size: 17px;
	color: var(--mainColor);
	font-weight: bold;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .sub-contentWrapper .contentWrapperMid {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .sub-contentWrapper .lensTicknessHeader {
	display: flex;
	justify-content: space-between;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .sub-contentWrapper .lensTicknessHeader>span {
	border: 1px solid #EBECEC;
	padding: 10px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .sub-contentWrapper .lensTicknessHeader .price {
	font-weight: bold;
	font-size: 24px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .sub-contentWrapper .lensTicknessDescription {
	color: #55595E;
	font-size: 16px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded {
	border-top: 0;
	margin-top: -11px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: relative;
	padding: 20px;
	gap: 25px;
	display: flex;
	flex-direction: column;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded .subOptionInner{
	padding:0px;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded .subOptionInner .subOption{
	padding:0px;
	border:none;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded~.btnPlugin {
	margin-top: 15px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded>li {
	display: flex;
	flex-direction: revert;
	align-items: center;
	font-size: 16px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded>li:not(:last-child) {
	border-bottom: 1px solid #EBECEC;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded>li input[type=checkbox] {
	border-color: rgba(41, 41, 47, 0.568627451);
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded>li .right {
	margin-left: auto;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].lensTickness .tickAdded>li .mid {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: 6px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview {
	align-items: flex-start;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul {
	border: 1px solid var(--mainColor);
	padding: 20px 30px;
	border-radius: 10px;
	font-size: 15px;
	list-style: none;
	width: 100%;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview .prescription-table{
	/*! border: 1px solid #dee2e6; */
	width:100%;
	border-collapse: collapse;
	margin-bottom: 10px;
	font-size: 14px;
	border-radius: 0px;
	/*! border: 1px solid #000 !important; */
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview .sub-selections h3{
	margin-bottom:  10px; 
	display: block;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview .prescription-table tr td,
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview .prescription-table tr th{
	border:1px solid #dee2e6;
	padding:10px 20px;
	text-align: left;
	font-size: 14px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .prescription-table .prism{
	text-align: left;
	padding-inline: 25px;
	border: none !important;
	& p{font-weight: bold;  }
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] #additional_comment{
	height: 200px;
	min-height: 90px;
	width: 100%;
	border-radius: 4px;
	border: 1px solid #000 !important;
	box-shadow: none !important;
	padding: 20px;
}
.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-] .reviewTags{
	margin-block-end: 10px;

	display:block;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li {
	border-bottom: 1px solid #EBF6FB;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li p {
	display: flex;
	justify-content: space-between;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li span {
	float: right;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li p {
	padding: 0;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li>ul {
	list-style: disc;
	list-style-position: inside !important;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li>ul>li {
	border-bottom: 1px solid #EBF6FB;
	padding: 14px 30px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li.subTotal {
	padding: 14px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24px;
}

.rx-container .rx-containerRight .rxstepWrapper [class*=rx-step-].selectionReview>ul>li.subTotal span {
	font-weight: bold;
	font-size: 30px;
}

.rx-container .rx-containerRight h3 {
	font-size: 22px;
}

.rx-container .rx-containerRight .rx-containerRightTop {
	display: -moz-flex;
	display: flex;
	-moz-flex-direction: column;
	flex-direction: column;
	gap: 10px;
}

.rx-container .rx-containerRight .rx-containerRightTop>h3 {
	color: var(--mainColor);
}

.rx-container .rx-containerRight .rx-containerRightTop .learnMore {
	-moz-align-items: center;
	align-items: center;
	gap: 10px;
	display: -moz-flex;
	display: flex;
}

.rx-container .rx-containerRight :where([class*="rx-sub-options"] li, .sub-contentWrapper, [class*="rx-sub-options"], [class*="rx-sub-options"], [class*="rx-content"], .subOption, .subOptionInner, [class*=rx-step-], .rxMoreoptions, .preWraprow,
.more-option, .add-extraContainer, .preWrapheader) {
	display: -moz-flex;
	display: flex;
	-moz-flex-direction: column;
	flex-direction: column;
	align-items: unset;
}

.rx-container .rx-containerRight .paddingX-30 {
	padding-inline: 20px;
}

.rx-container .rx-containerRight :where([class*="rx-sub-options"], [class*="rx-sub-options"], .subOptionWrapper, [class*=rx-step-], .add-extraContainer, [class*="rx-content"]) {
	gap: 20px;
}

.rx-container .rx-containerRight input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid #ddd;
	margin: 0;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
}

.rx-container .rx-containerRight input[type=checkbox]:checked {
	border-color: var(--mainColor);
}

.rx-container .rx-containerRight input[type=checkbox]:checked:after{
	content: "✔";
	position: absolute;
	inset: 0;
	margin: auto;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	background: var(--mainColor);
}

.rx-container .rx-containerRight [class*="rx-sub-options"] summary {
	list-style: none;
	cursor: pointer !important;
}

.rx-container .rx-containerRight [class*="rx-sub-options"] summary * {
	cursor: pointer !important;
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .sub-contentWrapper {
	gap: 6px;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 20px 20px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.rx-container .rx-containerRight [class*="rx-sub-options"]:is([open], :hover) :is(.sub-contentWrapper ,.rxStepsColored .subOptionWrapper){
	border: 1px solid var(--mainColor);
	background: var(--mainColorHax);
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .option-title {
	font-weight: 600;
	font-size: 18px;
	margin-top: -5px;
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOptionInner {
	gap: 15px;
	padding: 10px 0;
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption {
	-moz-align-items: flex-start;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid #EBECEC;
	padding: 20px;
	border-radius: 10px;
	background: none;
	position: relative;
}
.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .princeHolder{

	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}
.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .colorOptionholder{
	display: flex;
	width:100%;
	flex-direction: column;
	align-items: flex-start;
	gap:10px;
}
.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .colorOptionholder > p{
	font-weight: bold;
	font-size:16px;
}
.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .colorOptionholder .colorOption{
	display: flex;
	gap: 10px;
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .colorOptionholder .colorOption li{
	width:30px;
	height:30px;
	border-radius: 100% !important;
	overflow: hidden;
	flex:0 0 30px;
	font-size: 0;
	/*! border:1px solid #ddd; */
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .subName {
	color: #000;
	border: 1px solid #EBECEC;
	padding: 6px 20px;
	display: -moz-flex;
	display: flex;
	-moz-align-items: center;
	align-items: center;
	gap: 5px;
	border-radius: 18px;
	background: #f5f5f5;
	 
}

.rx-container .rx-containerRight [class*="rx-sub-options"] .tooltip-trigger svg {
	pointer-events: none;
	position: relative;
	top: 2.7px;
}

.rx-container .rx-containerRight .prescriptionWrapper {
	border: 1px solid #ddd;
	padding: 20px;
	align-items: flex-start;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap {
	width: 100%;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow {
	-moz-flex-direction: revert;
	flex-direction: revert;
	align-items: center;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow>* {
	width: 22.6%;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow:first-child .col-in {
	text-align: center;
	padding-bottom: 8px;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow:last-child {
	margin-top: -0.3px;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in {
	margin: -0.5px;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in select {
	width: 100%;
	height: 48px;
	border: 1px solid #6f6f6f;
	text-align: center;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /></svg>');
	background-repeat: no-repeat;
	background-position: center right 10px;
	background-size: 12px;
	background-color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 20px;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in select:after {
	border: solid black;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	content: "";
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in:first-child {
	flex: 0 0 10%;
	padding-right: 10px;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in label {
	text-align: right;
	display: flex;
	flex-direction: column;
	font-weight: bold;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in label span {
	font-size: 10px;
	opacity: 0.6;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in.hiddenCol:not(.visibleCol) {
	display: none;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow:has(.visibleCol) .col-in:nth-child(2) {
	display: none;
}

.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .twoPd {
	display: flex;
	align-items: center;
	margin-top: 10px;
	gap: 5px;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option {
	padding-block: 20px;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .rxMoreoptions summary {
	list-style: none;
	display: flex;
	align-items: center;
	text-decoration: underline;
	cursor: pointer;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .rxMoreoptions summary:after {
	content: "";
	height: 8px;
	width: 8px;
	border-style: solid;
	border-color: #000;
	border-width: 0px 1px 1px 0px;
	transform: rotate(45deg);
	transition: border-width 150ms ease-in-out;
	display: inline-block;
	margin-left: 10px;
	top: -2px;
	position: relative;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .rxMoreoptions .addPrism {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-block: 16px;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .rxMoreoptions .prismSelect {
	margin-bottom: 20px;
	display: none;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .rxMoreoptions .addPrismCols.addPrismColsActive~.prismSelect {
	display: block;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .add-extraContainer {
	width: 350px;
}

.rx-container .rx-containerRight .prescriptionWrapper .more-option .add-extraContainer .pluginFiled {
	width: 100%;
	border: 1px solid #ddd;
	padding: 10px 14px;
	border-radius: 5px;
	outline: none;
}

.rx-container .rx-containerRight .rxPrice {
	display: flex;
	justify-content: space-between;
	padding: 20px;
	border-top: 1px solid #ddd;
	font-size: 26px;
	font-weight: 600;
}

.rx-container .rx-containerRight .rxPrice>* {
	color: var(--mainColor);
}

.rx-container .col-informobile {
	display: none;
}

@media (max-width: 767px) {
	.rx-container {
		flex-direction: column;
		font-size: 15px;
		height: 100dvh;
	}

	.rx-container :where(.rx-containerLeft, .rx-containerRight) {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	.rx-container  .rx-containerLeft {
		padding:15px;
		display: none;
	}
	.rx-container  .rx-containerLeft img{
		max-width:70%;
	}
	.rx-container .rx-containerRight{

		flex:1 !important;
		overflow-y: auto;
		min-height: unset;
		height: auto;
	}
	.rx-container .rx-containerRight .rxPrice{
		padding:10px 15px;
		font-size: 18px;
	}
	.rx-container .rx-containerRight .rxScrollHolder {
		flex:1;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 0;

		height: auto;
	}
	.rx-container .rx-containerRight .paddingX-30{
		padding:0 15px;
	}
	.rx-container .rx-containerRight .rx-stepAction{
		margin-bottom: 10px
	}
	.rx-container .rx-containerRight :where([class*="rx-sub-options"], [class*="rx-sub-options"], .subOptionWrapper, [class*="rx-step-"], .add-extraContainer, [class*="rx-content"]){
		gap:10px; 
	}
	.rx-container .hide-forMobile {
		display: none !important;
	}

	.rx-container .rx-containerRight [class*="rx-sub-options"] .option-title {
		font-size: 16px;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .more-option {
		padding-block: 10px;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap {
		gap: 5px;
		display: flex;
		flex-direction: column;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow {
		flex-wrap: wrap;
		gap: 4px 0;
	}	

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .twoPd {
		margin: 0;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow:not(:first-child) {
		margin-top: 10px;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow:first-child {
		border: 1px solid rgb(255, 12, 12);
		display: none;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in {
		padding: 0px !important;
		flex: 1 0 90px;
		display: flex;
		flex-direction: column;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in.addPrism {
		flex-direction: row;
		margin: 5px 0;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in select {
		text-align: left;
		padding: 0 10px;
		background: none;
		font-size: 11px;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in .col-informobile {
		display: flex;
		order: -1;
		margin-bottom: 5px;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in label {
		text-align: left;
		flex-direction: row;
		align-items: center;
		gap: 6px;
	}

	.rx-container .rx-containerRight .prescriptionWrapper .preWrap .preWraprow .col-in:first-child {
		flex: 0 0 100%;
	}
}

.modal-header {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

.close {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	height: 16px;
	text-decoration: none;
	width: auto;
	position: absolute;
	right: -11px;
	top: -36px;
	background: none;
	border-radius: 100%;
	width: 35px;
	height: 35px;
}

.close svg {
	width: 20px;
	height: 20px;
	position: relative;
	left: 8px;
	top: 7px;
}

.modal-wrapper {
	align-items: center;
	background: rgba(0, 0, 0, 0.7);
	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	visibility: hidden;
}

#modal {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: none;
}

#modal:target {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	display: flex;
}

#modal:target .modal-body {
	opacity: 1;
	transform: translateY(1);
}

#modal .modal-body {
	max-width: 100%;
	opacity: 0;
	width: 100%;
	z-index: 1;
	background: #fff;
	padding: clamp(20px, 8vw, 58px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 16px;
	border-radius: 8px;
	position: relative;
	width: max(20vw, 700px);
}

.outside-trigger {
	bottom: 0;
	cursor: default;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
}

.button__link {
	text-decoration: none;
}

.b-tooltip {
	position: absolute;
	padding: 15px;
	font-size: 13px;
	font-family: var(--pluginFontFamily);
	border-radius: 6px;
	margin-top: 35px;
	box-sizing: border-box;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
	background: #fff;
	box-sizing: border-box;
}

.b-tooltip * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.b-tooltip :where(h1,h2,h3,h4,h5,h6,p,span){
	margin-block-end: 10px;
}
.b-tooltip ul{ 
	list-style-position: inside
}
.b-tooltip .tooltipWrapper {
	display: grid;
	grid-template-columns: 1fr;
	font-family: var(--pluginFontFamily);
	width: 262px;
	gap: 20px;
	align-items: center;
}

.b-tooltip .tooltipWrapper .tooltipImg {
	background: #D9D9D9;
	height: 100px;
	padding: 20px;
}

.b-tooltip .tooltipWrapper .tooltipImg img {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	height: 100%;
}

.b-tooltip .tooltipWrapper .tooltip-description {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.b-tooltip .tooltipWrapper .tooltip-description>* {
	margin: 0px;
	padding:0px;
	all:unset;
	font-size: inherit;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.rx-container .rx-containerRight [class*="rx-sub-options"] .subOptionWrapper .subOption .princeHolder{
		display: flex;
		justify-content: flex-start;
		width: 100%;
		align-items: center;
		gap: 10px;
		flex-direction: column;

		align-items: first baseline;
	}
	.b-tooltip {
		width: 94%;
		margin-inline: auto;
		padding: 15px;
		left: 0;
		right: 0;
		margin-block-start: -20px;
	}

	.b-tooltip .tooltipWrapper {
		grid-template-columns: 1fr;
		width: 100%;
	}

	.b-tooltip .tooltipWrapper .tooltipImg {
		height: 80px;
		padding: 6px;
	}
}

.tooltip-trigger span {
	position: relative;
}

/* .tooltip-trigger span::after,
.tooltip-trigger span::before {
content: "";
height: 0;
width: 0;
position: absolute;
border: 12px solid transparent;
border-top-color: #c2c2c2;
border-bottom: none;
bottom: 27px;
right: 0px;
z-index: 99;
opacity: 0;
display: none;
} */

.tooltip-trigger span::after {
	border: 10px solid transparent;
	border-top-color: #fff;
	right: 2px;
	z-index: 9999;
	bottom: 19px;
}

.tooltip-trigger span:hover::after,
.tooltip-trigger span:hover::before {
	opacity: 1;
	display: block;
}


/*# sourceMappingURL=main.css.map */

.optionImg img {
	width: 60px;
	margin-right: 8px;
}

a.closebtn {
	font-size: 20px;
	cursor: pointer;
}
li.adv_lens_tints_sunglasses, .adv_lens_tints{
	cursor: pointer;
}
a.customize_lenses {
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.displaynone{display: none;}
.disabled {
	opacity: 0.6;
	pointer-events: none;
}
.adv_lens_loader{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	align-items: center;
	justify-content: center;
	display: flex;
	background: #fff;
	z-index: 9999;
	display: none;
}

.loaderCustom {
	width: 48px;
	height: 48px;
	border: 5px solid #ddd;
	border-bottom-color: var(--mainColor);
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.help-in-prescription{
	display: flex;
	flex-direction: column;
	gap:20px;
	& p{
		display: block;
		&:last-child{
			margin-bottom:20px;
		}
	}
}
p.pd-details {
	margin-bottom: 15px;
}
.subOption * {
	cursor: pointer;
}
.loader img {
	/* max-width: 250px; */
	display: flex;
	width: 100%;
}
.loader{
	display: none;
	position: absolute;
	width: 100%;
	height: calc(100vh - 17px);
	background: red;
	z-index: 9;
	top: 16px;
	background: #fff;
}

/* HTML: <div class="loaderInner"></div> */
.loaderInner {
	width: fit-content;
	font-weight: bold;
	font-family: monospace;
	font-size: 30px;
	color: #0000;
	background: linear-gradient(90deg,#C02942 calc(50% + 0.5ch),#000 0) right/calc(200% + 1ch) 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: l7 2s infinite steps(11);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: auto;
} 
.loaderInner::before {
	content:"Loading..."
} 
@keyframes l7 {to{background-position: left}}

.prescription-container {
	max-width: 600px;
	margin: 0 auto;
	/* background-color: #fff; */
	padding: 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	border-radius: 8px;
}

.prescriptionContainer{
	background-color: #fff;
	padding: 0;
	box-shadow: none;
	border-radius: 8px;
	width: 100%;
	border-radius: 8px;
	/*! overflow: hidden; */
	border: none;
}

.prescription-table {
	width: 100%;
	border-collapse: collapse;
	/*! overflow: hidden; */
	border-radius: 8px;
	/*! border: 1px solid hsl(from var(--mainColor) h s calc(l * .4) / .2); */
	border-spacing: 0;
	border-collapse: separate;
}

.prescription-table th, .prescription-table td { 
	padding: 8px;
	text-align: center; 
}
.prescription-table th, .prescription-table td:not(:last-child){
	border-right: 1px solid hsl(from var(--mainColor) h s calc(l * .4) / .2);

}
.prescription-table th, .prescription-table td{
	border-bottom: 1px solid hsl(from var(--mainColor) h s calc(l * .4) / .2);
}
.prescription-table tr th:first-child,
.prescription-table tr td:first-child{
	border-left: none;
}
.prescription-table tr th:last-child,
.prescription-table tr td:last-child{
	border-right: none;
}
.prescription-table th {
	background-color: var(--mainColorHax);
	font-weight: bold;
	color: #000;
}

.prescription-table input[type="text"] {
	width: 100%;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}


.prescription-table td[colspan="2"] input {
	width: calc(100% - 55px);
	margin-left: 5px;
}

.hidden{display: none;}

.dFlex{
	display: flex;
	gap:10px;
	&.alignItemsCEnter{
		align-items: center;
	}
}
.uploadprescription{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:10px;
	width: 100%;
	& input{
		border:1px solid #000;
		padding:15px;
		border-radius: 5px;
		width: 100%;
		&#additional_comment{
			height:100px;
		}
	}
}
.lensIcon{width:300px;}
.transition_tint{ animation: 3s linear 1s infinite running appear_i3GMsd; }
.colorName{
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: center;
	justify-content: center;
	align-items: center;
	margin-block-end: 20px;
	& h1{font-size: 22px;}
}
.selectedColorRange {
	align-items: center;
	color: #3a4850;
	display: flex;
	font: 13px / 15px Roboto, Arial, sans-serif;
	justify-content: center;
	margin: -3px 0 18px;
	& .inputRange{
		--colorOpacity: #6d6d6d;
		background: linear-gradient(270deg, hsla(0, 0%, 100%, .8) 0, hsla(0, 0%, 100%, 0) .01%, hsla(0, 0%, 100%, .8) 100%), var(--colorOpacity);
		border-radius: 100px;
		height: 4px;
		margin: 0 8px;
		width: 190px;
	}
	&::before {   content: "Indoor";  }
	&::after  {   content: "Outdoor"; }
}

@keyframes appear_i3GMsd {
	0%  {  opacity: .2  }
	50% {  opacity: .75 }
	to  {  opacity: .2  }
} 
.lenssvg{ display: none; }

#set_data{
	cursor: pointer;
}
#delete_set_value{
	cursor: pointer;
}

#prescriptionUpload{
	cursor: pointer;
}

.lens-coating{ 
	display: flex;
	gap: 10px;
	border: 1px solid #ddd;
	padding: 20px 20px;
	border-radius: 10px;
	width:100%;
	& input{ top:10px; }
	& label{
		flex: 1;
		display: flex;
		flex-direction: row-reverse;
		& h3{
			font-weight:500;
			font-size:16px !important;
			text-transform: capitalize;
		}
		& img{ width:100px; }
		& .lens-coating-price{
			flex:1;
			display: flex;
			flex-direction: column;
		}
	}
	&:hover{
		background: var(--mainColorHax);
		color: #000;
		border:1px solid var(--mainColor);
	}
}
.gallaryImg:has(.lens-coating), 
.gallaryImg:has(.benefits_afc){ 
	align-items: flex-start;
}

.benefits_afc{
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
	gap:20px;

	margin-block: 20px;
	width:100%;
	& > li{
		flex:1;
		list-style: none;
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100%;
		& svg{
			flex:0 0 40px;
			width: 90px;
		}
		&:not(:last-child){
			border-right:1px solid var(--mainColorHax);
			padding-inline-end: 10px;
			margin-inline-end: 10px;
		}
	}

}

.rx-sub-options{
	width:100%;
}
.customize_lenses{display:none;}

.startover{display:none;}

a.button.button__link.btnPlugin.continuewithcoatings {
	width: auto;
	display: inline-flex;
	align-items: flex-start;
	float: 0 1;
	text-align: center;
	justify-content: center;
}


/* css by pooja on august 19  */
p.subtitle_dqbOVK {
	display: none;
}

p:empty{
	display: none !important;
}
@media(max-width:767px){}

@media(min-width:768px){
   .colorOptionholder2 .lenssvg {
    display: none !important;
}
   .colorOptionholder .lenssvg {
    display: none !important;
}
}
.mirror_glass{
  position: relative;
  &:after{
    background: url(https://twinspecs.com/wp-content/uploads/2024/09/image-1840.png) 50% 50% no-repeat;
    background-size: auto;
    background-size: contain;
    content: "";
    height: 100%;
    mix-blend-mode: overlay;
    position: absolute;
    right: 0;
    top: -14px;
    width: 94%;
	filter: grayscale(100);
  }
  display: flex;
}
.colorOptionholder.sunglasscoloroption1 {
    padding-top: 10px;
}

.advanced_lens_button{
    padding: 15px 30px;
    border-radius: 33px;
    border: 1px solid #000;
    background-color: transparent;
    margin-right: 20px;
}