/* QuickBase-specific styles for jqGrid plugin*/

/*
These styles are built on the jqGrid styles, imported here so that
pages only need to include jqgrid.qb.css and not also ui.jqgrid.css
*/
@import url("../../../js/jqGrid/css/ui.jqgrid.css");

/*******************************************************************************
** Common styles on top of base jqGrid styles
*******************************************************************************/

.ui-jqgrid tr.jqgrow td {
    height: auto;
    white-space: normal;
    word-wrap: break-word;
    padding: 7px; /* be sure to set jqGrid cellLayout to this+this+1 */
}

.ui-jqgrid .ui-jqgrid-htable div {
    padding: 2px 5px 0px 5px; /* left and right need to be <td>.padding - 2 */
    height: 100% !important;
}

/* This is needed to override the default height of 22px in ui.jqgrid.css - allows the content of th to be vertically centered */
.ui-jqgrid .ui-jqgrid-htable th {
    height: 100%;
}

.DraggableHandle 
{
    position: relative;
}

.ui-jqgrid tr.jqgrow .RowAction,
.ui-jqgrid tr.jqgrow .DraggableHandle .Icon{
    opacity: 0.25;
    filter: alpha(opacity = 25);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
}
.ui-jqgrid tr.jqgrow .RowAction.AlwaysVisible,
.ui-jqgrid tr.jqgrow.ui-state-hover .RowAction,
html.touch .ui-jqgrid tr.jqgrow .RowAction,
.ui-jqgrid tr.jqgrow .DraggableHandle.AlwaysVisible .Icon,
.ui-jqgrid tr.jqgrow.ui-state-hover .DraggableHandle .Icon,
html.touch .ui-jqgrid tr.jqgrow .DraggableHandle .Icon{
    opacity: 1.0;
    filter: none;
    -ms-filter: none;
}
.ui-jqgrid {
    border-right: none;
    border-bottom: none;
}

.ui-jqgrid tr.ui-state-highlight {
    background: #dce8f4;
    border-color: #c1daf2;
}

.ui-jqgrid table tr.ui-state-hover.ui-state-highlight {
    background: #f2fbfe;
}

.ui-jqgrid .ui-state-hover a,
.ui-jqgrid .ui-state-hover a:hover {
    text-decoration: underline;
}

.ui-jqgrid tr.jqgrow td.CheckboxColumn {
    padding-left: 0;
    padding-right: 0;
}

.ui-jqgrid-btable .Icon {
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin-right: 5px;
}

/* Table count at top-right */
.TableCount {
    margin-top: .4em;
    margin-right: 1em;
}


/*******************************************************************************
** Styles for "checkmark" column formatter
*******************************************************************************/

.Checkmark {
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    /* default state is unchecked; add Checked class to make it checked (active) instead */
    background-image: url("images/icons/check_gray.png");
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
}
.Checkmark.Checked {
    background-image: url("images/icons/check_green.png");
}
.Checkmark.Checked.Disabled {
    cursor: default;
    background-image: url("images/icons/check_green_disabled.png");
}
td.Centered {
    /* For when we want just the checkmark to be centered, not the heading */
    text-align:center;
}

/*******************************************************************************
** Styles for automatic tooltips a la .jqGrid("autoToolTips");
*******************************************************************************/

.AutoTip .Headline .Icon {
    vertical-align: middle;
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin-right: 6px;
}

.AutoTip .AllIndented 
{
    clear: both;
    margin-left: 22px; 
}
.AutoTip .Indented 
{
    text-indent: -22px;
    margin-left: 22px; 
}

.AutoTip .Headline {
    margin: 0;
    color: #000;
    padding-bottom: 10px;

}
.AutoTip .Description {
 
    line-height: 15px;
    padding-bottom: 10px;
}
.AutoTip .Description.Secondary,
.AutoTip .Description .Secondary,
.AutoTip .Headline .Secondary {
    color: #777;
}

.AutoTip span {
    white-space: normal;
    word-wrap: break-word;    
}  

/*qTip box shadow*/
.qtip .qtip-wrapper {
    -webkit-box-shadow: 1px 2px 7px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 1px 2px 7px 0px rgba(0,0,0,0.4);
    box-shadow: 1px 2px 7px 0px rgba(0,0,0,0.4);
    line-height: 1.5em;
}

/*******************************************************************************
** Styles for jqgrid.multiSortableRows
*******************************************************************************/

tr.MultiSortableRowIndicator,
tr.MultiSortableRowIndicator > td {
    height: 3px !important;
    border: none !important;
    visibility: visible;
    background: #fc0 !important;
    padding: 0 !important;
}

