falcon-ui/app/css/styles/common.less - falcon - Git at Google

 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
  * with the License.  You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */

 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
 }
 html, body { height: 100%; }
 body { background-color: @body-bg; }

 .color-success{
   color: #3c763d !important;
 }
 .color-info{
   color: #31708f !important;
 }
 .color-warning{
   color: #8a6d3b !important;
 }
 .color-danger{
   color: #a94442 !important;
 }

 //--------------------VALIDATION---------------------//
 @shadow-valid: rgba(0, 255, 0, .6);
 @shadow-invalid: rgba(255, 0, 0, .6);
 @validation-error-color: #ff3333;
 @validation-success-color: #009900;

 .custom-success {
   color: @validation-success-color;
 }
 .custom-danger {
   color: @validation-error-color;
   font-style: normal;
   font-weight:normal;
 }
 /*.ng-valid {
   &:focus {
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-valid}");
     border-color: green;
   }
   &.nameAlreadyRegistered {
     border-color: red;
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
   }
 }*/
 input {
   &:focus {
     border-color: inherit;
   }
 }

 .ng-invalid.ng-dirty {
   border-color: lighten(red, 10%);
   &:focus.empty {
     border-color: gray;
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777");
   }
   &:focus {
     border-color: red;
     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
   }

   &.empty {
     border-color: red;
     //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
     &:focus {
       border-color: gray;
       .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777");

     }
   }
 }
 .showValidationStyle {
   .ng-invalid, .fakeInvalid {
     border-color: lighten(red, 10%);
     &.empty {
       &:focus {
         border-color: gray;
         .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777");
       }
     }
     &:focus {
       border-color: red;
       .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
     }
   }
   .fakeInvalid {
     border: 1px solid lighten(red, 10%);
     &:hover {
       border-color: red;
       .box-shadow(~"0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
     }
   }
   .fakeInvalidRadio {
     color: red;
   }
   #engineSection {
     input[type="radio"].ng-invalid, input[type="radio"].ng-invalid-required{
       border-width: 0;
       box-shadow: unset;
     }
     input[type="radio"]:focus {
       border-width: 0;
       box-shadow: unset!important;
     }
     input[type="radio"] {
       border-width: 0;
       box-shadow: unset!important;
       vertical-align: middle;
     }
   }
   .validationMessageGral {
     display: block;
     &.valid {
       display: none;
     }
   }
 }
 //----------------validationDirective messages ----------//
 .validationMessageGral {
   display: none;
   &.custom-danger { margin-top:3px; }
 }
 .nameValidationMessage {
   &.custom-danger { margin-top:0; }
 }
 .validationMessageParent {
   .nameValidationMessage {
     display: none;
     margin:0;
   }
   &.showNameMessage {
     .nameValidationMessage { display: block; }
   }
 }
 //------nameCheck ------------------//
 .nameInputDisplay {
   /*position: absolute;*/
   z-index:2;
 }
 //----------------mozilla outline hack-------------------//
 input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
   outline: none;
   outline-offset: 0;
 }
 //-------------------------------------------------------//
 .mainUIView {
   //padding: 10px 0 30px 0;
   /*padding-top: 10px;*/
   padding-bottom: 30px;
 }
 //-----------------------------------------//
 //----------------FILE UPLOAD---------------------//
 .btn-file {
   cursor: pointer;
   /*position: relative;
   overflow: hidden;*/
   // margin: 40px 0 40px 30px;
 }
 .btn-file input[type=file] {
   position: absolute;
   top: 0;
   /*right: 0;*/
   width: 32px;
   height: 32px;
   /*font-size: 100px;*/
   text-align: right;
   filter: alpha(opacity=0);
   opacity: 0;
   outline: none;
   background: white;
   cursor: inherit;
   display: block;
 }
 //-----------input crossbrowser overrides ------//
 input[type="text"]{
   color: black;
   padding:0;
 }
 input[type="password"]{
   color: black;
   padding:0;
 }
 .dateInput {
   //padding-right: 25px!important;
 }
 .dateInputIcon {
   position: absolute;
   background-color: white;
   z-index: 2;
   right: 5px;
   bottom:5px;
   /*top: 6px;*/
   line-height: 15px;
   font-size: 30px!important;
 }
 //-------------------------//
 .padding0 {
   padding: 0;
 }
 .dynamic-table-spacer {
   margin-bottom: 5px;
 }
 .buttonsWrapper {
   text-align: center;
 }
 //-----------------------//
 .logoutBar {
   position: absolute;
   bottom:5px;
   right:0;
   min-width:400px;
   .entypo {
     font-size: 3em;
   }
 }

 .pointer{
   cursor: pointer;
 }

 .timePicker {
   margin-top:-10px!important;
 }

 @summarySuccess: #009900;
 @summaryWarning: #E6DD00;
 @summaryDanger: #FF0000;

 .entitySummary {
   text-align: center;
   .whiteBox {
     background-color: white;
     border-radius: 3px;
     margin: 0 7px 0 0;
     padding: 5px 0;
     &:first-child {
       margin: 0 5px;
     }
   }
   h3, h5 {
     margin:0;
   }
   h3 { font-size:35px; }
   h5 { font-size:9px; font-weight: bold; }
   .notBold {
     font-weight: normal;
   }
 }

 /*@keyframes blink-success {
   0% { color: @summarySuccess; }
   100% { color: black; }
 }
 @-webkit-keyframes blink-success {
   0% { color: @summarySuccess; }
   100% { color: black; }
 }
 .blink-success {
   -webkit-animation: blink-success 1s linear infinite;
   -moz-animation: blink-success 1s linear infinite;
   animation: blink-success 1s linear infinite;
 }

 @keyframes blink-warning {
   0% { color: @summaryWarning; }
   100% { color: black; }
 }
 @-webkit-keyframes blink-warning {
   0% { color: @summaryWarning; }
   100% { color: black; }
 }
 .blink-warning {
   -webkit-animation: blink-warning 1s linear infinite;
   -moz-animation: blink-warning 1s linear infinite;
   animation: blink-warning 1s linear infinite;
 }

 @keyframes blink-danger {
   0% { color: @summaryWarning; }
   100% { color: black; }
 }
 @-webkit-keyframes blink-danger {
   0% { color: @summaryWarning; }
   100% { color: black; }
 }
 .blink-danger {
   -webkit-animation: blink-danger 1s linear infinite;
   -moz-animation: blink-danger 1s linear infinite;
   animation: blink-danger 1s linear infinite;
 }

 @keyframes blink-notification {
   0% { color: #ffff00; }
   100% { color: white; }
 }
 @-webkit-keyframes blink-notification {
   0% { color: #ffff00; }
   100% { color: white; }
 }
 .blink-notification {
   -webkit-animation: blink-notification 1s linear infinite;
   -moz-animation: blink-notification 1s linear infinite;
   animation: blink-notification 1s linear infinite;
 }*/

 .blink-success {
   color: @green-light;
 }

 .blink-warning {
   color: @summaryWarning;
 }

 .blink-danger {
   color: @summaryWarning;
 }

 .blink-notification {
   color: #ffff00;
 }

 .text-success {
   color: @summarySuccess;
 }
 .text-warning {
   color: @summaryWarning;
 }
 .text-danger {
   color: @summaryDanger;
 }

 .border-left{
   border-left: 2px solid @gray-lighter;
 }

 .border-right{
   border-right: 2px solid @gray-lighter;
 }
 .pt15px {
 	padding-top:15px;
 }
 .border0px {
 	border: 0px;
 }
 .border1px {
 	border: 1px solid #666666;
 }
 .p10px {
 	padding : 10px;
 }
 .summaryBox {
   border: 1px solid @detail-border-color;
   padding: 15px 5px 8px;
   font-size: 12px;
   color: @detail-color;
   background-color: transparent;
   h4 {
     /*font-weight: bold;*/
     margin:5px 0;
   }
   h5 {
     font-weight: bold;
     margin-top:20px;
   }
   table {
     width: 100%;
     border-spacing: 5px;
     border-collapse: separate;
   }
   .tableHeader {
     width: 70px;
     font-weight: bold;
   }
   textarea {
     width: 100%;
   }
   /*&.processCluster {
     padding: 15px 4%;
     margin: 5px auto;
     h5 {
       margin-top:15px;
       &:first-child {
         margin-top:0;
       }
     }
   }*/
   .detailsBox{
     margin-left: 10px;
   }
   .light {
     font-weight: normal;
   }
 }

 /*************************************** SEARCH **************************************/
 @searchIconTop:  8px;
 @searchFontSize:  13px;

 .search {
   height: 45px;
   font-weight: 400;
   font-size: 25px;
   padding-left: 40px !important;
   padding-right: 40px !important;
 }

 .searchBoxContainer{
   padding-top: 4px;
   /*margin: 10px -5px;*/
   .popover{
     right: 5px !important;
     width: 400px;
   }
   .arrow{
     right: 35px !important;
   }
 }

 .search-icon {
   cursor: pointer;
   position: absolute;
   top: @searchIconTop;
   right: 44px;
   /*z-index: 2;*/
   display: block;
   line-height: 23px;
   text-align: center;
   font-size: @searchFontSize;
   color: @search-icon-color;
 }

 .search-loading-icon {
   cursor: pointer;
   position: absolute;
   background: transparent;
   top: @searchIconTop;
   right: 48px;
   z-index: 2;
   display: block;
   line-height: 23px;
   text-align: center;
   font-size: @searchFontSize;
   color: @search-icon-color;
   width: 23px;
 }

 .remove-icon {
   cursor: pointer;
   position: absolute;
   top: @searchIconTop;
   right: 64px;
 //  z-index: 2;
   display: block;
   line-height: 23px;
   text-align: center;
   font-size: @searchFontSize;
   color: @search-icon-color;
 }

 .question-icon {
   cursor: pointer;
   position: absolute;
   top: @searchIconTop;
   right: 9px;
 //  z-index: 2;
   display: block;
   line-height: 23px;
   text-align: center;
   font-size: @searchFontSize;
   color: @search-icon-color;
   margin-right: 15px;
 }

 .searchBox {
   display: inline-block;
   .entityTypeButtons {
     display: inline-block;
     background-color: @gray-light2;
     border-radius: 7px;
     padding: 4px;

     .btn {
       background-color: @gray-light2;
       border-radius: 7px;
       border: none;
       outline: none!important;
       line-height: 1;
       padding: 5px;
       &.active {
         background-color: @gray-light;
         color: white;
       }
       &:focus {

       }
     }
   }
 }

 .filtersSearchBox{
   .padding0{
     min-width: 115px;
   }
 }

 .searchResultContainer {
   background-color: @body-bg;
   margin-top: 25px;
 }

 .tag-striked{
   text-decoration: line-through;
 }

 .pagDisabled{
   cursor: default !important;
   background-color: #eee !important;
 }

 .no-margin{
   margin: 0;
 }

 .buttonsRow {
   height: 43px;
   td {
     /*border-top: none !important;*/
     border-width: @table-header-border-width;
     border-style: solid;
     border-color: @table-header-border-color;
   }
   margin-bottom: 8px;
 }

 .buttonCell {
   .entypo, div {
     display: inline-block;
     vertical-align: middle;
   }
   .entypo {
     font-size: 22px;
     vertical-align: sub;
     //margin: 6px 0 0 0;
     //line-height: 18px;
   }
   div {
     //margin: 3px 0 0 0;
   }
 }

 .btn-gray {
   color: #FFFFFF;
   background-color: transparent;
   border-color: transparent;
   &:hover {
     color: #FFFFFF;
   }
 }

 .btn-big {
   color: #333;
   background-color: #ccc;
   border-color: #ccc;
   padding: 8px;
   font-size: 14px;
 }

 .instance-title{
   margin: 0;
   padding: 10px;
 }

 .instance-status{
   margin-top: 8px;
 }

 .animate-show {
   line-height: 20px;
   opacity: 1;
   padding: 10px;
 }

 .animate-show.ng-hide-add.ng-hide-add-active,
 .animate-show.ng-hide-remove.ng-hide-remove-active {
   -webkit-transition: all linear 0.5s;
   transition: all linear 0.5s;
 }

 .animate-show.ng-hide {
   line-height: 0;
   opacity: 0;
   padding: 0 10px;
 }

 .filtersSearchBox {
   line-height: 2.3em;
 }

 .vertical-align {
   min-height: 5vh;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align : center;
   -webkit-align-items : center;
   -moz-box-align : center;
   -ms-flex-align : center;
   align-items : center;
   width: 100%;
 }

 .dependencies-graph{
   text-align: center;
   padding: 10px 0;
   /*border: 1px solid @detail-border-color;*/
   svg {
     padding: 8px;
   }
 }

 /**
   DEPENDENCIES & LINEAGE GRAPHS
 **/

 .node-name:before {
   font-family: 'Glyphicons Halflings';
   -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   padding-right: 0.3em;
   vertical-align: -20%;
   font-size: 110%;
   color: #428bca;
 }

 .node-name-cluster:before {
   content: "\2601";
 }

 .node-name-process:before {
   content: "\e110";
 }

 .node-name-feed:before {
   content: "\e181";
 }

 .node rect {
   stroke-width: 1px;
   stroke: @lineage-rect-stroke-color;
   fill: @lineage-rect-fill-color;
   fill-opacity: 20%;
 }

 .edge path {
   fill: none;
   stroke: @lineage-path-stroke-color;
   stroke-width: 2px;
 }

 marker {
   fill: @lineage-marker-fill-color;
 }

 .node-name {
   vertical-align: middle;
   margin: 10px;
   font-size: 15px;
   padding-top: 18px;
   color: @lineage-node-text-color;
 }

 .lineage-link {
   fill: none;
   stroke: @lineage-path-stroke-color;
   stroke-width: 2px;
 }

 .lineage-node, .lineage-href {
   cursor: pointer;
 }

 .lineage-node-terminal {
   stroke: #000;
   stroke-opacity: 0.3;
   stroke-width: 8px;
 }

 .lineage-node-active {
   stroke: #45a2b5;
   stroke-opacity: 0.3;
   stroke-width: 8px;
 }

 .lineage-node-text {
   font-size: 8pt;
   fill: #fff;
   word-wrap: break-word;
   color: @lineage-node-text-color;
 }

 .lineage-node-feed-instance {
   fill: #6ab545;
 }

 .lineage-node-process-instance {
   fill: #456ab5;
 }

 ul.lineage-legend {
   list-style-type: none;
 }

 .lineage-legend li {
   padding-left: 20px;
   display: inline;
 }

 ul.lineage-legend li:before {
   content: "\25cf";
   position: relative;
   display: inline-block;
   top: 2px;
   font-style: normal;
   font-size: 16pt;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   padding-right: 5px;
 }

 .lineage-legend-feed-inst:before {
   color: #6ab545;
 }

 .lineage-legend-process-inst:before {
   color: #456ab5;
 }


 .lineage-legend-terminal:before {
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: #ccc;
 }

 /* ALERT MESSAGE */

 .alert {
   font-size: 16px;
 }

 .no-outline{
  outline: 0;
 }

 .tittle-in-row{
   margin-top: 20px !important;
   margin-bottom: 0px !important;
 }

 .icon-lg{
   font-size: 40px !important;
 }

 .prettyXml{
   min-height: 800px;
 }


 .auth
 {
   color:#69be28;
 }

 .entities-tooltip-theme {
   display: none;
   position: absolute;
   z-index: 100;
   margin-top: -3px;
 }

 .entities-tooltip {
   -webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
   -moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
   box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
   border: solid 1px #d2d2d2;
   border-radius: 3px;
   box-sizing: border-box;
   background-color: #fff;
   padding: 5px 7px;
   margin-left: -3px;
   margin-top: 6px;
   font-weight: normal;
 }

 .arrow-up {
   content: "";
   display: block;
   width: 0;
   height: 0;
   border: solid 5px;
   border-color: transparent;
   position: absolute;
   border-bottom-color: #d2d2d2;
   top: -3px;
   margin-left: 4px;
 }

 .arrow-up::after {
   top: -9px;
   margin-left: -10px;
   content: " ";
   position: absolute;
   display: block;
   width: 0;
   height: 0;
   border: solid 10px;
   border-color: transparent;
   border-bottom-color: #fff;
 }

 .accordion-toggle {
   text-decoration: none !important;
 }

 .advancedOption {
   cursor: pointer;
   .glyphicon {
     top : 3px;
   }
 }

 .align-top {
   vertical-align: top !important;
 }

 .no-entity {
   position: absolute;
   margin-top:25px;
   left:15%;
   padding: 10px;
   overflow: auto;
   border: 1px solid @green-light;
 }
	/**
	* Licensed to the Apache Software Foundation (ASF) under one
	* or more contributor license agreements. See the NOTICE file
	* distributed with this work for additional information
	* regarding copyright ownership. The ASF licenses this file
	* to you under the Apache License, Version 2.0 (the
	* "License"); you may not use this file except in compliance
	* with the License. You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/

	[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
	}
	html, body { height: 100%; }
	body { background-color: @body-bg; }

	.color-success{
	color: #3c763d !important;
	}
	.color-info{
	color: #31708f !important;
	}
	.color-warning{
	color: #8a6d3b !important;
	}
	.color-danger{
	color: #a94442 !important;
	}

	//--------------------VALIDATION---------------------//
	@shadow-valid: rgba(0, 255, 0, .6);
	@shadow-invalid: rgba(255, 0, 0, .6);
	@validation-error-color: #ff3333;
	@validation-success-color: #009900;

	.custom-success {
	color: @validation-success-color;
	}
	.custom-danger {
	color: @validation-error-color;
	font-style: normal;
	font-weight:normal;
	}
	/*.ng-valid {
	&:focus {
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-valid}");
	border-color: green;
	}
	&.nameAlreadyRegistered {
	border-color: red;
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
	}
	}*/
	input {
	&:focus {
	border-color: inherit;
	}
	}

	.ng-invalid.ng-dirty {
	border-color: lighten(red, 10%);
	&:focus.empty {
	border-color: gray;
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777");
	}
	&:focus {
	border-color: red;
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
	}

	&.empty {
	border-color: red;
	//.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
	&:focus {
	border-color: gray;
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777");

	}
	}
	}
	.showValidationStyle {
	.ng-invalid, .fakeInvalid {
	border-color: lighten(red, 10%);
	&.empty {
	&:focus {
	border-color: gray;
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #777");
	}
	}
	&:focus {
	border-color: red;
	.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
	}
	}
	.fakeInvalid {
	border: 1px solid lighten(red, 10%);
	&:hover {
	border-color: red;
	.box-shadow(~"0 1px 1px rgba(0,0,0,.075), 0 0 8px @{shadow-invalid}");
	}
	}
	.fakeInvalidRadio {
	color: red;
	}
	#engineSection {
	input[type="radio"].ng-invalid, input[type="radio"].ng-invalid-required{
	border-width: 0;
	box-shadow: unset;
	}
	input[type="radio"]:focus {
	border-width: 0;
	box-shadow: unset!important;
	}
	input[type="radio"] {
	border-width: 0;
	box-shadow: unset!important;
	vertical-align: middle;
	}
	}
	.validationMessageGral {
	display: block;
	&.valid {
	display: none;
	}
	}
	}
	//----------------validationDirective messages ----------//
	.validationMessageGral {
	display: none;
	&.custom-danger { margin-top:3px; }
	}
	.nameValidationMessage {
	&.custom-danger { margin-top:0; }
	}
	.validationMessageParent {
	.nameValidationMessage {
	display: none;
	margin:0;
	}
	&.showNameMessage {
	.nameValidationMessage { display: block; }
	}
	}
	//------nameCheck ------------------//
	.nameInputDisplay {
	/position: absolute;/
	z-index:2;
	}
	//----------------mozilla outline hack-------------------//
	input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
	outline: none;
	outline-offset: 0;
	}
	//-------------------------------------------------------//
	.mainUIView {
	//padding: 10px 0 30px 0;
	/padding-top: 10px;/
	padding-bottom: 30px;
	}
	//-----------------------------------------//
	//----------------FILE UPLOAD---------------------//
	.btn-file {
	cursor: pointer;
	/*position: relative;
	overflow: hidden;*/
	// margin: 40px 0 40px 30px;
	}
	.btn-file input[type=file] {
	position: absolute;
	top: 0;
	/right: 0;/
	width: 32px;
	height: 32px;
	/font-size: 100px;/
	text-align: right;
	filter: alpha(opacity=0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
	}
	//-----------input crossbrowser overrides ------//
	input[type="text"]{
	color: black;
	padding:0;
	}
	input[type="password"]{
	color: black;
	padding:0;
	}
	.dateInput {
	//padding-right: 25px!important;
	}
	.dateInputIcon {
	position: absolute;
	background-color: white;
	z-index: 2;
	right: 5px;
	bottom:5px;
	/top: 6px;/
	line-height: 15px;
	font-size: 30px!important;
	}
	//-------------------------//
	.padding0 {
	padding: 0;
	}
	.dynamic-table-spacer {
	margin-bottom: 5px;
	}
	.buttonsWrapper {
	text-align: center;
	}
	//-----------------------//
	.logoutBar {
	position: absolute;
	bottom:5px;
	right:0;
	min-width:400px;
	.entypo {
	font-size: 3em;
	}
	}

	.pointer{
	cursor: pointer;
	}

	.timePicker {
	margin-top:-10px!important;
	}

	@summarySuccess: #009900;
	@summaryWarning: #E6DD00;
	@summaryDanger: #FF0000;

	.entitySummary {
	text-align: center;
	.whiteBox {
	background-color: white;
	border-radius: 3px;
	margin: 0 7px 0 0;
	padding: 5px 0;
	&:first-child {
	margin: 0 5px;
	}
	}
	h3, h5 {
	margin:0;
	}
	h3 { font-size:35px; }
	h5 { font-size:9px; font-weight: bold; }
	.notBold {
	font-weight: normal;
	}
	}

	/*@keyframes blink-success {
	0% { color: @summarySuccess; }
	100% { color: black; }
	}
	@-webkit-keyframes blink-success {
	0% { color: @summarySuccess; }
	100% { color: black; }
	}
	.blink-success {
	-webkit-animation: blink-success 1s linear infinite;
	-moz-animation: blink-success 1s linear infinite;
	animation: blink-success 1s linear infinite;
	}

	@keyframes blink-warning {
	0% { color: @summaryWarning; }
	100% { color: black; }
	}
	@-webkit-keyframes blink-warning {
	0% { color: @summaryWarning; }
	100% { color: black; }
	}
	.blink-warning {
	-webkit-animation: blink-warning 1s linear infinite;
	-moz-animation: blink-warning 1s linear infinite;
	animation: blink-warning 1s linear infinite;
	}

	@keyframes blink-danger {
	0% { color: @summaryWarning; }
	100% { color: black; }
	}
	@-webkit-keyframes blink-danger {
	0% { color: @summaryWarning; }
	100% { color: black; }
	}
	.blink-danger {
	-webkit-animation: blink-danger 1s linear infinite;
	-moz-animation: blink-danger 1s linear infinite;
	animation: blink-danger 1s linear infinite;
	}

	@keyframes blink-notification {
	0% { color: #ffff00; }
	100% { color: white; }
	}
	@-webkit-keyframes blink-notification {
	0% { color: #ffff00; }
	100% { color: white; }
	}
	.blink-notification {
	-webkit-animation: blink-notification 1s linear infinite;
	-moz-animation: blink-notification 1s linear infinite;
	animation: blink-notification 1s linear infinite;
	}*/

	.blink-success {
	color: @green-light;
	}

	.blink-warning {
	color: @summaryWarning;
	}

	.blink-danger {
	color: @summaryWarning;
	}

	.blink-notification {
	color: #ffff00;
	}

	.text-success {
	color: @summarySuccess;
	}
	.text-warning {
	color: @summaryWarning;
	}
	.text-danger {
	color: @summaryDanger;
	}

	.border-left{
	border-left: 2px solid @gray-lighter;
	}

	.border-right{
	border-right: 2px solid @gray-lighter;
	}
	.pt15px {
	padding-top:15px;
	}
	.border0px {
	border: 0px;
	}
	.border1px {
	border: 1px solid #666666;
	}
	.p10px {
	padding : 10px;
	}
	.summaryBox {
	border: 1px solid @detail-border-color;
	padding: 15px 5px 8px;
	font-size: 12px;
	color: @detail-color;
	background-color: transparent;
	h4 {
	/font-weight: bold;/
	margin:5px 0;
	}
	h5 {
	font-weight: bold;
	margin-top:20px;
	}
	table {
	width: 100%;
	border-spacing: 5px;
	border-collapse: separate;
	}
	.tableHeader {
	width: 70px;
	font-weight: bold;
	}
	textarea {
	width: 100%;
	}
	/*&.processCluster {
	padding: 15px 4%;
	margin: 5px auto;
	h5 {
	margin-top:15px;
	&:first-child {
	margin-top:0;
	}
	}
	}*/
	.detailsBox{
	margin-left: 10px;
	}
	.light {
	font-weight: normal;
	}
	}

	/************************************* SEARCH ************************************/
	@searchIconTop: 8px;
	@searchFontSize: 13px;

	.search {
	height: 45px;
	font-weight: 400;
	font-size: 25px;
	padding-left: 40px !important;
	padding-right: 40px !important;
	}

	.searchBoxContainer{
	padding-top: 4px;
	/margin: 10px -5px;/
	.popover{
	right: 5px !important;
	width: 400px;
	}
	.arrow{
	right: 35px !important;
	}
	}

	.search-icon {
	cursor: pointer;
	position: absolute;
	top: @searchIconTop;
	right: 44px;
	/z-index: 2;/
	display: block;
	line-height: 23px;
	text-align: center;
	font-size: @searchFontSize;
	color: @search-icon-color;
	}

	.search-loading-icon {
	cursor: pointer;
	position: absolute;
	background: transparent;
	top: @searchIconTop;
	right: 48px;
	z-index: 2;
	display: block;
	line-height: 23px;
	text-align: center;
	font-size: @searchFontSize;
	color: @search-icon-color;
	width: 23px;
	}

	.remove-icon {
	cursor: pointer;
	position: absolute;
	top: @searchIconTop;
	right: 64px;
	// z-index: 2;
	display: block;
	line-height: 23px;
	text-align: center;
	font-size: @searchFontSize;
	color: @search-icon-color;
	}

	.question-icon {
	cursor: pointer;
	position: absolute;
	top: @searchIconTop;
	right: 9px;
	// z-index: 2;
	display: block;
	line-height: 23px;
	text-align: center;
	font-size: @searchFontSize;
	color: @search-icon-color;
	margin-right: 15px;
	}

	.searchBox {
	display: inline-block;
	.entityTypeButtons {
	display: inline-block;
	background-color: @gray-light2;
	border-radius: 7px;
	padding: 4px;

	.btn {
	background-color: @gray-light2;
	border-radius: 7px;
	border: none;
	outline: none!important;
	line-height: 1;
	padding: 5px;
	&.active {
	background-color: @gray-light;
	color: white;
	}
	&:focus {

	}
	}
	}
	}

	.filtersSearchBox{
	.padding0{
	min-width: 115px;
	}
	}

	.searchResultContainer {
	background-color: @body-bg;
	margin-top: 25px;
	}

	.tag-striked{
	text-decoration: line-through;
	}

	.pagDisabled{
	cursor: default !important;
	background-color: #eee !important;
	}

	.no-margin{
	margin: 0;
	}

	.buttonsRow {
	height: 43px;
	td {
	/border-top: none !important;/
	border-width: @table-header-border-width;
	border-style: solid;
	border-color: @table-header-border-color;
	}
	margin-bottom: 8px;
	}

	.buttonCell {
	.entypo, div {
	display: inline-block;
	vertical-align: middle;
	}
	.entypo {
	font-size: 22px;
	vertical-align: sub;
	//margin: 6px 0 0 0;
	//line-height: 18px;
	}
	div {
	//margin: 3px 0 0 0;
	}
	}

	.btn-gray {
	color: #FFFFFF;
	background-color: transparent;
	border-color: transparent;
	&:hover {
	color: #FFFFFF;
	}
	}

	.btn-big {
	color: #333;
	background-color: #ccc;
	border-color: #ccc;
	padding: 8px;
	font-size: 14px;
	}

	.instance-title{
	margin: 0;
	padding: 10px;
	}

	.instance-status{
	margin-top: 8px;
	}

	.animate-show {
	line-height: 20px;
	opacity: 1;
	padding: 10px;
	}

	.animate-show.ng-hide-add.ng-hide-add-active,
	.animate-show.ng-hide-remove.ng-hide-remove-active {
	-webkit-transition: all linear 0.5s;
	transition: all linear 0.5s;
	}

	.animate-show.ng-hide {
	line-height: 0;
	opacity: 0;
	padding: 0 10px;
	}

	.filtersSearchBox {
	line-height: 2.3em;
	}

	.vertical-align {
	min-height: 5vh;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	-moz-box-align : center;
	-ms-flex-align : center;
	align-items : center;
	width: 100%;
	}

	.dependencies-graph{
	text-align: center;
	padding: 10px 0;
	/border: 1px solid @detail-border-color;/
	svg {
	padding: 8px;
	}
	}

	/**
	DEPENDENCIES & LINEAGE GRAPHS
	**/

	.node-name:before {
	font-family: 'Glyphicons Halflings';
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	padding-right: 0.3em;
	vertical-align: -20%;
	font-size: 110%;
	color: #428bca;
	}

	.node-name-cluster:before {
	content: "\2601";
	}

	.node-name-process:before {
	content: "\e110";
	}

	.node-name-feed:before {
	content: "\e181";
	}

	.node rect {
	stroke-width: 1px;
	stroke: @lineage-rect-stroke-color;
	fill: @lineage-rect-fill-color;
	fill-opacity: 20%;
	}

	.edge path {
	fill: none;
	stroke: @lineage-path-stroke-color;
	stroke-width: 2px;
	}

	marker {
	fill: @lineage-marker-fill-color;
	}

	.node-name {
	vertical-align: middle;
	margin: 10px;
	font-size: 15px;
	padding-top: 18px;
	color: @lineage-node-text-color;
	}

	.lineage-link {
	fill: none;
	stroke: @lineage-path-stroke-color;
	stroke-width: 2px;
	}

	.lineage-node, .lineage-href {
	cursor: pointer;
	}

	.lineage-node-terminal {
	stroke: #000;
	stroke-opacity: 0.3;
	stroke-width: 8px;
	}

	.lineage-node-active {
	stroke: #45a2b5;
	stroke-opacity: 0.3;
	stroke-width: 8px;
	}

	.lineage-node-text {
	font-size: 8pt;
	fill: #fff;
	word-wrap: break-word;
	color: @lineage-node-text-color;
	}

	.lineage-node-feed-instance {
	fill: #6ab545;
	}

	.lineage-node-process-instance {
	fill: #456ab5;
	}

	ul.lineage-legend {
	list-style-type: none;
	}

	.lineage-legend li {
	padding-left: 20px;
	display: inline;
	}

	ul.lineage-legend li:before {
	content: "\25cf";
	position: relative;
	display: inline-block;
	top: 2px;
	font-style: normal;
	font-size: 16pt;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	padding-right: 5px;
	}

	.lineage-legend-feed-inst:before {
	color: #6ab545;
	}

	.lineage-legend-process-inst:before {
	color: #456ab5;
	}


	.lineage-legend-terminal:before {
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #ccc;
	}

	/* ALERT MESSAGE */

	.alert {
	font-size: 16px;
	}

	.no-outline{
	outline: 0;
	}

	.tittle-in-row{
	margin-top: 20px !important;
	margin-bottom: 0px !important;
	}

	.icon-lg{
	font-size: 40px !important;
	}

	.prettyXml{
	min-height: 800px;
	}


	.auth
	{
	color:#69be28;
	}

	.entities-tooltip-theme {
	display: none;
	position: absolute;
	z-index: 100;
	margin-top: -3px;
	}

	.entities-tooltip {
	-webkit-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
	-moz-box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
	box-shadow: 0 0.3125rem 0.625rem rgba(0,0,0,0.2);
	border: solid 1px #d2d2d2;
	border-radius: 3px;
	box-sizing: border-box;
	background-color: #fff;
	padding: 5px 7px;
	margin-left: -3px;
	margin-top: 6px;
	font-weight: normal;
	}

	.arrow-up {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: solid 5px;
	border-color: transparent;
	position: absolute;
	border-bottom-color: #d2d2d2;
	top: -3px;
	margin-left: 4px;
	}

	.arrow-up::after {
	top: -9px;
	margin-left: -10px;
	content: " ";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border: solid 10px;
	border-color: transparent;
	border-bottom-color: #fff;
	}

	.accordion-toggle {
	text-decoration: none !important;
	}

	.advancedOption {
	cursor: pointer;
	.glyphicon {
	top : 3px;
	}
	}

	.align-top {
	vertical-align: top !important;
	}

	.no-entity {
	position: absolute;
	margin-top:25px;
	left:15%;
	padding: 10px;
	overflow: auto;
	border: 1px solid @green-light;
	}