:root {
    /* 
        Menu dark gradient, buttons gradient, border colors, headers text colors, jquery overrides.
        Dark color. Must support white text displayed on it.
    */
    --Color1: #5d5d60;
    /*
        Menu light gradient, buttons bar background, footer background.
        Dark color, but a little lighter than color1.
    */
    --Color2: #aeaeaf;
    /*
        Menu drop down, row hover, buttons, message box.
        Light color. Must support black text on it.
    */
    --Color3: #EEEEEE;
    /*
        Hover menu drop down, row selection, jquery overrides.
        Should not be very light. Must support white text on it.
    */
    --Color4: #777777;
    /* Known colors.  */
    --White: #FFFFFF;
    --Black: #000000;
    /* Event colors. */
    --Error: #FF6666; /* red */
    --Warning: #FFFF33; /* yellow */
    --Success: #99FF99; /* green */
    --Information: #CCCCFF; /* blue */
    /* MenuBar */
    --MenuBar-Text: #FFFFFF; /* 5.3.2.0 - white */
    --MenuBar-Background-Gradient1: #333333; /* 5.3.2.0 - Color1 */
    --MenuBar-Background-Gradient2: #666666; /* 5.3.2.0 - Color2 */
    /* 
        Menu colors:
        - Menu - nermal state, when the menu is NOT expanded.
        - MenuItem - for expanded items.
        - MenuItem-Hover - when the cursor hovers over the menu item.
    */
    --MenuItem-Text: #000000; /* 5.3.2.0: black */
    --MenuItem-Background: #EEEEEE; /* 5.3.2.0: Color3 */
    --MenuItem-HoverText: #000000; /* 5.3.2.0: white */
    --MenuItem-HoverBackground: #777777; /* 5.3.2.0: Color4 */
    /* Toolbar colors */
    --Toolbar-Background: #E3E2E1;
    --Toolbar-HoverBackground: #C8C6C4;
    --Toolbar-HoverBorder: #979593;
    --Toolbar-ActionBackground: #B3B0AD;
    --Toolbar-PressedBackground: #C8C6C4;
    --Toolbar-PressedBorder: #C8C6C4;
    /* Grid colors. */
    --GridItem-Text: #000000; /* 5.3.2.0 = black */
    --GridItem-Background: #FFFFFF; /* 5.3.2.0 - white */
    --GridItem-HoverText: #FFFFFF; /* 5.3.2.0 - white */
    --GridItem-HoverBackground: #EEEEEE; /* 5.3.2.0 - Color3 */
    --GridItem-SelectedText: #FFFFFF; /* 5.3.2.0 - white*/
    --GridItem-SelectedBackground: #777777; /* 5.3.2.0 - Color4. */
}

body {
    background-color: white;
}

    body.login {
        background-color: var(--Color1);
    }

#mainHeader, #divTop {
    background-color: var(--Color1);
    background-image: linear-gradient(var(--Color1), var(--Color2));
    border-bottom: 1px solid var(--Color1);
}

#mainContent {
    background-color: white;
    color: black;
}

#mainFooter, #divBottom {
    padding: 4px 8px 4px 8px;
    border-top: 1px solid var(--Color1);
    background-color: var(--Color3);
    color: black;
}

/* headers */
h1 {
    color: var(--Color1);
}

.border-top {
    border-top: 2px solid var(--Color1);
}

.border-bottom {
    border-bottom: 2px solid var(--Color1);
}

h2 {
    color: var(--Color1);
    border-bottom: 1px solid var(--Color1);
}

h3 {
    color: var(--Color1);
}

/* menu */

.menu {
    /* nothing */
    color: var(--Menu-Text);
    background-image: linear-gradient(var(--Color1), var(--Color2));
}

    .menu > ul {
        /* nothing */
    }

.menu-item {
    /* nothing */
}

    .menu-item a, .menu-item a:visited {
        font-family: Calibri, Arial;
        font-size: 12pt;
        padding: 10px 16px 10px 16px;
        cursor: pointer;
        color: white;
    }

    .menu-item > ul {
        background-color: var(--Color3);
        border-radius: 0px 0px 8px 8px;
        box-shadow: 2px 2px 4px #888888;
    }

    .menu-item:hover {
        background-color: var(--Color3);
    }

        .menu-item:hover a {
            color: black;
        }

            .menu-item:hover a:hover {
                text-decoration: underline;
                background-color: var(--Color4);
                color: var(--MenuItem-HoverText);
                padding-bottom: 11px;
            }

        .menu-item:hover > ul {
            /* nothing */
        }

.activemodule {
    /* nothing */
}

.menu-item-terminator {
    height: 5px;
}

.menu-item-level2 {
    border-top: 1px solid var(--Color1);
}

    .menu-item-level2:hover {
        /* nothing */
    }

        .menu-item-level2:hover a:hover {
            color: var(--MenuItem-HoverText);
        }

