/*
// BuRPS (Budgeting Rostering and Payroll System)
// (c) YTT Solutions Pty. Ltd. Australia
//
// Build    Date      PR      Comment
// 1.0.39   19/01/12  PR1877  IL - change pt to px
// 1.0.73   06/01/16  PR2604  IL - added generic_button with rounded corners
// 1.0.79   28/01/20  PR2848  IL - rounded buttons - newer style like on the Pub Hols Help popup
// 1.0.82   20/01/21  PR2919  IL - add 'selected' option for generic button so we can show which is the selected one (e.g. on Totals - All Week/One Day)
//                               - add Date formatting for date dislay with calendar/arrows etc
//                               - add generic classes for first aid and food safety icons
// 1.0.82   13/08/21  PR2951  IL - add SELECT styles to make background white and border grey, to match input boxes (firefox put default grey background on them)
//                               - added widht:100px on generic button but this breaks things so remove it again
// 1.0.82   02/09/21  PR2952  IL - add new button styles from REskin
// 1.0.84   12/02/22  PR2978  IL - add mini-menu-button style (for Users Setup screen)
// 1.0.83   05/12/21  PR2980  IL - set height:auto on generic_button (RESKIN)
// 1.0.84   28/07/22  PR3022  JO - Add styles for simple loading spinner
// 1.0.85   25/05/23  PR3079  IL - add style for setup_yttadmin_restrictions - showing CRM restrictions at top of Setup Pages
// 1.0.85   12/02/24  PR3116  IL - loading spinner to appear INSIDE a button - make it WHITE and add margins etc so it centers
// 1.0.85   21/02/24  PR3114  IL - added loading-spinner style when its inside a .button class
// 1.0.88   30/07/26  PR3238  RO - dp_displayed_date - truncate long custom template names with ellipsis
*/

body {
  font-family:arial;
  font-size:12px;
  margin-top:5px;
  margin-left:10px;
  color:#333;
}

input {
	color:#333;
}

select {
	color:#333;
	border:1px solid #8f8f9C;
	background-color:white;
}

a {
  color:#37469C;
  text-decoration:none;
}

a:link {
  color:#37469C;
  text-decoration:none;
}
a:visited {
  color:#37469C;
  text-decoration:none;
}
a:hover {
  color:#37469C;
  text-decoration:underline;
}

.topright {
  float:right;
  margin-top:10px;
  margin-right:50px;
}

.topright_nomargin {
  float:right;
  margin-right:50px;
}

.topright_extreme {
  float:right;
  margin-right:5px;
}

/* PR2989 - Add absolute option to the topright elements */
.topright_absolute {
  position: absolute;
  top: 10px;
  right: 50px;
}

h1 {
  font-family:tahoma;
  font-size:20px;
  font-weight:bold;
  margin-top:10px;
  margin-bottom:5px;
}

h2 {
  font-family:arial;
  font-size:18px;
  font-weight:bold;
  font-style:italic;
  margin-top:10px;
  margin-bottom:5px;
}

h3 {
  font-family:arial;
  font-size:12px;
  font-weight:bold;
  font-style:italic;
  margin-top:2px;
  margin-bottom:2px;
}

/* STAFF PAGES
--------------------------------------------------------------------------*/

#left_col {
  float: left;
  margin-right: 20px;
  width: 219px;
}

#right_col {
  float: left;
}

.top_msg {
  color: #308020;
  font-size: 12px;
  font-weight: bold;
  padding: 2px;
  height:20px;
}
.top_msg.error_msg {
  color:#db6056;
}


/* OPTIONS Text at top of screens - green and red for on and off
--------------------------------------------------------------------------*/
.option_green {
	color:#005500;
}
.option_red {
	color:#992222;
}


/* ================ A link to set report options - with icon =========== */
.choose_options_link {
	font-weight:bold;
	padding-left:23px;
	background:url('../images/icons/choose_options.png');
	background-position:0 0px;
	background-repeat:no-repeat;
	padding-bottom:2px;
}


/* ==== PR2604 - ROUNDED-CORNER BUTTON ===== */
.generic_button {
  height: auto; /* PR2980 */
  background-color: #6EB9D7;
  moz-border-radius: 3px;
  -webkit-border-radius:3px;
	border-radius:3px;
  border: 1px solid #019AB9;
  padding:2px;
	padding-left: 5px;
	padding-right: 5px;
	color:white;
	font-family:arial;
	font-size:11px;
	font-weight:bold;
	cursor:pointer;
}
.generic_button:hover, .generic_button.selected {
  background-color:#88D3ED;
}
.generic_button a {
  color:white;
	text-decoration:none;
}
.generic_button a:link, .generic_button a:visited, .generic_button a:hover {
  color:white;
	text-decoration:none;
}


/* -- PR2848 - rounded buttons - newer style like on the Pub Hols Help popup */

	.round_button {
	  height:20px;
		width:200px;
		border-radius:5px;
		text-align:center;
		padding-top:5px;
		padding-bottom:3px;
		padding-right:2px;
		margin:5px;
		cursor:pointer;
	}
	.button_green {
		border:1px solid #48b554;;
	  background:#48b554;
		color:white;
		font-size:14px;
		font-weight:normal;
		font-family:arial;
	}
	.button_green:hover {
		color: #48b554;
		background:white;
	}
	.button_blue {
		border:1px solid #2d8fe6;
	  background:#2d8fe6;
		color:white;
		font-size:14px;
		font-weight:normal;
		font-family:arial;
	}
	.button_blue:hover {
		color: #2d8fe6;
		background:white;
	}
	.button_red {
		border:1px solid #df7a62;
	  background:#df7a62;
		color:white;
		font-size:14px;
		font-weight:normal;
		font-family:arial;
	}
	.button_red:hover {
		color: #df7a62;
		background:white;
	}


