/** Add css rules here for your application. */

body {
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

.label {
    font-size: 13px;
}

.gwt-Label {
	font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
	font-size: 13px;
}

.toolbutton {
    width: 18px;
    height: 18px;	
	background-position: center;
	background-repeat: no-repeat;
	border: transparent 1px solid;
	border-radius: 3px;
	cursor: pointer;
}

.toolbutton.over {
	border-color: rgba(81, 163, 217, .5);
}

.toolbutton.edit{
    background-image: url(../images/_16x16/edit.png);	
}

.toolbutton.expand {	
	background-image: url(../images/_16x16/expand.png);	
}

.toolbutton.delete {	
	background-image: url(../images/_16x16/delete.png);	
}

.toolbutton.undelete {	
	background-image: url(../images/_16x16/undelete.png);	
}

.toolbutton:hover {
	background-size:cover;
}

.toolbutton.undelete:hover, .toolbutton.red.delete:hover{
	background-size:cover;
}

.toolbutton.red.delete {	
	background-image: url(../images/_16x16/delete_red.png);	
}

.toolbutton.collapse {	
	background-image: url(../images/_16x16/collapse.png);
}

.toolbutton.refresh {
	background-image: url(../images/_16x16/refresh.png);
}

.toolbutton.upload {
	background-image: url(../images/_16x16/upload.png);
}

.toolbutton.add {
	background-image: url(../images/_16x16/add.png);
}

.toolbutton.opentab {
	background-image: url(../images/_16x16/opentab.png);
}

.toolbutton.close {
	background-image: url(../images/_16x16/close.png);
}

.toolbutton.white.over {
	border-color: rgba(255, 255, 255, .5);
}

.toolbutton.red.over {
	border-color: rgba(255, 0, 0, .5);
} 

.toolbutton.white.edit {
	background-image: url(../images/_16x16/edit_white.png);
}

.toolbutton.white.delete {
	background-image: url(../images/_16x16/delete_white.png);
}

.toolbutton.white.close {
	background-image: url(../images/_16x16/close_white.png);
}

.toolbutton.white.add {
	background-image: url(../images/_16x16/add_white.png);
}

.toolbutton.white.upload {
	background-image: url(../images/_16x16/upload_white.png);
}

.toolbutton.white.disconnect {
	background-image: url(../images/_16x16/disconnect_white.png);
}

.toolbutton.white.refresh {
	background-image: url(../images/_16x16/refresh_white.png);
}

.toolbutton.white.folder {
	background-image: url(../images/_16x16/folder_white.png);
}

.toolbutton.white.ruler {
	background-image: url(../images/_16x16/ruler_white.png);
}

.toolbutton.horizontal-expand {	
	background-image: url(../images/_16x16/horizontal_expand.png);	
}

.toolbutton.up {
	background-image: url(../images/_16x16/up.png);
}

.toolbutton.down {
	background-image: url(../images/_16x16/down.png);
}

.login-click-wrap-panel .gwt-Label {
	font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5px;
    font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

.click-wrap-header {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-bottom:10px;
}

.click-wrap-body {
    padding: 10px;
    background-position: center;
    display: block;
    border: 1px solid #ccc;
    background-repeat: no-repeat;
    overflow-y: auto;
    white-space: pre-line;
    width: 500px;
    height: 500px;
    border-radius: 5px;
}

.click-wrap-footer {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-top:10px;
}


#form-editor{
    border: 3px solid white;
}

/* Reset some default styling */
.gjs-cv-canvas {
	font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.gjs-block {
    width: auto;
    height: auto;
    min-height: auto;
}

.panel__top {
    padding: 0;
    width: 100%;
    display: flex;
    position: initial;
    justify-content: center;
    justify-content: space-between;
}

.panel__basic-actions {
    position: initial;
}

.editor-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    height: 800px;
}

.editor-canvas {
    flex-grow: 1;
}

.panel__right {
    flex-basis: 230px;
    position: relative;
    overflow-y: auto;
}

.panel__switcher {
    position: initial;
}

.draggable-component {
	display:flex;
	padding:2px;
	border:1px solid #3b97e3;
	border-radius:5px;
	margin:2px;
	color:#3b97e3;
	font-size:15px;
	flex-direction: row;
	align-content: center;
}

.draggable-component .dc-title{
	width:100%;
}

.draggable-component .dc-edit{
	width:16px;
	height:16px;
	cursor:pointer;
	border:1px solid transparent;
	background-repeat:no-repeat;
	background-position:right;
	background-size:12px;
}

.draggable-component:hover .dc-edit{
	background-image: url(../images/_16x16/edit.png);
}

.draggable-component .dc-delete{
	width:16px;
	height:16px;
	cursor:pointer;
	border:1px solid transparent;
	background-repeat:no-repeat;
	background-position:right;
	background-size:12px;
}

.draggable-component:hover .dc-delete{
	background-image: url(../images/_16x16/delete.png);
}

.draggable-component:hover .dc-delete:hover{
	border:1px solid #3b97e36e;
	border-radius:2px;
}

.draggable-component:hover .dc-edit:hover{
	border:1px solid #3b97e36e;
	border-radius:2px;
}

.badge {
    display: inline-block;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #50A5DA;
    border-radius: 10px;
    cursor: pointer;
}

.task-priority {
	width:16px;
	height:16px;
}

.task-priority.LOW {
	background-color:green;
}

.task-priority.NORMAL {
	background-color:#e0a25e;
}

.task-priority.HIGH {
	background-color: red;
}

span.warning {
	width: 14px;
	height: 14px;
	display:inline-block;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAuklEQVR42mNgwAKuhDrw3PA3D7nlZ1Fz08+i4YafecxNX2MRBkLgfoCBwE1/8/k3/czfA/F/NPwdiBdf8TKVwKr5eoCFAlDBbSwa0fF9kFpMm7FohsljMwTFJVBn/yfBABBeDg8wHH4mZMB3cMACGRG4/EvAgP+3fC0SGCBRRZ4BoCim3ACKvYAvEAng7/DUiSsaCeDl1EtIuJIyDgMwkzKWzPQZR2ZajjMzYWRnUBYGRhMY+1uk4NIIACBIoWHXL33EAAAAAElFTkSuQmCC);
	background-size: contain;
}

