:root {
	--main-bg-color: brown;
	--primary-btn-color: #007BFF;
	--primary-btn-color-semi-transparent: #007BFF50;
	--secondary-btn-color: #17A2B8;
	--success-btn-color: #28a745;
	--danger-btn-color: #dc3545;
	--warning-btn-color: #ffc107;

	--bg-dark-1: #010101;
	--bg-dark-2: #11151A;
	--bg-dark-3: #171D24;
	--bg-dark-3b: #161a20;
	--bg-dark-4: #1B2229;
	--bg-dark-5: #1E262E;
	--bg-dark-6: #232C36;


	--text-normal: #cdcdcd;
	--text-faded: #aaa;
	--text-active: white;
	--text-danger: #dc3545;
	--text-success: #28a745;

	--text-dark: #212529;

	--grey-line: #707070;

	/* --logo-dark-blue: #004080; */
	--logo-dark-blue: #003367;
	--logo-light-blue: #0099ff;
	/* --logo-light-blue: #007fff; */
}


.btn-primary,
.btn-primary.disabled, 
.btn-primary:disabled,
.btn-primary.focus, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
	color: #fff;
	background-color: #007bff;   	/* if the browser doesn't support CSS var (looking at you, IE...) */
	border-color: #007bff;   		/* if the browser doesn't support CSS var (looking at you, IE...) */
	background-color: var(--primary-btn-color);
	border-color: var(--primary-btn-color);
}
.btn-primary.focus, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem var(--primary-btn-color-semi-transparent);
}
a,
a.active,
a.focus,
a.visited {
	color: #007bff;   				/* if the browser doesn't support CSS var (looking at you, IE...) */
	color: var(--primary-btn-color);
}
.btn-primary:hover {
	filter: brightness(1.1) !important;

	background-color: #007bff;   	/* if the browser doesn't support CSS var (looking at you, IE...) */
	border-color: #007bff;   		/* if the browser doesn't support CSS var (looking at you, IE...) */
	background-color: var(--primary-btn-color);
	border-color: var(--primary-btn-color);
}
.btn-info:hover {
	background-color: #1ab8d1 !important;
}

.btn-secondary:hover {
	background-color:#79838b !important;
}

.btn-danger:hover {
	background-color:#df4958 !important; 
}

.input-group-text {
	white-space: normal !important;
}



/* review links */
body.black,
.color-swatch.black,
.dot.black {
	background-image: linear-gradient(135deg, rgb(34, 34, 34), rgb(10, 10, 10) );
	color: white;
}
body.black .modal {
	color: #212529;;
}
body.grey,
.color-swatch.grey,
.dot.grey {
	background-image: linear-gradient(135deg, rgba(225,225,225,1), rgba(140,140,140,1) );
}
body.white,
.color-swatch.white,
.dot.white {
	background-image: linear-gradient(135deg, rgba(255,255,255,1), rgba(225,225,225,1) );
}
body.green,
.color-swatch.green,
.dot.green {
	background-image: linear-gradient(135deg, rgb(89, 141, 105), rgb(36, 83, 42) );
}
body.blue,
.color-swatch.blue,
.dot.blue {
	background-image: linear-gradient(135deg, rgb(71, 91, 146), rgb(31, 46, 87) );
}
body.lightblue,
.color-swatch.lightblue,
.dot.lightblue {
	background-image: linear-gradient(135deg, rgb(131, 196, 233), rgb(63, 132, 189) );
}
body.yellow,
.color-swatch.yellow,
.dot.yellow {
	background-image: linear-gradient(135deg, rgb(241, 229, 159), rgb(216, 209, 106) );
}
body.orange,
.color-swatch.orange,
.dot.orange {
	background-image: linear-gradient(135deg, rgb(247, 185, 115), rgb(240, 139, 57) );
}
body.red,
.color-swatch.red,
.dot.red {
	background-image: linear-gradient(135deg, rgb(255, 126, 126), rgb(199, 64, 64) );
}
body.pink,
.color-swatch.pink,
.dot.pink {
	background-image: linear-gradient(135deg, rgb(252, 142, 188), rgb(238, 80, 172) );
}
body.purple,
.color-swatch.purple,
.dot.purple {
	background-image: linear-gradient(135deg, rgb(202, 142, 252), rgb(162, 80, 238) );
}