.GridContainer
{
    position: relative;
}

.GridLoadingPanel
{
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;    
}

.GridLoadingPanel img
{    
    margin-top: 12.5%;    
}

.GridSearchTextBox
{ 
    margin-left: 0px; 
}

.GridSearchTable
{
    margin-bottom: 15px;
	width: 100%;
}

#SearchBoxPanel .SmallIcon 
{
    display: none;
}

.GridSearchTable tr td:first-child 
{
    display:block;
}

.GridSearchTable td:last-child 
{
    text-align: right;
}

.GridSearchTextBox
{
    width: 282px;
    margin-right: -32px;
	margin-left: 0px;
}

.GridTable
{
    width: calc(100% - 1px);
    margin-bottom: 20px;
    border-collapse: separate;
}

#UserTableTranscriptFullView
{
    width: 100%;
}

.GridTable th
{    
    background-color: #E5E8EB;
    color: #606C7D;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 3px;
    padding-right: 3px;
    border-top: 1px solid #D4D4D4;
    border-bottom: 1px solid #D4D4D4;
    font-size: 1.1em;
    font-weight: 400;
}

.GridTable th:first-child 
{
    border-left: 1px solid #D4D4D4;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;    
}

.GridTable th:last-child 
{
    border-right: 1px solid #D4D4D4;
    -webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
    border-radius: 0 4px 0 0;    
}

.GridTable th a
{
    color: #606C7D;
}

.GridTable th img
{
    margin-left: 5px;
    padding-bottom: 2px;
}

.GridTable .GridDataRow
{
    /*border: 1px solid #D7DBE0;*/
    /*border-top: 0px;*/
    border: none;
}

.GridTable th:first-child input[type="radio"], 
.GridTable th:first-child input[type="checkbox"], 
.GridTable td:first-child input[type="radio"], 
.GridTable td:first-child input[type="checkbox"]
{
    float: none;
	margin-right: 0px;
}

.GridDataRow td
{
    padding: 6px 5px;
}

.GridDataRow td img
{
    border-radius: 3px;
}

.GridDataRowEmpty td
{
    text-align: center;
}

/*
while this effectively "zebra-stripes" the grid, we cannot do it this way because 
there are some grids with rows that act as sub-headings and they should not be treated
as a normal data row - this is left here commented out as a reminder not to do this

.GridTable tr:nth-child(2n + 1)
{
    background-color: #F0F1F5;
}
*/

.GridDataRowAlternate
{
    background-color: #F0F1F5;
}

.GridDataRowEmpty
{
    border-bottom: 1px solid #DDDDDD;
}

