/*swipe styles*/
li[data-swipeurl] .aSwipeBtn {font-size: medium;margin: 4px 4px 0 0 !important;padding: 0;z-index: 100;border-radius: .5em;float: right;}
li[data-swipeurl] .aSwipeBtn .ui-btn-inner {padding: 0.6em .9em !important;}
li[data-swipeurl] .aSwipeBtn .ui-btn-corner-all {border-radius: .5em;}

li[data-swipeurl] .LargeFactor {font-size: medium;margin: 4px 4px 0 0 !important;padding: 0;z-index: 200;border-radius: .5em;float: right;right:5px;}
li[data-swipeurl] .LargeFactor .ui-btn-inner {padding: 0.6em .9em !important;}
li[data-swipeurl] .LargeFactor .ui-btn-corner-all {border-radius: .5em;}

.fullslide-element .ui-slider-switch { width: 9em }

/* preserve the whitespace for errors */
.validation-summary-errors li {
    white-space: pre-wrap;
}

/* placement of footer pagenumber */
.ui-footer-pagenumber {
    position: absolute; 
    left: 5.5em; 
    top: 0.8em;
}

/* Hide lookup buttons */
.DSL-Lookup-Off
{
    visibility:hidden;
}

.ui-content 
{
    padding-left:6px !important;
    padding-right:6px !important;
}

.DSLFormControlGroup.ui-controlgroup
{
    margin:0;
}

.DSLTabButton .ui-btn {
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    border-spacing: 0em;
    line-height: 2em;
}

