:root {
  --borderColor: #98A7A7;
  --backgroundColor:#747E7E;
  --darkBorderColor:#676c6c;
  --siloBackgroundColor:#ACACAC;
  
  --dialogBackgroundColor:#5F5F5F;
  --siloFillColor:#C6A464;
  
  --samplerColor: yellow;
  --samplerColorEdge: #8b8c69;
  --dcRemovalColor: lightgreen;
  --dcRemovalColorEdge:#73956b;
  --airflowColorEdge: #818181;
  --airflowColor: #06bbff;
  
  --flowchartBackgoundColor:#3c3c3c;
  --flowchartLightBackgoundColor:#5F5F5F;
  
  --widgetBackgroundColor:#4e4e4e;
  --widgetColor:#ffffff;
  --widgetForegroundColor:white;
  
  --widgetBorderColor:#d3d3d3;
  
  --commColor: #81a2e7;
  --commColorEdge: #81a2e7;
  --commColor2:#afbacf; 
  --gwColor: orange;
  --gwColorEdge: orange;
  --gwColorLight: #ffc762;
  --sensorColorEdge: green;
}


/* Top Right Bottom Left*/
@font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-Light';
    src: url('../fonts/Gilroy-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-SemiBold';
    src: url('../fonts/Gilroy-SemiBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy-ExtraBold';
    src: url('../fonts/Gilroy-ExtraBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


body{
	background-color:#e6edf7;
	color:var(--widgetForegroundColor);
	font-size: 12px; 
	font-family: Gilroy, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	height: 100%;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

table{font-weight:normal;}
p{margin:0px; padding:0px;}

li{margin-bottom: 5px;}

form{
	margin:0px;
	padding: 0px;
}


/*ul{margin-left: 20px;}*/

a h1,h2,h3,h4,h5,h6{text-decoration:none;}
a{text-decoration:none; color:#004181}
a:hover{text-decoration:none; color:#a5b900}

h1{font-size: 26px;}
h2{font-size: 24px;}
h3{font-size: 22px;}
h4{font-size: 20px;}
h5{font-size:12px;}
h6{font-size:11px;}
h1,h2,h3,h4{color: var(--widgetColor);}
h1,h2,h3,h4,h5,h6{
	margin: 7px 0px 10px 5px;
}

th{
	text-align:left;
}

div.divOuter {
    border: none;
    height: 100%;
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--flowchartBackgoundColor);
    overflow-x: visible;
}

.flex-container {
    display: flex;
    flex-direction: column;
    min-height:0;
}

.divContent {
    position: relative;
    left: 0px;
    background: transparent;
    padding: 0;
}


div.divInner {
	overflow-y: visible;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    min-height: 100vh;
    border: 0;
}

.contentNormal {
	
}


.divContentImage {
	position: absolute;
    left: 0;
    top: 105px;
    width: 100%;
    height: calc(100% - 105px);
}


.divHead {
	position: relative;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.divHead .divLogo {
	display: grid;
}

.divHead_small {
    position:relative;
    height:24px;
    background: #004a8f;
    overflow: hidden;
}

.divMenu1{
    position: relative;
    display: grid;
}

.ui-menu .ui-menuitem-text {
    float: left;
    font-size: 1.4rem;
}

.ajaxStatusBar {
	height: 5px;
    display: grid;
}

.divTitle {
    color: #2e2e2e;
    font-size: 16px;
    margin: 0 2em;
}

.divProjectTitle {
    color: #2e2e2e;
    font-size: 16px;
    margin: 0 0 0 auto;
}

.divProjectTitle label {
	margin:0 1em;
}

.divTitle.atlid {
    left: 140px;   
}


.divPageTitle {
    padding: 3px 10px 3px 10px;
    position: absolute;
    margin: 0px;
    right: 10px;
    top: 24px;
    color: #2e2e2e;
    font-size: 14px;
    /* font: 12px Arial, Helvetica, sans-serif; */
    letter-spacing: 1px;
    font-weight: normal !important;
    /* text-transform: uppercase; */
}

.divPageTitleLoginCount {
	padding: 3px 10px 3px 10px;
	position: absolute;
	margin: 0px;
    right: 10px;
    top: 50px;
    ;
}

.divPageTitleLoginCount,
.divPageTitleLoginCount a {
	color: var(--widgetColor);
    font-size: 10px;
    font-weight: normal !important	
}

.divPageTitleLoginCount a:hover {
	color: #cccccc;
}

.atlidImageLabel {
	height: 30px;
    margin: 10px 5px;
}

.divTitle,
.divPageTitle,
.divPageTitleLoginCount {
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


.divPageTitle_small {
    position:absolute;
    margin:0px;
    left:10px;
    top:6px;
    color:var(--widgetColor);
    font-size: 12px;
    /*font: 12px Arial, Helvetica, sans-serif;*/
    letter-spacing: 1px;
    font-weight:bold !important;
    text-transform: uppercase;
}

.ui-growl {   
    position:fixed;
    top: 250px;
    left: 40%;
    z-index:9999 !important; 
}

div.ui-button-text-only, div.ui-button-text-icon-left {
	min-width:60px;
}

.ui-state-active {
    -moz-box-shadow: inset 0px -1px 0px #fff !important;
    -webkit-box-shadow: inset 0px 1px 0px #fff !important;
    box-shadow: inset -1px -1px 0px #fff  !important;
}

.ui-state-active span.ui-button-text {
	position: relative;
    top: 1px;
    left: 1px;
}

.ui-state-button-pressed {
	margin-top: -7px !important;
    margin-left: 1px !important;
}

.ui-icon-button-base {              
    background-position:center !important;; 
    background-repeat: no-repeat !important;
    -webkit-border-radius: 0px !important;
    border-radius:  0px !important;                 
}

 .ui-menu {
     padding: 0 !important;
 }

 .menuButton {
     height:20px;
     width:20px;                             
     margin-top:2px;                 
 }
                             
 .flatButton {
     min-width:80px;
     height:20px;                    
     margin-top:2px;
     font-size:0.9em !important;
     max-width:100px;
 }
 
body .ui-menu.ui-menubar.atlidMenu {
    background: var(--widgetBackgroundColor);
    border-radius: 0;
}

.atlidMenu .loginButton {
    padding:6px 6px 6px 6px;
 }
 
 .atlidMenu .loginButton-hidden {
    padding: 6px 0px 6px 0px;
 }
 
 body .ui-menu.ui-menubar.atlidMenu li * {
     text-transform: uppercase;
     font-weight: normal !important;
    
 }
 
body .ui-menu.ui-menu-dynamic.atlidMenu.dropDownMenu {
    min-width: 25em;
    width: auto;
    white-space: nowrap;
    background: var(--widgetBackgroundColor);
}
 
 .atlidMenu li:not(.ui-menuitem-highlight) a:not(.ui-state-active) span, .atlidMenuOptions {
    color: #f7f7f7 !important;
 }
 
  .atlidMenuOptions {
    padding: 2px 3px 1px 3px;
    border: 1px solid transparent;
 }
 
 .atlidMenuOptions-hidden {
    border: 1px solid transparent;
    cursor:default;
 }
 
 .atlidMenu a.ui-state-hover  {
     background:  none;
     
     -webkit-box-shadow: none !important;
     box-shadow: none !important;   
 }
 
 
.mobileMenuItem {
    display:none !important;
    
} 

.mobileMenu {	
}

@media screen and (min-width: 641px) {
	.mobileContextMenu {
		display:none !important;
	}
}

.mobileMenu a.ui-submenu-link span.ui-icon.ui-icon-triangle-1-s {
	background-image: url('../img/mobile_menu_toggle.png');
	background-position: 0 0;
    width: 19px;
    height: 19px;
    filter: none;
    -webkit-filter: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

 @media screen and (max-width: 640px) {
	 
	 .divPageTitle {
	     top:34px;
	 }
	 
	 .divTitle {
	     left:unset;
	     right: 10px;
         top: 23px;
	 }
	
	 
 }
 
 .atlidMenu a.ui-state-hover  {
     background:  none;
     
     -webkit-box-shadow: none !important;
     box-shadow: none !important;   
 }
 
 .boldMenu.ui-state-hover, .boldSubMenu > a.ui-state-hover {
     
 }
 
img.image-shadow {
     -webkit-filter: drop-shadow(2px 3px 3px #333333);
     filter: drop-shadow(2px 3px 3px #333333);
}

img.dried-image-shadow {
     -webkit-filter: drop-shadow(2px 2px 1px #fff);
     filter: drop-shadow(2px 2px 1px #fff);
}

 
 .atlidMenu .ui-icon.fa {     
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    padding-top: 7px;
    filter: none;
    -webkit-filter:none;
    width:auto;
 }
 
 
 .fa-fatal:before,
 .fa-error:before {
    content: "\f05e";
    color: red;
}

.fa-mail:before {
    content: "\f003";
}

.fa-warn:before {
    content: "\f071";
    color: orange;
}
 
 .atlidMenu span.ui-icon-triangle-1-s {     
    margin-top: 3px;
 }
  
 .atlidMenuItem {
    padding: 0.2rem 7px 0.2rem .3rem;
}

body .ui-menu.ui-menubar.atlidMenu .ui-menuitem-link {
    padding: .2rem .3rem;
}

.ui-menu-list .ui-menuitem-link.atlidMenuItem.dropDownMenu .ui-menuitem-text {
	width: calc(100% - 32px);
}
 
 .atlidMenuItem > span.ui-menuitem-text, .atlidMenu .ui-menu-parent > a > span.ui-menuitem-text {
    padding: 6px 6px 6px 6px;
    border: 1px solid transparent;
 }
 
 
 .boldMenu > span.ui-menuitem-text, .boldSubMenu > a > span.ui-menuitem-text {
     border: 1px solid;
     border-color: white !important;
     padding: 6px 6px 6px 6px;
 }
 

 
 
 div.atlidMenu ul[role="menu"] {
     background: #195a92 !important;
 }
 
 hr.indicatorSeparator {
     -webkit-margin-before: 0.4em !important;
    -webkit-margin-after: 0.4em !important;
 }
 
 .message-subject {
      font-weight: bold;
      font-size: 1.2em;
  }
  
 .cursor-wait {
  cursor: wait;
 }
 
 .position_absolute {
    position:absolute;
 }
  
 .position_relative {
    position:relative;
 }
 
.fit-content {
	width: fit-content;
	width: -moz-fit-content;
}

button:disabled {
    color: lightgrey !important;
    font-style: italic;
}