/*
 * *******************************************************************************
 *  * Copyright (c) 2018 Edgeworx, Inc.
 *  *
 *  * This program and the accompanying materials are made available under the
 *  * terms of the Eclipse Public License v. 2.0 which is available at
 *  * http://www.eclipse.org/legal/epl-2.0
 *  *
 *  * SPDX-License-Identifier: EPL-2.0
 *  *******************************************************************************
 *
 */

@charset "UTF-8";
/*
CSS For Default Screens 
-----------------------------------------------------
NOTE: This is in a separate file from the rest of the Ultralight stuff
so you can go ahead and start customizing it. It's all yours.
*/

.headroom100
{
	margin-top:100px;
}

.headroom80
{
	margin-top:80px;
}

.headroom60
{
	margin-top:60px;
}

.headroom40
{
	margin-top:40px;
}

.headroom20
{
	margin-top:20px;
}

.login-logo
{
	background: url("../../images/login/ioFog_logo_square_color.png") no-repeat center;
	background-size: contain;
	margin: auto;
	width:269px;
	height:150px;
}

.pix14
{
	font-size: 14px;
}

.pix18
{
	font-size: 18px;
}

.pix20
{
	font-size: 20px;
}

.pix24
{
	font-size: 24px;
}

/* 
Common utility classes
*/
.central-message-box
{
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	width:960px;
	border-style:solid;
	border-color:#222222;
	border-width:1px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	padding:10px 10px 10px 10px;
}

.central-message-box h1
{
	font-size:24pt;	
}

.wrapper
{
	width:960px;
	margin-left:auto;
	margin-right:auto;	
}

.login-box
{
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	width:300px;
	border-style:solid;
	border-color:#222222;
	border-width:1px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding:10px 10px 10px 10px;
}

#dash-header-logo
{
	width:162px;
	height:40px;
	margin-top:0px;
	margin-left:10px;	
}

#dash-header-bar
{
	width:100%;
	height: 50px;
	display:inline-block;
	border-bottom-color:#222222;
	border-bottom-width:1px;
	border-bottom-style:solid;
}

#debug-button-box
{
	width:120px;
	display:inline-block;
	float:right;
	margin-right:36px;
	height:24px;
	margin-top:10px;	
}