.DSLTabButton {
    border-radius: 0 !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

.DSLTabButton .ui-btn-inline {
    display: block;
    vertical-align: inherit;
}

.DSLTabPage {
    border-style: solid;
    border-color: black;
    border-width: thin;
}

.DSLDateWrapper {
    min-width: 6em  !important;
    max-width: 19em;
} 

.DSLTextWrapper {
    min-width: 6em  !important;
    max-width: 19em;
} 

.DSLDateWrapper div {
    margin-top:0px !important;
} 

.DSLTextWrapper div {
    margin-top:0px !important;
} 

.DSLTextAreaWrapper {
    margin-top:0px !important;
    max-width: 19em;
} 

.ScrollableTable
{
    overflow: auto;
    padding: 15px;
    -webkit-overflow-scrolling: touch;
}

.TimecardPFTDayTable
{
    overflow: auto;
    width: 100%;
    float: left;
    -webkit-overflow-scrolling: touch;
}

.LargeFactor
{
    visibility:hidden;
    display:none;
}

/* Calendar */
.fullslide-element  { width: 9em; }
.fullslide-element .ui-slider-switch { width: 9em; }

.CalBox
{
    font-size: small !important;
    width: 2.2em !important;
    height: 2.2em !important;
    align-content:center !important;
    justify-content:center !important;
    text-align:center !important;

    transition: background-color ease-in-out 0.25s;
}

    .CalBox :hover :focus
    {
        background-color:lightblue;
    }

.CalEBox
{
    font-size: small !important;
    height: 2.2em !important;
    align-content:center !important;
    justify-content:center !important;
    text-align:center !important;
}

.MonthBox
{
    font-size: small !important;
    width: 6.6em !important;
    height: 2.2em !important;
    align-content:center !important;
    justify-content:center !important;
    text-align:center !important;

    transition: background-color ease-in-out 0.25s;
}

    .MonthBox :hover :focus
    {
        background-color:lightblue;
    }

.YearBox
{
    font-size: small !important;
    width: 6.6em !important;
    height: 2.2em !important;
    align-content:center !important;
    justify-content:center !important;
    text-align:center !important;

    transition: background-color ease-in-out 0.25s;
}

    .YearBox :hover :focus
    {
        background-color:lightblue;
    }

/* Floating-point */
.FloatingPoint
{
    text-align: right;
}

/* Upper Case field */
.UpperCaseField
{
    text-transform: uppercase;
}
.Time
{
    text-align: right;
}

.SL-resposive-table th.ui-table-priority-1,
.SL-resposive-table td.ui-table-priority-1,
.SL-resposive-table th.ui-table-priority-2,
.SL-resposive-table td.ui-table-priority-2,
.SL-resposive-table th.ui-table-priority-3,
.SL-resposive-table td.ui-table-priority-3,
.SL-resposive-table th.ui-table-priority-4,
.SL-resposive-table td.ui-table-priority-4,
.SL-resposive-table th.ui-table-priority-5,
.SL-resposive-table td.ui-table-priority-5
{
    display: none;
}

@media screen and (min-width: 60em) {
    .SL-resposive-table th.ui-table-priority-6,
    .SL-resposive-table td.ui-table-priority-6,
    .SL-resposive-table th.ui-table-priority-7,
    .SL-resposive-table td.ui-table-priority-7,
    .SL-resposive-table th.ui-table-priority-8,
    .SL-resposive-table td.ui-table-priority-8
    {
        display: none;
    }
}


/* Show priority 1 at 320px (20em x 16px) */
@media screen and (min-width: 20em) {
	.SL-resposive-table th.ui-table-priority-1,
	.SL-resposive-table td.ui-table-priority-1 {
	    display: table-cell !important;
        margin:0  !important;
	}
}

/* Show priority 2 at 480px (30em x 16px) */
@media screen and (min-width: 30em) {
	.SL-resposive-table th.ui-table-priority-2,
	.SL-resposive-table td.ui-table-priority-2 {
	    display: table-cell  !important;
        margin:0  !important;
	}
}    

/* Show priority 3 at 640px (40em x 16px) */
@media screen and (min-width: 40em)
{
    .SL-resposive-table th.ui-table-priority-3,
    .SL-resposive-table td.ui-table-priority-3 {
        display: table-cell !important;
    }
}

/* Show priority 4 at 800px (50em x 16px) */
@media screen and (min-width: 50em)
{
    .SL-resposive-table th.ui-table-priority-4,
    .SL-resposive-table td.ui-table-priority-4 {
        display: table-cell !important;
        margin:0  !important;
    }
}

/* Show priority 5 at 960px (60em x 16px) */
@media screen and (min-width: 60em)
{
    .SL-resposive-table th.ui-table-priority-5,
    .SL-resposive-table td.ui-table-priority-5 {
        display: table-cell !important;
        margin:0  !important;
    }
}

/* Show priority 6 at 1,120px (70em x 16px) */
@media screen and (min-width: 70em)
{
    .SL-resposive-table th.ui-table-priority-6,
    .SL-resposive-table td.ui-table-priority-6 {
        display: table-cell !important;
    }
}

@media screen and (min-width: 80em)
{
    .SL-resposive-table th.ui-table-priority-7,
    .SL-resposive-table td.ui-table-priority-7 {
        display: table-cell !important;
    }
}

@media screen and (min-width: 90em)
{
    .SL-resposive-table th.ui-table-priority-8,
    .SL-resposive-table td.ui-table-priority-8 {
        display: table-cell !important;
    }
}

@media ( min-width: 60em ) {
	.SL-resposive-table {
		display: table-row-group;
	}
	/* Show the table header rows */ 
	.SL-resposive-table  td,
	.SL-resposive-table th,
	.SL-resposive-table  tbody th,
	.SL-resposive-table  tbody td,
	.SL-resposive-table  thead td,
	.SL-resposive-table thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */ 
	.SL-resposive-table  td .ui-table-cell-label,
	.SL-resposive-table  th .ui-table-cell-label { 
		display: none;
	}
}
@media ( min-width: 50em ) {
	.SL-resposive-table-50 {
		display: table-row-group;
	}
	/* Show the table header rows */ 
	.SL-resposive-table-50  td,
	.SL-resposive-table-50 th,
	.SL-resposive-table-50  tbody th,
	.SL-resposive-table-50  tbody td,
	.SL-resposive-table-50  thead td,
	.SL-resposive-table-50 thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */ 
	.SL-resposive-table-50  td .ui-table-cell-label,
	.SL-resposive-table-50  th .ui-table-cell-label { 
		display: none;
	}
}

@media ( min-width: 40em ) {
	.SL-resposive-table-40 {
		display: table-row-group;
	}
	/* Show the table header rows */ 
	.SL-resposive-table-40  td,
	.SL-resposive-table-40 th,
	.SL-resposive-table-40  tbody th,
	.SL-resposive-table-40  tbody td,
	.SL-resposive-table-40  thead td,
	.SL-resposive-table-40 thead th {
		display: table-cell;
		margin: 0;
	}
	/* Hide the labels in each cell */ 
	.SL-resposive-table-40  td .ui-table-cell-label,
	.SL-resposive-table-40  th .ui-table-cell-label { 
		display: none;
	}
}

@media ( max-width: 50em ) {
.EndingPeriodSeparator { margin: 0; padding: 0; border-top:dashed; }
.HoursDaysButton {float:left;position:relative;top:-60px; left:86px; }
.NarrowDescription { display: block; visibility: visible; }
.WideDescription { display: none; visibility: hidden; }
}
@media ( min-width: 50em ) {
.EndingPeriodSeparator { margin: 0; padding: 0; border-left:dashed; }
.HoursDaysButton {float:left;position:relative; left:-30px; top:4px }
.NarrowDescription { display: none; visibility: hidden; }
.WideDescription { display: block; visibility: visible; }
}
/*.ExpressionBuilder-Filter:first-of-type > div.ui-controlgroup-controls > div.ui-select:nth-of-type(2),
.ExpressionBuilder-Filter:not(:first-of-type) > div.ui-controlgroup-controls > div.ui-select:nth-of-type(1) {
    display: none;
}*/

.ExpressionBuilder-Filter {
    margin-bottom: 3px;
    margin-top: 3px;
}

.ExpressionBuilder-Filter-Or {
    padding-left: 20px;
}

.ExpressionBuilder-Filter-Or > .ExpressionBuilder-Filter-And:first-of-type::before {
    content: 'Either';/**/
    display: block;
    margin-left: -20px;
}

.ExpressionBuilder-Filter-Or > .ExpressionBuilder-Filter-And:not(:first-of-type)::before {
    content: 'Or';/**/
    display: block;
    margin-left: -20px;
}

.ExpressionBuilder-Filter-And > .ExpressionBuilder-Filter-Or > .ExpressionBuilder-Filter-And:first-of-type::before {
    content: 'And Either';/**/
    display: block;
    margin-left: -20px;
}

.ExpressionBuilder-Filter-Input {
    min-width: 3em;
}

/*JQ Mobile doesn't usually support textinputs in controlgroups.  This is their recommended workaround.*/
.controlgroup-textinput {
    padding-top: .22em;
    padding-bottom: .22em;
}
.controlgroup-textinput.ui-mini {
    padding-top: .11em;
    padding-bottom: .11em;
}

.qq-detail thead th,
.qq-detail tbody tr:last-child {
	border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.qq-detail tbody th,
.qq-detail tbody td {
	border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.qq-detail tbody tr:last-child th,
.qq-detail tbody tr:last-child td {
	border-bottom: 0;
}
.qq-detail tbody tr:nth-child(odd) td,
.qq-detail tbody tr:nth-child(odd) th {
	background-color: #eeeeee; /* non-RGBA fallback  */
	background-color: rgba(0,0,0,.04);
}

.column-list {
    height: 500px;
    overflow-y: scroll;
    padding: .5em;
}

.QQSelectedColumn {
    -moz-box-shadow: inset 0px 0px 3px #387bbe, 0px 0px 9px #387bbe;
    -webkit-box-shadow: inset 0px 0px 3px #387bbe, 0px 0px 9px #387bbe;
    box-shadow: inset 0px 0px 3px #387bbe, 0px 0px 9px #387bbe;
}

@media ( min-width: 62em )
{
	.PMMenu {
		display: none;
	}
    .panel-button
    {
 		visibility:hidden;
        display:none;
    }

}
@media (max-width: 62em )
{
    .nonPMMenu
    {
 		display: none;
    }
}
.panel-button
{
    max-width:150px;
}
.nonPMMenu {
    width: 240px;
    vertical-align: top;
}
.PMPage {
    vertical-align: text-top;
}

@media (max-width: 50em) {
	.ThreeColumns .ui-block-a,
	.ThreeColumns .ui-block-b,
	.ThreeColumns .ui-block-c
     {
		width: 100%;
		float: none;
	}
}

@media (max-width: 40em) {
	.TwoColumns .ui-block-a,
	.TwoColumns .ui-block-b
     {
		width: 100%;
		float: none;
	}
}

.FourColumns {
    width: 100%;
}

/* Stack all to start */
.FourColumns .ui-block-a,
.FourColumns .ui-block-b,
.FourColumns .ui-block-c,
.FourColumns .ui-block-d
{
    width: 100%;
    float: none;
}

/* First breakpoint - Float c and d, leave a and b */
@media (min-width: 35em) {
    .FourColumns .ui-block-c,
    .FourColumns .ui-block-d
    {
        float: left;
        width: 50%;
    }
}

/* Second breakpoint - Float All */
@media (min-width: 70em) {
    .FourColumns .ui-block-a,
    .FourColumns .ui-block-b,
    .FourColumns .ui-block-c,
    .FourColumns .ui-block-d
    {
        float: left;
        width: 25%;
    }
}

.FiveColumns {
    width: 100%;
}

@media (max-width: 85em) {
    .FiveColumns .ui-block-a,
    .FiveColumns .ui-block-b,
    .FiveColumns .ui-block-c,
    .FiveColumns .ui-block-d,
    .FiveColumns .ui-block-e
    {
        width: 100%;
        float: none;
    }
}

/* Header buttons */
.qq-detail .ui-btn
{
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    border-spacing: 0em;
    line-height:2em;
}
.qq-detail .ui-btn-corner-all
{
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
}
.qq-detail .ui-btn-inline
{
    display:block;
    vertical-align:inherit;
}
.qq-detail th
{
    margin: 0px; 
    padding: 0px;
    min-width: 6em;
    line-height:0em;
}

.ui-icon.ui-icon-alert.ui-icon-shadow.SpinIt {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 18px;
    margin:-9px 0 0 -9px;
    -webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@media screen and (max-width: 800px) {
    .ShowAbove800 {
        display:none;
    }
    .ShowBelow800 {
        display:block;
    }
}
@media screen and (min-width: 800px) {
    .ShowAbove800 {
        display:block;
    }
    .ShowBelow800 {
        display:none;
    }
}

#TimecardSummaryPanel
{
    max-width: 12em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#TimecardNewProject .ui-block-a, #TimecardNewProject .ui-block-b, #TimecardNewProject .ui-block-c
{
    max-width: 16em;
}

.ui-block-a .ui-body {
    border-style:none !important;
    background:rgba(0,0,0,0);
}
.ui-block-b .ui-body {
    border-style:none !important;
    background:rgba(0,0,0,0);
}
.ui-block-c .ui-body {
    border-style:none !important;
    background:rgba(0,0,0,0);
}
.ui-block-d .ui-body {
    border-style:none !important;
    background:rgba(0,0,0,0);
}
.DSLToolTip {
    z-index:1000;
    position: absolute; 
    border-bottom: solid thin; 
    border-right: solid thin; 
    max-width: 320px; 
    display: none; 
    font-size: x-small; 
}



.QuickQueryHeading {
    min-height:2.3em
}

.LookupSearch::-ms-clear {
  width : 0;
  height: 0;
}

/*The below changes the text color/weight for the <REQUIRED> placeholder. Different Browsers see it differently, so we have multiple entries*/
/*WebKits(Chrome/Opera/Safari*/
.RequiredField::-webkit-input-placeholder { 
    color: red; 
    font-weight: bold; 
} 
/*Firefox*/
.RequiredField::-moz-placeholder {
    color: red; 
    font-weight: bold;
 } 
/*IE*/
.RequiredField:-ms-input-placeholder { 
    color: red; 
    font-weight: bold; 
} 
/*Select Boxes/Drop Downs*/
.RequiredDropDown{
    color: red; 
}
select option {
  color: black; 
}
/*END <REQUIRED> placeholder color changes*/

/*Login page styling*/
#TimecardLogin h1.ui-title {
    margin-right: auto !important;
    margin-left: auto !important;
}

#TimecardLogin div.ui-checkbox .ui-btn-inner, #TimecardLogin .ui-select .ui-btn-inner {
    white-space: nowrap;
    text-align: center;
}

#TimecardLogin div.ui-checkbox .ui-btn-text {
    margin-left: 26px;
}

#TimecardLogin .ui-select .ui-btn-text{
    margin-left: 13px;
}

#TimecardLogin div.ui-checkbox {
    padding-top: 5px;
}

