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

:root {
  --kcj-blue:rgba(59, 178, 247, 1);
  --kcj-blue-translucent-5:rgba(59, 178, 247, .5);
  --kcj-blue-translucent-4:rgba(59, 178, 247, .4);
  --kcj-blue-translucent-3:rgba(59, 178, 247, .3);
  --kcj-blue-translucent-2:rgba(59, 178, 247, .2);
  --kcj-blue-translucent-1:rgba(59, 178, 247, .1);
  
  --kcj-orange:rgba(249, 160, 72, 1);
  --kcj-orange-translucent-5:rgba(255, 137, 0, .5);
  --kcj-orange-translucent-4:rgba(255, 137, 0, .4);
  --kcj-orange-translucent-3:rgba(255, 137, 0, .3);
  --kcj-orange-translucent-2:rgba(255, 137, 0, .2);
  --kcj-orange-translucent-1:rgba(255, 137, 0, .1);
  
  --kcj-green:rgba(51, 153, 51, 1);
  
  --kcj-text-dark-grey:#888888;
  
  --kcj-botder-radius-default: 10px;
}


* {
	font-family: 'Poppins', sans-serif;
	/**color:var(--kcj-text-dark-grey);**/
}

.kcj_login_logo {
	width:220px;
	height:63px;
}

h1 {
	color: var(--kcj-blue);
	font-size:24px;
}

.kcj_login_container {
	box-shadow:var(--kcj-blue-translucent-3) 3px 3px 8px;
	border:var(--kcj-blue-translucent-3) thin solid;
	border-radius:var(--kcj-botder-radius-default);
}

.kcj_footnote {
	font-size:12px;
	font-style:italic;
}

.kcj_login_container ul {
	list-style:none;
	padding:0;
	margin-top:30px;
	margin-bottom:30px;
}

.kcj_login_container li {
	margin-top:6px;
	margin-bottom:6px;
}

.kcj_login_container input {
	width:300px;
	padding-left:10px;
	padding-right:10px;
	border:var(--kcj-blue) thin solid;
	border-radius:5px;
	background-color:var(--kcj-blue-translucent-1);
}

.kcj_login_li_label {
	color:var(--kcj-orange);
	font-weight:500;
	display:inline-block;
	width:140px;
	text-align:right;
	padding-right:10px;
}

.kcj_button_submit {
	background-color:var(--kcj-blue);
	border:var(--kcj-blue) thin solid;
	border-radius:5px;
	color:white;
	padding:14px;
	padding-top:6px;
	padding-bottom:6px;
	cursor:pointer;
	box-shadow:#CCC 2px 2px 6px;
	box-sizing: border-box;
}

.kcj_button_submit:hover {
	background-color:var(--kcj-blue-translucent-3);
	border:var(--kcj-blue) thin solid;
}

.kcj_footer {
	font-size:12px;
	color:var(--kcj-blue);
	background-color:#FFFFFF;
}

.kcj_login_error_message {
	color:var(--kcj-orange);
}

.alert_message_flashing {
	animation-name: alert_message_flashing;
    animation-duration: 1s;
	animation-iteration-count:infinite;
	color:var(--kcj-orange);
}

@keyframes alert_message_flashing {
    0%   {opactiy: 1;}
    15%  {opactiy: 1;}
    50%  {opacity: .1;}
    85% {opactiy: 1;}
}


/*** PROJECT LIBRARY **/

.kcj_microbit_project_library_header {
	box-shadow:var(--kcj-blue-translucent-3) 3px 3px 8px;
	border:var(--kcj-blue-translucent-3) thin solid;
	border-radius:var(--kcj-botder-radius-default);
}

.kcj_microbit_library_item_container {
	padding-top:15px;
	padding-bottom:15px;
}

.kcj_microbit_library_item_card {
	min-height:240px;
	box-shadow:var(--kcj-orange-translucent-3) 2px 2px 4px;
	border:var(--kcj-orange-translucent-3) thin solid;
	border-radius:var(--kcj-botder-radius-default);
}

.card_label_green {
	margin-bottom:5px;
	font-size:14px;
	font-weight:500;
	color:var(--kcj-green);
}

.kcj_micobit_library_card_preview {
	font-size:10px;
	color:var(--kcj-blue);
	text-decoration:none;
}

.kcj_micobit_library_card_preview:hover, .kcj_micobit_library_card_preview:link, .kcj_micobit_library_card_preview:visited {
		color:var(--kcj-blue);
	text-decoration:none;
}

.kcj_microbit_library_item_card h2, .input_project_title {
	font-size:20px;
	color:var(--kcj-orange);
	margin:0;
	margin-bottom:5px;
	padding:0;
}

