@CHARSET "ISO-8859-1";

/* -----------------------Mobiles CSS - Start--------------------------------------------------- */
 @media only screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) and (pointer: coarse), only screen and (max-width: 1023px) and (orientation: landscape) and (pointer: coarse) {
	center {	
		padding: 0px;
	}
	.banner img{
	   height: 50px;
	 }
	 
	 div {
		  overflow-x:auto;
		  /*overflow-y:auto;*/
	}

	label {		 
		 display: inline;
	}
	
	.footer {
		height: auto;
	} 
	
	.content{/* This needs to be changed for mobile (5px)*/
		padding-left: 5px;
		padding-right: 5px;
	}	
	
    .widthfixed {
         width: 100% !important;
    }
    .widthfixedDashboard {
		 width: 100% !important;
	}
	/* Table Fields CSS - Start */
    .tablefields, .tableinq {
    	 width: 100% !important;
         display: block;
    }
     .tablefields table, .tablefields thead, .tablefields tbody, .tablefields th, .tablefields td, .tablefields tr {
         display: block;
    }
     .tablefields thead tr {
         position: absolute;
         top: -9999px;
         left: -9999px;
    }
     .tablefields tr {
         margin: 0 0 1rem 0;
    }
     .tablefields td {
         border: none;
         border-bottom: 1px solid #eee;
         position: relative;
    }
     .tablefields td:before {
         position: absolute;
         top: 0;
         left: 6px;
         width: 45%;
         padding-right: 10px;
         white-space: nowrap;
    }
     .tablefields .textlabel, .tablefields .textlabelpaddmoreonright, .tablefields .textlabelbold {
         padding-left: 2px;
         padding-right: 3px;
         display: inline;
         white-space: normal;
    }
    /*added textdata_inline to display textdata tds in-line */
	.tablefields .textdata_inline{
		 display: inline;
	}	
    /*To inline data element - it will work good with tabs to utilize the space
	.tablefields .textdata {        
         padding-left: 2px;
         padding-right: 3px;
         display: inline; 
        white-space: normal; //This will also wrap the content if width is defined (e.g. 5%). So this will use with 100% width
    }*/

     .tablefields .tdmandatory {
         text-align: left;
         display: inline;
         color: red;
    }
     .tablefields .tdnumber + td {
         display: inline;
    }
     .tablefields .tdnumber {
         text-align: left;
         vertical-align: top;
         display: inline;
    }
     
     .tabledata thead tr {
         position: relative;
    }
     .tablefields .errorstyle {
         display: inline;
    }
	/* Table Fields CSS - End */
	
	/* Button table CSS - start */
	.buttontdleft {
         float: left;
    }
	.formbutton{
		height: 20px;
		margin: 2px;
	}
	.buttontable{/* 100% for moble and 90% for tab*/
		width: 100%;	
	}	
	/* Button table CSS - End */
	
	/* Responsive recaptcha - Start*/
	 #rc-imageselect, .g-recaptcha {
	   display: inline; 	  
	}
	 #rc-imageselect, .g-recaptcha>div>div{
		width: 100% !important;
		height: 78px;
		transform:scale(0.77); 
		-webkit-transform:scale(0.77);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
		/*text-align: center;	*/   
		overflow-x: hidden;	
		overflow-y: hidden;	
	}
	.g-recaptcha>div{
		width: 100% !important;		
	}
	
	div:not([class])  > div:not([class]) {/* hack to display rc-imageselect in mobile */
		position: relative !important;
	}
	/* Responsive recaptcha - End*/
	
	/* Table menu CSS - font size changed for mobile - otherwise horizontal scrollbar is coming on welcome screen for small screen (<=320px screens)  */
	.pagemenu
	{
		font-size: 14px;
	}
	/* Table menu CSS - End */
	
	/*Top menu changes - Start*/
	.bmenu {
		height: auto !important;
	}
	.bmenu ul{
		top:0px;		
	}
	
	.bmenu li {
		display: inline;
		padding: 0px 0px 0px 0px;
	}
	/*Top menu changes - End*/
	
	/* Mobile Menu CSS Changes - Start - override jMenu CSS classes and other classes to display vertical menu */
	.jMenu {	
		  display: none;
		  position: absolute;
		  margin: auto;
		  padding: 0;
		  border: 1px solid #888;
		  height: auto;		
		  width: 120px !important;	 
		  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		  overflow-y:auto;	
		  z-index: 9999;		  
		  word-wrap: break-word !important;	
	 }

	.jMenu li {
		display: inline-table;
		background-color: #4478AA;
		margin: 0;
		list-style: none;
		float:left;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		width:100% !important; /* */
		height:auto !important; /* */
		margin-left: 0px;/* */
		margin-bottom: 0px;/* */
		word-wrap: break-word !important;
		text-align: left; 
		border-top: 1px solid #FFFFFF; /* New */
	}
	
	.jMenu li a.isParent {		
		background-image: url("../images/udm/down-arrow.gif");
		background-repeat: no-repeat;
		background-position: 98%;
	}
	.jMenu li ul li a.isParent {
		background-color: #2668A5;
		border-radius: 0px;
		background-image: url("../images/udm/down-arrow.gif");
		background-repeat: no-repeat;
		background-position: 98%;
	}
