/**
 * @version 4.22.5
 * Date: 2022-06-01T14:25:28.592Z
 */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	I. ROOT LEVEL BASE STYLES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

:root {
	--blue: #0063b1;
	--blue2: #0078d7;
	--light-blue: #3c80b8;
	--amber: #fbab18;
	--teal: #006778;
	--white: #fff;
	--lightest: #f2f2f2;
	--light: #d5d5d5;
	--dark: #333;
	--black: #000;
	--gray: #f0f0f0;
	--gray-selected: #767676;

	--unit: 16px;
	--spacer: 0.9375rem; /* 15px */

	--font-family: "Open Sans", apple-system, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", arial, sans-serif !important;

	--radius: 5px;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	color: var(--black);
	margin: 0;
}

body,
input,
select {
	font-family: var(--font-family);
	/*
		17px / 16px
		16px is the universal denominator value of the html element
		16px is the same is 1em OR 1rem
	*/
	font-size: 1.0625rem;
	line-height: 1.45;
	text-overflow: unset;
	white-space: unset;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin-bottom: var(--unit);
	margin-top: var(--unit);
}

ul {
	padding-left: 20px;
}

button {
	cursor: pointer;
	font-family: var(--font-family);
	font-size: inherit;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	II. CUSTOM STYLES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#root {
    display: flex;
    flex-direction: column-reverse;
    min-height: 100%;
	padding: 10px;
}

/* Disabled buttons */
#root button.disabled {
	background-color: var(--gray);
	color: var(--dark);
	cursor: default;
}
/* Disabled buttons that have been clicked */
#root button.disabled.is-clicked {
	background-color: var(--gray-selected);
	color: var(--white);
}

.spinner {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
}

.chatboxes {
	list-style-type: none;
	padding-left: 0;
}

.chatbox {
	display: flex;
	width: auto;
}
/* When a .chatbox is next to another */
.chatbox + .chatbox {
	margin-top: 10px;
}
/* When a .chatbox are next to a .chatbox--response || vice versa */
.chatbox:not(.chatbox--response) + .chatbox--response,
.chatbox--response + .chatbox:not(.chatbox--response) {
	margin-top: 30px;
}
.chatbox--response {
	justify-content: flex-end;
}

.chatbox-icon {
	align-items: center;
    border-radius: 100%;
    color: var(--white);
	display: flex;
	font-size: 75%;
    font-weight: bold;
	height: 40px;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    width: 40px;
}
.chatbox--response .chatbox-icon {
	background-color: var(--blue);
	margin-top: 0;
}

.chatbox-body {
	width: calc(100% - 50px); /* the icon plus margining is 50px */
}

.chatbox--response .chatbox-body {	
	border: 1px solid var(--light);
	border-radius: 2px;
}

.chatbox-icon + .chatbox-body,
.chatbox-body + .chatbox-icon {
	margin-left: 10px;
}

.chatbox-section,
.chatbox-footer {
	background-color: var(--white);
    border: 1px solid;
    border-color: var(--light);
    border-radius: 2px;
	outline: 2px solid;
	outline-color: transparent;
    padding: var(--spacer);
    position: relative;
}

.chatbox--response .chatbox-section {
	border-color: transparent;
	padding: 10px;
}

.chatbox-section + .chatbox-section,
.chatbox-footer + .chatbox-section,
.chatbox-section + .chatbox-footer,
.chatbox-footer + .chatbox-footer {
	margin-top: 10px;
}

.chatbox-section :first-child:not(input) {
	margin-top: 0;
}

.chatbox-section :last-child:not(input) {
	margin-bottom: 0;
}

.chatbox-section ul,
.chatbox-section ol {
	margin-bottom: 1rem;
}

.chatbox-section li + li {
	margin-top: var(--unit);
}

.eligible .chatbox-section {
	border-color: var(--teal);
	outline-color: var(--teal);
}

.ineligible .chatbox-section {
	border-color: var(--amber);
	outline-color: var(--amber);
}

.chatbox-btn,
.ac-pushButton {
	background-color: var(--white);
	border-radius: var(--radius);
    border-style: solid;
	border-width: 1px;
	color: var(--blue);
	font-weight: 600;
	display: block;
	padding: 10px;
    text-align: left;
	width: 100%;
}

.chatbox-btn:focus,
.chatbox-btn:hover,
.ac-pushButton:focus,
.ac-pushButton:hover {
	background-color: var(--blue);
	color: var(--white);
}

.chatbox-btn:active,
.ac-pushButton:active {
	background-color: var(--blue);
	color: var(--white);
}

.chatbox-btn + .chatbox-btn,
.ac-pushButton + .ac-pushButton {
	margin-top: 8px;
}

.chatbox-checkbox + .chatbox-btn {
	margin-top: var(--unit);
}

.chatbox-checkbox {
	align-items: flex-start;
	display: flex;
}
.chatbox-checkbox + .chatbox-checkbox {
	margin-top: 6px;
}

.chatbox-checkbox label {
	padding-left: 12px;
}

.chatbox-checkbox > input[type="checkbox"] {
	margin: 0;
	margin-top: 5px;
}

.chatbox-checkbox > input[type="checkbox"]:checked + label {
	color: var(--blue2);
}

.newMessage {
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 10px;
	border-width: 0px;
	color:white;
	cursor: pointer;
	display: none;
	font-size: smaller;
	padding: 10px;
	position: fixed;
	right: 22px;
	z-index: 1;
}

.external-link-icon {
	height: 17px;
	margin-left: 3px;
	vertical-align: middle;
	width: 17px;
}