span.valid {
	width: 14px;
	height: 14px;
	display:inline-block;
	background-image: url('valid.png'); 
	background-size: contain;
}

.running-log-entry {
  	overflow-wrap: break-word; 
  	white-space: pre-wrap; 
  	text-overflow: unset;
}

.running-log-entry ul {
	list-style:inside;
	margin-left:10px;
}

.running-log-entry ol {
	list-style:decimal;
	margin-left:20px;
}

.thumb-wrap {
	display:inline-block;
	padding: 15px;
	border-radius: 5px;
}

.thumb-wrap .thumb img {
	height:100px;
	display:block;
	margin:auto;
}

.thumb-wrap a.download {
	text-align:center;
	padding:2px;
	display: block;
}

.thumb-wrap .info {
	text-align:center;
	font-style:italic;
	color:#555555;
	font-size:9pt;
	padding:2px;
}

.thumb-wrap.over, .thumb-wrap.select {
	background: repeat-x scroll left top #efefef;
    border: 1px solid #ddd !important;
}

.thumb-wrap.over .thumb-tools,
.thumb-wrap.select .thumb-tools {
	opacity: 1;
}

.thumb-tools {
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	border-color: rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, .75);
	bottom: 3px;
	margin:0 auto;
	left:50%;
	transform:translate(-50%, 0);
	opacity: 0;
	position: absolute;
	transition: opacity .25s ease;
	-webkit-transition: opacity .25s ease;
	-moz-transition: opacity .25s ease;
}

