/*FontAwesome Import for Icons*/
@import url("/css/vendor/fontawesome-free/css/all.min.css"); 

/*Global TailwindCSS color, cloned for custom styles*/
:root {
	--text-transparent: transparent;
	--text-black: #000;
	--text-white: #fff;
	--text-gray-100: #f7fafc;
	--text-gray-200: #edf2f7;
	--text-gray-300: #e2e8f0;
	--text-gray-400: #cbd5e0;
	--text-gray-500: #a0aec0;
	--text-gray-600: #718096;
	--text-gray-700: #4a5568;
	--text-gray-800: #2d3748;
	--text-gray-900: #1a202c;
	--text-red-100: #fff5f5;
	--text-red-200: #fed7d7;
	--text-red-300: #feb2b2;
	--text-red-400: #fc8181;
	--text-red-500: #f56565;
	--text-red-600: #e53e3e;
	--text-red-700: #c53030;
	--text-red-800: #9b2c2c;	
	--text-red-900: #742a2a;	
	--text-orange-100: #fffaf0;	
	--text-orange-200: #feebc8;	
	--text-orange-300: #fbd38d;	
	--text-orange-400: #f6ad55;	
	--text-orange-500: #ed8936;	
	--text-orange-600: #dd6b20;	
	--text-orange-700: #c05621;	
	--text-orange-800: #9c4221;	
	--text-orange-900: #7b341e;	
	--text-yellow-100: #fffff0;	
	--text-yellow-200: #fefcbf;	
	--text-yellow-300: #faf089;	
	--text-yellow-400: #f6e05e;	
	--text-yellow-500: #ecc94b;	
	--text-yellow-600: #d69e2e;	
	--text-yellow-700: #b7791f;	
	--text-yellow-800: #975a16;	
	--text-yellow-900: #744210;	
	--text-green-100: #f0fff4;	
	--text-green-200: #c6f6d5;	
	--text-green-300: #9ae6b4;	
	--text-green-400: #68d391;	
	--text-green-500: #48bb78;	
	--text-green-600: #38a169;	
	--text-green-700: #2f855a;	
	--text-green-800: #276749;	
	--text-green-900: #22543d;	
	--text-teal-100: #e6fffa;	
	--text-teal-200: #b2f5ea;	
	--text-teal-300: #81e6d9;	
	--text-teal-400: #4fd1c5;	
	--text-teal-500: #38b2ac;	
	--text-teal-600: #319795;	
	--text-teal-700: #2c7a7b;	
	--text-teal-800: #285e61;	
	--text-teal-900: #234e52;	
	--text-blue-100: #ebf8ff;	
	--text-blue-200: #bee3f8;	
	--text-blue-300: #90cdf4;	
	--text-blue-400: #63b3ed;	
	--text-blue-500: #4299e1;	
	--text-blue-600: #3182ce;	
	--text-blue-700: #2b6cb0;	
	--text-blue-800: #2c5282;	
	--text-blue-900: #2a4365;
	--text-indigo-100: #ebf4ff;
	--text-indigo-200: #c3dafe;	
	--text-indigo-300: #a3bffa;	
	--text-indigo-400: #7f9cf5;	
	--text-indigo-500: #667eea;	
	--text-indigo-600: #5a67d8;	
	--text-indigo-700: #4c51bf;	
	--text-indigo-800: #434190;	
	--text-indigo-900: #3c366b;	
	--text-purple-100: #faf5ff;	
	--text-purple-200: #e9d8fd;	
	--text-purple-300: #d6bcfa;	
	--text-purple-400: #b794f4;	
	--text-purple-500: #9f7aea;	
	--text-purple-600: #805ad5;	
	--text-purple-700: #6b46c1;	
	--text-purple-800: #553c9a;	
	--text-purple-900: #44337a;	
	--text-pink-100: #fff5f7;	
	--text-pink-200: #fed7e2;	
	--text-pink-300: #fbb6ce;	
	--text-pink-400: #f687b3;	
	--text-pink-500: #ed64a6;	
	--text-pink-600: #d53f8c;	
	--text-pink-700: #b83280;	
	--text-pink-800: #97266d;	
	--text-pink-900: #702459;	
	--text-green-primary: #15b67c;
}

/*Text Styling*/
.active-pink-500.active {
	color: var(--text-pink-500);
}

/*Tab Styling*/
.accountactivity-tab.active {
	border-bottom: 2px solid var(--text-green-primary);
	font-weight: 500;
}

.home-tab.active {
	background-color: var(--text-green-500);
}

.print-tab.active {
	background-color: #d4145a;
	color: white;
}

.material-tab.active {
	color: #d4145a;
	margin-bottom: 5px;
	border-bottom: 3px solid #d4145a;
}

/*3D Autoquoter Styling*/
.hide-autoquote-interactive {
	display: none;
}

/*Checkout Styling*/
.fulfillment-shipping-3dp,
.fulfillment-pickup-3dp, 
.fulfillment-shipping,
.fulfillment-pickup {
	background-color: var(--text-gray-600);
	border: none;
}

.fulfillment-shipping-3dp:hover,
.fulfillment-pickup-3dp:hover, 
.fulfillment-shipping:hover,
.fulfillment-pickup:hover {
	background-color: var(--text-gray-500);
}

.fulfillment-shipping-3dp.active,
.fulfillment-pickup-3dp.active,
.fulfillment-shipping.active,
.fulfillment-pickup.active {
	background-color: var(--text-purple-500);
	border: 2px solid var(--text-green-500);
}

.fulfillment-shipping-3dp.active:hover,
.fulfillment-pickup-3dp.active:hover,
.fulfillment-shipping.active:hover,
.fulfillment-pickup.active:hover {
	background-color: var(--text-purple-400);
}

/*Dropdown Hover*/
.dropdown:hover .dropdown-menu {
  display: block;
}

/*Accordion Styling*/
.modlib-section label:after {
	content: "\f107";
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	right: 1em;
	color: var(--text-blue-500);
}

.modlib-section input:checked + label:after {
	content: "\f106";
    font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	line-height: .8em;
}

.accordion__content{
	max-height: 0em;
	transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.modlib-section input[name='panel']:checked ~ .accordion__content {
	/* Get this as close to what height you expect */
	max-height: 50em;
}

.modlib-section input[name='panel']:checked ~  label {
	font-weight: 500;
}

/*Navigation Slider Dots*/
.nav-dots {
	width: 100%;
	height: 11px;
	display: block;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
}

.nav-dots .nav-dot.active {
	background: white;
}