@font-face {
    font-family: 'xoxo';
    src: url('../fonts/main/xo/xo-webfont.eot');
    src: url('../fonts/main/xo/xo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/main/xo/xo-webfont.woff2') format('woff2'),
         url('../fonts/main/xo/xo-webfont.woff') format('woff'),
         url('../fonts/main/xo/xo-webfont.ttf') format('truetype'),
         url('../fonts/main/xo/xo-webfont.svg#xoxo') format('svg');
    font-weight: normal;
    font-style: normal;

}

*{
	margin: 0;
	padding: 0;
	outline: 0;
}

input:disabled, textarea:disabled, select:disabled{
	cursor: default;
}
/* a{
	color: transparent;
} */

html{
	width: 100%;
	height: 100%;

    font-family: 'Droid Sans', sans-serif, Helvetica, Arial !important;
	text-rendering:  optimizeLegibility;

    font-size: 16px;

	overflow: hidden;
	/*background-color: #DDDDE4; /* Old browsers */
	/*background-image: -moz-linear-gradient(-45deg,  #010101 0%, #005077 50%, #102030 49%, #000000 80%, #235578 100%); /* FF3.6+ */
	/*background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#235578), color-stop(50%,#005077), color-stop(49%,#102030), color-stop(80%,#000000), color-stop(100%,#010101)); /* Chrome,Safari4+ */
	/*background-image: -webkit-linear-gradient(-45deg,  #010101 0%,#005077 50%,#102030 49%,#000000 80%,#235578 100%); /* Chrome10+,Safari5.1+ */
	/*background-image: -o-linear-gradient(-45deg,  #010101 0%,#005077 50%,#102030 49%,#000000 80%,#235578 100%); /* Opera 11.10+ */
	/*background-image: -ms-linear-gradient(-45deg,  #010101 0%,#005077 50%,#102030 49%,#000000 80%,#235578 100%); /* IE10+ */
	/*background-image: linear-gradient(-45deg,  #010101 0%,#005077 50%,#102030 49%,#000000 80%,#235578 100%); /* W3C */

	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-background-size: cover; /* pour Chrome et Safari */
	-moz-background-size: cover; /* pour Firefox */
	-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
	position: absolute;
}
textarea, input, button, select { 
	font-family: inherit; 
	font-size: inherit; 
}
textarea { 
	resize: vertical;
}

body{
	width: 100%;
	height: 100%;
	position: absolute;
}

.formElemContainer .content{ 
	position: relative;
	display: block;
}

.formElemContainer{
	/* text-align: right; */
	margin-top: 1em;
	position: relative;
}
.formElemContainer label{
	margin-right: 0.5vmin;
}

#view_myAccount .warningMessage{
	padding: 1vh 1vw;
	margin: 1vh 5vw 3vh;
}

.responsive-container {
	margin: 0 auto;
} 
.rc-40{
	width: 40%;
}


.view{
	text-align: center;
}

.default-font{
	font-family: 'Droid Sans', sans-serif, Helvetica, Arial !important;
}

h1, h2, h3{
	font-family: 'Droid Sans', sans-serif, Helvetica, Arial !important;
}


h1{
	color: #069;
	margin: 3vmin 1vmin 3vmin;
	font-size: 26px;
	padding: 0 50px;
	font-family: "xoxo", 'Droid Sans', sans-serif, Helvetica, Arial !important;
}
h2{
	color: #069;
	margin: 3vmin 1vmin 3vmin;
	font-size: 24px;
	padding: 0 50px;
	font-family: 'Droid Sans', sans-serif, Helvetica, Arial !important;
}
h3{
	color: #069;
	margin: 3vmin 1vmin 1.5vmin;
	font-size: 22px;
}
h4{
	color: #069;
	margin: 3vmin 1vmin 1.5vmin;
	font-size: 18px;
}

.ui-autocomplete {
	text-align: left;
	max-height: 25%;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	z-index: 1000;
	/* position: fixed !important; */
}

.parameterKeyName{
	display: inline-block;
	color: #069;
	vertical-align: top;
	font-style: italic;
	margin: 0px 0px 0px 8px;
}

.sp-replacer{
	margin: 1vmin 2vmin 1vmin 0.5vmin !important;
}

.inlineBlock{
	display: inline-block;
	vertical-align: middle;
}

.dateTimeInputContainer .smallButton {
	position: absolute;
	margin: 8px 0 0 -34px;
}

.SumoSelect{
	width: 100% !important;
	
    min-width: 200px !important;
}

.dashboard-configuration .SumoSelect{
	max-width: 300px !important;
}

.SumoSelect > .optWrapper {
    width: auto !important;
}



.view.list .categoryItem:not(.listContainer){
	position: relative;
	display: block;
	padding: 15px;
	border-radius: 25px;
	transition: background-color .3s ease-in;
	min-height: 50px;
	margin: 30px;
} 
.view.list ul.category{
	width: 100%;
	height: 100%;
	/* min-height: 130px; */
	display: block;
	border-radius: 25px;
	/* overflow: auto; */
}

.view.list .mainCategory{
	padding-bottom: 50px;
}

.view ul.category.enabled{
	background-color: #aad6ff;
	color: #FFF;
}
.view ul.category.enabled.hover{
	background-color: #069;
	cursor: pointer;
}
.view .newCategoryItem > .category{
	background-image: url('../images/icons/plus.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: none;
	border: none;
	min-height: 130px;
}



.view .category{
	position: relative;
}



/* 
.view.grid .newCategoryButton{
	position: absolute;
	top: 50%;
	right: -16px;

	margin-top: -10px;

}

.view.list .newCategoryButton{
	cursor: pointer;

	bottom: 0px;
	margin: 20px 0 0;
	
} */
.view .mainCategory > .newCategoryButton{
	position: absolute;
	bottom: 10px;
	right: 10px;

	cursor: pointer;

	width: 20px;
	height: 20px;

	text-shadow: transparent 0 0 0;
    transition: text-shadow 300ms, color 300ms;
	color: rgb(0, 102, 153, 0.2);
}

.view .mainCategory > .newCategoryButton:hover{
	text-shadow: rgb(255, 255, 255) 0 0 5px;
	color: #069;
} 


.view ul.category > .titleBar> .nameInput{
	background-color: #FDFEFF;
}

.view.list .categoryItem > .titleBar{
	position: absolute;
	display: flex; 
	top: -17px;
	left: 30px;
}

.view.list .categoryItem > .titleBar > .name{
	transition: background-color .3s ease-in;
	width: auto;
	height: 22px;
	line-height: 22px;
	background-color: #F0FBFF;
	color: #069;

	border-radius: 25px;
	box-shadow: 0 0 5px #cde;

	min-width: 65px;
	
	padding: 5px 15px;
	margin: 0;
}



.disappear-scale{
	min-width: 0!important;
	width: 0!important;
	height: 0!important;
	min-height: 0!important;
	margin: 0!important;
	padding: 0!important;
	border: 0!important;
	opacity: 0!important;
	transform: scale(0);
}

.view.grid .categoryItem:not(.listContainer){
	position: relative;
	display: inline-block;
	padding: 15px;
	border-radius: 25px;
	transition: transform .3s ease-in, width .3s ease-in, height .3s ease-in, min-width .3s ease-in, min-height .3s ease-in, border .3s ease-in, margin .3s ease-in, padding .3s ease-in, opacity .3s ease-in;
	min-height: 130px;
	min-width: 130px;
	margin: 30px;
} 
.view.grid ul.category{
	width: 100%;
	height: 100%;
	min-height: 160px;
	min-width: 160px;
	display: inline-block;
	border-radius: 5px;
}
.view.grid ul.categoy.no-wrap{
	white-space: no-wrap;
}

.view.grid .mainCategory{
	margin-top: 20px;
}

.defaultCategoryItem{
	background-color: #A0D0E5;
}

.view.grid .newCategoryItem{
	width: 160px !important;
	height: 160px !important;
	margin: 3px !important;
}


.view.grid .categoryItem > .titleBar{
	position: absolute;
	display: flex; 
	top: -18px;
	left: 10px;
}
.view.grid .categoryItem > .titleBar > .name{
	transition: background-color .3s ease-in;
	
	overflow-y: auto;

	width: auto;

	height: 22px;
	line-height: 22px;

	border-radius: 25px;

	min-width: 65px;
	
	padding: 5px 15px;
	margin: 0;
}


.view .categoryItem > .titleBar{
	color: #069;
}
.view .categoryItem > .titleBar > .item-button{
	position: relative;
	opacity: 0;
	cursor: pointer;
	transition: opacity .3s;
}
.view .categoryItem > .titleBar:hover > .item-button{
	opacity: 0.2;
}
.view .categoryItem.selected > .titleBar > .item-button{
	opacity: 0.5;
}
.view .categoryItem > .titleBar > .item-button:hover{
	opacity: 1;
}


.view .categoryItem > .titleBar > .moveButton{
	cursor: move;
}

li{
	list-style-type: none;
}

.inputError{
	transition: background-color 0.3s ease-in;
	background-color: #ffe4e4 !important;
	color: rgb(172, 34, 34) !important;;
}

.inputAlertMessage{
	padding: 0.3vmin 1.5vmin 0.3vmin 0;
	display: none;
}

.inputAlertIcon{
	color: rgb(172, 34, 34);
}


.inputIcon{
	position: absolute;
	top: 50%;
	margin-top: -9px;
	right: 25px;
	z-index: 20;
	padding: 0;
}

#taskCommandHtmlForm .inputIcon{
	/* margin-top: 0px; */
	right: 10px;
}

.formElemContainer > .inputIcon{
	top: calc(50% + 10px);
}

/* .view input{
	min-width: 35%;
} */

input.hasDatepicker{
	min-width: 230px !important;
}

.uploadInformation > div{
	display: inline-block !important;
}

.uploadInformation canvas{
	vertical-align: middle;
}
.uploadInformation input[type=text]{
	min-width: 0 !important;
}

#view_administration input:not([type=number]){
	min-width: 15%;
}
#view_administration fieldset{
	text-align: center;
}
#view_administration fieldset legend{
	font-size: 20px;
}
#view_administration table{
	/* width: auto; */
	width: 100%;
}

.licenseTd, .exchangeKeyTd{
	word-break: break-all;
	max-width: 300px;
}

#usersList .checkboxes{
  text-align: left;

}

#usersList .checkboxes label{
  display: block;
}

.noDisplay{
	display: none;
}
.forceNoDisplay{
	display: none !important;
}

.ifUpdateUserOnLogIn{
	display: none;
}

