:root {
    --color-darkgrey: #ffffff;
    --color-lightgrey: #048cde;
    --color-transgrey: #5f5d5d;
    --color-red: #ff4550;
    --color-green: #0278be;
    --color-brightblue: #ffffff;
    --color-greyblue: #aeaeae;
    --color-transwhite: #000000;
    --color-transred: rgba(255, 69, 80, 0.65);
}


.chat-context {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
	font-weight: 400;
	font-size: 14px;
    font-family: inherit;
	background-color: #f8f9fa;
	margin: 10px 10px 8px 10px;
}

#chat {
    flex: 1 1 0;
    overflow-y: scroll;
    padding-left: 2.5em;
    padding-right: 2.5em;
    box-sizing: border-box;
}
#chat::-webkit-scrollbar, #ui-options::-webkit-scrollbar {
    width: 0 !important;
}
.button {
    cursor: pointer;
}
.chat-response {
    max-width: 80%;
    opacity: 0;
    padding: 0.8em;
    border-radius: 10px 10px 0px 10px;
    background-color: var(--color-lightgrey);
    text-align: right;
    margin-right: 0.8em;
    margin-left: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    position: relative;
    color: var(--color-transwhite);
    width: fit-content;
	font-size: 14px;
}
.chat-response p {
    margin: 0;
}
.chat-response.robot, .chat-response.robot p {
    background-color: var(--color-lightgrey);
    border-radius: 10px 10px 10px 0px;
    text-align: left;
    margin-right: auto;
    margin-left: 0.6em;
    color: var(--color-darkgrey);
}
.chat-response.user, .chat-response.user p {
    background-color: #b4b4b4;
    color: var(--color-transwhite);
}
.chat-response:after {
    content: "";
    width: 2em;
    height: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    bottom: -1.5em;
    left: -1.8em;
    font-size: 1em;
}
.chat-response.robot:after {
	background: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjIuODggMTE5LjM1Ij48dGl0bGU+Y2hhdGJvdDwvdGl0bGU+PHBhdGggZD0iTTU3LjQ5LDI5LjJWMjMuNTNhMTQuNDEsMTQuNDEsMCwwLDEtMi0uOTNBMTIuMTgsMTIuMTgsMCwwLDEsNTAuNDQsNy41YTEyLjM5LDEyLjM5LDAsMCwxLDIuNjQtMy45NUExMi4yMSwxMi4yMSwwLDAsMSw1NywuOTIsMTIsMTIsMCwwLDEsNjEuNjYsMCwxMi4xNCwxMi4xNCwwLDAsMSw3Mi44OCw3LjVhMTIuMTQsMTIuMTQsMCwwLDEsMCw5LjI3LDEyLjA4LDEyLjA4LDAsMCwxLTIuNjQsMy45NGwtLjA2LjA2YTEyLjc0LDEyLjc0LDAsMCwxLTIuMzYsMS44MywxMS4yNiwxMS4yNiwwLDAsMS0yLC45M1YyOS4ySDk0LjNhMTUuNDcsMTUuNDcsMCwwLDEsMTUuNDIsMTUuNDN2Mi4yOUgxMTVhNy45Myw3LjkzLDAsMCwxLDcuOSw3LjkxVjczLjJBNy45Myw3LjkzLDAsMCwxLDExNSw4MS4xMWgtNS4yNXYyLjA3QTE1LjQ4LDE1LjQ4LDAsMCwxLDk0LjMsOTguNjFINTUuMjNMMzEuODEsMTE4LjcyYTIuNTgsMi41OCwwLDAsMS0zLjY1LS4yOSwyLjYzLDIuNjMsMCwwLDEtLjYzLTEuODVsMS4yNS0xOGgtLjIxQTE1LjQ1LDE1LjQ1LDAsMCwxLDEzLjE2LDgzLjE4VjgxLjExSDcuOTFBNy45Myw3LjkzLDAsMCwxLDAsNzMuMlY1NC44M2E3LjkzLDcuOTMsMCwwLDEsNy45LTcuOTFoNS4yNnYtMi4zQTE1LjQ1LDE1LjQ1LDAsMCwxLDI4LjU3LDI5LjJINTcuNDlaTTgyLjc0LDQ3LjMyYTkuMzYsOS4zNiwwLDEsMS05LjM2LDkuMzYsOS4zNiw5LjM2LDAsMCwxLDkuMzYtOS4zNlptLTQyLjU4LDBhOS4zNiw5LjM2LDAsMSwxLTkuMzYsOS4zNiw5LjM2LDkuMzYsMCwwLDEsOS4zNi05LjM2Wm02LjM4LDMxLjM2YTIuMjgsMi4yOCwwLDAsMS0uMzgtLjM4LDIuMTgsMi4xOCwwLDAsMS0uNTItMS4zNiwyLjIxLDIuMjEsMCwwLDEsLjQ2LTEuMzksMi40LDIuNCwwLDAsMSwuMzktLjM5LDMuMjIsMy4yMiwwLDAsMSwzLjg4LS4wOEEyMi4zNiwyMi4zNiwwLDAsMCw1Niw3OC4zMmExNC44NiwxNC44NiwwLDAsMCw1LjQ3LDFBMTYuMTgsMTYuMTgsMCwwLDAsNjcsNzguMjIsMjUuMzksMjUuMzksMCwwLDAsNzIuNzUsNzVhMy4yNCwzLjI0LDAsMCwxLDMuODkuMTgsMywzLDAsMCwxLC4zNy40MSwyLjIyLDIuMjIsMCwwLDEsLjQyLDEuNCwyLjMzLDIuMzMsMCwwLDEtLjU4LDEuMzUsMi4yOSwyLjI5LDAsMCwxLS40My4zOCwzMC41OSwzMC41OSwwLDAsMS03LjMzLDQsMjIuMjgsMjIuMjgsMCwwLDEtNy41MywxLjQzQTIxLjIyLDIxLjIyLDAsMCwxLDU0LDgyLjg3YTI3Ljc4LDI3Ljc4LDAsMCwxLTcuNDEtNC4xNmwwLDBaTTk0LjI5LDM0LjRIMjguNTdBMTAuMjYsMTAuMjYsMCwwLDAsMTguMzUsNDQuNjNWODMuMThBMTAuMjYsMTAuMjYsMCwwLDAsMjguNTcsOTMuNDFoMy4xN2EyLjYxLDIuNjEsMCwwLDEsMi40MSwyLjc3bC0xLDE0LjU4TDUyLjQ1LDk0LjE1YTIuNTYsMi41NiwwLDAsMSwxLjgzLS43NWg0MGExMC4yNiwxMC4yNiwwLDAsMCwxMC4yMi0xMC4yM1Y0NC42MkExMC4yNCwxMC4yNCwwLDAsMCw5NC4yOSwzNC40WiIvPjwvc3ZnPg==");
	background-size: cover;
}
.chat-response.user:after {
	background: url("data:image/png;base64,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");
	background-size: cover;
    content: "";
    left: auto;
    right: -2em;
}