.input_project_title {
	width:100%;
	padding-left:4px;
}

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

.kcj_microbit_library_item_card ul label {
	margin:0;
	display:inline-block;
	width:120px;
	font-size:12px;
	text-transform:uppercase;
	font-weight:500;
}

.kcj_microbit_library_item_card li {
	margin:0;
	padding:0;
}

.card_block_item {
	display:inline-block;
	font-size:12px;
	padding:2px;
	padding-left:6px;
	padding-right:6px;
	background-color:var(--kcj-blue);
	color:#FFFFFF;
	border-radius:5px;
	margin-right:4px;
}

.card_description_text {
	color:var(--kcj-orange);
	width:100%;
	height:240px;
	overflow:hidden;
	overflowY:auto;
	border:#CCCCCC thin solid;
	border-radius:10px;
	padding:5px;
}

.card_launch_makecode_editor, .card_launch_makecode_editor:hover, .card_launch_makecode_editor:link, .card_launch_makecode_editor:visited {
	display:inline-block;
	color:#FFFFFF;
	background-color:var(--kcj-green);
	border-radius:5px;
	padding:4px;
	padding-left:12px;
	padding-right:12px;
	text-decoration:none;
	
}

.card_makecode_url {
	width:100%;
}

.card_projectId {
	font-size:14px;
}

.fastselector {
	font-size:10px;
}

.fstElement, .fstMultipleMode .fstControls {
	width:100%;
}

.card_tools{
	text-align:right;
	padding:10px;
	padding-bottom:4px;
	border-top:#CCCCCC thin solid;
	border-left:#CCCCCC thin solid;
	border-right:#CCCCCC thin solid;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}

.tool {
	width:30px;
	height:30px;
	display:inline-block;
	border-radius:20px;
	background-color:var(--kcj-orange);
	text-align:center;
	line-height:30px;
	color:#FFFFFF;
	font-size:20px;
	font-weight:bold;
	cursor:pointer;
}

.tool.delete {
	margin-left:15px;	

}

.tool.closeCancel {
	float:right;
	margin-left:15px;
}

.tool.edit {
	float:right;
}

.tool.upload {
	visibility:hidden;
	animation-name: save_blink;
    animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes save_blink {
    0% {color: #FFFFFF;}
    25% {color: #f9b673;}
	50% {color: #FFFFFF;}
}

.publish_options {
	display:inline-block;
	text-align:center;
	width:110px;
}

.publish_options label {
	color:#333333;
	font-size:12px;
}

.mb_preview_overlay {
	background-color:rgba(0,0,0,.4);
	position:fixed;
	height:100vh;
	width:100vw;
	top:0;
	left:0;
	display: table;

}



.mb_preview_overlay_cell {
	display: table-cell;
    vertical-align: middle;
}

.mb_preview_wrapper {
	margin: 0 auto;
	width:90%;
	max-width:800px;

}

.mb_preview_container {
	position:relative;
	background-color:#FFFFFF;
}
	
.mb_previewer_header {
	height:50px;
	background-color:#FFF;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-bottom:#666666 thin solid;
	padding:10px;
}
.mb_previewer_header h2 {
	font-size:20px;
	line-height:30px;
	color:var(--kcj-orange);
	margin:0;
	margin-bottom:5px;
	padding:0;
}


.highlight_project_card {
	animation-name: flashing_card;
    animation-duration: .5s;
	animation-iteration-count:infinite;
}

@keyframes flashing_card {
    0%   {	box-shadow:var(--kcj-orange-translucent-3) 2px 2px 4px;}
    50%  {	box-shadow:var(--kcj-blue-translucent-5) 3px 3px 8px;}
	100% {	box-shadow:var(--kcj-orange-translucent-3) 2px 2px 4px;}

}

.poppup_overlay {
	background-color:rgba(0,0,0,.4);
	position:fixed;
	height:100vh;
	width:100vw;
	top:0;
	left:0;
	display: table;

}

.poppup_overlay_cell {
	display: table-cell;
    vertical-align: middle;
}

.poppup_wrapper {
	margin: 0 auto;
	padding:20px;
}

.poppup_container {
	position:relative;
	padding:10px;
	max-width:640px;
	background-color:#FFFFFF;
	border-radius:20px;
}

.poppup_btns {
	font-size:18px;
	line-height:20px;
	color:#FFFFFF;
	background-color:var( --kcj-orange);
	padding:10px;
	padding-left:20px;
	padding-right:20px;
	border-radius:10px;
	cursor:pointer;
}

.poppup_btns.btn_cancel_delete {
	margin-left:20px;
	border:none;

}

.poppup_btns.btn_comfirm_delete {
	margin-right:20px;
	float:right;
	border:none;
}