.MultiSortableRowHelper {
    display: inline-block;
    border: 1px solid #ccc;
    background: #f0f0f0;
    color: Black;
    padding: 4px;
    height: auto !important;
    width: auto !important;
    max-width: 400px !important;
    opacity: 1.0;
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    border-radius: 4px;
    word-wrap: break-word;
}

.MultiSortableRowHelper .CancelMsg {
    display: none;
}

.MultiSortableRowHelper.Cancelling {
    background-color: #fff2cc;
    border-color: #fd7;
}

.MultiSortableRowHelper.Cancelling .Location {
    display: none;
}
.MultiSortableRowHelper.Cancelling .CancelMsg {
    display: inline;
}

/* make text unselectable while sorting */
.ui-jqgrid table.Sorting {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
}

/* While dragging, don't show hover-styles*/
.ui-jqgrid table.Sorting tr.ui-state-hover {
    background: transparent;
}

/* When a row is being moved, give it this class */
.ui-jqgrid .MultiSortMoving {
    opacity: 0.5;
    filter:alpha(opacity=50); /*IE7,8*/
}

.ui-jqgrid table.Sorting tr.ui-state-hover.ui-state-highlight {
    background: #BAD5EF;
}

/* common searchable grid styles */
.TableGridBody .ControlPanel{
    background-color: white;
    padding-top: 1em;
}

.TableGridSection {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 12px;
}


.TableScope {
 margin: 0em 0em 0 0em;
padding-top: 0;
}

.TableScopeItem {
    color:#505050;
    margin-right: 1em;
}

.DragOrderSortable .Movable {
    cursor: ns-resize;
}

.ListFilterForm {
    margin: 0 ;
    padding: 0 0 1em 0;
}


.IE .ListFilterForm #scopeItems {
    margin: 1em 0em;
    padding : 0 0 1em 0;
}




/*******************************************************************************
V2 Styling for toolbars and jqGrids.  In UXV2, document.body will have the .UXV2
css class applied to it automatically.  These styles are predicated upon that.

This means that in UXV2, all jqGrid widgets will automatically look visually
similar to UXV2 table reports, without you needing to do anything.
*******************************************************************************/

body.UXV2 .Toolbar {
    border: none;
    background: #F6F9FD;
    padding: 1em;
    border-bottom: 1px solid #CCE2F9;
}

/* remove borders on table */
body.UXV2 .ui-jqgrid {
    border: none;
}
/* cells only have bottom border, no side borders */
body.UXV2 .ui-jqgrid tr.jqgrow td {
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 10px 7px;
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    transition: 0.1s linear all;
}
/* hovering over a row puts blue bottom border */
body.UXV2 .ui-jqgrid tr.jqgrow:hover td {
    border-bottom-color: #ccc;
}
/* cursor/active row */
body.UXV2 table.ui-jqgrid-btable td.AttentionCell {
    border-left: 3px solid #fc0;
}

/*
zebra striping, including selected state
We use jqGrid's zebra-striping, which applies the class .AltRow
onto every other row.  IE8 doesn't support :nth-child(2n), so we
have to fall back and use jqGrid instead.
*/
body.UXV2 .ui-jqgrid tr.jqgrow {
    border: none;
    -webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    transition: 0.1s linear all;
}
body.UXV2 .ui-jqgrid tr.jqgrow{
    background: white;
}

body.UXV2 .ui-jqgrid tr.jqgrow.AltRow {
    background: white;
}
body.UXV2 .ui-jqgrid tr.jqgrow:hover {
    background: #f2fbfe;
}
/*checkboxed rows*/
body.UXV2 .ui-jqgrid tr.jqgrow.ui-state-highlight,
body.UXV2 .ui-jqgrid tr.jqgrow.ui-state-highlight.ui-state-hover,
body.UXV2 .ui-jqgrid tr.jqgrow.ui-state-highlight:hover {
    background: #ddf5ff;
}
/*zebra striping in checkboxed rows */
body.UXV2 .ui-jqgrid tr.jqgrow.AltRow.ui-state-highlight,
body.UXV2 .ui-jqgrid tr.jqgrow.AltRow.ui-state-highlight.ui-state-hover,
body.UXV2 .ui-jqgrid tr.jqgrow.AltRow.ui-state-highlight:hover {
    background: #ddf5ff;
}

