:root {
    --main-theme-color: #3792CB;
    --selected-color: #c2def0;
    --grd-border-color: #9A9A9A;
    --tr-row-height: 30px;
    --grd-font-size: 13px;
}


div.grd {
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    border-color: #CCCCCC;
    border-radius: 4px;
    border-color: var(--main-theme-color) !important;
}

    div.grd:focus {
        border-color: var(--main-theme-color) !important;
    }

    div.grd div.toolbar {
        background-color: #DDDDDD;
        border: 1px solid #CCCCCC;
        height: 20px;
        padding: 0 4px 0px 2px;
    }


    div.grd div.footer {
        background-color: #DDDDDD;
        border: 1px solid #CCCCCC;
        height: 20px;
        z-index: 100;
    }

    div.grd div.toolbar ul {
        display: inline;
        height: 20px;
        margin: 0;
        padding: 0;
    }

    div.grd div.footer ul {
        display: inline;
        height: 20px;
        margin: 0;
        padding: 0;
        z-index: 100;
    }

    div.grd div.toolbar ul.tool {
        float: left;
    }

    div.grd div.toolbar ul.nav {
        float: right;
    }

    div.grd div.footer ul.navi {
        float: right;
        z-index: 100;
    }

.sc {
    display: block;
    position: relative;
}

div.grd div.toolbar li.btn {
    border-width: 0;
    float: left;
    height: 16px;
    margin: 1px 0 0 2px;
    overflow: hidden;
    padding: 2px;
}

div.grd div.footer li.btn {
    border-width: 0;
    float: left;
    height: 16px;
    z-index: 100;
    overflow: hidden;
}

div.grd div.toolbar li.nav {
    border-width: 0;
    display: inline;
    float: right;
    height: 15px;
    margin: 2px 0 0 2px;
    overflow: hidden;
    padding: 2px;
}

div.grd div.footer li.navi {
    border-width: 0;
    display: inline;
    padding: 4px;
    height: 15px;
    overflow: hidden;
    z-index: 100;
}

div.grd div.footer div.status {
    background-color: #DDDDDD;
    color: blue;
    font-size: 8pt;
    font-weight: bold;
    height: 17px;
    padding-top: 19px;
    text-align: left;
}

div.grd div.toolbar img.btn {
    border: medium none;
    cursor: pointer;
    float: left;
    height: 16px;
    overflow: hidden;
}

div.grd div.toolbar img.nav {
    border: medium none;
    cursor: pointer;
    float: right;
    height: 15px;
    overflow: hidden;
}

div.grd div.footer img.nav {
    border: medium none;
    cursor: pointer;
    float: right;
    height: 15px;
    overflow: hidden;
}

div.grd div.main {
    margin: 0;
}

div.grd div.vScroll {
    display: inline;
    float: right;
    height: 100%;
    margin-right: -15px;
    overflow-y: scroll;
    position: relative;
    width: 20px;
    z-index: 1;
}

div.titleScroll {
    background-color: #FFFFF1;
    border: none;
    display: none;
    padding: 1px;
    position: absolute;
    z-index: 2;
}

div.grd div.hScroll {
    overflow-x: scroll;
    position: relative;
    width: 100%;
}

div.grd div.footer {
    background-color: #DDDDDD;
    border: 1px solid #CCCCCC;
    height: 17px;
    /*margin-bottom: -36px;
    padding-top: 18px;*/
}

    div.grd div.footer div.left {
        background-color: #F2F2F2;
        display: inline;
        float: left;
        height: 19px;
        /* margin-top: -19px;*/
        width: 65%;
    }



div.grd div.data {
    background-color: #AAAAAA;
    display: inline;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    /*TODO:CHECKvertical-align: top;*/
}

div.grd table.data {
    border-collapse: separate;
    border-spacing: 0;
    border-style: none;
    cursor: default;
    /*font-size: 13px;*/
    table-layout: fixed;
    width: 0;
    vertical-align: top;
}

    div.grd table.data tr.headerRow {
        border-collapse: separate;
        border-spacing: 0;
        border-style: none;
        cursor: default;
        height: 17px;
    }

    div.grd table.data td.cornerBlk {
        background: none repeat scroll 0 0 #EEEEEE;
        border-color: #CCCCCC;
        border-style: solid;
        border-width: 0 1px 1px 0;
        color: #222222;
        font-size: 8pt;
        font-weight: normal;
        overflow: hidden;
        padding: 0;
        vertical-align: top;
        width: 17px;
    }

