:root 
{
    --bg-color: Black;
    --text-color: Red;
    --bg-image: url( '../../App_Themes/Black/Images/bg.png' );

    --main-menu-bg-image: url( '../../App_Themes/Black/Images/MenuTree.png' );
    --main-menu-bg-color: Black;
    --main-menu-color: Black;
    
    --main-mandt-sel-color: Aqua; 
    --main-mandt-sel-bg-color: Navy;
    --main-mandt-sel-border-color: #0099FF;

    --pw-text-color: Red;
    
    --main-tree-bg-image: url( '../../App_Themes/Black/Images/MenuTree.png' );
    --main-tree-bg-color: Black;
    --main-tree-color: Red;

    --db-panels-bg-color: Black;
    --db-panels-color: #0099FF;

    --area-menu-bg-color: Silver;
    --area-menu-color: Aqua;
    --area-menu-bg-image: url( '../../App_Themes/Black/Images/Menu.png' );

    --area-main-bg-image: url( '../../App_Themes/Black/Images/MainPanel.png' );
    --area-main-bg-color: Black;

    --main-well-bg-color: Navy; 
    --main-well-color: Aqua;
    --main-well-ro-color: Yellow;

    --light-bg-color: #555555;
    --dark-bg-color: #333333;

    --border-color: #C0C0C0;
    --dark-border-color: #808080;

    --pv-bg-color: Black;
    --pv-color: #0099FF;
    
    --grid-select_bg_color: #005b99;
    --grid-select_border_color: #0099FF;

    --grid-edit-color: Aqua;
    --grid-edit-bg-color: #053367;
    --grid-edit-border-color: Aqua;

    --search-lbl-color: Navy;

    --sb-arrow-color: Aqua;
    --sb-base-color: #000000;
    --sb-face-color: #444444;
    --sb-shadow-color: #333333; 
    --sb-darkshadow-color: #0099FF; 
    --sb-3dlight-color: #0099FF; 
    --sb-highlight-color: #666666;

    --sb-track-bg-color: #222222;
    --sb-track-border-color: #333333;
    --sb-thumb-bg-color: #555555;
    --sb-thumb-border-color: #0099FF;
    
    --ri-border-width: 1px; 

    --ri-error-color: Red;
    --ri-error-Border-color: Red;
    --ri-error-bg-color: Yellow;
    --ri-error-bg-image: url('../../App_Themes/Black//Images/insprite.png');

    --ri-focus-color: Yellow;
    --ri-focus-Border-color: Maroon;
    --ri-focus-bg-color: Maroon;
    --ri-focus-bg-image: url('../../App_Themes/Black//Images/insprite.png');

    --ri-good-color: #00FF00;
    --ri-good-Border-color: #00FF00;
    --ri-good-bg-color: #333333;
    --ri-good-bg-image: url('../../App_Themes/Black//Images/check.png');

    --ri-ro-color: Gray;
    --ri-ro-Border-color: Gray;
    --ri-ro-bg-color: White;
    --ri-ro-bg-image: null;

    --edit-bg-color: #333333;
    --edit-color: White;
    
    --copy-norm-color: Aqua;
    --copy-caut-color: Yellow;
    --copy-warn-color: Red;

    --process-warn-image: url( '../../App_Themes/Black//Images/animated-warning.gif' );

    --webnaf-menu-color: Black;
    --webnaf-menu-bg-color: Silver;
    --webnaf-thumb-bg-color: Gray;
    --webnaf-thumb-color: Black;
    --webnaf-edit-bg-color: #DCE4FF;
    --webnaf-edit-color: Black;
    --webnaf-ro-bg-color: White;
    --webnaf-ro-color: Gray;
    --webnaf-ro-border-color: Gray;
    --webnaf-ri-error-bg-color: Yellow;
    --webnaf-ri-error-color: Red;
    --webnaf-ri-error-border-color: Red;
    --webnaf-ri-good-bg-color: #DCE4FF;
    --webnaf-ri-good-color: Black;
    --webnaf-ri-good-border-color: #006400;

    --rpt-slide-bg-color: #202020;
    --rpt-parm-bg-color: Black;    
    --rpt-parm-color: #0099FF;
}

