/*Wild Card*/
/*Border-box not inheriting to subcontent so added to subcontent. Revisit to correct inheritance*/
*, *:before, *:after, html{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html{
    height:100%;
    margin: 0;
    padding: 0;
}

#actionitems3
{
    clear: both;
    overflow-y: auto;
    overflow-x: hidden;
    /*max-height: 400px;*/
}

/* User Agent Default Overrides */
form{
    margin-block-end:0;
}
input{
    font-size:14px;
    height:28px;
}
input[type="text"][readonly="readonly"]{
    border:1px solid #959fd0;
    outline:none!important;
}
select{
    font-size:14px;
    height:28px;
}
textarea{
    width: 100%;
    height:150px;
}
textarea[readonly="readonly"]{
    border:1px solid #959fd0;
    outline:none!important;
}
input[type="checkbox"], input[type="radio"]{
    width:16px;
    height:16px;
    position:relative;
    top:2px;
    margin-right:5px;
}
input[type="checkbox"] ~ label{
    font-family:sans-serif;
}
input[type="checkbox"]:disabled + label{
    opacity:0.5;
}
input[type="radio"]:checked + label{
    font-weight:600;
}
.inputError{
    border:2px solid #CC0000;
}
/* Top Bar */
div.ptLogo {
    display:flex;
     margin-left: auto; 
}
div.ptLogo:hover{     
}
div.ptLogo:active {
        box-shadow: 0 0px #8884b7;
        transform: translateY(1px);
}
div.topContent {
    background-color: #f9f8ff;
    /*background-color: #e8e8f7; purplestyle*/
    color: Black;
    font-size: x-large;
    text-decoration: none;
    font-weight: bold;
    height: 50px;
    }
div.topContentContainer{
    display: flex;
    max-width: 1600px;
    justify-content:space-between;
    height:50px;
    margin:0 auto;
}
div.companyTitle {
    max-width: 1655px;
    margin-top:10px;
    font-size: 18px;
    margin-left:7px;    
}
.companyLogo{
    height: 50px;
    margin-top:-10px;
    vertical-align: middle;
}
.menuContainer {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    /* display: grid;
    grid-template-columns: 2fr 1fr; */
    max-width:1600px;
    margin:auto;
}
.menuContainerBackground{
    background-color: #4d5164;
    /* background-color: #5c5982; purplestyle*/
   }
.menuRight{
    cursor:pointer;
    display:flex;
    align-items:center;
    margin-right:2px;
    height:100%;
    z-index:1001;
}
.menuRight.selected_menu{
    border-left:2px solid #eee;
    border-right:2px solid #eee;
}
.menuRight:hover{
    filter:brightness(1.1);
}
.inboxNotice {
    position: absolute;
    bottom: -4px;
    right:-4px;
    background-color: #ec5d20;
    color: #FFF;
    padding: 2px 8px;
    border-radius: 8px;
    min-width: 25px;
    text-align: center;
    font-weight: 600;
}
.menu_layout {
    display: flex;
    
}
.menu_layout2 {
    display: flex;
    /* margin-left: auto; */
}
.menu_layout2 .menu{
    box-sizing:border-box;
    height:42px;
}


/*A*/
.actionColumn {
     width: 760px;
     text-align: center;
}

.actionItemsHeaderColumns {
    color: #49466c;
    /*background-color: #e8e8f7; */
    background-color: #c7d6f6;
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    /* vertical-align: top; */
    height: auto;    
    /*border-left: 1px solid #959fd0;
    border-top: 2px solid #959fd0; 
    border-right: 1px solid #959fd0*/
    border-bottom: 1px solid #959fd0;
    /* margin-right: 10px; */  
    -ms-grid-columns:1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr; 
    display:-ms-grid;
    display: grid;
}

.actionItemsDataColumns {
    text-decoration: none;
    text-align: center;
    height: auto;   
    -ms-grid-columns:1fr 1fr 1fr; 
    grid-template-columns: 1fr 1fr 1fr; 
    display:-ms-grid;
    display: grid;
    }

.adminCompanyInformationBlockLayout { /* unused ?? */
    display:-ms-grid;
    display: grid;
    grid-template-columns: .15fr .5fr 1fr;
    max-width: 1600px;
    margin: auto;
    margin-top: 5px;
    grid-gap: 3px;
}

.adminDataGrid{
    margin: auto;
    overflow-x: hidden;
    overflow-y:auto;
    max-height: 550px;
    border-bottom:1px solid #959fd0;
}
/*.adminDataGrid.footerAbsolute, .footerAbsolute{
    padding-bottom:60px;
}*/
.adminDataGrid .subTitle td, .adminDataGrid .subTitle th{
    position:sticky;
    top:0;
    background-color:#c7d6f6;
    z-index:5;
}
.adminDataGridHeader .headerLabel{
    padding:0 5px;
}
.adminDataGrid table{
    width:100%;
    border:none;
    border-color:transparent;
}
.adminDataGrid td{
    padding:5px 7px;
    border:none;
    word-break:break-all;
}
.adminDataGrid .small{
    min-width:80px;
}
.adminDataGrid td.medium{
    min-width:150px;
}
.adminDataGrid .colHidden{
    max-height:0;
    max-width:0;
    padding:0;
    margin:0;
}
.gridviewInsertFooter{
    position:absolute;
    bottom:-60px;
    background-color:#fff;
    height:60px;
    width:calc(100% - 15px);
}
.width500px .gridviewInsertFooter{
    width:calc(500px - 15px);
}
.width500px.overflowY table {
    width: 485px;
}



/* adminAttributes.aspx start */
.adminPaneEditAttPolicyContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr min-content 1fr;
    grid-gap: 3px;
}
.adminPaneEditAttPolicyContainer .FormLabel{
    grid-column: 1; 
    text-align: right;
    margin-right: 10px;
}
.adminPaneEditAttPolicyContainer .standardFormDropDown, .adminPaneEditAttPolicyContainer .standardForm, .adminPaneEditAttPolicyContainer .adminPaneError{
    grid-column: 2;
    
}

.adminEditAttPolicyListBox{
    width: 100%;
    min-height: 150px;
    overflow: auto;
}

.attributeValuesGrid{
    display:-ms-grid;
    display: grid;
    grid-template-columns:175px 175px 1fr;
    font-size: 100%;
    text-decoration: none;
    min-height:25px;
    align-items:center;
    height:100%;
    box-sizing:border-box;
}

/* adminAttributes.aspx end */

.adminEditCenteredButtons{
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.adminEditCenteredButtons2{
    text-align:center;
    position:relative;
}

/* admineditgroups start*/
/* also used for adminmessage layout start*/
.adminPaneEditGroupContainer{
    display:-ms-grid;
    display: grid;
    grid-template-rows: repeat(auto-fit, 25px);
    grid-template-columns: 1fr min-content 1fr;
    grid-gap: 3px;
}
.adminPaneEditGroupContainer .FormLabel{
    grid-column: 1;
    text-align: right;
    margin-right: 10px;
}
.adminPaneEditGroupContainer .standardFormDropDown, .adminPaneEditGroupContainer .standardForm, .adminPaneEditGroupContainer .adminPaneError{
    grid-column: 2;
    font-size: 14px;
    width: 250px;   
}


.adminEditGroupContainer{
    width: calc(50% - 5px);
    min-width: 540px;
}
@media only screen and (max-width:1240px){
    .adminEditGroupContainer{
        width: 100%;
}
}
/* admineditgroups end*/
/* also used for adminMessage layout End*/


/* admineditpolicy.aspx start */
.adminPaneEditPayrollPolicyContainer{
    display:-ms-grid;
    display: grid;
    grid-template-rows: repeat(auto-fit, 25px);
    grid-template-columns: 1fr min-content 1fr;
    grid-gap: 3px;
}
.adminPaneEditPayrollPolicyContainer .FormLabel{
    grid-column: 1;
    text-align: right;
    margin-right: 10px;
}
.adminPaneEditPayrollPolicyContainer .standardFormDropDown, .adminPaneEditPayrollPolicyContainer .standardForm, .adminPaneEditPayrollPolicyContainer .adminPaneError{
    grid-column: 2;
    font-size: 14px;
    width: 250px;   
}
.adminEditPolicyMainContainer{
    /*display: grid;
    grid-template-columns: 50% 50%;*/
     display: flex;
     flex-wrap:wrap;
     justify-content: space-between;
}
.adminEditPolicyContainer1{
   /* grid-column: 1;   
    display: block;
    box-sizing: border-box;*/
   max-width: 50%;
   min-width: 600px;
   margin-right: 5px;
}
.adminEditPolicyContainer2{
   /*grid-column: 2;   
    display: block;
    box-sizing: border-box;*/ 
   max-width: 50%;
   min-width: 600px;
   margin-left: 5px;
}

.adminEditPolicyContainer{
    width: calc(50% - 5px);
}
@media only screen and (max-width:1240px){
    .adminEditPolicyContainer{
        width: 100%;
}
}

.adminPayrollPolicyTextBoxContainer{
    margin: 5px 0;
    display: flex;
    justify-content: center;
}

.adminPayrollPolicyTextBox{
    width: 500px;
    height: 100px;
}
/* admineditpolicy.aspx end */

.adminPaneError{

}

/* Start: generic 3 column container layout */
/* this layout section also used by adminEditChargeLevel and adminEditMiscDataField */

.adminPane3ColContainer{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns:1fr min-content 1fr;
    grid-template-columns: 1fr min-content 1fr;
    grid-gap: 3px;
}

.adminPane3ColContainer .FormLabel{
    grid-column: 1;
    text-align: right;
    margin-right: 10px;
}
.adminPane3ColContainer .standardFormDropDown, .adminPane3ColContainer .standardForm, .adminPane3ColContainer .standardForm2, .adminPane3ColContainer .adminPaneError{
    grid-column: 2;
    
}

.adminPaneCol3{
    position: relative;
    
}

.adminPane3ColContainer .adminPaneCol3{
    grid-column: 3;
}



/* End: generic 3 column container layout */

/* column presets*/
.adminPane2ColContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3px;
}

.adminPane2ColContainer2{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 300px 300px;
    grid-gap: 3px;
}

.adminPane2ColContainerFlex{
    display: flex;
    min-width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
}

.adminPane2ColContainerFlex .col1, .adminPane2ColContainerFlex .col2{
    min-width:calc(50% - 10px);
}

.adminEmpList{
    display: flex;
    justify-content:center;
    align-items:flex-start;
}
.adminEmpList > :first-child {
    width:calc(100% - 153px);
}
.adminEmpList > :nth-child(2){
    width: 150px;
}