#TimecardLogin div.ui-select {
    padding-bottom: 20px
}

#TimecardLogin .ui-submit {
    height: 60px;
}

#TimecardLogin label {
    font-size:small
}

#TimecardLogin .ui-submit .ui-btn-inner {
    height: 30px;
    line-height: 30px;
    font-size:x-large;
}

#TimecardLogin #LoginContent {
    max-width: 400px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}
/*End Login page styling*/

/*Project Expense Entry styling*/
        .headerFieldWrapper {
            height:33.33%;
        }
        .ExpenseGridHeader .ui-block-a, .ExpenseGridHeader .ui-block-b, .ExpenseGridHeader .ui-block-c {
            height:210px;
        }
        .ExpenseGridHeader div.ui-body-a {
            height:100%;
        }
        .ExpenseGridHeader .ui-select {
            padding-top:.2em;
        }
        .ExpenseGridHeader .DSLCalenderButton {
            margin-right:0px;
            margin-left:0px;
        }
        .lookupButton .DSLTextWrapper + td, .lookupButton .DSLDateWrapper + td {
            width:25px;
        }
/*End Project Expense Entry styling*/

.DSLContentScroll {
    overflow-y: scroll;
}
/* 120px should make allowance for header and footer */
.DSLContent0, .DSLContentGrid00 .DSLGridThawedBodyContainer {
    height:100%;
}
.DSLContent10, .DSLContentGrid10 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .1);
}

