html, body
{
	margin: 0;
	padding: 0;
	width: 100%;
	font-family: sans-serif;
}

.hyper-screen
{
	display: none;
}

#panel-page
{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#panel-top
{
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
}

#panel-tool-menu
{
	position: absolute;
	top: 0px;
	left: 0px;
}

#panel-tool-tabs
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
}

#panel-tool-buttons
{
	position: absolute;
	right: 4px;
	top: 3px;
}

#panel-tool-buttons a
{
	text-transform: none;
}

.nav-tabs a
{
	color: #111111;
	font-size: 16px;
	font-weight: bold;
}

.btn-hyper-toolbar
{
	height: 40px;
	font-size: 18px;
	/*font-weight: bold;*/
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	color: #111111;
}

#panel-middle
{
	position: absolute;
	left: 0;
	top: 50px;
	bottom: 0px;
	width: 100%;
	overflow: auto;
}

.panel-body h1
{
	margin-top: 10px;
	margin-bottom: 15px;
}

#panel-bottom
{
	position: absolute;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 40px;
	background-color: rgba(200,200,200,1);
}

#panel-bottom div
{
	padding: 10px 10px 10px 10px;
}

#panel-bottom div span
{
	font-weight: bold;
}

.project-list
{
	position: relative;
	margin: 0;
	padding: 0px 0px 50px 0px;
	width: 100%;
}

.project-list .project-entry
{
	position: relative;
	margin: 5px;
	padding: 0 10px;
	min-height: 40px;
	background: rgb(255,255,255);
	border: 1px solid #999999;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
	overflow: hidden;
}

.entry-content {
  padding-right: 245px;
}

.entry-content-examples {
  padding-right: 245px;
}

.entry-content-libraries {
  padding-right: 95px;
}

.h-scroll {
  max-height: calc(100vh - 570px);
  min-height: 100px;
  overflow-y: auto;
}

.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

/* Holds dynamically displayed buttons on an entry in the app list. */
.entry-menu
{
	position: absolute;
	right: 10px;
	bottom: 53px;
	display: none; /* Initially hidden */
}

.entry-button
{
	position: absolute;
	font-weight: bold;
	font-size: 14px;
	padding: 4px 8px;
	width: 70px;
	bottom: 10px;
}

.entry-menu-button
{
	position: relative;
	font-weight: bold;
	font-size: 14px;
	padding: 4px 8px;
	margin-left: 10px;
	width: 70px;
}

.button-run
{
	right: 10px;
}

.button-edit
{
	right: 90px;
}

.button-more
{
	right: 170px;
}

.button-doc-lib
{
	right: 10px;
}

.button-doc-example
{
	right: 170px;
}

.button-copy-example
{
	right: 90px;
}

.button-delete
{
	position: absolute;
	right: 4px;
	top: 2px;
}

#drag-overlay
{
	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(100,255,100,0.0);
	display: none;
}