div.grd td.colH {
    background: none repeat scroll 0 0 #EEEEEE;
    border-collapse: separate;
    border-color: #CCCCCC;
    border-spacing: 0;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #222222;
    cursor: default;
    font-family: Arial,Verdana, Helvetica, sans-serif;
    /*font-size: 8pt;*/
    font-weight: bold;
    height: 20px;
    overflow: hidden;
    padding: 0 2px;
    text-align: left;
    vertical-align: top;
}



    div.grd td.colH div {
        padding-left: 2px;
        padding-right: 15px;
    }

    div.grd td.colH span.nam {
        float: left;
        overflow: hidden;
        position: relative;
        text-transform: capitalize;
        width: 100%;
        padding-top: 3px;
        /* padding-left: 5px; */
    }





    div.grd td.colH span.ico {
        float: left;
        margin-right: -15px;
        width: 15px;
    }

    div.grd td.colH span.sep {
        background: url("../../img/ix.png") repeat scroll -108px -60px transparent;
        cursor: e-resize;
        float: right;
        height: 20px;
        position: relative;
        right: 1px;
        width: 2px;
    }

    div.grd td.colH span.srt {
        cursor: pointer;
        display: block;
        float: right;
        height: 5px;
        position: relative;
        right: 3px;
        top: 5px;
        width: 9px;
    }

    div.grd td.colH span.asc {
        background: url("../../img/ix.png") repeat scroll -60px 0 transparent;
    }

    div.grd td.colH span.dsc {
        background: url("../../img/ix.png") repeat scroll -20px -20px transparent;
    }

div.grd table.data tr.data {
    border-collapse: separate;
    border-spacing: 0;
    border-style: none;
    cursor: default;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Tahoma, Helvetica;
    font-size: 12px;
    height: var(--tr-row-height) !important;
}

    div.grd table.data tr.data:nth-child(2n) {
        background-color: #F1F1F1;
        border-collapse: separate;
        border-spacing: 0;
        border-style: none;
        cursor: default;
    }

div.grd table.data td.rowPtr {
    background: none repeat scroll 0 0 #EEEEEE;
    border-collapse: separate;
    border-color: #CCCCCC;
    border-spacing: 0;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: #222222;
    cursor: default;
    font-family: Arial,sans-serif,sans;
    font-size: 8pt;
    font-weight: normal;
    height: 20px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    vertical-align: middle;
}

div.grd table.data td.data {
    /*background-color: #FFFFFF;*/
    border-collapse: separate;
    border-color: #DDDDDD;
    border-spacing: 0;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: black;
    cursor: default;
    font-family: Arial,Verdana, Helvetica, sans-serif;
    /*font-size: 11px;*/
    line-height: inherit;
    overflow: hidden;
    padding: 0 5px;
    vertical-align: middle;
    white-space: pre-line;
}

div.grd table.data td.edit {
    background-color: #FFFFFF;
    border-collapse: separate;
    border-color: blue;
    border-spacing: 0;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    color: black;
    cursor: default;
    font-family: Arial,sans-serif,sans;
    font-size: 13px;
    line-height: inherit;
    overflow: hidden;
    padding: 0 5px;
    /*vertical-align: bottom*/
    white-space: pre-line;
}


div.grd table.data td.insertable {
    background-color: #FFFFF1;
    border-collapse: separate;
    border-color: #CCCCCC;
    border-spacing: 0;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: black;
    cursor: default;
    font-family: Arial,sans-serif,sans;
    /*font-size: 13px;*/
    line-height: inherit;
    overflow: hidden;
    padding: 0 3px;
    vertical-align: top;
    white-space: pre-line;
}

div.grd table.data td.blank {
    background-color: #FFFFFF;
    border-collapse: separate;
    border-color: #DDDDDD;
    border-spacing: 0;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: black;
    cursor: default;
    font-family: Arial,sans-serif,sans;
    /*font-size: 13px;*/
    line-height: inherit;
    overflow: hidden;
    padding: 0 5px;
    /*vertical-align: top;*/
    white-space: pre-line;
}

