whmcsCrosterTemplates/assets/less/spc.less

.onepage_cart {
	min-height: 1081px;
	.ajaxcart_cont {
		.blocks.products, .blocks.cartsummary, .blocks.productconfig, .blocks.domain_cont, .blocks.domainconfig, .blocks.customerinfo,
		.blocks.accountpw, .blocks.securityques, .blocks.additionalinfo {
			border: 1px solid @default-border-color;
			margin: 0 0 30px!important;
			background-color: @white;
			
			&.TM-card {
				padding: 0!important;
			}
		}
		
		.blocks.accountpw {
			@media (max-width: 767px) {
				.generate-password {
					margin-bottom: 15px;
				}
			}
		}
		
		.blocks.products_billingcycle {
			margin: 0 0 30px;			
			label {
				display: block;
			}
			.pcb {
				font-size: 1rem;
			}
		}
		.blocks_heading {
			padding: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid @default-border-color;
			h2, label {
				margin: 0;
				font-size: 18px;
			}
		}
		.domainconfig {
			.blocks_body {
				padding: 10px;
			}
		}
		
		.blocks.products {
			.blocks_body {
				.groups_sec {
					.group_name {
						line-height: 28px;
						font-weight: 500;
					}
					@media (max-width: 767px) {
						margin-bottom: 40px;
					}
					.form-control {
						max-width: 260px;
					}
					.select2-container {
						@media (min-width: 768px) {
							max-width: 230px;
						}					
					}
				}
				.product_list {
					position: relative;
					padding: 10px 5px 10px 10px;
					
					.tns-item {
						label {
							display: block;
							margin-right: 5px;
							.scheck {
								&.products-radio {
									padding: 1rem;
									min-height: 50px;
								}
							}
						}
					}
					
					.swiper-nav {
						position: absolute;
						display: flex;
						align-items: center;
						top: -50px;
						right: 0;
						z-index:12;
						
						.swiper-pagination {
							position: relative;
							display: flex;
							margin: 0 24px;
							
							&.swiper-pagination-fraction{
								bottom: 0;
								left: auto;
							}
						}
						.swiper-button-prev, .swiper-button-next {
							position: relative;
							display: flex;
							margin: 0;
							width: auto;
						}
						.swiper-button-prev:after, .swiper-button-next:after {
							font-size: 18px;
						}
					}
				}
			}			
		}
		
		.blocks.cartsummary {
			border: 0 none;
			#ordersummary, #footer_order_summary {
				background-color: @gray-lighter;
				border: 1px solid @default-border-color;
				border-radius: 4px;
				
				.cartsummary_cont {
					position: relative;
					font-size: 14px;
					.cart-loader {
						display: none;
					}
					.domainpricingarea {
						position: unset;
						ul {
							padding: 0.5rem 0;
							display: none;
							li {
								.dropdown-item {
									font-size: 80%;
								}
							}
						}
						@media (max-width:991px) {
							.dropdown-menu {
								max-height:250px;
								overflow: auto;
							}
						}
					}
					.show {
						display: block !important;
					}
					.btn-add-to-cart2 {
						padding: 0px;
						float: right;
						font-size: 11px;
						opacity: 0.90;
						&:hover, &:focus {
							opacity: 1;
						}
					}
				}
				
				&.cartsummary_loader {
					.cartsummary_cont {
						position: relative;
						.cart-loader {
							display: flex;
							position: absolute;
							left: 0; right: 0;
							align-items: center;
							justify-content: center;
							top: auto;
							bottom: 30px;
						}
						@media (min-width: 992px) {
							.cart-loader {
								top: ~"calc(50% - 50px)";
								bottom: auto;
							}
						}
					}					
				}
			}
			.blocks_summaryheading {
				padding: 10px;
				
				div {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				h2, .h2 {
					margin: 0;
					font-size: 18px;
					.fas, .far, .fal, .fed {
						color: @themeColor;
					}
					
					a {
						.fas, .far, .fal, .fed {
							color: @gray-light;
						}
					}
				}
			}
			.cartsummary_cont {
				.heading {
					height: auto;
					line-height: normal;
					padding: 10px;
					border-bottom: 3px double @default-border-color;				
					ul {
						li {
							font-weight: 500;
							font-size: 1em;
						}
					}
				}
			}
		}
		.order-from-loader-img {
			padding: 50px;
			text-align: center;
		}
		
		.summary_products, .summary_domains, .subtotal, .summary_addons {
			font-size: .8em;
		}
		.cartsummary_cont, .subtotal, .total, .summary_products, .summary_domains, .summary_addons {
			ul {
				display: flex;
				justify-content: space-between;
				align-items: center;
				list-style: none;
				padding: 0;
				margin: 0;
				
				&:first-child {
					li {
						&:first-child {
							.product-name, .product-group {
								font-weight: 500;
								display: block;
							}
							.product-name {
								font-size: 1.5em;
								font-weight: 700;
							}
							.product-group {
								font-size: 1em;
							}
							.product-domain  {
								font-style: italic;
							}
						}
					}
				}
			}
			span.pull-right {
				display: block;
			}
			span.text-muted {
				font-style: italic;
				
				&.total-text {
					font-style: normal;
				}
			}
		}
		.subtotal {
			padding: 10px;
			border-bottom: 1px solid @default-border-color;
		}
		.total {
			padding: 3px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row-reverse;
			
			@media (min-width: 992px) {
				padding: 15px 10px;
			}
			
			ul {
				flex-direction: column;
				align-items: flex-start;
				li {
					&:last-child {
						font-weight: 500;
						font-size: 1.75em;
						@media only screen and (min-width: 992px) {
							font-size: 2.3em;
						}
					}
				}
			}
		}
		.summary_products, .summary_addons {
			padding: 10px;
			border-bottom: 1px dotted @default-border-color;
		}
		.summary_addons {
			ul {
				margin-bottom: 7px;
			}
		}
		.summary_products {
			ul {
				margin-bottom: 15px;
			}
		}
		.summary_domains {
			padding: 10px;
			border-bottom: 1px dotted @default-border-color;
		}
		.promotion {
			padding: 10px;
			border-top: 1px dashed @themeColor;
			border-bottom: 1px dashed @themeColor;
		}
		.emptycart {
			text-align: center;
			padding: 1rem 0.5rem;
			margin: 1rem;
			border: 2px dashed @default-border-color;
		}
		
		.product_server_container, .custom_fileds_container, .product_config_container, .product_addons_container {
			padding: 15px 15px 0;
			h2, h3, h4 {
				font-size: 18px;
				margin: 30px 0;			
			}
			.modal-metric-pricing {
				h4 {
					margin: 0;
				}
			}
		}
		.productconfig {
			label {
				width: 100%;
			}
		}
		
		.product_config_container {
			.control-label {
				font-weight: 500!important;
			}
		}
		input.quantity {
			width: 14%;
			display: inline-table;
		}
		
		.blocks.domain_cont {
			.domain_spcl_offer {
				position: relative;
				padding: 25px 25px 10px;
				background-color: @gray-lighter;
				display: none;
				p {
					font-size: 1.2em;
					font-style: italic;
					margin: 0;
				}
				.bold {
					font-weight: bold;
				}
			}
			
			&.freedomain, &.freeonce {
				.domain_spcl_offer {
					display: block;
				}
			}
			
			&.freedomain {
				.domain_spcl_offer {
					.terms-once {
						display: none;
					}
				}
			}
		}
		.blocks_body.domains {
			padding: 15px;
			ul {
				margin: 0;
				list-style: none;
				width: 100%;
				padding: 0;
				li {
					display: block;
				}
			}
			
			.domain-section-tabs {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				@media (min-width: 768px) {
					flex-direction: row;
					margin: -15px -15px 0;
					padding: 15px 15px 0;
					background-color: @gray-lighter;
					border-bottom: 1px solid @default-border-color;
				}
				.domain_sec {
					padding: 10px 15px;
					border: 1px solid @default-border-color;
					display: block;
					margin-bottom: 5px;
					width: 100%;
					text-decoration: none;
					text-align: center;
					color: #000;
					
					@media (min-width:768px) {
						margin: 0;
					}
					&:hover, &:focus {
						background-color: @gray-lighter;
					}
				}
				.domain_sec_active {
					background-color: @gray-lighter;
				}
				
				@media (min-width:768px) {
					.domain_sec {
						background-color: @gray-lighter;
						margin-bottom: -1px;
						width: auto;
						
						&:hover, &:focus {
							background-color: @white;
						}
					}
					.domain_sec_active {
						background-color: @white;
						border-bottom: 1px solid transparent;
					}				
				}
			}
		}
		.domain-input {
			label {
				font-weight: normal;
				display: inline-table;
			}
			.domain-inputs-sec {
				display: flex;
					@media only screen and (max-width: 767px) { 
						flex-direction: column;
					}
				.domain-input-col {
					width:100%;
				}
				div {
					margin-right: 7.5px;
					@media only screen and (max-width: 767px) {
						margin-bottom: 10px;
					}
					&:nth-child(2) {
						min-width: 120px;
					}
					&:last-child {
						margin: 0;
					}
					&.authcode {
						min-width: 150px;
					}
				}
			}
			.dr-desc, .dt-desc, .do-desc, .sd-desc {
				padding: 15px 0;
				font-weight: 500;
			}
			
			.domains-row {
				.col-xs-6, .col-xs-10 {
					padding-right: 2px;
					padding-left: 2px;
				}
			}
		}
		.domain-input.domain-transfer {
			input[name="domain"] {
			}
		}
		#domain_config {
			label {
				width:100%;
				font-weight: normal;
			}
		}
		.loader-img {
			width: 100%;
			display: inline-table;
			text-align: center;
		}
		.user_option {
			background-color: @gray-lighter;
			border-bottom: 1px solid @default-border-color;
			padding: 15px 15px 0;
			ul {
				display: flex;
				align-items: center;
				padding: 0;
				list-style: none;
				margin: 0;
				li {
					margin-bottom: -1px;
					label {
						cursor: pointer;
						margin: 0;
					}
					
					&:first-child {
						label {
							.sign-btn {
								border-right: 0 none;
							}
						}
					}
				}
			}
		}
		.signupfields, div#account_pw, div#securityQuestion {
			padding: 15px;
		}
		@media only screen and (min-width: 992px) {
			div#securityQuestion {	
				.form-group {
					margin: 0;
				}
			}
		}
		div#MarketingEmailOptIn, div#notesfield {
			padding: 15px 15px 0;
			
			textarea {
				padding-left: 15px;
			}
		}
		.coupon_cont {
			.form-group {
				margin: 0;
				&.prepend-icon {
					.field-icon {
						i {
							font-size: 30px!important;
							margin-top: 16px;
							margin-right: 6px;
						}
					}
				}
				.input-group {
					display: flex;
					align-items: center;
					padding: 4px;
					border: 1px solid @default-border-color;
					border-radius: @border-radius;
				}
				input {
					border: 0 none!important;
					border-radius: 0;
				}
				.input-group-btn {
					.btn {
						border-radius: 0;
					}
				}
			}
		}
		div.domain-msg, div.domain-msg1 {
			margin: 10px 0;
			padding: 0.75rem 1.25rem;
			.alert {
				margin: -0.75rem -1.25rem;
			}
			.close {
				color: @baseFontcolor!important;
				opacity: 0.90;
				[class*="fa-"] {
					font-weight: 300;
				}
				
				&:hover, &:focus {
					opacity: 1;
				}
			}
		}
		.promo-msg {
			padding: 0.75rem 1.25rem;
			margin: 10px 0 0;
			width: 100%;
		}
		.promo-msg.promo_error, .domain_error {
			color: #a94442;
			background-color: #f2dede;
			border: 1px solid #ebccd1;
			display: block !important;
		}
		.promo-msg.promo_success, .domain_success {
			border: 1px solid #d6e9c6;
			background-color: #dff0d8;
			color: #3c763d;
			display: block !important;
		}
		
		.domain_error {
			border: 0 none;
		}
		
		.order_form_submit {
			.btn {
				width: 100%;
			}
		}
		.promo_text {
			cursor: pointer;
			text-align: center;
			span {
				font-size: 80%;
			}
		}
		.tos_msg.tos_error {
			color: #a94442 !important;
			background-color: #f2dede !important;
			border: 1px solid #ebccd1 !important;
			margin: 15px 0 0 0;
			line-height: 125%;
			padding: 10px;
			box-shadow: 4px 4px 0 0 #a94442;
			margin-bottom: 15px;
		}
		.validation_error {
			color: #a94442 !important;
			background-color: #f2dede !important;
			border: 1px solid #ebccd1 !important;
			margin: 15px 0 0 0;
			padding: 10px;
			box-shadow: 4px 4px 0 0 #a94442;
			display: block !important;

			ul {
				list-style: none;
				margin: 0;
				padding: 0 !important;
				li {
					list-style: none;
				}
			}
		}
		td.empty_p.required_input, .p_config_input_error, .input_req_error, .pw_req_error, .sec_req_error, .pm_req_error {
			color: #d06c18 !important;
			background-color: #f2dede !important;
			border: 1px solid #ebccd1 !important;
		}
		.errorbox {			
			color: #a94442 !important;
			background-color: #f2dede !important;
			padding: 10px;
			font-size: 12px;
		}

		#domainSuggestions {
			.added {
				display: none;
			}
			.unavailable {
				display: none;
			}
		}
		
		.removedd {
			color: @brand-warning;
		}
		
		.blocks.paymentinfo {
			margin-bottom: 20px;
			h4 {
				margin: 20px 0;
			}
			.blocks_body {
				padding: 0;
			}
		}
		#sidebar {
			.cartsummary_cont {
				.cart-contents {
					max-height: 490px;
					overflow-y: auto;
				}
			}
		}
		
		//iso zoom fix.
		@media only screen and (max-width: 767px) {
			.form-control,.field, seclect {
				font-size: 16px!important;
			}
		}
		
		.dropdown-toggle {
			&.btn-emptycart {
				margin: 10px 15px 15px!important;
				background-color: transparent;
				border: 0 none;
				padding: 0;
				text-decoration: none;			
			}
		}
		.hidden {
			display: none!important;
		}
		
		.payment-instructions {
			margin-bottom: 1rem;
			padding: 0 1rem;
		}
		
	}
}