#drag-overlay div
{
	position: absolute;
	left: 40px;
	top: 50px;
	right: 40px;
	padding: 20px;
	border: 1px solid #000000;
	background-color: rgba(255,255,255,0.8);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.style-big-para > p
{
	/* Make text a bit bigger than the default. */
	font-size: 120%;
}

.style-small-h2 > h2
{
	font-size: 150%;
}

.connect-screen-element
{
	margin-top: 10px;
	margin-bottom: 10px;
}

#connect-screen-message
{
	font-size: 200%;
	font-weight: bold;
}

#screen-connect button
{
	/* Make button text bigger than the default. */
	font-size: 140%;
	margin-right: 10px;
}

.layout-table
{
	display: table;
}

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

.connect-key-item
{
	font-weight: bold;
	font-size: 28px;
	letter-spacing: 1px;
	font-kerning: none;
	color: black;
	background: rgb(245,245,245);
	padding: 0px 15px;
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	min-width: 230px;
	border: 1px solid #888888;
	-webkit-border-radius: 4px;
}

#panel-have-no-token
{
	margin-bottom: 5px;
}

#panel-have-token
{
	margin-bottom: 5px;
	padding-bottom: 0px;
	display: none;
}

.token-input-field
{
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 1px;
	font-kerning: none;
	color: black;
	background: rgb(245,245,245);
	padding: 7px 10px;
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right:10px;
	min-width: 385px;
	border: 1px solid #888888;
	-webkit-border-radius: 4px;
}

.token-key
{

	font-weight: bold;
	letter-spacing: 1px;
	font-kerning: none;
	color: black;
/*
	padding: 0px 15px;
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 0px;
	min-width: 230px;
	-webkit-border-radius: 4px;
*/
}

#connect-spinner
{
	/*display: none;*/
	/*vertical-align: middle;*/
	vertical-align: -3px;
	display: inline-block;
}

/* Spinning icon on the Get Key button */

.icon-spin-animate
{
	/*-webkit-transform-origin: 50% 58%;*/
	-webkit-animation-name: spinanimation;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes "spinanimation" {
	from { transform: scale( 1 ) rotate( 0deg );   }
	to	 { transform: scale( 1 ) rotate( 360deg ); }
}

#connect-screen-login
{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: 60px;
	/*border: 1px black solid;*/
	display: none;
	background: rgb(200,200,200);
}

#connect-screen-login-iframe
{
	width: 100%;
	height: 100%;
}

#connect-screen-login-close-button
{
	position: absolute;
	right: 2px;
	top: 2px;
	text-transform: none !important;
}

#connect-screen-login-loading-message
{
	position: absolute;
	left:20px;
	top:140px;
}

.screen-start-logotype
{
	position: absolute;
	width: auto;
	height: 55px;
	top: 10px;
	right: 15px;
}

.screen-start-help
{
	display: none;
	padding-bottom: 0px !important;
}

.button-toggle-help
{
	display: block;
	font-size: 85% !important;
}

.framed-box
{
	margin: 0px;
	padding: 10px 10px;
	background: rgb(255,255,255);
	border: 1px solid #999999;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.style-small-button
{
	font-size: 70%;
	padding: 3px;
	cursor: auto !important;
}

.project-list .project-entry .app-icon
{
	width: 60px;
	height: 60px;
	float: left;
	margin: 5px 10px 5px -5px;
	background: #AAAAAA;
	background-size: cover;
	border: 1px solid #999999;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


/* Labels for tags */
/* dialog, mediatek, nordic, etc */
.label-vendor {
  background-color: #f0ad4e;
}
.label-vendor[href]:hover,
.label-vendor[href]:focus {
  background-color: #ec971f;
}
/* mbedos, mbed, arduino etc */
.label-platform {
  background-color: #5bc0de;
}
.label-platform[href]:hover,
.label-platform[href]:focus {
  background-color: #31b0d5;
}
/* enterprise */
.label-license {
  background-color: #5cb85c;
}
.label-license[href]:hover,
.label-license[href]:focus {
  background-color: #449d44;
}
/* wifi, bluetooth, ble, nfc etc */
.label-comm {
  background-color: #ff4d4d;
}
.label-comm[href]:hover,
.label-comm[href]:focus {
  background-color: #ff1a1a;
}
/* mqtt, xmpp etc */
.label-protocol {
  background-color: #bf8040;
}
.label-protocol[href]:hover,
.label-protocol[href]:focus {
  background-color: #734d26;
}

.floating-alert-box
{
	position: fixed;
	display: none;
	left: 50px;
	right: 50px;
	top: 100px;
	z-index: 1000;
	padding: 10px;
	border: 1px solid #000000;
	background-color: rgba(255,255,255,0.9);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.floating-alert-box-message
{
	font-size: 22px;
}

@media (max-width: 599px)
{
.app-icon
{
	display: none;
}
}

@media (min-width: 600px)
{
.app-icon
{
	display: block;
}
}

#button-viewers:hover
{
	font-weight:bold
}
