/* Common */
body
{
    /* DXCOMMENT: Duplicate a font family and font size from the web.config (devexpress->themes->font settings) for the web-site's HTML content */
    font: 16px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

.start-hidden {
    visibility: hidden;
}

/* Article Layout */
.text-content
{
    min-height: 100%;
    /*max-width: 916px;*/

    /*margin: 0px auto;*/
    padding: 0px 14px;
    word-wrap: break-word;
    font: 14px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
    /*font: 16px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;*/
}

/* grid padding for large screens */
@media (min-width: 959px)
{
    .text-content
    {
        /* padding: 0px 48px; */
	    padding: 0px 30px;
    }
}


.text-content.center {
    max-width: 916px;
    margin: 0px auto;
}


/* Base Styles */
.text-content
{
    color: #666;
    line-height: 1.5;
}
    .text-content p
    {
        margin-top: 0;
        margin-bottom: 1rem;
    }

/* Headers */
.text-content h1, .text-content h2, .text-content h3, .text-content h4, .text-content h5, .text-content h6
{
    color: #444;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.text-content h3, .text-content h4, .text-content h5, .text-content h6
{
    font-weight: 600;
}

.text-content h1
{
    /*font-size: 2em;*/
    font-size: 1.75em;
}
.text-content h2
{
    /*font-size: 1.75em;*/
    font-size: 1.5em;
}
.text-content h3
{
    font-size: 1.375em;
}
.text-content h4
{
    font-size: 1.25em;
}
.text-content h5
{
    font-size: 1.125em;
}
.text-content h6
{
    font-size: 1em;
}

.text-content > h1:not(:first-child)
{
    margin-top: 1.75rem;
}

.text-content > h2:not(:first-child)
{
    margin-top: 1.5rem;
}

.text-content > h3:not(:first-child)
{
    margin-top: 1.25rem;
}

.text-content > h4:not(:first-child)
{
    margin-top: 1.125rem;
}

.text-content > h5:not(:first-child)
{
    margin-top: 1rem;
}

.text-content > h6:not(:first-child)
{
    margin-top: .9rem;
}

/* Title + Lead */
.text-content .title
{
    /*margin-top: 1.2rem;*/
    margin-top: 0.4rem;
    margin-bottom: 0.8rem;
}

@media (min-width: 576px)
{
    .text-content .title
    {
        color: #222;
        /*font-size: 2em;*/
        font-size: 1.75em;
        font-weight: 600;
    }

}

@media (min-width: 959px)
{
    .text-content .title
    {
        margin-top: 1.2rem;
        margin-bottom: 2.0rem
    }

    .text-content .title.details {
        margin-bottom: 0.8rem;
    }
}

.text-content .lead
{
    /*font-size: 1.125rem;*/
    font-size: 1.375rem;
    /*font-size: 1.2rem;*/
    font-weight: 300;
}
@media (min-width: 576px)
{
    .text-content .lead
    {
        /*max-width: 80%;*/
        margin-bottom: 1rem;
        /*font-size: 1.5rem;*/
        font-size: 1.375rem;
        /*font-size: 1.2rem;*/
    }
}

/* Home page title */
.text-content .home-title
{
    margin-top: 1.2rem;
    margin-bottom: .8rem;
    font-size: 2.25em;
    text-align: center;
    /*font-variant-caps: small-caps;*/
}
@media (min-width: 576px)
{
    .text-content .home-title
    {
        color: #222;
        font-size: 2.25em;
        font-weight: 600;
    }
}


.text-content > h2.category
{
    color: #222;
    font-weight: 600;
}

.text-content > h2.category:not(:first-child)
{
    margin-top: 3rem;
}


/* #href bookmark jump */
.text-content > h1[id]::before,
.text-content > h2[id]::before,
.text-content > h3[id]::before,
.text-content > h4[id]::before
{
    display: block;
    
    /* Main Menu Height (3.13rem) + .title margin-top = 1.2rem */
    /*height: calc(3.13rem + 1.2rem);*/ 
    /*margin-top: calc(-3.13rem - 1.2rem);*/

    /* MODIFIED to ensure footer is pushed further down */
    height: calc(3.13rem - 1.8rem); 
    margin-top: calc(-3.13rem + 1.8rem);

    visibility: hidden;
    content: "";
}


/* Link */
.content a,
.text-content a,
.page-toolbar-wrapper a,
.dxh-content a
{
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    color: #35B86B;
    
    /* added */
    text-decoration: none;

}
.content a:visited,
.text-content a:visited,
.page-toolbar-wrapper a:visited,
.dxh-content a:visited
{
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    /*color: #278A50;*/ /* 25% black overlay */
}
.content a:hover,
.text-content a:hover,
.page-toolbar-wrapper a:hover,
.dxh-content a:hover
{
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    /*color: #7BD09E;*/ /* 35% white overlay */

    /* added */
    text-decoration: underline;
}

.text-content b, .text-content strong
{
    color: #444;
}

mark
{
    /* DXCOMMENT: Duplicates color from the web.config (devexpress->themes->baseColor) */
    background-color: #35B86B;
    color: #fff;
}

small
{
    color: #999999;
    font-size: 0.75em;
}

code, pre
{
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
}

hr
{
    height: 1px;
    opacity: 0.1;
    background-color: #000000;
    border: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

blockquote
{
    background-color: #f2f2f2;
    color:#444;
    margin:0;
    margin-bottom: 1rem;
    font-size: 1.125em;
    padding: 29px 26px;
    border: 0;
    border-left: 6px solid #d8d8d8;
}

blockquote p
{
    margin-top:0;
}
blockquote footer
{
    display: block;
    font-size: 0.875em;
    font-style: italic;
    color: #999;
}

blockquote footer::before
{
    content: "\2014 \00A0";
}
        
/* Contents (Left Panel) */
.section-caption.contents-caption
{
    padding-left: 31px;
    border-top: none !important;
}


/* Lists */
.text-content ul,
.text-content ol
{
    margin-top: 1em;
    margin-bottom: 1em;
}

@media (min-width: 992px)
{
    .bd-content > ul, .bd-content > ol, .bd-content > p
    {
        max-width: 80%;
    }
}

/* but, ignore list in html editor */
.dxhe-control ul, .dxhe-control ol {
    margin-top: inherit;
    margin-bottom: inherit;
}

/* Text Alignment */
.text-center
{
    text-align: center !important;
}

.text-right
{
    text-align: right !important;
}

.indent-p
{
    padding-left: 40px;
    padding-right: 20px;
}

.bordered-block
{
    background-color: #f2f2f2;
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;
}

@media (min-width: 576px)
{
    .bordered-block
    {
        padding: 1.5rem;
        margin-right: 0;
        margin-left: 0;
        border-width: .2rem;
    }
}

/* Tables */
.table
{
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
}

.table td,
.table th
{
    padding: .75em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;

    vertical-align: top;
    border-top: 1px solid #dee2e6;
    text-align: left;
}

.table thead th
{
    border-bottom: 1px solid #d8d8d8;
    background-color: #f2f2f2;
    color: #222;
}
.table thead tr
{
    box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.23);
}

.table tbody + tbody
{
    border-top: 1px solid #dee2e6;
}

.table-bordered
{
    border: 1px solid #dee2e6;
}

.table-bordered td,
.table-bordered th
{
    border: 1px solid #dee2e6
}

.table-bordered thead td,
.table-bordered thead th
{
    border-bottom-width: 1px
}

.table-responsive
{
    max-width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Code, Control Area Block */
.control-area-block
{
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f9fa;
}

/* Images */
.img-responsive
{
    max-width: 100%;
    height: auto;
}

.img-float-left
{
    float: left;
    padding-right: 30px;
    padding-bottom: 30px;
}
@media (max-width: 576px)
{
    .img-float-left
    {
        padding-right: 16px;
        padding-bottom: 16px;
    }
}

.img-float-right
{
    float: right;
    padding-left: 30px;
    padding-bottom: 30px;
}
@media (max-width: 576px)
{
    .img-float-right
    {
        padding-left: 16px;
        padding-bottom: 16px;
    }
}

/* Printing Styles */
@media print
{
    .menu-container, .left-block, .right-block,
    .footer-wrapper
    {
        display: none !important;
    }

    .left-panel
    {
        display: none !important;
    }

    .text-content
    {
        max-width: 100%;
    }

    html
    {
        padding: 0 !important;
    }

    .page-toolbar-wrapper
    {
        display: none !important;
    }

    .no-print {
        display: none !important;
    }
}

/* Custom Required Mark */
.dxflRequired_Office365,
.dxeRequiredMark_Office365
{
    padding-left: 5px;
    color: Red;
}

/* override text content for dialogs only */
.text-content.dialog .title
{
    margin-top: 0.3rem;
}

.text-content.dialog {
    max-width: 100%;
    margin: 0px auto;
    padding: 0px 14px 0px 14px;
    word-wrap: break-word;
}

/* hide text content header for dialogs only */
/*.text-content.dialog #MainHeader,
.text-content.dialog #PageTitle {
    display: none;
}*/

/* hints in fields */
.hint-field:hover {
    cursor: help;
}

.hint-field
{
    text-decoration: underline dashed #35B86B;
    text-decoration-thickness: 1px;
}

.hint-field.arrow:after {
    font-size: 10px;
    color: green;
    margin-left: 5px;
    content: "V";
    text-decoration: none;
}

/* hint table */
.hint-table 
{
    min-width: 200px; 
    max-width: 400px;
}

.hint-table th
{
    padding-top: 3px;
    vertical-align: top;

    text-align: left;
    font-weight: 600;
    font-size: 12px;

    padding-right: 12px;
    white-space: nowrap;
}

.hint-table td
{
    /*padding-top: 1px;*/
    padding-top: 3px;
    vertical-align: top;
    padding-right: 12px;
}

.hint-table td:last-child
{
    padding-right: 0px;
}

/* hint heading */
.hint-heading 
{
    font-weight: bold;
    margin-bottom: 5px;
}

/* panel table */
.panel-table 
{
    padding-top: 3px;
    padding-bottom: 3px;
    
    /*min-width: 200px;*/ 
    /*max-width: 400px;*/
}

.panel-table th
{
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: top;

    text-align: left;
    font-weight: 600;
    font-size: 12px;

    padding-right: 12px;
    white-space: nowrap;
}

.panel-table td
{
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: top;
    
    padding-right: 12px;

    text-align: left;
    font-size: 12px;
}

.panel-table td:last-child
{
    padding-right: 0px;
}

/* status fields */
.status-field
{
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 12px;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: 600;
    margin-bottom: 2px;
}

.status-field.message-priority
{
    min-width: 3em;
    text-transform: uppercase;
}

.status-field.message-priority.high
{
    border: solid 1px red;
    color: red;
}

.status-field.status-content {
    font-size: 14px;
    font-weight: normal;
}


.status-field.chemical-status
{
    /*min-width: 3em;*/
    /*text-transform: uppercase;*/
}

.status-field.chemical-status.stocktake
{
    border: solid 1px #666;
}

.status-field.chemical-status.purchase
{
    border: solid 1px green;
    color: green;
}

.status-field.chemical-status.activity
{
    color: #666;
}


/*.status-field.active,
.status-field.inactive
{
    width: 3em !important;
    text-transform: uppercase;
}

.status-field.inactive
{
    border: solid 1px red !important;
    color: red !important;
}*/

.text-field.active,
.text-field.inactive
{
    /*text-transform: uppercase;*/
}

.text-field.inactive
{
    color: red !important;
}


/* file icons */
/*https://stackoverflow.com/questions/7203592/how-to-create-a-link-that-contains-an-image-text*/ 
/* https://electrictoolbox.com/add-icon-before-after-link-css/ */

.file {
    background: transparent url(/content/images/file-default.svg) center left no-repeat;
    background-size: 16px;
    background-position-y: 2px;
    padding-left: 20px;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
}

.file-pdf, a.file[href$='.pdf'] {
    background-image: url(/content/images/file-pdf.svg) !important;
}
        
.file-doc, a.file[href$='.doc'], a.file[href$='.docx'] {
    background-image: url(/content/images/file-doc.svg) !important;
}
        
.file-xls, a.file[href$='.xls'], a.file[href$='.xlsx'] {
    background-image: url(/content/images/file-xls.svg) !important;
}
        
.file-csv, a.file[href$='.csv'] {
    background-image: url(/content/images/file-csv.svg) !important;
}

.file-zip, a.file[href$='.zip'] {
    background-image: url(/content/images/file-zip.svg) !important;
}

.file-txt, a.file[href$='.txt'] {
    background-image: url(/content/images/file-txt.svg) !important;
}

.file-image, a.file[href$='.jpg'], a.file[href$='.jpeg'], a.file[href$='.gif'], a.file[href$='.png'], a.file[href$='.bmp'] {
    background-image: url(/content/images/file-image.svg) !important;
}


.file.message {
    background-position-y: 3px;
}


/* new window icons */
/* https://stackoverflow.com/questions/7203592/how-to-create-a-link-that-contains-an-image-text*/ 
/* https://electrictoolbox.com/add-icon-before-after-link-css/ */

.new-window {
    background: transparent url(/content/images/new-window-small-popout.svg) center right no-repeat;
    background-size: 16px;
    background-position-y: 3px;
    padding-right: 20px;
}


/* task icons */
.task-pending {
    background: transparent url(/content/images/alert-error-lite.svg) center left no-repeat; /* alert-tick-invalid-lite, alert-tick-invalid, alert-warning-major, alert-warning */
    background-size: 16px;
    background-position-y: 2px;
    padding-left: 20px;
}

.task-complete {
    background: transparent url(/content/images/alert-tick-valid.svg) center left no-repeat;
    background-size: 16px;
    background-position-y: 2px;
    padding-left: 20px;
}



/* error notification */
.notification {
    border-radius: 10px;
    border: solid 1px #444 /*#ccc*/;
    color: #444;
    background-color: rgba(0, 0, 0, 0.02);
    padding: 4px 12px;
    margin: 10px 0px;
    font-size: 14px;
}

.notification.error {
    border-color: #d8000c /*#ccc*/;
    color: #d8000c;
    /*background-color: #ffb9b9;*/
}

.notification.warning {
    border-color: #9f6000 /*#ccc*/;
    color: #9f6000;
    /*background-color: #feefb3;*/
}

.notification.info {
    border-color: #00529b /*#ccc*/;
    color: #00529b;
    /*background-color: #bde5f8;*/
}

.notification.minor {
    border-color: #c7c7c7;
    color: #444;
}

/*.notification.hidden {
    visibility: hidden;
    height: 0px;
    padding: 0px !important;
    margin: 0px !important;
}*/

.notification.shrink {
    display: inline-block;
}

.notification .alert {
    padding-left: 25px;
}

.notification .alert.error {
    background: transparent url(/content/images/alert-error.svg) center left no-repeat;
    background-size: 16px;
    background-position-y: 2px;
}

.notification .alert.warning {
    background: transparent url(/content/images/alert-warning.svg) center left no-repeat;
    background-size: 16px;
    background-position-y: 2px;
}

.notification .alert.minor {
    background: transparent url(/content/images/alert-warning-minor.svg) center left no-repeat;
    background-size: 16px;
    background-position-y: 2px;
}

.notification .alert.tick {
    background: transparent url(/content/images/alert-tick-valid.svg) center left no-repeat;
    background-size: 16px;
    background-position-y: 2px;
}


/* override title for dialogs only */
.text-content .title.details
{
    font-size: 1.5em;
}

/*.dxhSys {
    background-color: white;
    opacity: 0;
    border-color: black;
}*/

pre.border {
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 10px;
    white-space: pre-wrap;
}

/* page toolbar title */
.page-toolbar-wrapper {
    /*font: 16px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;*/
    font: 14px 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
}

.page-toolbar-wrapper .title {
    /*font-size: 1.5em;*/
    font-size: 1.75em;
    color: #444;
    font-weight: normal;
    margin: 0 auto;
    padding: 8px 14px 8px 14px;

    /* moved border to toolbar instead of under title */
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/

    /* hide any overflow of title */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-toolbar-wrapper .dxm-ltr {

    /* moved border to toolbar instead of under title */
    border-top: 1px solid rgba(0,0,0,0.15);

}

@media (min-width: 576px) {
    .page-toolbar-wrapper .title {
        color: #222;
        font-weight: 600;
    }
}

/* padding for large screens */
@media (min-width: 959px)
{
    .page-toolbar-wrapper .title
    {
        /* padding: 21px 48px 16px 48px; */
        padding: 21px 30px 18px 30px;	
    }

}


/* toolbar search */
.search-container {
    width: 75%;
}
.search-container .search {
    min-width: 120px; 
    max-width: 300px;
    padding: 2px 6px 0px 14px;
}

.search-container .search .dxeButtonLeft {
    background-color: transparent;
}

.filter-container {
    padding-left: 2px;
}

.filter-panel {
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-top: -1px;
    margin-bottom: -1px;
}

/* help text spacing */
.dxflBHelpTextSys {
    padding: 0px !important;
}

/* change edit form error padding */
.dxeErrorCellSys {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 4px;
}

/***************************/
/* override text input colour */
.dxeEditArea_Office365,
body input.dxeEditArea_Office365 {
    color: #222;
}

.dxFirefox .dxeMemo_Office365 .dxeMemoEditArea_Office365, 
.dxeMemo_Office365 .dxeMemoEditArea_Office365 {
    color: #222;
}

.dxeToken_Office365 {
    /*background: rgba(0,0,0,0.08);*/
    color: #222;
}
/***************************/

/* home page banner */
.home-banner {
    background: url(/content/images/banner-photo.jpg) no-repeat center;
    width: 100%;
    height: 147px;
    margin-bottom: 20px;
    border-radius: 10px;

    /*background-size: contain;*/

}

@media (max-width: 576px) {
    .home-banner {
        height: 100px;
    }
}


/* Tooltip text below field (match editor help text) */
.tooltip
{
    /*margin-top: 3px;*/
    color: #9F9F9F;
    font-size: 0.85em;
}

.tooltip ul,
.tooltip ol
{
    margin-top: 1px;
    margin-bottom: 0px;
    padding-left: 20px;
}

/* full width html editor */
.html-editor-full-width,
.html-editor-full-width table {
    width: 100% !important;  
}

/* popup notify top */
.popup-notify-stack {
    /*position: absolute;*/
    position: relative;
    width: calc(100% + 24px);
    margin: 0px -12px;
    /*top: -10px;*/
    top: 0px;
}

/* page notify top */
.page-notify-stack {
    /*position: absolute;*/
    position: sticky;
    width: 100%;
    /*top: -15px;*/
    /*top: 50px;*/
    /*top: 69px;*/
    /*top: 64px;*/
    top: 51px;
    z-index: 1; 
}

/* page notify top when page in dialog instead of normal page */
.dialog-wrapper .page-notify-stack {
    top: 0px;
}

@media (min-width: 959px)
{
    .page-notify-stack {
        top: 64px;
    }
}

/* password show / hide icon */
.eye-button
{
    background: none;
}

.eye-button > div
{
    background: url('Images/eye-button.svg') no-repeat center;
    width: 18px;
    height: 12px;
    vertical-align: baseline;
    pointer-events: none;
    user-select: none;
}
.eye-button.show-password > div
{
    background: url('Images/eye-button-hide.svg') no-repeat center;
}

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
    display: none;
}


/* darker anchors */
/* https://www.hexcolortool.com/#35b66b 15% darkened */
/* ************** */
.content a,
.text-content a,
.page-toolbar-wrapper a,
.dxh-content a
{
    color: #0F9245; /*green*/
}

.hint-field
{
    text-decoration: underline dashed #0F9245; /*green*/
    text-decoration-thickness: 1px;
}

.hint-field .hint-blank {
    /*font-style: italic;
    color: #999;*/
}

.hint-field > .save-required::after {
    content: "save required";
    font-style: italic;
    color: #999;
}
/* ************** */


/* high contrast mode */
/* https://www.hexcolortool.com/#35b66b 35% darkened */
/* ****************** */
.high-contrast .text-content,
.high-contrast .text-content h1, .high-contrast .text-content h2, .high-contrast .text-content h3, .high-contrast .text-content h4, .high-contrast .text-content h5, .high-contrast .text-content h6,
.high-contrast .text-content .title,
.high-contrast .text-content > h2.category,
.high-contrast .text-content b, .high-contrast .text-content strong,
.high-contrast small,
.high-contrast blockquote,
.high-contrast .table thead th,
.high-contrast .page-toolbar-wrapper .title,
.high-contrast .footer,
.high-contrast .dxeBase_Office365
{
    color: #222;
}

.high-contrast .content a,
.high-contrast .text-content a,
.high-contrast .page-toolbar-wrapper a,
.high-contrast .dxh-content a
{
    color: #005F12; /*darkgreen*/
    text-decoration: underline; /* override in high-contrast to underline links */
}

.high-contrast .hint-field
{
    text-decoration: underline dashed #005F12; /*darkgreen*/
    text-decoration-thickness: 1px;
}

.high-contrast .dxmLite_Office365,
.high-contrast .dxmLite_Office365 .dxm-item a.dx,
.high-contrast .dxm-content,
.high-contrast .dxnbLite_Office365 .dxnb-item a, .high-contrast .dxnbLite_Office365 .dxnb-large a, .high-contrast .dxnbLite_Office365 .dxnb-bullet a,
.high-contrast .dxnb-content,
.high-contrast .dxnb-header, .high-contrast .dxnb-headerCollapsed
{
    color: #222;
}

.high-contrast .dxnbLite_Office365 .dxnb-itemSelected,
.high-contrast .dxnbLite_Office365 .dxnb-largeSelected,
.high-contrast .dxnbLite_Office365 .dxnb-bulletSelected,
.high-contrast .dxnbLite_Office365 .dxnb-itemSelected a,
.high-contrast .dxnbLite_Office365 .dxnb-largeSelected a,
.high-contrast .dxnbLite_Office365 .dxnb-bulletSelected a
{
    color: white;
}

.high-contrast .dxmLite_Office365 .dxm-item.dxm-selected .dxm-content {
    color: white;
}

.high-contrast .dxmLite_Office365 .dxm-disabled, .high-contrast .dxmLite_Office365 .dxm-disabled a.dx 
{
    color: #bbb;
}

.high-contrast .tooltip
{
    color: #222;
}
/* ****************** */


.date-range-separator {
    text-align: center;
    vertical-align: top;
    width: 20px;
    /*margin-top: 0px;*/
}

.field-separator {
    text-align: center;
    vertical-align: top;

    margin: 10px 10px 0px 10px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #222;
}

.page-help {
    /*background: transparent url(/content/images/alert-info.svg) center right no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;*/
    background: transparent url(/content/images/alert-question.svg) center right no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;

    display: inline-block;
    /*vertical-align: middle;*/
    cursor: pointer;

    /*background-position-y: -3px;*/
    margin-bottom: -1px;
    margin-left: 5px;
}


/*file upload control*/
.dxucEditArea_Office365, body input.dxucEditArea_Office365 {
    color: #222;
}

.dxucTextBox_Office365 {
    border: 1px solid rgba(0,0,0,0.22);
    padding: 1px 4px;
}

.dxucBrowseButton_Office365 {
    border: 1px solid rgba(0,0,0,0.22);
}


/* null text */
.null-text {
    color: #bdbdbd !important;
}


/* item label */
.item-label {
    margin-top: 6px;
    color: #222;
    font-weight: 500;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.details-container span.unit
{
    font-size: 11px;
    /*line-height: .99;*/
    margin-left: 5px;
    color: #666;
    /*line-height: 21px;*/
    /*margin-bottom: -2px;*/
    padding-top: 3px;
}

.details-container span.sign
{
    font-size: 14px;
    margin-right: 3px;
    color: #666;
}

.details-container span.sign.minus {
    color: red;
}

.details-container span.sign.plus {
    color: green;
}


.field-info {
    background: transparent url(/content/images/alert-info.svg) center right no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;

    display: inline-block;

    margin-bottom: -3px;
    margin-left: 5px;
}

.field-warning {
    /*background: transparent url(/content/images/alert-warning.svg) center right no-repeat;*/
    background: transparent url(/content/images/alert-warning-minor.svg) center right no-repeat;
    background-size: 16px;
    width: 16px;
    height: 16px;

    display: inline-block;

    margin-bottom: -3px;
    margin-left: 5px;
}

.no-margin-list ul,
.no-margin-list ol {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 25px;
}


.required-mark:after {
    color: Red;
    content: " *";
    font-size: 13px;
}


/*checklist style*/
.template-grid {
    border: 1px solid #ddd !important;
}

.template-grid .dxgvCSD {
    border: 0px !important;
    background-color: transparent !important;
}

.template-grid .dxgvDataRow_Office365 td.dxgv {
    /*padding: 12px 12px 0px 12px;*/
    padding-bottom: 0px;
}

.template-grid .dxgvEmptyDataRow_Office365 td.dxgv {
    height: 300px;
    /*padding: 15px 2px 16px 4px;*/
    vertical-align: middle;
}






.checklist-content {
    /*margin-top: 5px;*/
    margin-bottom: 5px;
}

.checklist-statement {
    font-weight: 600;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 5px;
}

.checklist-control {
    vertical-align: middle; 
    /*margin-left: 20px;*/ 
    /*margin-top: 5px;*/ 
    margin-top: 5px;
    margin-bottom: 5px;
}

.checklist-control-caption {
    color: #222 !important;
    font-weight: 600;
    font-size: 12px;
}


/*batch grid style*/
.batch-grid {
    border: 1px solid #ddd !important;
    border-top: 0px !important;
}

/*hide left and right border in grid view header (for some reason, already missing from data cells and footer)*/
.batch-grid .dxgvHSDC {
    border-left: 0px !important; 
    border-right: 0px !important;  
}

/* hide borders in grid view footer for batch grid */
.batch-grid .dxgvFSDC {
    border-top: 1px solid rgba(0,0,0,0.1);
    border-left: 0px !important; 
    border-right: 0px !important;  
    border-bottom: 0px !important;
}

.batch-grid .dxgvFooter_Office365 td.dxgv s{
    border: 0px !important;
}

.batch-grid .dxgvFSDC .dxgvTable_Office365 {
    border: 0px !important;
}


.batch-grid .dxgvCSD {
    /*border: 0px !important;*/
    /*background-color: transparent !important;*/
}

.batch-grid .dxgv {
    border-bottom-width: 1px !important;
}

/*.action-grid .dxgvDataRow_Office365 td.dxgv {*/
    /*padding: 12px 12px 0px 12px;*/
    /*padding-bottom: 0px;*/
/*}*/

.batch-grid .dxgvEmptyDataRow_Office365 td.dxgv {
    height: 300px;
    vertical-align: middle;
}

.batch-grid .dxgvHeader_Office365 {
    color: #222 !important;
    font-weight: 600; /* bold */
    font-size: 12px;
    /*padding: 3px 6px 3px 6px;*/
}

.batch-grid .dxgvDataRow_Office365 td.dxgv,
.batch-grid .dxgvEditFormDisplayRow_Office365 td.dxgv {
    color: #666;
    font-weight: normal;
}


/* batch grid grouping */
.batch-grid span.group-text {
    /*color: #222;*/
    color: #666;
    font-weight: 600;
    margin-right: 10px;
}

.batch-grid span.group-params {
    color: #666; 
    margin-right: 10px;
}

.batch-grid span.group-link {
    color: #666; 
    margin-right: 10px;
    white-space: nowrap;
    display: inline-block;
}

.high-contrast .batch-grid span.group-text,
.high-contrast .batch-grid span.group-params,
.high-contrast .batch-grid span.group-link {
    color: #222;
}


/* batch grid group row style changes */
.batch-grid .dxgvGroupRow_Office365.dxgvFGFixed {
    border-left: 0px !important;
}

.batch-grid .dxgvCSD {
    border: 0px !important;
}

.batch-grid .dxgvFGI {
    display: none !important; /* hide image on fixed group row */
}



/*batch tree style*/
/*.batch-tree .dxgvEmptyDataRow_Office365 td.dxgv {
    height: 300px;
    vertical-align: middle;
}*/

.batch-tree .dxtlHeader_Office365 {
    color: #222 !important;
    font-weight: 600; /* bold */
    font-size: 12px;
    /*padding: 3px 6px 3px 6px;*/
}

.batch-tree .dxtlNode_Office365 td.dxtl {
    color: #666;
    font-weight: normal;
}



/* minimum height for batch grid rows to fit edit controls comfortably */
.batch-row {
    height: 33px;
}

.batch-editor {
    /*background-color: #CCE5FF !important;*/
    /*background-color: #ffd !important;*/
    background-color: #eec !important;
    color: #222 !important;
}

/* enforce cell highlighting in batch edit mode, even if overridden by row selection */
/* https://www.devexpress.com/Support/Center/Question/Details/T344170/aspxgridview-batch-edit-modified-cells-aren-t-highlighted-if-cellstyle-backcolor-is */
.batch-editor.dxgvBatchEditModifiedCell_Office365 {
    /*background: #d7f9c7 !important;*/
    /*background: #cec !important;*/
    background: #dfd !important;
    /*color: #222 !important;*/
}

/* enforce cell highlighting in batch edit mode, even if overridden by row selection */
/* https://www.devexpress.com/Support/Center/Question/Details/T344170/aspxgridview-batch-edit-modified-cells-aren-t-highlighted-if-cellstyle-backcolor-is */
.batch-editor.dxtlBatchEditModifiedCell_Office365 {
    /*background: #d7f9c7 !important;*/
    /*background: #cec !important;*/
    background: #dfd !important;
    /*color: #222 !important;*/
}


/* fix for colour of tree list batch mode focused cell */
.batch-tree .dxtlFocusedCell_Office365 {
    box-shadow: inset 2px 2px 0 #35b86b, inset -2px -2px 0 #35b86b;
    -webkit-box-shadow: inset 2px 2px 0 #35b86b, inset -2px -2px 0 #35b86b;
}

/* fix for height of grid view batch mode focused cell */
/*.batch-grid .dxgvEditFormDisplayRow_Office365 td.dxgv, 
.batch-grid .dxgvDetailCell_Office365 td.dxgv, 
.batch-grid .dxgvAdaptiveDetailCell_Office365 td.dxgv, 
.batch-grid .dxgvDataRow_Office365 td.dxgv, 
.batch-grid .dxgvAdaptiveDetailRow_Office365 td.dxgvAIC {
    padding: 6px 6px 5px 6px !important;
}*/


/* popup form filter panel */
.popup-filter-panel {
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: rgba(0, 0, 0, 0.02);
    padding: 4px;
    width: initial !important;
    /*margin-right: 8px;*/
}


.system-notify-reminder {
    text-align: right;
    font-size: 13px;
    font-weight: 500;
    margin-top: 5px;
    margin-right: 5px;
}

.system-notify-reminder a {
    color: black;
    background-color: transparent;
    text-decoration: none;
}

.system-notify-reminder a:hover {
    color: black;
    text-decoration: underline;
}

.general-error-text
{
    color: red;
    padding: 0.5em 0em;
}