@charset "utf-8";
/* CSS Document */

* {
	font-family: 'Poppins', sans-serif;
	color:#17597C;
	font-size: 16px;
}


body {
	padding:10px;
	padding-bottom:40px;
}

labelff {
	display:inline-block;
	width: 190px;
	text-align:right;
	margin-right:15px;
}

select {
	min-width:120px;
}

ul {
	list-style:none;
	margin: 0;
	padding: 0;
}

li {
	list-style:none;
	margin-bottom:6px;
}

h1 {
	font-size:28px;
}

h2 {
	font-size:22px;
}

h3 {
	font-size:18px;
}

.intro img {
	padding:30px;
}


.kcj_text_ai_app_container {
	position:relative;
	width:100%;
	padding:20px;
	min-height:calc(100vh - 150px);
}

.kcj_text_ai_app_title_wrapper {
	display: inline-block;
}

.kcj_text_ai_app_title, .kcj_text_ai_app_sub_title {
	color:#35ADF5;
	font-size:19px;
	font-weight:700;
}

.kcj_text_ai_app_sub_title {
	font-size:16px;
	font-weight:500;
}

.kcj_text_ai_app_logo {
	vertical-align:top;
}

.kcj_text_ai_version {
	color:#35ADF5;
	font-size:10px;
	font-weight: 400;
}

.kcj_text_ai_app_container h2 {
	font-size:20px;
	font-weight:600;
}

.kcj_text_ai_app_popup_mask {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	background-color:rgba(0,0,0,0.3);
	z-index:10000;
}
.kcj_text_ai_app_popup_form {
	position:fixed;
	width:400px;
	overflow:hidden;
	min-height:200px;
	border-radius:10px;
	background-color:white;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	box-shadow:rgba(0,0,0,0.2) 0px 0px 8px 8px;
}



.kcj_text_ai_app_popup_load_project {
	position:fixed;
	width:400px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	color:white;
}

.kcj_text_ai_app_popup_mask.load_project {
	background-color:rgba(0,0,0,0.6);
}

.kcj_text_ai_app_popup_load_project i, .kcj_text_ai_app_popup_load_project h3 {
	color:white;
}

.kcj_text_ai_app_popup_load_project .kcj_text_ai_app_btn_close_popup {
	position:relative;
	top:auto;
	right:auto;
	opacity:.8;
	font-size:26px;
}

.kcj_text_ai_app_btn_close_popup {
	position:absolute;
	top:6px;
	right:10px;
	color:#333333;

	opacity:0.5;
}

.kcj_text_ai_app_btn_close_popup i {
	cursor:pointer;
}

.kcj_text_ai_app_btn_close_popup:hover {
	opacity:1;
}

.kcj_text_ai_app_popup_btn {
	border:none;
	border-radius:10px;
	background-color: #35adf5;
	color:white;
	padding:4px;
	padding-left:12px;
	padding-right:12px;
}

.kcj_text_ai_app_popup_btn.done {
	display:hidden;
}

.kcj_text_ai_app_popup_form_header {
	position:relative;
	padding:15px;
	background-color:#d7effd;
	height:50px;
	line-height:20px;
	font-size:16px;
	text-transform: uppercase;
	font-weight:500;
}

.kcj_text_ai_app_popup_form_content_wrapper {
		overflow:hidden;
	overflow-y:auto;
	max-height:calc(100vh - 160px);
}

.kcj_text_ai_app_popup_form_content {

	padding:15px;
}

.select_n_gram_chart {
	border-radius: 5px;
	border:none;
	padding-left: 5px;
	padding-right: 5px;
}

.kcj_text_ai_app_popup_form_content input[type=text] {
	border:none;
	border-bottom:#999 thin solid;
	width:100%;
}

.kcj_text_ai_app_popup_form_content textarea {
	border:none;
	min-height:120px;
	border-top:#999 thin solid;
	border-bottom:#999 thin solid;
	width:100%;
	color:#4fa6c0;
	padding-top:10px;
}

