@charset "utf-8";
/* CSS Document */

testing {
	color: red;
}
html {
  position: relative;
  min-height: 100%;
}
body {
    margin-bottom:120px;
	font-size: 16px;
    font-family: "Lato", sans-serif, Helvetica, Arial;
}

.headerbg{
	background-image: url(../images/header-bg.png); background-repeat: repeat-x; height: auto; width:100%;
}
main{
	padding:20px 0px;
}
h1, h2, h3{
	font-family: "Lato", sans-serif, Helvetica, Arial;
    font-weight: 700;
    font-style: normal;	
}

h1{
	font-size:32px;
}

h2{
	font-size:28px;
	font-style:normal;
	font-weight: 400
}
h3{
	font-size:24px;
	font-style:normal;
	font-weight: 400
}
.inst-box{
	background-color: #5775B5;
    color: #ffffff;
    text-align: left;
	font-size:15px;
	padding: 10px 0px;
	margin: 25px 0px;
}
.inst-help{
	position:relative;
	top:0px
}
.inst-link:link, .inst-link:active, .inst-link:visited, .inst-link:hover {
  color: #ffffff;
  text-decoration: underline;}

.desired-link-label{
	font-weight: normal;
}
.desired-link:hover, .inst-link:hover {
  text-decoration: none;}
.inst-link:before{
	content: '';
    background:url(../images/2arrows.gif);
    background-size:cover;
    position:absolute;
    width:7px;
    height:6px;  
	margin-top:7px
}
.details{
	margin-left:15px;	
}
.desired-link:link, .desired-link:active, .desired-link:visited, .desired-link:hover {
  color: #333333;
  text-decoration: underline;}
a:link, a:active, a:visited, a:hover {
  color: #0643c6;
  text-decoration: underline;}
a:hover{
  text-decoration: none;}

table{
	width:100%	
}
.tabel-separation{
border-right: 1px dotted #ffffff;
}
.greybox{
 background-color: #f2f2f2;
 padding:10px 20px; 
 margin: 20px 0px;
}
.greybox-spacing{ 
 padding:20px; 
}
.form-control-spacing{
	padding:20px 15px
}
.type-number{
	width: 100px;
}
.label-spacing{
	margin-left:70px;
}
.cardBody > table > tbody > tr:hover{
    background-color:inherit !important;
}

.readonly-text, .control-spacing{
	position: relative;
    top: 7px;
    overflow-wrap: break-word;
}
.form-center{
	width:90%;
	margin:auto;
}
fieldset > legend{
	margin-bottom:0px;
}
.custom-control-label {
    position: relative;   
    left: 25px;
}
.custom-control-inst{
	font-weight:100; 
	color: #333333 !important;
	padding-right:30px}

.control-label-underline {
	font-size: 16px;
	font-weight: 600;
    text-decoration: underline;	
}
.customRadio {
	padding-left: 0px;
    position: relative;
    left: -17px;
	margin: 0px 0px 10px -10px;
}
.custom-control-radio::before, .custom-control-check::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.detailedInstructions, .info-message, .error-message, .warning-message{
	background-color: #e5f1fa;
    box-sizing: border-box;
    border: 2px solid #017acd;
	padding: 15px 10px 10px 15px;
	margin:30px 0px;
	
 }
.error-message ul li{
	position: relative;
    top: -5px;   
}
.info-message{
	display:block;	
}
.passenger-info{	
	margin: 20px 0px 20px 20px;	
}
.info-heading{
	color:#017acd;
	font-size:20px;
}
.info-heading:before{
	content: '';
    background:url(../images/info-icon.png);
    background-size:cover;
    position:absolute;
    width:32px;
    height:34px;
    margin-top: -5px;
}
.info-content, .warning-content{
	position: relative;
    bottom: 5px;
    left: 10px;
}
.info-text p, .info-text ol{
	font-size:14px;
}
.info-link{margin-top:7px}
.info{}
.statusInfo{margin-top:10px}
.info em{
	display: block;
    position: relative;
    margin: 2px 0px 0px 40px;
	font-size:14px
}
.info:before{
	content: '';
    background:url(../images/info-icon-small.png);
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-top:5px;
}
.warning-message{
	background-color: #f9efd1;    
    border: 2px solid #a26804;
	color:#a26804;
	font-size:18px;
}

