@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Bold.eot');
    src: url('../fonts/AvenirNext-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Bold.woff') format('woff'),
        url('../fonts/AvenirNext-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-BoldItalic.eot');
    src: url('../fonts/AvenirNext-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-BoldItalic.woff') format('woff'),
        url('../fonts/AvenirNext-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-DemiBold.eot');
    src: url('../fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-DemiBold.woff') format('woff'),
        url('../fonts/AvenirNext-DemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Heavy.eot');
    src: url('../fonts/AvenirNext-Heavy.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Heavy.woff') format('woff'),
        url('../fonts/AvenirNext-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Medium.eot');
    src: url('../fonts/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Medium.woff') format('woff'),
        url('../fonts/AvenirNext-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Regular.eot');
    src: url('../fonts/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Regular.woff') format('woff'),
        url('../fonts/AvenirNext-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-MediumItalic.eot');
    src: url('../fonts/AvenirNext-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-MediumItalic.woff') format('woff'),
        url('../fonts/AvenirNext-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-DemiBoldItalic.eot');
    src: url('../fonts/AvenirNext-DemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-DemiBoldItalic.woff') format('woff'),
        url('../fonts/AvenirNext-DemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Avenir Next';
    src: url('../fonts/AvenirNext-Italic.eot');
    src: url('../fonts/AvenirNext-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/AvenirNext-Italic.woff') format('woff'),
        url('../fonts/AvenirNext-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* --- Avenir LT --- */

@font-face {
font-family: 'Avenir LT Std';
font-style: normal;
font-weight: 900;
src: local('Avenir LT Std 95 Black'), url('fonts/AvenirLTStd-Black.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: normal;
font-weight: normal;
src: local('Avenir LT Std 45 Book'), url('fonts/AvenirLTStd-Book.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: normal;
font-weight: 700;
src: local('Avenir LT Std 85 Heavy'), url('fonts/AvenirLTStd-Heavy.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: normal;
font-weight: 300;
src: local('Avenir LT Std 35 Light'), url('fonts/AvenirLTStd-Light.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: normal;
font-weight: 600;
src: local('Avenir LT Std 65 Medium'), url('fonts/AvenirLTStd-Medium.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: normal;
font-weight: 500;
src: local('Avenir LT Std 55 Roman'), url('fonts/AvenirLTStd-Roman.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: italic;
font-weight: 900;
src: local('Avenir LT Std 95 Black Oblique'), url('fonts/AvenirLTStd-BlackOblique.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: italic;
font-weight: normal;
src: local('Avenir LT Std 45 Book Oblique'), url('fonts/AvenirLTStd-BookOblique.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: italic;
font-weight: 700;
src: local('Avenir LT Std 85 Heavy Oblique'), url('fonts/AvenirLTStd-HeavyOblique.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std 35';
font-style: italic;
font-weight: 300;
src: local('Avenir LT Std 35 Light Oblique'), url('fonts/AvenirLTStd-LightOblique.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: italic;
font-weight: 600;
src: local('Avenir LT Std 65 Medium Oblique'), url('fonts/AvenirLTStd-MediumOblique.woff') format('woff');
}


@font-face {
font-family: 'Avenir LT Std';
font-style: italic;
font-weight: 500;
src: local('Avenir LT Std 55 Oblique'), url('fonts/AvenirLTStd-Oblique.woff') format('woff');
}
*, body {font-family: 'Avenir LT Std', 'Avenir Next', Arial; font-size: 8.5pt; line-height: 1.5;}
a {text-decoration:none; color: #466CF9; }
a:hover {text-decoration:none;}
.bodytext {font-size: 8.5pt; line-height: 1.4; color:#5D5D5D;}

input, select, textarea
{
	border: 1px solid #9c9b9b;
	border-radius: 3px;
	padding: 4px;
	background-color: #FFF;
	box-sizing: content-box;
}

textarea {
	min-height: 90px;
}

body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}

input[type='checkbox'].styled {
	display: none;
}
input[type='checkbox'].styled + label:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 19px;
	height: 19px;
	background-image: url(images/checkbox_off.png);
  cursor: pointer;
}
input[type='checkbox'].styled:checked + label:before {
	background-image: url(images/checkbox_on.png);
}

:focus {
	outline: none;
	box-shadow: 0px 0px 0px 2px #FF981D;
}

a > img {
	display: inline-block;
	vertical-align: middle;
}

select.oval, input.oval {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	border-radius: 14px;
	height: 28px;
	padding: 0px 10px;
	outline: none;
	box-sizing: border-box;
	border: solid 2px #FFF;
	box-shadow: none;
}

select.oval:focus, input.oval:focus {
	border-color: #FF981D; /*#5C7DE0;*/
}

select.client {
  background-color: #64656A;
	border: solid 2px #64656A;
  color: #FFF;
  width: 160px;
  margin-left: 4px;
}

select.location {
  background-color: #64656A;
	border: solid 2px #64656A;
  color: #FFF;
  width: 160px;
}

select.status {
  background-color: #64656A;
	border: solid 2px #64656A;
  color: #FFF;
  width: 160px;
  max-width: 160px;
}

input.toggle {
	display:none;
}

input.toggle + label {
	width: 36px;
	height: 18px;
	background-color: #4E5468;
	border-radius: 9px;
	vertical-align: middle;
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-right: 6px;
	margin-left: 6px;
}

input.toggle + label:after{
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: #DD314E;
	position: absolute;
	top: -3px;
	left: 0%;
	margin-left: -6px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
	cursor: pointer;
}

input.toggle:checked + label:after {
	background-color: #4AC661;
	left: 100%;
	margin-left: -18px;
}


table#basetable {
	position: fixed;
	top: 0px;
	background-color: #FFF;
  z-index: 10;
}

table#basetable + * {
	margin-top: 150px;
}

.centeredContents {
	text-align: center;
}

.relative {
  position: relative;
}

.floatRight {
  float: right;
}

.floatLeft {
  float: left;
}

.clear {
  clear: both;
}

.noOverflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* START Main menu button classes ---------------------------------------------- */

.toolbar {
	background-color: #202126;
	height: 54px;
	width: 100%;
	border: none;
}

.toolbar.filterbar {
	height: 78px;
}


.toolbar a[id]:not(.highlightf) {
	width: 32px;
	height: 32px;
  background-size: 60%;
	vertical-align: middle;
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #454A59;
	margin: 3px 5px;
	border-radius: 2px;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
  cursor: pointer;
}

.toolbar a[id]:not(.highlightf):hover {
	background-color: #585F72;
	-webkit-transition: all .1s ease;
	-o-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all .1s ease;
}

a.imageButton,
a.imageButton > * {
	vertical-align: middle;
	display: inline-block;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}

#butNewSimple { background-image: url(../images/icon_new_shift.svg); margin-left: 10px;
          background-size: 50%; }
#butNewEmployee { background-image: url('../images/icon_add_employee.svg'); margin-left: 10px;
                  background-size: 28px auto;}
#butNewEmployeeCandidates{background-image: url('../images/icon_plus.svg'); margin-left: 10px;
                  background-size: 20px auto;}
#butNew { background-image: url('../images/icon_new_advanced.png'); }
#butExport { background-image: url('../images/icon_new_import.svg'); }
#butImport { background-image: url('../images/icon_new_export.svg'); }
#butConfirm { background-image: url('../images/icon_bulk_confirm.svg'); }
#butCopy { background-image: url('../images/icon_copy.svg');
          background-size: 50%; }
#butCopyWeeks { background-image: url('../images/icon_copy.svg');
          background-size: 50%; }
#butReload { background-image: url('../images/icon_reload.svg'); }
#butDelete { background-image: url('../images/icon_menu_delete.svg'); cursor: pointer; }
#butCancel { background-image: url('../images/icon_by_client.svg'); cursor: pointer; }
#butReassign { background-image: url('../images/icon_menu_reassign.svg'); }
#butReinstate { background-image: url('../images/icon_menu_reinstate.svg'); }
#butSend { background-image: url('../images/icon_menu_send.svg'); }
#butText { background-image: url('../images/icon_menu_text.svg');
            background-size: 38% auto;}
#butTextOff { background-image: url('../images/icon_menu_text_off.png'); }
#butSend2 { background-image: url('../images/icon_menu_send2.svg');
            background-size: 30px auto; }
#butTop { background-image: url('../images/icon_menu_top.svg');
          background-size: 33% auto; }
#butShare { background-image: url('../images/icon_share.svg');
          background-size: 50% auto; }
#butHotel { background-image: url('../images/icon_hotel.svg');
          background-size: 50% auto;
          background-position-y: 2px; }
#butHighlight { background-image: url('../images/highlight_icon.svg'); }
#butHotlist { background-image: url('images/icon_flame.svg'); }
#butAutoBook {
    background-image: url('images/auto_book_icon.svg');
    background-size: 21px auto;
}
#butSupplierReject { background-image: url('../images/icon_cross.svg');
  background-size: 15px auto;
}
#butGroup { background-image: url('../images/icon_group.svg');
          background-size: 50% auto;
          background-position-y: 7px; }

#butUpdate { background-image: url('../images/icon_bulk_update.svg');
             background-size: 43% auto;
             background-position: 23px 15px; }
#butUpdateAvailability {
             background-image: url('images/bulk_availability_icon.svg');
             background-size: 20px;
           }

#butText3 { background-image: url('../images/icon_menu_text.svg');
            background-size: 38% auto;}
#butSend3 {
  background-image: url('../images/icon_menu_send.svg');
  background-repeat: no-repeat;
  background-position: center 4px;
}
#butDelegate {
  background-color: #454A59;
  cursor: pointer;
}

#sign_in {display: block; width: 118px; height: 50px; background: url('../images/icon_sign_in.png') no-repeat 0 0;}
#sign_in:hover {background-position: 0 -23px; background: url('../images/icon_sign_in_hover.png') no-repeat 0 0;}
#sign_in:active {background-position: 0 -23px; background: url('../images/icon_sign_in_down.png') no-repeat 0 0;}
#sign_in span {position: absolute; top: -999em;}

#butReload_alert {display: block; width: 38px; height: 38px; background: url('../images/icon_reload_alert.png') no-repeat 0 0; padding-right:10px;}
#butReload_alert:hover {background-position: 0 -23px; background: url('../images/icon_reload_hover_alert.png') no-repeat 0 0;}
#butReload_alert:active {background-position: 0 -23px; background: url('../images/icon_reload_down_alert.png') no-repeat 0 0;}
#butReload_alert span {position: absolute; top: -999em;}

.toolbar img,
a.highlightf,
a.highlightf img {
	vertical-align: middle;
}

.toolbar td.last {
	text-align: right;
	padding-right: 10px;
}

/* END Main menu button classes ---------------------------------------------- */

.tabsRow .inner {
  position: relative;
}

.tabsContainer {
  padding-left: 200px;
  position: absolute;
  bottom: 100%;
  /*margin-bottom: 4px;*/
  width: 170vw;
  box-sizing: border-box;
  min-width: 938px;
}

@media screen and (max-width: 1880px){
  .tabsRow .inner {
    padding-top: 40px;
  }

  .tabsContainer {
    bottom: 0px;
  }
}

tr.tabsRow .tabsContainer {
  margin-bottom: 4px;
}

.tabsContainer .tab {
  min-width: 154px;
  border: none;
  background-color: rgba(32,33,38,0.4);
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px 6px;
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 0px 5px;
  cursor: pointer;
  vertical-align: bottom;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

.tabsContainer .tab:hover {
  background-color: rgba(32,33,38,0.6);
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

.tabsContainer .tab.on {
  background-color: rgba(32,33,38,1);
  cursor: default;
}

.prevButContainer, .nextButContainer {
  padding-left: 10px;
  padding-right: 10px;
}

.prevImageButton, .nextImageButton{
    top: 10px;
    position: relative;
}

.prevImageButtonAvailTime, .nextImageButtonAvailTime{
    top: 7px;
    position: relative;
}

#butPrevWeek, #butNextWeek{
  position: absolute;
  height: 32px;
  width: 7px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -16px;
  cursor: pointer;
  opacity: 1;
  transition: all .3s ease, color .3s linear, background .3s linear;
}

#butPrevWeek{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-left: -12px;
}

#butNextWeek{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-left: -15px;
}

#butPrevWeek:hover,
#butNextWeek:hover {
  background-color: #636a79;
  opacity: 1;
  transition: all .1s ease, color .1s linear, background .1s linear;
}

.ui-widget input {
	font-family: inherit;
}

.button,
input.buttons + label,
.shift_table_sub_header .bankholiday {
	font-size: 14px !important;		/* important! to override jqueryui defaults in dialogs */
	font-weight: 600;
	color: #FFF;
	padding: 8px 12px;
	background-color: #4ac661;
	display: block;
	border: none;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
	text-decoration: none;
	border-radius: 4px;
	text-align: center;
	margin: 4px 5px;
	vertical-align: middle;
	cursor: pointer;
}

.button.blue.inline.small.icon.iconLeft {
  padding-left: 7px;
}

p.button {
  cursor: default;
}

.skills-quantity span {
  display: block !important;
  margin-left: -6px !important;
  width: 23px !important;
  text-align: center !important;
}

.button.small,
input.buttons.small + label,
.shift_table_sub_header .bankholiday {
  padding: 3px 6px;
	font-size: 12px !important;
	font-weight: 500;
}

button.very.small {
  padding: 1px 4px;
}

button.link {
  border: none;
  /*color: inherit;*/
  background-color: transparent;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

button.link.withIcon {
  text-decoration: none;
}

.button.icon {
  background-position: center;
  background-repeat: no-repeat;
  min-width: 20px;
}
.button.not-set-button{
  height: 24px;
}
.button.grey:not(.on),
input.buttons[type='radio'] + label {
  background-color: #BCBCBC;
  color: #FFF;
}

.button.veryDarkGrey:hover:not(:disabled) {
    background-color: #A3A3A3 !important;
}

.button.veryDarkGrey.on,
input.buttons[type='radio'] label {
    background-color: #808080;
    color: #FFF;
}

.button.toolbarGrey:hover:not(:disabled) {
    background-color: #585F72 !important;
    color: #FFF;
}

.button.pink:hover:not(:disabled) {
    background-color: #ce80c7 !important;
}

.button.pink.on,
input.buttons[type='radio'] label {
    background-color: #AD3BA3;
    color: #FFF;
}

.button.magenta:hover:not(:disabled) {
    background-color: #ce80c7 !important;
}

.button.magenta.on,
input.buttons[type='radio'] label {
    background-color: #D179C4;
    color: #FFF;
}

.button.grey.none {
  opacity: 0.4;
  color: #FFF;
}

.button.grey.light {
  background-color: #E4E4E4;
  color: #FFF;
}

.button:disabled,
input.buttons[type='radio']:disabled + label {
	opacity: 0.4;
  cursor: default;
}

td.shift_table input[type='text']:disabled:not(.time):not(.disabledBox),
td.shift_table input[type='number']:disabled:not(.disabledBox){
  opacity: 1;
  margin: 0px;
  min-width: 90px;
  border: none;
  padding: 0px;
  background-color: transparent;
  text-overflow: ellipsis;
}

td.shift_table input:disabled.disabledBox{
  background-color: #E9E9E9;
}

td.shift_table input[type='text'][size='8']:disabled,
td.shift_table input[type='text'][size='1']:disabled {
  min-width: 0px;
}

td.shift_table input[type='number'][maxlength='4'] {
  width: 42px;
  min-width: 0px !important;
}

td.shift_table input[type='number'][size='6'] {
  width: 50px;
  min-width: 0px !important;
}

td.shift_table input[type='number'][size='12'] {
  width: 90px;
  min-width: 0px !important;
}

.ui-widget-content a.button {
	color: #FFF;	/* important! to override jqueryui defaults in dialogs */
}

.button[type='submit']:not(.noresize),
.button[value='Reset Rates']{
	margin-top: 10px;
}

.button.noresize {
	display: inline-block;
}

input.buttons[type='radio'] {
  display: none;
}

.inline,
input.buttons[type='radio'] + label {
  display: inline-block;
}

.strong,
td.shift_table.strong {
  font-weight: 600;
}

strong {
  font: inherit;
  font-weight: 600;
}

.button:hover:not(:disabled):not(p):not(.red):not(.blue):not(.skyblue):not(.lightBlue):not(.orange):not(.amber):not(.brown):not(.grey):not(.purple):not(.noDefaultHover):not(.icon.filter.greyButton) {
	-webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
	text-decoration: none;
	background-color: #72D285;
}

.button.grey:hover:not(:disabled):not(.on) {
  background-color: #A3A3A3;
}

.button.big {
	font-size: 16px !important;
	padding: 10px;
	min-width: 140px;
	box-sizing: border-box;
}
.black {
	background-color: #202126;
	color: #FFF;
}

.button.black:hover {
	background-color: #40434D;
	color: #FFF;
}

a.button.black {
	color: #FFF !important;
}

.red, .widgetPopupWrapper.red:before, .score.fatiguehigh, .score.riskhigh {
	background-color: #DD314E;
	color: #FFF;
}

.webscore.fatiguehigh, .webscore.riskhigh {
	background-color: #DD314E;
	color: #FFF;
}

.red.light {
  background-color: #E97E90;
}

.button.red:hover:not(:disabled) {
	background-color: #E46076 !important;
}

.redText,
.ragText.R,
.ragText.N,
.fatigueScore.fatiguehigh,
.fatigueScore.riskhigh {
	color: #DD314E;
}

.redTextImportant {
  color: #DD314E !important;
}

.green, button.green.on, .widgetPopupWrapper.green:before, .score.fatiguelow, .score.risklow {
  background-color: #4ac661;
  color: #FFF;
}

.green.planned_button {
  background-color: #338E55;
  color: #FFF;
}

.gray {
    background-color: #BCBCBC;
    color: #FFF;
}

.webscore.fatiguelow, .webscore.risklow {
  background-color: #4ac661;
  color: #FFF;
}

.batched {
  background-color: #389560;
  color: #FFF;
}

.green.light {
  background-color: #9CDFA9;
}

.greenText,
.ragText.G,
.ragText.P,
.fatigueScore.fatiguelow,
.fatigueScore.risklow {
  color: #4ac661;
}

.leftText {
  text-align: left;
}

.whiteBackground {
  background-color: #ffffff !important;
  color: #000000;
}
.greenBackground,
.greenBackground a{
  background-color: #4ac661 !important;
  color: white !important;
}

.amberBackground{
    background-color: #ff981d !important;
    color: white !important  ;
}

.redBackground {
    background-color: #DD314E !important;
    color: white !important;
}
.greyBackground{
    background-color: #BCBCBC !important;
    color: white !important;
}

.blue,
input.buttons[type='radio']:checked + label {
  background-color: #2791E7;
  color: #FFF;
}

.skyblue {
  background-color: #45B2E9;
  color: #FFF;
}

.lightBlue {
    background-color: #B2E0F0;
    color: #FFF;
}

.button.blue:hover:not(:disabled),
input.buttons[type='radio']:not(:disabled) + label:hover {
  background-color: #5BABEC;
}

.button.skyblue:hover:not(:disabled) {
  background-color: #7DC9EE;
}

.blueText {
  color: #2791E7;
}

.skyblueText {
  color: #45B2E9;
}

.lightRed{
  background-color: rgb(228, 96, 118);
}

.purpleStat{
  background-color: rgb(209, 120, 201);
}

.bold {
  font-weight: bold !important;
}

.travelWillingness::-webkit-outer-spin-button,
.travelWillingness::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.travelWillingness[type=number] {
  -moz-appearance: textfield;
}

.travelWillingness:hover {
  background-color: #FFF !important;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) !important;
  transition: box-shadow 0.3s ease-in-out;
}

.travelWillingness {
  width: 100px;
  height: 40px;
  position: relative;
  left: 25px;
  text-align: center;
  border: solid 1px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease-in-out;
}

.travelRange {
  width: 100%;
  border: solid 0px rgba(0,0,0,0) !important;
}

.radiusTime{
 text-align: center;
}

.travelRangeTitle {
  z-index: 1;
  position: absolute;
  left: 40px;
  top: 60px;
  color: #45B2E9;
}

.travelRangeTime{
  text-align: center;
}

.minusIcon:before {
  content: '\002D';
  position: relative;
  top: 4px;
  font-weight: bold;
}

.minusIcon {
  user-select: none; /* standard syntax */
  display: inline-block;
  width: 25px;
  height: 25px;
  color: white;
  border-radius: 15px;
  background-color: #45B2E9;
  cursor: pointer;
  margin-left: 35px;
  font-size: 14px !important;
  line-height: 1.1;
  text-align: center;
  position: relative;
  top: -5px;
}

.plusIcon:before {
  content: '\002B';
  position: relative;
  top: 5px;
  left: 0.5px;
  font-weight: bold;
}
.plusIcon {
  user-select: none; /* standard syntax */
  display: inline-block;
  width: 25px;
  height: 25px;
  color: white;
  border-radius: 15px;
  background-color: #45B2E9;
  cursor: pointer;
  margin-left: 5px;
  font-size: 14px !important;
  line-height: 1.1;
  text-align: center;
  position: relative;
  top: -5px;
}

.plusIconApproveTimeSheet {
  margin-left: 0px !important;
  top: 0px;
}

.travel-range-red {
  color: #DD314E;
}

.travel-range-grey {
  color:  #c6c6c6;
}

.travel-range-green {
  color: #4ac661;
}

.blueclear:before {
  content: '\00d7';
}
.blueclear {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: white;
  border-radius: 10px;
  background-color: #45B2E9;
  cursor: pointer;
  margin-left: 5px;
  font-size: 14px !important;
  line-height: 1.1;
  text-align: center;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #CACACA;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #CACACA;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #CACACA;
}


.orange, .amber, .widgetPopupWrapper.amber:before, .score.fatiguemedium, .score.riskmedium {
	color: #FFF;
	background-color: #ff981d;
}

.webscore.fatiguemedium, .webscore.riskmedium {
	color: #FFF;
	background-color: #ff981d;
}

.amberText,
.ragText.A,
.ragText.S,
.fatigueScore.fatiguemedium,
.fatigueScore.riskmedium {
  color: #ff981d;
}

.button.orange:hover:not(:disabled),
.button.amber:hover:not(:disabled) {
	background-color: #FFB053;
}

.orange:focus {
	box-shadow: 0px 0px 0px 2px #4ac661;
}

.darkGreen {
  background-color: #21A443;
}

.grey {
  background-color: #EEEEEE;
  color: #1F1F1F;
}

.grey2{
  background-color: #5e616d;
}

.greyText {
  color: #BCBCBC;
}

.darkGrey {
  background-color: #BCBCBC;
  color: #FFF;
}

.toolbarGrey {
    background-color: #454A59;
    color: #FFF;
}

.pink {
    background-color: #AD3BA3;
    color: #FFF;
}

.magenta {
    background-color: #D179C4;
    color: #FFF;
}

.veryDarkGrey {
  background-color: #808080;
  color: #FFF;
}

.white {
	background-color: #FFF;
	color: #606060;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.4);
	border: solid 1px rgba(0,0,0,0.2);
}

.white.light,
p.light,
span.light {
	color: #aaaaaa;
}

.button.white:hover:not([disabled]) {
	background-color: #FFF !important;
	box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) !important;
}

