/* default colors 
   ==============

    #003B56   Dark blue   (menu background)    RGB=0,59,86
    #006891   Blue        (menu item hover background)
    #CCE2EA   Light blue  (inner content page background)
    #007BAF   Medium blue  (submenu font)
*/
html, body 
{ 
    font-family: 'Arial'; color: #5A5A5A; 
    padding:0; margin:0; height:100%;
}

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

input{ font-family: 'Arial';}
textarea{ font-family: 'Arial';}
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;
    background-color: #FFF8D8;
}
input[readonly] {
    background-color: #eeeeee;
}

p {margin:0; padding:0;}
h1 {margin-top:0; padding-top:0;}
h2 {margin-top:10px; padding-top:0;}
h3 {margin:0; padding:0;}
h4 {color: #006891;}

.login-main { background: url(/images/login_bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height:100%; }

.login-block {
    margin: auto;
    width: 400px;
    background-color: #000000;
    opacity: 0.70;
    border: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 80px;
    max-height: 80%;
    overflow-y: auto;
    font-size: 1.3em;
    color: #ffffff;
}

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

.link-dark {cursor:pointer; color: #3EADD8; text-decoration:none;}
.link-dark:hover {text-decoration:underline;}


.h-underline { border-bottom:1px solid #eeeeee; line-height:40px; }

.divider-dark {border-bottom:2px solid #B9DBE8; margin-bottom: 10px;}

.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-color: #F0F0F0; }
.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; }

.app-window-footer-icon { height:25px; cursor:pointer; }
.app-window-footer-icon:hover { opacity:0.5; }

.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 {  }

.home-element-block { overflow:hidden; background-color: #ffffff;}
.home-element-block-account { width:200px; height:200px; display:flex; flex-direction:column; }
.home-element-block-message { display:flex; flex-direction:column; }
.home-element-block-content { padding:15px; text-align: center; }
.home-element-block-accent { padding:10px; text-align:center; background-color: #006891; color:#ffffff;}
.home-element-block-selectable { cursor: pointer; }
.home-element-block-selectable:hover { box-shadow: 0px 0px 20px #888888; }
.home-element-block-message-header { color: #006891; font-weight:bold; padding:5px; border-bottom:1px solid #006891;  }

/* 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; background-color: #003B56; background: linear-gradient(180deg, rgba(0,59,86,1) 0%, rgba(0,44,64,1) 40%);}
.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;  }

.systemconfig-menu-item-row:hover { background-color: #006891; }


/* 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; margin:5px 0;}
.f-control-field-highlight { font-size: 1.2rem;}

.f-control-label { font-weight:bold; margin-top:6px; }
.f-control-labelPanel { margin-top:6px; margin-bottom:6px; color:white; }
.f-control-state {width:12px; padding-right:2px;}
.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; color: #CCE2EA; }
.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:disabled {background-color: #eeeeee; }
.f-textbox-dark:focus {background-color: #CCE2EA; }
.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-textbox2 { border:none; padding:5px; margin:0; width:50px;}

.f-button-1 { height:30px; cursor:pointer; border: 0; background-color: transparent;  color: #007BAF;}
.f-button-1:hover { text-decoration: underline; color: #CCE2EA; }
.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-2-slim { line-height:30px; height:30px; }

.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;
             border: 1px solid #aaaaaa; background-color: transparent; color: #dddddd; height:40px; display:inline-block;
}
.f-button-3>a { color: black !important; }
.f-button-3>img {display:inline-block;margin-left:5px; margin-right: 10px; vertical-align:middle; width:26px; height:26px;}
.f-button-3:hover { background-color: #006891; }
.f-button-3:focus { outline: none; border:0; background-color: #006891; }

/*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; color:#006891; }
.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>span { text-decoration:underline; }
.f-button-5:focus { outline: none; border:0; }

/*small button suitable for rows in table*/
.f-button-6{ cursor:pointer; display:inline-block; border-radius: 3px; border: 1px solid #888888; background-color: #eeeeee; color:black; padding:4px 20px; font-weight:bold; opacity:0.7; }
.f-button-6:hover { opacity:1; }
.f-button-6:focus { outline: none; border:0; }

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

.f-hoverswap-container {}
.f-hoverswap-main {}
.f-hoverswap-sub {display:none;}
.f-hoverswap-container:hover .f-hoverswap-main {display:none;}
.f-hoverswap-container:hover .f-hoverswap-sub {display:initial;}


.wTextbox_1{border: 1px solid #00A6D6; }
.wButton_1 {border: 1px solid #000000; background-color:#DDDDDD; }
.wButton_1:hover {background-color: #EEEEEE; }
.wButton_3{ background-color:transparent;color: #1CB44E; }

.dirty-highlight {background-color: #BBEDBB !important;}
.dirty-highlight.dirty-highlight-dark {background-color: #047204 !important;} 

.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 contained 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%; background-color:#ffffff; border-bottom: 2px solid #AD071F; }
.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 content (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: 50%; position:fixed; top:0; left:25%; min-height:100px; padding:5px; background-color: #000000; color: #FFFFFF; opacity:0.8; z-index:30000; display:none; cursor:pointer; max-height:400px; 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: #ffffff; max-height:300px; overflow-y:auto;}
.popoutmenu-visible { display:block !important; z-index:46000;}
.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 { background-color: #dddddd; }
.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;
                           background-color:#003B56;
}

/* 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 at the top of 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%; background-color: #F0F0F0; }

/* 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; 
                                        font-size: 1.2em; color: #003B56; 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; border-left: 1px solid #bbbbbb; border-right: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; background-color: #ffffff; margin-bottom:20px; }
.app-window-page-content-block-inner1-topmenu { border-radius: 0px 0px 0 0; padding: 10px; background-color: #F2F2F2; border-top: 1px solid #bbbbbb; }
.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;*/}

/*check: can be removed?*/
.app-window-page-content-block-notification { padding:0.7em; background-color: #FFF8DD; font-weight:bold;}

.header-button { cursor:pointer;}
.header-button:hover {background-color: #eeeeee;}
.header-button-sidebar { display:block; }

.block-separatorline-bottom {
    border-bottom: 1px solid #003B56;
}
.block-separatorline-panel-bottom {border-bottom: 1px solid #CCE2EA; }

.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;  color: #003B56; font-size:1.2em; border-bottom: 4px solid transparent;}
.submenu-item>span {padding:0 10px 0 10px;}
.submenu-item::before { content: "" }
.submenu-item:hover { color: #003B56; background-image: none; border-bottom: 4px solid #5597C8;}
.submenu-item-selected { background-image: none; border-bottom: 4px solid #5597C8; font-weight:bold; }

.control-group  { padding:5px; border-radius: 5px 5px; margin: 10px 0 10px 0; border: 1px solid #555555; background-color:#F0F8FF; }

.datagrid { border-collapse:collapse; table-layout: fixed; }
.datagrid-thead-tr { height: 30px; vertical-align:bottom; color:#003B56; border-bottom: 1px solid #003B56; }
.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:25px; }
.datagrid-tbody-tr-td { padding: 4px 10px 2px 0; white-space:pre; }
.datagrid-tfoot-tr {background-color:#eeeeee;}
.datagrid-tfoot-tr-td {font-weight:bold; border-top:solid 1px #003B56;}
.datagrid-nowrap { white-space:nowrap; }
.datagrid-selectable-tbody-tr { cursor: pointer; }
.datagrid-selectable-tbody-tr:hover {  background-color: #dddddd !important; }
.datagrid-selectedrow { background-color: #dddddd; }
.datagrid-pager { border: 1px solid #003B56; }
.datagrid-pager-button { cursor: pointer; padding:4px; }
.datagrid-pager-button:hover { text-decoration:underline;}
.datagrid-pager-button-current { cursor: default; background-color: #AD071F; color:white; font-weight:bold;}
.datagrid-tbody-tr-bad {background-color: #FFF4F4; }
.datagrid-tbody-tr-td-bad {font-weight: bold; color: #FF0000; }
.datagrid-tbody-tr-accent { font-weight:bold; }
.td-delete {color:red; font-weight:900; font-size:1.2rem; cursor:pointer;}
.td-delete:after {content: " X " ;}
.td-delete:hover {  }
.td-a-right { text-align:right; }

.datagrid2 { border-collapse:collapse; table-layout: fixed; }
.datagrid2-thead-tr { height: 30px; vertical-align:bottom; color:#CCE2EA; border-bottom: 1px solid #CCE2EA; }
.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 !important; }
.datagrid2-selectedrow { background-color: #006891; }

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

.grid-workflowlogrecord-w { background-color: aliceblue; }
.grid-workflowlogrecord-w-dark { background-color: #2e4852; }

.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 {width:200px; min-width:200px; margin-right:15px; color: #CCE2EA; border-bottom: 1px solid #006891; }
.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:0 0 20px 5px; }

.app-control-hint {font-style: italic; color:#555555; margin:5px 0 15px 0; font-size:0.9em;}
.app-control-hint-dark {font-style: italic; color:#448dad; margin:5px 0 15px 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; }

.app-control-filedrop { }
.app-control-filedrop.drophighlight {
    background-color: #eeeeee;
}
.app-control-filedrop.drophighlight-dark {
    background-color: #555555;
}

.app-control-infolabel { display:inline-block; padding: 4px 0; font-style:italic; }
.app-control-infolabel-dark { display:inline-block; padding: 4px 0; color: #72b0c9; font-style:italic;}

/* ====================== */
/* 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; height:32px;}
.sidePanel-topmenu-button:hover { background-color: #6E909F;}
.sidePanel-content {height: calc(100% - 70px); overflow-y:auto; }
.sidepanel-size1 {width:35%; }
.sidepanel-size2 {width:50%; }
.sidepanel-size3 {width:65%; }
.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;*/ }

.dk-selected {   border: 1px solid #00A6D6; }
.dk-selected:focus {
    border-color: #0099ff;
    box-shadow: 0 0 10px #0099ff;
}

/* ================================= */
/* new ndigo- layout utility classes */
.ndigo-flex-H { display:flex; flex-direction:row; align-items:center; }
.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-flex-grow-2 { flex-grow:2 !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 */

.ndigo-flipped-h { transform: rotateY(180deg); }

.ndigo-report-accentcolor-1 { background-color: #FFF5D1; }
.ndigo-report-accentcolor-2 { background-color: #D2FFBF; }

.ndigo-browser-filter-container { display:flex; flex-direction:row; align-items:end; gap:10px; flex-wrap:wrap;}
.ndigo-browser-filter-container .f-button-4 {margin-bottom:0;}
.ndigo-browser-filter {width:100%; display:flex; flex-wrap:nowrap; flex-direction:column; align-items:start; flex-basis:0;}
.ndigo-browser-filter>:nth-child(1) {font-weight:bold; }
.ndigo-browser-filter>:nth-child(2) {width:100px; }
.ndigo-browser-filter .f-textbox {margin-bottom:0;}

/*.ndigo-notification { display:flex; flex-direction:row; flex-wrap:nowrap; background-color:#eeeeee; }
.ndigo-notification>div:first-child { background-image: url(/) }
*/

/* ================================= */

/* select2 classes*/
.selection {width:inherit; }
.select2-container { height:30px; }
.select2-container--open { box-shadow: 0 0 10px #0099ff; }
.select2-dropdown {z-index: 26000 !important;  border: 3px solid #00A6D6 !important; }
.select2-selection--single { border: 1px solid #00A6D6 !important; min-height: 30px !important; border-radius: 2px !important; }
.select2-selection--multiple { border: 1px solid #00A6D6 !important; min-height: 30px !important; border-radius: 2px !important; }
.select2-selection__choice { background-color: #f4f4f4 !important; border:none !important; padding:3px !important; }
.select2-results__option--highlighted[aria-selected] { background-color: #003B56 !important; color:white !important; }
.select2-selection__rendered {color:black !important;}
.select2-selection--multiple { height:30px; overflow:auto; }
.select2-search__field {
    box-shadow: none !important;
    border-color: #dddddd !important;
}


.star-rating { margin: 10px auto; }
.star-rating > fieldset { border: none; display: inline-block; }
.star-rating > fieldset:not(:checked) > input { position: absolute; top: -9999px; clip: rect(0, 0, 0, 0); }
.star-rating > fieldset:not(:checked) > label { float: right; width: 1em; padding: 0 0.05em; overflow: hidden; white-space: nowrap; cursor: pointer; font-size: 300%; color: #CCE2EA; }
.star-rating > fieldset:not(:checked) > label:before { content: '\2606'; }
.star-rating > fieldset:not(:checked) > label:hover,
.star-rating > fieldset:not(:checked) > label:hover ~ label { color: #003B56; }

.star-rating > fieldset:not(:checked) > label:hover:before,
.star-rating > fieldset:not(:checked) > label:hover ~ label:before { content: '\2605'; }

.star-rating > fieldset > input:checked ~ label { color: #003B56; }
.star-rating > fieldset > input:checked ~ label:before { content: '\2605'; }
.star-rating > fieldset > label:active {  position: relative; top: 2px; }
/*end star ratimng*/

/* star rating view classes, for displaying the star rating of an entity*/
.star-rating-view-1 {font-weight:100; font-size:1.3em; margin-left:10px;}
.star-rating-view-2 {font-weight:100; }

.--vfh {width:101%; background-color:#ffffff; 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;}

/*jquery ui overrides*/
.ui-widget {font-family: 'Arial' !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; padding-top:1px;}
.--status-red { color:#FF0000; font-weight:500; padding-top:1px;}
.--status-green { color:#329B2E; font-weight:500; padding-top:1px;}
.--status-yellow { color:#FFD800; font-weight:500; padding-top:1px;}
.--status-grey { color:#C0C0C0; font-weight:500; padding-top:1px;}

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


.--fc-textbox-valuechanged {background-color: #eeffee;}
.--fc-copiedcell { background-color: #e5e7d0; }
.--fc-droppable-hover-row { background-color: #ffffcc !important; }

.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;}

.wfinstance-block-s-lb-new { background-color:#B9DBE8; }
.wfinstance-block-s-db-new { background-color:#006891; }
.wfinstance-block-s-lb-progress { background-color:#B9DBE8; }
.wfinstance-block-s-db-progress { background-color:#006891; }
.wfinstance-block-s-lb-complete { background-color:#ADD3AD; }
.wfinstance-block-s-db-complete { background-color:#2c522c; }
.wfinstance-block-s-lb-cancelled { background-color:#E5A2A2; }
.wfinstance-block-s-db-cancelled { background-color:#b12f2f; }

.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; }

.block-section-warning { display:flex; flex-direction:row; flex-wrap:nowrap; gap:20px; align-items:center; }
.block-section-warning>div:first-child { width:32px; height:32px; background-image:url(/images/warning.png); }
.block-section-warning>div:last-child { color: #FF9E38; }

.workflow-section { padding:10px; font-weight:bold; font-size:1.1em;}
.workflow-section>div { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center;}
.workflow-section>div>div { margin-right:10px; }

.quickaction-item { cursor:pointer; }
.quickaction-item:hover { background-color: #eeeeee; }

.certificate-field-label { text-decoration:underline; font-size:1.4em; }

/* ============================================================================================*/
/* ============================================================================================*/
.outerOverlay {
    top: 0px;
    left: 0px;
    width: 100%;
    position: absolute;
    background-color: black;
    z-index: 35000;
    opacity: 0.4;
}
        
.innerOverlay
{
    position:fixed; width:120px; height:120px; left:50%; top:50%;
    margin-left:-60px; margin-top:-60px; z-index:36000;
}
.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:#003B56; color:#FFFFFF; border-radius:5px 5px; box-shadow: 0 0 100px #000000; overflow:hidden; }
.dialogpopup-header { width:100%; height:30px; line-height:30px; margin-left:-10px; padding-right:18px; margin-top:-5px; padding-bottom:5px; position:relative;
                      border: 1px solid #000000; background-color:#CCE2EA; border-radius:2px 2px; color:#003B56; font-weight:bold;
}
.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-x:hidden; overflow-y:auto; height: calc(100% - 34px); }
.dialogpopup-topmenu { padding:5px; position:fixed; width:calc(100% - 10px); display:none;}

.dialog-biginput { 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:#003B56; border-radius:5px 5px; box-shadow: 0 0 100px #000000; overflow:hidden;
}


.--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; }
.--fc-datagrid-th-sortable {cursor:pointer; }

.droppable-sort-highlight { background-color:#ffffff !important; border-bottom: solid 4px #006891 !important;}

.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:#ffffff; overflow:auto;}
.dashboard-widget-block-item-2 { height: auto !important; }
.dashboard-widget {
}

.ck-content {
    color: black;
    font-size:0.9rem;
}

/* ============================================================================================*/
/* ============================================================================================*/
/* ============================================================================================*/
/* 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:1024px) {
    .ndigo-visible-largeonly { display:none; }
    .ndigo-visible-mediumonly { display:initial; } 
    .ndigo-visible-smallonly { display:none; } 

    .ndigo-hidden-largeonly { display:initial; }
    .ndigo-hidden-mediumonly { display:none; }
    .ndigo-hidden-smallonly { display:initial; } 
}


@media all and (max-width:900px) {
    .app-window-page-content { padding: 10px 5px 5px 5px; }
    .app-window-page-content-block-inner1-content { padding: 5px; }
    .app-window-page-messages { width: 100%; top:0; left:0; min-height:60px; }

    /*  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-size1 {width:50%; }
    .sidepanel-size2 {width:75%; }
    .sidepanel-size3 {width:90%; }
    .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; }

    .layout-window-content-sidebar { display: none !important; }
    .layout-window-sidebar { display: none !important; }
    .header-button-sidebar { display:none; }

}

/*small screens*/
@media all and (max-width:768px) {
    .ndigo-visible-largeonly { display:none; }
    .ndigo-visible-mediumonly { display:none; } 
    .ndigo-visible-smallonly { display:initial; } 

    .ndigo-hidden-largeonly { display:initial; }
    .ndigo-hidden-mediumonly { display:initial; }
    .ndigo-hidden-smallonly { display:none; } 

    .ndigo-breadcrumb-headersection-inner { display:none; }

    .ndigo-padding-small { padding:5px; }
    .ndigo-flex-H { flex-direction:column; }
    .ndigo-flex-H>div { width:100%; }

    .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-item { margin:5px; padding:5px;}

    .dashboard-widget-block-2 { width: 100%; }
    .dashboard-widget-block-3 { width: 100%; }
    .sidepanel-menu-title { font-size: 1em; }

    .sidepanel-size1 {width:90%; }
    .sidepanel-size2 {width:90%; }
    .sidepanel-size3 {width:90%; }

    .dialogpopup { max-height:calc(100vh - 30px); max-height:calc(100svh - 30px); height:calc(100vh - 30px); height:calc(100svh - 30px); max-width: calc(100vw - 32px); width:calc(100vw - 32px); top:1vh; left:1vw;  }
}

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

@media all and (max-width:490px) {
    .login-block {
        width: calc(100% - 40px);
        margin: 0;
        height: 100%;
        max-height: 100%;
        position: relative;
        padding: 20px;
        left: 0;
        top: 0;
        transform: none !important;
    }
    .login-main {
        background: none !important;
    }

}