.debug-button
{
	cursor: pointer;
	border:0;
	background:#06F;
	width:112px;
	height:20px;
	text-align:center;
	color:#FFFFFF;	
	border-radius:4px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#user-name-box
{
	width:75px;
	display:inline-block;
	float:right;
	margin-right:14px;
	height:24px;
	margin-top:12px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#666666;	
}

#logout-box
{
	width:60px;
	display:inline-block;
	float:right;
	margin-right:14px;
	height:24px;
	margin-top:12px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#2222FF;
	text-decoration:none;	
}

#logout-box a
{
	text-decoration:none;
	color:#2222FF;
}

#logout-box a:visited
{
	color:#2222FF;	
}

#account-icon-box
{
	width:24px;
	display:inline-block;
	float:right;
	margin-right:6px;
	height:24px;
	margin-top:9px;
}

#person-icon-image
{
	width:24px;
	height:24px;
}

#server-list-section
{
	display:inline-block;
	width:240px;
	height:500px;
	margin-top:10px;
	margin-left:10px;
	overflow:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#server-detail-section
{
	display:inline-block;
	width:320px;
	height:500px;
	margin-top:10px;
	margin-left:20px;
	overflow:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#track-detail-section
{
	display:inline-block;
	width:580px;
	height:500px;
	margin-top:10px;
	margin-left:20px;
	overflow:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background-color:#FFFFFF;
}

.server-details-box
{
	display:inline-block;
	width:280px;
	background-color:#FFFFFF;
	margin-top:0px;
	margin-left:0px;	
}

.server-track-list-item
{
	display:inline-block;
	width:280px;
	height:56px;
	background-color:#009933;
	margin-top:10px;
	margin-left:0px;
	color:#FFFFFF;
	border-radius:6px;
	cursor: pointer;
}

.server-track-list-text-container
{
	display:inline-block;
	width:260px;
	height:40px;
	margin-top:10px;
	margin-left:8px;	
}

.server-track-add-container
{
	display:inline-block;
	width:280px;
	height:150px;
	margin-top:10px;
	margin-left:0px;
	color:#FFFFFF;
	border-radius:6px;
	background-color:#BBBBBB;	
}

.server-list-item
{
	width:220px;
	height:140px;
	background-color:#FFFFFF;
	margin-top:10px;
	margin-left:0px;	
	cursor: pointer;
}

.server-icon-image
{
	width:200px;
	height:52px;	
}

.server-name-container
{
	width:200px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	display:inline-block;
	margin-left:4px;
}

.track-add-input
{
	width:254px;
	height:24px;
	margin-left:10px;
	margin-top:12px;	
}

.track-add-button
{
	cursor: pointer;
	border:0;
	background:#009933;
	width:100px;
	height:30px;
	text-align:center;
	margin-top:20px;
	margin-left:170px;
	color:#FFFFFF;	
	border-radius:4px;
}

.server-status-container
{
	width:200px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	display:inline-block;
	margin-left:4px;
}

.server-icon-container
{
	width:200px;
	height:54px;
	display:inline-block;
}

.dot-image
{
	width:14px;
	height:14px;
	margin-right:6px;	
}

.track-detail-section-header
{
	width:500px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	display:inline-block;	
}

.app-element-list-item
{
	display:inline-block;
	width:500px;
	height:80px;
	background-color:#DDDDDD;
	margin-top:10px;
	margin-left:0px;
	color:#000000;
	border-radius:6px;	
}

.app-element-list-item-extension
{
	width:500px;
	height:440px;
	background-color:#DDDDDD;
	margin-top:0px;
	margin-left:0px;
	color:#000000;
	border-radius:6px;
	display:none;
}

.app-element-list-item-extension-config-title
{
	width:470px;
	height:24px;
	margin-left:10px;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	display:inline-block;	
}

.app-element-list-item-extension-config-box
{
	width:474px;
	height:80px;
	margin-left:10px;
	margin-top:4px;	
}

.app-element-list-item-extension-inputs-title
{
	width:170px;
	height:24px;
	margin-left:10px;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	display:inline-block;	
}

.app-element-list-item-extension-inputs-box
{
	width:170px;
	height:160px;
	margin-left:10px;
	margin-top:4px;
	background-color:#FFFFFF;
	overflow:auto;
	display:inline-block;
}

.app-element-list-item-extension-inputs-item
{
	width:150px;
	height:20px;
	margin-left:4px;
	margin-top:4px;
	background-color:#FFFFFF;
	color:#222222;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	display:inline-block;
}

.app-element-list-item-extension-outputs-title
{
	width:300px;
	height:24px;
	margin-left:10px;
	margin-top:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	display:inline-block;	
}

.app-element-list-item-extension-outputs-box
{
	width:300px;
	height:160px;
	margin-left:10px;
	margin-top:4px;
	background-color:#FFFFFF;
	overflow:auto;
	display:inline-block;
}

.app-element-list-item-extension-outputs-item
{
	width:240px;
	height:30px;
	margin-left:4px;
	margin-top:4px;
	background-color:#CCCCFF;
	color:#222222;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	display:inline-block;
	border-radius:4px 0px 0px 4px;
}

.app-element-list-item-extension-outputs-item-button
{
	width:20px;
	height:30px;
	margin-left:0px;
	margin-top:4px;
	background-color:#CCCCFF;
	color:#222222;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	display:inline-block;
	border-radius:0px 4px 4px 0px;
	cursor: pointer;
}

.app-element-list-item-extension-outputs-item-innertext
{
	margin-left:6px;
	margin-top:6px;
	color:#222222;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	display:inline-block;
}

.app-element-list-item-extension-outputs-add-select
{
	margin-left:190px;
	width:250px;
	height:24px;
	margin-top:10px;
}

.app-element-list-item-extension-outputs-add-button
{
	cursor: pointer;
	border:0;
	background:#009933;
	width:40px;
	height:24px;
	text-align:center;
	margin-top:10px;
	margin-left:10px;
	color:#FFFFFF;	
	border-radius:4px;
}

.app-element-list-item-extension-update-button
{
	cursor: pointer;
	border:0;
	background:#009933;
	width:100px;
	height:30px;
	text-align:center;
	margin-top:30px;
	margin-left:390px;
	color:#FFFFFF;	
	border-radius:4px;
}

.app-element-list-item-title
{
	width:300px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	display:inline-block;
	margin-left:20px;
	margin-top:20px;
}

.app-element-list-item-id
{
	width:300px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	display:inline-block;
	margin-left:20px;
	margin-top:0px;
}

.app-element-list-item-image
{
	width:60px;
	height:60px;
	border-radius:30px;
	margin-top:10px;
	margin-left:10px;
	border:0;
	float:left;
	display:inline;	
}

.app-element-list-item-edit-button
{
	width:46px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#36F;
	display:inline-block;
	margin-left:8px;
	margin-top:20px;
	cursor: pointer;
}

.app-element-list-item-delete-button
{
	width:46px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#F30;
	display:inline-block;
	margin-left:0px;
	margin-top:20px;
	cursor: pointer;
}

.app-element-list-add-item
{
	display:inline-block;
	width:500px;
	height:80px;
	background-color:#009933;
	margin-top:10px;
	margin-left:0px;
	color:#FFFFFF;
	border-radius:6px;
	cursor: pointer;
}

.app-element-list-add-item-title
{
	width:300px;
	height:26px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	display:inline-block;
	margin-left:20px;
	margin-top:30px;
}

.element-menu-header
{
	width:960px;
	height:50px;
	display:inline-block;
	border-bottom-color:#222222;
	border-bottom-width:1px;
	border-bottom-style:solid;
}

.element-menu-header-title
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	display:inline-block;
	margin-top:12px;
	margin-left:10px;	
}

.element-menu-body
{
	width:960px;
	height:400px;
	display:inline-block;
	border-bottom-color:#222222;
	border-bottom-width:1px;
	border-bottom-style:solid;
	overflow:auto;
}

.element-menu-list-item
{
	width:920px;
	height:80px;
	margin-left:20px;
	margin-top:5px;
	margin-bottom:5px;
	display:inline-block;
	border-bottom-color:#222222;
	border-bottom-width:1px;
	border-bottom-style:solid;
}

.element-menu-list-item-radio-container
{
	display:inline-block;
	width:30px;
	height:80px;
	margin-top:0px;
	overflow:hidden;
}

.element-menu-list-item-radio-button
{
	margin-top:30px;
}

.element-menu-list-item-image-container
{
	display:inline-block;
	width:70px;
	height:80px;
	margin-top:0px;
	overflow:hidden;
}

.element-menu-list-item-title-container
{
	display:inline-block;
	width:320px;
	height:80px;
	margin-top:0px;
	overflow:hidden;
}

.element-menu-list-item-title-text
{
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:10px;
	margin-left:0px;
	margin-right:6px;
}

.element-menu-list-item-title-name
{
	font-size:18px;
}

.element-menu-list-item-description-container
{
	display:inline-block;
	width:480px;
	height:80px;
	margin-top:0px;
	overflow:hidden;
}

.element-menu-list-item-description-text
{
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	margin-top:10px;
	margin-left:0px;
	margin-right:6px;
}

.element-menu-footer
{
	width:960px;
	height:50px;
	display:inline-block;
}

.element-menu-create-button
{
	cursor: pointer;
	border:0;
	background:#009933;
	width:100px;
	height:30px;
	text-align:center;
	margin-top:4px;
	margin-left:10px;
	margin-right:10px;
	color:#FFFFFF;	
	border-radius:4px;
	float:right;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
}

.element-menu-cancel-button
{
	cursor: pointer;
	border:0;
	background:#CCCCCC;
	width:100px;
	height:30px;
	text-align:center;
	margin-top:4px;
	margin-left:0px;
	color:#222222;	
	border-radius:4px;
	float:right;
	font-size:16px;
	font-family:Arial, Helvetica, sans-serif;
}

.app-element-menu-item-image
{
	width:60px;
	height:60px;
	border-radius:30px;
	margin-top:6px;
	margin-left:0px;
	border-color:#222222;
	border-style:solid;
	border-width:1px;
	display:inline-block;	
}