div.grd table.data td.ptr {
    background-color: #EEEEEE;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: black;
    cursor: default;
    line-height: inherit;
    white-space: pre-line;
}

div.grd table.data td.grdRowSelect {
    background-color: var(--selected-color);
    border-collapse: separate;
    border-color: #CCCCCC;
    border-spacing: 0;
    border-style: solid;
    border-width: 0 1px 1px 0;
    color: black;
    cursor: default;
    font-family: Arial,Verdana, Helvetica, sans-serif;
    /*font-size: 11px;*/
    /*  font-weight:bold;*/
    line-height: inherit;
    overflow: hidden;
    padding: 0 3px;
    vertical-align: middle;
    white-space: pre-line;
}

.grdChkfalse {
    background: url("../../img/ix.png") repeat scroll -80px -140px transparent;
    height: 16px;
    left: 5px;
    margin-bottom: 3px;
    top: 5px;
    width: 16px;
}

.grdChktrue {
    background: url("../../img/ix.png") repeat scroll -60px -140px transparent;
    height: 18px;
    left: 5px;
    margin-bottom: 3px;
    top: 5px;
    width: 18px;
}

div.grdFolderOptnFade {
    background-color: #000000;
    opacity: 0.2;
    position: absolute;
    z-index: 998;
}

div.grdFolderOptn {
    background-color: #F2F2F2;
    border: 1px solid #AAAAAA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 5px 5px 8px 2px #C1C1C1;
    height: 200px;
    left: 80px;
    overflow: hidden;
    position: absolute;
    top: 30px;
    z-index: 1000;
}

    div.grdFolderOptn td {
        background-color: #DDDDDD;
        border-color: #CCCCCC;
        border-style: solid;
        border-width: 1px;
        cursor: default;
        font-family: Arial,sans-serif,sans;
        font-size: 13px;
        line-height: inherit;
    }

        div.grdFolderOptn td div.innerDiv {
            height: 125px;
        }

    div.grdFolderOptn table.innerTbl td {
        background-color: #FFFFFF;
        border-color: #AAAAAA;
        border-style: solid;
        border-width: 1px;
        cursor: default;
        font-family: Arial,sans-serif,sans;
        font-size: 0.9em;
        line-height: inherit;
        vertical-align: top;
    }

    div.grdFolderOptn table.innerTbl td {
        background-color: #FFFFFF;
        border-style: solid;
        border-width: 1px;
        font-family: Arial,sans-serif,sans;
        font-size: 0.9em;
        line-height: inherit;
    }

    div.grdFolderOptn img.btn {
        border: medium none;
        cursor: pointer;
        float: left;
        height: 15px;
        overflow: hidden;
    }

