/**
    Styles for the HTML Grid 
*/
/*Table class to restrict any columns from wrapping their text. Used in reports*/
table.nowrap td,
table.nowrap th {
    white-space: nowrap;
}

table.webgrid {
    width: 100%;
    border-spacing: 1px;
    background-color: #e7e7e7;
    margin: 0 0 1em 0;
}

table {
    empty-cells: show;
}

.webgrid td,
.webgrid th {
    padding: 0.2em;
    empty-cells: show;
}

.webgrid thead th {
    text-align: center;
    color: #737373;
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    border-left: 1px solid #fff;
    /*padding: 0.5em 0;*/
    /*background: #f5f5f5 url(../images/table_th.png) repeat-x scroll 50% 50%;*/
    background: #ddd;
    padding: 4px 3px;
}

.webgrid thead th a {
    color: #737373 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* if, for whatever reason, we have nested tables, make any subtables use a silver header  */
.webgrid tbody table.webgrid thead th {
    background: #f5f5f5 url(../images/header_bg.png) repeat-x scroll 50% 50%;
}

/* if, for whatever reason, we have nested tables, make any subtables use a silver header  */
tbody tr.subheader th {
    background: #f5f5f5 url(../images/header_bg.png) repeat-x scroll 50% 50%;
    font-size: 1.1em;
}

.webgrid thead th.header {
    cursor:pointer;
}

.webgrid thead a:hover {
    text-decoration: underline;
}

.webgrid thead th img {
    vertical-align: middle;
}

.webgrid tbody th {
    font-weight: bold;
    text-align: center;
    background-color: #f5f5f5;
    color: #737373;
}

.webgrid tbody tr			{
    background-color: #fff;
    text-align: left;
}

.webgrid tbody tr td.text-right {
    text-align: right;
}

.webgrid tbody tr td.text-right input {
    text-align: right;
}

/*
    McRae 2/7/2018.
    When not using the built-in savvyPortal grid tool to generate HTML tables, and instead
    building it in the razor in a loop - can use this CSS class instead of managing alternating row color in the razor logic.
*/
.webgrid.alternate-rows tbody tr:nth-child(even) {
    background-color: #f1f1f1;
    border-top: 1px solid #fff;
}
.webgrid.alternate-rows tbody tr:nth-child(even):hover td {
    background-color: rgba(255, 98, 2, 0.32);
}
.webgrid.alternate-rows tbody tr:nth-child(even) td {
    background-color: #f1f1f1;
    border-top: 1px solid #FFF;
}

.webgrid.alternate-rows-white-first tbody tr:nth-child(odd) {
    background-color: #f1f1f1;
    border-top: 1px solid #fff;
}

    .webgrid.alternate-rows-white-first tbody tr:nth-child(odd):hover td {
        background-color: rgba(255, 98, 2, 0.32);
    }

    .webgrid.alternate-rows-white-first tbody tr:nth-child(odd) td {
        background-color: #f1f1f1;
        border-top: 1px solid #FFF;
    }


/*
    In the main.css file (from WordPress?) it makes iamges have a max-width of 100%, e.g. limited
    to whatever container they're in.
    Was a problem for having an image in a <td> when the <tr> had no text (so no width). Made the td disappear.
    Added specifically for Special Pricing's grid, for the Edit/delete icons.
*/
.webgrid tbody td.img-max-width-reset img {
    max-width: inherit;
}

.webgrid tbody tr.odd 	{
    background-color: #f1f1f1;
    border-top: 1px solid #fff;
}

.webgrid tbody tr:hover td,
.webgrid tbody tr.odd:hover td,
.webgrid tbody tr:hover td.highlight {
    background-color: #ffa;
}

.webgrid tbody tr:hover td table.webgrid td,
.webgrid tbody tr.odd:hover td table.webgrid td,
.webgrid tbody tr:hover td.highlight table.webgrid td {
    background-color: #fff;
}

.webgrid tbody tr td 	   {
    background-color: #fff;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-left: 1px solid #fff;
    padding: 4px 3px;
    vertical-align: top;
}

.webgrid tbody tr.odd td {
    background-color: #f1f1f1;
    border-top: 1px solid #FFF;
}

.webgrid tfoot td,
.webgrid tfoot th {
    background-color: #f3f3f3;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;
    font-weight: bold;
}

.webgridactions {
    margin: 5px 0;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    padding: 15px;
}

.webgridactions-noborder {
    margin: 5px 0;
    padding: 15px 0 15px 0;
}

.webgridactions-left {
    float: left;
}

.webgridactions-right {
    float: right;
}

.portalgridcontainer {
    padding: 15px 0;
    clear: both;
}

.selectBoxColumn {
    text-align: center;
    vertical-align: middle;
    width: 40px;
}

.tableTop {
    clear: both;
    padding-bottom: 5px;
}

.tableBottom {
    clear: both;
}

.tableRecordCount {
    float: left;
}

.tablePagerControls {
    color: #000;
    font-weight: bold;
    float: right;
}


/***
Style for tables designed to show an input form
****/
table.formtable {
    
}

table.formtable td {
    padding: 5px;
}

table.formtable th {
    text-align: right;
    padding: 5px;
    vertical-align: middle;
}

table.formtable-aligntop td {
    padding: 5px;
}

table.formtable-aligntop th {
    text-align: right;
    padding: 5px;
    vertical-align: top;
}

table.formtable-aligntop-no-left-padding td {
    padding: 5px 10px 5px 0px;
}