input,
textarea{
	vertical-align: middle;
	font-size: 16px;
	border: transparent;
	margin: 0.3vmin 1vmin 0.3vmin 0;
	/* margin: 1vmin 2vmin 1vmin; */
	border-radius: 1vmin;

	transition: box-shadow 300ms linear, background-color 300ms linear;
}
input{
	padding: 0 1vw;
	height: 35px;
	width: calc(100% - 2vw);
	min-width: 130px;
}
textarea{
	padding: 1vw;
	height: 50px;
	width: calc(100% - 2vw);
	min-width: 130px;
}
select{
	padding: 1vw;
	height: 35px;
	width: 100%;
	min-width: 130px;
}
table input,
table textarea{
	margin: 0.3vmin 0 0.3vmin;
	/* margin: 0.3vmin 1vmin 0.3vmin; */
}

/* .customizedVariablesTable input,
.customizedVariablesTable textarea{
	width: auto; 
} */


/* table td input:first-of-type,
table td textarea:first-of-type{
	margin-left: 0;
}
table td input:last-of-type,
table td textarea:last-of-type{
	margin-right: 0;
} */



/*Variables for trigger and trigger configuration*/
#triggerConfigurationPaneContent .customizedVariablesTable,
#triggerPaneContent .customizedVariablesTable{
	width: auto;
}
#triggerConfigurationPaneContent input,
#triggerConfigurationPaneContent textarea,
#triggerPaneContent input,
#triggerPaneContent textarea{
	width: calc(100% - 2vw);
}
/*For key value fields (two fields on a row)*/
table.customizedVariablesTable td .keyValueElements > .keyValue input,
table.customizedVariablesTable td .keyValueElements > .keyValue input{
	width: auto
	/* margin: 0.3vmin; */
}


/*Variables for trigger only*/
#triggerPaneContent input:disabled{
	border: none;
	background-color: transparent;
	box-shadow: none;
	text-align: center;
}
#triggerPaneContent .customizedVariablesTable .type,
#triggerPaneContent .customizedVariablesTable .alias{
	display: none;
}

#customizedVariablesTable td input,
#customizedVariablesTable td textarea{
	width: auto;
}

input[type=number]{
  padding: 0;
  min-width: 0;
  width: 80px;
  height: 35px;
  text-align: center;
}

input:invalid{
  background-color: #F88;
}

select{
	vertical-align: middle;
	cursor: pointer;
	/* margin: 1vmin 2vmin 1vmin; */
	margin: 0.3vmin 1vmin 0.3vmin 0;
	padding: 0 1vmin;

	font-size: 16px;
	border: transparent;
	border-radius: 1vmin;
	
    transition: box-shadow 300ms linear, background-color 300ms linear;
}
table select {
	margin: 0.3vmin 0;
	/* margin: 0.3vmin 0 0.3vmin 1vmin; */
}
/* table select:first-of-type{
	margin: 0.3vmin 0;
} */

#logInFormContent input{
	margin-bottom: 1vmin;
	font-family: Xolonium;
}

#logInFormContent .submitButton{
	min-width: auto;
	width: auto;
	padding: 0 35px;
}

.button.dark-shadow{
	box-shadow: 0 0 1.5vmin rgb(0, 0, 0), inset 0 0 0.1vmin #4a565e;
}

.button.dark-shadow:hover{
	box-shadow: 0 0 3vmin rgb(0, 0, 0), inset 0 0 0.3vmin #86a2b5;
}

.button.dark-shadow:focus,
.button.dark-shadow:active{
	box-shadow: inset 1px 1px 5px #000;
}


.ui-dialog input, 
.ui-dialog select, 
.ui-dialog textarea{
	margin-top: 1%;
	margin-bottom: 1%;
}

table.connectionConfiguration,
table.blockConfiguration{
	margin: 100px auto 1vmin;
}

table.connectionConfiguration input[type=text],
table.connectionConfiguration textarea,
table.blockConfiguration input[type=text],
table.blockConfiguration textarea,
form input{
	min-width: 200px;
	width: calc(100% - 2vw);
}
form select{
	min-width: 200px;
	width: 100%;
}

select:focus{
	box-shadow: 0 0 3vmin #069;
	background-color: #FFF;
}

select option{
	padding: 1vmin 3vmin 1vmin;
}

select option.titleOption{
	text-align: center;
	font-style: italic;
}



input[type="radio"],
input[type="checkbox"] {
	display: none;
}

.SumoSelect > .optWrapper{
	width: auto;
}
.SumoSelect > .optWrapper > .options li label{
	text-overflow: initial;
	padding-right: 15px;
	text-align: left;
}

.SumoSelect > .optWrapper ul {
    overflow-x: hidden;
}

.labelContainer{
	vertical-align: middle;
}

input[type="radio"] + span:before {
	font-family: 'FontAwesome';
	content: "\f10c"; /* circle-blank */
	vertical-align: middle;
	margin-right: 3px;
	margin-left: 3px;
	cursor: pointer;
}

input[type="radio"]:checked + span:before {
	font-family: 'FontAwesome';
	content: "\f111"; /* circle */
	vertical-align: middle;
	margin-right: 3px;
	margin-left: 3px;
	cursor: pointer;
}

input[type="checkbox"] + span:before {
	font-family: 'FontAwesome';
	content: "\f096"; /* check-empty */
	vertical-align: middle;
	margin-right: 3px;
	margin-left: 3px;
	cursor: pointer;
}

input[type="checkbox"]:checked + span:before {
	font-family: 'FontAwesome';
	content: "\f046"; /* check */
	vertical-align: middle;
	margin-right: 3px;
	margin-left: 3px;
	cursor: pointer;
}

input[type="checkbox"]:disabled + span:before {
	cursor: default;
	color: #999;
}


.formLabel{
	margin: 0 5px;
}


form > fieldset.conditionsFieldset,
fieldset.fieldset_task{
	display: inline-block;
}


/*
.inlineLoader{
	position: relative;
	color: #069;
}
.loading-configuration{
	position: fixed;
}
#view_administration fieldset .loading-configuration{ */
	/* position: relative; */
/* } */


/* .divisionTitle{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 5px 5px 0px;
	font-size: 15px;
	text-transform: uppercase;
}
.divisionTitle .fa{
	vertical-align: middle;
	margin-right: 5px;
} */

.radioButtons{
	text-align: left;
	display: inline-block;
}
.radioButtons > label > *:not(.radioButton) {
	vertical-align: middle;
}
.radioButton{
	color: #FFF;
}

.inlineTextButton{
	vertical-align: middle;
	cursor: pointer;
	color: #069;
	transition: color 0.3s;
}
.inlineTextButton:hover{
	color: #08A;
	text-decoration: underline;
}
.inlineTextButton:active{
	color: #024;
}

.inlineTextButton > *{
	vertical-align: middle;
}

.returnValuesFieldsets,
.choiceFieldsets{
	list-style:none;
	margin-left:0;
	padding-left:0;
	margin-bottom: 1vmin;
}
.c_pointer{
	cursor: pointer !important;
}
.c_move{
	cursor: move !important;
}

.ui-dialog-buttonpane{
	text-align: center !important;
	/* white-space: nowrap; */
}

.informationText{
	padding-top: 15px;
	color: #069;
}

.notification{
	cursor: pointer;
	text-align: left;
	position: fixed;
	
	display: inline-block;
	background-color: #E0FFEF;
	border-radius: 1vmin;
	/* margin: 1vmin 3vmin; */
	top: 13vh;
	left: 1vmin;
	padding: 1vmin;
	z-index: 100;
}
.notification.leftMenu{
	left: 11vmin;
}
.notification.dialogTitle{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}
.notification.subElement{
    position: absolute;
    left: 10px;
    top: 10px;
}

.notification .notificationText{
	/* position: absolute; */
	z-index: 5;
	padding: 2px 3px;
}
.notification .close{
	top: 0px;
	right: 0px;
	position: absolute;
}

.successText{
	color: #1B3;
}
.exceptionText{
	color: #C61;
}
.errorText{
	color: #911;
}
.silentText{
	color: #9AB;
}
.alert{
	background-color: #FC8 !important;
	color: #F45;
}




table#statusTable .dataTables_empty{
	display: none;
}
table#statusTable.tableLoading .dataTables_empty{
	display: table-cell;
}

.area-selection{
	border-radius: 0.1em;
}
.area-selected{
	border-radius: 10px;
}

@keyframes blueBgBlink{
   from {
      background-color: #069;
   }
   to {
      background-color: rgb(0, 52, 78);
   }
}

.processing{
   animation-duration: 800ms;
   animation-name: blueColorBlink;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}
@keyframes blueColorBlink{
   from {
      color: #069;
   }
   to {
      color: #5AE;
   }
}

#statusTable_processing{
	display: none !important;
}
#statusTablePaginateFooter{
	height: 45px;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: blue;
}

.dt-button-collection{
	width: auto !important;
}

.autoRefresh.dt-button {
	width: 49px;
	height: 32px;
}
a.dt-button.autoRefresh:not(.disabled){
	vertical-align: middle;
}
.autoRefresh.dt-button > span{
	vertical-align: top;
}

#autoRefreshStatusDelay,
#autoRefreshUserTasksDelay{
	width: 80px;
	text-align: center;
	vertical-align: middle;
	margin-right: 0;
}

#statusTable_info{
	margin: 0 0 0 10px;
	color: #C0C8CF;
	float: none;
	display: inline-block;
}

.columnsVisibility{
	text-align: center;
	padding: 10px 0;
	margin: 1vmin 3vw;
}

.autoRefreshContainer{
	position: absolute;
	text-align: right;
	margin-top: 1vmin;
	right: 3vw;
	margin-bottom: 1vmin;
}
.paginationContainer{
	display: inline-block;
	margin-left: 3vw;
}
#statusTable_paginate{
	margin-right: 3vw;
}

.mainButtons{
	position: relative;
	margin-left: 3vw;
	display: inline-block;
	width: calc(65% - 7vw);
}

.mainButtons a.dt-button.filterCategories,
.mainButtons a.dt-button.filterDates{
	float: right;
}

.dataTables_wrapper .dataTables_filter.freeFilter {
	margin-right: 3vw;
	width: 35%;
	float: right;
	margin-bottom: 1vmin;
	text-align: center;
}
.freeFilter input[type=search]{
	width: 100%;
}

.dataTables_filter input{
	min-width: 255px;
	width: 255px;    
	margin-right: 0;
}
.dataTables_filter input.searchFilter{
	width: 100%;
	margin-left: 0;
}

table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting{
	background-position: center right 5px;
}

#statusTable_wrapper{
	text-align: left;
}
#statusTable_filter .filter{
	display: inline-block;
	margin: 0 0 0 10px;
}

#loginOverlay{
	position: fixed;
	z-index: 150;
	background-color: rgba(0,0,0);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#loginForm{
	color: #DDD;
	text-shadow: 0 0 2px #444;


	display: inline-block;
	opacity: 0.90;
	position: absolute;

	left: 50%;
	margin-left: -22vw;
	width: 40vw;


	top: 50vh;
	margin-top: -33vh;
	/* min-height: 63vh; */

	padding: 2vw;

	vertical-align: top;

	background-color: #222;
	background-color: rgba(10, 10, 10, 1);
	
	box-shadow: 0px 0px 100px rgba(255, 255, 255, 0.2), inset 0 0 3px #ACF;
	
	border-radius: 5px;
	z-index: 5;
}


