html { 
	height: 100%; 
	width: 100%;
	margin: 0; 
	padding: 0; 
    
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
}

body { 
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0; 
    background-color: #393939;
    color: #C4C4C4;
}

header {
    height: 10vh;
    background-color: #858585;
}

header .appname {
    padding-left: 4vw;
    line-height: 10vh;
    font-size: 8vh;
    vertical-align: middle;
    color: #373737;
    -moz-user-select: none;
    user-select: none;
}

header .mobile-platform {
	color: white;
	background-color: #009148;
	font-size: 2vh;
	border-radius: 2vh;
	display: inline-block;
	padding: 1vh;
	margin-left: 1vw;
	margin-top: 0.4vh;
}

header .login-bar {
    height: 10vh;
    width: 20.5vw;
    float: right;
    padding-left: 1vw;
    padding-right: 1.5vw;
    background-color: #2A2A2A;
    -moz-user-select: none;
    user-select: none;
}
header .login-bar .state {
    font-size: 4vh;    
    color: #C4C4C4;
}
header .login-bar .cn {
    width: 20vw;
    display: inline-block;
    font-size: 3vh;
    color: #009148;
    text-align: right;
    vertical-align: bottom;
    line-height: 6vh;
    position: relative;
    top: -1vh;
}

header .login-afterbar {
    height: 10vh;
    width: 1.5vw;
    float: right;
    background-color: #00A04D;
}

header #communication-indicator
{
	display: block;
	float: right;
	padding-right: 1.5vw;
	height: 10vh;
	vertical-align: middle;
	cursor: pointer;
	text-decoration: none;
	position: relative;

	-moz-user-select: none;
	user-select: none;
}
header #communication-indicator .number
{
	font-size: 16px;
	font-weight: bold;
	color: white;
	background-color: red;
	padding: 3px;
	position: absolute;
	right: 25px;
	bottom: 10px;
}
header #communication-indicator.empty .number
{
	display: none;
}

main {
    height: 84vh;
    overflow: hidden;
}

footer {
    height: 6vh;
    padding-right: 2vh;
    background-color: #00803B;    
    line-height: 6vh;
    font-size: 4vh;
    vertical-align: middle;
    -moz-user-select: none;
    user-select: none;
}

footer .f-time {
    float: right;
    margin-right: 1vw;
    color: gold;
}

footer .f-date {
    float: right;
    color: #C4C4C4;
}

header .login-bar ul {
    margin-top: 0;
    position:absolute;
    top: 10vh;
    right: 1.5vw;
    width: 23vw;
    background-color: #2A2A2A;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    -moz-user-select: none;
    user-select: none;
    z-index: 1000;
}
header .login-bar ul li {
/*    height: 10vh;
    width: 13.5vw;*/
    line-height: 8vh;
    font-size: 6vh;
    vertical-align: middle;
    -moz-user-select: none;
    user-select: none;
}
header .login-bar ul li a {
    display:block;
    padding:15px 10px;
    color: #858585;
    text-decoration: none;
}
header .login-bar ul li:hover a {
    color:#A0A0A0;
    text-decoration: underline;
}
header .login-bar ul.fallback {display:none;}
header .login-bar:hover ul.fallback {display:block;}

#modal-info {
    display: none;
}
#modal-info i {
    color: blue;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
    margin-right: 3vw;
    float: left;
}

#modal-warning {
    display: none;
}
#modal-warning i {
    color: orange;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
    margin-right: 3vw;
    float: left;
}

#modal-error {
    display: none;
}
#modal-error i {
    color: red;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
    margin-right: 3vw;
    float: left;
}

#modal-confirm {
    display: none;
}
#modal-confirm i {
    color: cyan;
    margin-left: 1.5vw;
    margin-top: 1.5vw;
    margin-right: 3vw;
    float: left;
}

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: #5C5C5C;
    opacity: 0.8;
}

#floatingBarsG{
	position:relative;
	width:310px;
	height:385px;
	margin-top:20vh;
	margin-left:auto;
	margin-right:auto;
}