/*	to change the arrow image of parent menu on selection
	.jMenu li a:focus {
		background-image: url("../images/udm/right-getaway.gif");
	}
	.jMenu li:focus>a {
		background-image: url("../images/udm/right-getaway.gif");
	}
	.jMenu li ul li a:focus {
		background-image: url("../images/udm/right-getaway.gif");
	}
	.jMenu li ul li:focus>a {
		background-image: url("../images/udm/right-getaway.gif");
	}
	*/
	.jMenu li ul {
		display: none;
		position: static; /* use static for default slide down and up*/
		z-index: 9999;
		padding: 0;
		margin: 0;
		list-style: none;
		white-space: normal;
		word-wrap: break-word !important;
		margin-left: 20px; /* new */ /* if position: static;  */
		width: auto !important;  /* New */
	}
	.jMenu li ul li {
		background-color: #599DE0;
		display: block;
		border-bottom: 0px;/* override */ /* if position: static; */
		/*border-top: 1px solid #484548;  new */ /* if position: static; */
		border-left: 0px;
		padding: 0;
		list-style: none outside none;
		position: relative;
		float:none;
		border-radius: 0px;
		margin: 0px;
	/*	width:194px !important;  New */
	}	

	.jMenu li ul li ul {
		width:auto !important; /* New */
		
	}
	/*
	.jMenu li ul li ul li {		 if position: static; 
		width: 90% !important; 
		
	}*/
		
	.jMenu li ul li a:focus {
		background-color: #0066cc;
	}
	.topnav_mobile{
		display: block !important;
		position: relative;		
		float: left;	
		height: 20px;
		overflow-x:hidden;
		overflow-y:hidden;
	}
	 
	.topnav_mobile span, .topnav_mobile_close span { 
	  width: 25px;
	  height: 4px;
	  background-color: #FFFFFF;
	  margin: 2px 2px;
	  font-size: inherit;
	  display: block;
	}
	.topnav_mobile_close {
		background-color: #4478AA;		
		text-align: right;
		text-decoration: none;
		height: 20px;
		display: block !important;
	}
	.topnav_mobile_close  div{
		height: 20px;
		overflow-x:hidden;
		overflow-y:hidden;
	}
	/* to toggle the hamburger menu */
	.changebar1 {
	  -webkit-transform: rotate(-45deg) translate(-5px, 4px) scale(0.77); 
	  transform: rotate(-45deg) translate(-5px, 4px) scale(0.77); 
	}

	.changebar2 {
	  -webkit-transform: rotate(45deg) scale(0.77); 
	  transform: rotate(45deg) scale(0.77); 
	}
	/* to toggle the hamburger menu */

	#hideOnPrint5{
		background: url('../images/footer-bg.png') repeat-y bottom center;
	}	
	/*Mobile Menu CSS Changes - End */
	
	select{/* To adjust the size of large select box*/
		word-wrap: break-word !important;
		width: auto !important;
		max-width: 100% !important;		
	}
		
	/* This needs to be handled for mobile and tab seprate - END*/
	br + br { display: none; } /*Replace multiple <br>'s with only one <br>*/
	
	td[class=textlabel] br, label br {/* remove br from label */
		content: '';
	}
	
	label span{/* this will dispaly supporttext span in next line */ 
		display: block;
	}
	
	/* fix for checkbox display in iOS */
	input[type="checkbox"]{
	   border-radius: 0px;
	}
	input[type="text"]{/* to resolve input field size issue on iOS devices */
	   -moz-box-sizing:    border-box;
	   -webkit-box-sizing: border-box;
		box-sizing:        border-box;
		min-width: 45px;
		width: auto !important;/* To adjust the size of large input box*/
		max-width: 90% !important;	
	}
	
	/* Make horizontal scrollbar visible - start*/
	::-webkit-scrollbar {
		-webkit-appearance: none;
	}

	::-webkit-scrollbar:vertical {
		width: 10px;
	}

	::-webkit-scrollbar:horizontal {
		height: 10px;
	}

	::-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; 
	}
	/* Make horizontal scrollbar visible - End*/
	
	#emailAcknowledgementId, #TRABRISummaryStatementId, #emailacknowledgement{/* to fix textarea width issue on contact details and Benefits information screen */
		display: block !important;
		width: 98% !important;
		height: auto !important;
	}
	
	.collapse_container .collapse_content {
		display: none;
		padding : 5px;
	}

	.collapse_header {		
		background-color: rgba(42,75,142,.9);
		color: #FFFFFF;
		height: 20px;
		width: 96%;
		padding: 4px;
		text-align: left;
	}
	.collapse_icon{
		display: inline !important;		
	}
	
	.space{
		display: none;
	}
}
/* -----------------------Mobiles CSS - End--------------------------------------------------- */

