/*************************************************
                   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-piece
{
    background-color:Blue;
}
 Buttons 
div::-webkit-scrollbar-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}*/
/* Up 
div::-webkit-scrollbar-button:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #555555 transparent;
}

div::-webkit-scrollbar-button:decrement:hover {
  border-color: transparent transparent #777777 transparent;
}*/
/* Down 
div::-webkit-scrollbar-button:increment {
  border-width: 8px 8px 0 8px;
  border-color: #555555 transparent transparent transparent;
}

div::-webkit-scrollbar-button:increment:hover {
  border-color: #777777 transparent transparent transparent;
}*/

div::-webkit-scrollbar-track
{
    background: #ebebe4; /* color of the tracking area */
}

div::-webkit-scrollbar-thumb
{
    background-color: #c3c3c3; /* 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_Color_Gray_1
{
    background-color: rgba(180,180,180,1);
}

.Back_Color_Gray_2
{
    background-color: rgba(200,200,200,1);
}

.Back_Color_Gray_3
{
    background-color: rgba(225,225,225,1);
}

.Back_Color_Gray_4
{
    background-color: rgba(245,245,245,1);
}

.Back_Color_Yellow_3
{
    background-color: rgba(250,255,210,1);
}

.Color_Green
{
    color: Green !important;
}

.Color_Red
{
    color: Red !important;
}

.Color_Orange
{
    color: #ff8701 !important;
}

.Color_Gray
{
    color: #5c5959 !important;
}

.Clear
{
    clear: both;
}

.New_Line_5px
{
    height: 5px;
}

.New_Line_10px
{
    height: 10px;
}

.New_Line_20px
{
    height: 20px;
}

.Float_Left
{
    /*float: left;*/
}

.Editable
{
    background-color: #fdffcb;
}

.Disabled
{
    background-color: #ebebe4 !important; /*border: 0.5px solid #aaaaaa !important;*/
    color: rgb(64,64,64) !important;
    cursor: default;
    pointer-events: none;
}

.Invisible
{
    display: none !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:focus 
{
    border: 2px solid #a65aa4;
    background-color: Aqua;
}*/
/*Focus Effect for Textbox*/
textarea:focus, input[type=text]:focus, input[type=password]:focus, select:focus
{
    outline: 1px auto #a65aa4;
}

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*/
{
    /*border: 0.5px solid transparent;*/
    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: rgba(0, 0, 0, 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: #7e2e83;
    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: #7e2e83;
    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;
    height: auto;
    line-height: 30px;
    margin: 3px;
    padding: 0;
    text-align: left;
}

.Label_Value
{
    background-color: White;
    border: 0.5px solid #aaaaaa !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: #ebebe4;
}

.Label_Select_Normal
{
    border: 1px solid rgb(191,191,191);
    box-sizing: border-box;
    display: inline-block; /*float: left;*/
    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: rgb(230,230,230);
    color: rgb(191,191,191);
}
.Label_Select_Active
{
    border: 2px solid #cf93f7 !important;
    box-sizing: border-box;
    display: inline-block; /*float: left;*/
    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: #6a6a6a !important;
}

/*************************************************
                Collapsible Panel
**************************************************/
.Collapsible_Header
{
    background-color: #e2cfeb;
    box-sizing: border-box;
    border: 0.5px solid #e2cfeb;
    color: #963688;
    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: #7e2e83;
    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 #e2cfeb;
    box-sizing: border-box;
    float: left;
    margin: 0px 3px 3px 3px;
    padding: 3px;
    position: static;
    width: 650px;
}

.Collapsible_Panel[disabled="disabled"]
{
    background-color: #ebebe4;
}

.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 (max-width : 500px)
{
    .Popup_Body
    {
        min-width: 350px;
        max-width: 310px;
    }
}

@media screen and (min-width:769px)
{
    .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; /*float: left;*/
    font: 14px 'Century Gothic';
    padding: 0px;
    margin: 3px;
    text-align: left;
    display: inline-table;
    vertical-align: top;
}

.Div_Display_Only_In_Web
{
    /*float: left;*/
    padding: 1px;
    display: inline-block;
}

.Border_None
{
    border: none !important;
}

.Border_1
{
    border: 1px solid #aaaaaa !important;
}

.Box
{
    background-color: White;
    border: 0.5px solid #a65aa4;
    color: #a65aa4;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px; /*float: left;*/
    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; /*float: left;*/
    margin: 2px 2px 0px 2px;
    padding: 2px;
    position: relative;
    text-align: left;
}

.Box[disabled="disabled"]
{
    background-color: #ebebe4;
}

.Box_With_Title
{
    background-color: White; /*border: 0.5px solid #aaaaaa; */
    box-sizing: border-box; /*float: left;*/
    padding: 5px 5px 0px 0px;
    margin: 3px;
    text-align: left;
}

.Box_With_Title[disabled="disabled"]
{
    background-color: #ebebe4;
}

.Box_With_Title fieldset
{
    border: 0.5px solid #aaaaaa; /*border-radius: 5px;*/ /*margin: 0px 5px 0px -5px;*/
    min-width: 0;
    padding: 5px;
}

.Box_With_Title legend
{
    color: #7e2e83;
    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
{
    /*border: 0.5px solid #aaaaaa; */
    box-sizing: border-box; /*float: left;*/
    max-height: 300px;
    min-height: 10px;
    overflow: auto;
    padding: 0px;
    position: static;
    text-align: left;
    vertical-align: top;
}

.Overflow_Scroll
{
    overflow: scroll !important;
}

.Panel
{
    background-color: White;
    border: 0px solid #aaaaaa;
    box-sizing: border-box; /*float: left;*/
    margin: 3px;
    padding: 5px;
    position: relative;
}

.Panel[disabled="disabled"]
{
    background-color: #ebebe4;
}

.Popup_Header, .Panel_Header
{
    background-color: #813286;
    border-color: #0B0B54 #0B0B54 #0B0B54;
    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; /*text-align: center;*/
    -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: #f1dbf5;
    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 #aaaaaa;
    cursor: pointer;
    margin: -1px 0px 0px 5px;
    padding: 3px;
    position: relative;
}

.Div_Select
{
    background-color: #f1dbf5;
    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 #7e2e83 !important;
}

.Div_Row:hover
{
    background-color: lightyellow;
}

/*************************************************
                   Format
*************************************************/

.Bold
{
    font-weight: bold !important;
}

.Italic
{
    font-style: italic !important;
}


.Underline
{
    text-decoration: underline !important;
}

/*************************************************
                   Component
*************************************************/

.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: #a65aa4;
    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: #a65aa4;
    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 #aaaaaa;
    box-sizing: border-box;
    display: inline-block;
    font: 14px 'Century Gothic';
    margin: 4px;
    padding: 0px 5px 0px 0px;
}

.TreeView_Node
{
    color: #6600FF;
}

.TreeView_Root a
{
    color: Blue;
    font: 14px 'Century Gothic';
    font-weight: bold;
}

.TreeView_Parent a
{
    font: 14px 'Century Gothic';
}

.TreeView_Leaf a
{
    color: #006600;
    font: 14px 'Century Gothic';
}

.TreeView_SelectedNode
{
    border: solid 3px #009933;
    display: block;
    text-decoration: none;
}

.Div_Button
{
    padding: 5px;
    border: 1px solid #a65aa4;
    margin: 3px;
    text-align: center;
}

.Div_Button:hover
{
    background-color: #fdd8ff;
    cursor: pointer;
}

.Div_NumericUpDownExtender
{
    /*float: left;*/
    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-height: 500px;*/
    max-width: 100%;
    margin: 0;
    padding: 0;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    cursor: pointer;
}

.Img_Delete
{
    background-color: rgba(0,0,0,0.5) !important;
    border: none !important;
    border-radius: 10px !important;
    color: White !important;
    height: 20px !important;
    margin: 0 !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: rgba(126,46,131,0.5) !important;
}

/******************************************************
                    Canvas
*******************************************************/

Canvas:hover
{
    cursor: pointer;
}

/******************************************************
                    File Upload
*******************************************************/

.FileUpload
{
    background-color: White;
    border: 1px solid #a65aa4;
    box-sizing: border-box;
    color: #7e2e83;
    cursor: pointer;
    display: inline-block; /*float: left;*/
    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 #5F3761;
}

.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: #7e2e83; /*float: left;*/
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    padding: 0px 5px 0px 5px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus
{
    background-color: #2980B9;
}

.dropdown
{
    position: relative;
    display: inline-block; /*float: left;*/
}

.dropdown-content
{
    display: none;
    position: relative;
    background-color: #f1f1f1;
    min-width: 100px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a
{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover
{
    background-color: #ddd;
}

.show
{
    display: block;
}

/*.center
{
    margin: 5px 0px 5px 5px;
}*/



/******************************************************
                    Home.Master
*******************************************************/
/*Scroll to Top*/

.main
{
    text-align: center;
}
.logos img
{
    position: absolute;
    top: 0;
    z-index: 999;
    margin-left: 0px;
    width: 150px;
    margin-top: 6px;
}
.login_box
{
    position: absolute;
    top: 0;
    z-index: 800;
    right: 0;
    padding: 11px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ffffff;
}
.login_box button
{
    /*font-weight: 700;*/
    color: #ffffff;
}

.btn_log_log_out
{
    border: 0;
    background: transparent; /*font-size: 15px;             font-weight: bold;*/
    cursor: pointer;
    color: #ffffff;
    margin-top: 3px;
}
@media screen and (max-width : 1230px)
{
    .login_box
    {
        /*margin-right: 47px;*/
        margin-top: 0px;
    }
    .menus_bar
    {
        height: 80px;
    }

}
@media screen and (max-width : 1100px)
{
    .logos
    {
        display: none;
    }

    .login_box
    {
        margin-top: 0px;
        margin-right: 35px;
    }
    .udpt_login_button
    {
        margin-top: 3px;
    }
}

.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 99;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}

.loading
{
    font-family: 'Century Gothic';
    font-size: 14px;
    position: fixed;
    z-index: 110001;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.15); /*z-index: 999;             filter: alpha(opacity=80);             -moz-opacity: 0.8;*/
    min-height: 100%;
    width: 100%;
}

.loading img
{
    position: fixed;
    width: 120px;
    height: 120px;
    top: 40%;
    left: 40%;
}
/*************************************************
                 Table/Gridview
*************************************************/
table
{
    border-collapse: collapse;
    border: 0.5px solid #808080;
    margin: 3px 3px 3px 3px;
}

table thead
{
    position: sticky;
    top: 0;
}

table td
{
    background-color: White;
    border: 0.5px solid #aaaaaa;    
    box-sizing: border-box;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
    transition: font-size 1s, height 1s;
}

.Freeze_Col
{
    border: 0.5px solid #aaaaaa;
    left: 0px;
    position: sticky;
    white-space: nowrap;
    z-index: 100;
}

table th
{
    background-color: rgba(250, 234, 248, 1);
    border: 0.1px solid #aaaaaa;
    color: rgba(150, 54, 136, 1);
    font-weight: bold;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
    text-align: center;
}

.table_item th
{
    background-color: rgba(220, 220, 220, 1) !important;
    color: Black;
    border: 0.5px solid rgba(170, 170, 170, 1);
}

table tr
{
    background-color: White;
}

table tr:nth-child(odd)
{
    background-color: #ffffff; /*border: 0.1px solid rgba(180, 70, 190,1);*/
}

table tr:nth-child(even)
{
    background-color: #ffffff; /*border: 0.1px solid rgba(180, 70, 190,1);*/
}

table tr:hover
{
    background-color: #fdf1ff;
    cursor: pointer;
}
table td input
{
    border: none;
}

td input[type=text], th select, td select
{
    border: none;
    height: 25px;
    margin: 2px 0px 0px 0px;
    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 #808080;
    margin: 3px;
    text-align: left;
}

.GridView a, .GridView_Data a
{
    color: rgba(150, 54, 136, 1);
    font-family: 'Century Gothic';
    text-decoration: none;
}

.GridView th, .GridView_Data th
{
    background-color: rgba(250, 234, 248, 1);
    border: 0.1px solid rgba(180, 70, 190,1);
    color: rgba(150, 54, 136, 1);
    font-weight: normal;
    font: 14px 'Century Gothic';
    padding: 3px 5px;
}

.GridView_Data td
{
    color: #505050;
    font: 14px 'Century Gothic';
    padding: 5px 5px 5px 5px;
}

.GridView td
{
    color: #505050;
    font: 14px 'Century Gothic'; /*font-size: 0;*/
    height: 20px;
    padding: 0px 0px 0px 0px;
}

.GridView .ajax__calendar_container td
{
    font-size: 14px;
}

.GridView_Header
{
    background-color: rgba(250, 234, 248, 1);
}

.GridView_Row
{
    background-color: #ffffff;
    border: 0.1px solid rgba(180, 70, 190,1);
}

.GridView_AlternateRow
{
    background-color: #ffffff;
    border: 0.1px solid rgba(180, 70, 190,1);
}

/*.GridView input[type=checkbox]
{
    margin: 4.5px 5px 0px 6px;
}*/

.GridView_Footer
{
    background-color: #99bef7;
}

.GridView_Button
{
    background-color: White;
    border: 1px solid #5F3761;
    box-sizing: border-box;
    color: #7e2e83; /*float: left;*/
    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: #a65aa4;
    color: White;
    cursor: pointer;
}

.GridView_Button[disabled="disabled"], .GridView_Button[disabled]:hover
{
    background-color: #ebebe4;
    border: 1px solid #aaaaaa;
    color: #545454;
    cursor: default;
}

.GridView_CheckBox
{
    display: inline-block;
}

.GridView_DropDownList
{
    border: 0.5px solid #aaaaaa;
    color: #505050;
    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: rgba(0, 0, 0, 0.001);
    cursor: pointer; /*float: left;*/
    height: 25px;
    padding: 0px;
    vertical-align: middle;
}

.GridView_Label
{
    box-sizing: border-box;
    color: #505050;
    display: inline-block;
    font-family: 'Century Gothic';
    font-size: 14px;
    padding: 3px;
    background-color: transparent;
    text-align: left;
    vertical-align: top;
}

.GridView_TextBox
{
    /*background-color: transparent;*/
    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 #aaaaaa !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: 0px !important;
    right: 0px !important;
    width: auto !important;
}

.Btn_Delete:hover
{
    background-color: #7e2e83 !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_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_150px
{
    width: 150px !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: #f0e1f2 !important;
}
/*************************************************
                    Popup Panel      
*************************************************/
.Popup_Background, .Background_Popup
{
    background: #404040;
    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 #aaaaaa;
    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;
}
/*************************************************
                    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: #828282;
}
/*************************************************
                Label, Span, Input
*************************************************/
input[type=checkbox]
{
    margin: 5px 0px 5px 0px;
}

.CheckBox_Big
{
    border: 0.1px solid #aaaaaa;
    box-sizing: border-box;
    display: inline-block;
    height: 25px;
    margin: 0px 0px 5px 5px;
    vertical-align: middle;
    width: 25px;
}

.CheckBox input[type=checkbox]
{
    /*float: left;*/
    margin: 0px;
}

.CheckBox label
{
    /*display: inline;*/
    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; /*float: left;*/
    margin: 0px 0px 5px 5px;
    padding: 5px 5px 0px 0px;
}

.CheckBoxList
{
    border: 1px solid gray;
    display: inline-block; /*float: left;*/
    text-align: left;
    margin: 0px 0px 5px 5px;
    padding: 5px 5px 0px 0px;
    vertical-align: top;
}

.CheckBoxList input[type=checkbox]
{
    /*float: left;*/
    margin: 0px 0px 5px 5px;
}

.CheckBoxList label
{
    /*display: inline;*/
    box-sizing: border-box;
    border: 0.5px solid transparent; /*float:left;*/
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 26px;
    margin: 0px 0px 5px 5px; /*padding: 4px 5px 0px 0px;*/
    text-align: right;
    vertical-align: top;
}

/*.CheckBoxList td
{
    font: 15px 'Century Gothic';
    padding: 0px;
    height: 15px;
}*/

select
{
    border: 0.5px solid #aaaaaa;
    box-sizing: border-box;
    margin: 3px;
    padding: 4px;
    height: 25px;
    width: 100%;
}

select option
{
    text-align: left;
}

.Dropdown
{
    /*float: left;*/
    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: #333333;
    border: 1px solid #aaaaaa;
    font-size: 13px;
}
/** List Item Hover Styles **/
.Dropdown a:hover
{
    background: #A65AA4;
    color: White;
}

.DropDownList
{
    border: 0.5px solid #aaaaaa;
    font: 14px 'Century Gothic';
    height: 25px;
    margin: 3px;
    padding: 2px; /*vertical-align: middle;*/
}

.DropDownList:disabled
{
    background-color: #ebebe4;
}

.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; /*float: left;*/
    font-family: 'Century Gothic';
    margin: 0px 0px 5px 5px;
    padding: 0px 2px;
    text-align: left;
    text-decoration: underline;
}

.Label_Link:hover
{
    cursor: pointer;
}

.RadioButton
{
    /*float: left;*/
    margin: 8px 0px 0px 0px;
}

.RadioButton input[type=radio]
{
    margin: 5px 5px 10px 5px;
}

.RadioButton label
{
    /*display: inline;*/
    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
{
    /*background-color: transparent;*/
    border: 0.5px solid #aaaaaa;
    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 #aaaaaa;
    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
{
    /*background-color: transparent;*/
    border: 0.5px solid #aaaaaa;
    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: transparent;             border: 0.5px solid #aaaaaa;             box-sizing: border-box;             font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;             height: auto;             margin: 0px 0px 5px 5px;             padding: 4px;             width: 100%;*/
    background-color: transparent;
    border: 0.5px solid #aaaaaa;
    display: block;
    font-family: 'Century Gothic' , CenturyGothic, AppleGothic, sans-serif;
    line-height: 20px;
    margin: 3px;
    min-height: 20px;
    min-width: 100px;
    padding: 1px 0px 2px 4px;
    overflow: hidden;
    resize: vertical;
}

span.textarea[contenteditable]:empty::before
{
    color: #757575;
    content: '';
    display: inline-block;
}
/*************************************************
                    Button
*************************************************/
input[type=button]
{
    background-color: White;
    border: 0.1px solid #a65aa4;
    box-sizing: border-box;
    color: #7e2e83;
    cursor: pointer;
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 2px 8px;
    vertical-align: top;
    width: 100%;
}

input[type=button]:hover
{
    background-color: #fdd8ff;
}

.Button
{
    background-color: White;
    border: 0.1px solid #a65aa4;
    box-sizing: border-box;
    color: #7e2e83;
    cursor: pointer; /*float: left;*/
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button:hover
{
    background-color: #fdd8ff;
}

.Button:disabled, .Button[disabled]:hover
{
    background-color: #ebebe4;
    border: 1px solid #aaaaaa;
    color: #545454;
    cursor: auto;
}

.Button_Selected
{
    background-color: #f0e1f2 !important;
    border: 1px solid #5F3761 !important;
    box-sizing: border-box !important;
    color: #7e2e83 !important; /*float: left;*/
    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 rgb(166,166,166);
    box-sizing: border-box;
    color: rgb(127,127,127);
    cursor: pointer; /*float: left;*/
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 3px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Option:hover
{
    border: 2px solid rgb(125,45,130);
}

.Button_Option:disabled, .Button_Option[disabled]:hover
{
    background-color: #ebebe4;
    border: 1px solid #aaaaaa;
    color: #545454;
    cursor: auto;
}

.Button_Option_Selected
{
    background-color: #f0e1f2 !important;
    color: #7e2e83 !important; /*float: left;*/
    font-weight: bold !important;
}

.Button_Sub
{
    background-color: White;
    border: 1px solid #777777;
    box-sizing: border-box;
    color: Black;
    cursor: pointer; /*float: left;*/
    font-family: 'Century Gothic';
    font-size: 14px;
    height: 25px;
    margin: 2px;
    padding: 0px 5px;
    vertical-align: top;
}

.Button_Sub:hover
{
    border: 2px solid #777777;
}

.Button_Sub_Selected
{
    background-color: #777777;
    border: 1px solid #777777;
    box-sizing: border-box;
    color: White; /*float: left;*/
    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 #e91e63;
    box-sizing: border-box;
    color: #7e2e83; /*float: left;*/
    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: #fdd8ff !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: #fdf1ff !important;
    cursor: pointer;
}

.Btn_Add
{
    background-color: transparent !important;
    border: none !important;
    width: auto !important;
}

.Btn_Add:hover
{
    background-color: #7e2e83 !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_Lft_0px
{
    margin-left: 0px !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_Top_0px
{
    margin-top: 0px !important;
}

.Margin_Top_5px
{
    margin-top: 5px !important;
}

.Margin_Top_10px
{
    margin-top: 10px !important;
}

/*Padding*/
.Padding_0px
{
    padding: 0px !important;
}

.Padding_0px_4px
{
    padding: 0px 4px !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_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;
}

.Error_Field
{
    border: 3px solid red !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;
}