.adminPane2ColContainerEditCharge{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 3px;
}

.adminSplitView{
    display:-ms-grid;
    display: grid;
    grid-template-columns: minmax(300px,30%) 1fr;
    grid-gap: 3px;
}
.adminSplitView.small{
    grid-template-columns: minmax(200px,30%) 1fr;
}
.adminSplitView.medium{
    grid-template-columns: 400px 1fr;
}
.adminSplitView.large{
    grid-template-columns: minmax(560px,30%) 1fr;
}
.adminSplitView.equal{
    grid-template-columns: 1fr 1fr;
 }

.adminPane2ColContainer2080Percent{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 20% calc(80% - 3px);
    grid-gap: 3px;
}
.adminPane3ColContainerOR{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:1fr 40px 1fr;
    grid-template-columns:1fr 40px 1fr;
    grid-gap:3px;
}
.adminPane3ColContainer2{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 200px 1fr;
    grid-gap: 3px;
}

.adminPane3ColContainer3{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 75px 75px 75px;
    grid-gap: 3px;
    column-gap: 10px;
}

.adminPane3ColContainer4{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns:1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 3px;
}

.adminPane3ColContainer5{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    grid-gap: 3px;
}

.adminPane4ColContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 3px;    
}

.adminPane5ColContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 3px;    
}

.adminChargeAttGrid{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 120px 80px 80px;
    width:100%;
}
.adminChargeAttGrid > :nth-child(8n+1):not(.subTitle),.adminChargeAttGrid > :nth-child(8n+2):not(.subTitle),.adminChargeAttGrid > :nth-child(8n+3):not(.subTitle),.adminChargeAttGrid > :nth-child(8n+4):not(.subTitle) {
    background-color: #e6e8e9;
}

.evenRows :nth-child(8n-3), .evenRows :nth-child(8n-2), .evenRows :nth-child(8n-1), .evenRows :nth-child(8n){
    background:#e6e8e9;
}

.adminPane3ColAlternativeRows :nth-child(6n-2),.adminPane3ColAlternativeRows :nth-child(6n-1), .adminPane3ColAlternativeRows :nth-child(6n){
    background:#e6e8e9;
}

.adminPane6ColContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 120px 1fr 120px 1fr 120px 1fr;
    grid-gap: 3px;
    grid-auto-rows: 28px;
}

.adminPane6ColContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 3px;
}

.adminPaneTSHistory{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns: 20% 20% 20% 20% 20%;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-gap: 3px;
}

.employeeInformation6Col{
    display:-ms-grid;
    display: grid;
    grid-template-columns: 50px 200px 200px 200px 200px 50px;
    grid-gap: 3px;
    grid-auto-rows: 28px;
}

.employeeInformation2Col{
    display:-ms-grid;
    display: grid;
    grid-template-columns:  1fr 1fr;
    grid-gap: 3px;
}

.employeeInformation2Col2{
    display:-ms-grid;
    display: grid;
    grid-template-columns:  200px 1fr;
    grid-gap: 3px;
    grid-auto-rows: 28px;
}

.tLogColumnsHeader{
    display:-ms-grid;
    display: grid;
    width:100%;
    min-width:800px;
    height:30px;
    -ms-grid-columns:5% 10% 20% 15% 15% 15% 20%;
    grid-template-columns: 5% 10% 20% 15% 15% 15% 20%;
    border-bottom:2px solid #959fd0;
    background-color:#c7d6f6;
    align-content: center;
}

.tLogColumns{
    display:-ms-grid;
    display: grid;
    width:100%;
    min-width:800px;
    -ms-grid-columns:5% 10% 20% 15% 15% 15% 20%;
    grid-template-columns: 5% 10% 20% 15% 15% 15% 20%;
    padding:3px 0;
}
.tLogColumns > *, .tLogColumnsHeader > *{
    padding:3px;
}
.tLogEmpty{
    padding:10px;
}
.tLogTable{
    width:100%;
}
.subHeaderBackground{
    background-color:#c7d6f6;
}

.colAll{
    grid-column: 1 / -1;
    
}
.col1{
    grid-column: 1;
    -ms-grid-column:1;
}

.col2{
    grid-column: 2;
    -ms-grid-column:2;
}

.col3{
    grid-column: 3;
    -ms-grid-column:3;
}

.col4{
    grid-column: 4;
    -ms-grid-column:4;
}

.col5{
    grid-column: 5;
    -ms-grid-column:5;
}

.col6{
    grid-column: 6;
    -ms-grid-column:6;
}

.col7{
    grid-column: 7;
    -ms-grid-column:7;
}
.col8{
    grid-column: 8;
    -ms-grid-column:8;
}
.col9{
    grid-column: 9;
    -ms-grid-column:9;
}
.col10{
    grid-column: 10;
    -ms-grid-column:10;
}
.row1{
    grid-row:1;
    -ms-grid-row:1;
}
.row2{
    grid-row:2;
    -ms-grid-row:2;
}
.row3{
    grid-row:3;
    -ms-grid-row:3;
}
.row4{
    grid-row:4;
    -ms-grid-row:4;
}
.row5{
    grid-row:5;
    -ms-grid-row:5;
}
.row6{
    grid-row:6;
    -ms-grid-row:6;
}
.row7{
    grid-row:7;
    -ms-grid-row:7;
}
.row8{
    grid-row:8;
    -ms-grid-row:8;
}
.row9{
    grid-row:9;
    -ms-grid-row:9;
}

.adminPane2RowsContainer{
    display: block;
    width:100%;
    grid-template-rows: 1fr 1fr;
}

.adminPane3RowsContainer{
    display: block;
    width:100%;
    grid-template-rows: 1fr 1fr 1fr;
}

.adminPane3RowsContainerEmpList{
    display:-ms-grid;
    display: grid;
    width:100%;
    grid-template-rows: 30% 40% 30%;
}

.row1{
    grid-row:1;
}

.row2{
    grid-row:2;
}

.row3{
    grid-row:3;
}


.adminMenuLayout {
   display:inline-block;
   background-color:#dbdef1;
 }   

.adminListBox{
    width: 100%;
    height: 250px;
    overflow: auto;
    border:none;
    border-bottom:1px solid #959fd0;
}
.adminListBox option{
    padding:5px;
}
.adminListBox option:hover{
    background-color:#dceaf6;
}
.adminListBox:focus{
    outline:none;
}

.adminListBoxIE{
    width: 300px;
    height: 250px;
    overflow: auto;
}

.adminPane{
    display:-ms-grid;
    display: grid;
    grid-template-columns: .25fr 2.75fr;
    max-width: 1600px;
    margin:auto;
    height: 100%;
  }

.adminMenu{
    width: 200px;
   background-color:#fff;
    border-right: 6px solid #9395a3;
    /* border-right: 10px solid #b2afd5; purplestyle*/
}

.adminMenu span {
    width: 100%;
}

.adminModule{

}
.adminMenuLayout > div, .adminMenuLayout > span > div{
    color: #49466c;
    background-color: #FFFFFF;
    font-size: 12pt;
    font-family:sans-serif;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    line-height:40px;
    width:100%;
    margin: 2px 0px;
}


 .adminMenuLayout > div:hover{
    color: #49466c;
    background-color: #dceaf6;
    text-decoration: none;
}

 .adminMenuLayout .adminSelected {
    font-size: 12pt;
    font-family: sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    color: #49466c;
    cursor: pointer;
    background-color: #dceaf6;
    line-height:40px;
    width:100%;
    margin: 2px 0px;
    border: 1px solid #959fd0;
   
}

.adminPaneButtonsContainer{
    margin-bottom:20px;
}

.adminPaneButtonsContainer .button{
    width:75px;
}

.adminPaneContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: minmax(190px,30%) 70%;
}

.adminPaneCol1{
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
}

.adminPaneCol2{

}

.adminPayCodesContainer{
    display:-ms-grid;
    display: grid;
    grid-template-columns: minmax(400px,70%) 30%;
    margin-bottom:20px;

}

/* .adminPayCodesCol1{
    padding-right: 10px;
    padding-left: 10px;
    width: 100%;
    box-sizing: border-box;
    
}
.adminPayCodesCol2{
    padding-top:20px;
    padding-right: 10px;
}

.adminPayCodesCol1 .button{
    width: 150px;
    margin: auto;
    display: block;
} */




.aspGridView {
   width: 100%;
   border: solid;
   border-width: 1px;
   border-color: #959fd0;
  font:16pt;
  align-items: center;
  text-align: left;
  
 

}

.adminEditPSCompanyLogoPanel {
  width: 100%;
  font:16pt;
  align-items: center;
  text-align: center;
 

}

a.menu:link {
    color: #FFFFFF;
    text-decoration: none;
}

a.menu:visited {
    color: #FFFFFF;
    text-decoration: none;
}

a.menu:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

a.menu_selected:link {
    color: #000000;
    text-decoration: none;
}

a.menu_selected:visited {
    color: #000000;
    text-decoration: none;
}

a.menu_selected:hover {
    color: #000000;
    text-decoration: underline;
}

a.ts:link {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12pt;
}

a.ts:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12pt;
}

a.ts:hover {
    color: #FFFFFF;
    text-decoration: underline;
    font-size: 12pt;
}

/*B*/

.bannerimage{
    width: 163px;
    height: 50px;
}
body {
    
    margin:auto;
    background-color: #3a3b4a;
    /*background-color: #373554; purplestyle*/
    box-sizing: border-box;
    height:100%;
}



.bottomLoginContent {
    text-align: center;
}
.bottomLoginContentErrors{
    margin-bottom:10px;
}
.bottomLoginContentForgotError{
    margin-top:10px;
    margin-bottom:30px;
}
.bottomLoginContentPTVersion{
    font-size:11px;
    text-align:right;
}
.bottomLoginContentSecurity{
    margin-top:10px;
}
.bottomLoginContentSecurityQuestion{
    display:block;
}
.bottomLoginContentSecurityAnswer{
    margin-top:10px;
    margin-bottom:10px;
}

/* Start Button CSS */
.button {
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: #49466c;
    min-height: 26px;
    line-height:20px;
    width: 120px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing: border-box;
    margin-top: 2px;
    margin-bottom: 2px;
    }

a:link.button  {
  color:#49466c ;
}


/* visited link */
a:visited.button {
  color: #49466c;
}

.buttonEditDel {
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: #49466c;
    height: 26px;
    width: 120px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing: border-box;
}


.buttonLong {
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: #49466c;
    height: 26px;
    width: 200px;
    min-width:170px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    padding: 2px;
    /*margin-bottom: 5px;*/
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing:border-box;
    margin-top: 2px;
    margin-bottom: 2px;
}