.thumb-tools td {
	background-repeat: no-repeat;
	background-position: center;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.thumb-tools td:hover {
	outline: 1px solid white;
}

.thumb-download {
	background-image: url("../images/download_11x14.png");
}

.thumb-bigger {
	background-image: url("../images/fullscreen_14x14.png");
}

.host-text-values tr.text-label {
	padding-bottom:10px;
	height:42px;
}

.area-thumb .label {
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;    
    overflow: hidden;
}

.area-thumb {
	text-align:center;
	border-style:solid;
	border-width:2px;
	border-color: #eee;
	position: relative;
	padding: 5px;
	display: inline-block;
	margin: 5px;
	cursor: pointer;
}

.area-thumb .img {
	display:inline-block;
}

.area-thumb.over, .area-thumb.select {
	border-color:rgba(81, 163, 217, .5);
}

.method-item .method-script{
	white-space: pre-wrap;
	font-family: monaco,Consolas,Lucida Console,monospace;
	font-size: 14px;
	padding:20px;
	background-color:aliceblue;
}

.method-item .method-name {
	font-weight: bold;
	cursor:pointer;
	color:#50a5da;
}

.method-item .method-name:hover {
	color:#477aa6;
}

.method-item {
	padding: 5px 10px 5px 10px;
}

.method-item .method-tools {
	float:right;
	padding: 5px;
}

.method-item.expanded .method-script,
.method-item.collapsed .method-tools {
	display:block;
}

.method-item.collapsed .method-script,
.method-item.collapsed .method-tools {
	display:none;
}

.dashboard-item {
	position: absolute;
	width: 100px;
	height: 30px;
}

.dashboard-item-circle {
	height: 100%;
	width: 100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	margin: 0 auto;
}

.dashboard-item-wrapper:hover, .dashboard-item-wrapper:hover .dashboard-item-label{
	background-color:rgb(239 239 239 / .5);
}

.dashboard-item-wrapper {
	border:1px solid transparent;
}

.dashboard-item-wrapper.marked {
	border-color:#e69900;
}

.dashboard-item-wrapper .position {
	display:none;
}

.dashboard-item-wrapper.marked .position {
	display:block;
	position:absolute;
	bottom:100%;
	right:100%;
	padding:1px;
	font-size:12px;
	border:2px solid #E69900;
	background-color:#E69900;
	border-radius:3px;
	color:white;
}

.dashboard-item-label {
	font-size: 12px;
	position: absolute;
	display: inline-block;
    text-align: center;
    white-space:pre;
    padding:2px;
}

.dashboard-item-label.BOTTOM {
	top:100%;
    left: 50%;
    transform: translate(-50%, 0);
}

.dashboard-item-label.RIGHT{
	transform: translate(0, -50%);
	top: 50%;
	left: 100%;
	text-align:left;
}

.dashboard-item-label.LEFT {
    transform: translate(0, -50%);
    top: 50%;
    right: 100%;
    text-align:right;
}

.dashboard-item-label.TOP {
    transform: translate(-50%, -100%);
    top: 0;
    left: 50%;
}

.dashboard-item-wrapper.marked .dashboard-item-label {
	color: #E69900;
}

.snake-layout {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	background-repeat: no-repeat;
	background-attachment: local;	
}

.host-item.select, .host-item.over {
	background-color:rgb(239 239 239 / .5);
}

.host-item .host-layout {
	width:100%;
	height:100%;
	font-size:12px;
}

.host-item .icon{
	width:100%;
	height: 70%;
	display:flex;
	justify-content: center;
	align-items: center;
}

.host-item .icon img{
	max-width: 100%;
    max-height: 100%;
}

.host-item .text {
	width:100%;
	display:grid;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
}

.dot {
  height: 14px;
  width: 14px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  color:white;
  font-size:11px;
  font-weight:bold;
}

.dot.up {
	background-color:green;
}

.dot.down {
	background-color:red;
}

.dot.unknown {
  background-color: #bbb;	
}

.month-label {
	color:white;
	font-weight:bold;
	font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
}

.month-label:hover{
	text-decoration:underline;
}

.booking-balloon {
	font-family: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
	box-shadow:3px 3px 3px #333333;
	color:white;
	width:100%;
	height:100%;
	border:10px solid #2951a3;
	border-radius:10px;
}

.booking-balloon .booking-header {
	width:100%;
	height:38px;
	background-color:#2951a3;
}

.booking-balloon .booking-body {
	padding:5px;	
	height:calc(100% - 90px);
	background-color:#668bd9;
}

.booking-balloon .booking-footer {
	height: 34px;
    background-color: #668bd9;
    padding: 5px;
}

.booking-balloon.left:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #2951a3;
	border-left: 0;
	margin-top: -20px;
	margin-left: -20px;
}

.booking-balloon.right:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #2951a3;
	border-right: 0;
	margin-top: -20px;
	margin-right: -20px;
}

.booking-balloon.bottom:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top-color: #2951a3;
	border-bottom: 0;
	margin-left: -20px;
	margin-bottom: -20px;
}

.booking-balloon.top:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: #2951a3;
	border-top: 0;
	margin-left: -20px;
	margin-top: -20px;
}