.blockG{
	position:absolute;
	background-color:rgb(14,194,20);
	width:50px;
	height:120px;
	border-radius:40px 40px 0 0;
		-o-border-radius:40px 40px 0 0;
		-ms-border-radius:40px 40px 0 0;
		-webkit-border-radius:40px 40px 0 0;
		-moz-border-radius:40px 40px 0 0;
	transform:scale(0.4);
		-o-transform:scale(0.4);
		-ms-transform:scale(0.4);
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
	animation-name:fadeG;
		-o-animation-name:fadeG;
		-ms-animation-name:fadeG;
		-webkit-animation-name:fadeG;
		-moz-animation-name:fadeG;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#rotateG_01{
	left:0;
	top:140px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
	transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
}

#rotateG_02{
	left:40px;
	top:50px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
	transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
}

#rotateG_03{
	left:130px;
	top:15px;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
	transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
}

#rotateG_04{
	right:40px;
	top:50px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
	transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
}

#rotateG_05{
	right:0;
	top:140px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
	transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
}

#rotateG_06{
	right:40px;
	bottom:35px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
	transform:rotate(135deg);
		-o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
}

#rotateG_07{
	bottom:0;
	left:130px;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
	transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
}

#rotateG_08{
	left:40px;
	bottom:35px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
	transform:rotate(-135deg);
		-o-transform:rotate(-135deg);
		-ms-transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
		-moz-transform:rotate(-135deg);
}



@keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(14,194,20);
	}
}

@-o-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(14,194,20);
	}
}

@-ms-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(14,194,20);
	}
}

@-webkit-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(14,194,20);
	}
}

@-moz-keyframes fadeG{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(14,194,20);
	}
}

/**
 * FROM Executor
 */

.container_standard {
	padding: 5vh;
}

.container_standard > h1 {
	position: relative;
	margin-top: 0;
	left: 12vw;
	font-size: 6vh;
}

.container_standard .ui-widget {
	font-size: 1em;
}
.table_standard .ui-button {
	font-size: 0.8em;
}

.container_standard .ui-button.add,
.table_standard .ui-button.add {
	color: green;
}
.container_standard .ui-button.edit,
.table_standard .ui-button.edit {
	color: lightblue;
}
.container_standard .ui-button.remove,
.table_standard .ui-button.remove {
	color: red;
}

.ui-widget {
	font-size: 1em;
}

/**
 * Table Standard
 *
 */
.table_standard {
	border-spacing: 0;
}

.table_standard.fw {
	width: 100%;
}

.table_standard th {
	padding-left: 1vw;
	padding-right: 1vw;
}
.table_standard td {
	padding-top: 0.2vh;
	padding-bottom: 0.2vh;
	padding-left: 1vw;
	padding-right: 1vw;
}

.table_standard tbody tr:hover {
	background-color: gray;
}

.form-line {
	margin-top: 2vh;
	margin-bottom: 2vh;
	line-height: 2vh;
}

.form-line input,
.form-line select {
	float: right;
	width: 17vw;
	font-size: 2vh;
}

.content-scroll {
	max-height: 60vh;
	overflow-y: scroll;
}

#modal-confirm-start {
	display: none;
}

#modal-confirm-start .main-data .areas {
/*	width: 22vw;*/
	float: right;
}

#modal-confirm-start .main-data .areas .area {
	width: 3vw;
	text-align: center;

	display: inline-block;
	-moz-user-select: none;
	user-select: none;
}
#modal-confirm-start .main-data .areas .area:hover {
	background-color: gray;
	border-radius: 1vh;
}

#modal-confirm-stop {
	display: none;
}

#modal-confirm-stop .main-data .areas {
	/*	width: 22vw;*/
	float: right;
}

#modal-confirm-stop .main-data .areas .area {
	width: 3vw;
	text-align: center;

	display: inline-block;
	-moz-user-select: none;
	user-select: none;
}
#modal-confirm-stop .main-data .areas .area:hover {
	background-color: gray;
	border-radius: 1vh;
}

#modal-confirm-inspect-routes {
	display: none;
}

#modal-confirm-inspect-routes .main-data .areas {
	/*	width: 22vw;*/
	float: right;
}

#modal-confirm-inspect-routes .main-data .areas .area {
	width: 3vw;
	text-align: center;

	display: inline-block;
	-moz-user-select: none;
	user-select: none;
}
#modal-confirm-inspect-routes .main-data .areas .area:hover {
	background-color: gray;
	border-radius: 1vh;
}
#modal-confirm-inspect-routes .extra-data .extra {
	width: 100%;
}