/* menu item welcome user, active and hovered. */
.menu-item.activemodule:hover a.welcomeuser:hover {
    text-decoration: underline;
    background-color: var(--Color4);
    color: white;
}

.verticalMenu {
    background-color: transparent;
}

/* grid */

.grid {
    background-color: white;
}

.grid-scrollable {
    background-color: white;
}

.grid-body-row-selected {
    background-color: var(--Color4);
    color: white;
}

    .grid-body-row-selected a, .grid-body-row-selected a:visited {
        color: white;
    }

.grid-body-row:hover {
    background-color: var(--Color3);
    color: black;
}

    .grid-body-row:hover a, .grid-body-row:hover a:visited {
        /* nothing */
    }

.grid-top {
}

.grid-bottom {
}

/* context menu */

.contextmenu-item-selected {
    background-color: var(--Color3);
}

/* splitter from Documents */

.splitter-expanded {
    background-color: var(--Color1);
    border-left: 1px solid var(--Color1);
    border-right: 1px solid var(--Color1);
    padding-left: 2px;
    padding-right: 2px;
    width: 4px;
    background-image: none;
    float: left;
}

.splitter-collapsed {
    background-color: var(--Color1);
    border-left: 0px;
    border-right: 1px solid var(--Color1);
    padding-left: 10px;
    padding-right: 10px;
    background-image: url('../../images/other/panelExpand.png');
    background-repeat: no-repeat;
    background-position: 2px 2px;
    float: left;
}

/* splitter from Upload, Batches.
   Override class from frames.css */
#divSplitter {
    background-color: var(--Color1);
    border: 1px solid var(--Color1);
    border-bottom: none;
}

/* top-frame */

.topframe-body {
    background-color: var(--Color1);
    color: white;
}

.topframe-title {
    /* nothing */
}

/* innerTabControl */

table.innerTabControl {
    background-color: var(--Color3);
}

td.innerTabItemSelected {
    background-color: var(--Color1);
    background-image: linear-gradient(var(--Color1), var(--Color2));
    border: 1px solid var(--Color1);
    color: white;
    min-width: 130px;
    text-align: center;
}

td.innerTabItem {
    border: 1px solid var(--Color1);
    color: black;
    min-width: 130px;
    text-align: center;
}

    td.innerTabItem a, td.innerTabItem a:visited {
        color: var(--Color1);
        font-weight: normal;
    }

td.innerTabFiller {
    border-bottom: 1px solid var(--Color1);
}

/* messagebox */

.messagebox-text {
    border-bottom: 1px solid var(--Color1);
    color: var(--Color1);
}

/* other lines */

.context-separator {
    border-bottom: 1px dashed var(--Color1);
}

.newquery-topbar {
    border-bottom: 1px solid var(--Color1);
}

.newquery-bottombar {
    border-top: 1px solid var(--Color1);
}

/* comments */

table.comments {
    background-color: white;
}

    table.comments th {
        border: 1px solid var(--Color1);
    }

    table.comments td {
        border: 1px solid var(--Color1);
    }

table.comments-info td {
    border: 0;
}

table.comments-info {
    background-color: var(--Color3);
}


/* logs */

.log-header {
    background-color: var(--Color3);
    color: black;
    border: 1px solid var(--Color1);
}

.log-cell {
    border: 1px solid var(--Color1);
}

.log-cell-bold {
    border: 1px solid var(--Color1);
}

/* login */
.loginform-header {
    color: var(--Color1);
}

.loginform-body {
    border-top: 1px solid var(--Color1);
    border-bottom: 1px solid var(--Color1);
}

/* jquery ui css overrides */

.ui-widget-header {
    border: 1px solid var(--Color1) !important;
    background: none !important;
    background-color: var(--Color1) !important;
    background-image: linear-gradient(var(--Color1), var(--Color2)) !important;
    font-family: Arial !important;
    font-size: 9pt !important;
}

a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background-color: var(--Color1) !important;
    border: 1px solid white !important;
}

.list-selectable .ui-selected {
    background-color: var(--Color4) !important;
}

.list-selectable .ui-selecting {
    background-color: var(--Color4) !important;
    color: white !important;
}

.messagebox {
    background-color: var(--Color3);
}


.indexingButtonsBar {
    background-color: var(--Color1);
}

/* Buttons */

.buttonFlat {
    border: 1px solid var(--Color3);
    background-image: linear-gradient(var(--Color1), var(--Color2)) !important;
    color: white;
    /* default */
}

    .buttonFlat:hover {
        border: 1px solid var(--Color1);
        background-color: var(--Color1);
    }

    .buttonFlat .disabled {
        color: gray;
    }

.buttonFlatDisabled {
    border: 1px solid var(--Color3);
    color: gray;
    /* default */
}