a:link.buttonLong {
  color:#49466c ;
}

a:visited.buttonLong {
  color: #49466c;
}

a:link.button250px{
  color:#49466c ;
  text-decoration: none;
}

a:hover.button250px {
    background-color: #dceaf6;
}

a:visited.button250px {
    color:#49466c ;
}

a:active.button250px {
    background-color: #dceaf6;
    box-shadow: -2px 2px 2px #ddd;
    transform: translateY(1px);
}

.buttonReports {
    background-color: white;
    color: #49466c;
    height: 28px;
    width: 100%;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    cursor: pointer;
    box-sizing:border-box;
    line-height:28px;

}
.buttonPayCodes {
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: green;
    height: 26px;
    width: 120px;
    max-width: 50%;
    text-align: center;
    text-decoration: none;
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing: border-box;
}

.buttonShort {
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: #49466c!important;
    min-height: 26px;
    line-height:20px;
    width: 55px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing: border-box;
}
.buttonShortSelected {
    background-color: #dceaf6;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: blue;
    min-height: 26px;
    line-height:20px;
    width: 50px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing: border-box;
}
.buttonTiny{
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: #49466c;
    height: 26px;
    line-height:20px;
    width: 35px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing: border-box;
}
.buttonTiny.selected{
    background-color: #dceaf6;
    font-weight:600;
}
.dlbButton{
    line-height:18px;
}

.margin5pxTopBot{
    margin-top: 2px;
    margin-bottom: 2px;
}

.buttonReports:nth-child(even) {
  background-color: #E6E8E9;
}

    .button:hover,.buttonLong:hover, .buttonReports:hover, .buttonPayCodes:hover, .buttonShort:hover, buttonShort2:hover, buttonShortSelected:hover,buttonEditDel:hover {
        background-color: #dceaf6;
        text-decoration: none;
    }

    .button:disabled:hover,.buttonLong:disabled:hover, .buttonReports:disabled:hover, .buttonPayCodes:disabled:hover, .buttonShort:disabled:hover, buttonShort2:disabled:hover, buttonShortSelected:disabled:hover,buttonEditDel:disabled:hover {
        background-color: #c7d6f6;
        text-decoration: none;
    }

    .button:active,.buttonLong:active, .buttonReports:active, .buttonPayCodes:active, .buttonShort:active, buttonShort2:active, buttonShortSelected:active, buttonEditDel:active {
        background-color: #dceaf6;
        box-shadow: 0 0px #8884b7;
        transform: translateY(1px);
    }

     .buttonReports:visited, .buttonPayCodes:visited, .buttonShort:visited, buttonShort2:visited, buttonShortSelected:visited, buttonEditDel:visited {
        color: #49466c;
    }

.button:disabled, .buttonShort:disabled, .buttonTiny:disabled, .buttonLong:disabled {
    background-color: #c7d6f6;
    border-left: 2px solid #959fd0;
    border-top: 2px solid #959fd0;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: Gray;
    cursor: default;
    }
/* End Button CSS */


/*C*/
.calendarHolder{
    position: absolute;
    left: 50%;
    bottom: -254px;
    transform: translateX(-50%);
    width: 300px;
    height: 250px;
    padding-top:10px;
    background-color: #fff;
    border: 2px solid #959fd0;
    z-index: 100;
    box-sizing:border-box;
    display:none;
}
.calendarClose{
    position:absolute;
    bottom:3px;
    right:3px;
}
.calendarOpen{
    display:block;
}
.calendarTitle a, .calendarTitle td{
    color:#fff!important;
    text-decoration:none!important;
}
.empCalDay{
    height:60px;
    font-weight:600;
}
.supCalDay{
    height:90px;
    font-weight:600;
}
.supCalDay > div, .supCalDay > a, .empCalDay > div, .empCalDay > a{
    font-weight:normal;
}
.supCalDay a:hover{
    cursor:pointer;
}
/*D*/
.dailyEditPairs{
    grid-template-columns:1fr 75px;
    align-items:center;
}
.dailyEditPairs .subTitle{
    margin-bottom:5px;
}
.dailyTimePairInput input{
    max-width:100px;
    margin:0 10px;
}
.dailyTimePairPanelTop{
    padding:10px 0;
}
.dailyPairEntry .adminPane3ColContainer{
    -ms-grid-columns: 1fr 1fr 80px;
    grid-template-columns:1fr 1fr 80px;
}

.destructiveCompWarning{
    color:#f00;
    display:none;
}
[ID*=chkDestructiveComp]:checked ~ .destructiveCompWarning{
    display:block;
}

.dgHeader {
    color: #FFFFFF;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    position: relative;
    top: expression(this.offsetParent.scrollTop);
    font-size: 100%;
    font-family: times;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
}

.dgHeader2 {
    /*color: #FFFFFF;
    background-color: #002364;
    font-size: 100%;
    font-family: times;
    font-weight: bold;
    text-decoration: none;
    text-align: left; */
    color: White;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    height: auto;
    width:auto;
    /* margin-right: 10px; */
}

.dgItem {
    font-size: 80%;
    border: black 1px solid;
}

.dgContainer {
    border: black 2px solid;
}

.diffRuleGrid{
    display:-ms-grid;
    display: grid;
    grid-template-columns:102px 102px 102px 102px 70px 1fr;
    align-items:center;
    box-sizing:border-box;
}
.diffRuleGrid > :not(.subTitle){
    padding:3px 5px;
}
.diffRuleGrid._4Col{
    grid-template-columns:102px 102px 102px 40px;
}
.diffRuleGrid._5Col{
    grid-template-columns:102px 102px 102px 150px 40px;
}


div.mainContent {
    /*this main content window not background of page referred to in the master page*/    
    background-color: #dbdef1;
    /*background-color: #e8e8f7; purplestyle*/
    padding-top: 5px;
    max-width: 1600px;
    margin:auto;
    position: relative;
    z-index: 1;
    height: calc(100% - 92px);
    box-sizing:border-box;
}

 div.mainContent.mainContent100 {
    height: calc(100% - 5px);
    overflow:auto;       
}

div.manageHeader {
    background-color: #dbdef1;
    padding-top: 5px;
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}


/*E*/
.exChargeTotal {
    color: #000000;
    font-size: 100%;
    font-family: times;
    text-decoration: none;
    font-weight: bold;
    text-align: right;
    padding-left: 3px;
}
.expenseDailyReceipts{
    text-align: center;
    grid-template-columns: repeat(auto-fill, 130px);
    display:-ms-grid;
    display: grid;
    justify-content: space-around;
    grid-gap:25px;
    margin-top:10px;
}
.expenseDailyReceipts .item {
    display:-ms-grid;
    display: grid;
    grid-template-rows:130px 1fr 30px;
}
.expenseDailyReceipts .itemImage{
    overflow:hidden;
}
.expenseDailyReceipts .itemImage a{
    display:block;
    height:100%;
    width:100%;
}
.expenseDailyReceipts .itemName{
    word-break:break-all;
}
.expenseDailyReceipts .itemNew{
    grid-column:1 / -1;
}
.exSubTitle2 {
    color: #49466c;
    background-color: #c7d6f6;
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    /* vertical-align: top; */
    height: auto;    
    /*border-left: 1px solid #575481;
    border-top: 2px solid #9695b8; 
    border-right: 1px solid #575481;*/
    border-bottom: 1px solid #959fd0;
    /* margin-right: 10px; */  
    grid-template-columns: 1fr 1fr; 
    display:-ms-grid;
    display: grid;
}

.exTestTableRow{
    clear: both;
    grid-template-columns: 1fr 1fr; 
    display:-ms-grid;
    display: grid;
}

.exTestTableRowalt{
    clear: both;
    grid-template-columns: 1fr 1fr; 
    display:-ms-grid;
    display: grid;
    background-color: #e6e8e9;
}

/*F*/
.fontBold{
    font-weight:bold;
}

.file-box {
    display:inline-block;
    height: 26px;
    font: 16pt;
    background: #e8e8f7;
    border-left: 1px solid #c7d6f6;
    border-top: 1px solid #c7d6f6;
    border-right: 1px solid #959fd0;
    border-bottom: 1px solid #959fd0;
    width: 200px;
    box-sizing: border-box;
    line-height: 26px;
    color: #49466c;
}
.file-box2 {
    display:inline;
    height: 26px;
    font: 16pt;
    background: #e8e8f7;
    border-left: 1px solid #c7d6f6;
    border-top: 1px solid #c7d6f6;
    border-right: 1px solid #959fd0;
    border-bottom: 1px solid #959fd0;
    width: 200px;
    box-sizing: border-box;
    line-height: 26px;
    color: #49466c;
    padding:3px;
    margin-top: 5px;
}

.formBlock{
    margin-block-end: 0;
}

input.small{
    max-width:100px;
    min-width:100px;
}
input.tiny{
    max-width: 40px;
    min-width: 40px;
}
.formEntry > *{
    width:100%;
}
.formEntry > span{
    display:block;
}

.FormLabel {
    font-weight: bold;
    font-size: 14px;
    line-height:28px;
    text-decoration: none;
    margin-top: 3px 0;
    text-align:right;     
    margin-left: 0px;         
}

.FormLabel2 {
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    margin-top: 3px 0;     
    margin-left: 0px;         
}

.FormLabelLeft {
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    text-align: left;
}

.FormLabelCenter {
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
}

.FormField {
    font-weight: none;
    font-size: 12px;
    text-decoration: none;
    text-align: left;
    line-height:28px;
   
}
/*G*/
.gvPaystubs {
overflow-y: auto;
overflow-x: hidden;
max-height: 750px;
}  

/*H*/
.helperLink {
    text-align:right;
    padding-top: 5px;
    }


/*
.helperLink img {
    display: block;
    margin-left: auto;
    }
    */

.helpButtonsAndMore { 
    text-align:right;

}
   
/*I*/
.imageButtonSimple{
    height:28px;
}
.imageButton{
    box-sizing:border-box;
    padding:2px;
    display:inline-block;
    margin:3px 0 0 0;
    width:28px;
    height:28px;
}
.imageButton:hover{
    background-color:#fff;
    border-radius:2px;
    box-shadow:-2px 2px 2px #ccc;
    z-index:10;
    cursor:pointer;
}
.imageButton.treeView{
    width:26px;
    height:26px;
    margin:0;
}
.imageButton.wide{
    width: 43px;
    background-color: #fff;
    padding: 2px;
    margin: 3px;
    border-radius: 3px;
    box-shadow: -2px 2px 2px #88b;
}
.imageButton.wide:hover{
    filter:brightness(1.2);
}
.ob_tree img{
    width:28px;
    height:28px;
}
.imgLogoPreview{
    width:100%;
    max-width:250px;
}
.inputFile:hover {
        background-color: #dceaf6;
    }