@media only screen and (max-width: 991px) {
	.onepage_cart {	
		.ajaxcart_cont {
			#sidebar {
				position: fixed;
				z-index: 1032;
				width: 100%;
				bottom: 19px;
				left: 0;
				right: 0;

				#ordersummary {
					border-radius: 0;
					
					.cartsummary_cont {
						.cart-contents {
							max-height: ~"calc(100vh - 190px)";
						}
						.heading {
							display: none;
						}
						
						.btn {
							&.btn-empty, &.btn-cart-contents {
								padding: 4px 12px;
								color: @baseFontcolor;
								.fas, far, .fal {
									margin: 0;
								}
							}
							&.btn-empty {
								margin-left: 4px;
							}
						}
					}
				}
				
				.coupon_cont {
					background-color: @gray-lighter;
				}
			}
			
			.order_form_submit {
				padding: 0;
				margin-bottom: 0.25rem;
				position: fixed;
				z-index: 1033;
				width: 100%;
				bottom: 0;
				left: 0;
				right: 0;
				#order_submit {
					&.btn {
						border-radius: 0;
					}
				}
			}
		}
	}
}

@media only screen and (min-width: 992px) {
	.onepage_cart {	
		.ajaxcart_cont {
			#sidebar {
				.cartsummary_cont {
					.cart-contents {
						&.collapse {
							display: block;
						}
					}
					.btn {
						&.btn-empty, &.btn-cart-contents {
							display: none;
						}
					}
				}
			}
			.orderform_footer {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-bottom: 2.50rem;
			}
		}
	}
}



