/*-----------------------------------------------------------------------------

// BuRPS (Budgeting Rostering and Payroll System)
// (c) YTT Solutions Pty. Ltd. Australia
//
// module: portal/css/style.css
//
// generic styles for all PORTAL pages
//
// Build    Date     PR      Comment
// 1.0.3  11/11/15  PR2598   IL - add tutorial video button
// 1.1.5  12/03/19  PR2803   IL - add generic_button styles
// 2.0.0  19/02/20  PR2848   IL - use border-radius instead of images to make rounded corners - makes customisation much easier
// 2.0.1  14/04/20  PR2858   BK - minor change to border-radius current state
// 16/09/21 PR2952.4 IL - PAGING STYLES
// 04/06/22 PR3011 IL - add styles for MTA login and Other Links buttons
// 21/06/22 PR3013 JO - Start a 'generic' styling section, to put anything we're copying across from BuRPS here
// 09/09/22 PR3033 IL - alter style for other_links_buttons to work for 2,4,6,8 buttons not just 2
// 29/09/22 PR3038 IL - add styles for button-submit (taken out of request_time_off.php)
// 19/10/22 PR3037 NC - Added some mobile optimisation for portal forms
// 25/03/23 PR3070 IL - adjust styles for new generic headers (iframe_head_date etc)
// 23/03 23 PR3071 NC - More mobile optimisation for boxes that should actually be centred
// 05/09/23 PR3095 JO - Tweak Paging styles, been broken for a while
// 11/09/23 PR3095 JO - Add calendar icon (.icon-calendar)
// 08/04/24 PR3121 NC - Add save-later css to stylesheet
// 28/10/24 PR3142 IL - MTA Login button - make it RED and white when hover - it will stand out better
// 08/07/26 PR3227 RO - fix .paging_middle to be absolutely centered so it doesn't overlap the Prev link
-----------------------------------------------------------------------------*/

@import url("colors.css");