#logInFormContent{
	text-align: center;
	position: relative;
	width: 40vw;
	padding: 2vh 0;
	margin: auto;
}


#logInFormContent .submitLine,
#logInFormContent .informationMessage{
	margin-top: 4vh;
}

#logInFormLogo{
	position: absolute;
	opacity: 0.40;
}

.logInFormFullLogoContainer{
	display: inline-block;
	width: 36vw;
	height: 7.8vw;
	margin: 0 auto 1vh;
	
	position: relative;
	overflow: hidden;
	border-radius: 1vmin;

	box-shadow: 0 0 3vmin rgba(255,255,255, .5);
}
  
.logInFormFullLogoContainer::before {
	position: absolute;
	animation: shine 4s infinite;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%);
	transform: skewX(-25deg);
}
@keyframes shine {
	60% {
		left: 125%;
	}
	100% {
		left: 125%
	}
}

.logInFormFullLogoContainer img{
	width: 100%;
	vertical-align: top;
	background-color: #FFF;
	/* animation: glowingDialog 4s linear infinite; */
	border-radius: 1vmin;
}



.gutter{
	background-repeat: no-repeat;
	background-position: 50% center;
	cursor: grab;
}


.gutter.gutter-horizontal{
	background-image: url("../images/icons/verticalGrip.png");
	cursor: col-resize;
	float: left;
	height:100%;
}


.gutter.gutter-vertical{
	background-image: url("../images/icons/horizontalGrip.png");
	cursor: row-resize;
}

.captcha{
	display: none;
}
.captchaRefreshButton{
	cursor: pointer;
}

@keyframes rotateR{
  from {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
.navButton:hover .animation-rotateR-h,
.animation-rotateR,
.animation-rotateR-h:hover{
	animation: rotateR 2s linear infinite;
}
@keyframes rotate{
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.navButton:hover .animation-rotate-h,
.animation-rotate,
.animation-rotate-h:hover{
	animation: rotate 2s linear infinite;
}

@keyframes pulse {
	25% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}
	75% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}

.navButton:hover .animation-pulse-h,
.animation-pulse,
.animation-pulse-h:hover{
	animation: pulse 1s linear infinite;
}

@keyframes buzz{
	0% {
		-webkit-transform: translateX(0px) rotate(0deg);
		transform: translateX(0px) rotate(0deg);
	}
	25% {
		-webkit-transform: translateX(-3px) rotate(-3deg);
		transform: translateX(-3px) rotate(-3deg);
	}
	75% {
		-webkit-transform: translateX(3px) rotate(3deg);
		transform: translateX(3px) rotate(3deg);
	}
	100% {
		-webkit-transform: translateX(0px) rotate(0deg);
		transform: translateX(0px) rotate(0deg);
	}
}

.navButton:hover .animation-buzz-h,
.animation-buzz,
.animation-buzz-h:hover{
	animation: buzz 0.50s linear infinite;
}


@keyframes wobble{
	16.65% {
		-webkit-transform: skew(-12deg);
		transform: skew(-12deg);
	}

	33.3% {
		-webkit-transform: skew(10deg);
		transform: skew(10deg);
	}

	49.95% {
		-webkit-transform: skew(-6deg);
		transform: skew(-6deg);
	}

	66.6% {
		-webkit-transform: skew(4deg);
		transform: skew(4deg);
	}

	83.25% {
		-webkit-transform: skew(-2deg);
		transform: skew(-2deg);
	}

	100% {
		-webkit-transform: skew(0);
		transform: skew(0);
	}
}
.navButton:hover .animation-wobble-h,
.animation-wobble,
.animation-wobble-h:hover{
	animation: wobble 2s linear infinite;
}

nav#mainNavigation{
	position: relative;
	width: 100%;
	height: 10vh;
	overflow: hidden;
	text-align: center;
}
nav#mainNavigation .main .navButton{
	display: inline-block;
	cursor: pointer;
	width: 15vw;
	margin: 1vh 0.4vw 0;
	height: 8vh;
	text-align: center;
	border-radius: 5vmin;

	transition: background-color 0.3s ease-in 0s, color 0.3s ease-in 0s;
}
nav#mainNavigation.admin .main .navButton{
	width: 13vw;
	margin: 1vh 0.4vw 0;
}

nav#mainNavigation .actions .navButton{
	cursor: pointer;
	width: 3vh;
	text-align: center;
	line-height: 2.8vh;
	font-size: 2.8vh;
	border-radius: 2.8vh;
	padding: 0.15vh;
	transition: background-color 0.3s ease-in 0s, color 0.3s ease-in 0s;
}


nav#mainNavigation .main .navButton .fa{
	margin-top: 1vh;
	font-size: 6vh;
}

nav#mainNavigation .actions{
	position: absolute;    
	display: inline-grid;
	top: 0.5vh;
	right: 0.4vh;
}

nav#mainNavigation.admin .main .navButton{
	width: 13.5vw;
	margin: 1vh 0.4vw 0;
	overflow: hidden;
	position: relative;
}

nav#mainNavigation .main .adminButton{
	display: none;
}
nav#mainNavigation.admin .main .adminButton{
	display: inline-block;
}

nav#mainNavigation .navButton:hover{
	transition: background-color 0.2s ease-in 0s, color 0.2s ease-in 0s;
}


#content .view{
	height: 86vh;
	width: 100%;
	overflow: auto;
	position: relative;
}

#content{
	margin-top: 2vh;
	width: 100%;
	height: 86vh;
	overflow: hidden;
	background-size: 20vmin;
    background-repeat: no-repeat;
    background-position: 5px 5px;
}
#overviewPane{
	position: absolute;
	width: 100%;
	height: 86vh;
	overflow: auto;
	text-align: center;
}
#configurationPane{
	vertical-align: top;
	position: relative;
	display: inline-block;
	overflow: auto;
	z-index: 80;
	width: auto;
	height: 86vh;
	margin: 0 2%;
	text-align: left;
	opacity: 0.98;
	
	transition: opacity 0.5s linear;
}
.hiddenPane{
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}
#configurationPane .closeView{
	z-index: 81;
}
#workflowPane{
	width: 100%;
	height: 86vh;
	overflow: auto;
} 
#overviewPaneMenu, 
#configurationPaneMenu, 
#triggerConfigurationPaneMenu, 
#triggerPaneMenu{
	text-align: center;
	height: 86vh;
	width: 76px;
	position: fixed;
	overflow: auto;
}
#configurationPaneMenu{
	position: relative;
	height: 100%;
	vertical-align: top;
	display: inline-block;
}
#workflowPaneMenu{
	text-align: center;
	height: calc(86vh - 5px);
	position: fixed;
	width: 76px;
	overflow: auto;
}
#view_trigger #triggerPaneMenu{
	height: 86vh;
}
#overviewPaneContainer, 
#workflowPaneContainer, 
#configurationPaneContainer,
#workflowConfigurationPaneContainer, 
#triggerConfigurationPaneContainer, 
#triggerPaneContainer{
	vertical-align: top;
	margin-left: 76px;
	display: inline-block;
	width: calc(100% - 76px);
	height: 100%;
	overflow: auto;
	text-align: left;
	min-height: 300px;
}
#configurationPaneContainer{
	margin-left: 0;
	width: auto;
	max-width: calc(100% - 76px);
	height: calc(100% - 10px);
	padding: 0;
}

#triggerPaneContent, #triggerConfigurationPaneContent{
	text-align: center;
	padding-bottom: 1vmin;
}

#triggerPaneContent .aliasEntry, 
#triggerConfigurationPaneContent .aliasEntry{
	padding-bottom: 1vmin;
}
#triggerPaneContent .aliasEntry:last-of-type, 
#triggerConfigurationPaneContent .aliasEntry:last-of-type{
	padding-bottom: 0;
}


#configurationPaneContent{
	vertical-align: top;
	float: left;
	/* display: inline-block; */
	overflow: auto;
	/* text-align: left; */
	text-align: center;
	position: relative;
	z-index: 80;
	max-width: 800px;

	height: 100%;
}
#variablesPane{
	display: block;
	position: fixed;
	z-index: 85;
	width: auto;
	max-width: 800px;
	top: 12vh;	
	height: 86vh;	
	overflow: auto;
	transition: opacity 0.2s linear;
}

#variablesPane .none{
	font-style: italic;
	color: #BCD;
}

#configurationPaneOverlay{
	position: fixed;
	background-color: #0009;
	width: 100%;
	height: 100%;
	top: 10vh;
	left: 0;
	z-index: 70;
	opacity: 1;

	transition: opacity 0.5s linear;
}
#configurationPaneOverlay.hiddenOverlay{
	opacity: 0;
	display: none;
}

#triggerConfigurationPaneContent .mainContent h4,
#triggerPaneContent .mainContent h4{
	white-space: pre-line;
}

.multiline{
	white-space: pre-line;
}

.mainContent{
	text-align: center;
}
.mainContent table{
	margin-left: auto;
	margin-right: auto;
	width: auto;
}
.mainContent table td{
	line-height: 25px;
}
.mainContent input.externalAccessKey{
	min-width: 230px;
}

.paneMenu .paneMenuButton{
	display: block;
	cursor: pointer;
	font-size: 4vmin;
	width: 76px;
	padding: 6px 0;

	transition: color 0.2s ease-in;
	transition: background 0.2s ease-in;
}

.paneMenu .paneMenuButton.selection-active{
	display: none;
}


.paneMenu .paneMenuButton.disabled,
.paneMenu .paneMenuButton.disabled:hover,
.paneMenu .paneMenuButton.disabled:active{
	background: none !important;
	cursor: default;
}

.paneContainer{
	font-size: 18px;
}

.paneContainer.mode_move{
	cursor: move;
}

.toggleOn .toggleIsOn{
	display: inline-block;
}
.toggleOn .toggleIsOff{
	display: none;
}

.toggleOff .toggleIsOn{
	display: none;
}
.toggleOff .toggleIsOff{
	display: inline-block;
}

#workflowPaneContent,
#overviewPaneContent{
	text-align: left;
	min-width: 100%;
	min-height: 100%;
	position: relative;

}
.taskBlock{
	text-align: center;
	position: absolute;
	padding: 5px;
	z-index: 10;
	word-break: keep-all;

	width: 150px;

	overflow: hidden;
}

