:root {
    --sidepanel-background: #003B56;
    --link-dark: #3EADD8;
}

html, body 
{ 
    font-family: 'Arial'; color: #5A5A5A; 
    padding:0; margin:0; height:100%;
}

body {
    font-size:90%; 
    user-select:none;
}
img{ margin:0; padding:0; border:0; display:block;}

input{ font-family: 'Roboto', sans-serif;}
textarea{ font-family: 'Roboto', sans-serif;}
span {display:inline-block;}

input[type='text'],
select,
input[type='number'],
textarea {
    font-size: 14px;
}
textarea {vertical-align: top;}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #0099ff;
    box-shadow: 0 0 10px #0099ff;
}

p {margin:0; padding:0;}
h1 {margin-top:0; padding-top:0; font-size:1.7em;}
h2 {margin-top:10px; padding-top:0; font-size:1.4em;}
h3 {margin:0; padding:0;}
h4 { color: #006891; }

.h-underline {
    border-bottom:2px solid #dddddd;
    padding:0 0 10px 0;
}

.link {cursor:pointer; color: #007BAF; text-decoration:none;}
.link:hover {text-decoration:underline;}

.link-dark {cursor:pointer; color: var(--link-dark); text-decoration:none;}
.link-dark:hover {text-decoration:underline;}

/*.layout-bg-image { width:100vw; height:initial !important; min-height:100vh; position:fixed; background-image: url(/Images/login_bg.jpg); background-size: cover; }
.layout-window-outer {display:flex; flex-direction:column; height:100%; flex-wrap:nowrap; position:absolute; width:100%;}
.layout-window-header { height: 50px; width:100%; position:fixed; top:0; background-color:#ffffff; z-index:6000;}
.layout-window-page { flex-grow:1; width:100%; margin-top:50px; margin-bottom: 30px; }
.layout-window-footer { height: 30px; width:100%; position:fixed; bottom:0;}

.layout-window-header-menutoggler { width:50px; height:50px; cursor: pointer;}

.layout-window-header-menuicon { display:block; cursor:pointer; z-index:5001; padding:8px 0px; margin: 0 0 0 3px; }
.layout-window-header-menuicon div { width:25px; height:3px; background:#222222; margin:5px; transition:all 0.3s ease; }
.layout-window-header-menuicon-toggler .layout-window-header-menu-l1 { transform: rotate(-45deg) translate(-5px,6px); }
.layout-window-header-menuicon-toggler .layout-window-header-menu-l2 { transition: all 0.7s ease; opacity: 0; }
.layout-window-header-menuicon-toggler .layout-window-header-menu-l3 { transform: rotate(45deg) translate(-5px,-6px); }

.layout-window-page-container { display:flex; flex-direction:row; flex-wrap:nowrap; height:100%; }
.layout-window-page-container-menu { position:fixed; top:50px; height:calc(100% - 30px); }
.layout-window-page-container-content { flex-grow:1; overflow-x:hidden; margin-left: 200px;}
*/

.layout-window-header { height: 50px; width:100%; position:fixed; top:0; background-color:#ffffff; z-index:6000;}
.layout-window-footer {position:fixed;bottom:0; left:0; z-index:5000; height:30px; width:100%; line-height:30px; display:flex; flex-direction:row; flex-wrap:nowrap; overflow:hidden;
                       background-color:black; color: #DDDDDD; font-size:0.9em; }
.layout-window-content { display:flex; flex-direction:row; flex-wrap:nowrap; height:100vh; height:100svh; padding-top:50px; padding-bottom:30px; box-sizing:border-box; }
.layout-window-content-menu { height:100%; overflow-y:auto; width:200px; flex-shrink:0; }

.layout-window-content-main { height:100%; overflow-y: auto; flex-grow:1; background-image: url(/Images/login_bg.jpg); background-size: cover; }
.layout-window-content-main-popup { height:100%; overflow-y: auto; flex-grow:1; background-color: #F0F0F0; }

.layout-window-content-sidebar { height:100%; flex-shrink:0; }
.layout-window-content-sidebar-sidebartoolbar { width:100%; height:35px; background-color: #ffffff; position:sticky; display:flex; flex-direction:row; flex-wrap:nowrap; z-index:500; top:0;}
.layout-window-content-sidebar-sidebartoolbar>div { padding:5px; cursor:pointer; }
.layout-window-content-sidebar-sidebartoolbar>div:hover { background-color:#eeeeee; }
.layout-window-content-sidebar-sidebartoolbar>div>img { height:25px; width:25px; }


.layout-window-outer {display:flex; flex-direction:column; height:100%; flex-wrap:nowrap;}
.layout-window-page { flex-grow:1; width:100%; margin-top:50px; margin-bottom: 30px; }

.layout-content-container {display:flex; flex-direction:column; flex-wrap:nowrap;}

.layout-content-rows {display: flex; flex-direction:row; flex-wrap:wrap;}
.layout-content-rows > div { flex:1; margin-right:50px; }
.layout-content-rows > div:last-child { margin-right:0; }

.layout-window-header-menutoggler { width:50px; height:50px; cursor: pointer; background-color: #ffffff; }
.layout-window-header-menutoggler:hover { background-color: #dddddd; }

.layout-window-header-menuicon { display:block; cursor:pointer; z-index:5001; padding:8px 0px; margin: 0 0 0 3px; }
.layout-window-header-menuicon div { width:25px; height:3px; background:#222222; margin:5px; transition:all 0.3s ease; }
.layout-window-header-menuicon-toggler .layout-window-header-menu-l1 { transform: rotate(-45deg) translate(-5px,6px); }
.layout-window-header-menuicon-toggler .layout-window-header-menu-l2 { transition: all 0.7s ease; opacity: 0; }
.layout-window-header-menuicon-toggler .layout-window-header-menu-l3 { transform: rotate(45deg) translate(-5px,-6px); }

.layout-window-page-container { display:flex; flex-direction:row; flex-wrap:nowrap; height:100%; }
.layout-window-page-container-menu { position:fixed; top:50px; height:calc(100% - 30px); }
.layout-window-page-container-content { flex-grow:1; overflow-x:hidden; margin-left: 200px; display:flex; flex-direction:row; flex-wrap:nowrap; background-color: #CCE2EA; }

.layout-window-sidebar { }
.layout-window-sidebar-container-content { background-color: #ffffff; height:100%; }
.layout-window-sidebar-container-header { height:42px; background-color: #ffffff; position:fixed; right:0; top:50px; border-top: 1px solid #eeeeee; z-index:500; margin-right:15px;}
.layout-window-sidebar-menuitem { padding: 8px; cursor:pointer; }
.layout-window-sidebar-menuitem:hover {background-color: #eeeeee; }
.layout-window-sidebar-menuitem>img { width:24px; height:24px; }
.layout-window-sidebar-menuitem-current { background-color: #eeeeee; }
.layout-window-sidebar-content {  }

.layout-content-container {display:flex; flex-direction:column; flex-wrap:nowrap; flex-grow:1; width:100%;}
.layout-content-sidebar { margin-top:40px; height:calc(100vh - 90px); background-color: #ffffff; }
.layout-content-sidebar-inner {  }

/* ================================= */
/* new ndigo- layout utility classes */
.ndigo-flex-H { display:flex; flex-direction:row; }
.ndigo-flex-H>div { flex: 0; }

.ndigo-flex-V { display:flex; flex-direction:column; }
.ndigo-flex-V>div { flex: 0; }

.ndigo-flex-wrap { flex-wrap:wrap;}
.ndigo-flex-grow { flex-grow:1 !important;}

.ndigo-breadcrumb-headersection { flex-grow:1; display:flex; flex-wrap:nowrap; flex-direction:row; align-items:center; overflow:hidden; }

.ndigo-height-100 { height:100%; }

.ndigo-padding-small { padding:1rem; }

.ndigo-visible-largeonly {  }                  /* visible only on large screens */
.ndigo-hidden-largeonly { display:none; }      /* hidden only on large screens */

.ndigo-visible-mediumonly { display:none; }    /* visible only on medium screens */
.ndigo-hidden-mediumonly {  }                  /* hidden only on medium screens */

.ndigo-visible-smallonly { display:none; }     /* visible only on small screens */
.ndigo-hidden-smallonly {  }                   /* hidden only on small screens */


/* for the main menu on the left side of the screen */
.app-window-menu {  background-color: #003B56; background: linear-gradient(180deg, rgba(0,59,86,1) 0%, rgba(0,44,64,1) 40%); height:100%; }
.app-window-menu-start { background-color: #ffffff; border-top:1px solid #eeeeee; }
.app-window-menu-start .app-window-menu-item-description { color: #000000; font-weight:bold; }
.app-window-menu-start:hover { background-color: #dddddd !important; }
.app-window-menu-collapsed { display:none !important; }
.app-window-menu-container-outer {display:flex; flex-wrap:nowrap; flex-direction:column; }
.app-window-menu-container { background-color:transparent; flex-grow:2; }
.app-window-menu-swapper { color:#ffffff; text-align:center; width:100%; cursor:pointer;line-height:3rem;}
.app-window-menu-swapper span {font-size:1.3rem;}
.app-window-menu-table {width:100%; border-collapse:collapse; line-height:2.5em; color:#FFFFFF;}
.app-window-menu-item {cursor:pointer; }
.app-window-menu-item:hover {  background-color: #006891; }
.app-window-menu-item a {text-decoration:none; display:block; color:#FFFFFF;}
.app-window-menu-item-h1 {font-weight:bold;}
.app-window-menu-item-selected {background-color:#AD071F;}
.app-window-menu-item-image { height:2em; padding-left:10px;}
.app-window-menu-item-image>img { width:1.8em; height:1.8em; }
.app-window-menu-item-description { }
.app-window-menu-item-header { border-bottom: 1px solid #7CC8FF; border-top:1px solid #7CC8FF; font-weight: bold;  }

.section-hinttext-light {padding: 10px 0 10px 0; display:flex; align-items:center;}
.section-hinttext-light-notification::before { font-family:Arial; content: "🛈"; font-size:2em; padding-right:10px; margin-bottom:2px; }

/* control styles */
.control-group {padding:5px; border: 1px solid #555555; border-radius: 5px 5px; background-color:#F0F8FF; margin: 10px 0 10px 0; }
.control-group-2 {padding:10px; border: 1px solid #cccccc; border-radius: 5px 5px; margin: 10px 0 10px 0; box-sizing:border-box;}

.f-control-field { display: inline-block; }

.f-control-label { font-weight:bold; margin-top:6px; }
.f-control-labelPanel { margin-top:6px; }
.f-control-state {width:12px; padding-right:2px;}f-button
.f-control-state img {height:12px;}
.f-control-datapoint-notfullwidth {width:50%; }

.f-control-fieldlabel { font-weight:normal; vertical-align:top; margin-top:7px; }
.f-control-fieldlabelPenel { font-weight:normal; vertical-align:top; margin-top:7px; }
.f-control-checkbox { vertical-align: middle; height:15px; margin:5px 0;}
.f-control-checkboxlabel { font-weight:normal; margin-left:5px; margin-top:5px; }
.f-control-fieldlabel2 { font-weight:normal; background-color: #cccccc; }
.field-validation-valid {display:none;}
.field-validation-error { display:flex; align-items:center; color:#f33b3b; margin-bottom:10px;}
.dialogpopup .field-validation-error {color: #ff8787 !important; }
.field-validation-error::before {
    content: url('/images/validation-error.png');
    margin-right: 5px;
}

/*.f-textbox { border: 1px solid #00A6D6; min-height: 26px; border-radius: 2px; padding: 5px 0 5px 5px; margin-bottom:4px; width:100%; box-sizing:border-box;}
*/
.f-textbox { border: 1px solid #00A6D6; min-height: 30px; border-radius: 2px; padding: 5px 0 5px 5px; margin-bottom:4px; margin-top:2px; width:100%; box-sizing:border-box;}
.f-textbox-tr { border: 1px solid #00A6D6; min-height: 26px; border-radius: 2px; padding: 5px 0 5px 5px; width:100%; box-sizing:border-box;}
.f-textbox-disabled { border: 1px solid #00A6D6; min-height: 26px; border-radius: 2px; padding-left:5px; padding-top:5px; margin-bottom:4px; background-color: #F0F0F0; }
.f-dropdownlist { border: 1px solid #00A6D6; min-height: 30px; border-radius: 2px; padding-left:5px; margin-bottom:4px;}
.f-checkbox { vertical-align:middle; height:15px; margin:5px 0;}

.f-button-1 { height:30px; cursor:pointer; border: 0; background-color: transparent;}
.f-button-1:hover { text-decoration: underline; }
.f-button-1:focus {  outline: none; border:0; }

.f-button-2{ border-radius: 3px; line-height:3em; cursor:pointer; padding:0 20px 0 4px; display:inline-block; margin-right: 10px; margin-bottom: 5px; text-decoration:none;
             border: 1px solid #aaaaaa; background-color: transparent; color: black; height:40px; display:inline-block;
}
.f-button-2>a { color: black !important; }
.f-button-2>img {display:inline-block;margin-left:5px; margin-right: 10px; vertical-align:middle; width:26px; height:26px;}
.f-button-2:hover { background-color: #dddddd; }
.f-button-2:focus { outline: none; border:0; background-color: #dddddd; }
.f-button-2-noimage {padding: 0 15px !important }

.f-button-3{ border-radius: 3px; line-height:3em; cursor:pointer; padding:0 20px 0 4px; display:inline-block; margin-right: 10px; margin-bottom: 5px;}
.f-button-3>a {}
.f-button-3>img {display:inline-block;margin-left:5px; margin-right: 10px; vertical-align:middle; width:26px; height:26px;}
.f-button-3:hover {}
.f-button-3:focus { outline: none; border:0; }

/*smaller button for light backgrounds*/
.f-button-4{ border-radius: 3px; line-height:3em; cursor:pointer; padding:0 20px 0 4px; display:inline-block; margin-right: 10px; margin-bottom: 5px; height:2.5em; line-height:2.5em; border: 1px solid #888888}
.f-button-4>img {display:inline-block;margin-left:5px; margin-right: 10px; vertical-align:middle; width:20px; height:20px;}
.f-button-4:hover { background-color:#dddddd;}
.f-button-4:focus { outline: none; }
.f-button-4-noimage {padding: 0 15px !important }
.f-button-4-notext { padding: 0 13px 0 4px !important; }
.f-button-4-notext>img {margin-right: 0 !important; }

/*small link button with image*/
.f-button-5{ cursor:pointer; display:inline-block; border:none; background-color: transparent; }
.f-button-5>a {}
.f-button-5>img {display:inline-block; margin-right: 5px; vertical-align:middle; width:16px; height:16px;}
.f-button-5:hover { }
.f-button-5:focus { outline: none; border:0; }

.f-hoverbutton-section {}
.f-hoverbutton {visibility:hidden;}
.f-hoverbutton-section:hover .f-hoverbutton {visibility:visible;}

.dirty-disabled {opacity:0.4; cursor:default !important;}
.dirty-disabled:hover { opacity: 0.4; background-color:transparent !important;}

.size-10 {width:10%;}
.size-20 {width:20%;}
.size-30 {width:30%;}
.size-40 {width:40%;}
.size-45 {width:45%;}
.size-50 {width:50%;}
.size-60 {width:60%;}
.size-70 {width:70%;}
.size-80 {width:80%;}
.size-90 {width:90%;}
.size-95 {width:95%;}
.size-100 {width:100%;}

.sizepx-10 { width:10px; max-width:80%;}
.sizepx-15 { width:15px;max-width:80%;}
.sizepx-20 { width:20px;max-width:80%;}
.sizepx-30 { width:30px;max-width:80%;}
.sizepx-40 { width:40px;max-width:80%;}
.sizepx-45 { width:45px;max-width:80%;}
.sizepx-50 { width:50px;max-width:80%;}
.sizepx-60 { width:60px;max-width:80%;}
.sizepx-70 { width:70px;max-width:80%;}
.sizepx-80 { width:80px;max-width:80%;}
.sizepx-90 { width:90px;max-width:80%;}
.sizepx-100 { width:100px !important; min-width:100px !important; max-width:80%;}
.sizepx-120 { width:120px !important; min-width:120px !important; max-width:80%;}
.sizepx-140 { width:140px;max-width:80%;}
.sizepx-150 { width:150px !important; min-width:150px !important; max-width:80%;}
.sizepx-160 { width:160px;max-width:80%;}
.sizepx-170 { width:170px;max-width:80%;}
.sizepx-180 { width:180px;max-width:80%;}
.sizepx-200 { width:200px !important; min-width:200px !important; max-width:80%;}
.sizepx-250 { width:250px;max-width:80%;}
.sizepx-300 { width:300px !important; min-width:300px; max-width:80%;}
.sizepx-350 { width:350px;max-width:80%;}
.sizepx-400 { width:400px; max-width:80%;}
.sizepx-430 { width:430px;max-width:80%;}
.sizepx-450 { width:450px;max-width:80%;}
.sizepx-500 { width:500px;max-width:80%;}
.sizepx-550 { width:550px;max-width:80%;}
.sizepx-600 { width:600px;max-width:80%;}
.sizepx-700 { width:700px;max-width:80%;}

.sizecalc-100-250 { width: calc(100% - 250px); }
.sizecalc-100-256 { width: calc(100% - 256px); }
.sizecalc-100-260 { width: calc(100% - 260px); }
.sizecalc-100-160 { width: calc(100% - 160px); }

.sizemax-100 {max-width: 100px;}
.sizemax-200 {max-width: 200px;}
.sizemax-300 {max-width: 300px;}
.sizemax-400 {max-width: 400px;}

.sizemin-50 {min-width: 50px;}
.sizemin-100 {min-width: 100px;}
.sizemin-200 {min-width: 200px;}

.sizemax-full {max-width: 100%;}

.height-50 {height:50px;}
.height-100 {height:100px;}
.height-150 {height:150px;}
.height-200 {height:200px;}
.height-250 {height:250px;}
.height-300 {height:300px;}
.height-400 {height:400px;}

.clickable {cursor:pointer;}

/*The outer wrapper, everything on the page is cpontained inside a div with this class. It is set to 100% height with overflow hidden so the page itself never scrolls.*/
.app-window-outer {height:100%; overflow:hidden; }
.app-window-header {position:fixed;top:0; left:0; z-index:5000; height:50px; width:100%; }
.breadcrumb { text-decoration:none; font-size:0.8rem; color:#666666; display:inline-block; line-height:3em; cursor:pointer;}
.breadcrumb:hover { background-color:#eeeeee; }


.systemconfig-menu {}
.systemconfig-menu-item-row { line-height:2em; display:flex; flex-direction:row; flex-wrap:nowrap; cursor:pointer; align-items:center;}
.systemconfig-menu-item-row-icon img { width:35px; height:35px; padding:2px 5px 2px 0; box-sizing:border-box; }
.systemconfig-menu-item-row-text { padding-left:20px; padding-right:20px; font-size:1.3em; flex-grow:1; }
.systemconfig-menu-item-row-text a  {text-decoration:none; display:block; color: #ffffff;}
.systemconfig-link {font-size:1.2em;}


/* this is the wrapper for the page containt (ex. the header and menu). The left margin is to cover the menu on the left and the top margin to cover the header.*/
.app-window-page { margin-left: 200px; margin-top: 50px; height:100%;}
.app-window-page-collapsed { margin-left: 0 !important; }

/*.app-window-page-collapsed { margin-left: 50px !important; }*/

/* The app-window-page-messages class is for the message bar on the top of the page content */
.app-window-page-messages { width: 100%; position:fixed; top:0; padding:5px; background-color: #000000; color: #FFFFFF; opacity:0.8; z-index:30000; display:none; cursor:pointer; max-height:100px; overflow-y:auto; }
.app-window-page-messages-entry>td { padding-right:5px; }

/* If a content page has a page-level menu bar, the div will appear before the app-window-page-contentwrapper2 */
.app-window-page-menu { display:flex; flex-wrap:nowrap; width:100%; padding:1px; z-index:5500; height:40px; position:fixed; background-color: #ffffff; border-top:1px solid #eeeeee;}
/*.app-window-page-menu-main { display:flex; flex-wrap:nowrap; flex-direction:row; }*/
.app-window-page-menu-button {}
.app-window-page-menu-button>.f-button-2 { border:none; display:flex; flex-direction:row; flex-wrap:nowrap; white-space:nowrap; align-items:center; }
.app-window-page-menu-button>.f-button-2>img { }
.app-window-page-menu-popout { display:none; }
.app-window-page-menu-button-hidden { display:none; }  /*in popout menu*/
.app-window-page-menu-button-wrongtab { display:none !important; } 
.app-window-page-menu-button-more {display:none; position:relative;}
.app-window-page-menu-button-popout {  }
.app-window-page-menu-button-popout>.f-button-2  { width:100%; }

.popoutmenu { position:absolute; right:-40px; top:40px; }
.popoutmenu-container { background-color: #9CC2CE; }
.popoutmenu-visible { display:block !important; }
.popoutmenu-container-below { top:100px; padding:5px; }
.popoutmenu-item { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; padding: 5px; cursor:pointer;}
.popoutmenu-item:hover {  }
.popoutmenu-item-image { margin-left:5px; margin-right: 10px; vertical-align:middle; width:26px; height:26px; }
.popoutmenu-item-label { }
.popout-options-template { position:fixed; display:none; padding:10px; z-index: 999999;}

/*.popoutmenu {position:relative;}
.popoutmenu-container { background-color: #9CC2CE; }
.popoutmenu-visible { display:block !important; }
.popoutmenu-container-below {position:absolute; right:-100px; top:100%; }
.popoutmenu-item { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; padding: 5px; cursor:pointer;}
.popoutmenu-item:hover {  }
.popoutmenu-item-image { margin-left:5px; margin-right: 10px; vertical-align:middle; width:26px; height:26px; }
.popoutmenu-item-label { }*/


/* this is the div placed inside app-window-page-inner for the actual page content. Views will rendered in (RenderBody) will usually start with this div. */
.app-window-page-contentwrapper {display:flex;  flex:1; margin-top: 40px;}

/* if a content page has a submenu this class is assigned. It displays the submenu left on the content page and it sticks to the top so its always visisble even if user scrolls. */
.app-window-page-submenu { position: fixed; margin-top: 0; z-index:5000; width:100%;}

/* The final content wrapper. This does not include the submenu and ensures a proper padding and margin in the content area  
   Inside this div the content blocks are placed */
.app-window-page-content { padding:20px; width:100%; box-sizing: border-box; margin-left:0; margin-top:50px; display:flex; flex-wrap: wrap; flex:1; }
.nosubmenu { margin-left:0 !important; margin-top:0 !important;}

/* app-window-page-content-blocks are used to display content in the content area. Each block can have a header and a topmenu  with actions for that block*/
.app-window-page-content-block-1 {  }
/* the header of a content block */
.app-window-page-content-block-header { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; margin-bottom:6px; color: #ffffff; font-weight:bold; }
.app-window-page-content-block-header img { width:36px; margin-right:10px; opacity:0.6;}
/* the inner part of a content block, type 1 (light) */
.app-window-page-content-block-inner1 { border-radius: 0px 0px; background-color: rgba(255,255,255,0.9); }
.app-window-page-content-block-inner1-topmenu { border-radius: 0px 0px 0 0; padding: 10px; }
.app-window-page-content-block-inner1-topnotification { border-radius: 5px 5px 0 0; padding: 10px; background-color:#ffffcc; }
.app-window-page-content-block-inner1-topnotification-warning { color:red; }
.app-window-page-content-block-inner1-topnotification-info { font-weight:bold; padding:2px 0;}
.app-window-page-content-block-inner1-content { padding:15px; /*overflow:auto;*/}

.app-window-page-content-block-notification { padding:0.7em; }

.header-button { cursor:pointer;}

.submenu {display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto; padding: 5px 0 5px 5px; align-items:center; overflow-x:auto; overflow-y:hidden; line-height:30px; }
.submenu-item { font-size: 1.1em; cursor:pointer; white-space:nowrap; line-height:30px; }
.submenu-item>span {padding:0 10px 0 10px;}

.submenu-item-selected {  }


.control-group  { padding:5px; border-radius: 5px 5px; margin: 10px 0 10px 0; }

.datagrid { border-collapse:collapse; table-layout: fixed; }
.datagrid-thead-tr { height: 30px; vertical-align:bottom; color:#007BAF; border-bottom: none; }
.datagrid-thead-tr-th { font-weight:bold; text-align:left; padding-right:20px; padding-left:0px; }
.datagrid-tbody-tr { border-bottom: 1px solid #eeeeee; color: #000000; height:35px;  }
.datagrid-tbody-tr-td { padding: 2px 10px 2px 0; white-space:pre; }
.datagrid-nowrap { white-space:nowrap; }
.datagrid-selectable-tbody-tr { cursor: pointer; }
.datagrid-selectable-tbody-tr:hover { background-color: #dddddd; }
.datagrid-selectedrow { background-color: #dddddd; }
.datagrid-pager { border: 1px solid var(--sidepanel-background) }
.datagrid-pager-button { cursor: pointer; padding:4px; }
.datagrid-pager-button:hover { text-decoration:underline;}
.datagrid-pager-button-current { background-color: #AD071F; color:white; font-weight:bold; cursor: default; }
.datagrid-tbody-tr-bad {background-color: #FFF4F4; }
.datagrid-tbody-tr-td-bad {font-weight: bold; color: #FF0000; }

.td-delete {color:red; font-weight:900; font-size:1.2rem; cursor:pointer;}
.td-delete:after {content: " X " ;}
.td-delete:hover {  }

.datagrid2 { border-collapse:collapse; table-layout: fixed; }
.datagrid2-thead-tr { color:#CCE2EA; border-bottom: 1px solid #CCE2EA; height: 30px; vertical-align:bottom; }
.datagrid2-thead-tr-th { font-weight:bold; text-align:left; padding-right:20px; padding-left:0px; }
.datagrid2-tbody-tr { border-bottom: 1px solid #006891; color: #eeeeee; height:25px; }
.datagrid2-tbody-tr-td { padding: 2px 10px 2px 0; white-space:nowrap; }
.datagrid2-selectable-tbody-tr { cursor: pointer; }
.datagrid2-selectable-tbody-tr:hover { background-color: #006891; }
.datagrid2-selectedrow { background-color: #006891; }

.grid-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.app-control-container { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; }
.app-control-container-block { }

.app-control-container-block-1 { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; }
.app-control-container-block-1 > div { width: 99%; max-width:99%; }

/* apply to a container to make it only half width. On tablet and mobile devices, the width increases to full */
.div-size-half { width:50% !important }

/* apply to a container to make it only 2/3 width. On tablet and mobile devices, the width increases to full */
.div-size-3q { width:75% !important }

.app-control-container-block-2 { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; }
.app-control-container-block-2 > div { width:49%; box-sizing:border-box; padding-right:50px; margin-bottom:40px; }

.app-control {width:100%; margin-right:20px; margin-bottom:3px;}

.app-control-flex {width:100%; margin-right:20px; margin-bottom:3px; display:flex; flex-direction:row; justify-content: flex-start;}
.app-control-flex-label {}
.app-control-flex-control { flex-grow: 1;}
.app-control-flex-control>span { width:100%; }
    
/*a wrapper for a single control block (label, input and validation)*/
.app-control-type-1 {width:100%; display:flex; flex-wrap:nowrap; flex-direction:row; align-items:center; margin-bottom:2px; }
.app-control-type-1>:first-child {width:200px; min-width:200px; border-bottom: 1px solid #eeeeee;  margin-right:15px; }
.app-control-type-1>:nth-child(2) {flex-grow:1; margin-right:15px; }

.app-control-fieldlabel {font-weight: bold; padding: 6px 0;}

.app-control-type-2 {width:100%; display:flex; flex-wrap:nowrap; flex-direction:row; align-items:center; margin-bottom:2px; }
.app-control-type-2>:first-child { color: #CCE2EA; border-bottom: 1px solid #006891;  width:200px; min-width:200px; margin-right:15px; }
.app-control-type-2>:last-child {flex-grow:1; }
.app-control-type-2>.app-control-fieldlabel {padding: 4px 0;}

.app-control-type-3 {width:100%; display:flex; flex-wrap:nowrap; flex-direction:column; align-items:flex-start; margin-bottom:2px; }
.app-control-type-3>:first-child { color:#000000; border-bottom: none; font-weight:bold; }
.app-control-type-3>:last-child { padding:10px 0 20px 5px; }

.app-control-hint {font-style: italic; color:#555555; margin:10px 0 5px 0; font-size:0.9em;}
.app-control-hint-dark {font-style: italic; color:#448dad; margin:10px 0 5px 0; font-size:0.9em;}

.app-article-selection-control-container { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; flex-grow:1; width:auto; }

/* ====================== */
/* side panels */
.sidePanelXL { height:calc(100% - 50px); position:fixed; top:50px; right:-70%; padding:0 20px 0 20px; 
               overflow-y:hidden; overflow-x:hidden; -webkit-overflow-scrolling: touch; background-color:#003B56; color:#FFFFFF; border-left: 1px solid #CCE2EA; box-shadow: -20px 0px 50px #000000;}
.sidePanelWait {position:absolute; left:45%;top:45%;}
.sidePanelXL-active { margin:0; transition: all .5s ease;}
.sidePanel-topmenu {height:49px; padding-top:20px; border-bottom: 1px solid #006891; }
.sidePanel-topmenu-button {cursor: pointer; margin-right: 5px;}
.sidePanel-topmenu-button:hover { background-color: #6E909F;}
.sidePanel-content {height: calc(100% - 70px); overflow-y:auto; }
.sidepanel-size2 {width:50%; }
.sidepanel-menu-title { font-size: 1.2em; color: #CCE2EA; text-transform: uppercase; font-weight:bold; }
.sidepanel-topmenu-inner {display:flex; flex-wrap:nowrap; flex-direction:row; align-items:center;}
.sidepanel-topmenu-inner>:first-child {flex-grow:1;}
.sidepanel-notification-block {padding: 10px 0 10px 0; margin-bottom:10px; /*background-color: #003349;*/ }

/* select2 classes*/
.selection {width:inherit; }
.select2-container {}
.select2-dropdown {z-index: 26000 !important; }

/*jquery ui overrides*/
/*.ui-widget {font-family: 'Arial' !important}
*/
.ui-widget {font-family: 'Roboto', sans-serif !important}
.ui-widget-content {background:initial !important; background-color:#ffffff !important;}
.ui-state-active {}
.ui-autocomplete { max-height:150px; overflow-y:auto; border: 1px solid #0099ff !important; z-index:30000 !important;}

.--status-blue { color:#1974FF; font-weight:500; vertical-align:top; padding-top:5px;}
.--status-red { color:#FF0000; font-weight:500; vertical-align:top; padding-top:5px;}
.--status-green { color:#329B2E; font-weight:500; vertical-align:top; padding-top:5px;}
.--status-yellow { color:#FFD800; font-weight:500; vertical-align:top; padding-top:5px;}
.--status-grey { color:#C0C0C0; font-weight:500; vertical-align:top; padding-top:5px;}

.--status-label-blue { display:inline-block; padding:5px; border-radius:5px 5px; background-color:#1974FF; color:#ffffff;; font-weight:normal; }
.--status-label-yellow { display:inline-block; padding:5px; border-radius:5px 5px; background-color:#FFD800; color:#000000; font-weight:normal; }
.--status-label-red { display:inline-block; padding:5px; border-radius:5px 5px; background-color:#FF0000; color:#ffffff; font-weight:normal; }
.--status-label-green { display:inline-block; padding:5px; border-radius:5px 5px; background-color:#329B2E; color:#ffffff; font-weight:normal; }
.--status-label-grey { display:inline-block; padding:5px; border-radius:5px 5px; background-color:#555555; color:#ffffff; font-weight:normal; }
.--status-label-lightgrey { display:inline-block; padding:5px; border-radius:5px 5px; background-color:#dddddd; color:#000000; font-weight:normal; }

.--fc-textbox-valuechanged {background-color: #eeffee;}

.--vfh {width:calc(100% + 1px); background-color:#efefef; height:30px; position:absolute; left:0; top:28px; z-index:4000;}
.--vfh2 {width:100%; background-color:#003B56; height:30px; position:absolute; left:0; top:42px; z-index:6000;}

.wfinstance-block-container-panel .wfinstance-block { margin:0 20px; padding:5px; border: 2px solid #006891; display:flex; flex-direction:column; flex-wrap:nowrap;}
.wfinstance-block-container-panel .wfinstance-block-notification-container { display:flex; flex-direction:column; flex-wrap:wrap; margin-top: 5px; border-top: 1px solid #cce2ea; }
.wfinstance-block-container-panel .wfinstance-block-notification { padding: 5px; display:flex; flex-direction:row; flex-wrap:wrap; align-items: center;}
.wfinstance-block-container-panel .wfinstance-block-notification>:first-child { margin-right:10px;}

.wfinstance-block-container-dashboard .wfinstance-block { margin:5px 0; padding:10px; border: 2px solid #B9DBE8; display:flex; flex-direction:column; flex-wrap:nowrap; min-width:200px; max-width:300px;}
.wfinstance-block-container-dashboard .wfinstance-block-image { padding-right: 10px;}
.wfinstance-block-container-dashboard .wfinstance-block-notification-container { display:flex; flex-direction:column; flex-wrap:wrap; margin-top: 5px; border-top: 1px solid #007baf; }
.wfinstance-block-container-dashboard .wfinstance-block-notification { padding: 5px; display:flex; flex-direction:row; flex-wrap:nowrap; align-items: center;}
.wfinstance-block-container-dashboard .wfinstance-block-notification>:first-child { margin-right:10px;}

.block-triangle-down { display:flex; flex-direction:column; flex-wrap:nowrap; align-items: center;}
.block-triangle-down>:first-child { width:0; height:30px; border-left: 12px solid #006891; border-right:12px solid #006891; }
.block-triangle-down>:last-child { width:0; height:0; border-left: 25px solid transparent; border-right:25px solid transparent; border-top: 25px solid #006891; }

.block-triangle-right { display:flex; flex-direction:row; flex-wrap:nowrap; align-items: center;}
.block-triangle-right>:first-child { width:30px; height:0; border-top: 12px solid #B9DBE8; border-bottom:12px solid #B9DBE8; }
.block-triangle-right>:last-child { width:0; height:0; border-top: 25px solid transparent; border-bottom:25px solid transparent; border-left: 25px solid #B9DBE8; }

.workflow-section { padding:10px; }
/* ============================================================================================*/
/* ============================================================================================*/
.outerOverlay {
    top: 0px;
    left: 0px;
    width: 100%;
    position: absolute;
    background-color: black;
    z-index: 15000;
    opacity: 0.4;
}
        
.innerOverlay
{
    position:fixed; width:120px; height:120px; left:50%; top:50%;
    margin-left:-60px; margin-top:-60px; z-index:25000;
}
.innerOverlay>img { width:32px; height:32px; }

.hidden {display:none;}
.hidden2 {display:none !important;}

.e-cut-icon:before { content: '\e735'; }
.e-save-icon:before { content: '\e735'; }

.dialogpopup { max-height:calc(90vh - 14px); height:calc(90vh - 14px); max-width: calc(90vw - 14px); width:calc(90vw - 14px); position: fixed; top:5vh; left:5vw; z-index:25000; padding: 5px 10px; 
               border: 2px solid #CCE2EA; background-color:#eeeeee; color:#5A5A5A; border-radius:5px 5px; box-shadow: 0 0 100px #000000; overflow:hidden; }
/*.dialogpopup {max-height: 80%; width:50%; position: fixed; top:10%; left:25%; z-index:25000; padding: 5px 10px;}*/
.dialogpopup-header { width:100%; height:30px; line-height:30px; margin-left:-10px; padding-right:18px; margin-top:-5px; padding-bottom:5px; position:relative;}
.dialogpopup-header-closebutton { position:absolute; right:5px; font-size:1.5rem; cursor:pointer}
.dialogpopup-header>span { vertical-align:middle; line-height: normal; margin-left:10px; margin-top:4px;}
.dialogpopup-content { width:100%; overflow: auto; height: calc(100% - 34px); }
.dialogpopup-topmenu { padding:5px; position:fixed; width:calc(100% - 10px); display:none;}

.--fc-panelslider {display:block; width:100%; cursor:pointer}
.--fc-panelslider-closed:after {content:"\25bc"; margin-left:10px; }
.--fc-panelslider-open:after {content:"\25b2"; margin-left:10px; }

.notification-bell-bubble { background-color:red; border-radius:12px; box-shadow: 0 0 0 2px #ffffff; color:#ffffff; font-size:10px; font-weight:700; height:16px; min-width:16px; width:auto; vertical-align:middle;
                             text-align:center; position:absolute; right:10px; top:10px; line-height:16px; 
}

.notification-bell.animation {
    animation-name: notification-bell-ringing;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes notification-bell-ringing {
    0%  {transform: rotate(0);}
   5%  {transform: rotate(-60deg);}
    10%  {transform: rotate(60deg);}
  15%  {transform: rotate(-60deg);}
  20%  {transform: rotate(60deg);}
  25%  {transform: rotate(-60deg);}
  30%  {transform: rotate(60deg);}
  35%  {transform: rotate(-60deg);}
  40%  {transform: rotate(60deg);}
  45%  {transform: rotate(-60deg);}
  50%  {transform: rotate(0);}
  100%  {transform: rotate(0);}
}

/*dashboard classes*/
.db-currentactivity-block-outer { border: 1px solid #bbbbbb; box-shadow: 0 0 8px #bbbbbb; margin-bottom: 20px;}
.db-currentactivity-block { display:flex; flex-direction:column; flex-wrap:nowrap; padding: 10px;  overflow-x:auto; }
.db-currentactivity-block-wfinstance { display:flex; flex-direction:row; flex-wrap:nowrap; padding:10px; background-color: #dedede; }

/*.db-todos-container { display:flex; flex-direction:row; flex-wrap:wrap; }
.db-todo-item-wrapper { width: 300px; overflow: hidden; margin:15px; border: 2px solid #000000; }
.db-todo-item-top { padding:3px; }
.db-todo-item-body { margin-top:10px; padding:10px;}
.db-todo-item-body-top { display:flex; flex-direction:row; flex-wrap:nowrap; }
.db-todo-item-body-top-icon { width:40px; }
.db-todo-item-body-top-content { padding-left:20px; }
.db-todo-item-body-top-content>div { padding:2px; }

.db-todo-item-body-top-title { flex:1; padding-left:5px; font-weight:bold; }
.db-todo-item-body-mid { padding: 15px 0; }
.db-todo-item-body-bottom {padding: 10px; text-align:center;}*/

.db-planning-table { height:1px;}
.db-planning-table-head {}
.db-planning-table-head-tr {}
.db-planning-table-head-tr-th { border-bottom:2px solid #222222; padding:10px; line-height:1.2rem; }
.db-planning-table-body {}
.db-planning-table-body-tr {}
.db-planning-table-body-tr-td { border-bottom: 1px solid #bbbbbb; border-left: 1px solid #bbbbbb; min-height:50px; font-size:1.1em;}
.db-planning-table-body-tr-td-name { border-right: 2px solid #222222; padding:10px; font-weight:bold; cursor:pointer; }
.db-planning-table-body-tr-td-container { height:100%; }
.db-planning-table-body-tr-td-content { height:100%; min-width:160px; display:flex; flex-direction:column; align-items:center; cursor:pointer;}
.db-planning-table-body-tr-td-content-data-item { padding:5px;}
.db-planning-table-body-tr-td-content-data-item:hover { box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.1);}
.db-planning-table-body-tr-td-content:hover { box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.1);}
.db-planning-table-body-tr-td-content-eng { padding:7px; margin:4px; border:1px solid #222222; background-color:#ffffff; min-width:120px; cursor:pointer; }
.db-planning-table-body-tr-td-content-eng:hover { background-color:#dddddd; }
.db-planning-droppable-highlight { box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.4);}
.db-planning-droppable-order-highlight { background-color:#dddddd;}
.db-planning-engineerblock { border:1px solid #000000; margin:5px; padding:4px; min-width:150px; text-align:center; cursor:pointer;}
.db-planning-engineerblock:hover { background-color:#dddddd;}

.dashboard-widget-container {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;}
.dashboard-widget-block { width: 33%;  box-sizing:border-box;}
.dashboard-widget-block-2 { width: 66%; }
.dashboard-widget-block-3 { width: 99%; }
.dashboard-widget-block-item { height:330px; margin:15px; padding:10px; background-color:#eeeeee; border-radius:15px; box-shadow: 0px 0px 30px #aaaaaa; overflow:auto;}
.dashboard-widget-block-item-2 { height: auto !important; }
.dashboard-widget {
}

.image-viewer-hidden { display:none; }
.image-viewer-overlay { top:0; left:0; width:100%; position:absolute; background-color: #222222; z-index: 15000; transition:all 0.5s ease-in-out }
.image-viewer { z-index: 20000; position:fixed; width:90%; height:90%; top:5%; left:5%;}
.image-viewer-closebutton { position:fixed; top:20px; right:20px; z-index:21000; cursor:pointer; }
.image-viewer-zoomin { position:fixed; top:20px; right:50px; z-index:21000; cursor:pointer; }
.image-viewer-zoomout { position:fixed; top:20px; right:50px; z-index:21000; cursor:pointer; }
.image-viewer-leftbutton { position:fixed; top:50%; left:20px; z-index:21000; cursor:pointer; }
.image-viewer-rightbutton { position:fixed; top:50%; right:20px; z-index:21000; cursor:pointer; }
.image-viewer-button { fill: #ffffff; color:#555555; stroke:#555555; }
.image-viewer-button:hover { fill: #bbbbbb; }
.image-viewer-image { z-index:20000; width:100%; height:100%; overflow:auto; position:relative; }
.image-viewer-image>img { width:100%; height:100%; object-fit:contain ;}
.image-viewer-image>img.zoomed { object-fit:none; width:auto; height:auto; margin:auto; }
.image-viewer-image-hidden { display:none; }
.image-viewer-content-outer { position:relative; width:100%; height:100%;}
.image-viewer-content-inner { width:100%; height:100%; }

/* ============================================================================================*/
/* ============================================================================================*/
/* ============================================================================================*/
/* Media queries for responsiveness*/
@media all and (max-width:1450px) {
    .div-size-half {width: 65% !important; }
    .div-size-3q { width:85% !important }

}

@media all and (max-width:1300px) {
    .div-size-half {width: 75% !important; }
    .div-size-3q { width:100% !important }

    .app-window-page-contentwrapper {display: flex; flex-direction:column; }
    .app-window-page-content { padding: 10px; width:100%; box-sizing: border-box; margin-left:0; margin-top:50px;}
    .app-window-page-content-block-inner1-content { padding: 10px; }
    .nosubmenu {margin-top:0 !important;}

    .dashboard-widget-block { width: 48%;  box-sizing:border-box;}
    .dashboard-widget-block-2 { width: 96%; }
    .dashboard-widget-block-3 { width: 96%; }
}

@media all and (max-width:1200px) {
    .app-control-container-block-2 > div { width: 100%; max-width:100%; padding-right:0; margin-bottom:0;}
}

@media all and (max-width:900px) {

    /*  schermen <900px tonen de input fields onder de labels ipv ernaast */
    .f-control-field { display: block; width:100%; }   
    .app-control-type-1 { flex-direction:column; align-items:flex-start; margin-bottom:20px;}
    .app-control-type-1>:first-child { width:100%; margin-right:0; min-width:0; }
    .app-control-type-1>:nth-child(2) {width:100%; margin-right:0; margin-top:5px;}
    .sidepanel-size2 {width:75%; }
    .sizepx-100 {width:100% !important; min-width:100% !important; max-width:100% !important;}
    .sizepx-500 {width:100% !important; min-width:100% !important; max-width:100% !important;}
    .div-size-half {width: 100% !important; }
    .f-control-datapoint-notfullwidth {width:80%; }

    .app-article-selection-control-container > div { width:100%; }
    .app-article-selection-control-container > div > div:first-child { width:100px; }
}

@media all and (max-width:700px) {
    .app-control-type-2 { flex-direction:column; align-items:flex-start; margin-bottom:20px;}
    .app-control-type-2>:first-child { width:100%; margin-right:0; min-width:0; }
    .app-control-type-2>:nth-child(2) {width:100%; margin-right:0; margin-top:5px;}

    .f-control-datapoint-notfullwidth { flex-grow:1; }
    
    .dashboard-widget-block { width: 100%;  box-sizing:border-box;}
    .dashboard-widget-block-2 { width: 100%; }
    .dashboard-widget-block-3 { width: 100%; }

}

@media all and (max-width:600px) {
    .app-window-header { background-image: none; }
}