.DSLContent20, .DSLContentGrid20 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .2);
}

.DSLContent30, .DSLContentGrid30 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .3);
}

.DSLContent40, .DSLContentGrid40 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .4);
}

.DSLContent50, .DSLContentGrid50 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .5);
}

.DSLContent60, .DSLContentGrid60 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .6);
}

.DSLContent70, .DSLContentGrid70 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .7);
}

.DSLContent80, .DSLContentGrid80 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .8);
}

.DSLContent90, .DSLContentGrid90 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * .9);
}

.DSLContent100, .DSLContentGrid100 .DSLGridThawedBodyContainer {
    height: calc(calc(100vh - 120px) * 1);
}


.DSLContentMax10, .DSLContentGridMax10 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .1);
}

.DSLContentMax20, .DSLContentGridMax20 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .2);
}

.DSLContentMax30, .DSLContentGridMax30 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .3);
}

.DSLContentMax40, .DSLContentGridMax40 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .4);
}

.DSLContentMax50, .DSLContentGridMax50 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .5);
}

.DSLContentMax60, .DSLContentGridMax60 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .6);
}

.DSLContentMax70, .DSLContentGridMax70 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .7);
}

.DSLContentMax80, .DSLContentGridMax80 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .8);
}

.DSLContentMax90, .DSLContentGridMax90 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * .9);
}

.DSLContentMax100, .DSLContentGridMax100 .DSLGridThawedBodyContainer {
    max-height: calc(calc(100vh - 120px) * 1);
}

.DSLInvalidValue {
    border: red solid 2px !important;
}

#TimecardNewProject-popup {
    top:10vh !important;
}