﻿:root
{
    /*--Color-1: rgba(95,55,97,1); /*Green: rgba(0,102,0,1)*/
    /*--Color-2: rgba(150,54,136,1); /*Green: rgba(0,153,51,1)*/
    /*--Color-3: rgba(207,147,247,1); /*Green: rgba(164,215,120,1)*/
    /*--Color-4: rgba(253,216,255,1); /*Green: rgba(213,245,186,1)*/
    /*--Color-5: rgba(253,241,255,1); /*Green: rgba(226,247,208,1)*/
    
    --Color-1: rgba(255,255,255,1); /*Green: rgba(0,102,0,1)*/
    --Color-2: rgba(255,255,255,1); /*Green: rgba(0,153,51,1)*/
    --Color-3: rgba(255,255,255,1); /*Green: rgba(164,215,120,1)*/
    --Color-4: rgba(255,255,255,1); /*Green: rgba(213,245,186,1)*/
    --Color-5: rgba(255,255,255,1); /*Green: rgba(226,247,208,1)*/
    --Gray-1: rgba(92,89,89,1);
    --Gray-2: rgba(130,130,130,1);
    --Gray-3: rgba(170,170,170,1);
    --Gray-4: rgba(220,220,220,1);
    --Gray-5: rgba(245,245,245,1);
    --Orange-1: rgba(255,135,1,1);
    --Red-1: rgba(233,30,99,1);
    --Yellow-1: rgba(255,255,100,1);
    --Yellow-2: rgba(250,255,210,1);
}

/*************************************************
                   Main
*************************************************/
html
{
    font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;
    font-size: 14px;
    margin: 0;
    outline: 0;
    padding: 0;
}

div::-webkit-scrollbar
{
    height: 10px;
    width: 10px; /* width of the entire scrollbar */
}

div::-webkit-scrollbar-track
{
    background: var(--Gray-4); /* color of the tracking area */
}

div::-webkit-scrollbar-thumb
{
    background-color: var(--Gray-3); /* color of the scroll thumb */
    border-radius: 1px; /* roundness of the scroll thumb */
}

html
{
    min-height: 100%;
    padding-bottom: 1px;
}

.Align_Left
{
    text-align: left !important;
}

.Align_Right
{
    text-align: right !important;
}

.Align_Center
{
    text-align: center !important;
}

.Align_Top
{
    vertical-align: top !important;
}

.Back_Gray_1
{
    background-color: var(--Gray-1) !important;
}

.Back_Gray_2
{
    background-color: var(--Gray-2) !important;
}

.Back_Gray_3
{
    background-color: var(--Gray-3) !important;
}

.Back_Gray_4
{
    background-color: var(--Gray-4) !important;
}

.Back_Gray_5
{
    background-color: var(--Gray-5) !important;
}

.Back_Yellow_1
{
    background-color: var(--Yellow-1) !important;
}

.Back_Yellow_2
{
    background-color: var(--Yellow-2) !important;
}

.Back_Color_1
{
    background-color: var(--Color-1) !important;
}

.Back_Color_2
{
    background-color: var(--Color-2) !important;
}

.Back_Color_3
{
    background-color: var(--Color-3) !important;
}

.Back_Color_4
{
    background-color: var(--Color-4) !important;
}

.Back_Color_5
{
    background-color: var(--Color-5) !important;
}

.Color_1
{
    color: var(--Color-1) !important;
}

.Color_2
{
    color: var(--Color-2) !important;
}

.Color_3
{
    color: var(--Color-3) !important;
}

.Color_4
{
    color: var(--Color-4) !important;
}

.Color_5
{
    color: var(--Color-5) !important;
}

.Color_White
{
    color: White !important;
}

.Color_Red
{
    color: var(--Red-1) !important;
}

.Color_Orange
{
    color: var(--Orange-1) !important;
}

.Color_Gray_1
{
    color: var(--Gray-1) !important;
}

.Color_Gray_2
{
    color: var(--Gray-2) !important;
}

.Color_Gray_3
{
    color: var(--Gray-3) !important;
}

.Color_Gray_4
{
    color: var(--Gray-4) !important;
}

.Color_Gray_5
{
    color: var(--Gray-5) !important;
}

.Clear
{
    clear: both;
}

.Clear_Mobile
{
    clear: both;
}

.Clear_Only_In_Web
{
    clear: none;
}

.New_Line_5px
{
    height: 5px;
}

.New_Line_10px
{
    height: 10px;
}

.New_Line_20px
{
    height: 20px;
}

.Float_Left
{
    /*float: left;*/
}

.Float_Right
{
    float: right;
}

.Editable
{
    background-color: var(--Yellow-2);
}

.Disabled
{
    background-color: var(--Gray-4) !important; /*border: 0.5px solid var(--Gray-3) !important;*/
    color: var(--Gray-1) !important;
    cursor: default;
    pointer-events: none;
}

.Invisible
{
    display: none !important;
}

.Hidden
{
    visibility: hidden !important;
}