body
{
    background-image: var(--bg-image);
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
}
.TopPanel
{
    border: thin groove var(--border-color);
    border-radius: 10px 10px 0px 0px;
    background-color: var(--bg-color);
    position: absolute;
    padding: 0px;
    top: 3px;
    width: 1053px; 
    height: 95px;
    margin-left: auto;
    margin-right: auto;
}
.NavMenuPanel
{
    border: thin solid var(--border-color);
    padding: 3px 0px 5px 10px;
    width: 1043px;
    height: 28px;
    position: absolute;
    top: 100px;
    background-color: var(--main-menu-bg-color);
    z-index: 1000;
    background-image: var(--main-menu-bg-image);
    color: var(--main-menu-color);
    margin-left: auto;
    margin-right: auto;
}
.PwdMenuLBL
{
    padding: 2px 10px 0px 10px;
    position: absolute;
    left: 733px;
    top: 3px;
    height: 28px;
    width: 285px;
    color: var(--pw-text-color);
    background-color: var(--main-menu-bg-color);
    font-size: Larger;
    font-weight: bolder;
}
.DisabledPwdMenuLBL
{
    position: absolute;
    left: 0px !important;
    top: 0px !important;
    height: 0px !important;
    width: 0px !important;
    color: var(--main-menu-color);
    background-color: var(--main-menu-bg-color);
}
#BottomPanel
{
    position: absolute;
    top: 138px;
    margin-left: auto;
    margin-right: auto;
}

.NavTreePanel
{
    padding: 8px 10px 10px 10px; 
    margin: 0px;
    background-color: var(--main-tree-bg-color);
    border: thin solid var(--border-color);
    border-radius: 0px 0px 0px 10px;
    width: 178px;
    height: 655px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: var(--main-tree-bg-image);
    color: var(--main-tree-color);
}

#NavTree
{
    Color: var(--main-tree-color);
    background-color: var(--main-menu-bg-color);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    scrollbar-arrow-color: var(--sb-arrow-color);
    scrollbar-base-color: var(--sb-base-color);
    scrollbar-face-color: var(--sb-face-color);
    scrollbar-shadow-color: var(--sb-shadow-color);
    scrollbar-darkshadow-color: var(--sb-darkshadow-color); 
    scrollbar-3dlight-color: var(--sb-3dlight-color); 
    scrollbar-highlight-color: var(--sb-highlight-color);
}

/*scroll bar for safari & chrome*/
div.NavTree::-webkit-scrollbar 
{
    width: 12px;
    height: 12px;
}

div.NavTree::-webkit-scrollbar-track-piece 
{
    background-color: var(--sb-track-bg-color);
    border: 2px solid var(--sb-track-border-color);
    -webkit-border-radius: 0px 10px 10px 0px;
}

div.NavTree::-webkit-scrollbar-thumb:vertical,
div.NavTree::-webkit-scrollbar-thumb:horizontal
{
    background-color: var(--sb-thumb-bg-color);
    border: 2px solid var(--sb-thumb-border-color);
    -webkit-border-radius: 6px;
}

#NavTree .rtSelected .rtIn,
#NavTree .rtSelected .rtImg,
#NavMenu .rmSelected,
#NavMenu .rmSelected .rmText
{ 
    Color: var(--main-mandt-sel-color) !important;
    font-weight: bold; 
    border: thin solid var(--main-mandt-sel-border-color);
    background-image: None !important;
    background-color: var(--main-mandt-sel-bg-color) !important;
}
#C5Logo
{
    position: absolute;
    left: 10px;
    top: 475px;
    width: 178px;
    height: 188px; 
    border-radius: 10px;
}
.SSLSealPanel
{
    border-radius: 20px 20px 20px 20px;
    padding: 0px;
    margin: 0px;
    color: var(--text-color);
    background-color: var(--bg-color);
    position: absolute;
    left: 942px;
    top: 10px;
}
.MainPanel
{
    border: thin solid var(--border-color);
    border-radius: 0px 0px 10px 0px;
    position: absolute;
    top: 0px;
    left: 200px; 
    width: 853px; 
    height: 673px;
    background-color: var(--bg-color);
    background-image: var(--area-main-bg-image);
}
.riReqError
{
    padding: 0px;
    margin: 0px;
    background-color: var(--ri-error-bg-color) !important;
    border-color:  var(--ri-error-border-color) !important;
    background: var(--ri-error-bg-color) 100% -298px no-repeat var(--ri-error-bg-image) !important;
    color: var(--ri-error-color) !important;
    font-weight: bold !important; 
    border-width: var(--ri-border-width) !important; 
}