.GridDataRowEmpty td
{
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.GridDataRowDisabled
{
    background-color: #C1C1C1;
    color: #EFEBEB;
}

/*

GRID PAGER

*/

.GridTable #GridPager 
{	
}

.GridPagerTable
{
    width: 100%;
    border: none;
}

.GridPagerTable tr 
{
	background: inherit;
}

.GridPagerTable td 
{
	padding: 4px 2px;
}

.GridPagerCellPageXofY
{
    width: 33.33333%;
	text-align: left;
    border: none;
    color: #4d82ae;
}

.GridPagerCellButtons
{
    width: 33.33333%;
    text-align: center;
    border: none;
	white-space: nowrap;
}

.GridPagerCellButtons input
{
    border: none;
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	height: 20px;
	width: 20px;
}

.GridPagerCellButtons input[src$="dim.png"] 
{
    opacity: 0.6;
}

.GridPagerCellRecordCount
{
    width: 33.33333%;
    text-align: right;
    border: none;
    color: #4d82ae;
}

.GridCheckboxColumn
{
    width: 40px;
	text-align: center;
}

.GridRowSelected 
{
    background-color: #C7E6F7;
}

.GridRowHover 
{
    background-color: #DFEDFB;
    border-color: #B1B9C3;
}

/* GRID COLUMN ELEMENTS */

.GridAvatarImage
{
    padding-top: 2px;
    float: left;
    margin-right: 10px;
    width: 28px;
    height: 28px;
}

.GridAvatarImage.AvatarImage
{
    border-radius: 32px;
}

.GridBaseTitle
{
    font-size: 1.5em;
    font-weight: 300;    
    margin-right: 8px;
    display: inline-block;
}

.GridSecondaryTitle
{
    white-space: nowrap;
    font-size: 1.2em;
    font-weight: 300;
    margin-right: 4px;
}

.GridSecondaryLine
{
    display: block;
    margin-left: 39px;
    font-weight: 300;
}

.GridSecondaryLineInlineWrapper
{
    display: block;
    margin-left: 39px;
}

.GridSecondaryLineInline
{
    display: inline-block;
    border-right: 1px solid #CCCCCC;
    padding-right: 15px;
    margin-right: 15px;
    font-weight: 300;
}

.GridSecondaryLineInline:last-child
{
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.GridOnlineIndicator
{
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-bottom: -3px;
    border-radius: 25px;
    border: 1px solid #9A9A9A;        
}

.GridOnlineIndicator.UserOnline
{
    background: #87BF36;
}

.GridOnlineIndicator.UserOffline
{
    background: #D1D1D1;
}

.GridImageLink
{
    display: inline-block;
    width: 52px;
    text-align: center;
}

.GridImageLink img
{
    width: 32px;
    height: 32px;
}

/* GRID DELETE BUTTON */

#GridDeleteButton img, .GridDeleteButton img
{
    margin-right: 6px;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

/* GRID RETRY BUTTON */

#GridRetryButton img
{
    margin-left : 20px;
    margin-right: 6px;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}

/* USER ACCOUNT DATA */

.TabRow
{
    background-color: #333333;
    color: #FFFFFF;
    font-weight: 700;
}

.TabRow .NonActionButton
{
    color: #FFFFFF;
}

.TabIdentifierCell
{
    padding-top: 15px;
    padding-bottom: 15px;
}

.TabEditLabelIcon, .UserFieldEditLabelIcon
{
    cursor: pointer;
    margin-left: 10px;
}

.TabLabelEditTextBox, .UserFieldLabelEditTextBox
{
    width: 200px;
    margin-right: 5px;
}

.UserFieldIdentifierCell
{
    padding-top: 10px;
    padding-bottom: 10px;
}

.UserFieldOptionsIcon
{
    cursor: pointer;
}

.UserFieldOptionsLeftSideContainer
{
    float: left;
    width: 45%;
}

.UserFieldOptionsRightSideContainer
{
    float: right;
    width: 45%;
}

.UserFieldDescriptionContainer, .UserFieldOptionsOKCancelContainer, 
.UserFieldInputTypeContainer, .UserFieldChoiceValuesContainer, 
.UserFieldRegularExpressionContainer
{
    margin-bottom: 7px;
}

.UserFieldDescriptionTitleContainer, .UserFieldInputTypeTitleContainer, 
.UserFieldChoiceValuesTitleContainer, .UserFieldRegularExpressionTitleContainer
{
    margin-bottom: 3px;
    font-weight: 700;
}

.UserFieldDescriptionInstructionsContainer, .UserFieldInputTypeInstructionsContainer, 
.UserFieldChoiceValuesInstructionsContainer, .UserFieldRegularExpressionInstructionsContainer
{
    margin-bottom: 3px;
}

.UserFieldDescriptionTextBox
{
    width: 100%
}

.UserFieldChoiceValuesTextBox, .UserFieldRegularExpressionTextBox
{
    width: 80%;
}

.UserAgreementRequiredCheckBoxContainer
{
    margin-bottom: 15px;
}

#AdminViewPreviewButtonContainer
{
    float: left;
    margin-right: 15px;
}

#AdminViewPreviewButtonContainer img
{
    vertical-align: middle;
    margin-right: 3px;
}

#UserViewPreviewButtonContainer
{
    float: left;
    margin-right: 15px;
}

#UserViewPreviewButtonContainer img
{
    vertical-align: middle;
    margin-right: 3px;
}

#RegistrationFormPreviewButtonContainer
{
    float: left;
    margin-right: 15px;
}

#RegistrationFormPreviewButtonContainer img
{
    vertical-align: middle;
    margin-right: 3px;
}

@media only screen and (max-width: 640px) 
{
    .GridBaseTitle 
    {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ResponsiveColumnHidden { display: none; }    
}

@media (max-width: 480px) 
{
    .GridBaseTitle 
    {
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .GridPagerCellButtons input 
    {
        padding: 2px;
        width: 21px;
        height: 21px;
    }    

}

@media (max-width: 400px) 
{
    .GridBaseTitle 
    {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}