.Checked
{
    background-image: url(../../Resources/Check_This.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    height: 15px;
    margin: -8px 5px 0px 0px;
    vertical-align: middle;
    width: 15px;
}

.Clickable
{
    cursor: pointer;
}

input[type=text], input[type=password], span.Input_Text
{
    /*background-color: transparent;*/
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;
    height: 25px;
    margin: 3px;
    padding: 4px;
    vertical-align: top;
    width: 100%;
}

/*Focus Effect for Textbox*/
textarea:focus, input[type=text]:focus, input[type=password]:focus, select:focus
{
    outline: 1px auto var(--Color-2);
}

ul
{
    margin: 0px;
    padding: 0px;
}

li
{
    list-style: none;
}
label
{
    font-size: 14px;
    margin: 0px 0px 5px 3px;
}

span
{
    font-size: 14px;
    margin: 0px 0px 5px 0px;
}

div > label, div.Div > span /*Style inside DIV*/
{
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    line-height: 25px;
    margin: 0px 0px 5px 5px;
    text-align: left;
}

/*Loading*/
.loading
{
    background-color: Black;
    opacity: 0.15;
    position: fixed;
    z-index: +999999 !important;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
}
.loading img
{
    position: fixed;
    width: 100px;
    height: 100px;
    top: 40%;
    left: 45%;
}
.ajax-loader img
{
    position: relative;
    top: 0%;
    left: 0%;
}

/*************************************************
                   Label Style
*************************************************/
.Title_Main
{
    color: var(--Color-1);
    display: inline-block;
    font: 22px 'Century Gothic' !important;
    font-weight: bold !important;
    margin: 0px 5px 5px 5px;
    text-align: left;
    vertical-align: top;
}

.Title_Sub
{
    border: 0.5px solid transparent;
    box-sizing: border-box;
    color: var(--Color-1);
    display: inline-block;
    font: 18px 'Century Gothic' !important;
    font-weight: bold !important;
    height: 25px;
    margin: 0px 0px 5px 5px;
    padding: 0;
    text-align: left;
    vertical-align: top;
}

.Label_Title /*, label*/
{
    border: 0.5px solid transparent;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: bold;
    height: auto;
    line-height: 30px;
    margin: 3px;
    padding: 0;
    text-align: left;
}

.Label_Value
{
    background-color: White;
    border: 0.5px solid var(--Gray-3) !important;
    box-sizing: border-box;
    display: block;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: auto;
    margin: 3px;
    min-height: 25px;
    padding: 3px;
    text-align: left;
}

.Label_Value[disabled="disabled"]
{
    background-color: var(--Gray-4);
}

.Label_Select_Normal
{
    border: 1px solid var(--Gray-3);
    box-sizing: border-box;
    display: inline-block;
    font-family: 'Arial';
    font-size: 14px;
    height: auto;
    margin: 0 0 10px 10px;
    min-height: 30px;
    padding: 6px;
    text-align: left;
}
.Label_Select_Normal[disabled="disabled"]
{
    background-color: var(--Gray-4);
    color: var(--Gray-3);
}
.Label_Select_Active
{
    border: 2px solid var(--Color-3) !important;
    box-sizing: border-box;
    display: inline-block;
    font-family: 'Arial';
    font-size: 14px;
    font-weight: bold;
    height: auto;
    margin: 0 0 10px 10px;
    min-height: 30px;
    padding: 5px;
    text-align: left;
    vertical-align: top;
}

.Label_Info_1
{
    font-size: 12px !important;
    padding: 4px;
}

.Label_Info_2
{
    font-size: 12px !important;
    color: var(--Gray-1) !important;
}

/*************************************************
                Collapsible Panel
**************************************************/
.Collapsible_Header
{
    background-color: var(--Color-4);
    box-sizing: border-box;
    border: 0.5px solid var(--Color-4);
    color: var(--Color-2);
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 20px;
    float: left;
    height: auto;
    margin: 3px 3px 0px 3px;
    padding: 0px;
    text-decoration: none;
    vertical-align: middle;
    width: 650px;
}

.Collapsible_Label
{
    color: var(--Color-1);
    float: left;
    font-family: 'Century Gothic';
    font-size: 16px;
    line-height: 12px;
    margin: 3px;
    padding: 1px;
    vertical-align: middle;
    text-align: left;
}

.Collapsible_Panel
{
    border: 1px solid var(--Color-4);
    box-sizing: border-box;
    float: left;
    margin: 0px 3px 3px 3px;
    padding: 3px;
    position: static;
    width: 650px;
}

.Collapsible_Panel[disabled="disabled"]
{
    background-color: var(--Gray-4);
}

.Collapsible_Image
{
    float: left;
    height: 20px;
    margin: 3px; /*position: absolute;*/
    vertical-align: middle;
}

/*************************************************
                   Container
*************************************************/
.Div_Main
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
    display: inline-block;
    text-align: left;
    width: 98%;
}

@media screen and (min-width : 150px) and (max-width :925px)
{
    .Div_Main
    {
        margin-top: 50px;
        max-width: 500px;
        padding-right: 5px;
        padding-left: 5px;
        display: block;
        width: 98%;
    }
}

@media screen and (min-width:500px) and (max-width:769px)
{
    .Popup_Body
    {
        min-width: 350px;
        max-width: 500px;
        top: 290px !important;
    }
}

@media screen and (max-width : 500px)
{
    .Popup_Body
    {
        min-width: 350px;
        max-width: 310px;
    }
}

@media screen and (min-width:769px)
{
    .Popup_Body
    {
        min-width: 350px;
        max-width: 100%;
        top: 290px !important;
    }

    .Div_Main
    {
        margin-top: 50px;
        min-width: 500px;
        padding-left: 60px;
        padding-right: 60px;
        width: 98%;
    }

    .Div_Main:after
    {
        clear: both;
    }
}

@media screen and (min-width:1230px)
{
    .Div_Main
    {
        margin-top: 50px;
        padding-right: 60px;
        padding-left: 60px;
        width: 98%;
    }
    .Div_Main:after, .container
    {
        content: " ";
        display: table;
    }
    .Div_Main:after
    {
        clear: both;
    }
}

.Div
{
    box-sizing: border-box;
    font: 14px 'Century Gothic';
    padding: 0px;
    margin: 3px;
    text-align: left;
    display: inline-table;
    vertical-align: top;
}

.Div_Display_Only_In_Web
{
    padding: 1px;
    display: inline-block;
}

.Border_None
{
    border: none !important;
}

.Border_1
{
    border: 1px solid var(--Gray-3) !important;
}