.riFocus
{
    padding: 0px;
    margin: 0px;
    border-color: var(--ri-focus-border-color) !important;
    background: var(--ri-focus-bg-color) 100% -298px no-repeat var(--ri-focus-bg-image) !important;
    color: var(--ri-focus-color) !important;
    font-weight: bold !important; 
    border-width: var(--ri-border-width) !important; 
}
.riReqGood
{
    border-color: var(--ri-good-border-color) !important;
    background: var(--ri-good-bg-color) 100% 2px no-repeat var(--ri-good-bg-image) !important;
    color: var(--ri-good-color) !important;
    font-weight: bold !important;
    background-color: var(--ri-good-bg-color) !important;
    border-width: var(--ri-border-width) !important; 
}
.riRdOnly
{
    color: var(--ri-ro-color) !important;
    border-color: var(--ri-ro-border-color) !important;
    background-color: var(--ri-ro-bg-color) !important;
}
.LBLReqError
{ 
     color: var(--ri-error-color);  
}
.LBLReqGood
{ 
     color: var(--ri-good-color); 
}
.LBLRdOnly
{ 
     color: var(--ri-ro-color);
}
.GridEditTable
{
     color: var(--grid-edit-color) !Important;
     border: thin solid var(--grid-edit-border-color);
}

.rgSelectedRow td
{
    background-color: var(--grid-select_bg_color) !Important;
    border-bottom-color: var(--grid-select_border_color) !Important;
}
.rgEditForm
{
    color: var(--grid-edit-color) !Important;
    background-color: var(--grid-edit-bg-color) !Important;
    border: thin solid var(--grid-edit-border-color);
}

.CheckBoxes label
{
  position: relative;
  top: -2px;
}

.RadGrid
{
    scrollbar-arrow-color: var(--sb-arrow-color);
    scrollbar-base-color: var(--sb-base-color);
    scrollbar-face-color: var(--sb-face-color);
    scrollbar-shadow-color: var(--sb-shadow-color);
    scrollbar-darkshadow-color: var(--sb-darkshadow-color); 
    scrollbar-3dlight-color: var(--sb-3dlight-color); 
    scrollbar-highlight-color: var(--sb-highlight-color);
}
div.RadGrid .rgDataDiv::-webkit-scrollbar 
{
    width: 15px;
    height: 15px;
}
div.RadGrid .rgDataDiv::-webkit-scrollbar-track-piece 
{
    background-color: var(--sb-track-bg-color);
    border: 2px solid var(--sb-track-border-color);
    -webkit-border-radius: 0px 10px 10px 0px;
}
div.RadGrid .rgDataDiv::-webkit-scrollbar-thumb:vertical,
div.RadGrid .rgDataDiv::-webkit-scrollbar-thumb:horizontal
{
    background-color: var(--sb-thumb-bg-color);
    border: 2px solid var(--sb-thumb-border-color);
    -webkit-border-radius: 6px;
}

.ColorScroll
{
    scrollbar-arrow-color: var(--sb-arrow-color);
    scrollbar-base-color: var(--sb-base-color);
    scrollbar-face-color: var(--sb-face-color);
    scrollbar-shadow-color: var(--sb-shadow-color);
    scrollbar-darkshadow-color: var(--sb-darkshadow-color); 
    scrollbar-3dlight-color: var(--sb-3dlight-color); 
    scrollbar-highlight-color: var(--sb-highlight-color);
}

div.ColorScroll::-webkit-scrollbar 
{
    width: 15px;
    height: 15px;
}
div.ColorScroll::-webkit-scrollbar-track-piece 
{
    background-color: var(--sb-track-bg-color);
    border: 2px solid var(--sb-track-border-color);
    -webkit-border-radius: 0px 10px 10px 0px;
}
div.ColorScroll::-webkit-scrollbar-thumb:vertical,
div.ColorScroll::-webkit-scrollbar-thumb:horizontal
{
    background-color: var(--sb-thumb-bg-color);
    border: 2px solid var(--sb-thumb-border-color);
    -webkit-border-radius: 6px;
}