.brown {
  background-color: rgba(139, 69, 19, 0.6);
}

.purple, button.purple.on {
  background-color: #b53caa;
  color: #FFF;
}

.purple.light, button.purple.light.on {
  background-color: #D178C9;
  color: #FFF;
}

.button.light {
	font-weight: normal;
}

.icon.phone {
  background-image: url('../images/icon_phone.svg');
  background-size: 14px;
  min-width: 24px;
}

.icon.tick {
  background-image: url('../images/icon_select_white.png');
}
.icon.plus {
  background-image: url('../images/icon_plus.svg');
  background-size: 12px 12px;
  min-width: 24px;
}
.icon.plus2 {
 background-image: url('../images/icon_plus2.svg');
 background-size: 36px;
 min-width: 22px;
 min-height: 22px;
 background-position: center;
 margin-right: -5px !important;
}
.icon.minus2 {
 background-image: url('../images/icon_minus2.svg');
 background-size: 36px;
 min-width: 22px;
 min-height: 22px;
 background-position: center;
}

.icon.filter {
  background-image: url('images/icon_filter_black.svg');
  min-width: 24px;
  background-size: 16px auto;
}

.icon.filter.greyButton {
  background-image: url('images/icon_filter_white.svg');
  background-color: #454A59;
}

.icon.filter.greyButton:hover {
  background-color: #585F72;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

.icon.filter.blue {
  background-image: url('images/icon_filter_white.svg');
}

.icon.filter.small {
  background-size: 12px auto;
  min-width: 22px;
}

.icon.filter.iconLeft {
  background-position: 10px center;
  padding-left: 36px;
}

.icon.arrowUp {
  background-image: url('images/icon_arrow_up_small_white.svg');
  background-size: 16px;
  min-width: 22px;
}

.icon.arrowDown {
  background-image: url('images/icon_arrow_down_small_white.svg');
  background-size: 16px;
  min-width: 22px;
}

.icon.arrowDown.white {
  background-image: url('images/icon_arrow_down_small_black.svg');
  background-size: 8px auto;
}

.icon.printer {
  background-image: url('images/icon_printer_white.svg');
  background-size: auto 16px;
}

.icon.download {
  background-image: url('images/icon_download_report_white.svg');
  background-size: auto 16px;
}

button.icon.iconLeft {
  background-position: 5px 50%;
  padding-left: 26px;
}

.icon.check {
  min-width: 28px;
  min-height: 28px;
  background-size: 26px;
  background-image: url('images/icon_check.svg');
}

.icon.check.on {
  background-image: url('images/icon_check_green.svg');
}

.icon.check.disabled {
  background-image: url('images/icon_check_grey.svg');
}

.icon.help {
  background-image: url('images/icon_help.svg');
  min-width: 18px;
  min-height: 18px;
  background-size: 20px;
}

.icon.employeeSwap {
  background-image: url('images/icon_swap_employee.svg');
  background-size: 30px;
  min-width: 30px;
  min-height: 30px;
}

.icon.refresh {
  /*background-image: url("../images/icon_refresh.svg");
  background-size: 18px;*/
  height: 40px;
  width: 40px;
  /*border-radius: 15px;*/
  position: relative;
}

.icon.refresh:after {
  position: absolute;
  content: '';
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background-image: url('../images/icon_refresh.svg');
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: center;
  /*transition: all 0.5s ease;*/
}

.icon.refresh.busy:after {
  transform: rotate(-1080deg);
  transition: transform 20s ease;
}

.mediumWeight {
	font-weight: 500;
}

.queryerrortitle {font-size: 8.5pt; color: #FF0000; font-weight: bold;}
.queryerrorlabel {font-size: 8.5pt;}
.queryerrortext {font-size: 7.5pt; font-weight: bold;}

.year {font-size:25px; font-weight:bold; color:#333333; padding-left:5px;}

.weektitle,
a.weektitle:link,
a.weektitle:visited,
.weekdate {
	font-size: 16px;
	font-weight: bold;
	color: #202020;
	text-align: center;
	text-decoration: none;
}
.weekdate {
	font-weight: normal;
}
.warning {padding:3px; FONT-SIZE: 14px; COLOR: #000000;}

.verytopright * {
	font-size: 12px;
	font-weight: 500;
}


.sheet_user_dropdown
{
font-size: 12px;
color:#FFFFFF;
background-image:url(../images/dropdown_week_background.png);
-webkit-appearance: none;
width:194px;
height:38px;
border:0;
margin:0;
display:inline;

}


.shift_column_heading {font-size: 7.5pt; color:#FFFFFF;}
a.shift_column_heading:link {font-size: 7.5pt; color:#FFFFFF;}
a.shift_column_heading:hover {font-size: 7.5pt; color:#FFFFFF;}
a.shift_column_heading:visited {font-size: 7.5pt; color:#FFFFFF;}

.shift_data {font-size: 7.5pt; color:#000000;}
a.shift_data:link {font-size: 7.5pt; color:#000000;}
a.shift_data:hover {font-size: 7.5pt; color:#000000;}
a.shift_data:visited {font-size: 7.5pt; color:#000000;}

.shift_data_number {font-size: 7.5pt; color:#000000; padding-left: 5px; padding-right: 5px;}
a.shift_data_number:link {font-size: 7.5pt; color:#000000; padding-left: 5px; padding-right: 5px;}
a.shift_data_number:hover {font-size: 7.5pt; color:#000000; padding-left: 5px; padding-right: 5px;}
a.shift_data_number:visited {font-size: 7.5pt; color:#000000; padding-left: 5px; padding-right: 5px;}



.alert {font-size: 8.5pt; color:#FF0000; }

input.logoutButton {
	border-style:none;
	background-color: transparent;
}

td.dlgalert {
	font-size: 14px;
	font-weight: 600;
	color: #DD314E; /*#129100; */
}

td.dlgalert #copy_succmsg{
  color: #4ac661;
}

td.dlgalert #copy_warmsg{
  color: #ffc107;
}

email_shift_table {
	border: #C8C8C8 solid 1px;
	font-size: 0.8em;
	border-collapse:collapse;
}


table.shift_table, table.fatigue_shift_table {
	border: #C8C8C8 solid 1px;
	font-size: 0.8em;
	border-collapse:collapse;
}

tr.shift_row_odd {
}

tr.shift_row_even {
  background-color: #F5F5F5;
}

tr.shift_start {
  border-top: dotted 1px rgba(0,0,0,0.8);
}

tr.rates_row_odd + tr.rates_row_even,
tr.rates_row_even + tr.rates_row_odd
{
  border-top: dotted 1px rgba(0,0,0,0.5);
}

tr.row_selected {
  background-color: #FFFF99 !important;
}

tr.deleted{
  background-color: #FF989A
}

tr.cancelled{
  background-color: #FF0000
}

.hidden,
tr.hidden{
  display: none;
}

/* Standard Highlights*/
tr.highlight1,
button.highlight1 {
  --base: #C7E2F4;
  background-color: var(--base);
  color: #000;
}

tr.highlight2,
button.highlight2 {
  --base: #C3EBD2;
  background-color: var(--base);
  color: #000;
}

tr.highlight3,
button.highlight3 {
  --base: #FEF968;
  background-color: var(--base);
  color: #000;
}

tr.highlight4,
button.highlight4 {
  --base: #F6CAE9;
  background-color: var(--base);
  color: #000;
}

tr.highlight5,
button.highlight5 {
  --base: #FFD6AA;
  background-color: var(--base);
  color: #000;
}

tr.highlight6,
button.highlight6 {
  --base: #C2F0ED;
  background-color: var(--base);
  color: #000;
}

tr.highlight7,
button.highlight7 {
  --base: #CEC0E7;
  background-color: var(--base);
  color: #000;
}

/* Highlight Variants*/
.hl-variantA {
  --variantA: hsl(from var(--base) h s calc(l - 5));
  background-color: var(--variantA) !important;
}

.hl-variantB {
  --variantB: hsl(from var(--base) h s calc(l - 10));
  background-color: var(--variantB) !important;
}

.hl-variantC {
  --variantC: hsl(from var(--base) h s calc(l - 15));
  background-color: var(--variantC) !important;
}

/* Highlight Variants - Specific for Highlight 3 (Yellow Override)*/
.highlight3.hl-variantA {
  --variantA: hsl(from var(--base) h s calc(l + 15));
  background-color: var(--variantA) !important;
}

.highlight3.hl-variantB {
  --variantB: hsl(from var(--base) h s calc(l + 10));
  background-color: var(--variantB) !important;
}

.highlight3.hl-variantC {
  --variantC: hsl(from var(--base) h s calc(l + 5));
  background-color: var(--variantC) !important;
}

tr.row_selected td {
  background-color: #FFFF99 !important;
}

.overlayText {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  font-weight: bold !important;
}

button.highlight.on,
button.highlight:hover {
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.6);
}

tr.completed{
  background-color: #ABC8B4
}

tr.endofsite{
  background-color: #666666;
  height:15px;
  line-height:1px;
}

td.shift_table {
	border: 1px solid rgba(155,155,155,0.5);
	border-bottom: none;
	border-top: none;
	margin: 0;
	padding: 3px;
	padding: 4px 6px 4px 6px;
	font-size:12px;
	font-weight:normal;
	white-space:nowrap;
}

td.shift_table.greyedOut {
  opacity: 0.25;
}

td.shift_table.wrap,
td.shift_table_header.wrap {
  white-space:normal;
}

tr.sr {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

tr.sr + tr:not(.sr) td {
	border-top: 1px solid rgba(155,155,155,0.5);
}

input.shift_table {
  background-image:url(../images/row_shift_background.png);
}

tr.sr.just_added {
  border-top: solid 3px #4ac661;
  box-shadow: 0px -2px 6px rgba(0,0,0,0.6);
}

tr.sr.just_added + tr.sr.just_added {
  border-top: none;
  box-shadow: none;
}

tr.sr.just_added + tr:not(.just_added) {
  border-top: solid 3px #4ac661;
  box-shadow: 0px 3px 6px rgba(0,0,0,0.6) inset;
}

tr.sr.just_added + tr:not(.just_added) td {
  box-shadow: none;
}

tr .rowAnchor {
  position: absolute;
  display: inline-block;
  height: 0px;
  width: 0px;
  vertical-align: top;
}

tr.sr.just_added .rowAnchor:before {
  content: 'Just Added';
  display: block;
  position: absolute;
  padding: 0px 26px 0px 10px;
  background-color: #4ac661;
  color: #FFF;
  /*
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  */
  border-radius: 4px;
  top: -20px;
  left: 12px;
  background-image: url('images/icon_clear_transparent.png');
  background-position: right 7px bottom 6px;
  background-repeat: no-repeat;
  background-size: 9px;
  z-index: 2;
}

tr.sr.just_added + tr.sr.just_added .rowAnchor:before {
  content: '';
  display: none;
}

.tablescroll tbody input {
margin: 0;
font-size:12px;
font-weight:normal;
white-space:nowrap;
}

td.shift_table_header,
td.shift_table_sub_header {
	border: 1px solid rgba(155,155,155,0.5);
	height: 42px;
	background-color: #DFDFDF;
	margin: 0px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 6px 3px 6px;
	white-space:nowrap;
    -webkit-transition: top .2s ease;
    -moz-transition   : top .2s ease;
    -o-transition     : top .2s ease;
    -ms-transition    : top .2s ease;
    transition        : top .2s ease;
}

td.shift_table_header.light {
  font-weight: normal;
}

td.shift_table_sub_header {
	/*background-image:url(../images/top_row_background_slim.jpg);*/
}


.search_bar {
background-color: #FFFFCC;
}

.search_heading {
font-size:14px;
font-weight:bold;
color:#000000;
padding-right:6px;
}

.search_string {
font-size:12px;
color:#000000;
}

.alert_bar {
  background-color: #dd314e;
  color: #FFF;
  font-weight: 500;
}

table.alert_bar tr td:not(:last-child) {
  background-color: #a82e42; /*#C72C46;*/
  border-radius: 5px;
  font-size: 1.1em;
  width: 0.5%;
  white-space: nowrap;
}

table.alert_bar tr td:last-child {
  display: none;
}

table.alert_bar tr td + td:last-child {
  display: table-cell;
}

.search_clear {font-size:12px; color:#333333; text-decoration:underline; padding-left:6px;}
a.search_clear:link {font-size:12px; color:#333333; text-decoration:underline;}
a.search_clear:hover {font-size:12px; color:#000000; text-decoration:underline;}
a.search_clear:visited {font-size:12px; color:#333333; text-decoration:underline;}



.column_day {font-size: 12px; color:#000000; font-weight:600; text-align:right;}
.column_date {font-size: 12px; color:#000000; font-weight:600; text-align:left;}
.start_finish {
	color:#707070;
	text-align:center;
  font-size: 12px;
  font-weight: 500;
}

.column_day_date_grey {color:#707070 !important;}


.comments_add {font-size: 12px; color:#999999; font-weight:normal;}
a.comments_add:link {font-size: 12px; color:#999999; font-weight:normal;}
a.comments_add:hover {font-size: 12px; color:#000000; font-weight:normal;}
a.comments_add:visited {font-size: 12px; color:#999999; font-weight:normal;}



.sheet {font-size: 12px; color:#B0B0B0;}

.sheet_week {font-size: 14px; color:#B0B0B0; font-weight: 500; }

.sheet_year {font-size: 14px; font-weight:bold; color:#ffffff;}



.login_green {PADDING-TOP: 7px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #427550; LINE-HEIGHT: 20px;}
.login_blue {PADDING-TOP: 7px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #47619B; LINE-HEIGHT: 20px;}

.username {FONT-SIZE: 12px; font-weight:bold; COLOR: #333333; LINE-HEIGHT: 20px;}

.logout {padding-left: 5px; FONT-SIZE: 12px; font-weight:normal; COLOR: #999999; LINE-HEIGHT: 20px;}
a.logout:link {padding-left: 5px; FONT-SIZE: 12px; font-weight:normal; COLOR: #999999; LINE-HEIGHT: 20px;}
a.logout:hover {padding-left: 5px; FONT-SIZE: 12px; font-weight:normal; COLOR: #000000; LINE-HEIGHT: 20px; text-decoration:none;}
a.logout:visited {padding-left: 5px; FONT-SIZE: 12px; font-weight:normal; LINE-HEIGHT: 20px;}

.login_intro {FONT-SIZE: 13px; COLOR: #232323;}
a.login_intro:link {FONT-SIZE: 13px; COLOR: #0000FF;}
a.login_intro:hover {FONT-SIZE: 13px; COLOR: #0000FF;}
a.login_intro:visited {FONT-SIZE: 13px; COLOR: #0000FF;}

.login_problem {FONT-SIZE: 13px; COLOR: #CE2925;}
a.login_problem:link {FONT-SIZE: 13px; COLOR: #CE2925;; text-decoration:underline;}
a.login_problem:hover {FONT-SIZE: 13px; COLOR: #CE2925;; text-decoration:underline;}
a.login_problem:visited {FONT-SIZE: 13px; COLOR: #CE2925;; text-decoration:underline;}

.login_success {FONT-SIZE: 13px; COLOR: #227B38;}

.login_field_label {FONT-SIZE: 13px; COLOR: #232323; font-weight:bold;}

.login_field {padding-top: 3px; padding-bottom: 3px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #408A4D; LINE-HEIGHT: 20px;}

.main_title {PADDING-TOP: 6px; FONT-SIZE: 19.5px; font-weight:bold; COLOR: #8D8D8D; LINE-HEIGHT: 20px;}


.logintitle {padding: 10px; FONT-SIZE: 20px; font-weight:normal; COLOR: #ffffff; LINE-HEIGHT: 20px;}
.loginlabel {padding: 10px; FONT-SIZE: 13px; font-weight:normal; COLOR: #ffffff; LINE-HEIGHT: 20px; display:none;}


.forgottenlabel {padding: 10px; FONT-SIZE: 13px; font-weight:normal; COLOR: #ffffff; LINE-HEIGHT: 20px;}

.login {
	box-sizing: border-box;
	width: 260px;
	font-size: 16px;
	font-weight: normal;
	color: #202020;
	padding: 12px;
	text-align: center;
}

.login:focus {
	box-shadow: 0px 0px 0px 2px #4ac661;
}

.menu_item {PADDING-TOP: 5px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #8D8D8D; LINE-HEIGHT: 20px;}
a.menu_item:link {PADDING-TOP: 5px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #8D8D8D; LINE-HEIGHT: 20px;}
a.menu_item:hover {PADDING-TOP: 5px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #40B045; LINE-HEIGHT: 20px;;  text-decoration:none;}
a.menu_item:visited {PADDING-TOP: 5px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #8D8D8D; LINE-HEIGHT: 20px;}

.tax_year {PADDING-TOP: 10px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #333333; LINE-HEIGHT: 20px;}

.sort {PADDING-TOP: 10px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #9E9E9E; LINE-HEIGHT: 20px;}

.tax_year_dropdown {PADDING-TOP: 10px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #408A4D; LINE-HEIGHT: 20px;}

.problem {PADDING-TOP: 10px; FONT-SIZE: 15.5px; font-weight:bold; COLOR: #D34545; LINE-HEIGHT: 20px;}

.alert {FONT-SIZE: 14px; font-weight:bold; COLOR: #FFFFFF; LINE-HEIGHT: 20px;}

.alert_text {FONT-SIZE: 12px; font-weight:bold; COLOR: #D34545; LINE-HEIGHT: 20px;}

.alertBubble {
  padding: 10px 15px;
  background-color: #DD314E;
  color: #FFF;
  font-weight: 400 !important;
  border-radius: 20px;
  opacity: 1 !important;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
  top: -4px;
  position: relative;
}

a.alertBubble:hover {
  background-color: #B61C37;
}

.alertBubble span {
  font-weight: 700;
}

.alertBubble.close {
  background-color: #4ac661;
}

a.alertBubble.close:hover {
  background-color: #72D285;
}

table.verytop table.verytopright {
  position: relative;
  z-index: 10;
}
.verytop td .top-menu{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-right: 15px;
}
.verytop td .top-menu a{
  margin: 0 10px;
  color: #fff !important;
  opacity: 1 !important;
  padding: 5px;
  transition: 0.3s ease;
  border-radius: 4px;
}
.verytop td .top-menu a img{
  object-fit: cover;
  min-height: 22px;
}
.verytop td .top-menu a.logout{
  padding: 7px;
}
.verytop td .top-menu .helplinkicon img{
  max-height: 26px;
}
.verytop td .top-menu a:hover{
  background-color: rgba(32,33,38,0.6);
  transition: 0.1s ease;
}
.verytop td .top-menu .helplinkicon{
  right: 0;
}
.verytop td .top-menu .themeCompanyLogoWrapper{
  margin: 0 10px;
}

.verytop td .top-menu .themeCompanyLogo{
    max-width: 150px;
    max-height: 50px;
    min-height: 25px;
}

.brandColourText, .brandColourText:link {
  color: #45BEF3;
}

.support_dropdown {margin-top: 3px; margin-bottom: 3px; FONT-SIZE: 13px; font-weight:bold; COLOR: #408A4D; LINE-HEIGHT: 20px;}

.column_heading {FONT-SIZE: 13px; font-weight:bold; COLOR: #333333; LINE-HEIGHT: 20px;}

.table_data {FONT-SIZE: 13px; COLOR: #333333;}

.table_view {PADDING-LEFT: 5px; FONT-SIZE: 13px; COLOR: #333333;}
a.table_view:link {PADDING-LEFT: 5px; FONT-SIZE: 13px; COLOR: #0000FF;}
a.table_view:hover {PADDING-LEFT: 5px; FONT-SIZE: 13px; COLOR: #0000FF;}
a.table_view:visited {PADDING-LEFT: 5px; FONT-SIZE: 13px; COLOR: #0000FF;}

.next_previous {FONT-SIZE: 15.5px; font-weight:bold; COLOR: #666666; LINE-HEIGHT: 20px;}
a.next_previous:link {FONT-SIZE: 15.5px; font-weight:bold; COLOR: #666666; LINE-HEIGHT: 20px;}
a.next_previous:hover {FONT-SIZE: 15.5px; font-weight:bold; COLOR: #000000; LINE-HEIGHT: 20px;; text-decoration:none;}
a.next_previous:visited {FONT-SIZE: 15.5px; font-weight:bold; COLOR: #666666; LINE-HEIGHT: 20px;}

.footer_message {PADDING-BOTTOM: 35px; PADDING-LEFT: 5px; FONT-SIZE: 13px; COLOR: #333333;}

.header_message {PADDING-LEFT: 5px; FONT-SIZE: 13px; COLOR: #333333;}

.account_label {FONT-SIZE: 13px; font-weight:bold; COLOR: #333333;}

.account_data {FONT-SIZE: 13px; COLOR: #333333;}
a.account_data:link {FONT-SIZE: 13px; COLOR: #0000FF;}
a.account_data:hover {FONT-SIZE: 13px; COLOR: #0000FF;}
a.account_data:visited {FONT-SIZE: 13px; COLOR: #0000FF;}



ul.sitemap {}
li.sitemap {font-size: 7.5pt;}
#breadcrumbs li{display: inline; font-size:10px; font-family:Verdana, Arial, Helvetica, sans-serif; line-height:.5em; margin-left:0px;}
#breadcrumbs {padding:10px; padding-top:7px; margin:0px;}



/*Grid*/


/*Dialog Boxes*/

.dlgalert {
	height: 30px;
}

.dlgalert:empty {
	height: 0px;
}

.addlabeltop,
.email_header_label {
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	padding-right: 6px;
}

body.ui-dialog input:not(.button),
body.ui-dialog select,
body.ui-dialog textarea,
input.addfieldtop,
input.addfieldgrid,
select.addfieldtop,
select.addfieldgrid,
textarea.addfieldtop,
textarea.addfieldgrid {
	font-family: inherit;
	font-size: 14px;
	padding: 6px;
	border-radius: 5px;
	width: 100% !important;
	box-sizing: border-box;
}

.addlabelgrid,
.addlabelgrid * {
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}

.task_inner + table {
	margin-top: 20px;
}

#taskadddutyrow td {
	border: none;
	background-color: transparent;
}

#taskadddutyrow span.start_finish {
	margin: 0px 5px;
}

#taskadddutyrow td.shift_table_header:nth-of-type(odd),
#taskadddutyrow td.shift_table:nth-of-type(odd) {
	padding-right: 1px;
}

#taskadddutyrow td.shift_table_header:nth-of-type(even),
#taskadddutyrow td.shift_table:nth-of-type(even) {
	padding-left: 1px;
}

#taskadddutyrow td.shift_table:nth-of-type(7) {
    padding-left: 15px;
}

td.spacer {
	width: 10px;
}

.comments:not(button) {FONT-SIZE: 13px; COLOR: #000000; font-weight:normal; padding:5px;}



.footer {
            width: 100%;
            min-width: 980px;
            height: 40px;
            padding: 0;
            position: absolute;
            z-index: 90;
}



.whitelinknew {PADDING-LEFT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;}
a.whitelinknew:link {PADDING-LEFT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;}
a.whitelinknew:hover {PADDING-LEFT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;; text-decoration:underline;}
a.whitelinknew:visited {PADDING-LEFT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;}


.whitelinknewright {PADDING-RIGHT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;}
a.whitelinknewright:link {PADDING-RIGHT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;}
a.whitelinknewright:hover {PADDING-RIGHT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;; text-decoration:underline;}
a.whitelinknewright:visited {PADDING-RIGHT: 25px; FONT-SIZE: 12px; COLOR: #ffffff;}

#deltog{
  cursor: pointer;
}
.copyhotel{
  cursor: pointer;
}

.email_maintitle {
  font-size: 16px;
  font-weight: bold;
  color: #5A946B;
}
.text_maintitle {
  font-size: 16px;
  font-weight: bold;
  color: #5A946B;
}
.text_title {
  font-size: 14px;
  font-weight: bold;
  color: #5A946B;
}
.text_header_label {
  font-size: 14px;
  font-weight: bold;
  color: #5A946B;
}
.text_list_empty {
  font-weight: bold;
  color: #FF0000;
}

th.fatiguerisk {
  background-image:url(../images/top_row_background.jpg);
  margin: 0;
  padding: 3px;
  font-size:12px;
  font-weight:bold;
}

h1.fatiguerisk {
  font-size: 14px;
  font-weight: bold;
}

td.inpastweek {
  background-color: #F0F0F0;
}

/*
td.incurrentweek {
  font-weight: bold;
  font-size: 10pt;
}*/

td.infutureweek {
  background-color: #F0F0F0;
}

#dlgFatigueRisk .shift_table tr {
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}

#dlgFatigueRisk .shift_table tr:hover:not(:first-of-type) {
	background-color: #FFD9AD;
	-webkit-transition: all .1s ease;
	-o-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all .1s ease;
}

td.fatiguehigh, button.exceedance_fatigue.fatiguehigh, .dual_limit_high {
  background-color: rgba(230,91,91,0.7) !important;
}
td.fatiguemedium {
  background-color: rgba(249,244,87,0.70) !important;
}
td.fatiguelow, button.exceedance_fatigue.fatiguelow, .dual_limit_low {
  background-color: rgba(117,212,93,0.70) !important;
}

td.riskhigh, button.exceedance_risk.riskhigh  {
  background-color: rgba(230,91,91,0.7) !important;
}
td.riskmedium {
  background-color: rgba(249,244,87,0.70) !important;
}
td.risklow, button.exceedance_risk.risklow {
  background-color: rgba(117,212,93,0.70) !important;
}

button.exceedance_fatigue.fatiguemedium, button.exceedance_risk.riskmedium, .dual_limit_medium {
  background-color: rgba(235, 176, 13,0.7) !important;
}

input.ac_g {
  width: 40px;
}

input.ac_g_wide {
  width: auto; /*205px;*/
}

input.ac_u {
  width: 32px;
}


input.ac_u_wide {
  width: 52px;
}

input.ac_d {
  width: 60px;
}

input.ac_d_wide {
  width: 200px;
}

input.ac_x {
  width: 60px;
}

input.payrate, input.payrate2, input.chgrate, input.payrate_input {
  width: 44px;
}

input.time {
  width: 32px;
}

.shift_table input.time:disabled {
  background-color: transparent;
  border: none;
}

.left_shift_button,
.right_shift_button,
.travel_shift_button {
  top: 50%;
  margin-top: -12.5px;
  width: 34px;
  height: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  position: absolute;
  cursor: pointer;
}

.travel_shift_button {
  width:  68px;
  text-align: center;
}

.left_shift_button[data-disabled=' disabled'],
.right_shift_button[data-disabled=' disabled'],
.travel_shift_button[data-disabled=' disabled'] {
  /*cursor: default;*/
}

.travel_shift_button {
  padding-right: 10px;
  padding-left: 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}

.travel_shift_button span {
  top: -1px;
  position: relative;
}

.left_shift_button {
  padding-right: 10px;
  right: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.right_shift_button {
  padding-left: 10px;
  left: 0px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.left_shift_input,
.right_shift_input{
  border-radius: 3px;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  padding: 6px 3px;
  color: white;
  border: none;
  background-color: transparent;
  /*border: 1px solid rgba(0,0,0,0.2);*/
  width: 27px !important;
  height: 5px;
}

.left_shift_input:focus,
.right_shift_input:focus {
  background-color: rgba(0,0,0,0.25);
}

.left_shift_input.import_error,
.right_shift_input.import_error {
  border-width: 2px;
  margin-top: -10px;
}

.left_shift_input {
  right: 5px;
}

.right_shift_input {
  left: 5px;
}

.left_shift_input:disabled,
.right_shift_input:disabled,
.left_shift_input:read-only,
.right_shift_input:read-only,
.shift_line[data-disabled=' disabled'] {
  background-color: transparent;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

.left_shift_td:not([data-disabled=' disabled']) .left_shift_input:read-only,
.right_shift_td:not([data-disabled=' disabled']) .right_shift_input:read-only {
  cursor: pointer;
}

.left_shift_td, .right_shift_td {
  position: relative;
}

.shift_line {
  position: absolute;
  color: white;
  right: -5px;
  z-index: 1;
  top: 50%;
  margin-top: -9px;
  cursor: pointer;
  width: 9px;
  text-align: center;
}

td.email_header_warning {
  font-weight: bold;
  color: #FF0000;
}

span.warningdata {
  font-weight: bold;
  font-size: 14px;
}

.toast-info {
  font-size: 18px;
}

.ui-widget-overlay {
	background: none;
}

.ui-dialog .ui-dialog-titlebar {
	background-image: none;
	background-color: #454A59;
}

.ui-widget-header .ui-icon {
  background-image: url(../images/close_dialog.svg);
	background-position: center;
	background-size: auto;
}

.ui-widget-header a.ui-dialog-titlebar-close {
  opacity: 0.75;
}

.ui-widget-header a.ui-dialog-titlebar-close:hover {
  opacity: 1;
  right: .3em;
  top: 50%;
  margin: -10px 10px 0 0;
  padding: 1px;
}

.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
  font-weight: normal;
  margin: -10px 10px 0 0;
}

.calendarweek,
.weekdaybox {
	width: 165px;
	height: 80px;
	border: none;
	background-color: #eeeeee;
	border-radius: 7px;
	box-sizing: border-box;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

.weekdaybox {
	width: auto;
	height: auto;
	vertical-align: top;
}

.calendarweek:hover {
	background-color: #FFD9AD;
	-webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

.calendarcontainer {
	border-spacing: 5px;
	border-collapse: separate;
	border: none;
	width: 900px;
}

.calendarweek.currentweek {
 	background-color: #ff981d;
}

.ui-dialog,
.dialogBox {
	border-radius: 5px;
	border: none;
	box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  max-width: 95vw;
}

.ui-dialog .ui-dialog-content {
  max-width: 100%;
  overflow: auto;
}

.dialogBox {
	background-color: #FFF;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
}

.ui-dialog .task_inner *,
.dialogBox * {
	font-size: 14px;
}

.flex-container{
  padding: 40px;
  display: flex;
  justify-content: space-evenly;
  max-height: 875px;
}

.flex-container > :first-child, .flex-container > :last-child{
  flex-grow: 1;
  flex-basis: 0;
  max-width: 400px;
  margin-left: 0;
  margin-right: 0;
}

body.ui-dialog {
	width: auto;
	margin: 10px;
	box-sizing: border-box;
	overflow: auto;
}

body.ui-dialog td.ui-dialog-titlebar {
	float: none;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

table.email_outer {
	width: 600px;
}

table.email_outer,
td.email_outer > table {
	border-collapse: collapse;
}

table.email_outer td {
	padding-top: 6px;
	padding-bottom: 6px;
}

td.email_outer {
	padding: 0px;
}

body.ui-dialog tr.email_header td:first-child {
	padding-left: 10px;
}

body.ui-dialog tr.email_header td:last-child {
	padding-right: 10px;
}

#dlgCalendar div.weektitle {
	position: relative;
	cursor: pointer;
}

#dlgCalendar input.weektitle + label {
	position: absolute;
	left: 5px;
	top: 0px;
	margin-top: -10px;
}

#dlgHotels {
	padding-left: 0px;
}
#dlgHotels::-webkit-scrollbar {
  height: 1.5em;
}
#dlgRates {
  padding: 0px;
}

.rates.present {
  background-color: #4ac671;
}

.rates.absent:not(.red) {
  background-color: #a5a5a5;
  cursor: not-allowed;
}

.rates.disabled:hover:not(:disabled) {
	background-color: #a5a5a5;
}


table.rates_table {
	border: #C8C8C8 solid 1px;
	font-size: 0.8em;
	border-collapse:collapse;
}

tr.rates_row_odd:not(.shift_row) {
}

tr.rates_row_even:not(.shift_row) {
  background-color: #F5F5F5;
}

td.rates_table {
	border: 1px solid rgba(155,155,155,0.5);
	border-bottom: none;
	border-top: none;
	margin: 0;
	padding: 3px;
	padding: 4px 6px 4px 6px;
	font-size:12px;
	font-weight:600;
	white-space:nowrap;
}

td.totals {
	font-size:14px;
	font-weight:700;
}

td.rates_table_header {
	border: 1px solid rgba(155,155,155,0.5);
	height: 42px;
	background-color: #DFDFDF;
	margin: 0px;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 6px 3px 6px;
	white-space:nowrap;
}


.weekdayboxes {
	border-collapse: separate;
	border-spacing: 10px;
}

.weekdaybox {
	overflow: hidden;
	padding: 0px;
}

.weekdaybox > table {
	border: none;
	border-collapse: collapse;
}

.weekdaybox > table td.shift_table_header {
	border: none;
	padding-left: 10px;
	padding-right: 10px;
}

.weekdaybox > table td:not(.shift_table_header) {
	padding: 6px;
}

.weekdaybox > table select,
.weekdaybox > table select option {
	font-size: 11px !important;
}

.adjup {
  color: #4AC661;
}

.adjdown {
  color: #FF0000;
}

.dialogBox.loginBox {
	width: 400px;
  max-width: 400px !important;
	padding: 30px;
	box-sizing: border-box;
	box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
}

.dialogBox h2 {
	font-size: 16px;
	font-weight: bold;
}

.import_table{
	border: #C8C8C8 solid 1px;
	font-size: 0.8em;
	border-collapse:collapse;
}

.import_error {
	border: #FF0000 solid 3px;
}

.import_warning {
  border: #D69200 solid 3px;
}

body.widgetPopup > *:not(.widgetPopupWrapper),
body.dialogPopup > *:not(#dialogPopupBackground) {
  filter: blur(1px);
}

.widgetPopupBackground,
#dialogPopupBackground {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1010;
}

#dialogPopupBackground {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.widgetPopupWrapper {
  background-color: #FFF;
  border-radius: 6px;
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  box-sizing: border-box;
  position: absolute;
  font-size: 13px;
  z-index: 1010;
}

.widgetPopupBackground[data-popup-number='2'] {
  z-index: 1011;
}

.widgetPopupWrapper[data-popup-number='2'] {
  z-index: 1012;
}

.widgetPopupBackground[data-popup-number='3'] {
  z-index: 1013;
}

.widgetPopupWrapper[data-popup-number='3'] {
  z-index: 1014;
}

#dialogPopupWrapper {
  max-width: 90vw;
  max-height: 150vh;
  overflow: auto;
  background-color: #FFF;
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  border-radius: 8px;
}

.widgetPopupWrapper * {
  font-size: inherit;
}


.widgetPopupWrapper h3,
#dialogPopupWrapper h3,
.employeeStyle h3 {
  font-size: 15px;
  font-weight: 600;
  margin-top: 0px;
}

.widgetPopupWrapper h4,
#dialogPopupWrapper h4,
.employeeStyle h4 {
  font-size: inherit;
  font-weight: 700;
  margin-top: 0px;
  margin-bottom: 0.7em;
}

.widgetPopupWrapper > .inner {
  overflow: auto;
  padding: 20px;
  max-height: inherit;
  box-sizing: border-box;
  position: relative;
}

.widgetPopupWrapper.bottomControls > .inner {
  padding-bottom: 10px;
}

.widgetPopupWrapper.filterHighlight > .inner {
    padding: 10px;
}

.widgetPopupWrapper:before {
  content: '';
  display: block;
  position: absolute;
  height: 16px;
  width: 16px;
  top: -8px;
  left: 50%;
  margin-left: -4px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: inherit;
  z-index:-1;
}

.widgetPopupWrapper.popAbove:before {
  top: auto;
  bottom: -8px;
}

.widgetPopupWrapper.screenLeft:before {
  left: 15px !important;
}

.widgetPopupWrapper.screenRight:before {
  left: auto !important;
  right: 15px !important;
}

p > button:first-child {
  margin-left: 0px;
}

p > button:last-child {
  margin-right: 0px;
}

.coreShifts .coreShift,
.buttonColumns button {
  min-width: 33%;
  margin: 2px 1px !important;
}

.buttonColumns.twoColumns button {
  min-width: 48%;
}

.widgetPopupWrapper .popupHeader.coloured {
  margin-left: -20px;
  margin-right: -20px;
  margin-top: -20px;
  margin-bottom: 10px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 20px;
}

.widgetPopupWrapper .popupHeader.coloured h3 {
  margin-bottom: 0px;
}

.extraDataControls .status,
#popupChangeAvailability .status,
#popupChangeAvailability .status2,
.widgetPopupWrapper .popupHeader .status {
  float: right;
  font-size: 15px;
  font-weight: 600;
  margin: 0px;
}

.clearbottombuttons {
  clear: both;
  margin-bottom: 7px !important;
}

.extraDataControls .status[data-status='saved'],
#popupChangeAvailability .status[data-status='saved'],
.widgetPopupWrapper .popupHeader .status[data-status='saved'] {
  padding-left: 26px;
  background-image: url(images/icon_completed@1.5x.png);
  background-position: left center;
  background-repeat: no-repeat;
}

.extraDataControls .status[data-status='saved']:before,
#popupChangeAvailability .status[data-status='saved']:before,
.widgetPopupWrapper .popupHeader .status[data-status='saved']:before {
  content: 'Saved';
  color: #48C562;
}

.widgetPopupWrapper .popupHeader .status.withMinor {
  margin-top: -0.5em;
}

.widgetPopupWrapper .popupHeader .status p {
  margin: 0px;
  text-align: center;
  opacity: 0.93;
}

.extraDataControls .status {
  margin-top: 10px;
  margin-right: 10px;
}

.widgetPopupWrapper .popupHeader .status p.mainDetail {
  font-weight: 300;
}

.widgetPopupWrapper .popupHeader .status p.minorDetail {
  font-size: 0.7em;
  height: 0px;
  overflow: visible;
}

.dialogContents {
  overflow: auto;
  border-radius: 8px;
  font-size: 16px;
}

.dialogContents * {
  font-size: inherit;
}

.dialogContents form {
  margin: 0px;
}

.dialogHeader {
  padding: 20px;
  background: #000;
  color: #FFF;
}

.dialogHeader .controls {
  float: right;
}

.dialogHeader .controls button {
  margin-top: 0px;
}

.dialogHeader h3 {
  margin: 0px;
}

.dialogContents .main {
  background-color: #FFF;
  padding: 20px;
  position: relative;
  max-height: 75vh;
  overflow: auto;
}

.dialogContents .main .notificationArea {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
  z-index: 10;
}

.dialogContents section.grey,
.dialogContents section.red,
.dialogContents section.green,
.dialogContents section.blue,
.dialogContents section.skyblue,
.dialogContents section.amber {
  padding: 10px;
  border-radius: 5px;
}

p.employeeAccount {
  font-size: 15px;
  line-height: 25px;
  background-image: url(../images/employee.png);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 30px;
}

p.employeeAccount span {
  font-weight: 600;
  font-size: inherit;
}

.sortable {
  cursor: pointer;
  color: #2791E7;
}

.sort_on {
  background-image: url(images/icon_arrow_up.png);
  background-repeat: no-repeat;
  background-position: center 15%;
}

.sort_on.DESC {
  background-image: url(images/icon_arrow_down.png);
  background-position: center 85%;
}

p.noMargin {
  margin-top: 0px;
  margin-bottom: 0px;
}

.noSideMargin,
input.buttons[type='radio'] + label {
  margin-left: 0px;
  margin-right: 0px;
}

table.fields {
  width: 100%;
}

.widgetPopupWrapper table.fields {
  width: auto;
}

table.fieldList {
  width: auto;
  text-align: left;
  margin-left: 0px;
  margin-right: auto;
  border-collapse: collapse;
}

table.fields th,
table.fields td {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 4px;
}

table.fields th {
  text-align: left;
}

table.fields td.left {
  text-align: left;
}

table.fieldList th {
  font-weight: 500;
  padding: 0px 4px;
}

table.fieldList td {
  font-weight: 700;
  padding: 0px 4px;
}

section.grey table.fieldList th {
  font-weight: 700;
  padding: 2px 4px;
  text-align: left;
}

section.grey table.fieldList td {
  font-weight: 500;
  padding: 2px 4px;
}

table.fields th:first-child,
table.fields td:first-child,
table.fieldList th:first-child,
table.fieldList td:first-child {
  padding-left: 0px;
}

table.fields th:last-child,
table.fields td:last-child,
table.fieldList th:last-child,
table.fieldList td:last-child {
  padding-right: 0px;
}

table.fields input[type='text']:not(.standard),
table.fields input[type='email']:not(.standard),
table.fields input[type='number']:not(.standard),
.fieldsStyle input[type='text']:not(.standard),
.fieldsStyle input[type='email']:not(.standard),
.fieldsStyle input[type='number']:not(.standard) {
  font-weight: 700;
  font-size: 17px;
  vertical-align: middle;
  text-align: center;
  border: solid 1px #CCCCCC;
  border-radius: 4px;
  padding: 10px;
  width: 130px;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
}

table.fields input[type='text'].addshift {
  width: 95%;
}

table.fields input[type='text']:disabled,
table.fields input[type='email']:disabled,
table.fields input[type='number']:disabled,
.fieldsStyle input[type='text']:disabled,
.fieldsStyle input[type='email']:disabled,
.fieldsStyle input[type='number']:disabled {
    background-color: #EEE;
    color: #999 !important;
}

.widgetPopupWrapper table.fields input[type='text'],
.widgetPopupWrapper table.fields input[type='email'],
.widgetPopupWrapper table.fields input[type='number'],
.employeeStyle table.fields input[type='text'],
.employeeStyle table.fields input[type='email'],
.employeeStyle table.fields input[type='number'],
.fieldsStyle input[type='text'],
.fieldsStyle input[type='email'],
.fieldsStyle input[type='number'] {
  font-size: inherit;
  padding: 5px;
  width: 90px;
  margin-top: -2px;
  margin-bottom: -2px;
}

.widgetPopupWrapper table.fields div.field label + input {
  padding-top: 14px;
  padding-left: 12px;
  padding-right: 12px;
  text-align: left;
}

.widgetPopupWrapper table.fields.wideText {
  width: 100%;
}

.widgetPopupWrapper table.fields.wideText input[type='text'],
.widgetPopupWrapper table.fields.wideText input[type='email'],
.widgetPopupWrapper table.fields.wideText input[type='number'] {
  width: 100%;
  text-align: left;
  font-weight: 400;
}

table.fields button {
  margin-left: 2px;
  margin-right: 2px;
}

button.round {
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
}

.image.minus {
  background-image: url(employee/icon_minus.png);
}

.image.plus {
  background-image: url(employee/icon_plus.png);
}

.widgetPopupWrapper section.grey,
.widgetPopupWrapper section.red,
.widgetPopupWrapper section.green,
.widgetPopupWrapper section.blue,
.widgetPopupWrapper section.skyblue,
.widgetPopupWrapper section.amber {
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
  border-radius: 4px;
}

.widgetPopupWrapper section.expandedWidth {
  margin-left: -10px;
  margin-right: -10px;
}

.widgetPopupWrapper section.fullWidth {
  margin-left: -20px;
  margin-right: -20px;
  border-radius: 0px;
}

.widgetPopupWrapper section.controls.bottom {
  margin-top: 8px;
  margin-left: -10px;
  margin-right: -10px;
}

.widgetPopupWrapper section.controls.bottom select {
  margin-top: 7px;
  margin-bottom: 6px;
}

img.signature {
  width: 100%;
  height: auto;
}

.busy, .busy * {
  cursor: wait !important;
}

select.autoSuggest {
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0%;
  z-index: 1;
  box-sizing: border-box;
}

.autoSuggest.above select.autoSuggest {
  top: auto;
  bottom: 100%;
}

.timesheetDay .autoSuggest.above select.autoSuggest {
  bottom: unset;
}

span img {
  vertical-align: middle;
}

span.image:not(.hidden),
span.icon:not(.hidden) {
  vertical-align: middle;
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}

span.round {
  border-radius: 50%;
}

button.withBadge {
  position: relative;
  overflow: visible;
}

button img.badge,
.withBadge .badge {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 16px;
}

button img.badge,
.withBadgeConfirmed .badge {
  position: absolute;
  right: -14px;
  top: -9px;
  width: 31px;
}

button img.badgeBottomRight,
.withBadge .badgeBottomRight {
  position: absolute;
  right: -6px;
  top: auto;
  bottom: -6px;
  width: 16px;
}

img.badge.withShadow {
  border-radius: 16px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

button.withIcon img {
  vertical-align: text-bottom;
}

.pulseBlob {
  background: rgb(221, 49, 78); /* #dd314e */
  border-radius: 50%;
  height: 8px;
  width: 8px;
  box-shadow: 0 0 0 0 rgba(221, 49, 78,0.1);
  transform: scale(1);
  animation: pulse 2s infinite;
  border: solid 2px #FFF;
}

.pulseBlobGreen {
  background: rgb(73, 197, 96); /* #dd314e */
  border-radius: 50%;
  height: 8px;
  width: 8px;
  box-shadow: 0 0 0 0 rgba(73, 197, 96, 0.1);
  transform: scale(1);
  animation: pulseGreen 2s infinite;
  border: solid 2px #FFF;
}

.pulseBlobBlue {
  background: rgb(39, 145, 231); /* #dd314e */
  border-radius: 50%;
  height: 8px;
  width: 8px;
  box-shadow: 0 0 0 0 rgba(39, 145, 231, 0.1);
  transform: scale(1);
  animation: pulseBlue 2s infinite;
  border: solid 2px #FFF;
}

.pulseBlobOrange {
  background: rgb(255, 152, 29); /* #dd314e */
  border-radius: 50%;
  height: 8px;
  width: 8px;
  box-shadow: 0 0 0 0 rgba(255, 152, 29, 0.1);
  transform: scale(1);
  animation: pulseOrange 2s infinite;
  border: solid 2px #FFF;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(221, 49, 78, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(221, 49, 78, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(221, 49, 78, 0);
	}
}

@keyframes pulseGreen {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(73, 197, 96, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(73, 197, 96, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(73, 197, 96, 0);
	}
}

@keyframes pulseBlue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(39, 145, 231, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(39, 145, 231, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(39, 145, 231, 0);
  }
}

@keyframes pulseOrange {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(255, 152, 29, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgb(255, 152, 29, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(255, 152, 29, 0);
  }
}

.left_shift_button .pulseBlob,
.left_shift_button .pulseBlobGreen,
.left_shift_button .pulseBlobBlue,
.left_shift_button .pulseBlobOrange {
  top: -5px;
  left: -5px;
  position: absolute;
}

.clientSummary,
.fullClient {
  overflow: hidden;
  max-width: 210px;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

.clientSummaryText {
  max-width: 210px;
  text-overflow: ellipsis;
  overflow: hidden;
}

[data-client-detail-level='summary'] .fullClient {
  max-width: 0px;
  padding-left: 0px !important;
  padding-right: 0px !important;
  display: none;
}

[data-client-detail-level='summary'] .fullClient.shift_table_sub_header {
  color: transparent;
}

[data-client-detail-level='summary'] .fullClient input,
[data-client-detail-level='summary'] .fullClient button {
  display: none;
}

[data-client-detail-level='detail'] .clientSummary {
  max-width: 0px;
  padding-left: 0px;
  padding-right: 0px;
  display: none;
}

.shift_table_sub_header td {
  border-top: none !important;
}

.noStartFinish .column_day + br + .start_finish,
.noStartFinish .column_date + br + .start_finish,
.noStartFinish .column_date + .columnFilterControls + br + .start_finish {
  display: none;
}

.noStartFinish .colDay {
  border-right: none;
  padding-right: 0px !important; /*2px;*/
}

.noStartfinish .colDate {
  border-left: none;
  padding-left: 2px;
}

.widgetPopupWrapper #popupChangeAvailability [data-type='time'],
.timePoints.fieldsStyle input[data-type='time'],
.employeeStyle table.fields [data-type='time'] {
  width: 70px;
}

.widgetPopupWrapper #popupChangeAvailability [data-type='mins'],
.widgetPopupWrapper #popupChangeAvailability [data-type='hours'] {
  width: 56px;
  text-align: right;
}

table.fullWidth {
  width: 100%;
}

table.selector {
  border-collapse: collapse;
}

table.selector th,
table.selector td {
  padding-left: 5px;
  padding-right: 5px;
}

table.rowPadding th,
table.rowPadding td {
  padding-top: 5px;
  padding-bottom: 5px;
}


table.selector th:first-child,
table.selector td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

table.selector th:last-child,
table.selector td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

table.selector thead tr:last-of-type {
  border-bottom: solid 1px rgba(0,0,0,0.1);
}

table.selector thead tr > * {
  line-height: 24px;
}

table.selector thead + tbody tr:first-of-type > * {
  padding-top: 10px;
}

table.selector tbody tr {
  cursor: pointer;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

table.selector tbody tr:hover {
  background-color: #F5F5F5;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

table.selector button {
  min-width: 90px;
}

button.button.autoSize, span.button.autoSize {
  display: inline;
  vertical-align: middle;
  margin: 0px;
  min-width: 0px;
}

button.button.noMargins {
  margin: 0px;
}


td.employeePayScheme {
  text-align: center;
}

td.employeePayScheme button.button {
  min-width: 100%;
}

blockquote.message {
  display: table;
  position: relative;
  margin: 10px auto 2.1em ;
  padding: 6px 10px;
  max-width: 190px;
  border-radius: 15px;
}

blockquote.message:after {
  content: '';
  display: block;
  width: 7px;
  height: 15px;
  background-color: inherit;
  position: absolute;
  right: 1px;
  bottom: 1px;
  transform: rotate(61deg);
  z-index: 0;
}

blockquote.message.right {
  margin-right: 5px;
}

blockquote.message.left {
  margin-left: 5px;
}

blockquote.message.left:after {
  left: 1px;
  bottom: 1px;
  transform: rotate(-61deg);
}

blockquote.message cite {
  display: block;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  color: #1F1F1F;
  font-size: 0.85em !important;
  width: auto;
  right: 0px;
  white-space: nowrap;
  font-style: normal;
}

blockquote.message.left cite {
  right: auto;
  left: 0px;
}

td.duties {
  /*white-space: normal;*/
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

td span.dutyEntry:not(:last-child):after {
  content: ', ';
}

button.button.noMargins {
  margin: 0px;
}

button.button .desc:not(:empty) {
  display: block;
  float: right;
  margin-left: 5px;
  font-size: 0.6em;
}

button.button.small .desc:not(:empty) {
  margin-top: 5px;
}

button.button.small .desc img {
  margin-top: -5px;
}

td.employeeStatus {
  width: 50px;
  padding-top: 5px;
  padding-bottom: 5px;
}

td.employeeName{
  white-space: nowrap;
  min-width: 100px;
  max-width: 160px;
  text-overflow: ellipsis;
  overflow: hidden;
}
td.employeeStatus{
  white-space: nowrap;
  min-width: 100px;
  max-width: 160px;
  text-overflow: ellipsis;
  overflow: hidden;
}

td.employeeDistance,
td.employeeSponsorship {
  font-size: 0.9em !important;
  white-space: nowrap;
}
td.employeePhone {
  font-size: 0.9em !important;
  white-space: nowrap;
  /*text-align: left;*/
}
td.employeePayScheme {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

td.employeePayScheme button.button {
  min-width: 100%;
}

blockquote.message {
  display: table;
  position: relative;
  margin: 10px auto 2.1em ;
  padding: 6px 10px;
  max-width: 190px;
  border-radius: 15px;
}

blockquote.message:after {
  content: '';
  display: block;
  width: 7px;
  height: 15px;
  background-color: inherit;
  position: absolute;
  right: 1px;
  bottom: 1px;
  transform: rotate(61deg);
  z-index: 0;
}

blockquote.message.right {
  margin-right: 5px;
}

blockquote.message.left {
  margin-left: 5px;
}

blockquote.message.left:after {
  left: 1px;
  bottom: 1px;
  transform: rotate(-61deg);
}

blockquote.message cite {
  display: block;
  position: absolute;
  top: 100%;
  margin-top: 5px;
  color: #1F1F1F;
  font-size: 0.85em !important;
  width: auto;
  right: 0px;
  white-space: nowrap;
  font-style: normal;
}

blockquote.message.left cite {
  right: auto;
  left: 0px;
}

button .hovered,
button:hover .notHovered {
  display: none;
}

button:hover .hovered {
  display: inline;
}

button.clearBtn,
button.clearField {
  display: none;
  margin: 0px;
  padding: 0px;
  /*border: none;*/
  background-color: transparent;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  background-image: url('images/icon_clear.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
  position: relative;
  margin-right: -14px;
  right: 18px;
  border-radius: 50%;
  box-sizing: content-box;
  border: solid 2px #FFF;
}

table.fields div.field button.clearBtn {
  position: absolute;
  right: 6px;
  margin: -6px 0px 0px;
  top: 50%;
  display: block;  
  width: 12px;
  height: 12px;
}

button.clearBtn.on, button.clearField.on {
  background-image: url('images/icon_clear_blue.svg');
  width: 16px;
  height: 16px;
  background-size: 16px;
  right: 20px;
}

input.populated:enabled + button.clearBtn,
input:not(:placeholder-shown) + button.clearField {
  display: inline-block;
}

input.populated:enabled + button.clearBtn:hover,
input:not(:placeholder-shown) + button.clearField:hover {
  border: solid 2px #AFAFAF;
}

input.populated:enabled + button.clearBtn.on:hover,
input:not(:placeholder-shown) + button.clearField.on:hover {
  border: solid 2px #45B2E9;
}

.sheetStats {
  color: #B0B0B0;
  padding-left: 20px;
}

.sheetStats span {
  font-weight: bold;
}

.sheetStats > span:not(.greenText) {
  color: #FFF;
}

.sheetStats td {
  width: 1%;
}

.sheetStats td .statBox {
  min-width: 100px;
}

.toolbar h2 {
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0px 5px;
}

table.shift_import td {
  vertical-align: top;
}

table.shift_import tr.skiprow {
  opacity: 0.4;
}

table.shift_import tr.skiprow td,
table.shift_import tr.skiprow td input {
  text-decoration: line-through;
}

table.datalist {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.83em;
}

table.datalist tr > * {
  padding: 4px;
}

table.datalist tr {
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

table.datalist tr:hover {
  background-color: rgba(0,0,0,0.05);
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

span.extraData {
  display: inline-block;
  cursor: pointer;
  font-size: 1.5em;
  opacity: 0.5;
  vertical-align: middle;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

span.extraData:before {
  content: '\2807';
  padding-left: 4px;
}

span.extraData:hover {
  opacity: 1;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

/* *** EMPLOYEE-STYLE STYLING TAKEN FROM employee.css */
div.field {
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}

td > div.field {
  margin: 0px;
}

div.field input,
div.field textarea {
  width: 100%;
  margin: 0px;
  box-sizing: border-box;
}

div.field label {
  position: absolute;
  font-size: 10px;
  font-weight: 400;
  left: 12px;
  top: 4px;
  z-index: 1;
  line-height: normal;
}

.smallText {
    font-weight: 300;
    font-size: 0.85em;
}

.borderedFields input + .smallText,
.borderedFields input + .inputDetail {
  padding: 7px 14px;
  font-weight: 300;
  font-size: 0.85em;
}

.borderedFields input + .inputDetail {
  /*background-color: #EEE;*/
  color: #9c9b9b;
  font-style: italic;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.borderedFields input + .inputDetail:empty {
  display: none;
}

.borderedFields h2 {
    margin-top: 43px;
    margin-bottom: 15px;
}

.borderedFields h2:first-child {
  margin-top: 0em;
}

.borderedFields input,
.borderedFields #signature,
.borderedFields textarea,
.borderedFields select {
  font-size: 16px;
  font-weight: 600;
  padding: 12px;
  background-color: #FFF;
  border-radius: 4px;
  border-style: solid;
  border-width: 2px;
  color: #444444;
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
  border-color: #D7D7D7;
}

.redBorder {
  border-color: #DD314E !important;
}

.greenBorder {
  border-color: #4ac661 !important;
}

.borderedFields input.small,
.borderedFields select.small {
  padding: 2px 4px;
  font-size: 12px;
  border-width: 1px;
  box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.15);
}

.borderedFields select.smallOptions option {
  font-size: 12px;
}

.borderedFields input:focus,
.borderedFields textarea:focus,
.borderedFields select:focus {
  border-color: #2791E7;
}

.borderedFields textarea {
  height: 186px;
  margin-bottom: -6px !important;
}

.borderedFields input[disabled],
.borderedFields textarea[disabled],
.borderedFields select[disabled],
.borderedFields input:read-only,
.borderedFields textarea:read-only,
.borderedFields select[readonly] {
  background-color: #F8F8F8;
  border-color: #E2E2E2;
  color: #888;
}

.borderedFields input[type='checkbox'] {
  display: none;
}

.borderedFields input[type='checkbox']:checked + label,
p.label > label {
  font-weight: 700;
}

.borderedFields input[type='checkbox'] + label:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 27px;
  width: 27px;
  margin-right: 10px;
  background-color: #FFF;
  box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.15);
  border-radius: 4px;
  background-repeat: no-repeat;
  background-position: center;
}

.borderedFields input[type='checkbox']:checked + label:before {
  background-image: url(employee/icon_tick.png);
}


.borderedFields input[type='checkbox'] + label {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.borderedFields input[type='checkbox']:disabled + label {
  opacity: 0.4;
  cursor: default;
}

.hideDisabled [disabled] {
  visibility: hidden;
}

div.field label + input,
div.field label + textarea,
div.field label + select {
  padding-top: 14px;
  padding-bottom: 10px;
}

.borderedFields div.field.disabled label {
  color: #888;
}

.borderedFields div.field.disabled input,
.borderedFields div.field.disabled textarea,
.borderedFields div.field.disabled select {
  border-color: #AAA;
}

.employeeStyle button {
  font-family: 'Avenir LT Std', 'Avenir Next', Arial;
  cursor: pointer;
}
/* *** END OF EMPLOYEE STYLING */

#hotListContainer {
  position: fixed;
  z-index: 100;
  top: 0px;
  bottom: 0px;
  left: 100%;
  width: 600px;
  margin-left: 0px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

#hotListContainer.on {
  margin-left: -600px;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

.hotList {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  box-sizing: border-box;
}

.hotList header {
  background-color: #000;
  color: #FFF;
}

.hotList header:after {
  content: '';
  display: block;
  clear: both;
}

.hotList header label {
  display: inline-block;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 14px;
}

.hotList header label.on.active{
  background-color: #454A59;
}

.hotList header label.on {
  background-color: #000000;
}

.hotList header button {
  float: right;
  margin: 15px 20px;
}

.hotList header button.close,
.dialogHeader button.close {
  height: 20px;
  width: 20px;
  background-color: transparent;
  background-image: url('../images/close_dialog.svg');
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
}

.hotList header button.close:hover,
.dialogHeader button.close:hover {
  opacity: 1;
  background-color: transparent !important;
}

.hotList .filter {
  padding: 15px 20px;
}

.hotList .filter input[type=text] {
  padding: 6px 12px;
  font-size: 12px;
  box-sizing: border-box;
}

input.search.magnifier {
  background-image: url('images/icon_search.png');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 5px 50%;
  padding-left: 30px !important;
}

input.search.black_magnifier {
    background-image: url('images/icon_search_black.svg');
    background-size: 13px 13px;
    background-repeat: no-repeat;
    background-position: 10px 50%;
    padding-left: 30px !important;
}

.footerHotList{
  position: relative;
  background-color: white;
  margin-top: -55px;
  width: 100%;
  padding: 5px 0 5px 15px;
}

.hotList .contents{
  height: 90%;
  overflow: auto;

}

.hotList .contents,
.hotList .contents2,
.hotList .contents3,
.hotList .notify {
  padding: 5px 20px;
  position: absolute;
  top: 170px;
  left: 0px;
  right: 0px;
  bottom: 100px;
  overflow: auto;
}

.hotList .contents2{
  top: 170px !important;
  bottom: 50px !important;
}

.hotList .contents3{
  top: 200px !important;
  bottom: 50px !important;
  margin-top: 5px;
}


.hotList .contents * {
  font-size: 12px;
}

.hotList .notify,
.notify.tick {
  background-color: rgba(255,255,255,0.7);
  display: none;
  text-align: center;
  color: #48C562;
  font-size: 15px;
  font-weight: 600;
  background-image: none;
}

.hotList .notify.checkmark {
  background-image: url('images/checkmark_animation_2.gif');
  background-repeat: no-repeat;
  background-position: center;
}

.hotList .notify * {
  font-size: inherit;
  vertical-align: middle;
}

button.hotListLink {
  background: transparent;
  white-space: nowrap;
  vertical-align: middle;
  background-color: rgba(0,0,0,0.15) !important;
  height: 34px;
}

button.hotListLink img{
  margin-right:6px;
}

button.hotListLink:hover {
  background-color: rgba(32,33,38,0.6) !important;
}

button.messageLink {
  background: transparent;
  white-space: nowrap;
  vertical-align: middle;
  background-color: rgba(0,0,0,0.15) !important;
  height: 34px;
}

button.messageLink img{
  margin-top: 0px !important;
}

button.messageLink:hover {
  background-color: rgba(32,33,38,0.6) !important;
}

button.image img {
  vertical-align: middle;
  margin-top: -4px;
}

button.icon.delete {
  background-image: url('images/icon_delete.png');
  background-color: transparent !important;
}

button.icon.remove {
  background-image: url('images/icon_remove.png');
  background-color: transparent !important;
  height: 10px;
  background-size: contain;
  margin: -2px 0px 0px 3px;
  opacity: 0.7;
}

button.icon.remove:hover {
  opacity: 1;
}

ul.tags {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: block;
  word-spacing: 10px;
}

ul.tags li {
  display: inline-block;
	padding: 3px 6px;
	font-size: 12px !important;
	font-weight: 500;
  word-spacing: normal;
  vertical-align: middle;
  border-radius: 4px;
  margin-bottom: 5px;
  margin-right: 5px;
}

td.shift_table ul.tags {
  word-spacing: normal;
  white-space: normal;
  display: inline;
}

td.shift_table ul.tags li {
  margin-top: 3px;
  margin-bottom: 2px;
  margin-right: 1px;
  white-space: nowrap;
}

ul.tags li button {
  display: inline-block;
}

td.shift_table ul.tags + button {
  margin-top: 3px;
  margin-bottom: 2px;
}

ul.timePoints {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: block;
}

ul.timePoints li {
  position: relative;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 35px;
}

ul.timePoints li label {
  min-width: 170px;
  display: inline-block;
  vertical-align: center;
}

ul.timePoints.clockin li label {
  min-width: 120px;
  display: inline-block;
  vertical-align: center;
}

ul.timePoints li:before,
ul.timePoints li:after {
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 13px;
  margin-left: -1px;
  width: 2px;
  background-color: #2791E7;
}

ul.timePoints.web li:before,
ul.timePoints.web li:after {
  background-color: #45BEF4;
}

ul.timePoints li:after {
  top: 50%;
  left: 13px;
  width: 8px;
  margin-left: -4px;
  margin-top: -4px;
  height: 8px;
  border-radius: 50%;
}

ul.timePoints li:first-of-type:before {
  top: 50%;
}

ul.timePoints li:last-of-type:before {
  bottom: 50%;
}

ul.timePoints li:not(.followOn):first-of-type:after,
ul.timePoints li:not(.followOn):last-of-type:after {
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
}

input.error {
  color: red !important;
  border-color: red !important;
}

.filterWidget {
  color: #FFF;
  font-size: 15px;
  vertical-align: middle;
  white-space: nowrap;
  /*
  background-color: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 5px 10px;
  */
}

.filterWidget *:not(option) {
  font-size: inherit;
  vertical-align: inherit;
}

.filterWidget select,
.filterWidget input {
  font-size: 14px;
}

.jquiSlider {
  height: 4px;
  background: #6BB3EE;
  display: inline-block;
  margin: 0px 20px;
  border-radius: 2px;
}

.jquiSlider .ui-slider-handle {
  height: 24px;
  min-width: 24px;
  width: auto;
  top: 50%;
  margin-top: -12px;
  left: 0px;
  margin-left: -12px;
  background: #2791E7;
  border-radius: 4px;
  border: 0px;
  color: #FFF;
  text-align: center;
  box-sizing: border-box;
  padding: 2px 6px;
  white-space: nowrap;
  font-weight: 300;
  font-size: 0.9em;
  position: absolute;
  cursor: pointer;
  transition: background .2s linear;
}

span.distance {
  float: right;
  color: #4ac661;
  font-size: 0.8em;
  font-weight: 300;
  line-height: 1.7em;
  margin-left: 5px;
}

.statBox {
  padding: 10px 12px;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}

.filterBar .statBox {
  padding: 5px 10px;
  min-width: 80px;
}

.statBox label {
  font-size: 11px;
  font-weight: 400;
}

.statBox .subtitle {
  font-size: 0.8em;
  position: absolute;
  bottom: 3px;
  left: 12px;
  right: 10px;
  margin: 0px;
}

.statBox .value {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0px 0px;
}

.filterBar .statBox .value {
  margin: 0px;
  font-size: 14px;
}

.statBox .of {
  font-weight: 300;
}

.statBox.notLoaded[data-type='pound'] .value:before { content: '£-.--'; }
.statBox.notLoaded[data-type='decimal'] .value:before { content: '-.--'; }
.statBox.notLoaded[data-type='integer'] .value:before { content: '-'; }

.hideIfZero[data-value='0'] {
  display: none;
}

.copyFromWeeks, .copyToWeeks, #popupCopyAvailability .options, #popupCopyAvailability .headings {
  width: 45%;
  display: inline-block;
}

 #popupCopyAvailability .headings.to {
  width: 44%;
}

#popupCopyAvailability .headings.from {
  padding-left: 5px;
}

.copyFromWeeks, #popupCopyAvailability .headings.from, #popupCopyAvailability .options.specific {
  float: left;
}

.copyToWeeks, #popupCopyAvailability .headings.to {
  float: right;
}

#popupCopyAvailability .options.all {
  padding-left: 36px;
  width: 40%;
}

.copyFromWeeks, .copyToWeeks {
  overflow-y: scroll;
  height: 250px;
}

.copyFromWeeks .button, .copyToWeeks .button {
  width: 120px;
}

.copyAvailBottom {
  margin-bottom: 0px;
  width: 100%;
  clear: both;
  padding: 10px 0;
}

.copyAvailBottom .button {
  float: right;
  width: 90px;
  margin-right: 23px;
}

#popupCopyAvailability {
  padding: 5px;
}

#popupCopyAvailability .options {
  padding-bottom: 10px;
}

#popupCopyAvailability .copyFromWeeks > p, #popupCopyAvailability .copyToWeeks > p {
  padding-left: 6px;
}

#addEmployee_d1 {
  padding: 10px;
}

#addEmployee {
  margin-top: 0;
}

.options input[type='checkbox'].styled + label:before {
  margin-right: 4px;
  margin-top: -2px;
}

#popupCopyAvailability .success.notificationArea {
  width: 92%;
  display: block;
  position: absolute;
  background: white;
  text-align: center;
  bottom: 0;
  height: 100%;
}

#popupCopyAvailability .success.notificationArea div {
    position: relative;
    display: block;
    margin-top: 40%;
}

.notificationInfo {
  margin-top: 10% !important;
  color: #4ac661;
}

/*#widgetPopupWrapper2.employeepopupclass {
  width: 300px !important;
  left: 68px !important;
}*/

.button.green.on {
  background-color: #4ac661;
}

.client_report_div, .full_report_div{
  position: relative;
  padding-bottom: 20px;
}

.client_report_title, .full_report_title{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  position: absolute;
  left: 24px;

}
.client_report_title{
  top: 100px;
}
.full_report_title{
  top: 120px;
}

.fullReportTenantLogo{
  height: 120px;
  max-width: 220px;
  width: auto;
  position: absolute;
  top:10px;
  left: -7px;
}

.fullReportPantherLogo{
  height: 120px;
  max-width: 220px;
  width: auto;
  position: absolute;
  top:10px;
  right: 50px;
}

.clientReportLogo{
  height: 120px;
  max-width: 220px;
  width: auto;
  position: absolute;
  top:-20px;
  left: -7px;
}

.client_report_info{
  width: 600px;
  height: 170px;
  background-color: rgb(187, 187, 187);
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 10px;
}

.table_client_info{
  width: 600px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
}

.table_client_info th{
  text-align: left;
  width: 170px;
}

#popupChangeAvailability .fieldsStyle input[type='text']:not(.standard),
.timePoints.fieldsStyle input[type='text']:not(.standard) {
  font-size: inherit;
  padding: 4px;
  margin-top: -2px;
  margin-bottom: -2px;
}

select.shiftmob  {
  font-weight: 700;
  font-size: 17px;
  vertical-align: middle;
  text-align: center;
  border: solid 1px #CCCCCC;
  border-radius: 4px;
  padding: 10px;
  width: 130px;
  box-sizing: border-box;
  margin-top: 5px;
  margin-bottom: 5px;
}

textarea.shiftmob {
  padding: 12px;
  margin-left: 2px;
  border: 1px solid #cccccc;
  width: 84%;
}

textarea.addshift {
  width: 88%;
}

.allVoid {
 background-color: rgb(218, 218, 218);
}

.allVoid .left_shift_button,
.allVoid .right_shift_button,
.allVoid button[id*='csb_']{
  background-color: rgb(199, 199, 199) !important;
}

.voidSpan {
  z-index: 1;
  position: absolute;
  left: 30px;
  color: white;
}

.button.addleave.deepblue, .deepblue {
  background-color: #004D71;
}

.button.addleave {
  background-image: url('images/calendar_white.png');
  background-size: 16px;
  padding-left: 36px;
}

.button.addshift {
  background-image: url(../images/icon_new_shift.svg);
  background-size: 16px;
  padding-left: 36px;
}

#dateofleave {
  /*background-image: url("images/calendar_grey.png");*/
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 90%;
  width: 80%;
  text-align: left;
  padding-left: 10px;
  min-width: 150px;
  border: 1px solid #cccccc;
}

.addleavesheet table.fields th, table.fields td {
  text-align: left;
}

.addleavesheet #dateofleave {
  margin-left: 3px;
}
/*
input[type="date"]#dateofleave::-webkit-inner-spin-button,
input[type="date"]#dateofleave::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
*/
.topbutton {
  text-align: right;
  position: relative;
  display: block;
  width: 100%;
  padding-right: 5px;
}


/* start Shared Hotlist */
.pointer{
  cursor: pointer;
}

.email-file {
  text-decoration: none;
  color: inherit;
}

.contents2 > table{
  text-align: center;
}
.sharedHotlistChekbox, .myHotlistCheck{
  padding-left: 15px !important;
  width: 10px;

}



.contents > table > thead > tr > td,
.contents2 > table > thead > tr > td,
.contents3 > table > thead > tr > td{
  font-size: 14px !important;
}

.sharedHotlistName{
  text-align: left;
}

.filter2{
  width: 460px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.filter2 input[type=text],
.filter3 input[type=text],
.inputBoxAddEmployeeSharedHotlist input[type=text],
.inputBoxAddEmpMyHotlist input[type=text]{
    padding: 6px 12px;
    font-size: 12px;
    box-sizing: border-box;
}

.inputBoxAddEmpMyHotlist{
  display: none;
  width: 350px;
  height: 75px;
  background: white;
  position: absolute;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 9999;
  margin-left: -150px;
  margin-top: 125px;
  border: 0px solid black;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  padding: 25px;
}

.inputBoxAddEmpMyHotlist:before{
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
  border-top: 0;
  left: 180px;
  top: -10px;
}

.inputBoxAddEmpMyHotlist > label {
    font-weight: bold;
    font-size: 16px;
    padding-left: 3px;
}

.inputBoxSharedHotlist{
  width: 350px;
  height: 200px;
  background: white;
  position: absolute;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 9999;
  margin-left: -150px;
  margin-top: 125px;
  border: 0px solid black;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  padding: 25px;
}
.inputBoxSharedHotlist:before {
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
  border-top: 0;
  left: 180px;
  top: -10px;

}

#employeeSearch{
  margin-top: 10px;
}
#sharedHotlistSearch{
  margin-top: 6px;
}

.greyBar{
  display: inline-block;
  height: 60px;
  background-color: #454A59;
  padding-left: 10px;
  width: 300px;
}

.greyMenuMyHotlists,
.greyMenuSharedHotlists{
  width: 100%;
}

.greyBar > button:last-child{
  background-image: url('../images/icon_trash_white.svg');
  background-size: 25px;
  background-position: center center;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  margin: 10px 0px 10px 10px;
}
.greyBar > button:first-child{
  background-image: url('../images/icon_plus.svg');
  background-size: 20px;
  background-position: center center;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  margin: 10px 0px 10px 10px;
}

.greyBarRight{
  display: inline-block;
  height: 60px;
  background-color: #454A59;
  padding-left: 10px;
  width: 300px;
}

.greyBarRight > .message{
  background-image: url('../images/icon_message.svg');
  background-size: 20px;
  background-position: 10px center;
  width: 110px;
  height: 40px;
  background-repeat: no-repeat;
  margin: 10px 0px 10px 10px;
  position: absolute;
  right: 20px;
  text-align: right;
}

.topMessageBar > .message {
  background-image: url('../images/icon_message.svg');
  background-size: 15px;
  background-position: 10px center;
  width: 90px;
  height: 25px;
  background-repeat: no-repeat;
  margin: 8px 0px 8px 10px;
  position: absolute;
  left: 10px;
  text-align: right;
  padding: 6px 12px !important;
  font-size: 10px !important;
}

.topMessageBar > .email {
  background-image: url('../images/icon_menu_send.svg');
  background-size: 15px;
  background-position: 10px center;
  width: 70px;
  height: 25px;
  background-repeat: no-repeat;
  margin: 8px 0px 8px 10px;
  position: absolute;
  left: 110px;
  text-align: right;
  padding: 6px 12px !important;
  font-size: 10px !important;
}

.topMessageBar > .active {
  background-color: #4ac671;
  color: #FFF !important;
}

.topMessageBar button {
  background-color: #BCBCBC;
  color: #FFF !important;
}

#bodyContainersMessage {
  margin-top: 45px;
  padding-top: 10px;
  padding-left: 20px;
  margin-right: 20px;
}

#bodyContainersMessage > input, select, textarea {
  border-radius: 5px;
}

#sbx_msg {
  width: 100%;
}

#sbe_email_above {
  width: 100%;
}

#subContMessage {
  width: 100%;
}

#subContMessage table {
  /*border: black solid 1px;*/
  border-spacing: 5px;
}

#subContMessage table tr td {
  /*border: black solid 1px;*/
  text-align: right;
}

.greyBarMessage{
  height: 60px;
  background-color: #454A59;
  padding-left: 10px;
  width: 600px;
  display: flex;
  align-items: center;
  position: relative;
}


.inputBoxSharedHotlist{
  display: none;
}

.inputBoxSharedHotlist > table > tbody > tr:first-child > td{
  padding: 10px 0 10px 0;
}
.inputBoxSharedHotlist > table > tbody > tr:first-child > td > label {
 font-weight: bold;
 font-size: 16px;
 padding-left: 3px;
}
.inputBoxSharedHotlist > table > tbody > tr:nth-child(2) > td {
  border: 1px solid #EAEAEA;
  border-radius: 5px;
   -webkit-box-shadow: 2px 2px 8px 0px #EAEAEA;
  box-shadow: 2px 2px 8px 0px #EAEAEA;
  padding-top: 3px;
  padding-bottom: 3px;
}
.inputBoxSharedHotlist > table > tbody > tr:nth-child(2) > td > label {
 color: #45B2E9;
 font-size: 12px;
 font-weight: normal;
 padding-left: 5px;

}

.inputBoxSharedHotlist > table > tbody > tr > td > input {
 width: 330px;
 height: 25px;
 border: 0px;
 font-size: 18px;
}
.inputBoxSharedHotlist > table > tbody > tr > td > input:focus {
 border: 0px solid white;
 box-shadow: 0px 0px white;
}

.inputBoxSharedHotlist > table > tbody > tr > td > input::placeholder {

}

.inputBoxSharedHotlist > table > tbody > tr:last-child > td{
  padding: 10px 0 10px 0;
}

.inputBoxSharedHotlist > table > tbody > tr:last-child > td > button:first-child{
  margin-left: 0px;
  float: left;
}
.inputBoxSharedHotlist > table > tbody > tr:last-child > td > button:last-child{
  margin-right: 0px;
  float: right;
}

.inputBoxAddEmployeeSharedHotlist{
  display:none;
  width: 350px;
  height: 75px;
  background: white;
  position: absolute;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  z-index: 9999;
  margin-left: -150px;
  margin-top: 125px;
  border: 0px solid black;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.4);
  padding: 25px;
}
.inputBoxAddEmployeeSharedHotlist:before {
  position: absolute;
  width: 0;
  height: 0;
  content: '';
  border: 10px solid transparent;
  border-bottom-color: #ffffff;
  border-top: 0;
  left: 180px;
  top: -10px;
}


#employeeSharedHotlistSearchPopUp{
  width: 350px !important;
  margin-top: 10px;
}

.inputBoxAddEmployeeSharedHotlist > label {
    font-weight: bold;
    font-size: 16px;
    padding-left: 3px;
}


.menuSingleSharedHotlists {
   padding: 10px 0 10px 0;
}

.menuSingleSharedHotlists > table > tbody > tr > td:first-child{
  width: 20px;
  text-align:center;
  color: #45B2E9;

}
.menuSingleSharedHotlists > table > tbody > tr > td:last-child{
  width: auto;
 text-align:left;
}
.nameSharedHotlist{
  font-family: 'Avenir LT Std', 'Avenir Next', Arial;
  font-size: 19px;
  padding-left: 15px;
}

.filter3{
  margin-bottom: 15px !important;
}

.filter3, .contents3, .menuSingleSharedHotlists > table
{
  width: 560px;
  margin: auto;
}

#singleSharedList{
  padding-bottom: 140px;
}


.contents3 > table {
  text-align: center;
}



.goBackSharedHotlists{
  font-size: 15px;
}


#containerSharedHotlist .contents{
  margin-top: 50px;
}

.total_results {
  font-size: small !important;
  font-weight: bolder !important;
  line-height: 1.2;
}

.counterBox {
  background-color: #45B2E9;
  border-radius: 5px;
  color: #FFF;
  height: 29px;
  padding: 5px 14px;
  position: relative;
  width: 54px;
}

.summarizePreferredLocation{
  margin-top: -17px;
  white-space: nowrap;
  width: 92px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

select.shiftmob.selectfull {
  width: auto;
  max-width: 202.27px;
  min-width: 94.5%;
}

.timeLine .deleteshift {
  width: 25px;
  text-align: right;
}

.timeLine .deletebutton {
    font-size: 14px !important;
    color: inherit;
    padding: 0px;
    border: none;
    transition: all .3s ease;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    margin: 2px 0px 0px 2px;
    cursor: pointer;
}

.timeLine .deleteshift:focus,
.timeLine .deletebutton:focus,
.timeLine .deletebutton img:focus {
  box-shadow: 0px 0px 0px 2px #45BEF4 !important;
}

h2.sectionhead {
  margin-top: 10px;
  margin-bottom: 0px;
}

label.compacttimesheet {
  position: absolute;
  font-size: 11px;
  margin-left: 2px;
  padding: 7px;
}

input.compacttimesheet {
    padding: 15px 0px 8px;
}

#delegateSaved p.tick, #emailsendstatus p.tick, #RatesSaveStatus p.tick, #RatesExpensesSaveStatus p.tick {
  background-image: url(employee/icon_round_tick_green.png);
  padding-left: 40px;
  background-repeat: no-repeat;
  background-position: left;
  font-size: 17px;
  line-height: 31px;
  color: #47C572;
  font-weight: 600;
}

#delegateSaved, #emailsendstatus, #dataupdate, #RatesSaveStatus, #RatesExpensesSaveStatus {
	opacity: 0;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
  transition: all .5s ease;
}
.contractRefPoup {
  font-weight: 400;
}

.contractContainer {
  position: relative;
  background-color: #eeeeee;
  width: 100%;
  height:180px;
  -webkit-border-radius: 10px;
  -moz-border-radius   : 10px;
  -o-border-radius     : 10px;
  -ms-border-radius    : 10px;
  border-radius        : 10px;
}

.versionSpan {
  position: relative;
  font-weight: bold;

  float: right;
  right: 40px;
  font-size: 15px;
}

.versionNumber {
  font-weight: normal;
}

.contractTimesheetStatus {
  position: absolute;
  text-align: center;
  padding-top: 6px;
  width: 100px;
  height: 25px;
  top: 19px;
  left: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius   : 5px;
  -o-border-radius     : 5px;
  -ms-border-radius    : 5px;
  border-radius        : 5px;
}

.contractTimesheetAction {
  cursor: pointer;
  position: absolute;
  top: 130px;
  left: 215px;
  text-align: center;
  padding-top: 6px;
  width: 100px;
  height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius   : 5px;
  -o-border-radius     : 5px;
  -ms-border-radius    : 5px;
  border-radius        : 5px;
}

#popupChangeAvailability > header > h3{
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 0px;
  padding-left: 3px;
}
.allButton{
  background-color: white !important;
  font-size: 0.8em!important;
  padding-left: 3px;
}

.greyDivider{
  width: 100%;
  height: 1px;
  border: 0px;
  background-color: #e3e3e3;
  margin: 15px 0 15px 0;
}

.halfWidth{
  width: calc(100%/2.06);
}

.hideEye{
  background-image: url('../images/eyeVisible.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px;
  background-color: white !important;
}

.invertHideEye{
  background-image: url('../images/eyeInvisible.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px;
  background-color: #919191 !important;
}

.invertHideEye:hover{
   background-color: #919191 !important;
}

.pinColumn{
    /* background-image: url("images/pin_column.svg"); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    background-color: white !important;
}
.pinColumn svg {
    width: 16px;
    height: 16px;
    fill: #919191;
}
.pinColumn svg  path {
    fill: #919191;
}
.invertPinColumn {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
    background-color: #919191 !important;
}
.invertPinColumn svg{
    fill: white;
    width: 16px;
    height: 16px;
}


/* Styles taken from cp.css */
span.fileIcon {
  display: inline-block;
  font-size: 8px;
  font-weight: 600;
  padding: 5px 3px;
  color: #FFF;
  background-color: mediumseagreen;
  border-radius: 4px;
  text-transform: uppercase;
  vertical-align: middle;
  margin-right: 5px;
  min-width: 22px;
  text-align: center;
  box-sizing: border-box;
}

span.fileIcon.pdf {
  background-color: #EC5C63;
}

span.fileIcon.doc,
span.fileIcon.docx {
  background-color: cornflowerblue;
}
/* End of styles taken from cp.css */

/* Styles for the new HotlistColumn filter at popup*/
.HotlistColumnFilterUl{max-width: 100%; max-height: 295px; overflow: auto; padding-right: 5px;}
ul.filters{list-style-type: none; padding: 0px; margin: auto; }
ul.filters li{width: 100%; margin: 0px; padding-left: 0px; padding-right: 0px;}
#popupFilterBookings ul.filters button.filterItem{width: 100% !important;}
.filterLabel{ font-size: 14px; font-weight: 500; padding: 10px 4px 4px 4px;}

/*new classes for My Hotlist*/
tr.myHotlistRow > td{

  font-size: 8.5pt !important;
}
td.myHotlistName{
  white-space: nowrap;
  width: 150px;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;

}
td.myHotlistStatus{
  width: 80px;
  max-width: 80px;
  padding: 0px;
  text-align:center;
  text-overflow: ellipsis;
  overflow: hidden;

}
td.myHotlistPhone{
  width: 50px;
  max-width: 50px;
  padding: 0px;
  text-align:center;
  text-overflow: ellipsis;
  overflow: hidden;
}
td.myHotlistPhone > a > button{
  margin: auto !important;
}

td.myHotlistAction{
  white-space: nowrap;
  min-width: 120px;
  max-width: 120px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align:center;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.orangeText{
  color: #ff981d;
}

button.orangeRemoveIcon{
  width: 120px;
  background-image: url('../images/icon_hot_list_remove.svg');
  background-position: 20px center;
  background-color: transparent !important;
  background-repeat:no-repeat;
  text-align: right;
  padding-right: 25px;
}

button.orangeRemoveIcon:hover{
  background-color: transparent !important;
}

/*New Classes for Shared Hotlist*/
td.sharedHotlistName{
  min-width: 150px;
  max-width: 150px;
}
td.sharedHotlistStatus{
  text-align: center;
  min-width: 80px;
  max-width: 80px;
}
td.sharedHotlistPhone{
  text-align: center;
  min-width: 50px;
  max-width: 50px;
}
td.empSHLName{
  white-space: nowrap;
  min-width: 150px;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 8.5pt;
}
td.empSHLStatus{
  min-width: 80px;
  max-width: 80px;
  padding: 0px;
  text-align:center;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 8.5pt;
}
td.empSHLPhone > a > button{
  margin: auto !important;
}

table.filters.fields thead th {
  white-space: normal;
  vertical-align: bottom;
}

.hotlistSuccessPopup{
  background-color:transparent;
  z-index: 999;
  position: fixed;
  bottom: 170px;
  left: 50%;
  visibility: hidden;
  transform: translateX(-50%) translateY(150%) scaleX(0.8) !important;
  backface-visibility: hidden;
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
  background-color: #FFF;
  width:350px;
  height: 200px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 27%);
  -webkit-box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 27%);
  -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.27);
  padding:20px;
  text-align: center; margin: 1em 0;
}

.hotlistSuccessPopup img {
  display:block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  height: 30%;
}

.hotlistSuccessPopup p, .hotlistSuccessPopup span{
  color:#4ac661;
  font-weight: bold;
  font-size:20px;
}

.hotlistSuccessPopup p{
  margin-top: 40px;
}

.ErrorPopup{
  background-color:transparent;
  z-index: 999;
  position: fixed;
  bottom: 170px;
  left: 50%;
  visibility: hidden;
  transform: translateX(-50%) translateY(150%) scaleX(0.8) !important;
  backface-visibility: hidden;
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
  background-color: #FFF;
  width:350px;
  height: 200px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 27%);
  -webkit-box-shadow: 0px 10px 30px 0px rgb(0 0 0 / 27%);
  -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.27);
  padding:20px;
  text-align: center; margin: 1em 0;
}

.ErrorPopup img {
  display:block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  height: 30%;
}

.ErrorPopup p, .ErrorPopup span{
  color:#4F4F4F;
  font-weight: bold;
  font-size:20px;
}

.ErrorPopup p{
  margin-top: 40px;
}

.extrOptionsPopup {
    height: auto !important;
}

.extrOptionsPopup img {
    margin-top: 5px !important;
}

.buttonCancel {
    cursor: pointer;
    display: inline-block;
    border: 1px;
    padding: 7px 35px;
    background-color: #E9E9E9;
    border-radius: 4px;
    position: relative;
    right: 10px;
}

.buttonSave {
    cursor: pointer;
    background-color: #45B2E9;
    transition: 0.3s ease-out;
}

.buttonSave {
    display: inline-block;
    border: 1px;
    padding: 7px 35px;
    background-color: #45B2E9;
    border-radius: 4px;
    position: relative;
}

.buttonSave > span {
    color: white;
}


.bookingsBulkActionBar, .availabilityBulkActionBar, .exceedanceBulkActionBar, .bookingGridBulkActionBar {
  background-color:transparent;
  z-index: 999;
  position: fixed;
  bottom: 20px;
  left: 50%;
  visibility: hidden;
  transform: translateX(-50%) translateY(150%) scaleX(0.8) !important;
  backface-visibility: hidden;
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.showBar, .showSuccessHotlist {
  visibility: visible;
  transform: translateX(-50%) translateY(0px) scaleX(1) !important;
  opacity: 1;
  transition: transform .35s cubic-bezier(0.33, 2, 0.2, 0.8), opacity 0.1s, visibility 0s;
}


.availabilityBulkActionBar > table, .bookingsBulkActionBar > table, .exceedanceBulkActionBar > table, .bookingGridBulkActionBar > table {
 background-color: #202126;
 color: white;
 text-align:center;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
 overflow: hidden;
 box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.27);
 -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.27);
 -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.27);
}

.bookingsBulkActionBar > table > tbody > tr > td, .availabilityBulkActionBar > table > tbody > tr > td, .exceedanceBulkActionBar > table > tbody > tr > td, .bookingGridBulkActionBar > table > tbody > tr > td {
  background-color: #202126;
  border: 0px;
  padding: 0px;
  margin: 0px;
}

.bookingsBulkActionBar > table > tbody > tr > td{
  border: 0px;
  padding: 0px;
  margin: 0px;
}


/*Changes Task 469 y 456*/
.bookingsBulkActionBar p,
.availabilityBulkActionBar p,
.exceedanceBulkActionBar p,
.bookingGridBulkActionBar p {
  position: absolute;
  margin: auto;
  font-size: 11px;
  padding-top: 38px;
  width:inherit;
}

.frameCounterCheckBoxes{
  background-color: #45b2e9;

}
.counterCleanSelected{
  width: 90%;
  padding-top: 7px;
}

.counterCleanSelected button.close{
    width: 100%;
    background-color: transparent;
    background-image: url('../images/close_icon_action_bar.svg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 10px;
    opacity: 1;
    margin: 0px;
}
.counterCleanSelected button.close:hover{
  background-color: transparent;
}
.counterCleanSelected button.close:focus{
  box-shadow: none;
}
.counterCheckBoxes{
  font-size: 23px;
  line-height: 1 !important;
  margin: -6px 0 4px 0;
  font-weight: bold;
}
.counterTitle{
  font-size: 11px;
  text-align: center;
}
.copySelected{
  background-size: 20px !important;
}
.cancelSelected{
  background-size: 25px !important;
}
.reassignSelected{
  background-size: 30px !important;
}
.hotlistSelected{
  background-image: url('images/icon_flame.svg');
  background-size: 15px;
}

.updateSelected {
  background-image: url('images/bulk_availability_icon.svg');
  background-size: 20px;
}

.emailSelected{
  background-image: url('../images/icon_menu_send.svg');
  background-size: 25px;
}
.textSelected{
  background-size: 14px !important;
}
.confirmationSelected{
  background-size: 38px !important;
}

.shareSelected {
  background-size: 20px !important;
}

.hotelSelected {
  background-size: 32px !important;
}

.groupSelected {
  background-size: 24px !important;
}

.confirmSelected:hover, .copySelected:hover, .cancelSelected:hover, .reassignSelected:hover, .hotlistSelected:hover,
.emailSelected:hover, .textSelected:hover, .confirmationSelected:hover, .highlightSelected:hover,
.shareSelected:hover, .hotelSelected:hover, .groupSelected:hover, .updateSelected:hover,
.autobookSelected:hover {
  background-color: #454a59;
}


.confirmSelected, .copySelected, .cancelSelected, .reassignSelected, .hotlistSelected, .emailSelected, .textSelected, .highlightSelected, .shareSelected, .confirmationSelected, .hotelSelected, .groupSelected, .updateSelected, .autobookSelected {
  background-position: center 8px;
  background-repeat: no-repeat;
}

.hideEyeIcon {
  display:none;
}
.showEyeIcon {
  display: inline-block;
}

.lightText {
  font-weight: 300;
}

.lighter {
  opacity: 0.5;
}

.non-bookable-btn, .incomplete-riskassmt-btn {
  background-color: inherit;
  border: none;
  box-shadow: none !important;
  font-size: 1.1em;
  font-weight: 500;
  color: #FFF;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: -10px;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  cursor: pointer;
  padding-left: 0;
}

.incomplete-riskassmt-btn {
    width: 100%;
}

.toolbar.filterbar.toolbarDashboard{
  height: 67px;
}

.pictureCandidates{
  width: 40px;
  height: 40px;
  background-color: #aeaeae;
  border-radius: 50%;
  background-image: url('images/profile-flow.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px;
}
#goBackCandidatesScreen{
    background-image: url('../style/images/icon_arrow_left_white.svg');
    margin-left: 10px;
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}
#frameCandidatesScreen{
    background-color: #ffffff;
    padding: 20px 20px 0px 20px;
}

.dataCandidatesScreen{
    display: flex;
}
.boxesCandidatesScreen{
    align-items: center;
    flex-basis: auto;
}
.mainInfoScreenCandidates{
    margin-top: 9px;
    font-weight: bold;
    font-size: 16px;
}
.descInfoScreenCandidates{
    color: #aeaeae;
}
.pictureScreenCandidates{
    display: inline-block;
    flex-grow: 0;

}
.nameScreenCandidates{
    padding-left: 20px;
    padding-right: 100px;
    flex-grow: 0;
}
.totalShiftsScreenCandidates,
.firstPaidScreenCandidates{
    border-right: 2px solid #dfdfdf;
}
.totalShiftsScreenCandidates,
.firstPaidScreenCandidates,
.lastPaidScreenCandidates{
    padding-right: 50px;
    padding-left: 20px;
    flex-grow: 0;

}

.iconsScreenCandidates{
    flex-grow: 1;
}
.phoneIconScreenCandidates,
.notesIconScreenCandidates,
.messageIconScreenCandidates,
.InIconScreenCandidates,
.IdIconScreenCandidates,
.docsNumberIconScreenCandidates,
.resendTimesheetScreenCandidates{
    margin-top: 9px;
    float: left;
}

.messageIconScreenCandidates button{
    background-image: url('../images/icon_message.svg');
    background-position: center;
    background-position-x: 5px;
    background-size: 14px;
    background-repeat: no-repeat;
    padding-left: 25px !important;
}
.InIconScreenCandidates button{
    background-image: url('../images/icon_linkedin.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}


.phoneIconScreenCandidates button{
    padding-left: 25px !important;
    padding-right: 15px !important;
    background-position-x: 5px !important;
}

.idScreenCandidates{
    text-align: right;
    color: #aeaeae;
    position:relative;
    flex-grow: 2;
}
.idScreenCandidates span{
    position: absolute;
    bottom: 0;
    right: 0
}

#frameCandidatesScreen hr{
    border-color: #dfdfdf;
    margin-top: 20px;

}

.activity-menu
{
    background-color: #FFF;
    text-align: center;
    height: 71px;
    overflow: hidden;
}

.activity-menu ul
{
    list-style: none;
    padding: 0 92px;
    max-width: 1100px;
    margin: auto;
    font-size: 0;
    overflow: hidden;
}

.activity-menu li
{
    padding: 25px 20px;
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #8D8D8D;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

.activity-menu li:after
{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #45B2E9;
    opacity: 0;
    transform-origin: left center;
}

.activity-menu li:before
{
    content: '';
    position: absolute;
    z-index: -1;
    width: calc(100% - 10px);
    height: calc(100% - 20px);
    top: 10px;
    left: 5px;
    background-color: #F8F8F8;
    border-radius: 6px;
    opacity: 0;
    transform: scale(0.5);
    transition: transform .1s, .05s;
}

.activity-menu li.on
{
    color: #242424;
    font-weight: 600;
}

.activity-menu li.on:after
{
    opacity: 1;
}

.activity-menu li:not(.on):hover:before
{
    opacity: 1;
    transform: scale(1);
}

.activity-menu li:not(.on):active:before
{
    box-shadow: inset 0px 0px 5px rgba(0,0,0,0.08);
}

.activity-menu li.sub-items.on
{
    background-image: url('../images/icon_down_arrow_candidates_screen.svg');
    background-repeat: no-repeat;
    background-position: right 20px center;
    padding-right: 40px;
    background-size: 12px 6px;
}
.candidatesTab{
    background-color: #eaeaea;
}

.panels
{
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
    margin: 0 auto;
}
.panels input,
.panels select,
.panels textarea {
    font-size: 12px;
    border: 1px solid #dddddd;
    padding: 10px;
    border-radius: 5px;
}

.panels input:disabled,
.panels select:disabled,
.panels textarea:disabled {
    opacity: 1;
    background-color: #ffffff;
    color: #787878;
    border: 1px solid white;
    font-size: 12px;
}

.panels select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('images/icon_arrow_down.png') no-repeat 98% center;
}

.panels select:disabled {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    background: none;
}

.panels input:focus,
.panels select:focus,
.panels textarea:focus {
    font-size: 12px;
    border: 0px;
    box-shadow: none;
    border: 1px solid #4bc7f5;
    box-shadow: 0px 0px 3px 0px #4bc7f5;
    display: flex;
    flex-direction: column;
}

.panel
{
    margin: 10px;
    width: calc(100%/3 - 20px);
    background-color: #FFF;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
}

.panel-header
{
    background-color: #F8F8F8;
    padding: 20px;
}

.panel-header .panel-header-title
{
    color: #242424;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.panel-header-title button {
    margin: 0;
    margin-left: 5px;
    float: right;
}
.panel-header-title button.orange {
    border: 1px solid #4BC7F5;
}
.panel-header-title button.green {
    border: 1px solid #4ac661;
}
.panel-body{
    padding: 20px;
    min-height: 570px;
    flex-grow: 1;
}

.panel-body-data{
    float:left;
    width: 100%;
    padding-top: 10px;
}

.panel-body-data-item {
    width: 180px;
    float: left;
    font-weight: bold;
    font-size: 12px;
    padding-left: 12px;
    padding: 6px 0 4px 0;

}

.panel-body-data-input {
    float: left;
    max-width: 200px;
    padding-right: 15px;
    font-size: 12px;
    color: #787878
}
.panel-body-data-input span{
    float: left;
    max-width: 200px;
    padding-right: 15px;
    font-size: 12px;
    color: #787878;
    padding: 10px;
}

.colorTag{
    text-align: center;
    border-radius: 5px;
    padding-left: 18px;
    padding-right: 20px;
    padding-top: 4px;
    padding-bottom: 3px;
    font-size: 13px;
}

.hiddenFieldScreenCandidate{
    display: none;
}

.panel-body-data-input input,
.panel-body-data-input select
{
    min-width: 200px;
    max-width: 200px;
    color: #000000;

}

.panel-body-data-input input[type=radio]{
    min-width   : 10px;
}
.panel-body-data-input input::-webkit-outer-spin-button,
.panel-body-data-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Firefox */
.panel-body-data-input input[type=number] {
    -moz-appearance: textfield;
}


.panel-footer-data{
    float:left;
    width: 100%;
    color: #aeaeae;
}

.panel-footer-data p{
    text-align: right;
    padding-right: 15px;
}
.panels_errors{
    background-image: url('../images/exclamation.svg');
    background-repeat: no-repeat;
    background-position: 8px center;
    padding-left: 10px;
    padding-top: 5px;
    position:absolute;
    padding: 8px 10px 8px 0px;
    border-radius: 5px;
    width: 150px;
    padding-left: 33px;
    --bkcolor: #ffffff;
    --arrowPos : 0%;
}
.panels_errors:after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--arrowPos);
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: var(--bkcolor);
    border-top: 0;
    margin-left: -7px;
    margin-top: -7px;
}


#aboutMe .panel-body-data-item:not(.normal) ,
#aboutMe .panel-body-data-input:not(.normal) {
    width: 380px;
    float: left;
    font-weight: bold;
    font-size: 12px;
    /*padding-left: 15px;*/

}
#aboutMe .panel-body-data-input textarea:disabled{
    color: #787878;
    border-color: 1px solid #ffffff;
}
#aboutMe .panel-body-data-input textarea
{
    min-width: 200px;
    max-width: 380px;
    width: 380px;
    color: #000000;
    border-color: 1px solid #aeaeae;
}

#dutyCand .panel-body-data input{
    border: 1px solid #eaeaea;
    width: 50%;
    box-shadow: 0px 2px 5px rgb(0 0 0 / 20%);
    padding: 5px;
}
#dutyCand .panel-body-data input:focus{
    border: 1px solid #4bc7f5;
    width: 50%;
    box-shadow: 0px 0px 3px 0px #4bc7f5;
    padding: 5px;
}

#internal .panel-body{
    min-height: 680px;
}

.panel-max-height{
    max-height: 1100px;
    overflow-y: scroll;
}
.panel-body-scrolleable{
    overflow: auto;
}
.panel-footer-sticky{
    position: sticky;
    bottom: 0;
    background-color: white;
}
/*Payroll Panel*/
#payroll .colorTag{
    margin-bottom: 14px;
}
.candidatesTab  #ui-datepicker-div{
    box-shadow: 0px 2px 5px rgb(0 0 0 / 20%);
}
.candidatesTab .ui-widget-header .ui-icon {
    background-image: url('images/ui-icons_222222_256x240.png');

}
.candidatesTab .ui-icon-circle-triangle-e{
    background-position: -48px -192px !important;
}
.candidatesTab .ui-icon-circle-triangle-w{
    background-position: -80px -192px !important;
}
/*End of Payroll Panel*/

.weekSelectorCandidateScreen{
    width: 260px;
    float: right;
    background-color: white;
    color: black;
    padding: 5px;
    margin-top: -5px;
}
.weekSelectorCandidateScreen .sheet_week,
.weekSelectorCandidateScreen .sheet_year{
    color: black;
    font-weight: normal;
}
.weekSelectorCandidateScreen #showCalendar{
    padding-top: 4px;
    padding-left: 17px;
}

#butPrevWeekPanels, #butNextWeekPanels{
    width: 7px;
    height: 7px;
    padding: 7px;
    cursor: pointer;
    opacity: 1;
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center;
    filter:invert(1);
    transition: all .3s ease, color .3s linear, background .3s linear;
}

#butPrevWeekPanels{

    float: left;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-left: 12px;
    background-image: url('images/icon_arrow_left_white.svg');

}

#butNextWeekPanels{
    float: right;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-right: 12px;
    background-image: url('images/icon_arrow_right_white.svg');

}

#butPrevWeekPanels:hover,
#butNextWeekPanels:hover {
    background-color: #343434;
    opacity: 1;
    transition: all .1s ease, color .1s linear, background .1s linear;

}

.rowTablePanel {
    display: flex;

}
.headTablePanel {
    flex-grow: 1;
    flex-basis: auto;
    width: 25%;
    opacity: 1;
    color: #000000;
    font-size: 12px;
    font-weight: bold;
}
.fieldTablePanel {
    flex-grow: 1;
    flex-basis: auto;
    width: 25%;
    opacity: 1;
    color: #787878;
    font-size: 12px;
    margin-top: 10px;
}

.shiftTag{
    padding: 3px;
    color: white;
    text-align: center;
    border-radius: 5px;
}
.shiftTag.grey{
    background-color: #BCBCBC;
    color: #FFF;
}
.shiftTag .emptyTag{
    padding: 4px;
}
.shiftTag .badge2{
    position:absolute;
    margin-top: -9px;
    margin-left: 9px;
    width: 18px;
    z-index: 1;
}


#panel-body-compliance .rowTablePanel .headTablePanel:first-child,
#panel-body-compliance .rowTablePanel .fieldTablePanel:first-child{
    flex-grow: 2;
    flex-basis: auto;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 5px;
}
#panel-body-compliance .rowTablePanel .headTablePanel:nth-child(2),
#panel-body-compliance .rowTablePanel .fieldTablePanel:nth-child(2){
    flex-grow: 2;
    flex-basis: auto;
    width: 155px;
}

.shiftTag.greenText{
    color: #4ac661;
}

.shiftTag > img{
    display: inline-block;
}

@media screen and (max-width: 1200px) {

    .panel
    {
        margin: 10px;
        width: calc(50% - 20px);
        background-color: #FFF;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
    }
    .activity-menu ul
    {
        padding: 0 10px;
    }

}

@media screen and (max-width: 780px) {
    .panels
    {
        padding: 5px 10px;
    }

    .panel
    {
        margin: 5px 0;
        width: 100%;
    }
    .activity-menu ul
    {
        padding: 0;
    }

    .activity-menu li
    {
        width: 100%;
        padding: 25px 0px;
        text-align: right;
    }

    .activity-menu li.sub-items
    {
        background-position: right 10px center;
    }

    .activity-menu li.on:after
    {
        display: none;
    }

}

#free_sublocation_pcode_field .pcodepass, #free_finish_sublocation_pcode_field .pcodepass {
  /*content: "\2713";
  color: #4AC661;*/
  position: absolute;
  font-size: 24px;
  right: 12px;
  top: 10px;
  font-weight: bold;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

#free_sublocation_pcode_field .pcodepass p.tick, #free_finish_sublocation_pcode_field .pcodepass p.tick {
  background-image: url(employee/icon_round_tick_green.png);
  padding-left: 40px;
  background-repeat: no-repeat;
  background-position: left;
  font-size: 17px;
  line-height: 31px;
  color: #47C572;
  font-weight: 600;
  margin: 0px -11px;
  height: 32px;
}

#free_sublocation_pcode_field .pcodefail, #free_finish_sublocation_pcode_field .pcodefail {
  /*content: "\2716";*/
  color: #DD314E;
  position: absolute;
  font-size: 26px;
  right: 26px;
  top: 7px;
  font-weight: bold;
  margin: 0px -11px;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}

.inline.freetext {
  width:64%;
  margin-top: 0;
}

.inline.freetext.pcode {
  width:35%;
  margin-top: 0;
}

.noborder {
  border: none;
}

input.extrafields_edit.nobgcolor {
  background-color: unset;
}

.extraDataControls {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0px;
  border-top: solid 1px #EEE;
  padding: 7px 10px;
  background-color: #FFF;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  min-height: 57px;
  box-sizing: border-box;
}

.middleofgroup span, .lastingroup span {
  display: none;
}

.sologrouphide {
  display: none;
}

.sologroup {
  width: 4px;
  position: absolute;
  left: -5px;
  height: 80%;
  top: 3px;
}

.sologroup.summary {
  top: 8px;
}

.firstingroup {
  width: 4px;
  position: absolute;
  left: -5px;
  height: 100%;
  top: 3px;
}


.firstingroup.summary {
  top: 8px;
}

.middleofgroup {
  width: 4px;
  position: absolute;
  left: -5px;
  height: 109%;
  top: -1px;
}

.lastingroup {
  width: 4px;
  position: absolute;
  left: -5px;
  height: 92%;
  top: -1px;
}

.sologroupend {
  top: 96%;
}

.firstingroup span, .sologroup span {
  width: 16px;
  position: absolute;
  left: -7px;
  text-align: center;
  border-radius: 12px;
  height: 16px;
  font-size: 0.8em;
  padding-right: 2px;
  padding-top: 2px;
  top: -4px;
  z-index: 1;
}

.sologroup .groupbracket, .firstingroup .groupbracket, .lastingroup .groupbracket {
  width: 21px;
  position: absolute;
  height: 4px;
}

.lastingroup .groupbracket {
  bottom: 0px;
}

#UpdateActionsBarPopup table.fields td:not(.actualt) {
    padding: 2px !important;
}

.button.grey.admin_travelshift {
  padding: 5px 10px 5px 39px;
  background-image: url(employee/travelshift.png);
  background-repeat: no-repeat;
  background-size: 32px;
  font-size: 12px !important;
  background-position: 3px 7px;
}

.button.small.recurringshift:hover {
  background-color: #A6D6F3 !important;
  opacity: 0.7;
}

.zero_margin {
  margin: 0px;
}

#dayDateInfo {
  display: inline;
  float: right;
  position: absolute;
  font-weight: inherit;
  font-size: inherit;
  text-align: center;
  padding: 0px 0px 0px 5px;
  top: 16px;
}

#dayDateInfo.bookingsh {
  top: 0px;
}

.fatigueScore {
  font-weight: 600;
}

.score {
  border-radius: 50%;
  display: inline-block;
  padding: 0.4em;
  min-width: 1.4em;
  text-align: center;
}

.messagePanel {
  width: 100%;
  height: 100%;
  background-color: #FFF;
  box-sizing: border-box;
}

.messageWebChatPanel,
.messageWebPanel {
    width: 100vm;
    max-width: none;
    height: 100%;
    margin: 0;
    background-color: #FFF;
    box-sizing: border-box;
}

.messageWebChatPanel header,
.messageWebPanel header {
    background-color: #45B2E9;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    color: #FFF;
}

.messageWebChatPanel footer {
    position: absolute;
    left: 5%;
    bottom: 5%;
    width: 100%;
}

.messageWebChatPanel header:after,
.messageWebPanel header:after,
.messagePanel header {
  background-color: #000;
  color: #FFF;
}

.messagePanel header:after {
  content: '';
  display: block;
  clear: both;
}

.messagePanel header label {
  display: inline-block;
  padding: 15px 20px;
  font-weight: bold;
  font-size: 14px;
}

.messageWebChatPanel header label {
    display: inline-block;
    padding: 5% 25%;
    font-weight: bold;
    font-size: 18px;
}


.messageWebPanel header label {
    display: table-cell;
    padding: 20% 0%;
    background-position: center;
    font-weight: bold;
    font-size: 18px;
}

.messageWebChatPanel header label.on.active,
.messageWebPanel header label.on.active,
.messagePanel header label.on.active{
  background-color: #454A59;
}

.messageWebChatPanel header label.on,
.messageWebPanel header label.on,
.messagePanel header label.on {
  background-color: #000000;
}

.messagePanel header button {
  float: right;
  margin: 15px 20px;
}

.messageWebChatPanel header button,
.messageWebPanel header button{
    float: left;
    margin: 15px 30px;
    display: table-cell;
    padding-top: 8%;
}

.messageWebChatPanel header button.close,
.messageWebPanel header button.close,
.messagePanel header button.close,
.dialogHeader button.close,
div.greyBarMessage button.close {
  height: 20px;
  width: 20px;
  background-color: transparent;
  background-image: url('../images/close_dialog.svg');
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
}

.messageWebChatPanel header button.close:hover,
.messageWebPanel header button.close:hover,
.messagePanel header button.close:hover,
.dialogHeader button.close:hover,
div.greyBarMessage button.close,
div.greyBarMessage button.back {
  opacity: 1;
  background-color: transparent !important;
}

div.greyBarMessage button.back {
  height: 20px;
  width: 20px;
  background-color: transparent;
  background-image: url('../images/small_left_arrow.png');
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.75;
}

div.greyBarMessage button.back {

}

div.greyBarMessage button.close {
  right: 20px;
  position: absolute;
}

div.greyBarMessage p {
  color: white;
  font-size: 14px;
}


.messageWebChatPanel .filter,
.messageWebPanel .filter,
.messagePanel .filter {
  padding: 15px 20px;
}

.messageWebChatPanel .filter input[type=text],
.messageWebPanel .filter input[type=text],
.messagePanel .filter input[type=text] {
  padding: 8px 12px;
  font-size: 12px;
  box-sizing: border-box;
}

.messageWebChatPanel .contents,
.messageWebPanel .contents,
.messagePanel .contents{
  height: 90%;
  overflow: auto;

}

.messageWebChatPanel .contents,
.messageWebChatPanel .contents2,
.messageWebChatPanel .contents3,
.messageWebChatPanel .notify,
.messageWebPanel .contents,
.messageWebPanel .contents2,
.messageWebPanel .contents3,
.messageWebPanel .notify,
.messagePanel .contents,
.messagePanel .contents2,
.messagePanel .contents3,
.messagePanel .notify {
  padding: 5px 20px;
  position: absolute;
  top: 170px;
  left: 0px;
  right: 0px;
  bottom: 100px;
  overflow: auto;
}

.messageWebChatPanel .contents2
.messageWebPanel .contents2
.messagePanel .contents2{
  top: 170px !important;
  bottom: 50px !important;
}

.messageWebChatPanel .contents3
.messageWebPanel .contents3
.messagePanel .contents3{
  top: 200px !important;
  bottom: 50px !important;
  margin-top: 5px;
}

.messageWebChatPanel .contents *
.messageWebPanel .contents *
.messagePanel .contents * {
  font-size: 12px;
}

.messageWebChatPanel .notify,
.messageWebPanel .notify,
.messagePanel .notify,
.notify.tick {
  background-color: rgba(255,255,255,0.7);
  display: none;
  text-align: center;
  color: #48C562;
  font-size: 15px;
  font-weight: 600;
  background-image: none;
}

.messageWebChatPanel .notify.checkmark
.messageWebPanel .notify.checkmark
.messagePanel .notify.checkmark {
  background-image: url('images/checkmark_animation_2.gif');
  background-repeat: no-repeat;
  background-position: center;
}

.messageWebChatPanel .notify *
.messageWebPanel .notify *
.messagePanel .notify * {
  font-size: inherit;
  vertical-align: middle;
}

#containerMessagePanel {
  position: fixed;
  z-index: 100;
  top: 0px;
  bottom: 0px;
  left: 100%;
  width: 600px;
  margin-left: 0px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
}

#containerMessagePanel.on {
  margin-left: -600px;
  -webkit-transition: all .1s ease;
  -o-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  transition: all .1s ease;
}

#containerWebChatPanel {
    position: fixed;
    z-index: 100;
    left: 100%;
    bottom: 0%;
    top: 0px;
    width: 375px;
    margin-top: 0px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

#containerWebChatPanel.on {
    margin-left: -375px;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    transition: all .1s ease;
}

#containerWebMessagePanel {
    position: fixed;
    z-index: 100;
    left: 0px;
    bottom: 10%;
    top: 75%;
    width: 375px;
    margin-top: 0px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
}

#containerWebMessagePanel.on {
    margin-top: -607px;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    -moz-transition: all .1s ease;
    -ms-transition: all .1s ease;
    transition: all .1s ease;
}

#containerWebMessageForms,
#containerMessageForms {
  height: 100%;
}

.footerWebMessage,
.footerMessage{
  position: relative;
  background-color: white;
  margin-top: -55px;
  width: 100%;
  padding: 5px 0 5px 15px;
}

.messageChat{
  position: relative;
  height: 50%;
  margin-bottom: 10px;
  background-color: #f7f7f7;
  overflow: auto;
}

.messageWebChatContainer {
    position: relative;
    background-color: #f8f8f8;
    display: grid;
    align-content: flex-start;
    justify-content:center;
}

.main-container {
  padding: 20px 30px 15px 30px;
}

.main-container-sender {
  padding: 20px 100px 15px 30px;
}

.main-container-rx {
  padding: 20px 30px 15px 100px;
}
/* CARDS */

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  margin: -10px;
  padding: 20px;
  width: 500px;
  display: grid;
  grid-template-rows: 9px 30px 0.4fr;
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
}

.card:hover {
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
  transform: scale(1.01);
}

.card__title {
  grid-row: 2/3;
  font-weight: 400;
  color: #000000;
}

.card__body {
  grid-row: 3/4;
  font-weight: 400;
  color: #000000;
}

.card__apply {
  grid-row: 1/3;
  align-self: right;
  text-align: right;
  color: #37C3CA;
}

.cards-sender {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-sender {
  margin: -10px;
  padding: 20px;
  width: 500px;
  display: grid;
  grid-template-rows: 9px 30px 0.4fr;
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
}

.card__body-sender {
  grid-row: 1/4;
  font-weight: 400;
  color: #000000;
}

.card__apply-sender {
  grid-row: 2/3;
  align-self: right;
  text-align: right;
  color: #37C3CA;
}

.card__body-rx {
  grid-row: 1/4;
  font-weight: 400;
  color: #ffffff;
}

.card__apply-rx {
  grid-row: 2/3;
  align-self: right;
  text-align: right;
  color: #ffffff;
}

/* CARD BACKGROUNDS */

.card-1 {
  background: #ffffff;
}

.card-2 {
  background: #45B2E9;
}
/* RESPONSIVE */

@media (max-width: 1600px) {
  .cards {
    justify-content: center;
  }
}

@media only screen and (max-height: 800px) {
  .messageChat {
    height: 35%;
  }
}

@media only screen and (max-height: 600px) {
  .messageChat {
    height: 30%;
  }
}


.chatBubble{
  max-width: 350px;
  float: right;
  background-color: #45B2E9;
  border-radius: 5px;
  box-shadow: 0px 2px 10px -3px grey;
  padding: 10px 30px 10px 20px;
  margin: 20px 10px 20px 10px;
  color: #FFF;
  clear: both;
  position: relative;
}

.chatBubble div{
  width: 500px;
  text-align: right;
  position: absolute;
  right: 5px;
  bottom: -30px;
  color: #707070;
}

.chatBubble div span{
  color: #45B2E9;
}

.chatBubbleWhite {
    max-width: 350px;
    float: left;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 2px 10px -3px grey;
    padding: 10px 30px 10px 20px;
    margin: 20px 10px 20px 10px;
    color: #000;
    clear: both;
    position: relative;
}

.chatBubbleWhite div {
    color: black;
    width: 500px;
    text-align: left;
    position: absolute;
    left: 5px;
    bottom: -30px;
    color: #707070;
}

.chatBubbleWhite div span {
    color: #45B2E9;
}

.chatEmail {
  width: 520px;
  float: right;
  background-color: #45B2E9;
  border-radius: 5px;
  box-shadow: 0px 2px 10px -3px grey;
  padding: 10px 30px 10px 20px;
  margin: 10px 10px 20px 10px;
  clear: both;
  position: relative;
}

.chatEmail table tr td {
  padding: 3px;
  color: #FFF;
}

.chatEmail div{
  color: black;
  width: 500px;
  text-align: right;
  position: absolute;
  right: 5px;
  bottom: -20px;
  color: #707070;
}

.chatEmail div span{
  color: #45B2E9;
}

.meesageTopIcon{
  background-image: url('../images/icon_message.svg');
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 10px !important;
  padding: 8px;
  background-color: #707070;
  border-radius: 50px;
}

.phoneTopIcon{
  background-image: url('../images/icon_phone.svg');
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 70px;
}

.linkTopIcon{
  position: absolute;
  right: 110px;
}

.cursor {
  cursor: pointer;
}

.cursor-none {
  cursor: default;
}

.att-del-file {
  fill: #ff4d4d;
}

.att-del-file:hover {
  fill: #FF7373;
}

.bold {
  font-weight: bold;
}

.white-arrow {
  background-image: url('../images/small_left_white_arrow.png') !important;
}

.filter-whit {

}

.paddingLeft {
    display: inline;
    padding-left: 8px;
}

.notdelivered {
    color: #DD314E;
}

.notdelivered > span {
    color: white !important;
    background-color: #DD314E;
    border-radius: 50px;
    padding: 3px 8px;
}

.customInputs {
    border-radius: 5px !important;
    font-size: 12px !important;
    padding: 8px !important;
}

.red_dot {
    border-radius: 50%;
    width: 1px;
    height: 1px;
    padding: 5px;
    margin-left: 5px;
    background: #DD314E;
    color: #fff;
    text-align: center;
    font: 8px Arial, sans-serif;
    display: inline;
    vertical-align: top;
}

.noMessageSVG {
    position: absolute;
    top: 30%;
    left: 40%;
}

.messageChat > span {
    position: absolute;
    top: 60%;
    left: 42%;
    font-size: 18px;
    color: #c4c4c4;
}

.custom-file-input {
    color: transparent;
    border: none !important;
    height: 25px;
    width: 118px;}
.custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
}
.custom-file-input::before {
    background-image: url('../images/attached_icon.svg');
    background-position-x: 8px;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: auto;
    background-color: #45B2E9;
    content: 'Attach Document';
    color: #FFF;
    display: inline-block;
    border-radius: 4px;
    padding: 5px 8px 5px 32px;
    outline: none !important;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 10px;
}
.custom-file-input:hover::before {
    border-color: black;
    background-color: #4ac671;
}
.custom-file-input:active {
    outline: none !important;
}
.table-fileList-message {
  position: absolute;
  width: 350px;
  right: -15px;
  top: 0px;
}

.bannerAlert {
  line-height: 19px;
  position: relative;
  padding-left: 36px !important;
}

.bannerAlert:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 10px;
  height: 19px;
  width: 19px;
  background-image: url('../images/exclamation.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  /*margin-right: 5px;*/
  margin-top: -11px; /*-2px;*/
}


div[aria-labelledby='ui-dialog-title-dlgPassport'] > .ui-dialog-titlebar {
  padding-bottom: 36px;
}

table.passportTable tr td, table.passportTable tr th {
  font-size: 15px;
}

#buttonPassport, button.buttonPassport.passport {
  background-image: url('../images/passport.svg');
  background-size: 22px;
  background-repeat: no-repeat;
  padding: 7px 12px 6px 35px;
  background-position: 4px 4px;
  font-size: 12px !important;
  font-family: Verdana,Arial,sans-serif;
  font-weight: 600;
}

.passport.email {
  background-image: url(../images/icon_menu_send.svg);
  padding: 3px 10px;
  background-size: 17px;
}

ul.timePoints.diagram {
  margin-left: 19px;
}

.diagramDuration {
  background-color: lightgrey;
  height: 12px;
  width: 2px;
  position: absolute;
  display: block;
  margin-left: -17px;
  margin-top: 26px;
}

.diagramDuration.double.bottom {
  margin-top: 92px;
}

.diagramDuration.single.bottom {
  margin-top: 63px;
}

.diagramDuration.double {
  height: 34px;
}

.diagramDurationTime {
  font-size: 8px;
  position: absolute;
  margin-left: -37px;
  margin-top: 43px;
  width: 45px;
  text-align: center;
  line-height: 9px;
  height: 40px;
  display: block;
  font-weight: 700;
}

.diagramDurationTime.double {
  margin-top: 67px;
}

.diagramDurationBracket {
  background-color: lightgrey;
  height: 2px;
  width: 10px;
  position: absolute;
  display: block;
  margin-left: -17px;
  margin-top: 26px;
}

.diagramDurationBracket.double.bottom {
  margin-top: 125px;
}

.diagramDurationBracket.single.bottom {
  margin-top: 74px;
}

.diagramTimeInner {
  display: inline;
  vertical-align: middle;
  height: 48px;
}

.messageTemplateBtns .messageTemplateBtn{
  width: 100%;
}

.filterbar .pinIconContainer span{
    font-weight: bold;
}
#getAPIKeyPair{
  margin-left: 0;
}

.zero_hours {
  background-color: #FF5685;
}

/* ---- */

.leftLabelCandidate{
    left: 15px !important;
}

.buttonBackgroundContainerCandidate {
    position: relative;
}

.buttonBackgroundCandidate {
    background-color: #D7D7D7;
    border-color: #D7D7D7;
    color: #fff;
    border-radius: 5px;
    height: 32px;
    width: 55px;
    box-sizing: border-box;
    padding: 5px;
    vertical-align: middle;
    -webkit-transition: .3s;
    transition: .3s;
}

.buttonBackgroundGreenCandidate {
    background-color: #4ac661;
    border-color: #4ac661;
    -webkit-transition: .3s;
    transition: .3s;
}

.buttonBackgroundContainerCandidate input.toggle {
    display: none;
}

.buttonBackgroundContainerCandidate input.toggle + label {
    width: 30px;
    height: 12px;
    background-color: #999999;
    border-radius: 9px;
    vertical-align: middle;
    display: inline-block;
    position: absolute;
    cursor: pointer;
    margin-right: 6px;
    margin-left: 6px;
    top: 11px;
    left: 22px;
    -webkit-transition: .3s;
    transition: .3s;
}

.buttonBackgroundContainerCandidate input.toggle + label:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 12px;
    background-color: #fff;
    position: absolute;
    top: -4px;
    left: 0%;
    margin-left: -6px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    cursor: pointer;
}

.buttonBackgroundContainerCandidate input.toggle:checked + label:after {
    background-color: #fff;
    left: 100%;
    margin-left: -18px;
}

.buttonBackgroundContainerCandidate input.toggle:checked + label {
    background-color: #0E9500;
    -webkit-transition: .3s;
    transition: .3s;
}

.button.cancelShift.cancInPeriod.on {
  background-color: #483d8b;
}

.button.red.cancelShift.cancInPeriod:hover:not(:disabled), .button.cancelShift.cancInPeriod:hover:not(:disabled) {
  background-color: #6D64A2 !important;
}

.blueText.recurringTimes {
  background-color: #FFF;
  color: #45B2E9 !important;
  line-height: 0;
  font-size: 9pt;
  font-weight: 700;
  vertical-align: middle;
  text-align: center;
  border: solid 1px #CCCCCC;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 4px;
  width: 70px;
  margin-top: -2px;
  margin-bottom: -2px;
}

tr.sr:not(.just_added) > .planned_start:not(.grouped_with_non_planned) {
  border-left: solid 3px #338E55 !important;
}

#availabilityRowsTable td.planned_start:not(.grouped_with_non_planned) {
  border-right: solid 3px #338E55 !important;
  color: black;
}

.planned_start, .planned_middle, .planned_finish {
  background-color: #DBF2DC;
  color: #FFF;
}

tr.sr:not(.just_added) > .planned_start, tr.sr:not(.just_added) > .planned_middle, tr.sr:not(.just_added) > .planned_finish {
  border-color: #338E55 !important;
  border-bottom: solid 3px #338E55 !important;
  border-top: solid 3px #338E55 !important;
}

tr.sr.just_added > .planned_start {
  border-left: solid 3px #338E55 !important;
}


tr.sr.just_added > .planned_start, tr.sr.just_added > .planned_middle {
  border-bottom: solid 3px #338E55 !important;
  border-top: solid 3px #338E55 !important;
}

.planned_finish {
  /*border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;  */
  border-right: solid 3px #338E55 !important;
}

.planned_start_icon {
  /*opacity: 0;*/
  z-index: 4;
  position: absolute;
  font-weight: bold !important;
  width: 18px;
  height: 17px;
  border-radius: 11px;
  background-color: #338E55;
  color: #FFF;
  left: 50px;
  top: -9px;
  /*-webkit-transition: opacity 1s ease-in;
  -moz-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  -ms-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;*/
  cursor: pointer;
}

/*
.planned_corner {
  position: absolute;
}

.planned_corner.top_left {
  top: -2.5px;
  left: -2.5px;
}

.planned_corner.bottom_left {
  bottom: -2.5px;
  left: -2.5px;
}

.planned_corner > div {
  display:inline-block;
  background-color: white;
}

.planned_top_left, .planned_bottom_left {
  width:20px;
  height:11px;
  display:inline-block;
  border: solid #338E55 3px;
  border-right: 0px;
  background-color: #DBF2DC;
}

.planned_corner .planned_top_left {
  border-bottom: 0px;
  border-top-left-radius: 50%;
}

.planned_corner .planned_bottom_left {
  border-top: 0px;
  border-bottom-left-radius: 50%;
}
*/
.panel-body-data-input .pre_levelS_label,
.panel-body-data-input .pre_levelS_radio,
.panel-body-data-input .pre_levelP_label,
.panel-body-data-input .pre_levelP_radio,
.panel-body-data-input .pre_levelN_label,
.panel-body-data-input .pre_levelN_radio,
.panel-body-data-input .pre_levelS_label:hover,
.panel-body-data-input .pre_levelS_radio:hover,
.panel-body-data-input .pre_levelP_label:hover,
.panel-body-data-input .pre_levelP_radio:hover,
.panel-body-data-input .pre_levelN_label:hover,
.panel-body-data-input .pre_levelN_radio:hover,
.panel-body-data-input .pre_levelS_label:focus,
.panel-body-data-input .pre_levelS_radio:focus,
.panel-body-data-input .pre_levelP_label:focus,
.panel-body-data-input .pre_levelP_radio:focus,
.panel-body-data-input .pre_levelN_label:focus,
.panel-body-data-input .pre_levelN_radio:focus {
  display: inline-block;
}

.button.cancelShift.cancInPeriod.on {
  background-color: #483d8b;
}

.button.red.cancelShift.cancInPeriod:hover:not(:disabled), .button.cancelShift.cancInPeriod:hover:not(:disabled) {
  background-color: #6D64A2 !important;
}

.gridTable {
  background-color: #ffffff;
}

.gridTable, .gridTableInner {
  border-collapse: collapse;
}

.gridTableInner {
  border-top: 1px solid #BFBFBF;
}

.gridTableWrapper {
  padding-left: 10px;
}

.gridTable td {
  vertical-align: top;
  border-left: 1px solid #BFBFBF;
  border-right: 1px solid #BFBFBF;
}

.dateNoBorder {
  border-right: 0px !important;
}

.gridTableInner td:not(#bookingsDataColumn) {
  padding: 4px 7px;
  border: 0px;
  position: relative;
}

.gridTableBold {
  font-size: 1.5em;
  font-weight: bold;
}

.gridLocationBar {
  padding-left: 5px;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.gridCalendarMain {
  overflow-x: auto;
  width: 100%;
  white-space: nowrap;
  position: fixed;
  z-index: 10;
  margin-top: -45px;
}

.calButtonItem {
  /*float:left;*/
  width: 76px;
  font-size:15px;
  font-family:arial;
  /*padding:7px;*/
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.calendarGridItem {
  width: 61px;
  vertical-align: middle;
  min-width: auto !important;
  height: 50px;
}


.calButtonItem.week {
  width: 114px;
}

.calendarGridItem.week {
  width: 100px;
}

.calendarGridItem.week p {
  top: 18px;
  position: relative;
  font-size: 8.5pt;
}

.calendarGridItem p, .calendarGridItem div {
  margin: auto;
  font-weight: normal;
  font-size: 8.5pt;
}

.gridCalNameDiv {
  top: 5px;
  position: relative;
  font-weight: normal;
}

#gridSection pre {
  display: none;
}

.gridPostCode {
  font-size: 11pt;
  margin: 0;
}

.gridPostCode img {
  position: relative;
  top: 3px;
  right: -3px;
}

.gridTableInner .hotel {
  top: 3px;
  position: relative;
}

.gridTableInner .warningLoading, .gridTableInner .warning {
  position: relative;
}

.gridTableInner .warning {
  top: 0px;
}

.gridTableInner .warningLoading {
  top: 2px;
}

.availabilityEditTable {
  position: relative;
  border-collapse: collapse;
  border: none;
  margin-left: 40px;
  margin-top: -4px;
}

.availDetailedBox .acs_cell {
  border: #C8C8C8 solid 1px;

}

.availDetailedBox .acs_cell .active {
  border: #C8C8C8 solid 1px;
}

.availFatigueTable td {
  border: 0;
}

#availabilityRowsTable .planned_start_icon {
  top: -21px;
  margin-left: -40px;
}

.availFatigueTable {
  position: absolute;
  margin-top: 16px;
  margin-left: -3px;
}

.tabHotel {
  position: absolute;
  left: 8px;
}

.bookingGridsTab .bankholiday {
  margin: auto;
  font-size: 10px !important;
}

#gridCalendarMain::-webkit-scrollbar {
  height: 1.5em;
}

.griddatacolumn {
  max-height: 12px;
}

#popupChangeAvailability > div.detail > div > button.availabilityMargin {
  margin: 2px 1px;
}

button.clearBtn.clearBtnBookingGrid {
  position: absolute;
  right: 24px;
  top: 8px;
}

.gridRowTopBorder {
  border-top: lightgray solid 6px;
}

.availabilityEditTable .left_shift_button {
  right: -1px;
}

.shift_table_sub_header .availablePeriod {
  background-color: #45B2E9;
}

.pageination_circle {
  display: inline-block;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin: 2px;
}

.pageination_circle.active {
  background-color: #2791E7;
}

.pageination_circle {
  background-color: lightgrey;
}

.multi-pagination{
  margin-top: -24px;
  width: 187px;
  position: absolute;
}

.gg-chevron {
  margin-top: -29px;
  box-sizing: border-box;
  position: absolute;
  display: block;
  transform: scale(var(--ggs,1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px;
  z-index: 5;
}
.gg-chevron::after {
  content: '';
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid lightgrey;
  left: 6px;
  top: 4px
}
.gg-chevron.left::after {
  transform: rotate(45deg);
  border-left: 2px solid lightgrey;
}

.gg-chevron.right::after {
  transform: rotate(-45deg);
  border-right: 2px solid lightgrey;
}
.gg-chevron.right {
  margin-left: 143px;
}

.gg-chevron.left {
  margin-left: 20px;
}

.rateAuditTable td {
  vertical-align: top;
}

.rateAuditTable table {
  width: 104%;
  margin-left: -3px;
}

input[type='checkbox'].styled.google:checked + label:before {
  background-image: url(images/checkbox_on_green.png);
}

ul.flexColumns {
  list-style: none;
  height: 150px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding-inline-start: 0;
}
ul.flexColumns li {
  margin-top: 5px;
}