.kcj_text_ai_app_popup_example_parsed {
	height:260px;
	border-top:#999 thin solid;
	border-bottom:#999 thin solid;
	overflow:hidden;
	overflow-y:auto;
	padding-top:10px;
}

.kcj_text_ai_app_popup_example_parsed p {
	color:#4fa6c0;
}

.kcj_text_ai_app_popup_load_card {
	background-color:#d7effd;
	border-radius:10px;
	padding:10px;
	height:100px;
	cursor:pointer;
}

.kcj_text_ai_app_popup_load_card:hover {
	background-color:#82cdf8;
}

.kcj_text_ai_app_popup_load_card img {
	vertical-align:bottom;
}

.kcj_text_ai_app_popup_load_card label {
	color:#FFFFFF;
	font-size:24px;
	font-weight:500;
	margin-bottom:0;
	line-height:80px;
	cursor:pointer;
	max-width: 210px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.kcj_text_ai_app_popup_load_card i {
	font-size:36px;
	float:right;
	line-height:80px;
}

.kcj_text_ai_app_parse_block {
	display:inline-block;
	background-color:#82BFD3;
	padding:10px;
	text-align:center;
	margin-right:5px;
	margin-bottom:10px;
	color:white;
}


.kcj_text_ai_app_top_nav {
	background-color:#d7effd;
	border-top-left-radius:20px;
	border-top-right-radius:20px;
	padding-top:15px;
}

.kcj_text_ai_app_top_nav_tabs {
	display:inline-block;
	min-width:100px;
	height:40px;
	line-height:40px;
	font-size:14px;

	text-align:center;
	background-color:#35adf5;
	color:white;
	cursor:pointer;
}

.kcj_text_ai_app_top_nav_tabs.active {
	background-color:#f8f8f8;
	color: #17597C;

}

.kcj_text_ai_app_top_nav_tabs:not(:first-child) {
	border-left: 2px solid #d7effd;
}

.kcj_text_ai_app_top_nav_tabs:first-child {
	border-top-left-radius:10px;
}

.kcj_text_ai_app_top_nav_tabs:last-child {
	border-top-right-radius:10px;
}

.kcj_text_ai_app_section_content {
	width:100%;
	padding-top:30px;
	min-height:400px;
	background-color:#f8f8f8;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	height:100%;
	min-height: calc(100vh - 240px);
	padding-bottom:100px;
}

.kcj_text_ai_app_preferences_wrapper {
	display:inline-block;
	position:relative;
	margin-left:0;
	margin-top:0;
	z-index:100;
}

.kcj_text_ai_app_project_preferences {
	background-color:#82cdf8;
	color:white;
	padding:10px;
	padding-left:15px;
	padding-right:15px;
	font-size:18px;
	line-height:24px;
	font-weight:400;
	border-radius:10px;
	width:260px;
	height:48px;

}

.btn_realtime_preferences {
	font-size:28px;
	cursor:pointer;
}

.btn_pair_to_microbit {
	font-size:28px;
	cursor:pointer;
}

.kcj_text_ai_app_project_preferences.algorithms:hover {

	background-color:#35adf5;
	cursor:pointer;
}

.kcj_text_ai_app_project_preferences.algorithms i {
	float:right;
	color:white;
	font-size:24px;
	line-height:26px;
}

.kcj_text_ai_app_popup_algorithm_option {
	background-color:#65baec;
	color:white;
	line-height:20px;
	font-size:18px;
	font-weight:500;
}

.histogram_labels {
	border-radius: 10px;
}

.kcj_text_ai_app_popup_algorithm_option label {
	color:white;
	margin-bottom:0;
}

.kcj_text_ai_app_popup_algorithm_option_checkbox {
	color:white;
	font-size:24px;
	cursor:pointer;
}

.kcj_text_ai_app_popup_algorithm_option_checkbox.real_time {
	color:#82bfd3;
	font-size:18px;
}


.kcj_text_ai_app_popup_algorithm_option_subsection {
	background-color:white;
	color:#628F9E;
}
.kcj_text_ai_app_popup_algorithm_option_subsection.advance_settings{
	color:#35adf5;
	font-size:12px;
	cursor:pointer;
	user-select: none;
}


.kcj_text_ai_app_popup_algorithm_option_subsection_faded {
	opacity:0.2;
	pointer-events: none;
}


.kcj_text_ai_preferences_range_long {
	width:300px;
}

.kcj_text_ai_preferences_range_short {
	width:210px;
}

.kcj_text_ai_app_popup_algorithm_option_subsection span {
	vertical-align:super;
	font-size:18px;
	font-weight:500;
	color:#628F9E;
}

.kcj_text_ai_app_popup_algorithm_option_subsection label {
	display:inline-block;
	width:80px;
	vertical-align:super;
	color:#628F9E;
}

.kcj_text_ai_app_project_preferences.result_settings {
	font-size:17px;
	line-height:28px;
	width:230px;
	cursor:pointer;
}

.kcj_text_ai_app_project_preferences.result_settings:hover {
	background-color:#35adf5;
}

.kcj_text_ai_app_project_preferences.result_settings i {
	color:white;
}

.kcj_text_ai_app_project_preferences.result_settings label {

}

.kcj_text_ai_app_project_preferences label {
	color:white;
	cursor:pointer;
}

.kcj_text_ai_app_project_preferences input {
	border:none;
	color:white;
	background-color:#82cdf8;
	border-bottom:#fff1e2 thin solid;
	width:180px;
}

.kcj_text_ai_app_project_preference_select {
	position:absolute;
	top:28px;
	left:-100px;
	width:auto;
	padding:100px;
	padding-top:20px;

}

.kcj_text_ai_app_btn_preferences {
	float:right;
	cursor:pointer;
	font-size:24px;
	line-height:26px;
	color:#FFFFFF;
}



.kcj_text_ai_app_btn_preferences:hover {
	color:#35adf5;
}


.kcj_text_ai_app_project_preferences.option {
	background-color:#d7effd;
	cursor:pointer;
	border:#82cdf8 thin solid;
	box-sizing: border-box;
	overflow:hidden;
}



.kcj_text_ai_app_project_preferences.option label {
	color:white;
	cursor:pointer;
}

.kcj_text_ai_app_project_preferences.option i {
	color:white;
	float:right;
	margin-top:3px;
	font-size:24px;
}

.kcj_text_ai_app_project_preferences.option:first-child {
	margin-top:2px;
}

.kcj_text_ai_app_project_preferences.option:not(first-child) {
	margin-top:2px;
	border-top:none;
}

.kcj_text_ai_app_project_preferences.option:hover {
	background-color:#82cdf8;
}

.kcj_ai_text_real_time_preference_editor {
	position:fixed;
	width:400px;
	height:100px;
	border-radius:10px;
	background-color:white;
	left:50%;
	bottom:30px;
	transform:translateX(-50%);
	box-shadow:rgba(0,0,0,0.2) 0px 0px 8px 8px;
}

.kcj_ai_text_real_time_preference_editor_nav {
	position:absolute;
	left:0;
	top:0;
	line-height:100px;
	height:100px;
	text-align:center;
	width:40px;
	font-size:36px;
	font-weight:500;
	cursor:pointer;
	opacity:0.2;
}

.kcj_ai_text_real_time_preference_editor_nav.next {
	right:0;
	left:auto;
}

.kcj_ai_text_real_time_preference_editor_nav:hover {
	opacity:1;
}

.kcj_ai_text_real_time_preference_editor_control_wrapper {
	position:absolute;
	overflow:hidden;
	left:40px;
	top:0;
	width:320px;
	height:100px;
	color:#82bfd3;
}

.kcj_ai_text_real_time_preference_editor_control_wrapper label {
	color:#82bfd3;
	font-size:18px;
	font-weight:500;
}

.kcj_ai_text_real_time_preference_editor_controls {
	position:absolute;
	left:0;
	top:0;
	width:960px;
}

.kcj_ai_text_real_time_preference_editor_control {
	display:inline-block;
	width:320px;
	height:100px;
}
.kcj_ai_text_real_time_preference_editor_control span {
	display:inline-block;
	width:30px;
}

.kcj_ai_text_real_time_preference_editor_close {
	font-size:20px;
	position:absolute;
	top: 0;
	right:5px;
	cursor:pointer;
	color:#75acbe;
	opacity:0.3;
}

.kcj_ai_text_real_time_preference_editor_split {
	font-size:20px;
	position:absolute;
	top: 0;
	left:5px;
	cursor:pointer;
	color:#75acbe;
	opacity:0.3;
}

.kcj_ai_text_real_time_preference_editor_close:hover, .kcj_ai_text_real_time_preference_editor_split:hover {
	opacity:1;
}

.kcj_text_ai_app_btn_blue {
	border:none;
	background-color:#82cdf8;
	color:white;
	padding:10px;
	padding-left:15px;
	padding-right:15px;
	font-size:18px;
	font-weight:400;
	border-radius:10px;
	height:48px;
}

.kcj_text_ai_app_btn_blue:hover {
	background-color:#35adf5;
}

.kcj_text_ai_app_btn_blue.add_category {
	width:260px;
}

.kcj_text_ai_app_category_card {
	position:relative;
	height:600px;
	border-radius:10px;
	background-color:#e9f2f6;
}

.kcj_text_ai_app_category_card_row_label {
	height:60px;
}

.kcj_text_ai_app_category_card label {
	text-align:center;
	font-size:22px;
	font-weight:600;
}


.kcj_text_ai_app_category_card_tools_container {
	width:100%;
	position:absolute;
	bottom:0;
	margin:0;
	margin-bottom:15px;
	margin-top:10px;
	height:40px;
}


.kcj_text_ai_app_btn_remove_category {
	position:absolute;
	top:8px;
	right:15px;
	font-size:24px;
	font-weight:bold;
	cursor:pointer;
	opacity:.5;

}

.kcj_text_ai_app_btn_remove_category:hover {
	opacity:1;
}

.kcj_text_ai_app_category_card_content {
	height:calc(100% - 125px);
	overflow:hidden;
	overflow-y:scroll;
	padding:10px;
}

.kcj_text_ai_example_line {
	display:inline-block;
	background-color:white;
	padding:4px;
	padding-left:10px;
	padding-right:10px;
	margin:4px;
}

.kcj_text_ai_example_line .fa-trash-alt {
	color:#82BFD3;
	margin-left:10px;
	opacity:.5;
	cursor:pointer;
}

.kcj_text_ai_example_line .fa-trash-alt:hover {
	opacity:1;
}

.kcj_text_ai_app_btn_add_example {
	background-color:white;
	border:none;
	padding:10px;
	font-size:18px;
	line-height:18px;
	font-weight:400;
	border-radius:10px;
}

.kcj_text_ai_app_test_input {
	width:calc(100% - 40px);
	border:none;
	text-overflow: ellipsis;
	color:#4fa6c0;
	font-size:20px;
	font-weight:500;
	background-color:#f8f8f8;
}

.input_text_to_test_underline {
	border-bottom:#999 thin solid;
	width:100%;
}

.input_text_to_test_delete {
	float:right;
	font-size:24px;
	cursor:pointer;
	opacity:0.5;
}

.input_text_to_test_delete:hover {
	opacity:1;
}

.kcj_text_ai_app_warning_text {
	color:#35adf5;
}

.kcj_text_ai_app_result_card {
	background-color:#FFFFFF;
	border-radius:10px;
	padding:20px;
}

.kcj_text_ai_confidence_meter_wrapper {
	position:relative;
	background-color:#e0e7e9;
	border:#CCCCCC thin solid;
}

.kcj_text_ai_app_confidence_meter {
	width:0;
	height:40px;
	background-color:#35adf5;
}

.kcj_text_ai_app_confidence_level {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	line-height:40px;
	font-size:24px;
	font-weight:500;
	color:white;
}

.kcj_text_ai_app_breakdown_algorithm_disabled {
	text-decoration: line-through;
}

.kcj_text_ai_app_breakdown_algorithm_disabled_label {
	text-decoration:blink;
	color:white;
	font-size:18px;
	font-weight:500;
}

.kcj_text_ai_activity_card {
	background-color:white;
	padding:20px;
	min-height:590px;

}

.kcj_text_ai_activity_card.model {
	cursor:pointer;
}

.kcj_text_ai_activity_card h3 {
	font-size:18px;
}

.kcj_text_ai_activity_card p {
	font-size:14px;
}

.kcj_text_ai_activity_card li {
	list-style:disc;
	margin-left: 20px;
	font-size: 14px;
}

.kcj_text_ai_app_file_input {
 	font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
	cursor:pointer;
}



.class_config {
	display:inline-block;
	font-size:18px;
	line-height:24px;
	border:#999 thin solid;
	padding:5px;
	margin:30px;
	border-radius:8px;

}

.webCamFeed_wrapper {
	position: sticky;
  	top: 20px;
}

.webCanvas {
	position:absolute;
	top:0;
	left:0;
	visibility:hidden;
}

.cat_card {
	border:#666 thin solid;
	padding:8px;
	text-align:center;
	margin:10px;
	border-radius:8px;
}

.cat_card img {
	border: dashed thin #666;
}

.cat_card .label {
	font-size:22px;
}

.cat_card a {
	font-size:10px;
}

.confidence {
	display:inline-block;
	height:20px;
	width:75px;
	border:dashed thin #999;
}

.confidence_level {
	width:75%;
	height:100%;
	background-color:#F00;
}

.predicted_card {
	display:inline-block;
	visibility:hidden;
	border:#666 thin solid;
	padding:8px;
	text-align:center;
	margin:10px;
	border-radius:8px;
	position: sticky;
  	top: 20px;
}

.predicted_confidence {
	display:block;
	width:120px;
	height:90px;
	border: dashed thin #666;
	background-color:#999999;
	font-size:34px;
	font-weight:bold;
	line-height:90px;
	letter-spacing:4px;
	text-shadow:
		-2px -2px 0 #FFF,
		2px -2px 0 #FFF,
		-2px 2px 0 #FFF,
		2px 2px 0 #FFF;
}

.system_messages {
	width:420px;
	height:520px;
	border:#666666 dashed thin;
	padding:5px;
	border-radius:8px;
}

.system_messages.text {
	width:540px;
	height:420px;
	overflow:hidden;
	overflow-y:auto;
	padding:10px;
}

.system_messages.configuration {
	display:none;
	width:540px;
	height:auto;
	padding:10px;
}

.slider {
	vertical-align:top;
  	width: 360px;
  	margin-left:10px;
}

.system_messages.configuration ul {
	list-style:none;
	margin:0;
	padding:0;
}

.system_messages.configuration li {
	margin:0;
	padding:0;
}

.label_short {
	display:inline-block;
	width:70px;
	text-align:left;
}

.label_long {
	display:inline-block;
	width:240px;
	text-align:left;
}

.dotted_wrapper {
	border:#666666 dashed thin;
	padding:5px;
	border-radius:8px;
}

.predict_group {
	visibility:hidden;
	display:inline-block;
}

.text_canvas {

}

.text_input {
	width:540px;
	height:320px;
}

.text_icon {
	width:140px;
	padding-left:5px;
	padding-right:5px;
	height:60px;
	overflow:hidden;
	text-overflow: ellipsis;
	text-align:center;
	line-height:60px;
	font-size:18px;
	background-color:#EEEEEE;
	white-space: nowrap;
}

.trainning_data {
	display:none;
}

.clear_messages_button_wrapper {
	text-align:right;
}

.btn_clear_messages {
	font-size:12px;
}

.chart_canvas {
	width:100%;
}

.blip_highlight {
	border:#555555 1px dashed;
}