.error-message{
	background-color: #af272f;    
    border: 2px solid #af272f;
	color:#ffffff;
}
.error-icon, .warning-icon{
	
}
.disabled{
	pointer-events: none;
}
.error-icon:before, .warning-icon:before{
	content: '';
    background:url(../images/error-icon.png);
    background-size:cover;
    position:absolute;
    width:35px;
    height:30px;
    margin-top:5px;
}
.invalid-feedback,.tokenError,.exceedMessage{
	margin-top: 1rem;
	font-size:14px;	
	color: #dc3545;
}
.warning-icon:before{
	content: '';
    background:url(../images/alert-icon.png);    
}
.invalid-feedback:before, .tokenError:before, .exceedMessage:before{
	content: '';
    background:url(../images/error-icon-small.png);
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-top: -5px;
}
.errorIcon{}
.errorIcon:before{
	content: '';
    background:url(../images/error-icon-small.png);
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-top: -5px;
}
.change-link{	    
    position: relative;
	margin: 10px 10px;
    top: 7px;
}
/* Error Message styles for form elements */
.custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid{
   	border: 1px solid #dc3545;
	background-color: #fee7ee;
}
.was-validated .form-check-group{
	border: 1px solid #dc3545;
	background-color: #fee7ee;
	
}
.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label {
    color: #333333;
}

.btn-submit, .primary-button, .primary-button-small{
	color: #fff;
    background-color:#5775b5; 
   /* border-radius: 0px;*/
	border: 1px solid #5775b5;
	user-select: text;
}
.btn-submit{
	margin-top:0px !important;
	user-select: text;
}
.secondary-button, .secondary-button-small{
	background: #666666;
    border: 1px solid #666666;
    color: #ffffff;	
	margin-top:17px;
	user-select: text;
}
.primary-button-small, .secondary-button-small {
	padding: 0px 10px;
    margin: 0px;
	user-select: text;
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #999999;
    background-color: #cccccc;
    border-color: #cccccc;	
}
.secondary-button, .primary-button, btn-primary.disabled, .btn-primary:disabled{
padding: 5px 20px;
margin: 20px 20px 20px 0px;
}
.modal-body{
	font-size: 14px;
}
.modalLabel{
	color: #ae650c;
	font-size: 16px;
}
.modalLabel-terms{
	color: #ffffff;
}
.modalLabel:before{
	content: '';
    background:url(../images/alert-icon.png);
    background-size:cover;
    position:absolute;
    width:35px;
    height:30px;  
}
.icon-title-spacing, .icon-list-spacing{
	margin-left:35px
}

.success-message:before{
	content: '';
    background:url(../images/success-icon.png);
    background-size:cover;
    position:absolute;
    width:25px;
    height:25px;
    margin-left:0px;
}
.success-message{
	background-color: #e2f0ec;
    box-sizing: border-box;
    border: 2px solid #227c04;
    border-radius: 0px;
	color: #227c04; 
	padding:5px 20px;
    margin: 20px 0px 30px;
}
.success-message .title{
	color: #227c04;
	font-weight:600;
}
.success-message div, .success-message span {
	color:#333333;	
}

.row-spacing{
	padding: 10px 0px;
}
.col-spacing{
	padding: 0px 10px;
}
form label{
	font-weight: 600;
}
.table thead th, .table tbody th{
   vertical-align: top; 
	background-color:#666666;
	color:#ffffff;
}
.table td, .table th{  
    vertical-align: top;  
	padding: 5px 5px;
}
.wordWrap{word-break:break-all;}