.Box
{
    background-color: White;
    border: 0.5px solid var(--Color-2);
    color: var(--Color-2);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    margin: 3px;
    overflow: auto;
    padding: 3px;
    position: relative;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}

.Box_Without_Border
{
    background-color: White;
    box-sizing: border-box;
    margin: 2px 2px 0px 2px;
    padding: 2px;
    position: relative;
    text-align: left;
}

.Box[disabled="disabled"]
{
    background-color: var(--Gray-4);
}

.Box_With_Title
{
    background-color: White;
    box-sizing: border-box;
    padding: 5px 5px 0px 0px;
    margin: 3px;
    text-align: left;
}

.Box_With_Title[disabled="disabled"]
{
    background-color: var(--Gray-4);
}

.Box_With_Title fieldset
{
    border: 0.5px solid var(--Gray-3); /*border-radius: 5px;*/ /*margin: 0px 5px 0px -5px;*/
    min-width: 0;
    padding: 5px;
}

.Box_With_Title legend
{
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    font-weight: bold;
    height: 14px;
    margin: 0px 0px 0px 5px;
    padding: 0px 5px 5px 5px;
    text-align: left;
}

.Box_Scroll
{
    box-sizing: border-box;
    max-height: 300px;
    min-height: 10px;
    overflow: auto;
    padding: 0px;
    position: static;
    text-align: left;
    vertical-align: top;
}

.Border_Radius_5px
{
    border-radius: 5px !important;
}

.Border_Radius_10px
{
    border-radius: 10px !important;
}

.Overflow_Scroll
{
    overflow: scroll !important;
}

