/*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-red-1: #e54c3c;
	--text-red-2: #f0614c;
	--text-blue-1: #00acff;
	--text-blue-2: #81d1ed;
	--text-blue-3: #a4dcea;
	--text-gray-1: #757a88;
	--text-gray-2: #666666;
	--text-gray-3: #ababab;
	--text-gray-4: #e9ebed;
	--text-pink-1: #D100FF;
	--text-teal-1: #0CF1FF;
}

.text-pink-1 {
	color: #D100FF;
}
.text-teal-1 {
	color: #0CF1FF;
}
.bg-pink-1 {
	background-color: #D100FF;
}
.bg-teal-1 {
	background-color: #0CF1FF;
}
.border-pink-1 {
	border-color: #D100FF;
}
.border-teal-1 {
	border-color: #0CF1FF;
}

h1, h2, h3, p, a, span, div, section, ol, ul, li {
	font-family: lores-12-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.condensed {
	font-family: lores-12-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.reg-font {
	font-family: lores-12-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.active-blue-1.active {
	font-weight: bold;
	color: #e54c3c;
}

/*Background Image*/
#mainBody {
    background-image: url("../../images/bg-image.png");
}

.home-hdiv {
	height: 2px;
    width: 90%;
    background: #CCC;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

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


/* Text Input and Button styles */

.dh-steps-container {
	width: 300px;
	margin: 0 auto;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	justify-content: space-between;
}

.dh-form-container {
	width: 350px;
	margin: 0 auto;
}


.dh-form-titlebar {
	padding: 0px; 
	margin-top: 10px; 
	margin-bottom: 10px; 
	height:auto;
	padding-top: 10px;
    padding-bottom: 10px;
    font-size: 28px;
    text-align: center;
    font-family: lores-12-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing: 1px;
	color: #00acff;
	width: 100%;
}

.dh-form-titlebar.short {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-bottom: 0px;
}

.dh-form-titlebar.smaller {
	margin-top: 0px;
    font-size: 16px;
	color: var(--text-blue-900);
}

.dh-button-bar {
	width: 100%; 
	display: flex;
	flex-direction: row;
	align-items: middle;
	margin-top: 25px;
	margin-bottom: 15px;
}

.btn-dh-next {
	background: #00acff;
	text-transform: uppercase;
    font-family: lores-12-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 16px;
	text-align: center;
	color: #fff;
	border: none;
	margin: 0 auto;
	width: 100px;
}

.dh-p1-textarea {
    font-family: lores-12-narrow, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 18px;
	color: #000;
	height: 90%;
	width:  100%;
	resize: none;
	border: 1px solid #4c4a49;
	border-radius: 5px;
	padding-left: 15px;
	padding-right: 15px;
}

.dh-p1-textarea:focus {
	box-shadow: 0 0 5px rgba(229, 76, 60, 1);
	border: 1px solid rgba(229, 76, 60, 1);
}

/*Toggle button ChatPunk Viewer prototype*/
.switch input {
position: absolute;
opacity: 0;
}

.switch {
display: inline-block;
font-size: 20px; /* 1 */
height: 1em;
width: 2em;
border-radius: 1em;
}

.switch div {
height: 1em;
width: 1em;
border-radius: 1em;
background: #FFF;
box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.3);
-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
		transition: all 300ms;
}

.switch input:checked + div {
-webkit-transform: translate3d(100%, 0, 0);
	-moz-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
}