/* -----------------------Tabs CSS - Start--------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse), only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse){
	.banner {/*banner image */
	   /*background: url(../images/newHeader.gif) no-repeat top left;this needs to be changed for tablet image*/
	 }
	
	div {
		  overflow-x:auto;
		  /*overflow-y:auto;*/
	}
	
    .widthfixed {
         width: 100% !important;
    }
    .widthfixedDashboard {
		 width: 100% !important;
	}
	
	/* Button table CSS - start */
	.formbutton{
		height: 20px;
		margin: 2px;
	}
	
	/* Button table CSS - End */
	
	/* Responsive recaptcha - Start*/
	 #rc-imageselect, .g-recaptcha {
	   display: inline; 	  
	}
	 #rc-imageselect, .g-recaptcha>div>div{
		width: 100% !important;
		height: 78px;
		transform:scale(0.77); 
		-webkit-transform:scale(0.77);
		transform-origin:0 0;
		-webkit-transform-origin:0 0;
		/*text-align: center;	*/   
		overflow-x: hidden;	
		overflow-y: hidden;	
	}
	.g-recaptcha>div{
		width: 100% !important;		
	}
	/* Responsive recaptcha - End*/
	
	/*Top menu changes - Start*/
	.bmenu {
		height: auto !important;
	}
	.bmenu ul{
		top:0px;		
	}
	
	.bmenu li {
		display: inline;
		padding: 0px 0px 0px 0px;
	}
	/*Top menu changes - End*/
	
	/* Mobile Menu CSS Changes - Start - override jMenu CSS classes and other classes to display vertical menu */
	.jMenu {	
		  display: none;
		  position: absolute;
		  margin: auto;
		  padding: 0;
		  border: 1px solid #888;
		  height: auto;		
		  width: 120px !important;	 
		  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
		  overflow-y:auto;	
		  z-index: 9999;		  
		  word-wrap: break-word !important;	
	 }

	.jMenu li {
		display: inline-table;
		background-color: #4478AA;
		margin: 0;
		list-style: none;
		float:left;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		width:100% !important; /* */
		height:auto !important; /* */
		margin-left: 0px;/* */
		margin-bottom: 0px;/* */
		word-wrap: break-word !important;
		text-align: left; 
		border-top: 1px solid #FFFFFF; /* New */
	}
	
	.jMenu li a.isParent {		
		background-image: url("../images/udm/down-arrow.gif");
		background-repeat: no-repeat;
		background-position: 98%;
	}
	.jMenu li ul li a.isParent {
		background-color: #2668A5;
		border-radius: 0px;
		background-image: url("../images/udm/down-arrow.gif");
		background-repeat: no-repeat;
		background-position: 98%;
	}