.Panel
{
    background-color: White;
    border: 0px solid var(--Gray-3);
    box-sizing: border-box;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.Panel[disabled="disabled"]
{
    background-color: var(--Gray-4);
}

.Popup_Header, .Panel_Header
{
    background-color: var(--Color-1);
    border-color: var(--Color-1);
    border-width: 1px;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    color: White;
    font-size: 18px;
    min-height: 10px;
    overflow: hidden;
    position: relative;
    padding: 0px;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    width: 100%;
}

.Div_Header
{
    background-color: var(--Color-4);
    border: 0.5px solid white;
    cursor: pointer;
    margin: 2px 0px 2px 5px;
    padding: 3px;
    position: relative;
}

.Div_Row
{
    background-color: white;
    border: 0.5px solid var(--Gray-3);
    cursor: pointer;
    margin: -1px 0px 0px 5px;
    padding: 3px;
    position: relative;
}

.Div_Select
{
    background-color: var(--Color-4);
    border: 0.5px solid white;
    cursor: pointer;
    margin: 2px 0px 2px 5px;
    padding: 5px;
    position: relative;
}

.Div_Header:hover, .Div_Select:hover
{
    border: 0.5px solid var(--Color-1) !important;
}

.Div_Row:hover
{
    background-color: lightyellow;
}

/*************************************************
                   Format
*************************************************/

.Bold
{
    font-weight: bold !important;
}

.Italic
{
    font-style: italic !important;
}


.Underline
{
    text-decoration: underline !important;
}

/*************************************************
                   Component
*************************************************/

a.back
{
    width: 256px;
    height: 73px;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: #fff url(codrops_back.png) no-repeat top left;
    z-index: 1;
    cursor: pointer;
}

/* Style for overlay and box */
.overlay
{
    background: transparent url(../image/overlay.png) repeat top left;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
}

.box
{
    position: relative;
    top: -500px;
    margin: 0 auto;
    background-color: #fff;
    color: #7F7F7F;
    padding: 20px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -moz-box-shadow: 0 1px 5px #333;
    -webkit-box-shadow: 0 1px 5px #333;
    z-index: 101;
    width: 380px;
}

.box .img_title
{
    height: 35px;
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.box .lbl_msg_error
{
    position: relative;
    top: 5px;
    font-size: 11px;
    color: red;
    font-weight: bold;
}

a.boxclose
{
    float: right;
    width: 26px;
    height: 26px;
    background: transparent url(../image/cancel.png) repeat top left;
    margin-top: -30px;
    margin-right: -30px;
    cursor: pointer;
}

.Container_With_Two_Component
{
    display: grid;
    grid-template-columns: 50% 50%;
    justify-items: center;
    grid-gap: 5px;
    padding: 5px 5px 0 0;
}

.Badge
{
    background-color: var(--Color-2);
    border-radius: 10px;
    color: White;
    font-size: 14px;
    margin: 0px 0px 0px 5px;
    padding: 1px 7px 1px 7px; /*text-align: center;*/
    white-space: nowrap;
}

.Badge[disabled="disabled"]
{
    background-color: Gray;
    padding: 1px 7px 1px 7px;
}

.Badge_Selected
{
    background-color: White;
    border-radius: 10px;
    color: var(--Color-2);
    display: inline-block;
    font-size: 14px;
    margin: 0px 0px 0px 5px;
    padding: 1px 7px 1px 7px; /*text-align: center;*/
    white-space: nowrap;
}

.TreeView
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    display: inline-block;
    font: 14px 'Century Gothic';
    margin: 4px;
    padding: 0px 5px 0px 0px;
}

.TreeView_Node
{
    color: var(--Color-1);
}

.TreeView_Root a
{
    color: Blue;
    font: 14px 'Century Gothic';
    font-weight: bold;
}

.TreeView_Parent a
{
    font: 14px 'Century Gothic';
}

.TreeView_Leaf a
{
    color: var(--Color-1);
    font: 14px 'Century Gothic';
}

.TreeView_SelectedNode
{
    border: solid 3px var(--Color-2);
    display: block;
    text-decoration: none;
}

.Div_Button
{
    padding: 5px;
    border: 1px solid var(--Color-2);
    margin: 3px;
    text-align: center;
}

.Div_Button:hover
{
    background-color: var(--Color-4);
    cursor: pointer;
}

.Div_NumericUpDownExtender
{
    display: inline-block;
    text-align: left;
}

.Div_NumericUpDownExtender td:first-child
{
    font-size: 0;
    padding: 0px;
    vertical-align: bottom;
}

.Div_NumericUpDownExtender td:last-child
{
    font-size: 0;
    padding: 0px;
    vertical-align: Sub;
}

.Div_NumericUpDownExtender tr
{
    font-size: 0;
    padding: 0px;
}

/******************************************************
                    Image
*******************************************************/
.Img_Container
{
    text-align: center;
    width: 100%;
}

.Img_Div
{
    display: inline-block;
    position: relative;
}

.Img_Thumbnail
{
    margin-right: 5px;
    width: 120px;
}
.Img_Thumbnail:hover
{
    cursor: pointer;
}

.Img_Container .Img_View
{
    max-width: 100%;
    margin: 0;
    padding: 0;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
}

.Img_Delete
{
    background-color: Black !important;
    border: none !important;
    border-radius: 10px !important;
    color: White !important;
    height: 20px !important;
    margin: 0 !important;
    opacity: 0.5 !important;
    padding: 2px !important;
    position: absolute !important;
    right: 5px !important;
    text-align: center !important;
    top: 1px !important;
    width: 25px !important;
}

.Img_Delete:hover
{
    background-color: var(--Color-1) !important;
    opacity: 0.5;
}

/******************************************************
                    Canvas
*******************************************************/

Canvas:hover
{
    cursor: pointer;
}

/******************************************************
                    File Upload
*******************************************************/

.FileUpload
{
    background-color: White;
    border: 1px solid var(--Color-2);
    box-sizing: border-box;
    color: var(--Color-1);
    cursor: pointer;
    display: inline-block;
    font-family: 'Century Gothic';
    font-weight: normal;
    font-size: 14px;
    height: 26px;
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 5px;
}

.FileUpload:hover
{
    border: 2px solid var(--Color-1);
}

.FileUpload input
{
    top: 0;
    left: 0;
    margin: 0;
    font-size: 11px; /* Loses tab index in webkit if width is set to 0 */
    opacity: 0;
    filter: alpha(opacity=0);
}

.FileUpload span
{
    top: 0;
    left: 0;
    display: inline-block; /* Adjust button text vertical alignment */
}

.dropbtn
{
    background-color: White;
    box-sizing: border-box;
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    padding: 0px 5px 0px 5px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus
{
    background-color: var(--Color-1);
}

.dropdown
{
    position: relative;
    display: inline-block;
}

.dropdown-content
{
    background-color: var(--Gray-4);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: none;
    min-width: 100px;
    position: relative;
    overflow: auto;
    z-index: 1;
}

.dropdown-content a
{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover
{
    background-color: #dddddd;
}

.show
{
    display: block;
}

/*.center
{
    margin: 5px 0px 5px 5px;
}*/



/******************************************************
                    Home.Master
*******************************************************/
/*Scroll to Top*/

.main
{
    text-align: center;
}

img.img_logo
{
    height: 25px;
    margin-left: 9px;
    margin-top: 9px;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 999;
}

.login_box
{
    position: absolute;
    top: -5px;
    z-index: 800;
    right: 0;
    padding: 11px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: White;
}

.login_box button
{
    color: White;
}

.menus_bar
{
    display: block;
    margin-left: 130px;
    max-height: 45px;
}

.btn_log_log_out
{
    border: 0;
    background: transparent; /*font-size: 15px;             font-weight: bold;*/
    cursor: pointer;
    color: White;
    margin-top: 3px;
}
@media screen and (max-width : 1230px)
{
    .menus_bar
    {
        height: 80px;
    }

}
@media screen and (max-width : 1100px)
{
    div.logos
    {
        display: none;
    }

    .login_box
    {
        margin-top: -4px;
        margin-right: 35px;
    }
}

.modal
{
    background-color: Black;
    filter: alpha(opacity=80);
    left: 0;
    min-height: 100%;
    opacity: 0.35;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    -moz-opacity: 0.8;
}

.loading
{
    background-color: Black;
    font-family: 'Century Gothic';
    font-size: 14px;
    left: 0;
    min-height: 100%;
    opacity: 0.15;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 110001;
}

.loading img
{
    position: fixed;
    width: 120px;
    height: 120px;
    top: 40%;
    left: 40%;
}
/*************************************************
                 Table/Gridview
*************************************************/
table
{
    border-collapse: collapse;
    border: 0.5px solid var(--Gray-1);
    margin: 3px 3px 3px 3px;
}

table thead
{
    position: sticky;
    top: 0;
}

table td
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
    transition: font-size 1s, height 1s;
}

.Freeze_Col
{
    border: 0.5px solid var(--Gray-3);
    left: 0px;
    position: sticky;
    white-space: nowrap;
    z-index: 100;
}

table th
{
    background-color: var(--Color-4);
    border: 0.1px solid var(--Gray-3);
    color: var(--Color-1);
    font-weight: bold;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
    text-align: center;
}

.table_item th
{
    background-color: var(--Gray-4) !important;
    border: 0.5px solid var(--Gray-3);
    color: Black;
}

table tr
{
    background-color: White;
}

table tr:nth-child(odd)
{
    background-color: White;
}

table tr:nth-child(even)
{
    background-color: White;
}

table tr:hover
{
    background-color: var(--Color-5);
    cursor: pointer;
}
table td input
{
    border: none;
}

td input[type=text], th select, td select
{
    border: 0.5px solid var(--Gray-3);
    height: 28px;
    padding: 3px;
    text-align: left;
    width: auto;
}

td input[type=checkbox]
{
    height: 25px;
    margin: 0px 2px;
    padding: 0;
    text-align: center;
}

th span, td span
{
    display: inline-block;
    margin: 0px;
    min-height: 15px;
    padding: 4px;
    white-space: nowrap;
}

.invisible:not(tr)
{
    display: none !important;
}

.invisible td
{
    font-size: 0;
    height: 0;
    transition: font-size 1s, height 1s;
}

.GridView, .GridView_Data
{
    border: 0.5px solid var(--Gray-1);
    margin: 3px;
    text-align: left;
}

.GridView a, .GridView_Data a
{
    color: var(--Color-1);
    font-family: 'Century Gothic';
    text-decoration: none;
}

.GridView th, .GridView_Data th
{
    background-color: var(--Color-4);
    border: 0.1px solid var(--Color-2);
    color: var(--Color-1);
    font-weight: normal;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
}

.GridView_Data td
{
    color: var(--Gray-1);
    font: 14px 'Century Gothic';
    padding: 5px 5px 5px 5px;
}

.GridView td
{
    color: var(--Gray-1);
    font: 14px 'Century Gothic';
    height: 20px;
    padding: 0px 0px 0px 0px;
}

.GridView .ajax__calendar_container td
{
    font-size: 14px;
}

.GridView_Header
{
    background-color: var(--Color-4);
}

.GridView_Row
{
    background-color: White;
    border: 0.1px solid var(--Color-2);
}

.GridView_AlternateRow
{
    background-color: White;
    border: 0.1px solid var(--Color-2);
}

.GridView_Footer
{
    background-color: var(--Color-2);
}

.GridView_Button
{
    background-color: White;
    border: 1px solid var(--Color-1);
    box-sizing: border-box;
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 0px 5px;
    min-height: 25px;
    padding: 0px 5px;
    vertical-align: middle;
}

.GridView_Button:hover
{
    background-color: var(--Color-2);
    color: White;
    cursor: pointer;
}

.GridView_Button[disabled="disabled"], .GridView_Button[disabled]:hover
{
    background-color: var(--Gray-4);
    border: 1px solid var(--Gray-3);
    color: var(--Gray-1);
    cursor: default;
}

.GridView_CheckBox
{
    display: inline-block;
}

.GridView_DropDownList
{
    border: 0.5px solid var(--Gray-3);
    color: var(--Gray-1);
    font: 14px 'Century Gothic';
    height: 100%;
    min-height: 25px;
    padding: 0px 0px 0px 0.6px;
    text-align: left;
    width: 100%;
    vertical-align: top;
}

.GridView_ImageButton
{
    color: Black;
    cursor: pointer;
    height: 25px;
    opacity: 0.001;
    padding: 0px;
    vertical-align: middle;
}

.GridView_Label
{
    box-sizing: border-box;
    color: var(--Gray-1);
    display: inline-block;
    font-family: 'Century Gothic';
    font-size: 14px;
    padding: 3px;
    background-color: transparent;
    text-align: left;
    vertical-align: top;
}

.GridView_TextBox
{
    border: none;
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 100%;
    padding: 3px;
    width: auto;
    vertical-align: top;
}


/******************************************************
                    Home.Master
*******************************************************/
.Wrapper
{
    max-width: 100%;
    position: relative;
    margin-top: 45px;
}
@media screen and (max-width : 1200px)
{
    .Header_Inner
    {
        width: 100%;
    }
    .Header_right
    {
        margin-right: 10px;
    }
    .Header_Left, .Header_Center
    {
        margin-left: 10px;
    }
}

@media screen and (max-width : 800px)
{
    .Header_Center
    {
        clear: both;
        margin: 0;
        margin-top: -10px;
        margin-left: 6px;
    }
}

.Div_Box
{
    border: 0.5px solid var(--Gray-3) !important;
    margin: 0px -5px 5px 5px !important;
    min-height: 20px !important;
    padding: 3px !important;
}

.Bold
{
    font-weight: bold !important;
}

.Btn_Delete
{
    background-color: transparent !important;
    border: none !important;
    height: 20px !important;
    padding: 3px !important;
    position: absolute !important;
    top: -2px !important;
    right: 0px !important;
    width: auto !important;
}

.Btn_Delete:hover
{
    background-color: var(--Color-1) !important;
    border-radius: 10px !important;
    color: white !important;
    cursor: pointer !important;
}

.Btn_X
{
    border: none !important;
    font-size: 14px !important;
    margin: 0px 5px !important;
    padding: 0px !important;
    width: auto !important;
}

.Font_8px
{
    font-size: 8px;
}

.Font_10px
{
    font-size: 10px;
}

.Font_12px
{
    font-size: 12px;
}

.Font_20px
{
    font-size: 20px;
}

/*Height*/
.Min_Height_25px
{
    min-height: 25px !important;
}

.Min_Height_300px
{
    min-height: 300px !important;
}

.Height_35px
{
    height: 35px !important;
}

.Height_40px
{
    height: 40px !important;
}

.Height_45px
{
    height: 45px !important;
}

.Height_300px
{
    height: 300px !important;
}

.Height_400px
{
    height: 400px !important;
}

.Height_Auto
{
    height: auto !important;
}

.Height_80
{
    height: 80% !important;
}

.Height_100
{
    height: 100% !important;
}

.Text_Align_Center
{
    text-align: center !important;
}

.Text_Align_Left
{
    text-align: left !important;
}

.Text_Align_Right
{
    text-align: right !important;
}

/*Width*/
.Width_Auto
{
    width: auto !important;
}

.Width_20
{
    width: 20% !important;
}

.Width_25
{
    width: 25% !important;
}

.Width_30
{
    width: 30% !important;
}

.Width_40
{
    width: 40% !important;
}

.Width_50
{
    width: 50% !important;
}

.Width_60
{
    width: 60% !important;
}

.Width_70
{
    width: 70% !important;
}

.Width_80
{
    width: 80% !important;
}

.Width_90
{
    width: 90% !important;
}

.Width_99
{
    width: 99% !important;
}

.Width_100
{
    width: 100% !important;
}

.Width_40px
{
    width: 40px !important;
}

.Width_60px
{
    width: 60px !important;
}


.Width_70px
{
    width: 70px !important;
}

.Width_80px
{
    width: 80px !important;
}

.Width_90px
{
    width: 90px !important;
}

.Width_95px
{
    width: 95px !important;
}

.Width_100px
{
    width: 100px !important;
}

.Width_110px
{
    width: 110px !important;
}

.Width_120px
{
    width: 120px !important;
}

.Width_130px
{
    width: 130px !important;
}

.Width_140px
{
    width: 140px !important;
}

.Width_150px
{
    width: 150px !important;
}

.Width_160px
{
    width: 160px !important;
}

.Width_170px
{
    width: 170px !important;
}

.Width_180px
{
    width: 180px !important;
}

.Width_190px
{
    width: 190px !important;
}
.Width_200px
{
    width: 200px !important;
}

.Width_400px
{
    width: 400px !important;
}

.Min_Width_100px
{
    min-width: 100px;
}

.Max_Width_150px
{
    max-width: 150px;
}

.Collapsible_Highlight
{
    background-color: var(--Color-4) !important;
}
/*************************************************
                    Popup Panel      
*************************************************/
.Popup_Background, .Background_Popup
{
    background: var(--Gray-1);
    height: 100%;
    left: 0px;
    opacity: 0.8;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 100000;
}
.Popup_Body, .Body_Popup
{
    background-color: white;
    border: 0px solid var(--Gray-3);
    box-sizing: border-box;
    font-size: 0;
    left: 50% !important;
    margin: 3px;
    max-height: 90%;
    max-width: 1200px;
    overflow: auto;
    padding: 5px;
    position: fixed;
    text-align: left;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: auto;
    z-index: 100000;
}
/*************************************************
                     Display     
*************************************************/
.Display_Inline_Block
{
    display: inline-block !important;
}

.Display_Flex
{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/*************************************************
                    Labeling     
*************************************************/
.Input_Label_Left
{
    position: absolute;
    top: 7px;
    left: 7px;
}

.Input_Label_Right
{
    position: absolute;
    top: 7px;
    right: 3px;
}
/*************************************************
                  Line Height     
*************************************************/
.Line_Height_25px
{
    line-height: 25px;
}

.Line_Height_30px
{
    line-height: 30px !important;
}
/*************************************************
                   PlaceHolder     
*************************************************/
.PlaceHolder
{
    color: var(--Gray-2);
}
/*************************************************
                Label, Span, Input
*************************************************/
input[type=checkbox]
{
    margin: 5px 0px 5px 0px;
}

.CheckBox_Big
{
    border: 0.1px solid var(--Gray-3);
    box-sizing: border-box;
    display: inline-block;
    height: 25px;
    margin: 0px 0px 5px 5px;
    vertical-align: middle;
    width: 25px;
}

.CheckBox input[type=checkbox]
{
    margin: 0px;
}

.CheckBox label
{
    font-family: 'Century Gothic';
    font-size: 14px;
    line-height: 25px;
    margin: 0px 0px 0px 5px;
    text-align: left;
    vertical-align: top;
}

.CheckBox
{
    display: inline-block;
    margin: 0px 0px 5px 5px;
    padding: 5px 5px 0px 0px;
}

.CheckBoxList
{
    border: 1px solid gray;
    display: inline-block;
    text-align: left;
    margin: 0px 0px 5px 5px;
    padding: 5px 5px 0px 0px;
    vertical-align: top;
}

.CheckBoxList input[type=checkbox]
{
    margin: 0px 0px 5px 5px;
}

.CheckBoxList label
{
    box-sizing: border-box;
    border: 0.5px solid transparent;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    margin: 0px 0px 5px 5px;
    text-align: right;
    vertical-align: top;
}

select
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    margin: 3px;
    padding: 4px;
    height: 25px;
    width: 100%;
}

select option
{
    text-align: left;
}

.Dropdown
{
    position: relative;
    display: inline-block;
    z-index: 1;
}

.Dropdown .Dropdown_Menu
{
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    width: 100%;
    padding: 0;
    width: 100px;
}

.Dropdown:hover .Dropdown_Menu
{
    display: block;
}

/** List Item Styles **/
.Dropdown a
{
    display: block;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #FFFFFF;
    color: var(--Gray-1);
    border: 1px solid var(--Gray-3);
    font-size: 13px;
}
/** List Item Hover Styles **/
.Dropdown a:hover
{
    background: #A65AA4;
    color: White;
}

.DropDownList
{
    border: 0.5px solid var(--Gray-3);
    font: 14px 'Century Gothic';
    height: 25px;
    margin: 3px;
    padding: 2px;
}

.DropDownList:disabled
{
    background-color: var(--Gray-4);
}

.ImageButton
{
    height: 25px;
    margin: 3px 0px 2px 5px;
    padding: 0px;
    vertical-align: top;
}

.ImageButton:disabled
{
    background-color: Lightgray;
}

.Label_Link
{
    background-color: transparent;
    border: none;
    box-sizing: border-box;
    color: Blue;
    font-family: 'Century Gothic';
    margin: 0px 0px 5px 5px;
    padding: 0px 2px;
    text-align: left;
    text-decoration: underline;
}

.Label_Link:hover
{
    cursor: pointer;
}

.RadioButton
{
    margin: 8px 0px 0px 0px;
}

.RadioButton input[type=radio]
{
    margin: 5px 5px 10px 5px;
}

.RadioButton label
{
    box-sizing: border-box;
    border: 0.5px solid transparent;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    margin-left: 5px;
    padding: 4px 5px 0px 0px;
    text-align: right;
    vertical-align: top;
}

input[type=text], span.Input_Text
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;
    height: 25px;
    margin: 3px;
    padding: 4px;
    vertical-align: top;
    width: 100%;
}

.TextBox
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    margin: 3px;
    min-height: 25px;
    padding: 3px;
    vertical-align: top;
}