/* Input file custom design */

.inputfile {
    /* default */
}

    .inputfile + label {
        border: 1px solid var(--Color3);
        background-image: linear-gradient(var(--Color1), var(--Color2)) !important;
        color: white;
        /* default */
    }

        .inputfile:focus + label,
        .inputfile + label:hover {
            border: 1px solid var(--Color1);
            background-color: var(--Color1);
        }

    .inputfile:focus + label,
    .inputfile.has-focus + label {
        /* default */
    }

    .inputfile + label * {
        /* default */
    }

/* documents - tree styles */
.selnode {
    background-color: var(--Color1);
}

/* upload - progress bar */
.progressbar-value {
    background-color: var(--Color1);
    background-image: linear-gradient(var(--Color1), var(--Color2));
}

/* progress bar in Cabinets/editIndex2.aspx */
div.progressOut {
    background-color: white;
    border: 1px solid var(--Color1);
}

div.progressIn {
    background-color: var(--Color1);
    background-image: linear-gradient(var(--Color1), var(--Color2));
}

/* Loading modal popup */
.modal {
    background-color: #E0E0E0;
}

.loading {
    border: 5px solid var(--Color1);
}


/* confirm box */

.confirmBox {
    border: 3px solid var(--Color1);
}

    .confirmBox .button {
        background-color: var(--Color1);
        background-image: linear-gradient(var(--Color1), var(--Color2));
        color: white;
    }

        .confirmBox .button:hover {
            border: 1px solid var(--Color1);
        }

    .confirmBox .message-panel {
        border-bottom: 1px solid var(--Color1);
    }

/* Classification Module */

#statusBar {
    background-color: var(--Color4);
    color: white;
}

/* Colors used in the lookup dialogs. */

tr.lookupRow:hover {
    background-color: var(--Color3);
    color: black;
    cursor: pointer;
}

tr.selected, tr.selected:hover {
    background-color: var(--Color4);
    color: white;
    cursor: pointer;
}

/* Thumbnails used in classification. */
/* See: ~/css/Samples/Sample1.html */
/* ---------------------------------- */

.thumb {
    border: 2px solid white;
    background-color: #EEEEEE;
}

.thumb-selected {
    background-color: var(--Color4);
    border: 2px solid white;
}

.thumb-selected-focused {
    background-color: var(--Color4);
    border: 2px solid black;
}

.thumb-selected-focused-inactive {
    background-color: #C6C6C6;
    border: 2px solid gray;
}

.thumb-selected-focused-inactive-cut {
    background-color: #C6C6C6;
    /*background: repeating-linear-gradient( 135deg, black, black 5px, #C6C6C6 5px, #C6C6C6 10px);*/
    border: 2px solid gray;
}

    .thumb-selected-focused-inactive-cut img {
        opacity: 0.5;
    }

.thumb-selected-focused-cut {
    background-color: var(--Color4);
    /*background: repeating-linear-gradient( 135deg, black, black 5px, var(--Color4) 5px, var(--Color4) 10px);*/
    border: 2px solid black;
}

    .thumb-selected-focused-cut img {
        opacity: 0.5;
    }

.thumb-selected-inactive {
    background-color: #C6C6C6;
    border: 2px solid white;
}

.thumb-selected-inactive-cut {
    background-color: #C6C6C6;
    /*background: repeating-linear-gradient( 135deg, black, black 5px, #C6C6C6 5px, #C6C6C6 10px);*/
    border: 2px solid white;
}

    .thumb-selected-inactive-cut img {
        opacity: 0.5;
    }

.thumb-selected-cut {
    background-color: var(--Color4);
    /*background: repeating-linear-gradient( 135deg, black, black 5px, var(--Color4) 5px, var(--Color4) 10px);*/
    border: 2px solid white;
}

    .thumb-selected-cut img {
        opacity: 0.5;
    }

.thumb-focused {
    background-color: white;
    border: 2px solid black;
}

.thumb-focused-inactive {
    background-color: white;
    border: 2px solid gray;
}

.thumb-focused-inactive-cut {
    background-color: white;
    /*background: repeating-linear-gradient( 135deg, black, black 5px, white 5px, white 10px);*/
    border: 2px solid gray;
}

    .thumb-focused-inactive-cut img {
        opacity: 0.5;
    }

.thumb-focused-cut {
    background-color: white;
    /*background: repeating-linear-gradient( 135deg, black, black 5px, white 5px, white 10px);*/
    border: 2px solid black;
}

    .thumb-focused-cut img {
        opacity: 0.5;
    }

.thumb-cut {
    background-color: white;
    /*background: repeating-linear-gradient( 135deg, black, black 5px, white 5px, white 10px);*/
    border: 2px solid white;
}

    .thumb-cut img {
        opacity: 0.5;
    }