whmcsCrosterTemplates/assets/less/dark.less

// Dark Mode
body {
	&.dark-mode {
		color: @dmc;
		background-color: @dmb;
		
		&.gray_logos {
			.cros-partners .partners-slider .owl-item img {
				padding: 0 0.50rem;
				background-color: @dmc;
				border-radius: 4px;
			}
		}
		
       .hero-bg-wrap.small-header.bg-opacity:before {
			//opacity: 0.75;
	   }
	   .hero.spc .logo-section .logo span {
			color: @dmc;
	   }
	   
		h1, h2, h3, h4, .h1, .h2, .h3, .h4, .panel-sidebar .panel-title, p, span:not(.counter span) {
			color: @dmhc;
		}

		.text-muted {
			color: darken(@dmc, 2%)!important;
		}
		.text-dark {
			color: @white!important;
		}
		
		.back-to-top .btn, .text-base {
			color: @dmc;
		}
		
		// The dropdown menu (ul)
		.dropdown-menu {
		  background-color: lighten(@dmb, 10%);
		  border: 1px solid @dmbc; // IE8 fallback
		  border: 1px solid @dmbc;

		  // Links within the dropdown menu
		  > li > a {
			color: @dmc;

			&:hover,
			&:focus {
			  color: @dmhc;
			  background-color: @dmb;
			}
		  }
		  .dropdown-header {
			color: @dmc;
		  }
		}

		// Active state
		.dropdown-menu > .active > a {
		  &,
		  &:hover,
		  &:focus {
			color: @dmhc;
			background-color: lighten(@dmb, 10%);
		  }
		}
		.list-group-item {
			background-color: @dmb;
			border-color: @dmbc;
			color: @dmc;
			
			&.list-group-item-action {
				&:hover, &:focus {
					background-color: rgba(0,0,0,0.1);
				}
			}
		}
		
		.list-info {
			&.list-info-bordered {
				li:not(:last-of-type) {
					border-color: @dmbc;
				}
			}
		}
		
		code {
			background-color: #000;
			color: #ffff00;
		}
		
		.card {
			border-color: @dmbc;
			.card-header, .card-footer {
				background-color: rgba(0,0,0,0.1);
				border-color: @dmbc;
			}
		}
		
		.sidebar .card-sidebar .list-group .list-group-item {
			&.active, &.active:hover, &.active:focus, &:hover, &:focus {
				 background-color: rgba(0,0,0,0.1);
				 border-color: @dmbc;
				 color: @dmc;
			}		
		}
		
		.cros-navbar {
			background: @dmb;
			border-color: @dmbc;
			.navbar-nav li a, .navbar-nav>.open>a, .navbar-nav>.open>a:hover, .navbar-nav>.open>a:focus, .navbar-header .secondary-menu-mobile.nav .dropdown-toggle, .navbar-header .secondary-menu-mobile.nav li a, .lang-btn .btn {
				color: @dmc;
			}
			.navbar-header .logo-section .logo {
				color: @white;
			}
			.navbar-header .logo-section .navbar-toggler span {
				color: @white;
			}
			.nav .open>a, .nav .open>a:hover, .nav .open>a:focus{
				background-color: transparent;
				border-color: transparent;
			}
			
			.navbar-header .secondary-menu-mobile.nav li.user_icon .nav-link img, .navbar-header .secondary-menu-mobile.nav li.user_icon .nav-link [class*="fa-"],
			.navbar-right li.user_icon .nav-link img, .navbar-right li.user_icon .nav-link [class*="fa-"]{
				border-color: @dmbc;
			}
			
			@media (max-width: 633px){
				.navbar-header .top, .navbar-header .top .secondary-menu-mobile.nav li .dropdown-toggle,
				.navbar-header .top .secondary-menu-mobile.nav li#Secondary_Navbar-Account {
					background-color: rgba(0,0,0,0.1);
					border-color: @dmbc;
				}
				
				&.primary, &.dark {
					.navbar-header .top, .navbar-header .top .secondary-menu-mobile.nav li .dropdown-toggle,
					.navbar-header .top .secondary-menu-mobile.nav li#Secondary_Navbar-Account {
						background-color: @dmb;
						border-color: @dmbc;
					}
					
					.navbar-header .top .secondary-menu-mobile.nav .tswicther[type=checkbox] + span,
					.navbar-header .top .secondary-menu-mobile.nav .lang-btn .btn {
						color: @dmc;
					}
				}
			}
			
			.navbar-nav li ul.dropdown-menu {
				background-color: lighten(@dmb, 10%);
				border-color: @dmbc;
				li {
					a {
						color: @dmc;
					}
				}
			}
			.dropdown-scroll {
				li {
					background: lighten(@dmb, 10%);
					border-color: lighten(@dmbc, 7%);
					a {
						color: @dmc!important;
						&:hover, &:focus {
							background: @themeColor!important;
						}
					}					
					
					&.dropdown-header, &.dropdown-header:hover, &.dropdown-header:focus {
						border-color: lighten(@dmbc, 7%);
						color: @dmc;
					}
				}
			
			}
			
			.lang-btn {
				.btn {
					&:hover, &:focus {
						color: @navbarDarklink;
					}
				}
			}
			
			&.submenu2 {
				.navbar-nav li {
					ul.dropdown-menu {
						border-color: @gray-dark;
					}
				}
			}
			
			&.primary, &.dark {
				background-color: @themeColor;
				border-color: @dmbc!important;
				.navbar-nav li a, .navbar-nav>.open>a, .navbar-nav>.open>a:hover, .navbar-nav>.open>a:focus, .navbar-header .secondary-menu-mobile.nav .dropdown-toggle {
					color: @navbarDarklink;
				}
			}
			
			&.primary, &.dark {
				.navbar-nav li#Secondary_Navbar-Account.user_icon .nav-link img,  .navbar-nav li#Secondary_Navbar-Account.user_icon .nav-link [class*="fa-"] {
					border-color: rgba(255,255,255,0.2);
				}			
			}
			.navbar-nav li#Secondary_Navbar-Account.user_icon .nav-link img, .navbar-nav li#Secondary_Navbar-Account.user_icon .nav-link [class*="fa-"] {
				border-color: @dmbc;
			}
			&.dark {
				.mega-menu {
					p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
						color: @dmc;
					}
				}
			}
		}
		
		&.pre-header-enabled {
			.cros-navbar {
				@media (max-width: 633px){
					&.primary, &.dark {
						.navbar-header .top, .navbar-header .top .secondary-menu-mobile.nav li .dropdown-toggle,
						.navbar-header .top .secondary-menu-mobile.nav li#Secondary_Navbar-Account {
							background-color: transparent;
							border-color: rgba(255, 255, 255, 0.2);
							
						}
					}
				}
			}
		}
		#order-standard_cart.modern #DomainSearchResults {
			background-color: lighten(@dmb, 7%);
		}
		.navbar-side {
			background-color: darken(@dmb, 7%);
			.logo {
				color: @dmc;
			}
			.media-search {
				border-color: @dmbc;
			}
			.side-nav li > a {
				background-color: darken(@dmb, 7%);
				color: @dmc;
				
				&:hover, &:focus {
					.mtext {
						color: @dmc;
					}
				}
			}
			
			.user-profile {
				border-color: @dmbc;
			}
			.media-search {
				.input-icon {
					.fas, .fal, .far {
						color: @dmc;
					}
				}
				.input-menu {
					color: @dmc;
					background-color: lighten(@dmb, 7%)!important;
					border-color: lighten(@dmb, 7%);		
				}
			}
			
			&.primary {
				background-color: @themeColor;
				.media-search {
					.input-menu {
						color: @dmc;
						background-color: rgba(0,0,0,0.1)!important;
						border-color: rgba(0,0,0,0.1);							
					}
				}
				
				.side-nav li > a {
					background-color: @themeColor;
					color: @dmc;
					
					&:hover, &:focus {
						.mtext {
							color: @dmc;
						}
					}
				}
			}
			
			&.dark {
				background-color: @gray-darker;
				.side-nav li > a {
					background-color: @gray-darker;
				}
			}
		}
		
		.header-lined h1 {
			color: @dmhc;
		}
		.pre-header {
			&.light {
				li {
					a {
						color: @dmc;
					}
				}			
			}
		}
		
		.panel {
			&.panel-default {
				&.cart-item {
					background-color: transparent;
					.panel-heading {
						color: @dmhc;
					}
					.item-addons {
						.prod-addons-container {
							border-color: @dmbc;
						}
					}
					.panel-body, .panel-footer {
						border-color: @dmbc;
					}
					.item-price, .item-qty {
						&:after {
							background-color: @dmbc;
						}
					}
				}
			}
		}
		
		.panel-footer {
			background-color: lighten(@dmb, 10%);
			border-color: @dmbc;
		}
		
		.client-home-panels {
			.panel {
				.panel-body {
					img {
						padding: 1rem;
						border: 1px solid @dmbc;
						background-color: @white;
						border-radius: 4px;
					}
				}	
			}
		}
		
		.promo-banner {
			.icon-left {
				img {
					padding: 1rem;
					border: 1px solid @dmbc;
					background-color: @white;
					border-radius: 4px;				
				}
			}
		}
		
		.TM-card, .panel, .panel.panel-default, .invoice-summary, .card {
			background-color: lighten(@dmb, 5%);
			border-color: @dmbc;
			
			.panel-heading {
				background: transparent;
				border-color: @dmbc;
				&#ticketReply {
					.fas, .fla, .far, .fad {
						color: @dmc;
					}
				}
			}
			&.white {
				background-color: lighten(@dmb, 5%)!important;
				border-color: @dmbc;
			}
			
			.list-group {
				border-color: @dmbc!important;
			}
			a.list-group-item, button.list-group-item, .list-group-item {
				background: transparent;
				border-color: @dmbc;
				color: @dmc;
				
				&:hover, &:focus {
					background: rgba(0,0,0,.1);
				}
			}
			
			&.panel-sidebar {
				background-color: transparent;
				border-color: @dmbc;
				
				a.list-group-item, button.list-group-item {
					&:hover, &:focus {
						background: transparent;
					}
				}
				
				&.panel-invoice-info, &.mc-panel-promo, &.panel-funds {
					background-color: lighten(@dmb, 5%);
					
					.list-info {
						border-color: @dmbc; 
					}
				}
				
				&.mc-panel-promo {
					img {
						padding: 0.50rem;
						border: 1px solid @dmbc;
						background-color: @white;
						border-radius: 4px;				
					}
					a {
						color: @dmc;
					}
				}
				&.panel-ticket-info {
					.list-group {
						border-color: @dmbc;
						
						.list-group-item:not(list-of-type) {
							border-color: @dmbc!important;
						}
					}
				}
				
				.panel-heading, .panel-footer {
					background-color: transparent;
				}
			}
		}
		
		.pagination {
			border-top: 1px solid @dmbc;
			.page-item {
				.page-link {
					background-color: lighten(@dmb, 5%);
					border-color: @dmbc;
				}	
				.disabled {
					span {
						color: @gray-light;
					}
				}
				
				&.active {
					.page-link {
						background-color: @themeColor;
						border-color: @themeColor;
					}
				}
			}
		}
		
		.TM-card {
			&.annoucements {
				background-color: transparent;
				.annuncement-item {
					border: 1px solid transparent;
					
					.annuncement-footer {
						.btn-link {
							background-color: lighten(@dmb, 10%)!important;
							border-color: @dmbc;
							color: @dmc;
						}
						.announcement-details {
							.announcement-date {
								color: @gray-light;
							}
						}
					}
					&:hover, &:focus {
						background-color: rgba(0,0,0,0.1);
					}
					
					&:not(:last-of-type) {
						border-bottom: 1px solid @dmbc;			
						
					}
					
					&.last {
						background-color: rgba(0,0,0,0.1);
					}
					
					&.latest {
						border-bottom: 1px solid transparent;
						border: 1px dotted transparent;
						
						&:hover, &:focus {
							border: 1px dotted @brand-primary;
						}
						
					}
				}
			}
		}
		
		.kbsuggestions a, .kbarticles a, .kbcat a, .kbsuggestions .kb-article, .kbarticles .kb-article, .kbcat .kb-article {
			&:hover, &:focus {
				background-color: rgba(0,0,0,0.1);
			}
		}
		
		.kbcat .kb-article, .kbarticles, .kbsuggestions a:not(:last-of-type), .kbarticles a:not(:last-of-type), .kbcat a:not(:last-of-type), .kbsuggestions .kb-article:not(:last-of-type), .kbarticles .kb-article:not(:last-of-type), .kbcat .kb-article:not(:last-of-type) {
			border-color: @dmbc;
		}
		.kbsuggestions a p, .kbarticles a p, .kbcat a p, .kbsuggestions .kb-article p, .kbarticles .kb-article p, .kbcat .kb-article p {
			color: @dmc;
		}
		.kbsuggestions, .kbarticles, .kbcat {
			border-color: @dmbc;
		}
		
		.ticket-departments {
			border-color: @dmbc;
			a {
				color: @dmc;
				border-color: @dmbc;
				p, .desc {
					color: @dmc;
				}
				&:hover, &:focus {
					background-color: rgba(0,0,0,0.1);
				}
			}
			&.list {
				a {
					&:not(:last-of-type) {
						border-color: @dmbc;
					}				
				}
			}
		}
		
		.view-ticket {
			.ticket-reply {
				&.staff {
					.posted-by {
						background-color: lighten(@dmb, 1%);
					}
					.message, .attachments {
						background-color: @dmb;
					}
				}
			}
			.posted-by {
				border-color: @dmbc;
				 .user .user-avatar img, .user .user-avatar [class*="fa-"] {
					border-color: lighten(@dmbc, 10%);
				 }
			}
			.attachments  {
				border-color: lighten(@dmb, 10%); 
				.attachment-list {
					li {
						a {
							border-color: lighten(@dmb, 10%); 
							figure {
								background-color: lighten(@dmb, 10%);
							}
						}
						span {
							border-color: lighten(@dmbc, 10%);
						}
					}
				}
			}
		}
		
		.panel-sidebar.panel-client-details .user-profile {
			.user-avatar {
				img {
					border-color: lighten(@dmbc, 10%);
				}
			}
		}
		.md-editor {
			border-color: @dmbc;
			&.active {
				border-color: @dmbc;
			}
			.md-header, .md-footer {
				background: lighten(@dmb, 10%)!important;
				.btn-sm {
					border-color: rgba(0,0,0,0.3)!important;
				}
			}
			textarea.markdown-editor, .md-preview {
				background-color: rgba(0,0,0,0.3)!important;
				border-color: @dmbc!important;
			}
		}
		.section .panel.panel-switch, .TM-card .panel.panel-switch {
			background-color: lighten(@dmb, 10%);
			border-color: @dmbc;
			
			&.checked {
				border-color: @themeColor;
			}
		}
		.tiles .tile .stats, .tiles .tile .no-link, .promo-banner, .home-kb-search .form-control, .table-container {
			background-color: lighten(@dmb, 5%);
			border-color: @dmbc;
			.icon, .stat {
				color: @dmc;
			}
		}
		
		.tiles .tile {
			.desc {
				border-color: lighten(@dmbc, 5%);
			}
		}
		
		.table {
			color: @dmc;
			&.table-hover {
				tbody {
					tr {
						&:hover, &:focus {
							color: @dmc;
							background-color: rgba(0,0,0,0.1);
						}
						&.active {
							border-color: @dmbc;
							&.total-row, .total-row {
								background-color: lighten(@dmb, 10%);
							}
							
							td {
								background-color: lighten(@dmb, 10%);
							}
						}
					}
				}
			}
		}
		
		.table-container .listtable .table thead th[class*=sorting_] {
			background: lighten(@dmb, 5%);
		}
		.table-container .listtable .table tbody tr {
			&:hover, &:focus {
				background: rgba(0,0,0,0.1);
			}		
		}
		
		.table-container.domain-pricing-table {
			background-color: transparent!important;
		}
		
		.table-container.domain-pricing-table table {
			border-color: @dmbc;
		}
		
		.table-container .listtable .table.datatable.has-columns-hidden tbody tr td span.responsiveExpander {
			background: lighten(@dmb, 5%);
		}
		
		.footable .pagination>li> a, .footable .pagination>li> span {
			border-color: lighten(@dmbc, 7%);
		}
	    .footable .pagination>.disabled>span, .footable .pagination>.disabled>span:hover, .footable .pagination>.disabled>span:focus, .footable .pagination>.disabled>a, .footable .pagination>.disabled>a:hover, .footable .pagination>.disabled>a:focus {
			color: @dmc;
	    }

		.cros-domain-page .domain-pricing .table-tlds.table > tbody > tr.even, .onepage_cart .ajaxcart_cont .domain-pricing .table-tlds.table > tbody > tr.even {
			background: rgba(0,0,0,0.1);
		}
		@media (max-width: 767.98px) {
			.cros-domain-page .domain-pricing .table-tlds.table > tbody > tr:not(:last-child), .onepage_cart .ajaxcart_cont .domain-pricing .table-tlds.table > tbody > tr:not(:last-child) {
				border-color: @dmbc;
			}
		}
		
		.product-details {
			.product-holder, .product-info {
				background-color: lighten(@dmb, 10%);
				border-color: @dmbc;
				
				.product-content {
					a {
						color: @dmc;
					}
				}
			}
			.product-footer {
				border-color: @dmbc;
				background-color: rgba(0,0,0,0.3);
				a {
					color: @dmc;
				}
			}
			
			.product-info {
				.cPanelExtrasPurchasePanel {
					background-color: rgba(0,0,0,0.3);
					border-color: @dmbc;
				}
			}
		}
		.section .panel.panel-tabs {
			.nav-pills li {
				a {
					color: @dmc;
				}
				&.active {
					a {
						background-color: lighten(@dmb, 10%);
						border-color: transparent;
						color: @dmc;					
					}
				}
			}
			.panel-nav {
				background-color: lighten(@dmb, 10%);
				border-color: @dmbc;
			}
		}
		
		.section .panel.panel-affiliate-referral-link {
			.panel-body {
				.input-group {
					@media (max-width:767px) {						
						.input-group-addon {
							&:first-child {
								border-right: 1px solid @dmbc;
							}
						}
					}
					.form-control {
						background-color: lighten(@dmb, 10%);
					}
				}
			}
		}
		
		.TM-card.invoice, .TM-card.quote  {
			.invoice-info, .quote-info {
				border-color: @dmbc;
			}
		}
		
		.table-container .table-header .btn, .network-status .network-status-top .view-filter-btns .btn {
			background-color: @dmb!important;
			color: @dmc!important;
			border-color: @dmbc!important;
		}
		
		.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td,
		.table-container .table-header, .table-container .dataTables_length, .table-container .dataTables_paginate {
			border-color: @dmbc;
		}
		
		.dataTable th[class*=sorting_] {
			background-color: transparent;
		}
		
		.dropdown-item {
			color: @dmc;
			&:hover, &:focus {
				background-color: @dmb;
			}
		}
		
		@media (max-width: 991px) {
			.cros-navbar .navbar-header .logo-section .navbar-toggle span {
				color: @dmc;
			}
		}
		
		.border, .border-top, .border-right, .border-left, .border-bottom, .border-top-bottom {border-color: @dmbc!important;}
		
		.bg-checkered {
			background-repeat: no-repeat,repeat,repeat;
			background-image: -o-radial-gradient(transparent,transparent 50%,@dmb),-o-linear-gradient(left,transparent,transparent 32px,#333333 32px,#333333),-o-linear-gradient(top,transparent,transparent 32px,#333333 32px,#333333);
			background-image: radial-gradient(transparent,transparent 50%,@dmb),linear-gradient(to right,transparent,transparent 32px,#333333 32px,#333333),linear-gradient(to bottom,transparent,transparent 32px,#333333 32px,#333333);
			background-size: 100% 100%,calc(32px + 1px) calc(32px + 1px),calc(32px + 1px) calc(32px + 1px);
		}
		

		.block-footer .footer-widgets ul.list-unstyled li a, .block-footer .footer-last .footer-copyright,  .block-footer .footer-last li a {
			color: @dmc;
		}
		.block-footer .footer-widgets, .block-footer .sfooter, .block-footer .footer-widgets h4, .block-footer .footer-widgets .h4, .domains-section .domain-hero.in-inner-block .domain-pricing .featured-tlds div {
			border-color: @dmbc;
		}
		.block-footer .footer-widgets {
			&.bg-primary {
				h4, .h4 {
					border-color: @white;
				}
			}
		}
		
		.network-status.panel .panel-body {
			border-color: @dmbc;
		}
		
		.domains-section {
			.domain-hero .domain-pricing .featured-tlds {
				div {
					border-color: @dmbc;
					.tld {
						color: @dmhc;
					}
					&.tld-img {
						.tld {
							img {
								 -webkit-filter: brightness(0) invert(1);
								filter: brightness(0) invert(1);
							}
						}
					}
				}
			}
			.tld-content {
				&.tld-img {
					.tld {
						img {
							 -webkit-filter: brightness(0) invert(1);
							filter: brightness(0) invert(1);
						}
					}
				}			
			}
			.tld-content+.tld-content:before {
				background: @dmbc!important;
			}
		}
		
		// Forms
		.form-control, #registration .field, #registration .form-control, .form-control, #order-standard_cart .field, #order-standard_cart .form-control {
			color: @dmc;
			background-color: lighten(@dmb, 15%);
			border-color: @dmbc;

			// Placeholder
			&::placeholder {
				color: darken(@dmc, 30%);
			}
		}
		
		.input-group-append .btn.btn-default {
			border-color: @dmbc!important; 
		}
		
		.form-control {
			&.disabled, &.readonly, &disabled, &readonly, &:disabled, &[readonly] {
				background-color: rgba(0,0,0,0.3);
				color: darken(@dmc, 30%); 
			}
		}
		
		input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:focus:hover, input:-webkit-autofill:hover {			
			border: 1px solid lighten(@dmb, 15%)!important;
			-webkit-text-fill-color: @dmc;
			-webkit-box-shadow: 0 0 0 1000px @dmbc inset!important;
			transition: background-color 5000s ease-in-out 0s;
			background-color: lighten(@dmb, 15%)!important;			
		}
		
		.input-group-addon, .input-group-text {
			background-color: lighten(@dmb, 15%);
			border-color: @dmbc;
			color: @dmc;
		}
		
		.form-actions {
			border-color: @dmbc;
		}
		
		.custom-file-label {
			background-color: lighten(@dmb, 15%);
			border-color: @dmbc;
			color: @dmc;

			&:after {
				background-color: lighten(@dmb, 15%);
				border-color: @dmbc;
				color: @dmc;
			}			
		}
		
		//forms end
		
		.domains-section .domain-hero .serach-form,
		.site-banner-domain .domain-hero .input-group {
			background-color: lighten(@dmb, 15%)!important;
			border-color: lighten(@dmb, 15%)!important;
		}
		@media (max-width: 586px) {		
			.domains-section .domain-hero .serach-form .form-control,
			.site-banner-domain .domain-hero .input-group .form-control {
				border-color: @dmbc!important;
			}
		}
		.light, .well, .light-grey-bg {
			background: lighten(@dmb, 3%);
			border-color: @dmbc;
			color: @dmc;
		}
		
		.bg-light {
			background-color: lighten(@dmb, 3%)!important;
		}

		.text-light {
			color: @dmc!important;
		}
		.white, .bg-white {
			background: lighten(@dmb, 10%)!important;
			border-color: @dmbc;
			color: @dmc;
		}
		.white, .light {	
			h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
				color: @dmhc;
			}
			&.cros-box {
				&.s4 {
					&:hover, &:focus {
						color: @dmc;
					}
				}
			}		
		}
		
		// pricing tables
		.cros-pricing-container .cros-pricing-table .table tbody tr {
			background-color: rgba(0, 0, 0, 0.5);
			border-color: lighten(@dmb, 10%);
		}
		.cros-pricing-container .cros-pricing-table .table tbody td .server-info {
			background-color: rgba(0, 0, 0, 0.9);
		}
		.cros-pricing-container .cros-pricing-table .table tbody td {
			border-color: @dmbc;
		}
		
		.section__plan_comparison .plan .plan__column .plan__body .plan__cell,
		.section__plan_comparison .plan .plan__column .plan__header {
			border-color: lighten(@dmbc, 17%);
		}
		
		.cros-pricing-container .cros-pricing-table .billing-cycle-pricing .btn-group {
			.btn, .dropdown-menu, .dropdown-menu li {
				border-color: lighten(@dmbc, 17%)!important;
			}
			
			.dropdown-menu li {
				color: @dmc;
				&:hover, &:focus {
					background-color: @dmb;
				}
				.current_prcing {
					color: @dmc;
				}
			}
			
			.discounted_options {
				color: @dmc;
			}
		}
		.cros-tabsbar {
			.nav-tabs {
				background-color: rgba(0,0,0,0.5);
				border-color: @dmbc;
				li {
					border-color: @dmbc!important;
					a {
						color: @dmc;
						&.active {
							background: @themeColor;
							border-color: @themeColor;				
						}
					}
				}
			}
		}
		
		.tab-pane .plan-specs [class*='col-'] {
			background-color: rgba(0,0,0,0.5);
			border-color: @dmbc;
			
			.description h2 {
				color: @dmhc;
			}
		}
		
		//end pricing tables
		
		//Panels
		.panel-default>.panel-heading+.panel-collapse>.panel-body {
			border-color: @dmbc;
		}
		
		@media (min-width: 992px) {
			.testimonials-carousel {
				.owl-item {
					.slide-item {
						.testimonial-item {
							p, .name {
								color: @baseFontcolor;
							}
						}
					}
					
					&.center {
						.slide-item {
							.testimonial-item {
								p, .name {
									color: @dmc;
								}
							}
						}
					}
				}
			}
		
		}
		
		.btn {
			&.btn-default, &.btn-dark, &.btn-add-to-cart:not(.btn-primary), &.btn-add {
				background-color: rgba(255,255,255,0.1)!important;
				border-color: lighten(@dmbc, 30%)!important;
				color: @dmc!important;
				
				&:hover, &:focus {
					background-color: rgba(255,255,255,0.3)!important;
				}
			}
			&.btn-icon {
				color: @dmc;
				&:hover, &:focus, &:active, &.active {
					color: lighten(@dmc, 7%);
				}
			}
			&.dropdown-toggle {
				color: @dmc!important;
				//border-color: transparent!important;
			}
		}
		
		.modal-content {
			background-color: lighten(@dmb, 5%);
			.modal-header {
				background-color: lighten(@dmb, 2%);
			}
			.modal-header, .modal-footer  {
				border-color: @dmbc;
			}
		}

		.modal-localisation .item-selector .item.active, .modal-localisation .item-selector .item:hover, .modal-localisation .item-selector .item:focus	{
			span {
				color: #000!important;
			}
		}
		
		.table-striped>tbody>tr:nth-of-type(odd) {
			background-color: rgba(0,0,0,0.1);
		}
		
		tr.masspay-total td {
			background-color: lighten(@dmb, 3%);
		}
		.close {
			color: @dmc;
			text-shadow: none;
		}
		
		hr {
			border-color: @dmbc!important;
		}
		
		.theme-colors {
			background-color: @dmb;
			border-color: @dmbc;
		}
		
		&.login {
			&:before {
				background-color: #000000;
			}
			.login-container .login-header a span {
				color: @dmhc;
			}
			.login-container .social-or-login span {
				background-color: @dmb;
			}
			.login-container .social-or-login:before {
				border-color: @dmbc;
			}
			
			.login-box {
				background: lighten(@dmb, 3%)!important;
				.footer-warp a {
					color: @dmc!important;
				}
			}
		}

		hr {
			&.separator {
				background: linear-gradient(to right, rgba(0, 0, 0, 0.25),rgba(255, 255, 255, 0.70),rgba(0, 0, 0, 0.25));
			}
		}
		
		#order-standard_cart {
			.domain-selection-options .option {
				background-color: transparent;
				&.option-selected {
					background-color: rgba(0,0,0,0.1);
					border-color: @dmbc;
				}
			}
			label {
				color: @dmc;
			}
			.input-group-addon, .field[disabled], .field[readonly], .form-control[disabled], .form-control[readonly] {
				background-color: rgba(0,0,0,0.3);
				border-color: @dmbc;
				color: @dmc;
			}
			.suggested-domains .domain-lookup-suggestions-loader, .products .product, .domain-renewals {
				background-color: lighten(@dmb, 5%);
				border-color: @dmbc;
				color: @dmc;
			}
			.spotlight-tld {
				background-color: @dmb;
				border-color: @dmbc;
				color: @dmc;
			}
			
			.cc-input-container, .apply-credit-container {
				background-color: rgba(0,0,0,0.3);
				border-color: @dmbc;					
			}
				
			.suggested-domains {
				.list-group-item, .list-group + .panel-footer {
					border-color: @dmbc;
				}
			}
			.addon-promo-container {
				background-color: transparent!important;
			}
			
			.@{brand}-domain-checker-container {
				background-image: none;
				background: linear-gradient(90deg,@dmb,lighten(@dmb, 3%));
				border-radius: 100px;
				&:before {
					display: none;
				}
				.input-group-box {
					background-color: rgba(0,0,0,0.1);
				}
			}
			&.@{brand}-domain-page {
				.domain-pricing {
					.TM-card {
						background: lighten(@dmb, 5%);
					}
					.tld-row.highlighted {
						background: rgba(0,0,0,0.1);
					}
					.tld-pricing-header {
						color: @dmc;
					}
					.tld-pricing-header .col-xs-2,
					.tld-pricing-header .col-sm-2,
					.tld-pricing-header .col-md-2,
					.tld-pricing-header .col-xs-4,
					.tld-pricing-header .col-sm-4,
					.tld-pricing-header .col-md-4,
					.two-row-center, .tld-row {
						border-color: @dmbc;
					}
				}
			}
			.featured-tlds-container {
				.featured-tld {
					background-color: lighten(@dmb, 7%);
					border-color: @dmbc;
					.img-container {
						img {
							 -webkit-filter: brightness(0) invert(1);
							filter: brightness(0) invert(1);
						}
					}
					.price {
						background-color: rgba(0,0,0,0.1);
						border-color: @dmbc;
					}
				}
			}			
			.domain-renewals .domain-renewal {
				border-color: @dmbc!important;
			}
			.products .product .product-addon-footer {
				border-color: lighten(@dmbc, 7%);
			}
			
			// for *-Plus
			.summary-container, .secondary-cart-body .product-info, .marketing-email-optin {
				background-color: lighten(@dmb, 10%);
				.btn-continue-shopping {
					color: @dmc;
				}
			}
			.spotlight-tlds, .domain-promo-box {
				background-color: transparent;
			}
			.domain-pricing .tld-pricing-header div:nth-child(odd),
			.domain-pricing .tld-row.highlighted {
				background-color: rgba(0,0,0,0.5);
			}
			.domain-pricing .two-row-center,
			.domain-pricing .tld-pricing-header .col-sm-2, .domain-pricing .tld-pricing-header .col-sm-4, .domain-pricing .tld-pricing-header .col-xs-2, .domain-pricing .tld-pricing-header .col-xs-4 {
				background-color: transparent;
			}
			.panel-addon {
				.panel-body {
					label {
						color: @dmc;
					}
				}
				.panel-price {
					background-color: transparent;
				}
			}
			
			.view-cart-tabs {
				border: 1px solid @dmbc;
				.nav-tabs {
					border-color: @dmbc;
					.nav-link {
						background-color: transparent!important;
					}
					.nav-link.active, .nav-item.show .nav-link, .nav-link:hover, .nav-link:focus {
						color: @dmc;
						border-color: transparent;
					}
				}
				.tab-content {
					background-color: transparent;
				}
			}
			// end for *-Plus
			
			.order-summary {
				background-color: @dmb;
				.subtotal, .bordered-totals {
					border-color: lighten(@dmbc, 7%);
				}
				.summary-container-outer {
					background-color: lighten(@dmb, 10%);
					border-color: @dmbc;
					color: @dmc;
					.btn-continue-shopping {
						color: @dmc;
					}
				}
			 }
			
			.panel-addon {
				border: 1px solid @dmbc;
			}
			.panel-addon.panel-addon-selected {
				background-color: @dmb;
				border-color: @themeColor;
			}
			.view-cart-items {
				border-color: @dmbc;
				.item {
					background-color: rgba(0,0,0,0.1); 
					
					&:nth-child(even) {
						background-color: rgba(0,0,0,0.2);
					}
				}
				
			}
			
			.mc-promo {
				background-color: lighten(@dmb, 5%)!important;
				.body {
					background-color: lighten(@dmb, 5%)!important;
					border-color: @dmbc;
				}
			
			}
			.account-select-container{
				border-color: transparent; 
				div.account {
					background-color: rgba(0,0,0,0.3);
					border-color: @dmbc; 
				
					&.active {
						background-color: transparent;
					}
				}
			}
			
			.sub-heading {
				span {
					background-color: @dmb;
					border-color: @dmbc;
				}
				&:before {
					background: linear-gradient(to right, rgba(0, 0, 0, 0.25),rgba(255, 255, 255, 0.70),rgba(0, 0, 0, 0.25));
				}
			}
			
			#cros-payment-gateway {
				border-color: @dmbc;
				background-color: lighten(@dmb, 7%);
				label {
					border-color: lighten(@dmbc, 7%);
					.check-label {
						color: @dmc;
					}
					.check-icon {
						img {
							background-color: @white;
							border-color: @dmbc;
						}
					}
					
					&.is-selected {
						color: @themeColor;
					}
				}
			}
			.irs--big {
				.irs-grid-pol {
					background-color: @dmc;
				}
				.irs-grid-text {
					color: @dmc;
				}
				.irs-min, .irs-max {
					background-color: rgba(255,255,255,0.3);
				}
				.irs-line {
					background: @dmc;
					background-color: @dmc;
					border-radius: 0;
					border-color: @dmbc;
				}
			}
		}
		
		.landing-page {
		 .navbar {
			border-color: @dmbc;
			.navbar-toggler {
				color: @dmc;
				border-color: @dmc;
				.navbar-toggler-icon {
					background-color: @dmc;
				}				
			}
			 li {
				a {
					color: @dmc; 
					border-color: @dmbc;
				}
				
				&:last-child {
					a {
						border-color: @dmbc;
					}				
				}
			 }
		 }
		 .detailed-info, .features, .faqs, .faq, .pricing-item {
			background: lighten(@dmb, 10%);
			border-color: @dmbc;
			color: @dmc; 
		 }
		 .pricing-item {
			.feature-heading {
				background-color: rgba(0,0,0,0.1);
			}
			ul li, form {
				border-color: lighten(@dmbc, 7%);
			}
		 }
		 
		 &.ssl {
			.row-pricing-table .pricing-table {
				background: lighten(@dmb, 10%);
				border-color: @dmbc;
				ul li {
					border-color: @dmbc;
				}
			}
			.validation-levels .item {
				background: lighten(@dmb, 10%);
			}
			ul.ssl-certs-all {
				.padded-cell.price {
					color: @dmhc;
				}
				li {
					border-color: @dmbc;
				}
			}
			.detailed-info {
				.panel {
					.panel-heading {
						background-color: transparent;
						h4 {
							a {
								color: @dmc;
							}
						}
					}
					.panel-body {
						background-color: transparent;
					}
				}
			}
		 }
		 
		 &.sitelock {
			.plans {
				.plan {
					background: lighten(@dmb, 10%);
					h4 {
						color: @dmhc;
					}
					ul li {
						border-color: lighten(@dmbc, 7%);
					}
				}
			}
			.emergency {
				background-color: transparent;
			}
			.emergency-buy-banner {
				background-color: rgba(0,0,0,0.1);
				border-color: @dmbc;
			}
		 }
		 &.weebly {
			.weebly-lite-plan {
				background: lighten(@dmb, 10%);
			}
		 }
		 
		 &.mail-services {
			.product-options {
				.price {
					color: @dmc;
				}
				.item {
					background: lighten(@dmb, 10%);
					border-color: @dmbc;
					color: @dmc;
				}
			}
			.benefits {
				background-color: rgba(0,0,0,0.3);
				border-color: @dmbc;
			}
		 
		 }
		 
		 &.codeguard {
			@media (min-width: 768px) {
				.overview-features li {
					border-color: @dmbc;
				}
			}
			.pricing .pricing-slider-actions .slider-actions-list .slider-actions-btn {
				border-color: @dmbc;
			}
		}
		
		&.sitelockvpn {
			.feature {
				&.pricing {
					ul li {
						border-color: lighten(@dmbc, 7%);
					}
					.pricing-box {
						background: lighten(@dmb, 10%);
						
						.cycle {
							background: rgba(0,0,0,0.1);
							border-color: @dmbc;
							color: @dmc;
						}
						.price {
							color: @dmc;
						}
						.btn-signup {
							border-color: transparent;
						}
					}
				}
				
				&.alternate-bg {
					background: lighten(@dmb, 7%);
				}
			}
		}
		
		&.marketgoo {
			.feature-wrapper {
				border-color: @dmbc;
			}
			.feature-blocks {
				img {
					border-color: @dmbc;
				}
			}
			.plan {
				ul {
					border-top: 1px solid @dmbc;
					li {
						border-bottom: 1px solid @dmbc;
					}
				}

			}
			.plan.labels {
				ul {
					li {
						border-right: 1px solid @dmbc;
					}
				}
			}
			.plan.marketgoo_pro {
				ul {
					background-color: rgba(0,0,0,0.3);
				}
			}			
		}
		
		&.ox {
			.header {
				background-color: @gray-dark;
				h1 {
					color: @white;
				}
			}
			.stand-out {
				background-color: @dmb;
			}
			.features {
				.title {
					color: @dmhc;
				}
			}
			.pricing {
				background-color: @dmb;
				table {
					tr {
						&:nth-child(even) {
							td {
								&:first-child {
									background-color: rgba(0,0,0,0.3);
								}
							}
						}
					}
				}
				td {
					&:not(.no-border) {
						border: 1px solid @dmbc;
					}
				}
				th {
					border: 1px solid @dmbc;
					background-color: rgba(0,0,0,0.3);
				}
				th.feature {
					background-color: @themeColor;
					color: @white;
					
				}
				td.no-bg {
					background-color: transparent !important;
				}
			}
			.faqs {
				background-color: transparent;
			}
		}

		&.sitebuilder {
			.logo-container, .feature-block {
				img {
					border: 1px solid @dmbc;
					border-radius: 4px;
					background-color: @white;
				}
			}
			.logo-container {
				img {
					padding: 1rem;
				}
			}
			
			.feature-block {
				img {
					margin-bottom: 0.50rem;
				}
			}
		}		
		 
		 .content-block.secondary .btn-group .btn-default {
			background-color: lighten(@dmb, 10%);
			border-color: @dmbc;
			color: @dmc;
		 }
		 .content-block.secondary .btn-group .btn-default:hover,
		 .content-block.secondary .btn-group .btn-default:focus,
		 .content-block.secondary .btn-group .btn-default.active {
			background-color: rgba(0,0,0,0.1);
		 }
		 
		 .content-block.border-bottom {
			border-color: @dmbc;
		 }
		 .get-started .pricing-tables {
			color: @dmc;
		 }
		 .nav-tabs {
			li{
				a {
					color: @dmc;
					border-color: @dmbc;
					&.active {
						background-color: lighten(@dmb, 10%);
						color: @dmc;
					}
					
					&:hover, &:focus {
						background-color: lighten(@dmb, 10%);
						color: @dmc;
					}
				}

			}
		 }
		 .tab-content {
			background-color: lighten(@dmb, 10%);
			border-color: @dmbc;
		 }
		 
		 .faq .panel-group, .faqs .panel-group {
			.panel.panel-default {
				border-color: @dmbc;
				
				.panel-heading {
					background-color: rgba(0,0,0,0.1);
					border-color: @dmbc;
					.panel-title {
						color: @dmc;
					}
				}
			}
		 }
		}
		
		.mc-promo-manage .logo, .mc-promo-login .logo {
			border-right-color: @dmbc;
		}
		.store-promoted-product  {
			background-color: lighten(@dmb, 10%);
			border-color: @dmbc;
		}
		
		.store-order-container {
			.store-domain-tabs {
				border-color: @dmbc; 
				li {
					a {
						background-color: transparent;
						border-color: @dmbc;
						color: @dmc;
					}
					&.active {
						a {
							background-color: lighten(@dmb, 3%);
							border-color: @dmbc;
							border-bottom-color: transparent;
							&:hover, &:focus {
								background-color: lighten(@dmb, 3%);
							}
						}
					}
				}
			}
			.store-domain-tab-content {
				background-color: lighten(@dmb, 3%);
				border-color: @dmbc;
			}
		}
		
		.alert-lg {
			border-color: @dmbc;
		}
		
		.alert {
			background-color: lighten(@dmb, 5%);
			border-color: transparent;
			color: @dmc;
			
			.close {
				text-shadow: 0 1px 0 @dmc;
			}
			.btn {
				border-color: @white!important;
			}
			.alert-link, a, a:hover, a:focus {
				color: @white;
			}
			&.alert-info {
				border-left: 3px solid @brand-info!important;
			}

			&.alert-success {
				border-left: 3px solid #3c763d!important;
			}

			&.alert-danger {
				border-left: 3px solid @brand-danger!important;
			}

			&.alert-warning {
				border-left: 3px solid @brand-warning!important;
			}
		}
		
		.intl-tel-input .country-list {
			color: @dmc;
			background-color: lighten(@dmb, 15%);
			border-color: @dmbc;
		}
		.intl-tel-input.separate-dial-code .selected-flag {
			border-color: @dmbc;
		}
		.intl-tel-input .country-list .country.highlight {
			background-color: rgba(0,0,0,0.5);
		}
		
		.select2-container--default .select2-selection--single {
			background-color: lighten(@dmb, 15%);
			.select2-selection__rendered {
				color: @dmc;
			}
		}
		.select2-container {
			.select2-container--default, .select2-selection--single {
				border-color: @dmbc;
			}
			.select2-search--dropdown .select2-search__field {
				background-color: lighten(@dmb, 15%);
				border-color: @dmbc;
				color: @dmc;			
			}
		}
		
		.select2-container--default .select2-results__option[aria-selected=true] {
			background-color: lighten(@dmb, 5%);
		}
		
		.select2-dropdown {
			background-color: lighten(@dmb, 10%);
			border-color: @dmbc;
		}
		
		#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields {
			background-color: transparent!important;
		}
		.paypal_ppcpv-payment-form .selected {
			background-color: transparent!important;
		}

		#frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]),
		#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul {
			border: 1px solid transparent!important;
		}
		
	}
}