span.Input_Text
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;
    height: 25px;
    margin: 3px;
    padding: 4px;
    vertical-align: top;
    width: 100%;
}

span.textarea
{
    background-color: white;
    border: 0.5px solid var(--Gray-3);
    display: block;
    font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;
    line-height: 20px;
    margin: 3px;
    min-height: 20px;
    min-width: 100px;
    padding: 3px;
    overflow: hidden;
    resize: vertical;
}

span.textarea[contenteditable]:empty::before
{
    color: var(--Gray-1);
    content: '';
    display: inline-block;
}
/*************************************************
                    Button
*************************************************/
input[type=button],input[type=submit],button
{
    background-color: White;
    border: 0.1px solid var(--Color-2);
    box-sizing: border-box;
    color: var(--Color-1);
    cursor: pointer;
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 2px 8px;
    vertical-align: top;
    width: 100%;
}

input[type=button]:hover,input[type=submit]:hover,button:hover
{
    background-color: var(--Color-4);
}

.Button
{
    background-color: White;
    border: 0.1px solid var(--Color-2);
    box-sizing: border-box;
    color: var(--Color-1);
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button:hover, .Button_Option:hover
{
    background-color: var(--Green-3);
    color: var(--Green-1);
    border: 2px solid var(--Green-3);
}

.Button:disabled, .Button[disabled]:hover
{
    background-color: var(--Gray-4);
    border: 1px solid var(--Gray-3);
    color: var(--Gray-1);
    cursor: auto;
}

.Button_Selected
{
    background-color: var(--Color-4) !important;
    border: 1px solid var(--Color-1) !important;
    box-sizing: border-box !important;
    color: var(--Color-1) !important;
    font-family: 'Century Gothic' !important;
    font-size: 14px;
    font-weight: bold;
    height: 25px;
    margin: 3px;
    padding: 0px 5px !important;
    vertical-align: top !important;
}

.Button_Option
{
    border: 1px solid var(--Gray-2);
    box-sizing: border-box;
    color: var(--Gray-1);
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Option:hover
{
    border: 2px solid var(--Color-1);
}

.Button_Option:disabled, .Button_Option[disabled]:hover
{
    background-color: var(--Gray-4);
    border: 1px solid var(--Gray-3);
    color: var(--Gray-1);
    cursor: auto;
}

.Button_Option_Selected
{
    background-color: var(--Color-4) !important;
    color: var(--Color-1) !important;
    font-weight: bold !important;
}

.Button_Sub
{
    background-color: White;
    border: 1px solid var(--Gray-1);
    box-sizing: border-box;
    color: Black;
    cursor: pointer;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 2px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Sub:hover
{
    border: 2px solid var(--Gray-1);
}

.Button_Sub_Selected
{
    background-color: var(--Gray-1);
    border: 1px solid var(--Gray-1);
    box-sizing: border-box;
    color: White;
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 2px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Highlighted
{
    background-color: White;
    border: 3px solid var(--Red-1);
    box-sizing: border-box;
    color: var(--Color-1);
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    margin: 0px 0px 5px 5px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Delete
{
    border: none !important;
    font-size: 14px !important;
    margin: 0px 5px !important;
    padding: 4px !important;
    width: auto !important;
}

.Btn_Close
{
    background-color: transparent !important;
    border: none !important;
    font-size: 20px;
    height: 20px !important;
    margin: 0 !important;
    padding: 2px !important;
    position: absolute;
    right: 0;
    text-align: center !important;
    top: 0;
    width: 25px !important;
}

.Btn_Close:hover
{
    background-color: var(--Color-4) !important;
}

.Btn_Link
{
    background-color: transparent !important;
    border: none !important;
    margin-left: 5px !important;
    text-decoration: underline !important;
    width: auto !important;
}

.Btn_Link:hover
{
    background-color: var(--Color-5) !important;
    cursor: pointer;
}

.Btn_Add
{
    background-color: transparent !important;
    border: none !important;
    width: auto !important;
}

.Btn_Add:hover
{
    background-color: var(--Color-1) !important;
    border-radius: 15px;
    color: White;
    cursor: pointer;
}

/*************************************************
                     Grid
*************************************************/

.grid
{
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-column-gap: 5px;
    width: 99%;
}
.grid .grid_col_1
{
    grid-column: 1 / 2;
}
.grid .grid_col_2_4
{
    grid-column: 2 / span 3;
}
.grid .grid_col_2
{
    grid-column: 2 / 3;
}
.grid .grid_col_2_3
{
    grid-column: 2 / 4;
}
.grid .grid_col_3
{
    grid-column: 3 / 4;
}
.grid .grid_col_4
{
    grid-column: 4 / 5;
}
.grid .grid_col_1_2
{
    grid-column: 1 / span 2;
}
.grid .grid_col_3_4
{
    grid-column: 3 / span 2;
}
.grid .grid_col_1_3
{
    grid-column: 1 / 4;
}
.grid .grid_col_1_4
{
    grid-column: 1 / span 4;
}
.grid .grid_col_1hh11_1
{
    grid-column: 1.0 / 2.0;
}
.grid .grid_col_1hh11_2
{
    grid-column: 2.0 / 2.5;
}
.grid .grid_col_1hh11_3
{
    grid-column: 2.5 / 3.0;
}
.grid .grid_col_1hh11_4
{
    grid-column: 3.0 / 4.0;
}
.grid .grid_col_1hh11_5
{
    grid-column: 4.0 / 5.0;
}

/*************************************************
                    Position     
*************************************************/
.Pos_Absolute
{
    position: absolute !important;
}

.Pos_Relative
{
    position: relative !important;
}

.Pos_Sticky_Top
{
    background-color: white !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

.Pos_Sticky_Bottom
{
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.Right_0px
{
    right: 0px !important;
}

.Right_10px
{
    right: 10px !important;
}

.Top_3px
{
    top: 3px !important;
}
/*************************************************
                 Padding/Margin
*************************************************/
/*Margin*/
.Margin_0px
{
    margin: 0px !important;
}

.Margin_Btm_0px
{
    margin-bottom: 0px !important;
}

.Margin_Btm_5px
{
    margin-bottom: 5px !important;
}

.Margin_Btm_10px
{
    margin-bottom: 10px !important;
}

.Margin_Btm_20px
{
    margin-bottom: 20px !important;
}

.Margin_Lft_0px
{
    margin-left: 0px !important;
}

.Margin_Lft_2px
{
    margin-left: 2px !important;
}

.Margin_Lft_5px
{
    margin-left: 5px !important;
}

.Margin_Lft_10px
{
    margin-left: 10px !important;
}

.Margin_Lft_20px
{
    margin-left: 20px !important;
}

.Margin_Rgt_0px
{
    margin-right: 0px !important;
}

.Margin_Rgt_5px
{
    margin-right: 5px !important;
}

.Margin_Rgt_10px
{
    margin-right: 10px !important;
}

.Margin_Rgt_18px
{
    margin-right: 18px !important;
}

.Margin_Top_0px
{
    margin-top: 0px !important;
}

.Margin_Top_5px
{
    margin-top: 5px !important;
}

.Margin_Top_8px
{
    margin-top: 8px !important;
}

.Margin_Top_10px
{
    margin-top: 10px !important;
}

/*Padding*/
.Padding_0px
{
    padding: 0px !important;
}

.Padding_0px_4px
{
    padding: 0px 4px !important;
}

.Padding_3px_8px
{
    padding: 3px 8px !important;
}

.Padding_4px
{
    padding: 4px !important;
}

.Padding_10px
{
    padding: 10px !important;
}

.Padding_Left_0px
{
    padding-left: 0px !important;
}

.Padding_Left_10px
{
    padding-left: 10px !important;
}

.Padding_Right_20px
{
    padding-right: 20px !important;
}

.Padding_Right_25px
{
    padding-right: 25px !important;
}

.Space_Top_10px
{
    margin-top: 10px !important;
}

.Space_Top_20px
{
    margin-top: 20px !important;
}

.Space_Top_30px
{
    margin-top: 30px !important;
}

.Space_Left_5px
{
    margin-left: 5px !important;
}

.Space_Left_10px
{
    margin-left: 10px !important;
}

.Space_Left_20px
{
    margin-left: 20px !important;
}
/*************************************************
                  White Space      
*************************************************/
.WhiteSpc_Normal
{
    white-space: normal;
}

.WhiteSpc_NoWrap
{
    white-space: nowrap;
}

/*************************************************
                     Legacy     
*************************************************/
.Label_Title_Portal
{
    font-size: 14px;
    margin-top: 5px;
    float: left;
}

.TextBox_Portal, .TextBoxWatermark
{
    border: 0.5px solid var(--Gray-3);
    box-sizing: border-box;
    font-family: 'Century Gothic';
    font-size: 14px;
    min-height: 35px;
    margin: 10px 0px;
    float: left;
    width: 100%;
    max-width: 100%;
    box-shadow: var(--Gray-1) 0px 3px 9px;
}

.Page_Title
{
    margin: 0px 0px 10px 5px;
}

.Page_Title span
{
    color: var(--Green-1);
    font: 30px 'Century Gothic';
    margin: 0px 0px 0px 0px;
}

.Button_Portal
{
    background-color: var(--Green-2);
    color: White;
    border: 1px solid var(--Green-2);
}

.Error_Field
{
    border: 3px solid red !important;
}

.Login
{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 50px !important;
}

.Z_Idx_1000
{
    z-index: 1000;
}

.Z_Idx_1100
{
    z-index: 1100;
}

.Z_Idx_1200
{
    z-index: 1200;
}

.Z_Idx_2000
{
    z-index: 2000;
}

.Z_Idx_2100
{
    z-index: 2100;
}

.Z_Idx_2200
{
    z-index: 2200;
}

.Z_Idx_3000
{
    z-index: 3000;
}

.Z_Idx_3100
{
    z-index: 3100;
}

.Z_Idx_3200
{
    z-index: 3200;
}

.Z_Idx_4000
{
    z-index: 4000;
}

.Z_Idx_4100
{
    z-index: 4100;
}

.Z_Idx_4200
{
    z-index: 4200;
}

.Z_Idx_5000
{
    z-index: 5000;
}

.Z_Idx_5100
{
    z-index: 5100;
}

.Z_Idx_5200
{
    z-index: 5200;
}

.Z_Idx_6000
{
    z-index: 6000;
}

.Z_Idx_6100
{
    z-index: 6100;
}

.Z_Idx_6200
{
    z-index: 6200;
}

.Z_Idx_7000
{
    z-index: 7000;
}

.Z_Idx_7100
{
    z-index: 7100;
}

.Z_Idx_7200
{
    z-index: 7200;
}

.Z_Idx_8000
{
    z-index: 8000;
}

.Z_Idx_8100
{
    z-index: 8100;
}

.Z_Idx_8200
{
    z-index: 8200;
}

.Z_Idx_9000
{
    z-index: 9000;
}

.Z_Idx_9100
{
    z-index: 9100;
}

.Z_Idx_9200
{
    z-index: 9200;
}