div.FObtn {
    background: -moz-linear-gradient(center top, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 #E5E5E5;
    border: 1px solid #AAAAAA;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    color: #555555;
    cursor: pointer;
    font-family: Arial;
    padding: 2px;
    text-shadow: 0 1px #FFFFFF;
}

div.grd div.GridTitleHdr {
    background-color: #F2F2F2;
    /*border-bottom: 1px solid #CCCCCC;*/
    color: black;
    font-size: 8pt;
    font-weight: bold;
    height: 20px;
    /* padding-top: 2px;*/
    text-align: left;
}

    div.grd div.GridTitleHdr div {
        padding-top: 2px;
        padding-left: 3px;
    }

div.grdHelper_main {
    background-color: #FF00F2;
    border-bottom: 1px solid #CCCCCC;
    color: black;
    height: 200px;
    width: 300px;
}

    div.grdHelper_main div.grdHelper_btn {
        background-color: #00FFF2;
        border-bottom: 1px solid #CCCCCC;
        color: black;
        cursor: pointer;
        height: 20px;
        width: 20px;
    }

.Add {
    background: url("../../img/ix.png") repeat scroll 0 0 transparent;
    height: 16px;
    width: 16px;
}

.Add_Below {
    background: url("../../img/ix.png") repeat scroll -20px 0 transparent;
    height: 16px;
    width: 16px;
}

.Row_added {
    background: url("../../img/ix.png") repeat scroll -40px 0 transparent;
    height: 16px;
    width: 16px;
}

.Ascending {
    background: url("../../img/ix.png") repeat scroll -60px 0 transparent;
    height: 16px;
    width: 16px;
}

.Copy_Row {
    background: url("../../img/ix.png") repeat scroll -80px 0 transparent;
    height: 16px;
    width: 16px;
}

.Database {
    background: url("../../img/ix.png") repeat scroll -100px 0 transparent;
    height: 16px;
    width: 16px;
}

.Delete {
    background: url("../../img/ix.png") repeat scroll -120px 0 transparent;
    height: 16px;
    width: 16px;
}

.Row_Deleted {
    background: url("../../img/ix.png") repeat scroll 0 -20px transparent;
    height: 16px;
    width: 16px;
}

.Descending {
    background: url("../../img/ix.png") repeat scroll -20px -20px transparent;
    height: 16px;
    width: 16px;
}

.Discard {
    background: url("../../img/ix.png") repeat scroll -40px -20px transparent;
    height: 16px;
    width: 16px;
}

.Row_edited {
    background: url("../../img/ix.png") repeat scroll -60px -20px transparent;
    height: 16px;
    width: 16px;
}

.Edit {
    background: url("../../img/ix.png") repeat scroll -80px -20px transparent;
    height: 16px;
    width: 16px;
}

.Error {
    background: url("../../img/ix.png") repeat scroll -100px -20px transparent;
    height: 16px;
    width: 16px;
}

.Filter {
    /*background: url("../../img/ix.png") repeat scroll -120px -20px transparent;*/
    height: 16px;
    width: 35px;
}

.DiscardFilter {
    background: url("../../img/ix.png") repeat scroll 0 -40px transparent;
    height: 16px;
    width: 16px;
}

.First {
    background: url("../../img/ix.png") repeat scroll -120px -120px transparent;
    height: 16px;
    width: 16px;
}

.Last {
    background: url("../../img/ix.png") repeat scroll -100px -120px transparent;
    height: 16px;
    width: 16px;
}

.Next {
    background: url("../../img/ix.png") repeat scroll -80px -120px transparent;
    height: 16px;
    width: 16px;
}

.Previous {
    background: url("../../img/ix.png") repeat scroll -60px -120px transparent;
    height: 16px;
    width: 16px;
}

.Personalize {
    background: url("../../img/ix.png") repeat scroll -100px -40px transparent;
    height: 16px;
    width: 16px;
}

.Execute {
    background: url("../../img/ix.png") repeat scroll 0 -60px transparent;
    height: 16px;
    width: 16px;
}

.Refresh {
    background: url("../../img/ix.png") repeat scroll -40px -60px transparent;
    height: 16px;
    width: 16px;
}

.Save {
    background: url("../../img/ix.png") repeat scroll -60px -60px transparent;
    height: 16px;
    width: 16px;
}

.Search {
    background: url("../../img/ix.png") repeat scroll -80px -60px transparent;
    height: 16px;
    width: 16px;
}

.Separator {
    background: url("../../img/ix.png") repeat scroll -105px -60px transparent;
    height: 16px;
    width: 5px;
}

.Unsaved {
    background: url("../../img/ix.png") repeat scroll -120px -60px transparent;
    height: 16px;
    width: 16px;
}

.Warning {
    background: url("../../img/ix.png") repeat scroll 0 -80px transparent;
    height: 16px;
    width: 16px;
}

.DeleteAll {
    background: url("../../img/ix.png") repeat scroll -60px -80px transparent;
    height: 16px;
    width: 16px;
}

.UnselectAll {
    background: url("../../img/ix.png") repeat scroll -100px -80px transparent;
    height: 16px;
    width: 16px;
}

.DiscardAll {
    background: url("../../img/ix.png") repeat scroll -120px -80px transparent;
    height: 16px;
    width: 16px;
}

.upArrow {
    background: url("../../img/ix.png") repeat scroll -60px 0 transparent;
    height: 16px;
    width: 16px;
}

.downArrow {
    background: url("../../img/ix.png") repeat scroll -20px -20px transparent;
    height: 16px;
    width: 16px;
}

.xls {
    background: url("../../img/ix.png") repeat scroll -20px -120px transparent;
    height: 16px;
    width: 16px;
}

.import {
    background: url("../../img/ix.png") -20px -180px;
    width: 16px;
    height: 15px;
}

.ptrView {
    background: url("../../img/ui-icons_454545_256x240.png") repeat scroll -32px -16px transparent;
    height: 16px;
    width: 16px;
}

.ptrEdit {
    background: url("../../img/ui-icons_454545_256x240.png") repeat scroll -64px -112px transparent;
    height: 16px;
    width: 16px;
}

.ptrChange {
    background: url("../../img/ui-icons_454545_256x240.png") repeat scroll -112px -64px transparent;
    height: 16px;
    width: 16px;
}

.ptrAdd {
    background: url("../../img/ui-icons_454545_256x240.png") repeat scroll 0 -192px transparent;
    height: 16px;
    width: 16px;
}

.ptrDelete {
    background: url("../../img/ui-icons_454545_256x240.png") repeat scroll -16px -192px transparent;
    height: 16px;
    width: 16px;
}

.ptrErr {
    background: url("../../img/ix.png") repeat scroll -100px -20px transparent;
    height: 16px;
    width: 16px;
}

.statSelect {
    background: url("../../img/ix.png") repeat scroll -80px -80px transparent;
    height: 16px;
    width: 16px;
}

.statRowCount {
    background: url("../../img/ix.png") repeat scroll -100px 0 transparent;
    height: 16px;
    width: 16px;
}

.statFltrCount {
    background: url("../../img/ix.png") repeat scroll -120px -20px transparent;
    height: 16px;
    width: 16px;
}

.statInsert {
    background: url("../../img/ix.png") repeat scroll -40px -80px transparent;
    height: 16px;
    width: 16px;
}

.statDelete {
    background: url("../../img/ix.png") repeat scroll -20px -80px transparent;
    height: 16px;
    width: 16px;
}

.statUnsaved {
    background: url("../../img/ix.png") repeat scroll -120px -60px transparent;
    height: 16px;
    width: 16px;
}

.statErr {
    background: url("../../img/ix.png") repeat scroll -100px -20px transparent;
    height: 16px;
    width: 16px;
}

.statSave {
    background: url("../../img/ix.png") repeat scroll -60px -60px transparent;
    height: 16px;
    width: 16px;
}

.grdChk_true {
    background: url("../../img/ix.png") repeat scroll -59px -139px transparent;
    height: 16px;
    width: 16px;
}

.grdChkDisabled_true {
    background: url("../../img/ix.png") repeat scroll -98px -139px transparent;
    height: 16px;
    width: 16px;
}

.grdChk_false {
    background: url("../../img/ix.png") repeat scroll -79px -139px transparent;
    height: 16px;
    width: 16px;
}

.grdChkDisabled_false {
    background: url("../../img/ix.png") repeat scroll -119px -139px transparent;
    height: 16px;
    width: 16px;
}

.multiSelectChk {
    background: url("../../img/ix.png") repeat scroll -101px -101px transparent;
    height: 16px;
    width: 16px;
}

.showPtrNumber {
    background: url("../../img/ix.png") repeat scroll -80px -100px transparent;
    height: 16px;
    width: 16px;
}

.showPtrNumber {
    background: url("../../img/ix.png") repeat scroll -80px -100px transparent;
    height: 16px;
    width: 16px;
}

div.grd div.footer div.right {
    background-color: #F2F2F2;
    display: inline;
    float: right;
    height: 19px;
    width: 35%;
}

div.grd table.data td.focus {
    background-color: #FFFFFF;
    border-collapse: separate;
    border-color: red;
    border-spacing: 0;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    color: black;
    cursor: default;
    font-family: Arial,sans-serif,sans;
    font-size: 13px;
    line-height: inherit;
    overflow: hidden;
    padding: 0 3px;
    vertical-align: bottom;
    white-space: pre-line;
}

div.grd table.data td div.dataDiv {
    border-color: white;
    border-spacing: 0;
    border-width: 1px 1px 1px 1px;
    width: 100%;
    height: 100%;
    text-align: left;
    outline: medium none;
    white-space: pre-line;
    outline: none;
    font-size: var(--grd-font-size) !important;
}