.previewContainer{
	overflow-x: hidden;
	padding: 0.3vmin;
	position: absolute;
	width: calc(100% - 5px);
}
.preview{
	white-space: nowrap;
	margin-left: -100%;
	margin-right: -100%;
}
.preview .taskBlock{
	position: relative !important;
	margin: 1vmin 0 0 !important;
	padding: 0 !important;
	top: 0 !important;
	left: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
}
.preview .taskConnection{
	position: relative !important;
	display: inline-block !important;
	vertical-align: text-top !important;
	max-width: 150px;
}
.taskBlock .taskName{
	cursor: info;
}
.taskBlockContent{
	padding: 4% 5%;
	box-shadow: 0 0 1vmin #ABC;

	border: 1px solid transparent;
}
.workflowPreview {
	padding: 20px;
	position: relative;
}

.workflowPreview .taskBlockContent{
	padding: 20px 0;
}

.taskBlock .taskBlockBar{
	white-space: nowrap;
	margin: 0.1em 0.1em 0.5em;
	padding: 3% 0 3%;
	box-shadow: 0 0 1vmin #ABC;
	background-color: #F0F9FF;
	border-radius: 20px;
	text-align: center;
}
.taskBlock .taskBlockBar .taskBlockButton{
	white-space: nowrap;
	cursor: pointer;
	padding: 0.5% 5% 0.5%;
}

.taskBlock.connecting .taskBlockBar .connectButton{
	color: #069;
}
.taskBlock .taskBlockBar .taskBlockButton:hover{
	color: #069;
}
/* .taskBlock .taskBlockBar .connectButton{
	cursor: alias;
} */

.taskConnection{
	z-index: 5;
	position: absolute;
	overflow: visible;
	text-align: center;

	border: 1px solid transparent;
}
.taskConnection .name{
	text-shadow: 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255), 0 0 5px rgb(245, 251, 255);
}
.taskConnection .name.reverted{
	transform: rotate(180deg);
}

.taskConnection .configurationArrow{
	cursor: pointer;

	transition: text-shadow 0.2s ease-in;
}
.taskConnection .configurationArrow:hover{
	text-shadow: 0 0 10px #069;
}
.taskConnection .configurationArrow:active{
	font-style: italic;
}

.refreshingState{
	animation: blinkingColor 900ms infinite;
}

.taskBlock.changed .taskBlockContent,
.taskConnection.changed{
	animation: glowingChange 1200ms infinite;
}
/* .taskBlock.changing .configureButton,
.taskConnection.changing .configureButton{
	animation: glowingChanging 900ms infinite;
} 
*/

.glowingWorkflowElement{
	animation: glowingCurrentElement 1500ms infinite;
}

.highlightedWorkflowElement{
	animation: highlightingCurrentElement 3000ms infinite !important;
}