#ui-response {
    height: 36px;
    max-height: 36px;
    position: relative;
	margin-top: 15px;
    transition: all 1.5s ease-out;
    -webkit-transition: all 1.5s ease-out;
    -moz-transition: all 1.5s ease-out;
	border-radius: 4px;
	border:0;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}
#ui-response.full-submit #response-text {
    display: none;
}
#ui-response.full-submit #ui-submit {
    width: 100%;
}
#ui-response.hide {
    overflow: hidden;
    animation: hide .1s forwards;
    -webkit-animation: hide .1s forwards;
    -moz-animation: hide .1s forwards;
}
@keyframes hide {
    0% {
        opacity: 1;
    }
    99.9999% {
        opacity: 0;
        max-height: 60px;
    }
    100% {
        max-height: 0em;
    }
}

#ui-submit {
    width: 36px;
    height: 36px;
    background-color: #355164;
    color: var(--color-darkgrey);
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
	border: 2px solid #355164;
	border-radius: 0px 4px 4px 0px;
}
#ui-submit:hover {
    background-color: #ffffff;
    color: #355164;
	border: 2px solid #355164;
}
#response-text {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-left: 1em;
    border:0;
    transition: all 1.5s ease-in;
    -webkit-transition: all 1.5s ease-in;
    -moz-transition: all 1.5s ease-in;
    color: rgba(0, 0, 0, 0.75);
    font-size: 14px;
	font-weight: 400;
	border-radius: 4px;
}
#response-text:focus {
    outline: none;
    /* box-shadow: 0 0 5px var(--color-lightgrey); */
}
#response-text.invalid {
    background-color: var(--color-transred);
    color: var(--color-transwhite);
}
#ui-options {
    display: flex;
    justify-content: flex-start;
    padding: 1em;    
    overflow-x: scroll;
	flex-wrap: wrap;
	align-content: space-between;
}
#ui-options:empty {
    padding: 0em;
}
.ui-option {
    border-radius: 4px;
    border: 2px solid #355164;
    padding: 3px;
    margin-top: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #ffffff;
	background-color: #355164;
	font-size: 14px;
	width:100%;
	height:45px;
}
.ui-option p.text {
	color: #ffffff;
}
.ui-option:hover  p.text{
	color: #355164;
	background-color: #ffffff;
}
.ui-option:hover, .ui-option.selected {
    background-color: #ffffff;
	border-color: #355164;
    color: #ffffff;
}
/* .ui-option:last-child { */
    /* margin: 0; */
/* } */
.ui-option p {
    margin: 0;
}
.ui-option .subtext {
    color: #ffffff;
    font-size: 12px;
}
.ui-option:hover .subtext, .ui-option.selected .subtext {
    color: #355164;
}
.ui-option.filtered-out {
    display: none;
}
#ui-control > * {
    opacity: 1;
    transition: opacity 1.5s ease-in-out, max-height 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out, max-height 1.5s ease-in-out;
    -webkit-transition: opacity 1.5s ease-in-out, max-height 1.5s ease-in-out;
}
#ui-control .hidden {
    opacity: 0;
    -webkit-transition: background 0s;
    -moz-transition: background 0s;
    -ms-transition: background 0s;
    -o-transition: background 0s;
    transition: background 0s;
}

.loader {
  width: 30px;
  height: 30px;
  border: 5px dotted #FFF;
  border-radius: 50%;
  animation: rotation 2s linear infinite;
  margin: auto;
  margin-top: 10px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

@media (max-width: 600px) {
    .chat-context {
        padding: 0em;
    }
    #chat {
        padding: 1.25em;
        padding-bottom: 0em;
    }
    .chat-response.user:after {
        right: -1em;
    }
    .chat-response:after {
        left: -1em;
        bottom: -1em;
    }
}