.table label{
	margin-bottom:0rem;
}
td input[type='text']{
	width: 100px
}
.categoryTable thead th, .categoryTable td{	
	text-align: right;
	padding-right: 80px;
}
.categoryTable tfoot td{	
	background-color:#f2f2f2;
}
.categoryTable tfoot th{	
	background-color:#666666;
}
.employerTable tr:hover {
    background-color:#bad8f6 !important;
}
tr.highlighted td {
     background: #bcc8ef;
}
.employerTable thead th, .employerTable tbody th{   
	background-color:#cccccc;
	color:#000000;
}
.employerTable-striped>tbody>tr:nth-child(even)>td,
.employerTable-striped>tbody>tr:nth-child(even)>th {
  background-color: #99CCFF;
  border-top: 1px solid #cccccc;
}
.smallControl, .smallControl-modal{
	width: 60px !important;
	height: calc(1.5rem + 2px);
    padding: .075rem .15rem;
}
.smallControl-modal{
	width: inherit !important;
}
.select-control{
	height: calc(1.5rem + 2px);	
	background-color: #fff;    
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;	
}
.modal-select-control{
	width:99%
}
.btn-help-text{
	position: relative;
    top: 5px;
    left: 40px;	
	font-style: italic;
}
.totalBenefits{	 
	vertical-align: top !important;   
    text-align: right;	
}
.trasitTotal:after{
	content: '';
    background:url(../images/train-icon.png);
    background-size:cover;
    position:absolute;
    width:19px;
    height:21px;
    margin-left:20px;
}

.total-amount {	
	border-top: 3px solid #017acd;
	padding-top: 7px;
	font-weight: 600;
}
 .transit-total {	
	border-bottom: 3px solid #017acd;
	padding-bottom: 7px;
	padding-left: 10px;
}
.monthlyTrasitTotal{	
	border-bottom: 0px;	
}
/* Employee self service */

.card{
    border: none;
    border-radius: 12px;
	position: relative;    
    word-wrap: break-word;
	padding: 10px 0px 0px;
	margin: 20px 0px;
	color: #ffffff;
}
.card hr{
	border: 1px solid #ffffff;
    border-width: thin;
    width: 100%;
}

.card a:link, .card a:active, .card a:visited, .card a:hover {
  color: #ffffff;
  text-decoration: underline;}
.card a:hover{
  text-decoration: none;}
.cardLink, .benefitCardsLink{
	float:right;
	margin-top:10px;
	margin-right: 20px;
}

.cardBody{
	padding: 0px 20px 10px;
}
.cardBody-table{
	padding: 0px 5px;
}
.stCard {
	background-color: #5775B5 !important;
    margin-right: 20px;	
}
.empinfoCard{
	background-color: #68763A !important;
	margin-left: 20px;
}

.stCardTitle:before, .empinfoCardTitle:before, .monthlyBenefitTitle:before, .transitAllocationTitle:before, .statusTitle:before, .dateInfoTitle:before{	
    position:absolute;
    left: 15px;
    top: 10px;
}
.stCardTitle:before{
	content: '';
    background:url(../images/stcard-icon.png);
    background-size:cover;
	width:54px;
    height:37px;
}
.empinfoCardTitle{
margin-left: -10px;
}
.empinfoCardTitle:before{
	content: '';
    background:url(../images/employer-icon.png);
    background-size:cover;
	width:40px;
    height:41px;	
}
.truncated {
	display:inline-block;    
	max-width:225px; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
 }
.stCardTitle, .empinfoCardTitle, .monthlyBenefitTitle, .transitAllocationTitle, .dateInfoTitle{	
	color: #ffffff; 
	padding: 3px 10px 0px 60px;	
	font-size:26px;
}
.dateInfoTitle{
	padding-left: 65px !important;
}
.benefitCards{
	background-color: #f2f2f2 !important;
	color:#333333;
	border: none;
    border-radius:0px;
	padding-top:0px
}