.booking-balloon.BLUE { border-color: #2952A3;}
.booking-balloon.BLUE .booking-header { background-color: #2952A3;}
.booking-balloon.BLUE .booking-body, .booking-balloon.BLUE .booking-footer, .site-booking.BLUE { background-color: #668CD9;}
.booking-balloon.BLUE.left:after { border-right-color: #2952A3;}
.booking-balloon.BLUE.right:after { border-left-color: #2952A3;}
.booking-balloon.BLUE.bottom:after { border-top-color: #2952A3;}
.booking-balloon.BLUE.top:after { border-bottom-color: #2952A3;}

.booking-balloon.RED { border-color: #A32929;}
.booking-balloon.RED .booking-header { background-color: #A32929;}
.booking-balloon.RED .booking-body, .booking-balloon.RED .booking-footer, .site-booking.RED { background-color: #D96666;}
.booking-balloon.RED.left:after { border-right-color: #A32929;}
.booking-balloon.RED.right:after { border-left-color: #A32929;}
.booking-balloon.RED.bottom:after { border-top-color: #A32929;}
.booking-balloon.RED.top:after { border-bottom-color: #A32929;}
 
.booking-balloon.YELLOW { border-color: #AB8B00;}
.booking-balloon.YELLOW .booking-header { background-color: #AB8B00;}
.booking-balloon.YELLOW .booking-body, .booking-balloon.YELLOW .booking-footer, .site-booking.YELLOW { background-color: #E0C240;}
.booking-balloon.YELLOW.left:after { border-right-color: #AB8B00;}
.booking-balloon.YELLOW.right:after { border-left-color: #AB8B00;}
.booking-balloon.YELLOW.bottom:after { border-top-color: #AB8B00;}
.booking-balloon.YELLOW.top:after { border-bottom-color: #AB8B00;}

.booking-balloon.GREEN { border-color: #0D7813;}
.booking-balloon.GREEN .booking-header { background-color: #0D7813;}
.booking-balloon.GREEN .booking-body, .booking-balloon.GREEN .booking-footer, .site-booking.GREEN { background-color: #4CB052;}
.booking-balloon.GREEN.left:after { border-right-color: #0D7813;}
.booking-balloon.GREEN.right:after { border-left-color: #0D7813;}
.booking-balloon.GREEN.bottom:after { border-top-color: #0D7813;}
.booking-balloon.GREEN.top:after { border-bottom-color: #0D7813;}

.booking-balloon.PURPLE { border-color: #7A367A;}
.booking-balloon.PURPLE .booking-header { background-color: #7A367A;}
.booking-balloon.PURPLE .booking-body, .booking-balloon.PURPLE .booking-footer, .site-booking.PURPLE { background-color: #B373B3;}
.booking-balloon.PURPLE.left:after { border-right-color: #7A367A;}
.booking-balloon.PURPLE.right:after { border-left-color: #7A367A;}
.booking-balloon.PURPLE.bottom:after { border-top-color: #7A367A;}
.booking-balloon.PURPLE.top:after { border-bottom-color: #7A367A;}

.booking-balloon.TEAL { border-color: #28754E;}
.booking-balloon.TEAL .booking-header { background-color: #28754E;}
.booking-balloon.TEAL .booking-body, .booking-balloon.TEAL .booking-footer, .site-booking.TEAL { background-color: #65AD89;}
.booking-balloon.TEAL.left:after { border-right-color: #28754E;}
.booking-balloon.TEAL.right:after { border-left-color: #28754E;}
.booking-balloon.TEAL.bottom:after { border-top-color: #28754E;}
.booking-balloon.TEAL.top:after { border-bottom-color: #28754E;}

.booking-balloon.RED_ORANGE { border-color: #B1440E;}
.booking-balloon.RED_ORANGE .booking-header{ background-color: #B1440E;}
.booking-balloon.RED_ORANGE .booking-body, .booking-balloon.RED_ORANGE .booking-footer, .site-booking.RED_ORANGE  { background-color: #E6804D;}
.booking-balloon.RED_ORANGE.left:after { border-right-color: #B1440E;}
.booking-balloon.RED_ORANGE.right:after { border-left-color: #B1440E;}
.booking-balloon.RED_ORANGE.bottom:after { border-top-color: #B1440E;}
.booking-balloon.RED_ORANGE.top:after { border-bottom-color: #B1440E;}

.booking-balloon.BLUE_GREY { border-color: #5A6986;}
.booking-balloon.BLUE_GREY .booking-header{ background-color: #5A6986;}
.booking-balloon.BLUE_GREY .booking-body, .booking-balloon.BLUE_GREY .booking-footer, .site-booking.BLUE_GREY  { background-color: #94A2BE;}
.booking-balloon.BLUE_GREY.left:after { border-right-color: #5A6986;}
.booking-balloon.BLUE_GREY.right:after { border-left-color: #5A6986;}
.booking-balloon.BLUE_GREY.bottom:after { border-top-color: #5A6986;}
.booking-balloon.BLUE_GREY.top:after { border-bottom-color: #5A6986;}

.booking-balloon.LIGHT_BROWN { border-color: #865A5A;}
.booking-balloon.LIGHT_BROWN .booking-header{ background-color: #865A5A;}
.booking-balloon.LIGHT_BROWN .booking-body, .booking-balloon.LIGHT_BROWN .booking-footer, .site-booking.LIGHT_BROWN  { background-color: #BE9494;}
.booking-balloon.LIGHT_BROWN.left:after { border-right-color: #865A5A;}
.booking-balloon.LIGHT_BROWN.right:after { border-left-color: #865A5A;}
.booking-balloon.LIGHT_BROWN.bottom:after { border-top-color: #865A5A;}
.booking-balloon.LIGHT_BROWN.top:after { border-bottom-color: #865A5A;}

.booking-balloon.LIGHT_GREEN { border-color: #528800;}
.booking-balloon.LIGHT_GREEN .booking-header { background-color: #528800;}
.booking-balloon.LIGHT_GREEN .booking-body, .booking-balloon.LIGHT_GREEN .booking-footer, .site-booking.LIGHT_GREEN  { background-color: #8CBF40;}
.booking-balloon.LIGHT_GREEN.left:after { border-right-color: #528800;}
.booking-balloon.LIGHT_GREEN.right:after { border-left-color: #528800;}
.booking-balloon.LIGHT_GREEN.bottom:after { border-top-color: #528800;}
.booking-balloon.LIGHT_GREEN.top:after { border-bottom-color: #528800;}

.gwt-cal-MonthView .grid {
	border-collapse: separate !important;
}

.task-day-panel {
	border-bottom:1px solid #abd2ec;
	min-height:100px;
    padding:10px;
}

.task-day-panel .header {
	color:#51A3D9;
	padding-left:10px;
	font-weight:bold;
}

.task-day-panel .site-booking {
	padding:2px 2px 2px 5px;
	border: 1px solid white;
    border-radius: 5px;
}

.gwt-Label.site-booking {
	font-size: 13px;
	color:white;
    cursor: pointer;
    padding: 2px 5px 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gwt-Label.site-booking.CLOSE {
	text-decoration: line-through;
	text-decoration-thickness:2px;
}

.exclamation-mark {
	width: 18px;
	height: 18px;
	display:inline-block;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAuklEQVR42mNgwAKuhDrw3PA3D7nlZ1Fz08+i4YafecxNX2MRBkLgfoCBwE1/8/k3/czfA/F/NPwdiBdf8TKVwKr5eoCFAlDBbSwa0fF9kFpMm7FohsljMwTFJVBn/yfBABBeDg8wHH4mZMB3cMACGRG4/EvAgP+3fC0SGCBRRZ4BoCim3ACKvYAvEAng7/DUiSsaCeDl1EtIuJIyDgMwkzKWzPQZR2ZajjMzYWRnUBYGRhMY+1uk4NIIACBIoWHXL33EAAAAAElFTkSuQmCC);
	background-size: contain;
}

.currently-monitoring:after{
	content: "";
	height: 18px;
	width: 18px;
	background-image: url('heart.png');
	background-repeat:no-repeat;
	background-position: center;
	top: -100%;
	right: calc(-100% + 18px);
	position: relative;
	display: inline-block;
	background-size: cover;
}

.currently-monitoring-area::after{
	content: "";
	height: 18px;
	width: 18px;
	background-image: url('heart.png');
	background-repeat:no-repeat;
	background-position: center;
	position: absolute;
	display: inline-block;
	background-size: cover;
}


.clickable-label {
	font-size:13px;
	color:#4a9acc;
	font-weight:bold;
	cursor:pointer;
}

.clickable-label:hover{
	color:#38779f;
}

.syncgroup.over, .syncgroup.select{
	background-color:#efebeb;
}