.cros-checkbox[type=checkbox], .cros-checkbox[type=radio], .signups[type=radio], .no-radio[type=radio], .nocheck[type=checkbox] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  
	+ span {
		display: flex;
		justify-content: center;
		flex-direction: column;
		transition: border .24s ease;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		
		&.pcb {
			min-width: 100px;
			padding: 15px;
			border: 1px solid @default-border-color;
			background-color: @gray-lighter;
			border-radius: 4px;
			
			&.xs {
				padding: 0;
				overflow: visible;
				background-color: @white;
				height: 80px;
				min-height: 80px;
				
				.c-name, .c-price, c-save {
					width: 100%;
				}
				.c-name, .c-price {
					padding: 0 15px 0;
				}
				.c-price {
					margin-top: 5px;
				}
				.c-save {
					position: absolute;
					top: -5px;
					right: -5px;
					padding: 2px 5px;
					border-radius: 4px;
					background-color: @sticker-bg;
					.text-color(@sticker-bg);
					font-weight: 500;
					z-index: 1;
				}
			}

			.addons {
				color: @baseFontcolor!important;
				.addon-name {
					font-weight: 500;
					&:before {
						display: inline-block;
						z-index: 2;
						font-family: "Font Awesome 5 Pro";
						content: "\f0c8";
						font-weight: 300;
						color: @themeColor;
						padding-right: 4px;
					}
					
				}
			}
			
			.c-name {
				color: @baseFontcolor!important;
				font-weight: 500;
				font-size: @baseFontSize + 1;
				&:before {
					display: inline-block;
					z-index: 2;
					font-family: "Font Awesome 5 Pro";
					content: "\f0c8";
					font-weight: 300;
					color: @themeColor;
					padding-right: 4px;
				}
			}
			.c-price {
				display: flex;
				.extra {
					position: absolute;
					padding: 1px 2px;
					font-size: 80%;
					bottom: -1rem;
					left: 1rem;
					right: 1rem;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			
		}		
		&.scheck {
			overflow: visible;
			h6 {
				font-weight: normal;
				padding-left: 30px;
				margin: 0;
			}
			&:before {
				display: inline-block;
				font-family: "Font Awesome 5 Pro";
				font-size: 21px;
				content: "\f0c8";
				font-weight: 300;
				position: absolute;
				transition: all .2s ease-in-out;
				color: @themeColor;
			}
			&.btn {
				h6 {
					padding-left: 20px;
				}
				&:before {
					font-size: 1rem;
				}
				&.btn-primary {
					&:before {
						color: @white;
					}
				}				
			}
			&.no-icon {
				h6 {
					padding-left: 0;
				}
				&:before {
					display: none!important;
				}
			}
		}
		
		&.sign-btn {
			padding: 10px 15px;
			background-color: @gray-lighter;
			border: 1px solid @default-border-color;
			opacity: 1!important;
			
			&:hover, &:focus {
				background-color: @white;
			}
			
		}
	}
	
	&:checked {
		+ span {
			&.pcb {
				border: 1px solid @themeColor!important;
				.addons {
					.addon-name {
						&:before {
							content: "\f14a";
							font-weight: 900;				
						}					
					}
				}
				.c-name {
					&:before {
						content: "\f14a";
						font-weight: 900;				
					}				
				}
			}
			
			&.scheck {
				&:before {
					content: "\f14a";
					font-weight: 900;
					transform: translateY(0);
				}				
			}
			
			&.sign-btn {
				background-color: @white;
				border-bottom: 1px solid transparent;
			}
		}
	}
}

.cros-checkbox[type=radio], .no-radio[type=radio] {
	+ span {
		&.pcb {
			.c-name {
				&:before {
					content: "\f111";
				}
			}
		}
		&.scheck {
			&:before {
				content: "\f111";
			}

			&.products-radio {
				position: relative;
				border-radius: 4px;
				overflow: hidden;
				border: 1px solid @default-border-color;
				.h5 {
					font-weight: 700;
					padding: 0;
				}
				.smalldesc {
					margin: 0.75rem 0 0.50rem;
				}
				.description {
					margin-top: 0.75rem;
				}
				ul.features {
					padding: 0;
					margin: 0.5rem 0 0;
					
					li {
						list-style: none;
						padding: 3px 0;
						
						&:first-child {
							padding-top: 0;
						}
					}
				}
				
				&:before {
					display: none;
				}
			}			
		}
	}
	&:checked {
		+ span {
			&.pcb {
				.c-name {
					&:before {
						content: "\f192";
					}
				}
			}
			&.scheck {
				&:before {
					content: "\f192";
				}
				&.products-radio {
					background-color: @gray-lighter;
					border-color: @themeColor!important;
					&:before {
						right: 3px;
						bottom: 1px;
						display: block;
						content: "\f00c";
						font-size: 90%;
						color: @white;
						z-index: 2;
					}
					&:after {
						content: "";
						position: absolute;
						right: -25px;
						bottom: -25px;
						width: 50px;
						height: 50px;
						transform: rotate(-45deg);
						background-color: @themeColor;
						z-index: 1;
					}
				}
			}
		}	
	}
}


body {
	&.no-radius {
		.onepage_cart {	
			.ajaxcart_cont {
				.blocks.cartsummary {
					#ordersummary, #footer_order_summary {
						border-radius: 0;
					}
				}	
			}
		}
	}
	
	&.dark-mode {
		.onepage_cart {
			.ajaxcart_cont {
				.blocks.products, .blocks.productconfig, .blocks.domain_cont, .blocks.domainconfig, .blocks.customerinfo,
				.blocks.accountpw, .blocks.securityques, .blocks.additionalinfo {
					border-color: @dmbc;
					background-color: lighten(@dmb, 7%);
				}
				.blocks.domain_cont .domain_spcl_offer {
					background-color: rgba(0,0,0,0.3);
				}
				.blocks_body.domains .domain-section-tabs {
					.domain_sec {
						background-color: lighten(@dmb, 7%);
						border-color: lighten(@dmbc, 7%);
						color: @dmc; 
						
						&:hover, &:focus {
							background-color: rgba(0,0,0,0.3);
						}
						
						&.domain_sec_active {
							background-color: rgba(0,0,0,0.3);
							border-color: lighten(@dmbc, 7%);
						}
					}
				}
				
				@media (min-width: 768px) {
					.blocks_body.domains .domain-section-tabs {
						background-color: rgba(0,0,0,0.3);
						border-bottom: 1px solid @dmbc;
						
						.domain_sec {
							background-color: rgba(0,0,0,0.1);
							border-color: @dmbc;
							color: @dmc;
							
							&:hover, &:focus {
								background-color: lighten(@dmb, 7%);
							}
							&.domain_sec_active {
								background-color: lighten(@dmb, 7%);
								border-color: @dmbc;
								border-bottom: 1px solid transparent;
							}
						}
					}
				}
				
				.blocks_heading, .product_list.border-top {
					border-color: lighten(@dmbc, 7%)!important;
				}
				.user_option, .panel.panel-switch .panel-body {
					background-color: rgba(0,0,0,0.3);
					border-color: @dmbc;
				}
				
				.product_addons_container .accordion .card .addon-promo-container .description {
					border-color: @dmbc;
				}
				
				.blocks_body.domains ul li {
					border-color: @dmbc;
				}
				
				.blocks.cartsummary {
					background-color: transparent;
					.heading {
						border-color: @dmbc;
					}
					#ordersummary, #footer_order_summary {
						background-color: lighten(@dmb, 7%);
						border-color: lighten(@dmbc, 7%);
					}
				}
				
				.emptycart {
					border-color: lighten(@dmbc, 7%);
				}
				
				.summary_products, .summary_domains, .subtotal {
					border-color: lighten(@dmbc, 7%);
				}
				.coupon_cont {
					.input-group {
						border-color: @dmbc;
					}
					@media only screen and (max-width: 991px) {
						background-color: lighten(@dmb, 7%)!important; 
					}
				}
				.blocks.products .blocks_body .product_list .tns-item label {
					border-color: lighten(@dmbc, 7%);
					
					.scheck.products-radio {
						background-color: rgba(0,0,0,0.3);
					}
				}
				
			}		
		}		
		
		.cros-checkbox[type=checkbox]:checked + span.sign-btn, .signups[type=radio]:checked + span.sign-btn, .no-radio[type=radio]:checked + span.sign-btn {
			background-color: lighten(@dmb, 7%); 
		}
		.cros-checkbox[type=checkbox] + span.sign-btn, .signups[type=radio] + span.sign-btn, .no-radio[type=radio] + span.sign-btn {
			background-color: rgba(0,0,0,0.1);
			border-color: @dmbc;
			border-bottom: transparent;
		}
		.cros-checkbox[type=radio] + span.scheck.products-radio .h5, .no-radio[type=radio] + span.scheck.products-radio .h5,
		.cros-checkbox[type=radio] + span.scheck.products-radio, .no-radio[type=radio] + span.scheck.products-radio {
			border-color: @dmbc;
		}
		
		.cros-checkbox[type=checkbox] + span.pcb,
		.cros-checkbox[type=radio] + span.pcb,
		.signups[type=radio] + span.pcb,
		.no-radio[type=radio] + span.pcb  {
			background-color: rgba(0,0,0,0.3);
			border-color: @dmbc;
			
			.addons, .c-name, .c-price {
				color: @dmc!important;
			}
		}
	}
}