.monthlyBenefit, .status{	
	margin-right: 20px;	
}
.transitAllocation, .rightColumn{	
	margin-left: 20px;
}

.leftColumn{		
	margin-left: 0px;
	margin-right: 20px;
}
.helpInfo{	
    text-align: right;
    position: absolute;
    right: 25px;
    top: 10px;
}

.statusGreen{
	margin: 15px 35px;
	font-size: 20px;
	color:#227C04;
}
.statusOrange{
	margin:15px 0px 0px 15px;
	color:#AE650C;
	font-size: 20px;
}

.statusRed{
	color:#990000;
	font-size: 20px;	
	margin: 15px 0px;
}
.statusPending{
	color:#990000;
	font-size: 20px;
	padding: 10px 10px 0px 40px;
}
.statusPending:before{
	content: '';
    background:url(../images/pending-icon.png);
    position:absolute;
	background-size:cover;
	width:35px;
    height:36px;
	left: 10px;
}
.error-text{
color:#dc3545;
}
.statusGreen:before{
	content: '';
    background:url(../images/check-icon.png);
    position:absolute;
	background-size:cover;
	width:29px;
    height:23px;
	margin-top: 5px;
    margin-left: -25px;
}


/* Drop Down   */

.custom-select{
    position: relative;
    font-family: Arial;
	background:url(../images/custom-select-icon.png) no-repeat right .75rem center;     
    background-color: #5775B5;
    border: none;
    padding: 0px;
    margin: 10px;
    color: #ffffff;
    width:170px;
	padding-left: 20px;
	}
  
.custom-select select{
    border: none;
    outline: none;
    background: #5775B5;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    margin: 0;
    display: block;
    width: 100%;
    padding: 12px 55px 15px 15px;  
	color: #ffffff}
  
.custom-select:after{
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
.custom-select:disabled {
    color: #6c757d;
	background:url(../images/custom-select-disabled-icon.png) no-repeat right .75rem center;
    background-color: #cccccc;
}
.status:before, .monthlyBenefit:before, .transitAllocation:before, .dateInfo:before{
    content: '';   
    background-size:cover;
	position:absolute;	
	left: 15px;
    top: 6px;
}
.status:before{    
    background:url(../images/status-icon.png);
    width:42px;
    height:42px;	
}
.monthlyBenefit:before{   
    background:url(../images/calendar-icon.png);   
	width:39px;
    height:41px;	
}
.transitAllocation:before{    
    background:url(../images/graph-icon.png);    
	width:38px;
    height:33px;	
	margin-top: 5px;
}
.dateInfo:before{    
    background:url(../images/dates-icon.png);    
	width:26px;
    height:26px;
	margin-top: 10px;
}
.monthlyBenefitTitle, .transitAllocationTitle, .statusTitle, .dateInfoTitle{	
	color: #ffffff;
    background-color: #666666;
    padding: 10px 70px; 
}

.benefitCards a:link, .benefitCards a:active, .benefitCards a:visited, .benefitCards a:hover {
  color: #0226B9;
  text-decoration: underline;}
.benefitCards a:hover{
  text-decoration: none;}
.benefitCards a:after{
    content: '';
    background:url(../images/left-arrow.png);
    background-size:cover;
	position:absolute;		
	margin-bottom:12px;
    right: 10px;
}
.cardLink:after{
    content: '';
	background:url(../images/left-arrow-white.png);
	background-size:cover;
	position:absolute;
	width:10px;
    height:10px;
	right: 17px;
    bottom: 15px;
}
.col-form-label { font-weight: 600}
#topBtn {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 10px;
  z-index: 99;    
  background-color:#555555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  border:none;
}
.icon-spacing{
	margin-left: 5px;
}
#topBtn:hover {
  background-color: #666666;
}
.helpText{
	font-size: 14px;
	font-style: normal;
}
/*Adding this code for Transit allocation help pop over, but it is effecting delete pop over styles.*/

