/* GLOBAL DEFS */
body {
    font-family: "Montserrat", sans-serif;
	background-color: black;
}

@font-face {
	font-family: "Montserrat";
	font-display: block;
	src: url(/static/font/montserrat-regular.woff2) format("woff2");
}

@font-face {
	font-family: "Montserrat";
	font-display: block;
	src: url(/static/font/montserrat-semibold.woff2) format("woff2");
	font-weight: 700
}

/* Default font size controlled in media query section */

/* ==================== */
/* CHAT APP SECTION */
#chat-app {
	background-color: black;
	/* padding: 5px; */
	overflow-y: auto;
}

/* Web header */
.web-header {
	background: #FFED00;
	color: black;
	font-weight: bold;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 200px; */
	padding: 20px;
}

.web-header h3 {
	margin: 0 10px;
}

/* Intro links */
.intro a {
	color: #FFED00;
}

/* Intro text */
.intro p {
    color: white;
	text-align: center;
}

/* Disclaimer header */
#disclaimer h5 {
	color: #FFED00;
	font-weight: normal;
	text-align: center;
}

/* Disclaimer links */
#disclaimer a {
	color: #FFED00;
}

/* Disclaimer text */
#disclaimer p {
    color: white;
	text-align: center;
	font-size: x-small;
}


/* Category/language buttons */
.category-button-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    align-content: space-between;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.language-button {
    border-bottom: 1px solid white;
    color: white;
    padding: 0px 20px 0px 20px;
    margin: 5px;
    width: content;
    cursor: pointer;
	border: 2px solid white;
	border-radius: 30px;
	font-weight: bold;
}

.active {
    color: black;
    border: 2px solid #FFED00;
    border-bottom: 2px solid #FFED00;
    border-radius: 30px;
    background: #FFED00;
    font-weight: bold;
}


/* Chat predefined buttons */
.chat-button-list {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: row;
    align-content: space-between;
    align-items: center;

}

.chat-button {
	color: white;
    padding: 0px 10px 0px 10px;
    width: content;
    cursor: pointer;
}

.hidden-value {
	display: none;
}

/* Loading spinner image and text  */
#spinner {
	display: none;
	align-items: center;
	text-align: center;
}

#spinner img {
    height: 28px;
    width: 28px;
	margin: 10px;
}

#spinner p {
    color:white;
}


/* Input for user query */
.input-div {
    /* width: 90%; */
    margin: 10px 5% 20px 5%;
	border: 2px solid #FFED00;
	border-radius: 15px;
	display: flex; 
	align-items: center; 
	/* gap: 10px; */
}

#chat-input {
	background: black;
	color: white;
	border: 0px;
	margin: 10px;
	width: 90%;
	padding: 5px;
}

#chat-input:focus {
    outline: none;
}

#send-button {
	margin-right: 2%;
	margin-left: 2%;
}

.send-button img {
	height: 125%;
	padding: 10px;
}


/* ==================== */
/* CHATBOT CONTENT */
#chat-output a {
	color: darkorange;
}

.chatbot-user {
    color: black;
    background: #FFED00;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
	border: 0px;
    padding: 5px 20px 5px 10px;
    margin: 5px 0px 5px 30%;
    text-align: right;
}

.chatbot-reply {
	color: black;
	background-color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
	padding: 5px 10px 5px 10px;
}

.chatbot-update {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in;
}

.chatbot-update.show {
	opacity: 1;
	visibility: visible;
}

.chatbot-update.hide {
	opacity: 0;
	visibility: hidden;
}

.gsclogo {
	height: 20px;
}

.timestamp {
	color: white;
	font-size: x-small;
}

.timestamp-left {
	text-align: left;
	padding-left: 1%;
}

.timestamp-right {
	text-align: right;
	padding-right: 1%;
}

/* Feedback thumbs up or down */
.feedback-button {
	cursor: pointer;
}

.confirm-span {
	display: block;
	margin-top: 20px;
}

.confirm-button {
    color: black;
	background: #FFED00;
    padding: 10px 20px 10px 20px;
	border-radius: 5px;
	font-weight: bold;
	cursor: pointer;
}

.confirm-button.disabled {
	background-color: #e1e1e1;
	cursor: not-allowed;
	opacity: 0.9;
}

.hidden {
	display: none;
}

.glow {
	border-radius: 10px;
	border: 2px solid #FFED00;
}



/* ==================== */
/* MEDIA QUERY SECTION FOR FLOATING CHAT WINDOW */

/* Mobile or tablet width screens*/
@media (max-width: 1080px) and (orientation: portrait) {
	body {
		font-size: 3.5vw;
		line-height: 1.3;
	}
	p {
		font-size: 3.5vw;
	}
	h5 {
		font-size: 4vw;
	}
	.input-div input {
		font-size: 4vw;
	}	
	.chatbot-user {
		margin-right: 0;
	}
	.chatbot-reply {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.feedback-button {
		font-size: 4vw;
	}
}

/* Desktop or laptop screens */
@media (min-width: 1081px) or (orientation: landscape) {
	body {
		font-size: medium;
		line-height: 1.3;
	}
	p {
		font-size: medium;
	}
	h5 {
		font-size: medium;
	}
	.input-div input {
		font-size: medium;
	}	
	.chatbot-user {
		margin-right: 0;
	}
	.chatbot-reply {
		margin-left: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.feedback-button {
		font-size: x-large;
	}
}