@keyframes glowingChange {
  0% { border-color: #FF9966; box-shadow: 0 0 3vmin #FF9966; }
  50% { border-color: transparent; box-shadow: 0 0 3vmin #FFBB88; }
  100% { border-color: #FF9966; box-shadow: 0 0 3vmin #FF9966; }
}
@keyframes glowingChanging {
  0% { text-shadow: 0 0 1vmin #44AACC; color: #006699; }
  50% { text-shadow: 0 0 3vmin #006699; color: #2288AA; }
  100% { text-shadow: 0 0 1vmin #2288AA; color: #006699; }
}
@keyframes glowingCurrentElement {
  0% { border-color: #44AACC; box-shadow: 0 0 5vmin #006699, 0 0 1vmin #006699 inset; }
  50% { border-color: #006699; box-shadow: 0 0 1vmin #1188AA, 0 0 0.5vmin #1188AA inset; }
  100% { border-color: #2288AA; box-shadow: 0 0 5vmin #006699, 0 0 1vmin #006699 inset; }
}
@keyframes blinkingColor {
  0% { text-shadow: 0 0 1vmin #44AACC; color: #006699; }
  50% { text-shadow: 0 0 3vmin #006699; color: #2288AA; }
  100% { text-shadow: 0 0 1vmin #2288AA; color: #006699; }
}
@keyframes highlightingCurrentElement {
	0% { box-shadow: 0 0 1vmin transparent, 0 0 0.5vmin transparent inset; }
	16% { background-color:#ffee00; box-shadow: 0 0 5vmin #fff132, 0 0 1vmin #fff132 inset; }
	32% { background-color:#069; box-shadow: 0 0 1vmin #2288AA, 0 0 0.5vmin #2288AA inset; }
	50% { background-color:#ffee00; box-shadow: 0 0 5vmin #fff132, 0 0 1vmin #fff132 inset; }
	68% { background-color:#069; box-shadow: 0 0 1vmin #2288AA, 0 0 0.5vmin #069 inset; }
	84% { background-color:#ffee00; box-shadow: 0 0 5vmin #fff132, 0 0 1vmin #fff132 inset; }
	100% { box-shadow: 0 0 1vmin transparent, 0 0 0.5vmin transparent inset; }
  }

 .taskBlock.outdated .taskBlockContent {
	animation: glowingOutdated 1200ms infinite;
 }
 @keyframes glowingOutdated {
   0% { border-color: #ff6666; box-shadow: 0 0 10vmin #ff6666; }
   25% { border-color: transparent; box-shadow: 0 0 10vmin #ffee00; }
   50% { border-color: transparent; box-shadow: 0 0 10vmin #00ffc8; }
   75% { border-color: transparent; box-shadow: 0 0 10vmin #fff788; }
   100% { border-color: #ff6666; box-shadow: 0 0 10vmin #ff6666; }
 }


.uploadFileInput{
	display: none;
}


.uploadContainer .uploadInformation input{
	min-width: 28px !important;
}

.uploadContainer .uploadInformation canvas{
	vertical-align: middle;
}

.uploadContainer .fileDescription{
    margin-left: 1vw;
    overflow: hidden;
    white-space: nowrap;
    color: #069;
    font-size: 16px;
    font-weight: bold;
}

.uploadContainer .uploadInformation i{
    color: #7f7f7f;
    display: inline-block;
    margin-left: 1vw;
}
.uploadContainer .uploadInformation .cancel{
    margin-left: 1vw;
	margin-right: 1vw;
    cursor: pointer;
}

.uploadContainer .uploadInformation.working .cancel{
    height: 16px;
    background-position: 0 -12px;
}

.uploadContainer .uploadInformation.error .fileDescription{
    color:red;
}

.licenseContent .info td.value .key{
	margin-right: 3px;
}


#accumulatedVariables,
#customizedVariables,
#directVariables{
	padding: 0 0 3vmin;
	word-break: break-word;
}

.break-all{
	word-break: break-all;
}

#accumulatedVariables,
#customizedVariables{
	display: block;
	border-bottom: 2px dotted #9CE;
	border-collapse: collapse;
}

#accumulatedVariables tr.special,
#accumulatedVariables tr.arrayLoop,
#accumulatedVariables tr.loop{
	cursor: not-allowed;
}



td .keyValueElements .keyValueElement{
	position: relative;
	margin: 5px 5px;
	border: 1px solid #069;
	border-radius: 20px;
	padding: 5px;

	display: inline-block;
}

td .keyElements .keyContainer,
/* td .keyValueElements .keyValueElement .keyValue, */
td .keyValueElements .keyValue,
td .valueElements .valueElement{
	position: relative;
	line-height: 35px;
}

td.builtDefaultValue > input,
td .keyElements .keyContainer input,
td .keyValueElements .keyValueElement .keyValue input,
td .valueElements .valueElement input{
	display: inline-block;
	/* width: calc(100% - 2vw); */
}

td .lines .line{
    padding: 15px 0;
    border-bottom: 1px solid #DDD;
}
td .lines .line:last-of-type{
    border-bottom: none;
}

.sp-replacer{
	border-radius: 20px;
	border-color: transparent !important;
}
.sp-picker-container input{
	margin: 0;
}

#variablesPane .builtDefaultValue .keyValue {
	white-space: nowrap
}


/* .taskFieldset, .conditionsFieldset, */
fieldset {
	border: 1px solid #069;
	/* border-top-right-radius: 25px;
	border-bottom-left-radius: 25px; */
	border-radius: 3vmin;
	/* padding: 1vh 0.5vw; */
	padding: 1vh 1.5vw 2vh;
	margin: 2vh 1vmin;
	/* vertical-align: top; */

	text-align: left;
	
	/* width: calc(100% - 5vw - 2px); */
}

#view_administration fieldset{
	margin: 8vh 1vmin;
}

li > fieldset {
	padding-bottom: 1vh;
}

form > fieldset{
	display: inline-block;
	background-color: rgba(255,255,255,0.9);
}

#configurationPaneContainer form > fieldset{
	display: block;
}


ul.conditionsGroup > li.conditionsFieldsetLi:first-child > fieldset > legend > select.operatorSelect{
	display: none;
}

/* .taskFieldset legend, .conditionsFieldset legend, */
fieldset legend{
	position: relative;
	/* padding: 0.5% 1%; */
	padding: 0.5% 1% 0.5% 12px;
	margin-bottom: 1vh;
	white-space: normal;
	float: left;
	width: 98%;
	/* display: inline-block; */
	border-radius: 15px;
}

/* Conditions */
form > fieldset fieldset.conditionsFieldset legend
{
	background: none;
	min-height: 18px;
}
form > fieldset fieldset.conditionsFieldset legend select
{
	width: 80px;
	min-width: 80px;
}
form > fieldset fieldset.conditionsFieldset legend .elementaryButtons
{
	width: 60px;
	text-align: right;
}



#view_administration fieldset{
	box-shadow: 0px 1px 5px #9CD;
}

#view_administration .buttonsGroup {
	padding-top: 2vh;
}


fieldset.fieldset_task label{
	/* margin-top: 2em; */
	display: block;
}

fieldset.interfaceEngineStatusContainer .buttons{
	font-size: 25px;
	line-height: 25px;
}
fieldset.interfaceEngineStatusContainer .refreshStatus{
	margin-left: 15px;
}
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
	background: inherit;
}

/*Tables*/
table,
table.dataTable{
	border-spacing: 1px;
	padding: 3px;
	/* padding: 0 1vmin; */
	border-radius: 5px;
	text-align: center;
	margin: auto;
	width: calc(100% - 2vmin);
}

/* table > thead th{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
} */
/* table tr{
	border-radius: 1vmin;
} */

table tbody tr:not(.child){
	/* box-shadow: 0 0 4px #8AB, 
		inset 0 0 1px #CDF; */
	/* box-shadow: inset 0 0 1px #CDF; */
	position: relative;
}

/* table tr{
    background-color: #fdfeff;
} */

table td{
	/* padding: 0.5vmin 1vmin; */
	padding: 6px 12px;
	line-height: 1;    
	position: relative;
}

table tr td > *{
	vertical-align: middle;
}
table tr td .key{
	color: #069;
}

table tr td > span,
table tr td > div,
table tr td > label{
	padding-top: 10px;
	padding-bottom: 10px;
}


table.dashboard-configuration td{
	max-width: 50vw;
}


table.responsive .buttons{
	min-width: 100px;
	font-size: 25px;
	line-height: 25px;
}
table.responsive{    
	/* border-spacing: 0 1px; */
	border-spacing: 1px;
	padding: 3px;
}
table.responsive td{
	position: relative;
}

table.responsive td.buttons{
	min-height: 35px;
	/* padding-right: 28px; */
}
	
table.responsive .keyValue:not(:last-child) {
	margin-bottom: 6px;
}

.closeView{
	position: absolute;
	top: 15px;
	right: 20px;
	margin: 0 !important;
	padding: 1vmin !important;    
	z-index: 65;
}


.smallButton{
	cursor: pointer;
	border-radius: 20px;
	margin: 0.3vmin;
	
	display: inline-block;
	/* margin: 0 0.3vmin; */
	padding: 0.4vmin;
	
    transition: box-shadow 300ms linear, background-color 300ms linear, color 300ms linear;
}

.bottomPaneButtons{
	padding-bottom: 1vmin;
}

.elementaryButtons{
	position: absolute;
	font-size: 20px;
	line-height: 20px;
	top: 0;
	right: 0;
	/* width: 28px; 
	text-align: center;
	*/
	padding: 0;
	width: 60px;
	text-align: right;
	z-index: 15;
}
.elementaryButton{
	margin-left: 0 !important;
	margin-right: 0 !important;
	cursor: pointer;
	transition: color .3s;
	color: rgb(104, 118, 134);
	vertical-align: middle;
	text-shadow: 0px 0px 2px #FFF, 
		0px 0px 3px #FFF, 
		0px 0px 4px #FFF, 
		0px 0px 5px #FFF, 
		0px 0px 6px #FFF, 
		0px 0px 7px #FFF, 
		0px 0px 8px #FFF;
}
.elementaryButton.no-shadow{
	text-shadow: none;
}
.elementaryButton:hover{
	color: #000;
}
.elementaryButton.deleteButton{
	cursor: pointer;
	font-size: 24px;
}
.deleteButton:hover{
	color: rgb(213, 63, 63)
}
.elementaryButton.moveButton{
	cursor: move;
	font-size: 20px;
}

/*Tabs*/
.ui-widget-content.ui-tabs{
	border: none;
	padding: 0;
}
.ui-widget-content.ui-tabs > ul{
	padding: 0;
}
.ui-widget-content.ui-tabs > .ui-tabs-panel{
	border-width: 1px;
	border-style: solid;
	border-image: linear-gradient(to top, #069, transparent) 1 1;
}
.ui-widget-header.ui-tabs-nav{
	background: transparent;
	border-bottom: none;
}
.ui-state-active a, 
.ui-state-active a:link, 
.ui-state-active a:visited {
	color: #069;
}
.ui-widget-header.ui-tabs-nav .ui-state-active {
	background: transparent;
	border-width: 1px;
	border-style: solid;
	border-image: linear-gradient(to bottom, #069, transparent) 1 1;
}

/* .ui-widget-content.ui-tabs .ui-tabs-nav li {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
} */



.ui-dialog > .ui-dialog-content{
	background: none !important;
}

.ui-widget-content{
	background-image: none !important;
}
.ui-datepicker .ui-datepicker-header {
    padding: .2em 0 0;
}

.ui-button-text-only .ui-button-text{
	padding: 0;
}
.ui-datepicker-buttonpane.ui-widget-content button,
.ui-dialog .ui-dialog-buttonpane button{
	border: none;
}
.ui-dialog .ui-dialog-buttonpane button .ui-button-text{
	font-family: 'Xolonium';
}

.ui-datepicker-buttonpane.ui-widget-content button,
.ui-dialog .ui-dialog-buttonpane button,
a.dt-button:not(.disabled),
.button{
	background-image: none;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	margin: 1vmin 1vmin 1vmin;
	padding: 8px 16px;
	/* border-radius: 1vmin; */
	border-radius: 50px;
	font-size: 16px;
    transition: box-shadow 300ms linear, background-color 300ms linear;
}





/*Buttons hack for datatables*/
a.dt-button:not(.disabled),
a.dt-button:active:hover:not(.disabled):not(.disabled),
a.dt-button.active:hover:not(.disabled):not(.disabled),
a.dt-button.active:not(.disabled):not(.disabled),
a.dt-button.active:hover:not(.disabled),
a.dt-button.active:not(.disabled),
a.dt-button:active:not(.disabled):not(.disabled),
a.dt-button:active:not(.disabled),
a.dt-button:hover:not(.disabled){
	background-image: none;
	border: none;
	text-shadow: none;
}
a.dt-button:not(.disabled){
	margin: 0.3vmin 0.5vmin 0.3vmin;
}


li>.button{
	margin: 1vmin 0;
}
.view.list li>.liButtons{
	font-size: 20px;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
    margin: 1vmin 0 1vmin -2vmin;
    padding: 0.3vmin 3vmin 0.3vmin 5vmin;
	border-radius: 1vmin;
}

.button.deleteButton{
	background-color: #900;
}
.button.deleteButton:hover{
	background-color: #C00;
}
.button.deleteButton:active{
	background-color: #700;
}

.button.addButton{
	background-color: #093;
}
.button.addButton:hover{
	background-color: #0B3;
}
.button.addButton:active{
	background-color: #073;
}
.fa::before{
	padding: 0 3px;
}
.button .fa{
	margin: 0 0.5vw;
}

option .left{
	float: left;
}
option .right{
	float: right;
}


.smallButton.disabled,
.smallButton.disabled:hover,
.smallButton.disabled:active,
.button.disabled,
.button.disabled:hover,
.button.disabled:active{
	background: none;
	text-shadow: none;
	cursor: default;
}

.view.list .listContainer ul li .button{
	min-width: 30vw;
	position: relative;
	border-radius: 10px;
}

.view.grid .listContainer ul li{
	display: inline-block; 
	width: 160px;
	height: 160px;
	position: relative;
	margin: 3px;
	vertical-align: middle;
}
.view.grid .listContainer ul li.categoryItem{
	display: inline-block; 
	width: auto;
	height: auto;
	min-width: 160px;
	min-height: 160px;

	position: relative;
	margin: 25px;
}

.view.grid .listContainer ul li .button{
	display: grid; 
	width: 150px;
	height: 150px;
	border-radius: 5px;
	margin: 0;
	padding: 5px;
	/* position: relative; */
}

.view.grid .liButtons .smallButton.disabled{
	display: none;
}

fieldset ul li {
	position: relative;
	padding: 0.3vh 0.3vw;
	text-align: center;
}
/* fieldset ul li:not(:last-child):after{ */
	/* content:""; */
    /* display: block; */
	/* margin: 8px auto 0; */
	/* padding: 0; */
    /* height: 1px; */
    /* vertical-align: bottom; */
    /* width: 75%; */
    /* border-top: 1px solid #E0EAEF; */
/* } */
fieldset ul li:not(:last-child){
    border-bottom: 1px solid #E0EAEF;
}



.SumoSelect > .CaptionCont{
	border-radius: 50px;
}

.SumoSelect > .CaptionCont,
.SumoSelect > .CaptionCont > span,
.SumoSelect > .CaptionCont > label{
  cursor: pointer;
}

table.first-column-key td:first-child{
	/* border-top-left-radius: 1vmin; */
	/* border-bottom-left-radius: 1vmin; */

	text-align: right;
}
/* table td:last-child{
	border-top-right-radius: 1vmin;
	border-bottom-right-radius: 1vmin;
} */

#statusTable_length,
#statusTable_filter{
	display: inline-block;
	float: none;
	vertical-align: middle;
}
#statusTable_length{
	margin: 1vmin 0 1vmin 0;
	text-align: left;
}
#statusTable_length select {
	margin: 0 5px;
}
#statusTable_length select,
.autoRefreshContainer select{
	min-width: 20px;
	max-width: 80px;
}
#statusTable_filter{
	min-width: calc(100% - 6vw);
	max-width: calc(100% - 6vw);
	border-bottom: 5px dotted #BBDFF6;
	margin-top: 5px;
	margin-right: 0; 
	margin-left: 3vw;
	margin-bottom: 10px !important;
}
#statusTable_filter > div{
	margin-bottom: 10px;
	text-align: center;
}
#statusTable_filter .mainFilters .filter{
	text-align: center;
}
#statusTable_filter .dateFilter{
	text-align: right;
	margin-top: 1vmin;
}

.graphesGrid{
	display: flex;
	flex-wrap: wrap;
	/* padding: 10px; */
}

.graphesGridItem{
	flex-grow: 1;
	flex-basis: 300px;

	position: relative;

	margin: 10px;

	padding: 15px;
	border-radius: 25px;

	transition: background-color .3s ease-in;
}

.graphesGridItem .refresh{
	position: absolute;
    right: 15px;
}

.graphContainer{
	vertical-align: top;
	/*
	margin: 1vmax;
	padding: 1vmax;
	min-width: 40%;

	background-color: #DDF6FF;
	box-shadow: 0 0 1vmin #DEF, 0 0 0.2vmin #6AD inset;
	border-radius: 5px;
	*/

	display: inline-block;

}

.graphContainer .configurationContainer{
	display: none;
}

.graphContainer .canvasContainer{
	min-width: 30vmax;
	/* min-height: 300px; */
	position: relative;
	text-align: center;
	margin: auto;
}
.graphContainer.triggersPieChartContainer .canvasContainer{
	min-width: 80px;
	/* min-height: 80px; */
	/* min-height: 300px; */
}

.graphContainer.triggersPieChartContainer .canvasContainer canvas{
	min-height: 80px;
}
.graphContainer .canvasContainer canvas{
	margin: auto;
	min-height: 300px;
}
/* 
.graphContainer > .configurationContainer > table.configuration tr.filter{
	float: right;
} */
.graphContainer > .configurationContainer > table.configuration tr.filter td{
	white-space: nowrap;
}

.graphTitleContainer{
	display: inline-block;
	margin-bottom: 10px;
}

.graphTitle{
	color: #069;
	font-weight: bold;
	margin: 0 10px 0;
	vertical-align: middle;
}

/* table td.name,
table td.type,
table td.builtDefaultValue{
	border-spacing: 0 1vmin;
} */
table td.commandName{
	text-align: left;
}


.status.timedOut{
	color: #FFA500 !important;
}

.status.noAnswer{
	color: #F00 !important;
}

.status.running{
	color: #0F0 !important;
}

.hidden{
	display: none !important;
}
.hidden-forced{
	display: none !important;
}

.ui-widget-header {
	border: 0;
	border-bottom: 1px solid #ddd;
}

.ui-dialog{
	/* animation: glowingDialog 4s linear infinite; */
	padding: 0;
	/* background: url('../images/background/dialog.png'); */

	max-width: 80vw;

	transition: box-shadow 1s;

	opacity: 0.95;
}
.ui-dialog.highlight {
	box-shadow: 0 0 150px #069;
}

.no-animation{
	animation: none !important;
}



 
.ui-dialog-titlebar-close{
	background: none !important;
	border: none !important;
	
	right: 10px !important;
	margin-top: -12px !important;

	width: 24px !important;
	height: 24px !important;
}

.ui-icon-closethick{
	background: none !important;
	text-indent: 0;
	overflow: visible;
	margin: 0 !important;
	width: 24px !important;
	height: 24px !important;
	top: 0 !important;
	left: 0 !important;
}
.ui-icon-closethick::after{
	content: '\f00d';
	/* content: '\f057';
	content: '\f410'; */
	font-family: 'FontAwesome' !important;
	font-size: 24px;
	vertical-align: top;
}


.ui-dialog-titlebar{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}


.ui-dialog .ui-dialog-buttonpane{    
	padding: 10px 5px;
	background: none;
	/* background: url('../images/background/dialog.png'); */
	border-top: 1px solid #dcdcdc;
	overflow-x: auto;

	min-height: 62px;
}
.ui-dialog.download-upload-dialog .ui-dialog-buttonpane{ 
	height: auto;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{
	width: 100%;
	word-break: break-all;
	word-wrap: break-word;
}

.ui-dialog .ui-dialog-title{
	font-family: xoxo;
}

.ui-slider-handle{
	cursor: move !important;
}

@keyframes glowingDialog {
  0% { border-color: #069; box-shadow: 0 0 3vmin #069; }
  50% { border-color: #DEF; box-shadow: 0 0 5vmin #FFF; }
  100% { border-color: #069; box-shadow: 0 0 3vmin #069; }
}


/* loader*/
.loader{
	color: #069;
	z-index: 100;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .loader{
	font-size: 60px;
	height: 60px;
	width: 60px;
}

#view_myUserTasks > .loader,
#view_myTriggers > .loader{
	position: absolute !important;
	left: 4px;
	top: 6px;
}
#overviewPaneContent > .loader{
	left: 4px;
	top: 6px;
}
#triggerPaneContent > .loader{
	position: absolute !important;
	left: 4px;
	top: 6px;    
    margin-left: calc(76px);
}
#triggerPaneContent > .loader{
	position: absolute !important;
	left: 4px;
	top: 6px;    
    margin-left: calc(76px);
}

.user-task .loader {
	background: rgba(255,255,255,0.7);
	border-radius: 100%;
	width: 40px;
	height: 40px;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
	line-height: 40px;
	margin-top: 3px;
}

.user-task .user-task-element > .notification {    
	width: auto;
}

.userTasksListContainer .tasks-filters{
	display: inline-block;
	margin-bottom: 25px;
	min-width: 80%;
	max-width: 80%;
}
.userTasksListContainer .SumoSelect.open > .optWrapper{
	width: 100% !important;
}
.userTasksListContainer .SumoSelect.open > .optWrapper ul li label{
	word-break: break-all; 
	white-space: normal;
}

.user-task select{
	width: auto;
	max-width: 100%;
}


.user-task-draganddroplistfromarrayloop,
.user-task-draganddroplistfromloop {
	min-width: 530px;
}

.user-task-draganddroplistfromarrayloop .line-text,
.user-task-draganddroplistfromloop .line-text {
	padding: 0 5px;
}

.user-task-draganddroplistfromarrayloop .sourceOl, 
.user-task-draganddroplistfromloop .sourceOl {
	float: left;
	vertical-align: top;
	border-radius: 4px;
	max-height: 500px;
	overflow: auto;

	width: 260px;
	margin-top: 15px;
	margin-left: 5px;
	margin-right: 5px;
}

.user-task-draganddroplistfromarrayloop .destinationOl,
.user-task-draganddroplistfromloop .destinationOl {
	float: right;
	vertical-align: top;
	border-radius: 4px;
	min-height: 80px;

	background-color: rgba(30, 95, 148, 0.09);
	width: 240px;
	margin-top: 15px;
	margin-left: 5px;
	margin-right: 5px;
}

.user-task-draganddroplistfromarrayloop .sourceOl li,
.user-task-draganddroplistfromloop .sourceOl li {
	white-space: normal !important;
	border: 1px solid #888;
	min-height: 20px;
	border-radius: 4px;
	margin: 2px;
	padding: 3px 2px;
	width: 230px;
	cursor: move;
	position: relative;
}

.user-task-draganddroplistfromarrayloop .destinationOl li,
.user-task-draganddroplistfromloop .destinationOl li {
	white-space: normal !important;
	border: 1px solid #888;
	border-radius: 4px;
	margin: 2px;
	padding: 3px 2px;
	width: 230px !important;
	cursor: grab;
	position: relative;
}

.user-task-draganddroplistfromarrayloop .deleteButton,
.user-task-draganddroplistfromloop .deleteButton {
	position: absolute;
	top: 2px;
	right: 1px;

	font-size: 20px;
}



.usersTasksUl{
	display: flex;
	flex-wrap: wrap;

	margin: 0 10px;
}
.usersTasksUl .user-task-container-li{
	display: inline-block; 
	width: auto;
	height: auto;
	position: relative;
	margin: 25px 10px;
	padding: 15px;
	border-radius: 25px;
	transition: background-color .3s ease-in;

	flex-grow: 1;
	flex-basis: 100px;
}

	
ul.user-task-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

ul.user-task-container > li{
	/* display: flex; */
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
}


.usersTasksUl .user-task{
	padding: 0px;
	margin: 8px;
	position: relative;
	
	/* for clarity and to let the task icon being displayed at minimum width */
	min-width: 210px;
	max-width: 600px;


	vertical-align: top;

	display: inline-block;
	background-color: #17A;
	
	border-radius: 5px;

	/* text-shadow: #6CF 1px 1px 3px; */
	background: #006699;
	background: -moz-linear-gradient(-45deg, #006699 1%, #0879AA 50%, #006699 99%);
	background: -webkit-linear-gradient(-45deg, #006699 1%, #0879AA 50%,#006699 99%);
	background: linear-gradient(135deg, #006699 1%, #0879AA 50%,#006699 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#006699',GradientType=1 );
	opacity: 0.9;
	transition: opacity 0.3s ease-in, box-shadow 0.3s ease-in, text-shadow 0.3s, color 0.3s;
	color: #000;
}



.usersTasksUl .user-task:hover{
	opacity: 1;
}

.usersTasksUl .user-task .user-task-form {
	position: relative;
	display: inline-block;
	width: 100%;
}

.user-task-container-li > .titleBar {
    position: absolute;
    display: flex;
    top: -18px;
	left: 18px;
	width: 100%;
}
.user-task-container-li > .titleBar > .name {
	transition: background-color .3s ease-in;
	
	overflow-y: auto;
	
    width: auto;
	max-width: calc(100% - 36px);

    height: 22px;
    line-height: 22px;
	
    border-radius: 25px;
	box-shadow: 0 0 5px #cde;
	
	min-width: 65px;
	
    padding: 5px 15px;
	margin: 0;
}

.user-task .date {
	font-size: 16px;
    text-align: center;
    width: 100%;
    overflow: hidden;
	
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 5px 0;
    color: #069;
	transition: background-color 0.5s, text-shadow 0.5s, color 0.5s;
	
	
	/* background-color: rgba(255,255,255,0.8); */
	background: rgba(242,246,248,1);
	background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1)));
	background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0 );


}

.user-task .icon {
	position: absolute;
	color: #069;
	right: 5px;
	top: 0;
	font-size: 28px;
	line-height: 30px;
	z-index: 2;
}


.user-task .buttons {
	min-height: 50px;
	line-height: 50px;
}

.user-task .informationDialogButton{
	position: absolute;
	bottom: 5px;
	right: 5px;
	text-shadow: 0px 0px 3px #024;
}

.user-task .user-task-element{
	display: block;
	margin: 8px 0;
	position: relative;    
	width: 100%;
	max-width: calc(600px - 3vw - 22px);
}
.user-task .user-task-element:first-child{
	margin-top: 0;
}
.user-task .user-task-element:last-child{
	margin-bottom: 0;
}
.user-task .element-title{
	display: block;
	color: #069;
}

.user-task .user-task-element > span,
.user-task .user-task-element > div{
	width: 100%;
}

.user-task-form > fieldset{
	margin: 10px 10px 2px;
}

.user-task iframe{
	border: 1px solid #069;
}

.user-task-autopreview,
.user-task-video{
	text-align: center;
}
.user-task-autopreview > video,
.user-task-video > video{
	width: 350px;
	background-color: #000;
	border-radius: 5px;
}
.user-task-fileupload,
.user-task-filedownload{
	text-align: center;
}


.user-task .ui-sortable li{
	white-space: nowrap;
	width: calc(100% - 0.6vw);
}
.user-task .ui-sortable li .moveButton{
	float: right;
}
.user-task li .line-text{
	vertical-align: middle; 
	display: inline-block; 
	width: calc(100% - 30px); 
	overflow: hidden;
	word-break: break-word;
}


/* .user-task-filedownload a{
	padding: 0 60px; 
} */

.user-task-fileupload{
	background-color: #FFF;
	border-radius: 3vmin;
	border: 1px solid #069;
	/* box-shadow: inset 0px 0px 3px #069; */
	padding: 10px 50px;
	width: calc(100% - 100px) !important;
	transition: box-shadow 0.3s, padding 0.3s;
}
.user-task-fileupload .uploadContainer .fileDescription{
	white-space: normal;
	word-break: break-all;
	word-wrap: anywhere;
}

.download-icon,
.upload-drop-zone-icon{
	font-size: 48px;
	width: 48px !important;
	position: absolute;
	left: 100%;
	margin-left: -48px;
	opacity: 0.2;
	color: #069;
	transition: opacity 0.3s, left 0.3s, margin-left 0.3s;
}
.upload-drop-zone-icon{
	top: 50%;
	margin-left: -60px;
	margin-top: -24px;
}

.user-task-fileupload.hover .upload-file-button{
	opacity: 1;
	transition: opacity 0.3s;
}

.user-task-fileupload.in {
	box-shadow: inset 0px 0px 15px #069;
	padding: 20px 50px;
}

.user-task-fileupload.hover{
	box-shadow: inset 0px 0px 35px #069;
}

.user-task-fileupload.in .upload-file-button{
	opacity: 0;
}
.user-task-fileupload.hover .upload-drop-zone-icon,
.user-task-fileupload.in .upload-drop-zone-icon{
	opacity: 1;
	left: 50%;
	margin-left: -20px;
}


.user-task-autopreview > iframe{
	min-width: 400px;
	min-height: 225px;
	width: 100%;
	height:100%;
}


.user-task-video .smpte{
	padding: 3px 5px;
	margin: 0 5px;
	font-family: 'Consolas', 'Courier New', Courier, monospace;
}

.user-task-video .smpte{
	padding: 3px 5px;
	margin: 0 5px;
	font-family: 'Consolas', 'Courier New', Courier, monospace;
}

.user-task-multipleselectfromloop ul, 
.user-task-multipleselectfromarrayloop ul {
	margin-top: 15px;
}

.user-task-multipleselectfromloop option, 
.user-task-multipleselectfromarrayloop option {
	width: 50px;
}


.user-task-reorderfromloop ul, 
.user-task-reorderfromarrayloop ul {
	margin-top: 10px;
}

.usersTasksUl .user-task .no-preview-available{
	padding: 5px 0;
	position: relative;
	border-radius: 20px;
	border: 1px solid #FFF;
	background-color: rgba(255,255,255,0.8);
}
.usersTasksUl .user-task .no-preview-available .file-icon{
	font-size: 100px;
}
.usersTasksUl .user-task .no-preview-available .file-extension{
	position: absolute;
	font-size: 20px;
	color: #069;
	width: 100px;
	left: 50%;
	margin-left: -50px;
	margin-top: -45px;
}
.usersTasksUl .user-task .no-preview-available .message{
	color: #89A;
    font-style: italic;
    margin: 5px auto 0;
}


.view > .modesContainer{
	position: absolute;
	top: 5px;
	right: 5px;
}

.view.list .listEntry .backgroundIcon{
	position: absolute;
	left: 5px;
	/* color: #18A; */
	top: 50%;
	font-size: 30px;
	margin-top: -15px;
	/* text-shadow: #047 1px 1px; */
	transition: text-shadow 0.3s, color 0.3s;
}

.view.list .listEntry .name{
	vertical-align: middle;
	position: relative;
	
	background: rgba(0,0,0,0.3);
	padding: 2px 8px;
	border-radius: 50px;

	transition: text-shadow 0.3s, color 0.3s;
}

.view.list .listEntry .icon{
	position: absolute;
	right: 2px;
	font-size: 14px;
	top: 50%;
	margin-top: -9px;
	background-color: rgba(0,0,0,0.2);
	padding: 3px 0;
	box-shadow: rgba(0,0,0,0.3) -1px -1px;
	height: 14px;
	width: 20px;
	transition: text-shadow 0.3s, box-shadow 0.3s, background-color 0.3s, color 0.3s;
}

.view.grid .item{
	transition: transform 0.2s ease-in;
}

.view.grid .mini{
	transform: scale(0.85);
}


.view.grid .listEntry .liButtons{
	position: absolute;
	z-index: 3;
	top: 2px;
	left: 0;
	width: 160px;
}

.view.grid .listEntry .liButtons > *{    
	font-size: 18px;
    box-shadow: none;
    margin: 1px;
    text-align: center;
    width: 18px;
	height: 18px;
	border-radius: 5px;
	background: transparent;	
	color: #000;
	opacity: 0.2;
	transition: opacity .1s ease-in, text-shadow .1s ease-in;
}
.view.grid .listEntry .liButtons > *:hover {	
	opacity: 0.5;	
	text-shadow: rgba(255,255,255,0.5) 1px 1px
}
.view.grid .listEntry .liButtons > *:focus,
.view.grid .listEntry .liButtons > *:active {	
	opacity: 0.7;
	text-shadow: #FFF 1px 1px 5px;
}

.view.grid .listEntry .liButtons > .fa::before {
	padding: 0;
}

.view.grid .listEntry .icon{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top: 30px;
	margin: 0;    
	background-color: rgba(0,0,0,0.3);
    padding: 3px 0 5px;
	box-shadow: rgba(0,0,0,0.5) -1px -1px;
}

.item.oneClick .icon{
	background-color: rgba(0,0,0,0) !important;
	box-shadow: none !important;
	text-shadow: none !important;
}


.view.grid .listEntry .backgroundIcon{
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 1;
	font-size: 98px;
	margin-top: -49px;
	margin-left: -80px;
	z-index: 1;
	width: 160px;
}

.view.grid .listEntry .name{
	position: absolute;
	left: 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
	bottom: 0;
	z-index: 2;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding: 5px 0;

	transition: background-color 0.5s, text-shadow 0.5s, color 0.5s;
}

.view.grid .listEntry > .button{
    position: absolute;
	text-shadow: rgba(50,50,50,0.7) 1px 1px 3px;

	opacity: 0.9;
	transition: opacity 0.3s ease-in, box-shadow 0.3s ease-in, background-color 0.3s ease-in,background-image 0.3s ease-in, text-shadow 0.3s, color 0.3s;
}

.color-button{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 5px;
	border-radius: 50px;
	cursor: pointer;
	opacity:  0.8;
	transition: opacity 0.8s, border 0.8s;

	border: 10px solid transparent;
}
.color-button:hover{
	border: 10px solid rgba(0,0,0,0.4);
	opacity: 0.9;
}
.color-button.selected{
	opacity: 1;
	border: 10px solid rgba(0,0,0,0.8);
}

.color-button.color-blue{
	background-color: #069;
}
.color-button.color-green{
	background-color: #073;
}
.color-button.color-purple{
	background-color: #cb60b3;
}
.color-button.color-red{
	background-color: #911;
}
.color-button.color-yellow{
	background-color: #e1ca26;
}

.view.grid .listEntry > .button:hover{
	opacity: 1;
}


.category > .listEntry > .button,
.category.color-blue > .listEntry > .button{
	background: #006699; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #006699 1%, #0879AA 50%, #006699 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #006699 1%, #0879AA 50%,#006699 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #006699 1%, #0879AA 50%,#006699 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#006699',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	color: rgb(93, 175, 212)
}
.view .category > .listEntry > .button:hover,
.view .category.color-blue > .listEntry > .button:hover {
	text-shadow: #0DF 0px 0px 15px;
	color: #E0E8EF;
}
.view.grid .category > .listEntry > .button:hover .name,
.view.grid .category.color-blue > .listEntry:hover .name{
	color: #1180AA;
	text-shadow: 0 0 5px #08A;
}

.category.color-green > .listEntry > .button{
	background: #03ac1b; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #03ac1b 0%, #23cc2b 49%, #03ac1b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #03ac1b 0%,#23cc2b 49%,#03ac1b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #03ac1b 0%,#23cc2b 49%,#03ac1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03ac1b', endColorstr='#03ac1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	color: rgb(200, 255, 200);
}
.view .category.color-green > .listEntry > .button:hover {
    text-shadow: rgb(51, 255, 0) 0px 0px 15px;
	color: rgb(231, 255, 232);
}
.view.grid .category.color-green > .listEntry:hover .name{
	color: #03ac1b;
	text-shadow: 0 0 5px rgb(0, 170, 0);
}

.category.color-purple > .listEntry > .button{
	background: #cb60b3; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		
	color: rgb(237, 180, 255);
}
.view .category.color-purple > .listEntry > .button:hover {
    text-shadow: rgb(255, 0, 255) 0px 0px 15px;
}
.view.grid .category.color-purple > .listEntry:hover .name{
	color: #cb60b3;
	text-shadow: 0 0 5px rgb(145, 0, 170);
}

.category.color-yellow > .listEntry > .button{
	background: #e1ca26; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #e1ca26 0%, #ded602 53%, #e1ca26 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #e1ca26 0%,#ded602 53%,#e1ca26 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #e1ca26 0%,#ded602 53%,#e1ca26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ca26', endColorstr='#e1ca26',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	color: rgb(255,255,100);
	/* text-shadow: rgb(30,20,0) 0px 0px 5px; */
}
.view .category.color-yellow > .listEntry > .button:hover {
	text-shadow: rgb(255,255,205) 0px 0px 15px;
	color: rgb(255,255,230);
}
.view.grid .category.color-yellow > .listEntry:hover .name{
	color: #e1ca26;
	text-shadow: 0 0 5px rgb(170, 167, 0);
}



.category.color-red > .listEntry > .button{
	background: #cc0000; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #cc0000 0%, #ea6960 51%, #cc0000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #cc0000 0%,#ea6960 51%,#cc0000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #cc0000 0%,#ea6960 51%,#cc0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc0000', endColorstr='#cc0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	color: rgb(255, 175, 175);
}
.view .category.color-red > .listEntry > .button:hover {
	text-shadow: rgb(255, 200, 200) 0px 0px 15px;
	color: rgb(255, 255, 250);
}
.view.grid .category.color-red > .listEntry:hover .name{
	color: #ea6960;
	text-shadow: 0 0 5px rgb(170, 0, 0);
}



/*Disabled by license*/
.category > .listEntry.disabled > .button{
	background: #b9b9b9; 
	color: rgb(0, 0, 0);
	text-shadow: rgb(131, 131, 131) 0px 0px 15px;
	cursor: default;
}
.view .category > .listEntry.disabled > .button:hover {
	text-shadow: rgb(177, 177, 177) 0px 0px 15px;
	color: rgb(66, 66, 66);
}
.view.grid .category > .listEntry.disabled .name{
	text-shadow: rgb(202, 202, 202) 0px 0px 15px;
}
.view.grid .category > .listEntry.disabled:hover .name{
	color: #959595;
	text-shadow: 0 0 5px rgb(0, 0, 0);
}

table .listEntry.disabled {
	background: #c0c5c9; 
	color: rgb(0, 0, 0);
	cursor: default;
}



.fa.none::before{
	content: "   "
}




/* .paths-dialog{
} */
.paths-dialog .folder-container,
.paths-dialog .file-container{
	margin: 4px 0;
}
.paths-dialog .folder-container{
	text-align: left;
}
.paths-dialog .folder-content{
	padding-left: 20px;
}
.paths-dialog .path-choice{
	padding: 3px 5px;
	border-radius: 15px;
	transition: color 0.1s, background-color 0.1s;
}



.icons-dialog .icons .icon{
	box-shadow: none;
	background-color: transparent;
	transition: color 0.1s, box-shadow 0.1s, background-color 0.1s;
}
.icons-dialog .icons .icon:hover{
	box-shadow: 0 0 3vmin #8AB, inset 0 0 0.1vmin #ABC;
	color: #F0F2F4;
	background-color: #17A;
}
.icons-dialog .icons .icon:focus,
.icons-dialog .icons .icon:active{
	background-color: #069;
	color: #FFF;
	box-shadow: 0 0 5vmin #069, inset 0 0 0.5vmin #079;
}

.icons-dialog .icons .icon.selected{
	background-color: #0FF;
}
.icons-dialog .icons .icon.selected:hover{
	background-color: #0FF;
	color: #000;
}


.ui-dialog-content{
	text-align: center;
}

.ui-dialog-content table{
	margin: auto;
	border-spacing: 1px 1px;
	/* padding: 0 1vmin; */
	padding: 1vmin;
	border-radius: 1vmin;
	text-align: center;
	width: 90%;
}
.ui-dialog-content table tr{
	border-radius: 1vmin;
}


.currentWorkerTasksDialog.ui-dialog-content table td.value{
	min-width: 70px;
}

.direct-variables-table td{
	white-space: pre-wrap;
}
.direct-variables-list li{
	white-space: pre-wrap;
	padding: 5px 10px 15px;
}
.direct-variables-list li .description{
	text-align: justify;
}
.direct-variables-list li .examples-container{
	margin-top: 15px;
}
.direct-variables-list li .examples-container .title{
	font-weight: bold;
	text-decoration: underline;
}
.direct-variables-list li .examples-container .line {
	margin-top: 15px;
}

.ui-dialog-content table td:first-child{
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.ui-dialog-content table td:last-child{
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}
/* table:not(#statusTable):not(.configuration):not(.configurationContainer) td label,
.ui-dialog-content table td label{
	width: 90%;
	height: 100%;
	display: inline-block;
} */

.ui-slider-access .ui-button{
	height: 1.2em;
	vertical-align: middle;
}
.ui-timepicker-div dt:first-child{
	display:none;
}
.ui-timepicker-div dl dd:nth-child(2){
	margin: 5px auto 10px;
	width: 80%;
}
.ui-timepicker-div .ui-slider{
	vertical-align: middle;
}

.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }
.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label { border:none }


div.dt-buttons{
	float: none;
}


/* .ui-widget > div{
	
} */

/* .ui-widget{
	text-align: center;
} */
.ui-widget input,
.ui-widget textarea,
.ui-widget select {
	margin-left: 1%;
	margin-right: 1%;
	padding-left: 3%;
	padding-right: 3%;
	/* padding-left: 1vmin;
	padding-right: 1vmin; */
	width: 92%;
}
.ui-widget table{
	margin: 10px auto;
	width: 92%;
}
.ui-widget textarea{
	padding-top: 5px;
	height: 50px;
}

.ui-widget .priorityContainer .title{
	vertical-align: middle;
	margin-left: 1%;
	margin-right: 1%;
	padding-left: 1%;
	padding-right: 1%;
	width: 16%;
}
.ui-widget .priorityContainer .prioritySlider{
	vertical-align: middle;
	display: inline-block;
	margin-left: 1%;
	margin-right: 1%;
	padding-left: 1%;
	padding-right: 1%;
	width: 46%;
}
.ui-widget .priorityContainer input#triggerPriority{
	vertical-align: middle;
	margin-left: 1%;
	margin-right: 1%;
	padding-left: 1%;
	padding-right: 1%;
	width: 16%;
	min-width: 50px;
}

.jqCron-container{
	margin: 5px 2px;
	padding: 5px 0;
    display: inline-block;
	line-height: 30px;
	/* word-break: keep-all; */
}
.jqcron-input{
	display: none;
}


@media (max-width : 800px){	

	.graphContainer .canvasContainer canvas{
		min-height: 150px;
	}

	input.hasDatepicker{
		min-width: auto !important;
		width: calc(100% - 2vw - 40px) !important;
		padding-right: 40px;
	}
	.jqCron-selector-list {
		z-index: 1;
		position: fixed;
		top: 1em;
		left: 1em;
		max-height: calc(100% - 2em);
		max-width: calc(100% - 2em);
		overflow-x: hidden;
		overflow-y: auto;
	}

	form select,
	table.connectionConfiguration input[type=text],
	table.blockConfiguration input[type=text],
	form input{
		min-width: 150px;
	}

	table.connectionConfiguration > tbody > tr > td:first-child,
	table.blockConfiguration > tbody > tr > td:first-child{
		display: none;
	}

	h1{
		font-size: 22px;
	}
	h2{
		font-size: 20px;
	}
	h3{
		font-size: 18px;
	}
	.responsive-container {
		width: 98%;
		margin: 0 1%;
	}

	.view.list li>.liButtons{
		display: block;
		text-align: center;
		margin: 0 2vmin;
		padding: 0.3vmin 3vmin 0.3vmin 3vmin;
	}

	.elementaryButtons{
		font-size: 24px;
		/* margin-top: -13px;
		top: 50%; */
		width: auto;
		right: 3px;
	}
	
	.ui-dialog .ui-dialog-content{
		padding: 5px;
	}

	/* table{
		width: 100%;
	} */
	table.responsive{
		border-spacing: 0 1vmin;
		padding: 0vmin 1vmin;
	}
	
	table.responsive td,
	table.responsive th,
	table.responsive td:first-child,
	table.responsive tr td:last-child{
		display: block;
		border-radius: 0 !important;
		text-align: left;
		border-bottom: 2px dotted #9CE;
		border-collapse: collapse;
		text-align: center;
	}
	
	#triggerPaneContent table.customizedVariablesTable td.builtDefaultValue,
	table.responsive tr td:last-child{
		border-bottom: none;
	}
	table.responsive th{
		font-style: italic;
		font-weight: normal;
		font-size: 16px;
		border-color: #069;
		padding: 5px 0 3px;
	}
	/* table.responsive th:last-child{
		border-bottom: 5px dotted #069;
	} */
	table.responsive th:before{
		font-family: FontAwesome;
		margin-right: 3px;
		content: "\f18e";
	}
	table.responsive tr td,
	table.responsive tr td.buttons{
		padding-left: 4%;
		padding-right: 4%;
		width: 92%;
		min-height: auto;
	}
	table.responsive tr td input,
	table.responsive tr td textarea{
		width: 96%;
		min-width: 96%;
		max-width: 96%;
		padding-left: 2%;
		padding-right: 2%;
		margin: 0.5vmin 0;
	}
	table.responsive tr td .button{
		width: 96%;
		min-width: 96%;
		max-width: 96%;
		padding-left: 2%;
		padding-right: 2%;
		margin: 0;
	}

	table.responsive.customizedVariablesTable tr td .button{
		width: auto;
		min-width: auto;
		max-width: auto;
		margin: 1vmin auto;
		padding: 8px 16px;
	}
	
	
	#logInFormContent .submitLine{
		margin: 2vh 0 1vh;
	}

	ul li:not(.item), 
	.columnsVisibility .dt-button, #statusTable_filter, 
	#statusTable_filter .filter, 
	.dataTables_wrapper .dataTables_filter.freeFilter{
		width: 96%;
		min-width: 96%;
		max-width: 96%;
		padding: 3px 2%;
		margin: 0px auto 0px;
		display: block;
	}


	.view.list .categoryItem:not(.listContainer) {
		padding-right: 0;
		padding-left: 0;

		margin-left: auto;
		margin-right: auto;
	}

	.ui-widget input, .ui-widget textarea,
	input, textarea, form input[type=text], form input[type=password] {
		width: calc(100% - 2.6vmin);
		min-width: calc(100% - 2.6vmin);
		max-width: calc(100% - 2.6vmin);
		margin: 0.3vmin;
		padding-left: 1vmin;
		padding-right: 1vmin;
	}
	.ui-widget select, .ui-widget table,
	select, form select, table select{
		width: calc(100% - 0.6vmin);
		min-width: calc(100% - 0.6vmin);
		max-width: calc(100% - 0.6vmin);
		margin: 0.3vmin;
	}
	
	#statusTable_wrapper input{
		width: 80%;
	}
	#statusTable_wrapper .freeFilter input{
		width: 100%;
		margin: 0;
	}
	#statusTable_wrapper .dateFilters .dateFilter{
		border: 1px solid #069;
		border-radius: 3vmin;
		padding: 1vw;
	}

	#configurationPane{
		margin: 0;
	}

	table.customizedVariablesTable td{
		display: block;
		border-bottom: 2px dotted #9CE;
		text-align: center;
	}
	/* table.customizedVariablesTable td input{
		width: auto;
		min-width: auto;
		max-width: auto;
	} */
	table.customizedVariablesTable td .keyValueElements > .keyValue input{
		width: calc(50% - 4%);
		min-width: calc(50% - 4%);
		max-width: calc(50% - 4%);
		/* margin: 0.3vmin; */
	}
	
	#triggerPaneContent table.customizedVariablesTable td.builtDefaultValue,
	table.customizedVariablesTable td:last-child{
		border-bottom: none;
	}


	#triggerConfigurationPaneContent{
		padding-left: 0;
		padding-right: 0;
	}

	.licenseTd, .exchangeKeyTd{
		max-width: none;
	}
	#logInFormFullLogo{
		width: 100%;
	}
	.autoRefreshContainer select,
	.paginationContainer select{
		width: auto;
		min-width: auto;
		max-width: auto;
	}

	/* #statusTable_filter .fa-calendar{
		display: none;
	} */
	
	#statusTable_filter .dateFilter{
		text-align: center;
	}
	#statusTable_filter .dateFilter .filter{
		text-align: right;
	}

	#configurationPane .gutter{
		display: none;
	}
	#configurationPaneContent{
		border-bottom: 2px dotted #9CE;
		padding-bottom: 10px;
	}
	#configurationPaneContent{
		/* width: 100% !important; */
		/* display: block; */
		height: auto !important;
	}
	
	li > .button,
	.inlineBlock{
		display: block;
		margin: 1vmin 0 0;
	}
	/* .view.grid .inlineBlock.liButtons{
		display: inline-block;
		margin-left: -160px;
	}
	.view.grid .item .button{
		display: inline-block;
		margin-left: -160px;
	} */
	#loginForm {
		top: 10vh;
		left: 1%;
		display: block;
		width: 96%;
		min-width: 96%;
		max-width: 96%;

		padding: 3px 1%;

		margin: 5px 0;

		display: block;
	}
	
	.usersTasksUl{
		width: 98%;
		margin: 0 auto;
	}
	.usersTasksUl .user-task-container-li{
		min-width: 100%;
		max-width: 100%;
		padding: 15px 0px;
		margin: 25px 0;
	}
	.usersTasksUl .user-task-container-li > .titleBar {
		width: calc(100% - 18px);
	}
	.usersTasksUl .user-task{
		margin: 10px 0;
	}

	.user-task-form > fieldset {
		width: 90%;
		margin: 2%;
		padding: 3%;
	}

	.user-task-video > video{
		width: 100%;
	}


	.user-task-autopreview > iframe{
		min-width: 100%;
		min-height: 100%;
		width: 100%;
		height: 100%;
	}

	#logInFormContent{
		width: 98%;
		padding: 1vh 0;

	}

	#statusTable_paginate{
		margin-top: 20px;
	}

	.SumoSelect > .optWrapper {
		width: 100% !important;
	}

	.mainButtons{    
		width: calc(100% - 3vw);
		margin: 10px 0 2px 3vw;
	}
	.mainButtons a.dt-button.filterCategories{
		margin-right: 3vw;
	}
	
	.columnsVisibility{
		background-color: #069;
	}
	.paneMenu .paneMenuButton {
		font-size: 35px;
	}

	.highlightedByHeader{
		transition: box-shadow 0.5s, background-color 0.5s;
	}
}