/* header rows have large blue stripe under them */
body.UXV2 .ui-jqgrid .ui-jqgrid-hdiv {
    border-bottom: none;
}
body.UXV2 .ui-jqgrid .ui-jqgrid-hbox {
    border-bottom: none;
}
/* style and hover-state for header cells */
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th {
    background: #666;
    color: #ffffff;
    font-weight: normal;
    border: none;
    border-right: 1px solid #888;
    padding-top: 5px;
    padding-bottom: 5px;
}
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th:hover {
    background: #535353;
    background: -moz-linear-gradient(top, #535353 0%, #535353 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#535353), color-stop(100%,#535353));
    background: -webkit-linear-gradient(top, #535353 0%,#535353 100%);
    background: -o-linear-gradient(top, #535353 0%,#535353 100%);
    background: -ms-linear-gradient(top, #535353 0%,#535353 100%);
    background: linear-gradient(top, #535353 0%,#535353 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfdfe', endColorstr='#e2eefc',GradientType=0 );
}

/* override the sorting icons in header cells */
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th[aria-selected="true"] .ui-jqgrid-sortable {
    /* space for the icon to move into */
    padding-left: 20px;
}
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th .ui-jqgrid-sortable .s-ico {
	display: none;
}
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th[aria-selected="true"] .ui-jqgrid-sortable .s-ico {
    /* the container holding the up and down-arrow icons, currently positioned
    after the text.  So we position absolute it to get to the left */
    float: left;
    position: absolute;
    left: 0px;
    /*size to contents */
    display: inline-block;
	width: 20px;
	height: 20px;
    /*center align*/
    top: 50%;
    margin-top: -10px;
}

body.UXV2 .ui-jqgrid .ui-jqgrid-htable th .ui-jqgrid-sortable .s-ico .ui-grid-ico-sort {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    /* default image pos'n is down arrow */
    background: url(./images/icons/movement_carets.png) no-repeat;
    background-position: 0px 0px;
    /* undo some positioning by jqgrid */
    margin: 0;
    top: 0;
}
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th .ui-jqgrid-sortable .s-ico .ui-grid-ico-sort.ui-icon-asc {
    /* up arrow is shifted bg position */
    background-position: -20px 0px;
}
body.UXV2 .ui-jqgrid .ui-jqgrid-htable th .ui-jqgrid-sortable .s-ico .ui-grid-ico-sort.ui-state-disabled {
    /* arrow which isn't "lit up" is disabled, so hide it and only show the one arrow */
    display: none;
}

/* IE hack for getting gradient backgrounds. IE's gradient overflows the borders so in effect hides whatever borders are showing. Hack is to set a position:relative.*/
body.IE.UXV2 .ui-jqgrid .ui-jqgrid-htable th:hover{
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfdfe', endColorstr='#e2eefc',GradientType=0 );
   position: relative;
}

body.IE.UXV2 .ui-jqgrid .ui-jqgrid-htable th{
   filter: none; /* IE6-9 */
   position: relative;
}

/* links in the grid should be black/underlined, and turn the standard link color on hover */
body.UXV2 .ui-jqgrid tr.jqgrow td a,
body.UXV2 #tabsContainer .ui-jqgrid tr.jqgrow td a {
    color: black;
    text-decoration: underline;
    vertical-align: bottom;
}
body.UXV2 .ui-jqgrid tr.jqgrow td a:hover,
body.UXV2 #tabsContainer .ui-jqgrid tr.jqgrow td a:hover {
    color: #427CD8;
}

/*******************************************************************************
** Styles for jqgrid pagination
*******************************************************************************/

.ui-jqgrid .ui-jqgrid-pager 
{
    height: auto;
}

.ui-pager-control
{
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
}

.ui-icon.ui-icon-seek-next,
.ui-icon.ui-icon-seek-prev,
.ui-icon.ui-icon-seek-first,
.ui-icon.ui-icon-seek-end
{
    height: 20px;
    width: 20px;
    background-position: 0 0;
}

.ui-icon.ui-icon-seek-next
{
    background-image: url('images/icons/page_next.png');
}

.ui-icon.ui-icon-seek-prev
{
    background-image: url('images/icons/page_back.png');
}

.ui-icon.ui-icon-seek-end
{
    background-image: url('images/icons/page_last.png');
}

.ui-icon.ui-icon-seek-first
{
    background-image: url('images/icons/page_first.png');
}

.ui-jqgrid .ui-pg-selbox
{
    height: auto;
    font-size: inherit;
}

.ui-jqgrid .ui-pg-input
{
    font-size: inherit;
}

#last_gridPager 
{
    padding-right: 6px;
}