.inputFile:active {
        background-color: #dceaf6;
        box-shadow: 0 0px #8884b7;
        transform: translateY(1px);
    }

input[type=file] {
	width: 0.1px;
	height: 0.1px;
    opacity: 0;
	overflow: hidden;
	position: absolute;
    top:0;
    left:0;
	z-index: -1;
}

.inputFile {
    background-color: white;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #959fd0;
    border-bottom: 2px solid #959fd0;
    color: #49466c;
    width: 120px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    padding: 2px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    
}





/*J*/
/*K*/
/*L*/
.listBox {
     width: 200px !important; 
     height: 156px !important;
}

.listBoxVariable {
    min-height: 75px;
    max-height: 150px;
    width: 200px !important;
}
.loginMainForm{
    height:100%;
}
.loginBackground{
    position:absolute;
    width:100%;
    height:100%;
    background-image:url("pt_login_back_dark.jpg");
    background-repeat:repeat;
    top:0;
    left:0;
    z-index:-1;
}
.logincenter .subContent {
    padding:20px 50px;
    border-radius:4px;
    max-width:800px;
    min-width:300px;
    display:block;
    box-shadow: -3px 3px 15px #000;
}
.logincenter .bannerimage{
    width:300px;
    height:auto;
    cursor:pointer;
}
.loginCols{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
}
.loginCredentials{
    min-width:300px;
    max-width:300px;
}
.loginCredentials > *:not(.loginCompany){
    display:block;   
}
.loginCompany{
    display:flex;
    flex-wrap:wrap;
    justify-content:left;
}
.loginCompany .loginTextbox{
    width:90px;
}
.loginCompany #companyVal{
    line-height:30px;
    margin-left:10px;
}
.loginRemember{
     display:flex;
     margin-bottom:20px;
}

.loginRememberLabel{
    line-height:22px;
    margin-left:5px;
}

.loginTextbox {
   margin-bottom:5px;
}

.loginTextbox:hover {
     color: #000000;
     background-color: #dceaf6;
}
.loginNotice{
    max-width:300px;
    margin-top: 1em;
    margin-bottom:1em;
    background-color: #faf0dd;
    box-shadow: -2px 2px 2px #ddd;
    line-height: 22px;
}
.loginNotice h3{
    margin-block-start:0;
    margin-block-end:0;
}
.loginButton {
    width:200px;
    height:30px;
    text-transform:uppercase;
    font-weight:600;
}
.loginForgotButton{
    width:150px;
}
.appleBadge{
    height:42px;
    position:relative;
    top:-10px;
    margin: 10px;
}
.googleBadge{
    width:160px;
    margin:10px;
}
.sessionNotice{
    display:none;
}
.logHeading {
    color: #FFFFFF;
    /* background-color: #002364; */
    font-size: 80%;
    font-family: times;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
}

.logValue {
    color: #000000;
    font-size: 80%;
    font-family: times;
    text-decoration: none;
    text-align: left;
}

/*M*/
.manageCenter{
    margin:50px auto 0 auto;
    border-radius:4px;
    box-shadow: -3px 3px 15px #000;
}
.masterPageContainer{
    height:100%;
    overflow-y:hidden;
}


.masterPageContent{
    height: 100%;
    overflow: auto;
}

.masterPageContentWrapper{
    position: absolute;
    width: 100%;
    height: 100%;
}

.menu {
    color: #FFF;
    background-color: #9395a3;
    /* background-color: #8884b7; purplestyle*/
    font-size: 15px;
    font-family: gentiumbb;
    font-weight: bold;
    text-decoration: none;
    text-transform:uppercase;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    vertical-align: top;
    padding: 1px 12px;
    width: 100px;
    height: 42px;
    margin: 0 2px 0 0;
    display:flex;
    justify-content:center;
    align-items:center; 
    text-align:center;   
}

.menu:hover {
        color: #000000;
        background-color: #dceaf6;
    }
.menu_selected{
    line-height:40px;
}



.menuTitle {
    color: White;
    background-color: #354078;
    /* background-color: #575481; purplestyle*/
    font-size: 24px;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    min-height: 38px;
    line-height:38px;
    width:auto;
}

/* MESSAGE LIST ---------------------------------------------------------- */
form.messageList{
    height:100%;
}
.messageList .subContent{
    padding:0;
    border:none;
    height:100%;
    margin-bottom:0;
}
.messageList .subContent > select{
    height:calc(100% - 40px);
    outline:none;
    border:none;
    width:100%;
}.messageList .subContent > select:focus{
    outline:none;
    border:none;
}
.messageList .subContent > select > option{
    min-height: 28px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 14px;
}
.messageList .adminPane3ColContainer4{
    height: 37px;
    border-top: 1px solid #959fd0;
    background-color: #e9ecf7;
    align-items:center;
}
.messageList .adminPane3ColContainer4 > .col3{
    padding-right:7px;
}

/* MODAL ------------------------------------------------------------------ */
form.welcomeForm, #welcomePreviewMessage .welcomePreviewText {
    background-color:#fff;
    min-height:100%;
    box-sizing:border-box;
    padding:20px 30px;
}
#welcomeMessage .modal-footer, #welcomePreviewMessage .modal-footer{
    border-top: 1px solid #959fd0;
    background-color: #e9ecf7;
    height: 40px;
    padding: 2px 7px;
    box-sizing: border-box;
}
#welcomeMessage .modal-footer .buttonLong, #welcomePreviewMessage .modal-footer .buttonLong{
    font-size:16px;
    height:30px;
}
#welcomePreviewMessage .modal-body{
    overflow-y:scroll;
}
.modalCancel{/* unhide this with jquery if you need a cancel button on the bottom right corner of the modal, but can't embed it into the iframe's page. */
    display:none;
    height:50px;
    width:100%;
    background-color:#fff;
    border-top:1px solid #959fd0;
}
#modalCancel{ /* unhide this with jquery if you need a cancel button on the bottom right corner of the modal, but can't embed it into the iframe's page. */
    display:none;
    position:absolute;
    bottom:6px;
    right:6px;
}
.modalListContainer{ /* for a small-content modal, such as one that only contains a listbox and save/cancel options. Example usage in adminAttributes.aspx */
    height:347px;
    overflow:auto;
}
.modal-dialog{
    width:70%;
    max-width:1400px;
}
/*N*/
/*O*/
/*P*/

.paystub2Table2{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns:1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;    
}

.paystub2Table3{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns:1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;    
}

.paystub2Table4{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns:50% 25% 25%;
    grid-template-columns: 50% 25% 25%;
}

.paystub2Table5{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns:60% 40%;
    grid-template-columns: 60% 40%;    
}
.paystub2Table4:not(.subTitle) > div, .paystub2Table5:not(.subTitle) > div, .paystub2Table3:not(.subTitle) > div{
    padding:5px;
}
/*Q*/
/*R*/
.reportDesc{
    display:none;
}

.reportInformation{
    padding-left:10px;
}

.reportsLayout .viewReportResults{
    grid-column: 3;
    display: block;
}


/*S*/
.selected_menu {
    color: black;
    background-color: #e8e8f7;
    vertical-align: top;
}

.SelectedTabItem {
    background-color: #DFDCDF;
    vertical-align: top;
    border-top: black 2px solid;
    border-right: black 2px solid;
    border-left: black 2px solid;
    border-bottom: none;
    border-radius: 15px 15px 0px 0px;
}

.SelectedTabItemTS {
    vertical-align: top;
    background-color: #FFFFFF;
    border-top: black 2px solid;
    border-right: black 2px solid;
    border-left: black 2px solid;
    border-bottom: none;
    border-radius: 15px 15px 0px 0px;
}

.standardForm {
    font-size: 14px;
    width: 200px;
}

.standardForm2{
    font-size: 14px;
    display:-ms-grid;
    display: grid;

}

.standardFormShort {
    font-size: 14px;
    width: 20px;
}
.standardFormMed {
    font-size: 14px;
    width: 70px;
    /* width was 50px prior 12-17-2019 */
}

.standardFormMed:hover {
    cursor: pointer;
      color: #000000;
    background-color: #dceaf6;
}




.standardFormTextbox {
    /* margin-bottom: 5px;*/
    width: 175px;
}

.standardFormTextbox:hover{
     color: #000000;
     background-color: #dceaf6;
}

.standardFormMultilinebox {
    width: 500px;
    height: 100px;
}

.standardFormMultilinebox:hover{
     color: #000000;
     background-color: #dceaf6;
}

.standardFormTextboxAddress {
    margin-bottom: 5px;
    width: 250px;
}

.standardFormTextboxAddress:hover{
     color: #000000;
     background-color: #dceaf6;
}

.standardFormDropDown{
    width: 175px;
    margin-bottom:5px;
}


.standardFormDropDown:hover{
    cursor: pointer;
      color: #000000;
    background-color: #dceaf6;
}

.subContent {
    BORDER-RIGHT: #959fd0 1px solid;
    BORDER-LEFT: #959fd0 1px solid;
    BORDER-BOTTOM: #959fd0 1px solid;
    background-color: White;
    display: block;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;   
}

.subContent2 {
    BORDER-RIGHT: #959fd0 1px solid;
    BORDER-LEFT: #959fd0 1px solid;
    BORDER-BOTTOM: #959fd0 1px solid;
    background-color: White;
    display: block;
    padding: 0px;
    box-sizing: border-box;
    margin-bottom: 20px;
    width:500px;
    padding-bottom: 10px;
}

.subContent3 {
    BORDER-RIGHT: #959fd0 1px solid;
    BORDER-LEFT: #959fd0 1px solid;
    BORDER-BOTTOM: #959fd0 1px solid;
    background-color: White;
    display: block;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
   margin-left: 20%;
   margin-right: 20%;
    padding-bottom: 10px;
}
.subContent.popup{
    margin-bottom:0;
    padding:0;
}


/*T*/
.TabItem {
    vertical-align: top;
    BORDER: black 2px solid;
    border-radius: 15px 15px 0px 0px;
}

.TabItemTS {
    BORDER: black 2px solid;
    vertical-align: top;
    border-radius: 15px 15px 0px 0px;
}