/*	to change the arrow image of parent menu on selection
	.jMenu li a:focus {
		background-image: url("../images/udm/right-getaway.gif");
	}
	.jMenu li:focus>a {
		background-image: url("../images/udm/right-getaway.gif");
	}
	.jMenu li ul li a:focus {
		background-image: url("../images/udm/right-getaway.gif");
	}
	.jMenu li ul li:focus>a {
		background-image: url("../images/udm/right-getaway.gif");
	}
	*/
	.jMenu li ul {
		display: none;
		position: static; /* use static for default slide down and up*/
		z-index: 9999;
		padding: 0;
		margin: 0;
		list-style: none;
		white-space: normal;
		word-wrap: break-word !important;
		margin-left: 20px; /* new */ /* if position: static;  */
		width: auto !important;  /* New */
	}
	.jMenu li ul li {
		background-color: #599DE0;
		display: block;
		border-bottom: 0px;/* override */ /* if position: static; */
		/*border-top: 1px solid #484548;  new */ /* if position: static; */
		border-left: 0px;
		padding: 0;
		list-style: none outside none;
		position: relative;
		float:none;
		border-radius: 0px;
		margin: 0px;
	/*	width:194px !important;  New */
	}	

	.jMenu li ul li ul {
		width:auto !important; /* New */
		
	}
	/*
	.jMenu li ul li ul li {		 if position: static; 
		width: 90% !important; 
		
	}*/
		
	.jMenu li ul li a:focus {
		background-color: #0066cc;
	}
	.topnav_mobile{
		display: block !important;
		position: relative;		
		float: left;	
		height: 20px;
		overflow-x:hidden;
		overflow-y:hidden;
	}
	 
	.topnav_mobile span, .topnav_mobile_close span { 
	  width: 25px;
	  height: 4px;
	  background-color: #FFFFFF;
	  margin: 2px 2px;
	  font-size: inherit;
	  display: block;
	}
	.topnav_mobile_close {
		background-color: #4478AA;		
		text-align: right;
		text-decoration: none;
		height: 20px;
	}
	.topnav_mobile_close  div{
		height: 20px;
		overflow-x:hidden;
		overflow-y:hidden;
	}
	/* to toggle the hamburger menu */
	.changebar1 {
	  -webkit-transform: rotate(-45deg) translate(-5px, 4px) scale(0.77); 
	  transform: rotate(-45deg) translate(-5px, 4px) scale(0.77); 
	}

	.changebar2 {
	  -webkit-transform: rotate(45deg) scale(0.77); 
	  transform: rotate(45deg) scale(0.77); 
	}
	/* to toggle the hamburger menu */

	#hideOnPrint5{
		background: url('../images/footer-bg.png') repeat-y bottom center;
	}	
	/*Mobile Menu CSS Changes - End */
	
	select{/* To adjust the size of large select box*/
		word-wrap: break-word !important;
		width: auto !important;
		max-width: 100% !important;		
	}
	
		
	/* This needs to be handled for mobile and tab seprate - END*/
	br + br { display: none; } /*Replace multiple <br>'s with only one <br>*/
	
		
	/* fix for checkbox display in iOS */
	input[type="checkbox"]{
	   border-radius: 0px;
	}
	
	input[type="text"]{/* to resolve input field size issue on iOS devices */
	   -moz-box-sizing:    border-box;
	   -webkit-box-sizing: border-box;
		box-sizing:        border-box;
		min-width: 45px;
	}
	
	/* Make horizontal scrollbar visible - start*/
	::-webkit-scrollbar {
		-webkit-appearance: none;
	}

	::-webkit-scrollbar:vertical {
		width: 10px;
	}

	::-webkit-scrollbar:horizontal {
		height: 10px;
	}

	::-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; 
	}
	/* Make horizontal scrollbar visible - End*/
	
}
/* -----------------------Tabs CSS - End---------------------------------------- */

/* -----------------------Independent from device css - start ---------------------- */
.ui-dialog{
	margin-left: 5% !important;
	margin-right: 5% !important;
}
.ui-widget-overlay {    
    height: 120% !important;
}
.ui-dialog-titlebar-close{
	overflow-y:hidden;
}
.no-close .ui-dialog-titlebar-close {
  display: none;
}
.ui-button {
   padding: 0
}
#ui-datepicker-div{/* date picker bg color */
	background-color: #FFFFDD;
}
.ui-datepicker-header{/* date picker bg color */
	background: gray;
}
/* -----------------------Independent from device css - end --------------------------------------- */