.popover {
 	max-width: 600px !important;
	position: absolute;
    top: 0;
   /* left: -150px !important;*/
	font-size:13px !important;
}
/*.popover .arrow {
    position: absolute;
   left: 450px !important;
}*/


.popover-body {
  padding: .0rem .7.5rem !important;
}
.hide{
	display: none;
}

.selectMonth {
	text-align: right;
    position: absolute;
    top: 14px;
    right:0px;
}
.monthLabel{
	text-align: right;
    position: absolute;
    top: 10px;
    right: 55px;
    color: #ffffff;
	line-height:1.2rem;
}
.footer{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 20px;
  background-color: #3e3e3e;
  color: #ffffff;
}
.footer-links ul li {
	color: #ffffff;
	display: inline-block;
	padding-left:20px
}
.footer-links a{
color: #ffffff;
}
.footer-links a:hover{
text-decoration: none
}
.logo .mobile {
    display: none;
  }

	
@media (max-width: 1024px) {
	.form-center{
	width:75%
}
	.label-spacing{
	margin-left:0px;
}		
	.inst-help{
	position:relative;
	top:0px
}
}
/*@media only screen and (max-width: 780px) and (max-width: 1024px){
	hr{
	border: 1px solid #ffffff;
	width: 100%;
	}
	.label-spacing{
	margin-left:0px;
}	

}*/
@media (max-width: 780px) {
	.form-center{
	width:85%
}
	.label-spacing{
	margin-left:0px;
}	
	.inst-help{
	position:relative;
	top:0px
}
}
@media only screen and (max-width: 480px) and (max-width: 780px){
	
}
/* when screen is less than 480px wide
 show mobile version and hide desktop */
@media (max-width: 480px) {
.logo .mobile {
  display: block;	 		
}
.logo .desktop {
  display: none;
}
.no-mobile {
  display: none;
}

main {
    padding:0px; 
}
.inst-help{
	position: relative;
    left: 46%;
    margin: 0px 0px 20px;
	top:0px;
}
.form-control, .form-control:focus{
	padding:10px;
	margin:0px;
}
.form-center{
	width:100%
}
.label-spacing{
	margin-left:0px;
}	
.control-spacing{
	position: relative;
    top: 0px;
}
.btn-help-text{
	margin:20px 0px 30px 0px;
	top: 0px;
	left: 0px;
}
	
.btn-submit {
    margin-top: 20px !important;
	user-select:text;
}
.mobile-submitBtn{
	position: relative;  
	margin: 100px 0px 0px;
}	
.mobile-terms {
   position: absolute; 
   margin-top: -160px;
   padding: 0px 20px 10px 5px;
}
.empty{ 
	margin-bottom:70px;
}
.icon-list-spacing{
	margin-left:0px;
}
.readonly-text, .control-spacing{
	position: relative;
	top: 0px;
}	
.empinfoCard, .stCard, .status, .monthlyBenefit, .transitAllocation {    
    margin-right:0px;   
    margin-left: 0px;
}
.monthlyBenefit{
  margin-top:0px;
}	
.empinfoCard {    
    margin-left: 0px;
}	
.rightColumn {
    margin-left: 0px;
}
.helpInfo {    
    position: absolute;
    right: 0px;   
}
/*.categoryTable thead th, .categoryTable td {
  padding-right: 20px;
}*/
.selectMonth {  
   position: relative;
   right: 0px;
   top: 0px;
}
.passenger-info {
margin-left:0px;
}
.monthLabel{
	position: relative;
	top:0px;
	right:0px;
	color:#333333;
}
.transitAllocation-Help {    
    right: 0px;  
}
.table td, .table th {
	vertical-align:top;
	padding: 5px 5px;
}
.smallControl{
	/*margin-bottom: 25px;*/
}
	
::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 12px;
}
::-webkit-scrollbar:horizontal {
    height: 12px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}
.footer{
 text-align: center;
 padding-top: 15px;
 bottom: auto;
}
.footer-links ul li {   
 padding-right: 55px;
}

}