/*Tree control modifications*/
.chargeTree div.ob_tree{
    overflow-y: scroll!important;
    max-height: 650px;
    border-bottom: 1px solid #959fd0;
}
div.ob_tree table{
    display:table;
    border-spacing: 0px;
    padding: 0;
    margin: 0;
    width: 100%
}
div.ob_tree table tr{
    padding: 0;
    margin: 0;
    height: 28px;
    border:none;
}
div.ob_tree table td{
    padding: 0;
    margin: 0;
    height: 28px;
    border: none;
}
div.ob_tree table td div{
    padding: 0;
    margin: 0;
    border: none;
    
}
div.ob_tree table tbody{
    line-height:0;
}
div.ob_tree .tree_emp tbody{
    line-height: 16px;
}

div.ob_tree .ob_d4{
    height:28px;
    width:30px;
}
/*End Trying to squish tree control*/

.ob_tree table.tree_group {
    color: #000;
    background-color: #c7d6f6;
    font-family: sans-serif;
    text-decoration: none;
    padding-left: 5px;
    font-weight: bold;
    font-size: 120%;
    height: 27px;
}

div.ob_tree table.tree_emp {
    color: #000000;
    background-color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-size: 120%;
    height: 28px;
    padding-left:5px;
}

table.tree_emp tr{
    height: 30px;
    border: solid 1px black;
}

table.tree_emp td{
    width: 30%;
    padding:0 5px;
}

.ob_tree .ob_t4{
    width:30px;
}
.tree_emp .imageButton{
    margin:0;
}

.title {
    color: White;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    font-size: 24px;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    min-height: 38px;
    line-height:38px;
    width:auto;
}

.title2 {
    color: White;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    min-height: 30px;
    line-height:30px;
    width:auto;
    box-sizing:border-box;
}
.title3 {
    color: White;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    font-size: 18pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    vertical-align: top;
    height: 24px;
    width:auto;
}

.titleAdmin {
    color: red;
    background-color: yellow;
    /*background-color: #575481; purplestyle*/
    font-size: 16pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: left;
    vertical-align: top;
    height: 24px;
    width:auto;
    text-align:center;
    /*BORDER-top: #959fd0 1px solid;
    BORDER-RIGHT: #959fd0 1px solid;
    BORDER-LEFT: #959fd0 1px solid;*/
}

.titleEmpList {
    color: White;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    font-size: 12pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    min-height:28px;
    width:100%;
    box-sizing:border-box;
    word-break: break-all;
    line-height:28px;
}

.titleDemo {
    color: White;
    background-color: #354078;
    /*background-color: #575481; purplestyle*/
    font-size: 24px;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    min-height: 38px;
    line-height: 38px;
    width: auto;
    margin-left: 20%;
    margin-right: 20%;
}
.subTitle, .subTitle2 {
    color: #49466c;
    background-color: #c7d6f6;
    /* background-color: #e8e8f7; purplestyle*/
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    min-height: 28px;    
    border-left: 1px solid #959fd0;
    border-right: 1px solid #959fd0;
    border-bottom: 1px solid #959fd0;
    padding: 3px;
    box-sizing:border-box;      
}
tr.subTitle{
    height:28px;
}
.subTitle3 {
    color: #49466c;
    background-color: #c7d6f6;
    /* background-color: #e8e8f7; purplestyle*/
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: auto;    
    border-bottom: 1px solid #959fd0;
    padding: 0px !important;
    box-sizing:border-box;      
}
.subTitle a{
    color:#49466c;
    padding:5px;
}

.textAlignRight{
    text-align:right;
}

.title_large {
    color: #FFFFFF;
    background-color: #002364;
    font-size: 100%;
    font-family: times;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    BORDER: black 2px solid;
    border-radius: 15px 15px 0px 0px;
}

.title_Extend {
    color: #FFFFFF;
    background-color: #002364;
    font-size: 100%;
    font-family: times;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-left: black 2px solid;
    border-right: black 2px solid;
    border-bottom: black 2px solid;
}

.title_side {
    color: #FFFFFF;
    background-color: #002364;
    BORDER-BOTTOM: black 2px solid;
}

/* TS Calculator styling */
.tsCalcHolder{
    padding:10px;
    background-color:#fff;
    border:1px solid #959fd0;
    width:200px;
    margin:auto;
    text-align:center;
}
.tsCalc{
    display:-ms-grid;
    display:grid;
    -ms-grid-columns:2fr 1fr 2fr;
    grid-template-columns:2fr 1fr 2fr;
    margin-top:7px;
}
.tsCalc1{
    -ms-grid-column:1;
    grid-column:1;
    text-align:center;
    max-width:70px;
}
.tsCalc2{
    -ms-grid-column:2;
    grid-column:2;
    text-align:center;
    font-weight:600;
}
.tsCalc3{
    -ms-grid-column:3;
    grid-column:3;
    text-align:center;
    max-width:70px;
}



/* TIMESHEET STYLES START HERE. If any item is out of alphabetical order, it's because I need it that way for Specificity overriding. */
.editme{
    position:absolute;
    left:0;
    bottom:0;
}
.tsDay{
    position:relative;
}
.tsDay input:not([readonly="readonly"]) ~ .editme{
    border-left:6px solid #b7c6e6;
    border-bottom:6px solid #b7c6e6;
    border-top:6px solid transparent;
    border-right:6px solid transparent;
}
.tsSignTimesheetbuttonContainer{ 
    margin: 10px 0 0 0;
    display: flex;
    justify-content: center;
}

.tsSignTimesheetbutton{
    color: #FFF;
    height: 34px;
    width: 200px;
    max-width:100%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: sans-serif;
    font-size:16px;
    font-weight:600;
    line-height:30px;
    margin-bottom: 5px;
    cursor: pointer;
    box-shadow: -2px 2px 2px #ddd;
    box-sizing:border-box;
}
.tsSignTimesheetbutton-Sign {
    background-color: #12a21f;
    border-left: 2px solid #42d24f;
    border-top: 2px solid #42d24f;
    border-right: 2px solid #018201;
    border-bottom: 2px solid #018201;
}

.tsSignTimesheetbutton-UnSign {
    background-color: #c7d6f6;
    border-left: 2px solid #c7d6f6;
    border-top: 2px solid #c7d6f6;
    border-right: 2px solid #c7d6f6;
    border-bottom: 2px solid #c7d6f6;
}

.tsSignTimesheetbutton-Approve {
    background-color: #12a21f;
    border-left: 2px solid #42d24f;
    border-top: 2px solid #42d24f;
    border-right: 2px solid #018201;
    border-bottom: 2px solid #018201;
}

.tsSignTimesheetbutton-Locked {
    background-color: #12a21f;
    border-left: 2px solid #42d24f;
    border-top: 2px solid #42d24f;
    border-right: 2px solid #018201;
    border-bottom: 2px solid #018201;
}

.tsSignTimesheetbutton-Unlock {
    background-color: #12a21f;
    border-left: 2px solid #42d24f;
    border-top: 2px solid #42d24f;
    border-right: 2px solid #018201;
    border-bottom: 2px solid #018201;
}

    .tsSignTimesheetbutton:hover{
        filter:brightness(1.05);
        text-decoration: none;
    }

    .tsSignTimesheetbutton:active{
        filter:brightness(1.05);
        box-shadow: 0 0px #8884b7;
        transform: translateY(1px);
    }

    .tsSignTimesheetbutton:visited{
        color: #49466c;
    }
    .tsSignTimesheetbutton:disabled{
        background-color: #c7d6f6;
        border-left: 2px solid #959fd0;
        border-top: 2px solid #959fd0;
        border-right: 2px solid #959fd0;
        border-bottom: 2px solid #959fd0;
        color: Gray;
        cursor:default;
    }

    .tableImport{
        display:-ms-grid;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    margin-left: 20%;
    margin-right: 20%;
        
}

.tsEmployeeInfo{
    display:-ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap:5px 0;
    width:700px;
    margin:auto;
}
.tsEmployeeInfo .FormLabel{
    margin: 0px 5px 0 0;
    line-height:18px;
}
.tsEmployeeInfo .FormField{
    margin: 0px;
    font-size: 14px;
    align-content: center;
    justify-content: center;
    line-height:18px;
}