/* PR2952 - add new button styles */

.form-button-success {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
  white-space: nowrap;
  color: #ffffff;
  background: #51bf9a;
  cursor: pointer;
  padding: 0.65em 1.25em;
  margin: 0 10px 0 0 !important;
  border: 2px solid #51bf9a;
  border-radius: 2px;
  transition: 0s;
  margin-top: 15px !important;
}
.form-button-success:hover {
  border: 2px solid #51bf9a;
  background: #ffffff;
  color: #51bf9a;
}
.tfa_div {
  width: 50%;
  float: left;
}



/* ------------------------------------------------------
    Date Display in the Date Picker, all pages
   ------------------------------------------------------ */
#dp_displayed_date {
	font-weight: bold;
	float: left;
	margin-top:1px;
	text-align:center;
	height:18px;
	overflow:hidden;
	/* PR3238 RO - truncate long custom template names with ellipsis */
	white-space:nowrap;
	text-overflow:ellipsis;
}
#dp_date_and_cal {
	float:left;
	cursor:pointer;
}
#dp_calendar_icon {
	float:left;
	width:17px;
	height:15px;
	margin-left: 3px;
	cursor:pointer;
}
.dp_week_num {
	color:#0066CC;
}


/* Prev Week and NExt Week arrows */
.dp_prev_disabled {
	float: left; margin-right: 5px; cursor: default;
	width:14px;height:15px;
	background:url('../images/dp_prev_grey.gif');
}
.dp_prev_arrow {
	float: left; margin-right: 5px; cursor: pointer;
	width:14px;height:15px;
	background:url('../images/dp_prev.gif');
}
.dp_next_disabled {
	background:url('../images/dp_next_grey.gif');
	width:14px;height:15px;
	float:right; margin-left: 5px; cursor: default;
}
.dp_next_arrow {
  background:url('../images/dp_next.gif');
	width:14px;height:15px;
  float:right; margin-left: 5px; cursor: pointer;
}



/* Standalone Calendar Icon - for use where we put a calendar icon outside the normal Date Picker include */
.calendar-icon {
  background: url('../images/calendar_icon.gif') no-repeat;
  width: 17px;
  height: 17px;
  cursor:pointer;
  display:block;
}


/* PR2919 - icons for first-aid and food safety - on visual and on Staff Setup */
.icon_first_aid {
  background:url(../images/icons/icon-first-aid-dark.png);
	height: 16px;
  width: 16px;
  background-size: contain;
}

.icon_food_safety {
	background:url(../images/icons/icon-food-safety-dark.png);
	height: 16px;
  width: 16px;
  background-size: contain;
}


/* 1.0.84   12/02/22  PR2978  IL - add mini-menu-button style (for Users Setup screen) */
/* This is the 3-dots menu button */
.mini-menu-button {
  height:15px;
  width:15px;
  display:inline-block;
  float:left;
  background:url(../icons/icon-menu-keyline-grey.svg);
  opacity:0.8;
}
.mini-menu-button:hover {
  background:url(../icons/icon-menu-grey.svg);
  opacity:1;
  cursor:pointer;
}


/************************************************************
// PR2987 - add generic SLIDER class into general_content.css
// it was in staff_setup_right_personal.css but move into here because might want to reuse it on other pages
************************************************************/

.toggle-div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 35px;
}

 /* The switch - the box around the slider */
 .switch {
  position: relative;
  top:3px;
  display: inline-block;
  width: 30px;
  height: 17px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: #4ED164;
}

input:focus + .slider {
  box-shadow: 0 0 1px #4ED164;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* PR3022 - Loading Spinner */
.loading-spinner {
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  border-radius: 50%;
  animation: spinner 1.5s linear infinite;
  width:15px;
  height:15px;
}

.button .loading-spinner { /* added in PR3114 */
  height: 10px;
  width: 10px;
  float: right;
  margin-left: 5px;
  margin-top: 2px;
}

/* PR3116  - loading spinner to appear INSIDE a button - make it WHITE and add margins etc so it centers in a MEDIUM button b-med */
.button .loading-spinner {
  margin-left:10px;
  float:right;
  border-top:2px solid white;
  border-right:2px solid white;
  margin-top:3px;
  margin-left:10px;
  width:10px;
  height:10px;
}

/* PR3022 - Styling for loading spinner to appear next to a link/button */
.loading-inline {
  height: 10px;
  width: 10px;
  float: right;
  margin-left: 5px;
  margin-top: 2px;
}
/********
Animation
********/
@keyframes spinner {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
/* PR3079 - showing restrictions from CRM at top of setup screens */
/* PR3231 - change z-index to 999999 */
.setup_yttadmin_restrictions {
  border:2px solid #c60b19;
  background: #ff6677;
  border-radius:10px;
  color:white;
  font-weight:bold;
  width:calc(100% - 100px);
  max-width:800px;
  position:absolute;
  z-index:999999;
  top:5px;
  left:50px;
  padding:10px;
  font-size:14px;
  text-align:left;
}

/* define this here for closing the setup crm restrictions */
.setup_restrictions_popup_cross {
	position:absolute;
	z-index:5;
	right:0px;
  top:4px;
  background: url('../images/grey_delete.gif') no-repeat;
  width: 15px;
  height: 15px;
  cursor:pointer;
}