.cat-loader {
	background-color: rgba(0, 0, 0, .5);
	z-index: 99999;
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	
	.loader-icon {
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		align-items: center;
		justify-content: center;
		top: ~"calc(50% - 50px)";
		z-index: 999999;
	}
}

.product_addons_container, .product_config_info, .panel-accordion {
	.accordion {
		margin-bottom: 1rem;
		.card {
			.card-header {
				padding: 0;
				.promo-icon {
					i {
						transition: all .5s ease;
					}
				}					
				.btn {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: .75rem 1.25rem;							
					color: @baseFontcolor;
					font-weight: 500;
					
					.promo-title {
						display: flex;
						align-items: center;
						.icon {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 50px;
							max-width: 50px;
							padding: 5px;
							border: 1px solid @default-border-color;
							background-color: @white;
							border-radius: 4px;
							box-shadow: @box-shadow;
							img {
								max-width: 30px;
							}
						}
						.name {
							margin-left: 0.5rem;
						}
					}
					
					&.collapsed {
						.promo-icon {
							i {
								transform: rotate(-90deg);
							}
						}							
					}
					.promo-icon {
						i {
							transform: rotate(0deg);
						}
					}

				}
				
				&.nobg {
					background-color: transparent;
				}
			}
			
			.addon-promo-container {
				margin: 0!important;
				padding: 0!important;
				border: 0 none!important;
				
				.description {
					margin: 0 0 10px!important;
					border-bottom: 1px solid @default-border-color;
				}
				
				.radio-inline {
					cursor: pointer;
				}
			}
		}
	}
	
}