/* SETUP
-----------------------------------------------------------------------------*/
html * {
	box-sizing: content-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body, html {
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: arial, sans-serif !important;
  font-size: 9pt;
  color: #000;
	word-break: inherit;
}

/* h1, h2, h3, h4, h5, h6, pre, code {
  font-size: 1em;
} */

a img, :link img, :visited img {
  border: none;
}

address {
  font-style: normal;
}

a {
  text-decoration: none;
  color: #4795d6;
}

a:hover {
  text-decoration: underline;
}

.clear {
  line-height: 0;
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

.last {
	margin-right: 0 !important;
}

.hide {
  display: none !important;
}

.canvas {
  border: 1px solid #a2a2a2;
  border-radius: 3px;
}
.header_tile, .header_tile_logged_out {
  height: 154px;
  width: 100%;
  background: url('../images/header_tile.gif') repeat-x;
  position: absolute;
  top: 0;
  left: 0;
}

.header_tile_logged_out {
  top: -49px;
}

.full_divider {
  height: 1px;
  width: 100%;
  background: #cfcfcf;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* PR3037 - General Mobile optimisation for onboarding form */
@media only screen and (max-width: 600px) {

  /* PR3071 - Mobile optimisation for boxes that should actually be centred */
  .full_col .box {
    margin-bottom: 16px !important;
  }

  .full_col .box:not(.center-box) {
    margin: 0px;
  }

  .form_item textarea {
    width:100% !important;
  }
}

/*-----------------------------------------------------------------------------*/


/* GENERIC
-----------------------------------------------------------------------------*/
.green-text {
  color: var(--green-1);
}

.red-text {
  color: var(--red-1);
}


/* CONTENT WRAPPER
-----------------------------------------------------------------------------*/

.content_wrapper {
  width: 940px;
  margin: 0 auto;
  text-align: left;
  position: relative;
  z-index: 1;
  overflow: hidden !important;
}


/* HEADER
-----------------------------------------------------------------------------*/

.header {
  width: 100%;
  height: 154px;
}

.logged_in_to, .logged_in_to_shadow {
	position: absolute;
	top: 47px;
	right: 13px;
	color: #FFF;
	text-transform: uppercase;
	font-size: 19pt;
}

.logged_in_to div, .logged_in_to_shadow div {
	font-size: 13pt;
	margin-bottom: -4px;
}

.logged_in_to_shadow {
	color: #569ad6;
	margin-top: 1px;
	margin-left: 1px;
}

.logged_in_to select {
  font-size: 9pt;
  position: absolute;
  right: 0;
  top: 20px;
  width: auto;
}



/* TUTORIAL BUTTON
-----------------------------------------------------------------------------*/
.tutorial_button {
	height: 35px;
	width:154px;
	position: relative;
	position: absolute;
	top: 0px;
	right: 300px;
	overflow:hidden;
}


/* TOP NAV
-----------------------------------------------------------------------------*/

.top_nav {
	background: #185c87;
	height: 35px;
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
}

.top_nav a {
  display: block;
  height: 35px;
  width: auto;
  padding-left: 18px;
  padding-right: 18px;
  line-height: 35px;
  float: left;
  color: #FFF;
}

.top_nav .divider {
  width: 2px;
  height: 21px;
  margin-top: 7px;
  background: url('../images/top_nav_divider.gif') repeat-y;
  float: left;
}

.top_nav a:hover, .top_nav .current {
  text-decoration: none;
  background: #134a6c;
}

.top_nav .left_corner {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	background: url('../images/top_nav_left_corner.png') no-repeat;
	display:none !important;
}

.top_nav .right_corner {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	background: url('../images/top_nav_right_corner.png') no-repeat;
	display:none !important;
}

/* NAV
// - use border-radius instead of corner images
-----------------------------------------------------------------------------*/

.nav {
	background: url('../images/nav_tile.gif') repeat-x;
	height: 51px;
	position: relative;
	float: left;
	height: 51px;
	margin-top: -3px;
	border-radius: 15px 15px 0px 0px;
}

.nav a {
  display: block;
  height: 51px;
  width: auto;
  padding-left: 47px;
  padding-right: 47px;
  line-height: 51px;
  float: left;
  color: #FFF;
  text-transform: uppercase;
  font-size: 18px;
}

.nav .divider {
  width: 2px;
  height: 35px;
  margin-top: 8px;
  background: url('../images/nav_divider.gif') repeat-y;
  float: left;
}

.nav a:hover, .nav .current {
  text-decoration: none;
  background: #134a6c;
}

.nav .left_corner {
	position: absolute;
	left: 0;
	top: 0;
	width: 13px;
	height: 13px;
	background: url('../images/nav_left_corner.png') no-repeat;
	display:none; /* PR2848 */
}

.nav .right_corner {
	position: absolute;
	right: 0;
	top: 0;
	width: 13px;
	height: 13px;
	background: url('../images/nav_right_corner.png') no-repeat;
	display:none; /* PR2848 */
}


/* PR2848 - more classes for border-radius */
.nav_left:hover {
	border-radius: 15px 0px 0px 0px !important;
}
.nav_right:hover {
	border-radius: 0px 15px 0px 0px !important;
}
.nav_left.current {
	border-radius: 15px 0px 0px 0px !important;
}
.nav_right.current {
  border-radius: 0px 15px 0px 0px !important;
}
.nav_right:hover {
	border-radius: 0px 15px 0px 0px !important;
}
.nav_topleft:hover {
	border-radius: 0px 0px 0px 15px !important;
}
.nav_topright:hover {
	border-radius: 0px 0px 15px 0px !important;
}
.top_nav {
	border-radius: 0px 0px 15px 15px !important;
}

/* DROPDOWN
-----------------------------------------------------------------------------*/

.dropdown {
	background: url('../images/dropdown_tile.png') repeat;
	width: 210px;
	border: 1px solid #113d5a;
	position: absolute;
	top: 154px;
	left: 308px;
	z-index: 1;
	border-top: 0;
	display: none;
}

.dropdown span {
	text-transform: uppercase;
	float: left;
	font-size: 17px;
	margin-top: 5px;
}

.dropdown img {
	float: left;
	margin-right: 8px;
	margin-top: 9px;
}

.dropdown a {
	display: block;
	height: 30px;
	padding-left: 19px;
	padding-right: 19px;
	color: #FFF;
}

.dropdown a:hover, .dropdown .current {
	background: #113d5a;
}

.dropdown .divider {
  height: 1px;
  width: 190px;
  background: #113d5a;
  border-bottom: 1px solid #276893;
  margin-left: 10px;
}

/* LEFT COL
-----------------------------------------------------------------------------*/

.left_col {
	width: 535px;
	margin-right: 20px;
	float: left;
	margin-top: 20px;
}

.home_title {
  text-transform: uppercase;
  font-size: 20pt;
  color: #5a5a5a;
  margin-bottom: 8px;
  margin-top: -1px;
}

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

.home_buttons a {
	float: left;
	background: url('../images/tile_button.png') repeat-x;
	overflow: hidden;
	display: block;
	height: 98px;
	position: relative;
	text-align: center;
}

.home_buttons a img {
	margin: 0 auto;
}

.home_buttons a:hover {
	background-position: 0 -98px;
}

.home_buttons a:hover img {
	margin-top: -98px;
}

.home_buttons .leftcap_button {
	float: left;
}
.home_buttons .rightcap_button {
	float: right;
}


/* LEFT COL -> REMINDER
-----------------------------------------------------------------------------*/

.reminder {
	width: 70%;
	height: 44px;
	background: url('../images/reminder_background.gif') no-repeat center;
	font-weight: bold;
	color: #666;
	padding-top: 5px;
	margin: 5px auto 0 auto;
}

.reminder .icon {
	float: left;
	margin-right: 10px;
	margin-top: 5px;
}

.reminder .reminder_button {
	float: left;
	margin-top: 1px;
	display: block;
  position: relative;
  height: 24px;
  background: url('../images/button_tile.gif') repeat-x;
  color: #6f6f6f;
  line-height: 24px;
  font-weight: bold;
  padding-left: 12px;
  padding-right: 11px;
  margin-top: 6px;
}

.reminder .reminder_button .button_left {
  position: absolute;
  left: -2px;
  top: 0;
}

.reminder .reminder_button .button_right {
  position: absolute;
  right: -2px;
  top: 0;
}

/* LEFT COL -> BOX
-----------------------------------------------------------------------------*/

.left_col .box {
	width: 633px;
	box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
	border-top: 0;
	margin-bottom: 15px;
  border-radius: 0px 0px 5px 5px;
}

.left_col .box_content {
  background:white;
  border-radius: 0px 0px 5px 5px;
}


.left_col .box_top {
  width: 100%;
	background: #4795d6;
	border-top: 1px solid #418ccb;
	height: 39px;
	position: relative;
}

.left_col .box_top .title {
  text-transform: uppercase;
  font-size: 20pt;
  color: #FFF;
  line-height: 37px;
  margin-left: 12px;
  float: left;
}

.left_col .box_top .right_button {
  float: right;
  position: relative;
  height: 24px;
  background: url('../images/button_tile.gif') repeat-x;
  color: #6f6f6f;
  padding-left: 9px;
  padding-right: 8px;
  line-height: 24px;
  font-weight: bold;
  z-index: 1;
  margin-right: 13px;
  margin-top: 7px;
}

.left_col .box_top .right_button:hover {
	text-decoration: none;
}

.left_col .box_top .right_button:hover span {
	text-decoration: underline;
}

.left_col .box_top .right_button .button_left {
  position: absolute;
  left: -2px;
  top: 0;
}

.left_col .box_top .right_button .button_right {
  position: absolute;
  right: -2px;
  top: 0;
}

.left_col .box_top_left {
	position: absolute;
	top: -1px;
	left: 0;
}

.left_col .box_top_right {
	position: absolute;
	top: -1px;
	right: 0;
}


/* RIGHT COL
-----------------------------------------------------------------------------*/

.right_col {
	width: 418px;
  float: left;
}


/* RIGHT COL -> BOX
-----------------------------------------------------------------------------*/

.right_button_min {
  color: #FFF;
  font-weight: bold;
  float: right;
  margin-top: 12px;
  margin-right: 13px;
}

.right_button_min img {
  position: relative;
  left: -2px;
  top: -1px;
}

.right_button_min:hover {
  text-decoration: none;
}

.right_button_min:hover span {
  text-decoration: underline;
}

.right_col .box {
	width: 100%;
	box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
	border-top: 0;
	margin-bottom: 15px;
  background:white;
  border-radius: 0px 0px 5px 5px;
}

.right_col .box_top {
  width: 100%;
/*   margin-left: -1px;  JO */
	background: #4795d6;
	border-top: 1px solid #418ccb;
	height: 39px;
	position: relative;
}

.grey .box_top {
  background: #a3a3a3 !important;
  border-top: 1px solid #a3a3a3 !important;
}

.grey .box_content {
  color: #7c7c7c;
}

.box_content {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 10px;
  /* line-height: 16px; */
  color: #5a5a5a;
}

.right_col .box_top .title {
  text-transform: uppercase;
  font-size: 20pt;
  color: #FFF;
  line-height: 37px;
  margin-left: 12px;
  float: left;
}

.right_col .box_top .right_button {
  float: right;
  position: relative;
  height: 24px;
  background: url('../images/button_tile.gif') repeat-x;
  color: #6f6f6f;
  padding-left: 9px;
  padding-right: 8px;
  line-height: 24px;
  font-weight: bold;
  z-index: 1;
  margin-right: 13px;
  margin-top: 7px;
}

.right_col .box_top .right_button:hover {
	text-decoration: none;
}

.right_col .box_top .right_button:hover span {
	text-decoration: underline;
}

.right_col .box_top .right_button .button_left {
  position: absolute;
  left: -2px;
  top: 0;
}

.right_col .box_top .right_button .button_right {
  position: absolute;
  right: -2px;
  top: 0;
}

.right_col .box_top_left {
	position: absolute;
	top: -1px;
	left: 0;
}

.right_col .box_top_right {
	position: absolute;
	top: -1px;
	right: 0;
}

/* FULL COL
-----------------------------------------------------------------------------*/

.full_col {
	width: 940px;
	margin-right: 20px;
	float: left;
	margin-top: 20px;
  padding-left:1px;
}

/* FULL COL -> BOX
-----------------------------------------------------------------------------*/

.full_col .box {
	width: 938px;
	box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24), 0px 2px 5.88px 0.12px rgba(0, 0, 0, 0.16);
	border-top: 0;
	margin: 0 auto 15px auto; /* JO */
	background: white;
}

.full_col .box_top {
  width: 940px;
  /* margin-left: -1px;  JO */
	background: #4795d6;
	border-top: 1px solid #418ccb;
/* 	height: 39px; */
	position: relative;
}

.full_col .box_top .title {
  text-transform: uppercase;
  font-size: 20pt;
  color: #FFF;
  line-height: 37px;
  margin-left: 12px;
  float: left;
}

.full_col .box_top .right_button {
  float: right;
  position: relative;
  height: 24px;
  background: url('../images/button_tile.gif') repeat-x;
  color: #6f6f6f;
  padding-left: 9px;
  padding-right: 8px;
  line-height: 24px;
  font-weight: bold;
  z-index: 1;
  margin-right: 13px;
  margin-top: 7px;
}

.full_col .box_top .right_button:hover {
	text-decoration: none;
}

.full_col .box_top .right_button:hover span {
	text-decoration: underline;
}

.full_col .box_top .right_button .button_left {
  position: absolute;
  left: -2px;
  top: 0;
}

.full_col .box_top .right_button .button_right {
  position: absolute;
  right: -2px;
  top: 0;
}

.full_col .box_top_left {
	position: absolute;
	top: -1px;
	left: 0;
}

.full_col .box_top_right {
	position: absolute;
	top: -1px;
	right: 0;
}


/* TABLE
-----------------------------------------------------------------------------*/

table {
	border-bottom: 1px solid #cfcfcf;
}

.hover_table tr:hover {
	background: #add9ff;
	cursor: pointer;
}

.hover_table tr:hover .current {
	background: #86c7ff;
}

.left_col table {
  width: 100%;
}

.right_col table {
  width: 100%;
}

table td {
  border-top: 1px solid #cfcfcf;
  height: 29px;
  padding-left: 10px;
  padding-right: 10px;
}

.table_header .current {
	background: #b1cee5;
}

table .light .current {
	background: #e9e9e9;
}

table .dark .current {
	background: #c2c2c2;
}

table .table_header {
	background: #c5e5ff;
	font-weight: bold;
	cursor: auto !important;
}

table .table_header a {
	color: #5a5a5a;
}

.table_header:hover {
	background: #c5e5ff !important;
}

.table_header:hover .current {
	background: #b1cee5 !important;
}


table .light {
	background: #FFF;
}

table .dark {
	background: #e3e3e3;
}

/* PAGING
// PR2955 - use position:relative on container, absolute on next/prev links
// PR3121 - Add save later button CSS here
-----------------------------------------------------------------------------*/

.page_label {
	clear: both;
	font-weight: bold;
	padding-top: 20px;
	width: 100%;
	border-bottom: 1px solid #cfcfcf;
	margin-bottom: 12px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 5px;
	margin-top: 15px;
	background: #4795d6;
	color: white;
	font-size: 18px;
	border-top: 20px solid white;
}

/* PR3106 - Add bottom padding to paging bar to offset lack of cancel button */
.paging {
	height: 29px;
	width: 100%;
	background: url('../images/paging_tile.gif') repeat-x;
	position: relative;
	font-weight: bold;
	color: #6f6f6f;
	margin-top: 39px;
	position:relative;
  padding-bottom: 16px;
}

.paging_leftcap {
	position: absolute;
	top: 0;
	left: 0;
}

.paging_rightcap {
	position: absolute;
	top: 0;
	right: 0;
}

div.paging_prev, a.paging_prev {
	position:absolute;
	left:0px;
	top:0px;
	background: url('../images/paging_arrow_left_disabled.gif') left 9px no-repeat;
	padding-left: 16px;
	margin-left: 9px;
	height: 29px;
	line-height: 29px;
	/* // 16/09/21 PR2952.4 IL - PAGING STYLES - make it MORE GREY by using transparency */
	opacity:0.5;
}

div.paging_next, a.paging_next {
	position:absolute;
	right:0px;
	top:0px;
	background: url('../images/paging_arrow_right_disabled.gif') right 9px no-repeat;
	padding-right: 16px;
	margin-right: 9px;
	height: 29px;
	line-height: 29px;
	/* // 16/09/21 PR2952.4 IL - PAGING STYLES - make it MORE GREY by using transparency */
	opacity:0.5;
}

a.paging_prev {
	position:absolute;
	left:0px;
	top:0px;
	background: url('../images/paging_arrow_left_enabled.gif') left 9px no-repeat;
	/* // 16/09/21 PR2952.4 IL - PAGING STYLES - make it MORE GREY by using transparency */
	opacity:1;
}

a.paging_next {
	position:absolute;
	right:0px;
	top:0px;
	background: url('../images/paging_arrow_right_enabled.gif') right 9px no-repeat;
	/* // 16/09/21 PR2952.4 IL - PAGING STYLES - make it MORE GREY by using transparency */
	opacity:1;
}

.paging_middle {
  /* PR3227 - absolutely center paging_middle like paging_prev/paging_next, otherwise it sits flush-left and overlaps the Prev link */
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  height: 29px;
  line-height: 29px;
  text-align: center;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.paging_middle span {
}

.paging_middle a {
	float:left;
}

.paging_middle .divider {
  padding: 0 3px;
/*   padding-left: 3px;
  padding-right: 3px;
  position: relative;
  top: 9px;
	height:10px;
	margin-left:5px;
	margin-right:5px;
	border-left: 1px solid #888;
	float:left; */
}

/* PR3121 */
.save-later-bottom {
  line-height: 29px;
  text-align: center;
	width: max-content;
	margin: auto;
  display: flex;
  align-items: center;
}

/* BUTTON
-----------------------------------------------------------------------------*/
.login-button {
  background-color: #4795d6;
  moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  border: 1px solid #478;
  padding: 0.3em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  color: white;
  font-family: arial;
  font-size: 1.5em;
  font-weight: bold;
  cursor: pointer;
  width:80%;
}

.button {
  display: block;
  float: left;
  position: relative;
  height: 24px;
  background: url('../images/button_tile.gif') repeat-x;
  color: #6f6f6f;
  padding-left: 20px;
  padding-right: 19px;
  line-height: 24px;
  font-weight: bold;
  margin-right: 4px;
}

.button .button_left {
  position: absolute;
  left: -2px;
  top: 0;
}

.button .button_right {
  position: absolute;
  right: -2px;
  top: 0;
}

.button:hover {
	text-decoration: none;
}

.button:hover span {
	text-decoration: none;
}


/* FORMS
-----------------------------------------------------------------------------*/

.form_item {
  margin-bottom: 7px;
}

.label {
  font-weight: bold;
  margin-bottom: 3px;
}

input {
  width: 290px;
  height: 22px;
  line-height: 22px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #a9a9a9;
  color: #757474;
  font-family: arial, sans-serif;
  font-size: 9pt;
}

textarea {
  width: 290px;
  height: 100px;
  line-height: 22px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #a9a9a9;
  color: #757474;
  font-family: arial, sans-serif;
  font-size: 9pt;
}

select {
  width: 290px;
  height: 22px;
  line-height: 22px;
  padding-left: 5px;
  border: 1px solid #a9a9a9;
  color: #757474;
  font-family: arial, sans-serif;
  font-size: 9pt;
}

.error_message {
  font-weight: bold;
  color: #db6056;
  margin-top: 10px;
  margin-bottom: 15px;
  list-style: inside;
}

.success_message {
  font-weight: bold;
  color: #47a700;
  margin-top: 10px;
  margin-bottom: 15px;
  list-style: inside;
}


/* FOOTER
-----------------------------------------------------------------------------*/

.footer {
	height: 181px;
	width: 100%;
	background: url('../images/footer_tile.gif') repeat-x;
	text-align: center;
}

.footer_middle {
	width: 940px;
	margin: 0 auto;
}

.footer .links a {
	color: #FFF;
}





/* STICKY FOOTER
-----------------------------------------------------------------------------*/

#wrap {
	min-height: 100%;
}

#main {
	overflow:auto;
  padding: 0px 5px 0px 5px; /* JO - Add padding to left and right so new box-shadows display */
}

.footer {
	position: relative;
	margin-top: -181px;
	height: 181px;
	clear: both;
  font-size: 8pt;
	color: #FFF;
}

.footer .links {
	padding-top: 19px;
	position: relative;
	z-index: 1;
	font-size: 10pt;
}

.footer .divider {
	height: 2px;
	width: 940px;
	background: url('../images/footer_divider.gif') no-repeat;
	margin-top: 18px;
}

.ytt_logo {
  margin-top: 20px;
  margin-bottom: 22px;
}

.ytt_logo div {
	font-size: 8pt;
	margin-bottom: 6px;
}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

/* PR2803 */
		.generic_button {
			background-color: #4795d6;
			moz-border-radius: 1px;
			-webkit-border-radius: 1px;
			border-radius:1px;
			border: 1px solid #478;
			padding:0.3em;
			padding-top:0.5em;
			padding-bottom:0.5em;
			margin-left:auto;
			margin-right:auto;
			margin-top:0.5em;
			margin-bottom:0.5em;
			color:white;
			font-family:arial;
			font-size:1.5em;
			font-weight:bold;
			cursor:pointer;
		}
		.generic_button:hover {
			background-color:#67a5f6;
		}
		.generic_button a {
			color:white;
			text-decoration:none;
		}
		.generic_button a:link,visited,hover {
			color:white;
			text-decoration:none;
		}

		.generic_button_white {
		  background-color: #fff;
			border:1px solid #999;
			color:#777;
			font-size:0.9em !important;
		}
		.generic_button_white:hover {
			background-color:#f0f0f0;
		}
		.generic_button_white a {
			color:#777;
			text-decoration:none;
		}
		.generic_button_white a:link,visited,hover {
			color:#777;
			text-decoration:none;
		}


    .other_buttons_container a:nth-child(2n) {  /* PR3033 - elements 2,4,6,8 etc not just the 2nd one */
      margin-left:10px;
    }
    .other_buttons_container a {
      display: block;
      float: left;
      width: 49%;
    }

    .other_links_button {
      background-color: white;
      color:#4795d6;
      border:1px solid #4795d6;
      border-radius: 5px;
      font-size: 12px;
      font-weight: 700;
      font-family: Open Sans,sans-serif;
      height:36px;
      padding:0 16px;
      display:inline-block;
      text-transform:uppercase;
      letter-spacing:0;
      transition: background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
      outline: none;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      line-height: 36px;
      vertical-align: middle;
      margin-top:10px;
      width: 86%;
      word-wrap: break-word;
      overflow: hidden;
    }

    .other_links_button:hover {
      color:white !important;
      background-color:#4795d6 !important;
    }

    /* 28/10/24 PR3142 IL - MTA Login button - make it RED and white when hover - it will stand out better */
    .mta_login_button {
      color:white !important;
      background-color:rgb(228, 41, 27) !important;
      border: 1px solid rgb(228, 41, 27) !important;
    }

    .mta_login_button:hover {
      background-color: white !important;
      color:rgb(228, 41, 27) !important;
      border: 1px solid rgb(228, 41, 27) !important;
    }


    /* PR3038 */
    .button-submit{ cursor:pointer; padding-left:20px;padding-right:20px;height:22px;font-weight:bold;
                    background-image: linear-gradient(#fff,#eee);color:#787878;border:1px solid #b9b9b9;border-radius:3px;margin-top:13px;margin-bottom:10px;font-size:12px;font-family:arial;
                    float: left; margin-right: 20px; }
    .button-submit:hover { text-decoration:underline; }
    .button-submit:disabled { text-decoration:none; color:#aaa;cursor:default; }
    .button-submit img {position: relative; top: 2px; margin-right: 3px; }


    /* PR3048 - consistent style for Employee name at top of iframe requests */
    .iframe_head_1 {
      letter-spacing:0px;font-size:13px;font-weight:bold;color:#676767;margin-bottom:2px;margin-top:10px;
      float:left;width:192px;
    }
    .iframe_head_2 {
      letter-spacing:0px;font-size:13px;font-weight:bold;
      color:#4795d6;
      margin-bottom:2px;margin-top:10px;
      float:left;
      margin-left:20px;
    }
    /* PR3070 - change the format of the header to show actions - then date */
    .iframe_head_empname {
      font-size:20px !important;
      font-weight:bold !important;
      margin-top:15px;
      margin-bottom:10px;
    }
    .iframe_head_action {
      letter-spacing:0px;font-size:13px;font-weight:bold;
      color:#4795d6;
      margin-bottom:2px;margin-top:10px;
      float:left;
      width:440px;
      min-height:17px;
    }
    .iframe_head_action li {
      margin-left:30px;
      font-weight:normal;
    }
    .iframe_head_date {
      letter-spacing:0px;
      font-size:12px;
      font-weight:normal;
      color:rgb(90,90,90);
      margin-bottom:2px;margin-top:10px;
      float:left;
      margin-right:10px;
      min-height:17px;
      width:145px;
    }
    .iframe_head_wide {
      letter-spacing:0px;font-size:13px;font-weight:bold;
      color:#4795d6;
      margin-bottom:2px !important;
      margin-top:10px !important;
      float:left;width:600px;
      min-height:17px;
    }

    .whatsnew_popup {
      background:#db6056;
      border-radius:10px;
      color:white;
      margin-top:20px;
      padding:10px;
    }
    .whatsnew_popup .heading {
      color:white;
      font-weight:bold;
      font-size:14px;
    }
    .whatsnew_popup li {
      margin-left:20px;
    }
    .whatsnew_popup .button {
      margin-top:5px;
      padding:5px;
      padding-left:20px;
      padding-right:20px;
      background:white;
      font-weight:bold;
      border-radius:10px;
      color:#db6056;
      border:2px solid #db6056;
      cursor:pointer;
      width: max-content; /* PR3095 - Set a width */
    }
    .whatsnew_popup .button:hover {
      color:white;
      background:#db6056;
      border:2px solid white;
    }

    .generic-overlay-container {
      position: fixed;
      /* Stay in place */
      z-index: 99999;
      /* Sit on top */
      padding-top: 100px;
      /* Location of the box */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: black;
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.9);
      /* Black w/ opacity */
      text-align: center;
    }
    .generic-overlay-container-inner {
      background:white;
      border-radius:10px;
      padding:20px;
      width:80%;
      margin:auto;
    }


.logo {
  float: left;
}

.logo-img {
  background: url('../images/logo.png') no-repeat;
  display: inline-block;
  width: 460px;
  height: 103px;

}

#remember-pw-text {
  float:left;
  padding-top:0.3em;
  padding-left:0.5em;
  cursor:pointer;
}


#remember-pw-section {
  width:12.5em;
  margin-left:auto;
  margin-right:auto;
}

.button-submit{ cursor:pointer; padding-left:20px;padding-right:20px;height:24px;font-weight:bold;background-image: linear-gradient(#fff,#eee);color:#787878;border:1px solid #b9b9b9;border-radius:3px;margin-top:13px;margin-bottom:10px;font-size:12px;font-family:arial;}
.button-submit:hover { text-decoration:underline; }
.button-submit:disabled { text-decoration:none; color:#aaa;cursor:default; }


.info {
  width: 25px;
  height: 25px;
  background: url("../images/personal_details_icon.png") no-repeat;
  background-size: contain;
  margin-left: 20px;
  margin-top: 6px !important;
}

.link:nth-child(2) {
  border-radius: 0 0 0 15px;
}

.link:nth-child(6) {
  border-radius: 0 0 15px 0;
}

.icon-calendar {
  background: url('../images/calendar.gif') no-repeat;
  width: 18px;
  height: 18px;
  display: inline-block;
}