.tsAdditionalInfo {
    display: flex;
    /* grid-template-columns: 1fr 40% 1fr; */
    /* flex-grow: 1; */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.tsAdditionalInfo .width25percent{
    margin:10px;
}
.tsDateNavigation{
    /*grid-column: 2;*/
    width: calc(50% - 42px);
    min-width: 350px;
}
.tsDateNavigation .subContent{
    margin-bottom:0;
}

.tsTotalsContainers{
    display: flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

.tsTotalsTable{
    min-width: 350px;
    width:40%;
    margin:5px;
}


.tsSubTitle {
    color: #49466c;
    /*background-color: #e8e8f7; */
    background-color: #c7d6f6;
    font-size: 14pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    /* vertical-align: top; */
    height: auto;    
    /*border-left: 1px solid #959fd0;
    border-top: 2px solid #9695b8; 
    border-right: 1px solid #959fd0;*/
    border-bottom: 1px solid #959fd0;
    /* margin-right: 10px; */  
    grid-template-columns: minmax(100px, 1fr) repeat(auto-fit, minmax(50px,1fr));
    display:-ms-grid;
    display: grid;
    min-height:28px;
    line-height:28px;
}


.tsSubContent {
    BORDER-RIGHT: #959fd0 1px solid;
    BORDER-LEFT: #959fd0 1px solid;
    BORDER-BOTTOM: #959fd0 1px solid;
    display: block;
    /*padding: 5px;*/
    box-sizing: border-box;
    /* margin-right: 10px; */
    /* margin-bottom: 20px; */
    
}


.tsBottomGrid > br{
    display: none;
}

.tsLBUC1{
    grid-column: 1;
}

.tsLBUC2{
    grid-column: 2;
    text-align:center;
}
.tsLBUC3{
    grid-column: 3;
    text-align:center;
}
.tsLBUC4{
    grid-column: 4;
    text-align:center;
}


.tsRowExtraButtons1{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
}

.tsSheetContainer .subContent{
    overflow:auto;
    background-color:transparent;
    display:-ms-grid;
    display:grid;
    grid-template-columns:1fr 40px repeat(8, minmax(35px,100px)) minmax(50px, 100px) 65px;
    column-gap:2px;
    text-align:center;
    padding:0;
    position:relative;
    border:none;
    border-bottom:2px solid #959fd0;
}
.tsSheetContainer .subContent.ts7day{
    grid-template-columns:1fr 40px repeat(7, minmax(40px,100px)) minmax(50px, 100px) 65px;
}
.tsSheetContainer .subContent.ts7day .tsColOptional{
    display:none;
}
.tsColAction{
    grid-column:-2 / -1;
    padding:0 3px;
}
.tsColAuth, .tsRowHeaderItem.tsColAuth{
    grid-column:2;
    font-size:16px;
}

.tsColCharge{
    grid-column:1;
    display:-ms-grid;
    display:grid;
    /*grid-template-columns: minmax(100px,1fr) repeat(2, minmax(70px, min-content));*/
    column-gap:5px;
    word-break:break-all;
    padding-left:8px;
    font-size:90%;
    box-sizing:border-box;
    grid-template-columns: minmax(100px, 1fr) max-content max-content;
}
.tsColCharge.tsRowCume{
    display:block;
}
.tsColExtra2{
    grid-column:2;
    width:70px;
    justify-self:right;
}
.tsColExtra3{
    grid-column:3;
    width:70px;
    justify-self:right;
}
.tsColOptional:not(.tsRowHeaderItem){
    background-color:#FFF;
}
.tsColOptional .tsLabel, .tsColTotal{
    display:flex;
    align-items:center;
    justify-content:center;
}
.tsColTotal{
    grid-column:-3;
}

.tsChargeTotal {
    font-weight: bold;
    text-align: center;
}

.tsEntry {
    color: #000000;
    background-color: #FFFFFF;
    font-size: 100%;
    font-family: times;
    text-decoration: none;
    text-align: center;
}
.tsLabel { /* main timesheet*/
    color: #000;
    font-size: 100%;
    text-decoration: none;
    background-color:#FFF;
    min-height:30px;
    align-items:center;
    height:100%;
    box-sizing:border-box;
}
.tsExpenseSheet .tsRowTotal.tsColTotal{
    grid-column:-5 / -2;
}
.tsExpenseSheet .ts7day .tsRowTotal.tsColTotal{
    grid-column: -4 / -2;
}

.tsLabel2 { /* lower totals tables */
    padding: 3px;
    color: #000;
    font-size: 100%;
    text-decoration: none;
    min-height:25px;
    align-items:center;
    height:100%;
    box-sizing:border-box;
    background-color:#fff;
}
.tsLabel3 { /* some admin pages?? */
    padding: 3px;
    color: #000;
    font-size: 100%;
    text-decoration: none;
    /*background-color:#FFF;*/
    min-height:25px;
    align-items:center;
    height:100%;
    box-sizing:border-box;
}
.tsLabel input:not(.button):not([type="image"]){
    width:100%;
    border:none;
    height:100%;
    display:block;
    text-align:center;
    box-sizing:border-box;
}
.tsLabel select{
    width:100%;
}
.tsCodeTotalsRow, .tsCodeTotalsRowalt{
    clear: both;
    grid-template-columns: minmax(100px, 1fr) repeat(auto-fit, minmax(50px,1fr));
    display:-ms-grid;
    display: grid;
    grid-gap: 0 2px;
}
.tsCodeTotalsRow .tsLabel2{
    background-color:#fff;
    padding:7px;
}
.tsCodeTotalsRowalt .tsLabel2{
    background-color:#e6e8e9;
    padding:7px;
}
.tsRowAddCharge{
    grid-column:1 / -1;
    display:flex;
    flex-wrap:wrap;
    border-bottom:2px solid #959fd0;
    border-top:2px solid #e8e8f7;
    padding:10px;
    background-color:#FFFFFF;
}
.tsRowAddCharge input, .tsRowAddCharge select{
    height:30px;
    margin:0 3px;
    box-sizing:border-box;
}
.tsRowAddCharge > div{
    margin:3px 0;
}
.tsRowCume{
    border-top:2px solid #e8e8f7;
}
.tsRowHeader {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    z-index: -1;
    /*background-color: #575481;*/
    background-color: #354078;
}
.tsRowHeaderItem{
    z-index:1;
    color: #FFFFFF;
    font-size: 14pt;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height:40px;
    line-height:40px;
}
/* needs to be below tsRowHeaderItem */
.tsColCharge{
    text-align:left;
}
.tsRowHeaderDate{
     line-height:20px;
 }
.tsRowHeaderDate:hover{
    background-color:#455088;
}
.tsRowHeaderDate .ts{
    display:block;
}
.tsRowHeaderDate a.ts:hover{
    text-decoration:none;
}
/* TIMESHEET TABS ----------------------------- */
.tsRowTotal.tsLabel, .tsRowCume.tsLabel, .tsColTotal.tsLabel{
    line-height:30px;
    font-weight:600;
    height:100%;
}
.tsTabContainer{
    display:flex; /* Like M A G I C */
}
.tsTabContainer .tsTab .menu, .tsTabContainer .tsTab_Selected .menu_selected{
    font-family:sans-serif;
    background-color:transparent;
    color:#fff;
    width:100%;
    height:100%;
    display:block; /* display, width, and height settings force the <a> area to match the size of the tab */
    padding:0;
    line-height:40px;
}
.tsTab {
    background-color: #959fd0;
    color:#FFF;
}
.tsTab_Selected {
    color: #FFFFFF;
    /*background-color: #575481;*/
    background-color: #354078;
}
.tsTab, .tsTab_Selected {
    width:120px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
    height:100%;
    margin:0 2px;
    border-radius:5px 5px 0 0;
    transition:filter 100ms;
}
.tsTab:hover, .tsTab_Selected:hover{
    filter:brightness(1.1);
}
/* 
.tsTotals {
    color: #000000;
    background-color: #FFFFFF;
    font-size: 100%;
    font-family: times;
    text-decoration: none;
    font-weight: bold;
    text-align: left;
    padding-left: 3px;
    border-top: black 2px solid; 
}
.tsTotalTotal {
    color: #000000;
    background-color: #FFFFFF;
    font-size: 100%;
    font-family: times;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding-left: 3px;
    border-top: black 2px solid;
}*/

/*U*/
/*V*/

.viewW2s{
    width: 350px;
}

.viewAvailableReports{
    width: 350px;
}

.viewReportsResults{
    width: 350px;
}
/*W*/

/*X*/
/*Y*/
/*Z*/


/*Creating table css testing */
.respTable {
    width: 100%;
    display: table;
}

.respTableCaption {
    display: table-caption;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

.respTableHeader{
    display: table-header-group;
    background-color: gray;
    font-weight: bold;
    font-size: 25px;
}

.tableHeaderCell{
    display: table-cell;
    padding: 10px;
    text-align: Center;
    border-bottom: 1px solid black;
}

.respTableBody{
    display: table-row-group;
}

.respTableBody .respTableRow:nth-child(odd) {
    background: #eee
}

.respTableRow{
    display: table-row;
}

.respTableBodyCell{
    display: table-cell;
    text-align: center;
}

.respTableFooter{
    display: table-footer-group;
    background-color: gray;
    font-weight: bold;
    font-size: 25px;
    color: rgba(255, 255, 255, 0.45);
}

.tableFooterCell {
    display: table-cell;
    padding: 10px;
    text-align: justify;
    border-bottom: 1px solid black;
}

.smallTable {
    width: 50%;
    display: table;
}

/*
    Below is the sidebar for employees2 page 
*/
.sidebarMenu {
  height: 100%;
  width: 0;
  position:sticky;
  z-index: 1;
  top: 0;
  left: 0;
  /*background-color: gray;*/
  overflow-x:hidden;
  transition: 0.5s;
  padding-top: 60px;
  float:left;
}

.sidebarMenu a {
  padding: 2px 4px 2px 4px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebarMenu a:hover {
  color: white;
  background-color: green;
}

 .sidebarMenu .closeButton:hover {color: white;
  background-color: red; }

.sidebarMenu .closeButton {
  position: absolute;
  top: 0;
  right: 0px;
  font-size: 36px;
  margin-left: 50px;
  color: silver;
  background-color: black;
  
}

.openButton {
  font-size: 20px;
  cursor: pointer;
  background-color: black;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openButton:hover {
  background-color: #444;
}

#mainEmployeesGridView {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidebarMenu {padding-top: 15px;}
  .sidebarMenu a {font-size: 18px;}
}

/*
    Below is for employees2 page employees section when you hover over each line  
*/

.adminPane2ColContainerEmpList td {
    cursor: pointer;
}

.hover_row {
    background-color: #A1DCF2;
}

/* below is the css for the custom selector on the reports page*/

.accordion {
  color: #49466c;
  background-color: #c7d6f6;
  cursor: pointer;
  padding: 3px;
  width: 100%;
  min-height:32px;
  font-size:11pt;
  font-weight:bold;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #dceaf6;
}
.reportPanel {
  background-color: white;
  overflow: hidden;
  transition: all 200ms;
}


.accordion:after {
  content: '\25BC'; /* Unicode character for "up triangle" sign (▼) */
  font-size: 13px;
  color: #49466c;
  float: right;
  margin-left: 5px;
  
}

.active:after {
  content: "\25B3"; /* Unicode character for "down triangle" sign (△) */
}


/* LAYOUT UTILITY CLASSES --------------------------------------------------------------------------------- */
.flex2Col{ /* Put these rules early so other utility classes can override it */
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
}
.flex2Col.formHolder{
    max-width:628px;
    margin:auto;
}
.flex2Col > *:not(.flex2Col) {
        width: calc(50% - 6px);
    }
.flex2Col > .formEntry{ 
    min-width:170px;
}
.flex3Col{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
}
.flex3Col > *{
    width:calc(33% - 6px);
}
.flex5Col{
    display:flex;
    width:100%;
    flex-wrap:wrap;
}
.flex5Col > *{
    width:20%;
    min-width:20%;
}
.flex5Col > :nth-child(10n + 1):not(.subTitle), .flex5Col > :nth-child(10n + 2):not(.subTitle), .flex5Col > :nth-child(10n + 3):not(.subTitle), .flex5Col > :nth-child(10n + 4):not(.subTitle), .flex5Col > :nth-child(10n + 5):not(.subTitle){
    background-color:#e6e8e9;
}
.flex5Col > select{
    background-color:#fff!important;
}
.formHolder.small{
    width:310px;
}
.centered{  
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
}
.disabledNotice{
    z-index:-1;
    position:absolute;
    width:100%;
    color:#88a;
    padding:20px;
}
.gridHoverRows tr:hover:not(.title2):not(.subTitle){
    background-color: #ecffff!important;
    cursor:pointer;
}
.notice{
    width:400px;
    margin:auto;
    position:relative;
    height:auto;
    overflow:hidden;
    transition:height 200ms;
}
.notice .subContent{
    padding:30px;
    font-size:18px;
    border-top: 1px solid #959fd0;
    background-color: #faf0dd;
    box-shadow: -3px 3px 3px #ccc;
}
.noticeClose{
    position:absolute;
    top:5px;
    right:5px;
    font-weight:600;
    color:#6a6044;
    cursor:pointer;
}
.errorHolder{
    position:relative;
}
.errorHolder.besideInput{
    line-height:28px;
}
.errorLabel{ /* required when multiple validators sit next to a .formLabel */
    position:relative;
    display:inline-block;
}
.errorHolder > *[style*='hidden'], .errorLabel > *[style*='hidden']{
    display:none;
    color:#f00;
}
.errorHolder > *:not([style*='hidden']), .errorLabel > *:not([style*='hidden']){
    display:block;
    color:#F00;
}
.errorHolder > .jsError{
    display:none;
}
.pickBoxes{
    display:flex;
    width:100%;
    flex-wrap:wrap;
    min-width:400px;
}

#file-name{
    height:auto;
    min-height:26px;
    word-break:break-all;
    margin-top:0;
    line-height:normal;
}

.alignedItemsCombo{
    display:flex;
    justify-content:center;
    align-content: center;
    flex-wrap:wrap;
}
.alignedItemsCombo2{
    display:flex;
    justify-content:center;
    align-content: center;
    align-items:center;
    flex-wrap:wrap;
}
.alignedItemsCombo div{
    width:100%;
}
.alignedRight{
    text-align:right;
}
.alignedLeft{
    text-align:left;
}
.alignedCenter{
    text-align: center;
}
.justifyContentHorizontal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.justifySpaceAround{
    justify-content:space-around;
}
.justifySpaceBetween{
    justify-content:space-between;
}
.justifyStart{
    justify-content:flex-start;
}
.justifyEnd{
    justify-content:flex-end;
}
.alignItemsStart{
    align-items:flex-start;
}
.alignItemsEnd{
    align-items:flex-end;
}
.alignedItemsCenter{
    align-items: center;
}
.alignedContentCenter{
    align-content:center;
}
.alignSelfCenter{
    align-self:center;
}
.alignedItemsHorizontal{ /* um... what? */
    margin-top:auto;
    margin-bottom:auto;
}
.backgroundAlternating, .alternatebackgroundcolor{
    background-color:#e6e8e9;
}
.rowAlternate{
    filter:brightness(0.9);
}
.backgroundBlue{
    background-color:#c7d6f6;
}
.biggerLabel{
    font-size:16px;
}
.border{
    border:1px solid black;
}
.borderBottom{
    border-bottom:1px solid #959fd0;
}
.borderLeft{
    border-left:1px solid #959fd0;
}
.borderNone{
    border:none!important;
}
.borderRight{
    border-right:1px solid #959fd0;
}
.borderSidesNone{
    border-left:none!important;
    border-right:none!important;
}
.borderTopNone {
    border-top: none;
}
.borderTop {
    border-top: 1px solid #959fd0;
}
.borderBottomNone {
    border-bottom: none;
}
.borderTsp{ /* for use on asp tables */
    border-color:transparent!important;
}
.breakAll{
    word-break:break-all;
}
.breakNormal{
    word-break:normal;
}
.closed{
    overflow:hidden;
    height:0;
    padding:0;
    transition:all 200ms;
}
.closed *{
    height:0;
}
.displayIB{
    display:inline-block;
}
.flex, .displayFlex, .display{
    display:flex;
}
.flexGrow{
    flex-grow:1;
}
.flexWrap{
    flex-wrap:wrap;
}
.font12pt{
    font-size: 12pt;
}
.font14pt{
    font-size: 14pt;
}
.font16pt{
    font-size: 16pt;
}
.fontBold{
    font-weight:600;
}
.formEntry{
    max-width:300px;
    margin:4px 7px;
}
.mainContent .formEntry.small, .formEntry > .small{
    max-width:100px;
    min-width:100px;
}
.gap5px {
    width:5px;
}
.gap10px {
    width:10px;
}
.gapNone{
    grid-gap:0;
}
.grid2Col {
    display:-ms-grid;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(450px, calc(50% - 6px)));
    grid-gap:12px;
}
.grid2Col.small{
    grid-template-columns:1fr 1fr;
    justify-content:space-around;
}
.grid2Col > .col1, .grid2Col > .col2 {
    grid-column:auto;
}
.grid2Col.matching .subContent{ /* for 2-column layouts that have a sensitive item order */
    height:calc(100% - 50px);
}

.gridFullWidth{
    grid-column: 1 / -1;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* IE 10+ */
   .grid2Col{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        flex-wrap:wrap;
    }
    .grid2Col > .col1, .grid2Col > .col2{
        width:calc(50% - 6px);
        min-width:450px;
    }
}
.headerInfo{
        display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 750px;
    margin: auto;
}
.heightAuto{
    height:auto;
}
.height100px{
    height:100px;
}
.height150px{
    height:150px;
}
.height200px{
    height:200px;
}
.height300px{
    height:300px;
}
.height350px{
    height:350px;
}
.height100 {
    height:100%;
}
.highlighted{
    background-color:#dceaf6;
    outline:2px solid #959fd0;
}
.imgLoading{
    width:80px;
    height:80px;
    margin-right:10px;
}
.infoRight{
    order:2;
    min-width:450px;
    max-width:500px;
}
.infoRight.small{
    min-width:350px;
}
.inlineIcon{
    margin-bottom:-2px;
    height:18px;
}
.inputStyle{
    height: 30px;
    font-size: 16px;
    border: 1px solid #959fd0;
    color: #39365c;
}
.margin0Auto{
    margin:0 auto;
}
.marginAuto{
    margin-left:auto;
    margin-right:auto;
}
.margin5Left{
    margin-left: 5px;
}
.margin5Right{
    margin-right: 5px;
}
.margin5V{
    margin-top: 5px;
    margin-bottom:5px;
}
.margin10B{
    margin-bottom:10px;
}
.margin10V{
    margin-top:10px;
    margin-bottom:10px;
}
.margin20Left{
    margin-left:20%;
}
.margin20Right{
    margin-right:20%;
}
.marginBotNone {
    margin-bottom: 0px;
}
.marginToLeft{
    margin-right:auto;
    margin-left:0;
}
.marginToRight{
    margin-left:auto;
    margin-right:0;
}
.maxHeight250px{
    max-height:250px;
}
.maxHeight500px{
    max-height:500px;
}
.maxWidth50px{
    max-width:50px;
}
.maxWidth100px{
    max-width:100px;
}
.maxWidth200px{
    max-width:200px;
}
.maxWidth250px{
    max-width:250px;
}
.maxWidth300px{
    max-width:300px;
}
.maxWidth400px{
    max-width:400px;
}
.maxWidth500px{
    max-width:500px;
}
.maxWidth650px{
    max-width:650px;
}
.maxWidth800px{
    max-width:800px;
}
.maxWidth1000px{
    max-width:1000px;
}
.minHeight100{
    min-height:100%;
}
.minHeight200px{
    min-height:200px;
}
.minHeight300px{
    min-height:300px;
}
.minHeight400px{
    min-height:400px;
}
.minWidth100px{
    min-width:100px;
}
.minWidth250px{
    min-width:250px;
}
.minWidth350px{
    min-width:350px;
}
.minWidth400px{
    min-width:400px;
}
.minWidth500px{
    min-width:500px;
}
.minWidth550px{
    min-width:550px;
}
.minWidth650px{
    min-width:650px;
}
.nameColumn{
    width:40%;
    text-align:left;
    font-weight:600;
}
.numberColumn{
    flex-grow:1;
    text-align:right;
}
.numberColumn2{
    width:30%;
    text-align:right;
}
.numberColumn4{
    width:15%;
    text-align:right;
}
.nameColumn > *, .numberColumn > *, .numberColumn2 > *, .numberColumn4 > *{
    width:100%;
}
.overflowX{
    overflow-x:auto;
}
.overflowY{
    overflow-y:auto;
    overflow-x:hidden;
}
.overflowHidden{
    overflow:hidden;
}
.padding5px{
    padding:5px;
}
.padding15px{
    padding:15px;
}
.paddingBottomBig{
    margin-bottom:60px;
}
.paddingLeft{
    padding-left: 5px;
}
.paddingRight{
    padding-right: 5px;
}
.paddingNone{
    padding:0px!important;
}
.pointer:hover{
    cursor:pointer;
}
.positionRelative{
    position:relative;
}
.positionRule{
    position: absolute;
    top: 0;
    left: 0;
}
.positionRule2{
    position:absolute;
    left:0;
}
.spaceHolder {
    padding-left:10px;    
}
.spacerBorder{
    width: 60%;
    height: 2px;
    background-color: #959fd0;
    margin: 10px 20%;
}
.spacerRowNoHeight{
    max-height:0;
    min-width:100%!important;
}
.spacerRow{
    min-height:10px;
    min-width:100%!important;
}
.spacerLarge{
     min-height:24px;
     min-width:100%!important;
}
.regLabel{
    font-size:16px;
    line-height:28px;
}
.strongLabel{
    font-size:18px;
    line-height:28px;
    font-weight:600;
}
.subContentWide{
    border-left:none;
    border-right:none;
}
.subContentLeft{
    border-left:none;
}
.subContentRight{
    border-right:none;
}
.textBlue{
    color:blue;
}
.vAlignTop{
    vertical-align:top;
}
.visibilityHidden{
    visibility:hidden;
}
.widthAuto{
    width:auto!important;
}
.width100percent{
    width: 100%;
}
.width30percent{
    width:30%;
}
.width25percent{
    width:25%;
 }
.width40percent{
    width:40%;
}
.width50percent{
    width:50%;
}
.width80percent{
    width:80%;
}
.width50px{
    width:50px;
}
.width70px{
    width:70px;
}
.width100px{
    width:100px;
}
.width150px{
    width:150px;
}
.width200px{
    width:200px;
}
.width300px{
    width:300px;
}
.width400px{
    width:400px;
}
.width450px{
    width:450px;
}
.width500px{
    width:500px;
}
.width600px{
    width:600px;
}
.width720px{
    min-width:722px;
    max-width:1900px;
}
.displayNone{
    display:none;
}
.IEOnly{
    display:none;
}
/* IE COMPATIBILITY ---------------------------------------------------------------- */
/* IE COMPATIBILITY ---------------------------------------------------------------- */
/* IE COMPATIBILITY ---------------------------------------------------------------- */
/* IE COMPATIBILITY ---------------------------------------------------------------- */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ HERE  BE  DRAGONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    input{
        padding-left:5px;
    }
    th{
        font-weight:600;
    }
    .logincenter{
        position:relative;
        top:30px;
    }
    .IEOnly{
        display:block;
    }
    .width50percent, .IEWidth50percent{
        width:49%; /* NUMBERS ARE A SOCIAL CONSTRUCT */
    }
    .IEHeight40px{ /* HELP, MY NAME IS INTERNET EXPLORER AND I REQUIRE THE GUIDANCE OF AN ADULT TO FIGURE OUT KNOW HOW TO VERTICALLY SIZE FLEX/GRID ELEMENTS SOMETIMES */
        height:43px;
    }
    .IENoGrow .flexGrow{
        flex-grow:0;
    }
    .tsLabel, .tsRowTotal.tsLabel, .tsRowCume.tsLabel, .tsColTotal.tsLabel{
        height:auto;
    }
    .tsPopUp .tsLabel input:not(.button):not([type='image']){
        height:auto;
        min-height:30px;
    }
    .adminPane{
        display:flex;
    }
    .adminPane > .adminMenu{
        min-width:200px;
        max-width:200px;
    }
    .adminPane > div:nth-child(2){
        flex-grow:1;
        max-width:calc(100% - 200px);
    }
    .adminSplitView{
        display:flex;
        align-items:flex-start;
    }
    .adminSplitView > :first-child{
        width:30%;
        min-width:300px;
    }
    .adminSplitView > :nth-child(2){
        width:70%;
    }
    .adminSplitView.small > :first-child{
        width:30%;
        min-width:200px;
    }
    .adminSplitView.small > :nth-child(2){
        width:70%;
    }
    .adminSplitView.equal > :first-child, .adminSplitView.equal > :nth-child(2){
        width:50%;

    }
    .tsSheetContainer{
        overflow-x:auto;
    }
    .tsSheetContainer .subContent{
        display:flex;
        flex-wrap:wrap;
        overflow:auto;
        min-width:700px;
    }
    .tsColCharge{
        width:39%;
        min-width:250px;
        display:flex;
        flex-grow:1;
    }
    .tsColCharge > *{
        width:50%;
    }
    .tsColCharge > div{
        width:24%;
    }
    .tsColAuth,.tsRowHeaderDate:not(.tsColOptionalInner),.tsDay, .tsColOptional{
        width:5%;
        min-width:40px;
    }
    .tsColTotal{
        width:5%;
        min-width:45px;
    }
    .tsColAction{
        width:10%;
        min-width:50px;
    }
    .tsRowAddCharge{
        width:100%;
    }
    .tsRowTotal{
        border-top:2px solid #959fd0;
    }
    .tsSheetContainer .tsLabel{
        border-bottom:2px solid #e6e8e9;
    }
    .tsTotalsTable{
        width:450px;
        min-width:450px;
        max-width:450px;
    }
    .tsSubTitle, .tsCodeTotalsRow, .tsCodeTotalsRowalt, .exSubTitle2{
        display:flex;
        width:100%;
        align-items:flex-start;
    }
    .tsSubTitle > div:not(:first-child),.exSubTitle > div:not(:first-child), .tsCodeTotalsRow > div:not(:first-child), .tsCodeTotalsRowalt > div:not(:first-child){
        width:100px;
    }
    .tsSubTitle > div:first-child,.exSubTitle2 > div:first-child, .tsCodeTotalsRow > div:first-child, .tsCodeTotalsRowalt > div:first-child{
        flex-grow:1;
    }
    .tsCodeTotalsRow{
        background-color:#fff;
    }
    .tsCodeTotalsRowalt{
        background-color:#e6e8e9;
    }
    .tsExpenseSheet .tsColTotal.tsRowTotal{
        flex-grow:1;
    }
    .expenseDailyReceipts{
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        align-items:flex-start;
    }
    .expenseDailyReceipts > .item{
        width:150px;
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        height:200px;
        margin-bottom:10px;
    }
    .expenseDailyReceipts .itemName{
        width:100%;
        align-self:flex-end;
        word-break:break-all;
    }
    .expenseDailyReceipts .itemCommand{
        align-self:flex-end;
    }
    .expenseDailyReceipts .itemNew{
        width:100%;
    }
    .tLogColumnsHeader > div{
        line-height:24px;
        height:30px;
    }
    .adminChargeAttGrid{
        display:flex;
        flex-wrap:wrap;
    }
    .adminChargeAttGrid > :nth-child(4n+1){
        width:calc(100% - 280px);
    }
    .adminChargeAttGrid > :nth-child(4n+2){
        width:120px;
    }
    .adminChargeAttGrid > :nth-child(4n+3), .adminChargeAttGrid > :nth-child(4n+4){
        width:80px;
    }
    .diffRuleGrid{
        display:flex;
        flex-wrap:wrap;
        width:550px;
    }
    .diffRuleGrid._6Col > *{
        width:100px;
        flex-grow:1;
    }
    .diffRuleGrid._6Col > :nth-child(6n-1){
        width:70px;
    }
    .diffRuleGrid._5Col{
        width:480px;
    }
    .IE3Col, .IE5Col{
        display:flex;
        flex-wrap:wrap;
    }
    .IE3Col > *{
        width:30%;
        flex-grow:1;

    }
    .IE5Col > *{
        width:20%;
        flex-grow:1;
        word-break:normal;
    }
    .diffRuleGrid._5Col > *{
        word-break:normal;
        width:20%;
        flex-grow:1;
    }

    .diffRuleGrid._4Col > *{
        width:25%;
        flex-grow:1;
    }
    .diffRuleGrid._4Col > :nth-child(4n),.diffRuleGrid._5Col > :nth-child(5n), .diffRuleGrid._6Col > :nth-child(6n){
        width:40px;
    }
}
/* AAAAAAAAAAAAAAAND EDGE */
_:-ms-lang(x), .IEHeight40px {
    height:43px;
}
_:-ms-lang(x), .tsPopUp .tsLabel input:not(.button):not([type='image']){
        height:auto;
        min-height:30px;
    }

/* RESPONSIVENESS STYLES ----------------------------------------------------------- */
@media only screen and (max-width:1250px){
    .subContent .infoRight:not(.small){
        order:-1;
        width:100%;
        max-width:none;
    }
    .infoRight:not(.small) ~ .col{
        width:100%;
    }
    .grid2Col {
        display:-ms-grid;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(450px, 1fr));
    grid-gap:12px;
    }
    .flex2Col._1250 > *{
        width:100%;
    }
    .adminSplitView._1250{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }
    .adminSplitView._1250 > :nth-child(1){
        min-width:400px;
    }
    .adminSplitView._1250 > :nth-child(2){
        width:100%;
    }
    .adminSplitView._1250 .adminListBox{
        border-left:1px solid #959fd0;
        border-right:1px solid #959fd0;
    }
}
@media only screen and (max-width:1150px){
    .adminSplitView._1150{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }
    .adminSplitView._1150 > :nth-child(1){
        min-width:400px;
    }
    .adminSplitView._1150 > :nth-child(2){
        width:100%;
    }
    .adminSplitView._1150 .adminListBox{
        border-left:1px solid #959fd0;
        border-right:1px solid #959fd0;
    }
    .flex2Col._1150 > * {
        width: 100%;
    }
}
@media only screen and (max-width:1024px){
    .adminSplitView.small, .adminSplitView._1024{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
    }
    .adminSplitView.small > :nth-child(1), .adminSplitView._1024 > :nth-child(1){
        min-width:400px;
    }
    .adminSplitView.small > :nth-child(2), .adminSplitView._1024 > :nth-child(2){
        width:100%;
    }
    .adminSplitView._1024 > .col{
        border:none;
    }
    .adminSplitView._1024 .adminListBox{
        border-left:1px solid #959fd0;
        border-right:1px solid #959fd0;
    }
    .chargeTree div.ob_tree{
    max-height: 500px;
    }
    .flex2Col._1024 > *:not(.flex2Col){
        width:100%;
    }
    .menu{
        padding:1px 7px;
    }
    .tsDateNavigation{
        width:80%;
        min-width:600px;
        order:1;
    }
    .tsAdditionalInfo .width25percent{
        order:2;
        display: flex;
        flex-wrap: wrap;
        width: 50%;
        justify-content: space-around;
    }
    .tsAdditionalInfo .width25percent.noRightSide{
        display:none;
    }
    .tsDay input:not([readonly="readonly"]) ~ .editme{
    border-left:4px solid #b7c6e6;
    border-bottom:4px solid #b7c6e6;
    border-top:4px solid transparent;
    border-right:4px solid transparent;
    }
    .tsSheetContainer .subContent {
    grid-template-columns: 1fr 40px repeat(8, minmax(25px,60px)) minmax(40px, 80px) 65px;
    }
    .tsSheetContainer .subContent.ts7day{
    grid-template-columns:1fr 40px repeat(7, minmax(25px,60px)) minmax(40px, 80px) 65px;
    }
}
@media only screen and (max-width:950px){
    .adminMenu{
        width:170px;
    }
    .adminMenu .menuTitle{
        font-size:20px;
    }
    .adminSelected, .adminNotSelected{
        font-size:11pt;
    }
    .adminSplitView{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
    }
    .adminSplitView > :nth-child(2){
        width:100%;
    }
    .adminSplitView > div > .borderLeft{
        border:none;

    }
    .adminListBox{
        border-left:1px solid #959fd0;
        border-right:1px solid #959fd0;
    }
    .subContent .infoRight.small{
        order:-1;
        width:100%;
        max-width:none;
    }
    .adminEmpList{
        margin-bottom:125px;
    }
    .adminEmpList > :first-child{
        width:100%;
    }
    .adminEmpList > :nth-child(2){
        background-color:#fff;
        width:calc(100% - 188px);
        position:fixed;
        bottom:0;
        left:171px;
        padding-bottom:3px;
        border-top:1px solid #959fd0;
    }
    .adminEmpList > :nth-child(2) .spacerRowNoHeight{
        display:none;
    }
    .adminPagingContainer{
        flex-wrap:wrap;
    }
    .adminPaging{
        width:100%;
        order:5;
        text-align:center;
        margin-top:3px;
    }
    .titleEmpList{
        width:100%;
        background-color:#fff;
        color:#004;
    }
    .flex2Col._950 > *{
        width:100%;
    }
}
@media screen and (-ms-high-contrast: active) and (max-width:1024px), (-ms-high-contrast: none) and (max-width:1024px) { /* IE 10+ */
    .tsColCharge{
        width:35%;
    }

}
@media screen and (-ms-high-contrast: active) and (max-width:950px), (-ms-high-contrast: none) and (max-width:950px) { /* IE 10+ */
    .grid2Col > .col1, .grid2Col > .col2{
        margin:0 auto;
        width:100%;
    }
    .adminPane > .adminMenu{
        min-width:170px;
        max-width:170px;
    }
    .adminPane > div:nth-child(2){
        max-width:calc(100% - 170px);
    }
    .tsColCharge{
        width:30%;
        min-width:220px;
    }


}