select {
  border-radius: 0;
  -webkit-appearance: none; }

.noMargin {
  margin: 0px; }

.glyphicon-triangle-left, .fa-caret-right {
  font-size: 30px; }

#buttonRight, #buttonLeftFake, #buttonLeft, #buttonRightFake {
  font-size: 60px;
  margin-top: -8px; }

#tableCaptionTitle {
  margin-top: 12px;
  padding-top: 10px; }

.rotate90 {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.heightFormControl {
  height: 16px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 1%;
  text-align: right; }

.z1100 {
  z-index: 1100 !important; }

.modal {
  margin-top: 50px; }

.form-control {
  text-align: center;
  font-weight: 300;
  color: black; }

.carousel {
  opacity: 1; }

.carousel-control.left, .carousel-control.right {
  background-image: none !important;
  -webkit-filter: none !important;
  filter: none !important; }

/*.glyphicon-info-sign{
  font-size: 18px;
}*/
a {
  text-decoration: none; }

body, label {
  font-size: 20px;
  font-weight: 300; }

body {
  background: white; }

h1 {
  font-size: 30px;
  text-align: center;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 30px; }

.noWrap {
  white-space: nowrap; }

input, textarea, select {
  font-size: 16px; }

.form-control {
  font-size: 16px; }

/*body {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}*/
.bSh {
  -webkit-box-shadow: 0 8px 6px -6px #4d4d33;
  box-shadow: 0 8px 6px -6px #4d4d33; }

.bSh2 {
  -webkit-box-shadow: 0 4px 3px -3px #4d4d33;
  box-shadow: 0 4px 3px -3px #4d4d33; }

.hr {
  padding: 0px;
  margin: 0px;
  border: 0;
  border-top: 1px red; }

.button:hover {
  background: green; }

input[type="submit"] {
  font-size: 20px;
  font-weight: bold; }

.textShadow {
  text-shadow: 1px 1px #4d4d33; }

.noDis {
  display: none; }

hr {
  height: 1px;
  color: #cccccc;
  margin-bottom: 2px;
  margin-top: 2px;
  background: #cccccc;
  font-size: 0;
  border: 0; }

.invalidForm {
  background-color: #ff8080 !important;
  color: white; }

.notSelectedColor {
  background: #ffffff;
  color: #3d3d29; }

.dayInColor {
  background: #ffff80;
  color: #3d3d29; }

.workFromHomeColor {
  background: #ffff00;
  color: #3d3d29; }

.dayOffColor {
  background: #c3c3a2;
  color: #3d3d29; }

.holidayColor {
  background: #d5ff80;
  color: #3d3d29; }

.unpaidHolColor {
  background: #e6ffe6;
  color: #3d3d29; }

.halfInHalfOffColor {
  background: #e6ffb3;
  color: #3d3d29; }

.dayInSickColor {
  background: #ffe6e6;
  color: #3d3d29; }

.sicknessColor {
  background: #ff9999;
  color: #3d3d29; }

.absenceColor {
  background: #ffcccc;
  color: #3d3d29; }

.parentalLeaveColor {
  background: #ffcc99;
  color: #3d3d29; }

.bereavementColor {
  background: #4d4d4d;
  color: white; }

.miscarriageColor {
  background: #754c4c;
  color: white; }

.compassionateColor {
  background: #ffe6cc;
  color: #3d3d29; }

.strikeColor {
  background: #ff8080;
  color: #3d3d29; }

.furloughColor {
  background: #d1e0e0;
  color: #3d3d29; }

.timeOffInLieuColor {
  background: #d7d7c1;
  color: #3d3d29; }

.paidTimeOffColor {
  background: #b3e6b3;
  color: #3d3d29; }

.personalDayColor {
  background: #c2d1f0;
  color: #3d3d29; }

.gardeningLeaveColor {
  background: #c6ecc6;
  color: #3d3d29; }

.sabbaticalLeaveColor {
  background: #ccf2ff;
  color: #3d3d29; }

.duvetDayColor {
  background: #9ae59a;
  color: #3d3d29; }

.studyLeaveColor {
  background: #f9e6ff;
  color: #3d3d29; }

.juryLeaveColor {
  background: #ccccff;
  color: #3d3d29; }

.keepingInTouchDayColor {
  background: #fff0b3;
  color: #3d3d29; }

.miscellaneousLeaveColor {
  background: #fff2e6;
  color: #3d3d29; }

.religiuosLeaveColor {
  background: #ffe44d;
  color: #3d3d29; }

.carersLeaveColor {
  background: #c1f0f0;
  color: #3d3d29; }

.volunteersLeaveColor {
  background: #e6e6ff;
  color: #3d3d29; }

.selfEmployedColor {
  background: #ffff66;
  color: #3d3d29; }

.unemployedColor {
  background: #d9d9d9;
  color: #3d3d29; }

.discouragedWorkerColor {
  background: #cccccc;
  color: #3d3d29; }

.notInLabourForceColor {
  background: #bfbfbf;
  color: #3d3d29; }

.retiredColor {
  background: #b5a7a7;
  color: #3d3d29; }

.maternityLeaveColor {
  background: #FEE1E8;
  color: #3d3d29; }

.paternityLeaveColor {
  background: #CCE2CB;
  color: #3d3d29; }

.adoptionLeaveColor {
  background: #FFD8BE;
  color: #3d3d29; }

.sharedParentalLeaveColor {
  background: #FFCCB6;
  color: #3d3d29; }

.neonatalCareColor {
  background: #f5b99f;
  color: #3d3d29; }

.administrativeLeaveColor {
  background: #f08173;
  color: #3d3d29; }

.specialLeaveColor {
  background: #de6c5d;
  color: #3d3d29; }

.medicalLeaveColor {
  background: #f26d93;
  color: #3d3d29; }

.dayInMedicalLeaveColor {
  background: #f2aec2;
  color: #3d3d29; }

.unpaidTimeOffColor {
  background: #c7b3b8;
  color: #3d3d29; }

.workationColor {
  background: #ebeb8d;
  color: #3d3d29; }

.businessTripColor {
  background: #edd77e;
  color: #3d3d29; }

.startTimeColor {
  background: #e1e1d0;
  color: #3d3d29; }

.endTimeColor {
  background: #c3c3a2;
  color: #3d3d29; }

.nextMorning {
  background: #808000;
  color: white !important; }

.invalidForm {
  background: #ff8080;
  color: white; }

.h20 {
  padding-top: 1%;
  height: 20px; }

.smallerContainer {
  width: 100%;
  margin: auto;
  font-size: 20px;
  padding: 0px;
  border-bottom: 0px; }

.signout {
  text-align: center;
  width: 100%;
  font-size: 35px;
  color: green;
  padding: 20px; }

@media (max-width: 767px) {
  .smallerContainer {
    width: 100%; } }

.marginTopMain {
  margin-top: 90px;
  background-color: #e6e6e6; }

.margT, .MT {
  margin-top: 20px; }

.marB {
  margin-bottom: 20px; }

.MT10 {
  margin-top: 10px; }

.MB10 {
  margin-bottom: 10px; }

.squareBorder, .BF {
  border: 1px solid #cccccc; }

.inBox {
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  background: white; }

.inBoxColor {
  background: white; }

h2, .h2 {
  font-size: 26px;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: center;
  padding-bottom: 10px; }

footer {
  postion: absolute;
  bottom: 0; }

#submitSuccessDate {
  height: 30px; }

.goodMessage {
  background-color: #ccebce;
  border: 2px solid green;
  margin-bottom: 10px; }

.badMessage {
  background-color: #f7d0d6;
  border: 2px solid red;
  margin-bottom: 10px; }

.navbar-default {
  background-color: #e6e6e6;
  border-color: #d9d9d9; }
  .navbar-default .navbar-brand {
    color: #4d4d33; }
    .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
      color: #cccccc; }
  .navbar-default .navbar-text {
    color: #4d4d33; }
  .navbar-default .navbar-nav > li > a {
    color: #4d4d33; }
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
      color: #cccccc;
      background-color: #adad85; }
  .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #cccccc;
    background-color: #d9d9d9; }
  .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #cccccc;
    background-color: #d9d9d9; }
  .navbar-default .navbar-toggle {
    border-color: #d9d9d9; }
    .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
      background-color: #d9d9d9; }
    .navbar-default .navbar-toggle .icon-bar {
      background-color: #4d4d33; }
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-color: white; }
  .navbar-default .navbar-link {
    color: white; }
    .navbar-default .navbar-link:hover {
      color: #cccccc; }

.navbar-default .navbar-nav > li > .dropdown-menu {
  color: #4d4d33;
  background-color: #e6e6e6;
  padding: 5px; }

.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #4d4d33;
  padding: 10px;
  padding-left: 30px;
  font-size: 14px; }

.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #4d4d33;
  background-color: #adad85; }

.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: red; }

.textColor {
  color: #4d4d33 !important; }

@media (max-width: 769px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: white; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
      color: #cccccc; }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #4d4d33;
    background-color: #d9d9d9; } }

.noBorder {
  border: 0px; }

.signupTextSize {
  font-size: 18px;
  padding-top: 5px; }

.errorBorder {
  border: 2px solid red;
  padding: 10px; }

.errorBorderRecaptcha {
  border: 2px solid red;
  padding: 2px; }

#horizontalMenuUl {
  height: 0px; }

.numberMenuItem {
  display: inline-block;
  height: 100%;
  border-right: 1px solid #cccccc;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  height: 45px;
  width: 140px; }

.opacity50 {
  opacity: 0.5; }

.weekSelected {
  color: green !important; }

.numberMenuYear {
  font-weight: 500;
  font-size: 17px;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 50%;
  width: 100%;
  color: #737373; }

.numberMenuWeek {
  font-weight: 600;
  font-size: 17px;
  position: absolute;
  right: 0px;
  bottom: 3px;
  height: 50%;
  width: 100%;
  color: #595959; }

.numberMenuItem:hover {
  background: #cccccc; }

.triangleTop {
  position: absolute;
  right: 35%;
  top: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 20px 0 20px;
  border-color: #e6e6e6 transparent transparent transparent; }

.triangleBottom {
  position: absolute;
  right: 35%;
  bottom: 0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 5px 20px;
  border-color: transparent transparent #e6e6e6 transparent; }

#taxPeriodNumberMenuContainer {
  margin-top: 55px;
  height: 60px;
  z-index: 2000; }

#infoModal {
  z-index: 6500; }

.mainMenuContainer {
  position: relative;
  z-index: 1010;
  width: 100%; }

#taxPeriodNumberMenu, #taxPeriodNumberMenuGuide, #horizontalMenuRow, .horizontalMenuRow, .otherPagesTitle {
  background-color: #e6e6e6;
  font-weight: 400;
  font-size: 25px;
  color: #4d4d33;
  height: 45px;
  text-align: center;
  padding: 0px;
  z-index: 1003;
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #d9d9d9; }

#horizontalMenuRow, .horizontalMenuRow {
  height: 55px;
  text-align: left; }

.otherPagesTitle {
  padding-top: 6px;
  z-index: 1010 !important;
  width: 100%; }

.larger {
  height: 45px;
  font-size: 18px;
  font-weight: 300; }

.noborderLeft {
  border-left: 0px; }

.noborderRight {
  border-right: 0px; }

.bordLR0 {
  border-left: 0px;
  border-right: 0px; }

.paddindTopLoadButton {
  padding-top: 5px; }

.pad0RL, .M5PRL0 {
  margin-top: 5px;
  padding-left: 0px;
  padding-right: 0px; }

.marginTopMain {
  margin-top: 50px; }

.marginTop90 {
  margin-top: 80px; }

.marginTop902 {
  margin-top: 93px; }

.paddingTop5 {
  padding-top: 5px; }

.tableCaptionTitle {
  font-weight: 400;
  display: block;
  height: 40px;
  overflow: hidden;
  padding-top: 8px; }

@media (max-width: 767px) {
  #taxPeriodNumberMenu {
    font-size: 22px; }
  .paddingTop5 {
    padding-top: 50px; } }

.tableCaption {
  background-color: #f2f2f2;
  color: #4d4d33;
  text-align: center; }

.calendarRow {
  height: 40px;
  border: 1px solid #cccccc;
  border-top: 0px;
  border-left: 0px; }

.tRow {
  height: 40px;
  border-bottom: 1px solid #cccccc; }

.loadingText {
  font-size: 26px;
  color: grey;
  padding-top: 120px; }

.z100 {
  z-index: 100; }

.H280 {
  height: 280px; }

#mainTable {
  position: absolute;
  top: 0px;
  left: 0px; }

.tRowTBor {
  height: 35px;
  border: 1px solid #cccccc; }

.tableData {
  float: left;
  font-size: 18px;
  height: 100%;
  padding: 0px; }

.typeOfDaySelect, .typeOfDaySelectGuide {
  width: 100%;
  padding: 4px;
  height: 100%;
  display: block;
  outline: none;
  border: 0px;
  border-right: 1px solid #cccccc;
  text-indent: 1px;
  overflow: hidden;
  white-space: nowrap; }

.width25 {
  width: 25%; }

.dateDiv {
  height: 100%;
  text-align: right;
  font-size: 18px;
  padding-right: 3%;
  overflow: hidden;
  height: 100%;
  margin: auto; }

.dateInput {
  text-align: right;
  padding-top: 4%;
  white-space: nowrap; }

.dateInputHidden {
  visibility: hidden;
  position: absolute; }

.hourMinuteSelect, .hourMinuteSelectGuide, .hourMinuteSelectLarger {
  width: 100%;
  border: 0px;
  outline: none;
  height: 100%;
  font-size: 20px;
  padding: 0px;
  text-align: center;
  border-left: 1px solid #cccccc; }

.hourMinuteSelectLarger {
  height: 35px;
  font-size: 22px; }

.startTimeHover:hover {
  background: #e1e1d0; }

.endTimeHover:hover {
  background: #c3c3a2; }

.nextMorningSelect {
  background: #808000;
  color: white;
  border: 0px;
  outline: none;
  margin: 0px; }

.nextMorningSettings {
  background: #808000 !important;
  color: white; }

.absoluteDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  font-size: 18px;
  line-height: 35px; }

.noteDiv {
  border-left: 1px solid #cccccc;
  height: 100%; }

.noteInput {
  width: 100%;
  height: 100%;
  outline: none;
  border: 0px;
  text-indent: 5px; }

.border-left-message {
  border-left: 1px solid #cccccc; }

.currentDateInput {
  color: #006600; }

.currentStartTime {
  -webkit-box-shadow: 0px 0px 0px 1px green inset;
  box-shadow: 0px 0px 0px 1px green inset;
  font-weight: 400; }

.dateInputRT {
  -webkit-box-shadow: inset 1px 1px 0px 0px green;
  box-shadow: inset 1px 1px 0px 0px green;
  font-weight: 400;
  color: #006600; }

.pic-sm, .pic-xs, .pic-chart {
  height: 280px;
  width: 100%;
  border: 1px solid #cccccc;
  border-top: 0px; }

.pic-chart {
  height: 250px; }

/* The container <div> - needed to position the dropdown content */
/* Links inside the dropdown */
.dropdown-menu {
  min-width: 0px !important; }

.marginLeftDropDown {
  margin-left: 10px; }

.marginRightDropDown {
  margin-left: 0% !important; }

.dropdown-menu li {
  font-size: 20px;
  color: black;
  padding: 5px;
  padding-left: 10%;
  width: 100%;
  height: 34px;
  text-decoration: none;
  display: block;
  opacity: 0.9; }

.typeOfDaySelect:hover, .typeOfDaySelect:focus, .typeOfDaySelect:active,
.hourMinuteSelect:hover, .hourMinuteSelect:focus, .hourMinuteSelect:active,
.hourMinuteSelectLarger:hover, .hourMinuteSelectLarger:focus, .hourMinuteSelectLarger:active {
  background: #cccccc; }

.pre-scrollable {
  height: 250px;
  width: 239px;
  overflow-x: hidden; }

.pre-scrollableHourMinute {
  height: 200px;
  width: 70px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  overflow-x: hidden; }

.pre-scrollableDate, .pre-scrollableBreaks, .pre-scrollableWeekStart, .pre-scrollableYesNo {
  height: 180px;
  width: 100%;
  padding: 0px;
  margin: 0px;
  text-align: center;
  overflow-x: hidden; }

.pre-scrollableBreaks {
  height: 175px;
  width: 100px; }

.pre-scrollableYesNo {
  width: 175px;
  height: 70px; }

.pre-scrollableShiftLength {
  height: 170px;
  width: 80px;
  padding: 0px;
  margin: 0px;
  text-align: center;
  overflow-x: hidden; }

.pre-scrollableWeekStart {
  height: 110px;
  text-align: center; }

.pre-scrollable::-webkit-scrollbar, .pre-scrollableHourMinute::-webkit-scrollbar, .pre-scrollableYesNo::-webkit-scrollbar,
.pre-scrollableDate::-webkit-scrollbar, .pre-scrollable-MainCalendar::-webkit-scrollbar,
.pre-scrollable-termsModal::-webkit-scrollbar, .pre-scrollableShiftLength::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 4px; }

.pre-scrollable::-webkit-scrollbar-thumb, .pre-scrollableHourMinute::-webkit-scrollbar-thumb, .pre-scrollableYesNo::-webkit-scrollbar-thumb,
.pre-scrollableDate::-webkit-scrollbar-thumb, .pre-scrollable-MainCalendar::-webkit-scrollbar-thumb,
.pre-scrollable-termsModal::-webkit-scrollbar-thumb, .pre-scrollableShiftLength::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: lightgray;
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.75); }

/* Change color of dropdown links on hover */
.dropdown-menu li:hover {
  opacity: 1.0;
  width: 102%;
  margin-left: -1%;
  z-index: 5;
  font-size: 20px;
  cursor: pointer; }

.dayInColorHover:hover {
  background: #ffff80; }

.workFromHomeColorHover:hover {
  background: #ffff00; }

.dayOffColorHover:hover {
  background: #c3c3a2; }

.holidayColorHover:hover {
  background: #d5ff80; }

.unpaidHolColorHover:hover {
  background: #e6ffe6; }

.halfInHalfOffColorHover:hover {
  background: #e6ffb3; }

.dayInSickColorHover:hover {
  background: #ffe6e6; }

.sicknessColorHover:hover {
  background: #ff9999; }

.absenceColorHover:hover {
  background: #ffcccc; }

.parentalLeaveColorHover:hover {
  background: #ffcc99; }

.neonatalCareColorHover:hover {
  background: #f5b99f; }

.bereavementColorHover:hover {
  background: #4d4d4d;
  color: white; }

.miscarriageColorHover:hover {
  background: #754c4c;
  color: white; }

.compassionateColorHover:hover {
  background: #ffe6cc; }

.strikeColorHover:hover {
  background: #ff8080; }

.furloughColorHover:hover {
  background: #d1e0e0; }

.timeOffInLieuColorHover:hover {
  background: #d7d7c1; }

.paidTimeOffColorHover:hover {
  background: #b3e6b3; }

.personalDayColorHover:hover {
  background: #c2d1f0; }

.gardeningLeaveColorHover:hover {
  background: #c6ecc6; }

.sabbaticalLeaveColorHover:hover {
  background: #ccf2ff; }

.duvetDayColorHover:hover {
  background: #9ae59a; }

.studyLeaveColorHover:hover {
  background: #f9e6ff; }

.juryLeaveColorHover:hover {
  background: #ccccff; }

.keepingInTouchDayColorHover:hover {
  background: #fff0b3; }

.miscellaneousLeaveColorHover:hover {
  background: #fff2e6; }

.religiuosLeaveColorHover:hover {
  background: #ffe44d; }

.carersLeaveColorHover:hover {
  background: #c1f0f0; }

.volunteersLeaveColorHover:hover {
  background: #e6e6ff; }

.selfEmployedColorHover:hover {
  background: #ffff66; }

.unemployedColorHover:hover {
  background: #d9d9d9; }

.discouragedWorkerColorHover:hover {
  background: #cccccc; }

.notInLabourForceColorHover:hover {
  background: #bfbfbf; }

.retiredColorHover:hover {
  background: #b5a7a7; }

.maternityLeaveColorHover:hover {
  background: #FEE1E8; }

.paternityLeaveColorHover:hover {
  background: #CCE2CB; }

.adoptionLeaveColorHover:hover {
  background: #FFD8BE; }

.sharedParentalLeaveColorHover:hover {
  background: #FFCCB6; }

.administrativeLeaveColorHover:hover {
  background: #f08173; }

.specialLeaveColorHover:hover {
  background: #de6c5d; }

.medicalLeaveColorHover:hover {
  background: #f26d93; }

.dayInMedicalLeaveColorHover:hover {
  background: #f2aec2; }

.unpaidTimeOffColorHover:hover {
  background: #c7b3b8; }

.workationColorHover:hover {
  background: #ebeb8d; }

.businessTripColorHover:hover {
  background: #edd77e; }

@media (max-width: 767px) {
  .tableContainer {
    width: 100%; }
  .marginRightDropDown {
    margin-left: -55% !important; } }

@media (max-width: 400px) {
  .noteDiv {
    visibility: visible; }
  .marginRightDropDown {
    margin-left: -45% !important; } }

.lastUpdate {
  margin-top: 3px;
  /*position: absolute
  top: -14px;
  left: 1%;*/
  color: #999966;
  font-weight: 600;
  width: 70%;
  font-size: 16px;
  height: 14px; }

#lastUpdatePayments, #lastUpdateDeductions, #lastUpdateMissPayments, #lastUpdateVis, #daysVisLastUpdate {
  width: 80%; }

.hOf {
  overflow: hidden; }

#tableCaptionTaxNr {
  height: 29px; }

.payDayMainTable {
  color: green;
  font-size: 12px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding-left: 1%;
  padding-bottom: 0%;
  font-weight: 600;
  z-index: 100; }

.perkStyle {
  color: green;
  font-style: italic;
  background-color: #e6ffe6; }

.salarySacrifiseStyle {
  background-color: #ffebe6; }

.nonTaxPayStyle {
  background-color: #fffde6; }

.preTaxDedStyle {
  background-color: #ebf5fa; }

.taxExemptPayStyle {
  background-color: #f7faf8; }

.mainSocDedExemptPayStyle {
  background-color: #fff7ff; }

.button {
  float: right;
  font-size: 18px;
  font-weight: 400; }

.responseDiv, .rDiv {
  float: left;
  color: #009900;
  font-weight: 450;
  font-size: 22px;
  padding-top: 1%; }

.text-align-center {
  text-align: center; }

.errorStyle {
  color: #ff6666; }

.g-recaptcha {
  float: left; }

.fixedBottom {
  position: fixed;
  background: white;
  left: 2%;
  bottom: 5px;
  width: 96%;
  background: #f2f2f2;
  -webkit-box-shadow: 0px -1px 1px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px -1px 1px rgba(50, 50, 50, 0.2);
  box-shadow: 0px -1px 1px rgba(50, 50, 50, 0.2); }

.padB15 {
  padding-bottom: 15px; }

@media (min-width: 641px) {
  .fixedBottom {
    width: 31%;
    left: 34.5%; } }

.removeFixedPos {
  position: static; }

/*additional bootsrtap for controls*/
.col-xs-calD,
.col-sm-calD,
.col-md-calD,
.col-lg-calD {
  position: relative;
  min-height: 1px;
  text-align: center;
  /*padding-right: 15px;
    padding-left: 15px;
	border-right: 2px solid white;
	border-left: 2px solid white;*/ }

/*calendar days width*/
.col-xs-calD {
  width: 12%;
  float: left; }

@media (min-width: 768px) {
  .col-sm-calD {
    width: 12%;
    float: left; } }

@media (min-width: 992px) {
  .col-md-calD {
    width: 12%;
    float: left; } }

@media (min-width: 1200px) {
  .col-lg-calD {
    width: 12%;
    float: left; } }

/*bootstrap End*/
.col-xs-calDN,
.col-sm-calDN,
.col-md-calDN,
.col-lg-calDN {
  position: relative;
  min-height: 1px;
  text-align: center;
  /*padding-right: 15px;
    padding-left: 15px;
	border-right: 2px solid white;
	border-left: 2px solid white;*/ }

/*calendar days width*/
.col-xs-calDN {
  width: 16%;
  float: left; }

@media (min-width: 768px) {
  .col-sm-calDN {
    width: 16%;
    float: left; } }

@media (min-width: 992px) {
  .col-md-calDN {
    width: 16%;
    float: left; } }

@media (min-width: 1200px) {
  .col-lg-calDN {
    width: 16%;
    float: left; } }

.boxT, .boxTCalendar, .boxTNoBottomBorder, div div table caption {
  background-color: #f2f2f2;
  color: #4d4d33;
  font-weight: 400;
  text-align: center;
  font-size: 25px;
  height: 40px;
  border: 1px solid #cccccc; }

.boxTCalendar {
  font-size: 25px;
  padding-bottom: 5px !important; }

.boxTNoBottomBorder {
  border-bottom: 0px;
  font-size: 24px; }

.titlePad {
  text-indent: -17%;
  text-align: center; }

#calendarCaption {
  font-size: 25px; }

.currentWeekFilter {
  top: 0px;
  left: 0px;
  position: absolute;
  opacity: 0.6;
  height: 100%;
  width: 100%;
  z-index: 2;
  -webkit-box-shadow: 0px 0px 0px 2px #009933 inset;
  box-shadow: 0px 0px 0px 2px #009933 inset; }

.dayDiv {
  position: relative;
  color: #3d3d29;
  font-size: 20px;
  display: inline-block;
  text-align: center;
  height: 100%;
  width: 12%;
  -webkit-box-shadow: inset 1px 0px 0px 0px #d9d9d9;
  box-shadow: inset 1px 0px 0px 0px #d9d9d9; }

.netPayDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  text-align: center;
  font-weight: 400;
  -webkit-box-shadow: inset 1px 0px 0px 0px #d9d9d9;
  box-shadow: inset 1px 0px 0px 0px #d9d9d9; }

.netPayDivDay {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 42%;
  width: 100%;
  font-size: 15px;
  color: grey; }

.netPayDivAmount {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 58%;
  width: 100%;
  font-size: 17px; }

.netPayDivPaid {
  background: #c1ff80; }

.netPayDivDayPaid {
  color: #333333; }

.netPayDivAmountPaid {
  color: #206020; }

.netPayDivThis {
  background: #ceff99; }

.netPayDivDayThis {
  color: #333333; }

.netPayDivAmountThis {
  color: #206020; }

.netPayDivNotPaid {
  background: #daffb3; }

.netPayDivDayNotPaid {
  color: #737373; }

.netPayDivAmountNotPaid {
  color: #737373; }

.netPayDivToday {
  -webkit-box-shadow: 0px 0px 0px 2px green inset;
  box-shadow: 0px 0px 0px 2px green inset; }

.netPayDivTodayLTR {
  -webkit-box-shadow: inset 0px 2px 0px 0px green, inset 2px 0px 0px 0px green, inset -2px 0px 0px 0px green;
  box-shadow: inset 0px 2px 0px 0px green, inset 2px 0px 0px 0px green, inset -2px 0px 0px 0px green;
  /* Right */ }

.netPayDivToday2 {
  height: 52%;
  width: 92%;
  margin-left: 4%;
  top: 4%; }

.netPayDivToday3 {
  height: 48%;
  width: 92%;
  margin-left: 4%;
  bottom: 4%; }

.dayDiv:hover, .monthDiv:hover, .netPayDiv:hover {
  background: #cccccc;
  opacity: 0.8; }

.netPayDiv:hover {
  opacity: 1; }

.startEndHourdivForCalendar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40%;
  font-size: 12px;
  font-weight: 500;
  color: grey;
  padding: 1%; }

.yearForCalendar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 70%;
  height: 50%;
  font-size: 15px;
  font-weight: 500;
  color: grey;
  padding: 1%;
  padding-left: 10%; }

.taxWeekForCalendar {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 30%;
  height: 50%;
  font-size: 15px;
  font-weight: 500;
  color: grey;
  padding: 1%; }

.monthNameForCalendar {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80%;
  height: 50%;
  color: #3d3d29;
  font-size: 20px; }

.monthDiv, .monthDivCurrent {
  background: #f2f2f2;
  width: 16%;
  height: 100%;
  position: relative;
  display: inline-block; }

.monthDivCurrent {
  background: #70db70; }

.taxYearGap {
  border-top: 2px solid #cc7a00; }

.taxYearGapColor {
  color: #cc7a00;
  font-weight: bold;
  font-size: 20px; }

.holidayColorInfo {
  color: green;
  font-weight: bold;
  font-size: 20px; }

/*calendar and payments subheadings*/
.calendarHeading, .paymentsHeading {
  background: #f2f2f2;
  color: #4d4d33;
  display: inline-block;
  text-align: center;
  height: 100%;
  padding-top: 1%; }

.currentDay {
  -webkit-box-shadow: 0px 0px 0px 2px green inset;
  box-shadow: 0px 0px 0px 2px green inset;
  font-weight: 500;
  color: green; }

.holBorderBottom {
  border-bottom: 2px solid green; }

.holBorderTop {
  border-top: 2px solid green; }

.holBorderLeftTop {
  border-left: 2px solid green;
  border-top: 2px solid green; }

.taxYearBorderBottom {
  border-bottom: 2px solid #cc7a00; }

.taxYearBorderTop {
  border-top: 2px solid #cc7a00; }

.taxYearBorderLeftTop {
  border-left: 2px solid #cc7a00;
  border-top: 2px solid #cc7a00; }

/*.calendarLoading{
  padding-top: $calendarRowHeight*2;
  text-align: center;
  font-size: 25px;
}*/
.bankHolidayText {
  color: red;
  font-weight: 500; }

.taxStartText {
  color: #e68a00;
  font-weight: 500; }

.marginTopCalendarButtons {
  margin-top: 5px; }

.text-align-calendarButtons {
  text-align: right; }

.pre-scrollable-MainCalendar {
  height: 280px;
  width: 100%;
  overflow-x: hidden; }

.loadCalendar {
  height: 280px; }

@media (max-width: 500px) {
  .text-align-calendarButtons {
    text-align: center;
    color: red; } }

.totalGrossPaymentsName, .totalGrossPaymentsAmount, .totalDeductionsName, .totalDeductions, .netPay {
  background: #e6e6e6;
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  padding-top: 3px;
  height: 35px;
  border-top: 1px solid #cccccc; }

.totalGrossPaymentsAmount {
  text-align: right; }

.totalDeductions {
  background: #fff5e6; }

.netPay {
  background: #ceff99;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc; }

/*
.netPay{
  background: #ceff99;
  border-left: $borderStyle;
  border-bottom: $borderStyle;
  padding-left: 5px;
}*/
#netPayAmount {
  font-weight: 400;
  background: #ceff99; }

.border-left {
  border-left: 1px solid #cccccc;
  text-align: right;
  padding-right: 5px; }

.border-right, .BR {
  border-right: 1px solid #cccccc;
  text-align: left;
  padding-left: 5px; }

.border-right2, .BR {
  border-right: 1px solid #cccccc; }

.border-left2 {
  border-left: 1px solid #cccccc; }

.topBorder {
  border-top: 1px solid #cccccc; }

.align-right {
  text-align: right;
  padding-right: 2px; }

.green {
  font-weight: 400;
  color: green; }

.red {
  font-weight: 400;
  color: #ff9999; }

.orange {
  font-weight: 400;
  color: #cc7a00; }

.paddingLeft25 {
  padding-left: 25%; }

.greyBackground {
  background: #a6a6a6;
  background-color: #a6a6a6;
  color: #a6a6a6; }

.height100 {
  height: 100%; }

#paymentSettingsContainer, #deductionsSettingsContainer, #paymentsSmitheyContainer, #deductionsSmitheyContainer {
  margin-top: -15px; }

.MT-30 {
  margin-top: -30px; }

.chartStyle, .chartStyleFullBorder {
  background: white;
  text-align: center;
  height: 250px;
  width: 100%;
  margin: 0px;
  padding: 5px; }

.chartStyleFullBorder {
  border: 1px solid #cccccc; }

.chartStyleNoTopBorder {
  border: 1px solid #cccccc;
  border-top: 0px; }

.chartStyleNoBottomBorder {
  border: 1px solid #cccccc;
  border-bottom: 0px; }

.chartStyleNoBorder {
  border: 0px;
  height: 246px;
  width: 98%; }

.noPremium {
  font-size: 18px;
  background: #e6ffcc;
  text-align: center;
  color: #cca300;
  border-bottom: 1px solid #cccccc; }

.noBottomBorder, #defaultStartHourShiftGen, #defaultStartMinuteShiftGen {
  border-bottom: 0px; }

.noChartText {
  color: #ffbb99;
  font-weight: bold;
  font-size: 25px; }

.eyePosition {
  position: absolute;
  top: 1%;
  left: 1%;
  z-index: 100; }

.boxTitleNoLB {
  background-color: #f2f2f2;
  color: #4d4d33;
  font-weight: 400;
  text-align: center;
  font-size: 25px;
  height: 40px;
  border: 1px solid #cccccc;
  border-left: 0px; }

.boxTitleNoRB {
  background-color: #f2f2f2;
  color: #4d4d33;
  font-weight: 400;
  text-align: center;
  font-size: 25px;
  height: 40px;
  border: 1px solid #cccccc;
  border-right: 0px; }

.chartTitle {
  margin-top: 20px;
  position: relative;
  background-color: #f2f2f2;
  color: #4d4d33;
  font-weight: 400;
  text-align: center;
  font-size: 25px;
  height: 40px;
  border: 1px solid #cccccc; }

.chartTitle + div {
  padding: 0px;
  border: 1px solid #cccccc;
  border-top: 0px;
  -webkit-box-shadow: 0 8px 6px -6px #4d4d33;
  box-shadow: 0 8px 6px -6px #4d4d33; }

.padTop3 {
  padding-top: 3%; }

.modal-header {
  background: #e6e6e6;
  color: #4d4d33;
  text-align: center;
  font-weight: bold; }

.modal-title {
  color: #4d4d33;
  font-weight: 400;
  text-align: center;
  font-size: 25px; }

.modal-body {
  font-size: 18px;
  font-weight: 300;
  text-align: left; }

.modal-footer {
  background: #e6e6e6; }

.clickable {
  cursor: pointer;
  color: #3bb300;
  font-size: 35px; }

.clickable:hover {
  color: green; }

.clickable:focus {
  color: green; }

.clickable:active {
  color: green; }

.login-modal-color {
  background: white;
  color: #33cc00; }

.login-modal-title {
  font-size: 25px;
  font-weight: 999; }

.error-modal-color {
  font-size: 25px;
  background: #ffe6e6;
  color: red;
  font-weight: 999; }

.textIndent {
  text-indent: 10%;
  text-shadow: 0px !important; }

.glyphicon-info-sign {
  margin-left: -3px; }

.modalBackground {
  background: white; }

.width50 {
  width: 100%;
  font-weight: 400; }

.clickable2 {
  cursor: pointer; }

.otherPagesTitleModal {
  background-color: #e6e6e6;
  font-weight: 400;
  font-size: 20px;
  color: #4d4d33;
  height: 45px;
  text-align: center;
  padding: 3px;
  border-bottom: 1px solid #d9d9d9; }

.buttonOtherModal {
  font-size: 20px;
  background-color: #3bb300;
  color: white;
  font-weight: 400;
  padding: 3px; }

.dayTypeModal {
  font-size: 20px;
  border: 1px solid #cccccc;
  padding: 3px; }

.FW400 {
  font-weight: 400; }

@media (max-width: 576px) {
  .g-recaptcha {
    margin-left: 1px;
    margin-bottom: -7px;
    -webkit-transform: scale(0.88);
    -ms-transform: scale(0.88);
    transform: scale(0.88);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0; } }

.savingsCristm, .savingsSumm {
  font-size: 18px;
  background: #ffb3b3;
  padding-top: 2px;
  padding-bottom: 2px;
  color: #33331a;
  text-align: left;
  border: 1px solid #cccccc; }

.savingsSumm {
  background: #ffeb99; }

.footerBackground {
  background: #c2c2a3;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 25px;
  text-align: center;
  -webkit-box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px -2px 3px rgba(50, 50, 50, 0.75); }

.footerName {
  padding-top: 10px; }

.footerItem {
  color: #737373;
  font-size: 15px;
  height: 100%;
  padding-top: 4px;
  cursor: pointer;
  text-align: center; }

.footerUl {
  text-align: center;
  padding: 0px;
  margin: 0px; }

.footerItem:hover {
  color: white; }

.footerFixedBottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%; }

a {
  text-decoration: none;
  color: #4d4d33; }

.marginTopOther {
  margin-top: 60px; }

.mb50px {
  margint-bottom: 50px; }

.bordB, .BB {
  border-bottom: 1px solid #cccccc; }

.bordT, .BT {
  border-top: 1px solid #cccccc; }

.iconStyleText {
  color: #3bb300;
  font-size: 24px; }

.loginText {
  font-size: 26px;
  font-weight: 400; }

.width80 {
  width: 80%;
  margin: 0px;
  margin: auto; }

.containerOther {
  font-size: 20px;
  width: 100%; }

.text-align-left {
  text-align: left; }

.rel {
  position: relative; }

.hide-input {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: grey;
  position: absolute;
  opacity: 0.3; }

.marginAuto {
  margin: auto; }

#backPayIncludeCheckbox input {
  cursor: pointer; }

.texH {
  font-size: 19px; }

ul > .smitheyLI {
  font-size: 15px !important;
  padding-left: 2%;
  padding-right: 1%; }

.errorFixed {
  position: fixed;
  top: 58px;
  left: 0px;
  z-index: 5;
  opacity: 0.9; }

.errorBorder {
  border: 2px solid red;
  padding: 5px; }

.errorBorderRecaptcha {
  border: 2px solid red;
  padding: 2px; }

.successBorder {
  opacity: 0.95;
  border: 2px solid green;
  padding: 5px;
  background: #33cc00;
  color: white; }

.passwordInfo {
  opacity: 0.8;
  border: 1px solid green;
  padding: 1px;
  background: #33cc00;
  color: white;
  font-size: 18px; }

#paymentSettingsEmailDivResponse, #deductionsSettingsEmailDivResponse, #daysVisSettingsEmailDivResponse {
  height: 65px; }

.width50Border {
  width: 50%;
  border: 1px solid #cccccc; }

.otherToggleButton {
  cursor: pointer; }

.otherToggleButton:hover {
  color: #cccccc; }

.marginTop60 {
  margin-top: 52px; }

.BLR {
  border-left: 1px solid #cccccc;
  border-right: 1px solid #cccccc; }

.boldFont {
  font-weight: 400; }

.MB10 {
  margin-bottom: 10px; }

.MT20 {
  margin-top: 20px; }

.justBorder {
  position: fixed;
  top: 26px;
  left: 0px;
  z-index: 1020; }

.themeBG {
  background: #e6e6e6; }

.secondJob {
  font-size: 16px;
  padding: 8px;
  background: #3bb300;
  border-radius: 15px;
  color: white; }

.H150 {
  height: 150px; }

.infoCheck, .infoCheck2 {
  color: white;
  background-color: #737373;
  padding: 1%;
  font-size: 15px; }

.infoCheck2 {
  background-color: white;
  border: 1px solid #cccccc; }

.noRoundBL {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; }

.noRoundBR {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px; }

@media (max-width: 576px) {
  .containerOther {
    width: 100%; } }

#userGuideHelp {
  position: fixed;
  bottom: 5px;
  left: 10px;
  background: #3bb300;
  font-size: 40px;
  color: green;
  cursor: pointer;
  padding: 5px;
  width: 60px;
  height: 60px;
  z-index: 1500;
  text-align: center; }

.userGuideHelp {
  padding: 5px;
  width: 26px;
  height: 26px;
  color: green;
  font-size: 22px; }

.arrowPositionRight {
  position: absolute;
  right: 5%;
  top: -25px;
  font-size: 70px;
  color: #33cc00;
  z-index: 44; }

.borderLeft {
  border-left: 1px solid #cccccc; }

.UGarrow {
  color: #239023;
  font-size: 35px; }

.UGarrow:hover {
  color: green; }

.UGarrow:focus {
  color: green; }

.UGarrow:active {
  color: green; }

#arrowRight {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 4000;
  display: none;
  -webkit-animation-name: arrowRight;
  animation-name: arrowRight;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.animateOpacity {
  -webkit-animation-name: animateOpacity;
  animation-name: animateOpacity;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes animateOpacity {
  50% {
    opacity: 0.6; }
  100% {
    opacity: 1; } }

@keyframes animateOpacity {
  50% {
    opacity: 0.6; }
  100% {
    opacity: 1; } }

@-webkit-keyframes arrowRight {
  50% {
    right: 10px; }
  100% {
    right: 20px; } }

@keyframes arrowRight {
  50% {
    right: 10px; }
  100% {
    right: 20px; } }

#arrowDown {
  position: absolute;
  left: 4%;
  z-index: 100;
  display: none; }

.arrowDown0, .arrowDown1, .arrowDown2, .arrowDown3, .arrowDown4, .arrowDown5, .arrowDown6 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.arrowDown0 {
  top: 25px;
  -webkit-animation-name: arrowDown0;
  animation-name: arrowDown0; }

@-webkit-keyframes arrowDown0 {
  50% {
    top: 35px; }
  100% {
    top: 25px; } }

@keyframes arrowDown0 {
  50% {
    top: 35px; }
  100% {
    top: 25px; } }

.arrowDown1 {
  top: 65px;
  -webkit-animation-name: arrowDown1;
  animation-name: arrowDown1; }

@-webkit-keyframes arrowDown1 {
  50% {
    top: 75px; }
  100% {
    top: 65px; } }

@keyframes arrowDown1 {
  50% {
    top: 75px; }
  100% {
    top: 65px; } }

.arrowDown2 {
  top: 105px;
  -webkit-animation-name: arrowDown2;
  animation-name: arrowDown2; }

@-webkit-keyframes arrowDown2 {
  50% {
    top: 115px; }
  100% {
    top: 105px; } }

@keyframes arrowDown2 {
  50% {
    top: 115px; }
  100% {
    top: 105px; } }

.arrowDown3 {
  top: 145px;
  -webkit-animation-name: arrowDown3;
  animation-name: arrowDown3; }

@-webkit-keyframes arrowDown3 {
  50% {
    top: 155px; }
  100% {
    top: 145px; } }

@keyframes arrowDown3 {
  50% {
    top: 155px; }
  100% {
    top: 145px; } }

.arrowDown4 {
  top: 185px;
  -webkit-animation-name: arrowDown4;
  animation-name: arrowDown4; }

@-webkit-keyframes arrowDown4 {
  50% {
    top: 195px; }
  100% {
    top: 185px; } }

@keyframes arrowDown4 {
  50% {
    top: 195px; }
  100% {
    top: 185px; } }

.arrowDown5 {
  top: 225px;
  -webkit-animation-name: arrowDown5;
  animation-name: arrowDown5; }

@-webkit-keyframes arrowDown5 {
  50% {
    top: 235px; }
  100% {
    top: 225px; } }

@keyframes arrowDown5 {
  50% {
    top: 235px; }
  100% {
    top: 225px; } }

.arrowDown6 {
  top: 265px;
  -webkit-animation-name: arrowDown6;
  animation-name: arrowDown6; }

@-webkit-keyframes arrowDown6 {
  50% {
    top: 275px; }
  100% {
    top: 265px; } }

@keyframes arrowDown6 {
  50% {
    top: 275px; }
  100% {
    top: 265px; } }

#arrowDown2 {
  position: absolute;
  top: -35px;
  left: 30%;
  display: none;
  -webkit-animation-name: arrowDownGen;
  animation-name: arrowDownGen;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes arrowDownGen {
  50% {
    top: -45px; }
  100% {
    top: -35px; } }

@keyframes arrowDownGen {
  50% {
    top: -45px; }
  100% {
    top: -35px; } }

#arrowDown3 {
  position: absolute;
  top: -70px;
  left: 48%;
  display: none;
  -webkit-animation-name: calendarArrow;
  animation-name: calendarArrow;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes calendarArrow {
  50% {
    top: -60px; }
  100% {
    top: -70px; } }

@keyframes calendarArrow {
  50% {
    top: -60px; }
  100% {
    top: -70px; } }

#arrowDown4 {
  position: absolute;
  top: -40px;
  left: 2%;
  display: none;
  z-index: 666;
  -webkit-animation-name: example;
  animation-name: example;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes example {
  50% {
    top: -50px; }
  100% {
    top: -40px; } }

@keyframes example {
  50% {
    top: -50px; }
  100% {
    top: -40px; } }

#arrowUp {
  position: fixed;
  top: 53px;
  left: 45px;
  z-index: 4000;
  display: none;
  -webkit-animation-name: arrowUp;
  animation-name: arrowUp;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

@-webkit-keyframes arrowUp {
  50% {
    top: 43px; }
  100% {
    top: 53px; } }

@keyframes arrowUp {
  50% {
    top: 43px; }
  100% {
    top: 53px; } }

.markDayType {
  -webkit-box-shadow: inset 0 0 5px green;
  box-shadow: inset 0 0 5px green; }

.orangeBackground {
  background-color: #ffc266 !important; }

.orangeCalendarDay {
  background: #ffc266;
  color: #3d3d29; }

.landingTextStyle, .passCheck {
  font-size: 30px;
  color: #33cc00;
  font-weight: bold; }

.passCheck {
  font-size: 20px; }

.landingText {
  font-size: 26px; }

.landingTextSmall {
  font-size: 18px; }

.landingTextPayments {
  font-size: 18px; }

.forgotPassword {
  font-size: 18px;
  padding-top: 5px;
  color: grey; }

.sample {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 44; }

.remeberMe {
  font-size: 18px;
  padding-top: 2px;
  text-align: left;
  color: grey; }

#loginForm {
  padding: 6px;
  width: 22%;
  position: fixed;
  background: #f2f2f2;
  left: -500px;
  top: 102px;
  z-index: 6000; }

/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
  #loginForm {
    width: 80%; } }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  #loginForm {
    width: 60%; } }

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #loginForm {
    width: 40%; } }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  #loginForm {
    width: 30%; } }

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  #loginForm {
    width: 26%; } }

@media only screen and (min-width: 1300px) {
  #loginForm {
    width: 22%; } }

.dropdown-toggle {
  background-color: #e6e6e6; }

.clickable2:hover {
  color: grey; }

.pre-scrollable-termsModal {
  height: 150px;
  width: 100%;
  overflow-x: hidden; }

.width200 {
  width: 200%;
  z-index: -1; }

.z100 {
  z-index: 100; }

.chartScroll {
  display: inline-block;
  height: 100%; }

.marginTB50 {
  margin-top: 50px;
  margin-bottom: 50px; }

.margT30 {
  margin-top: 30px; }

.lanDivColor {
  background: rgba(5, 5, 5, 0.01); }

.btn-style {
  background: white;
  width: 100%; }

.dropDownMarginLeft {
  margin-left: 20%; }

.buttonHover, .hovCol li:hover {
  background: #cdcdb1; }

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0; }

.textShadowLogo, .textShadowLogin {
  text-shadow: 1px 1px 1px #bfbfbf;
  font-size: 20px;
  font-weight: 550;
  height: 100%; }

.textShadowLogin {
  font-weight: 400; }

.menuItem, .menuItemEmpty, .menuItemBorderLeft, .menuItem2, .menuItemLogo {
  display: inline-block;
  font-weight: 400;
  font-size: 20px;
  height: 100%;
  padding: 13px;
  margin-left: -7px;
  border-right: 1px solid #cccccc;
  cursor: pointer; }

.menuItemEmpty {
  padding: 5px;
  border: 0px; }

.menuItem2 {
  font-size: 17px;
  padding: 10px; }

.triangle {
  margin: auto;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 10px 15px;
  border-color: transparent transparent #e6e6e6 transparent; }

.triangleGreen {
  margin: auto;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 10px 15px;
  border-color: transparent transparent green transparent; }

.menuItemBorderLeft {
  border-left: 1px solid #cccccc; }

.markSelectedWeek {
  -webkit-box-shadow: 0px 0px 0px 1px green inset;
  box-shadow: 0px 0px 0px 1px green inset; }

ul {
  list-style-type: none; }

.menuItem:hover, .menuItem a:hover, .menuItemBorderLeft a:hover, .menuItemBorderLeft:hover, .menuItemHover, .menuItemLogo:hover {
  background: #cccccc;
  color: white; }

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch; }

.menuItem a, .menuItemBorderLeft a {
  text-decoration: none; }

.logo {
  padding: 0px;
  margin: 0px;
  padding-top: 9px;
  height: 100%;
  cursor: pointer; }

.scrolling-wrapper::-webkit-scrollbar {
  -webkit-appearance: none; }

.arrowPositionRight, .arrowPositionLeft {
  position: absolute;
  right: 0px;
  top: 0px;
  height: auto;
  width: 20px;
  opacity: 0.75;
  font-size: 35px;
  color: grey;
  padding: 0px;
  cursor: pointer; }

.arrowPositionLeft {
  left: 0px; }

.logo:hover, .logo:focus, .logo:active {
  background: #cccccc;
  color: white; }

#changeJobID, .width100 {
  width: 100%; }

.slideMenuContent {
  position: absolute;
  top: 54px;
  left: 0px;
  margin-left: -100%;
  z-index: 1005;
  width: 100%; }

#indexContent {
  width: 100%;
  margin-left: 0%; }

.tooltip {
  z-index: 777 !important;
  opacity: 1;
  margin-top: 10px; }

.tooltip.in {
  opacity: 1 !important; }

.tooltip-inner {
  background-color: #00acd6 !important;
  color: #fff;
  padding: 5px;
  font-size: 14px; }

.tooltip.top .tooltip-arrow {
  border-top-color: #00acd6; }

.tooltip.right .tooltip-arrow {
  border-right-color: #00acd6; }

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #00acd6; }

.tooltip.left .tooltip-arrow {
  border-left-color: #00acd6; }

.menuItem2, .menuItem3 {
  display: inline-block;
  font-weight: 400;
  font-size: 17px;
  height: 100%;
  margin-left: -7px;
  padding: 11px;
  border-right: 1px solid #cccccc;
  cursor: pointer;
  border-bottom: 1px solid #cccccc;
  color: #595959; }

.menuItem2:hover, .markMenuItem2 {
  background: #66cc00;
  color: #e6e6e6; }

.menuItem3:hover, .markMenuItem3 {
  background: #ff9999;
  color: #e6e6e6; }

.menuItem2 a {
  text-decoration: none; }

.triangle2, .triangle3 {
  margin: auto;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 15px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 10px 15px;
  border-color: transparent transparent #d5ff80 transparent; }

.triangle3 {
  border-color: transparent transparent #ffcccc transparent; }

.enHolPrediction {
  position: absolute;
  text-align: right !important;
  bottom: 9%;
  left: 1%;
  width: 72%;
  height: 40%;
  font-size: 14px;
  font-weight: 500;
  color: grey;
  padding: 1%; }

.noTopBorder {
  border-top: 0px; }

.pad0, .P0 {
  padding: 0px; }

.padTB1, .PTB1 {
  padding-bottom: 1%;
  padding-top: 1%; }

.padRL1, .PRL1 {
  padding-left: 1%;
  padding-right: 1%; }

.PRL2 {
  padding-left: 2%;
  padding-right: 2%; }

.padRL0, .PRL0 {
  padding-left: 0%;
  padding-right: 0%; }

.padB25 {
  padding-bottom: 25px; }

.padT15 {
  padding-top: 15px; }

.padB1, .PB1 {
  padding-bottom: 1%; }

.padR2, .PR2 {
  padding-right: 2%; }

.padT1px {
  padding-top: 1px; }

.padT2px {
  padding-top: 2px; }

.padT3px {
  padding-top: 3px; }

.padB1px {
  padding-bottom: 1px; }

.padB2px {
  padding-bottom: 2px; }

.PTB3P {
  padding-top: 3px;
  padding-bottom: 3px; }

.PTB10P {
  padding-top: 10px;
  padding-bottom: 10px; }

.PB3P {
  padding-bottom: 3px; }

.padTB1px {
  padding-top: 1px;
  padding-bottom: 1px; }

.padTB2px {
  padding-top: 2px;
  padding-bottom: 2px; }

.padT3px {
  padding-top: 3px; }

.PT3P {
  padding-top: 3px;
  padding-bottom: 3px; }

.PT6P {
  padding-top: 6px; }

.padT30B45px {
  padding-top: 30px;
  padding-bottom: 45px; }

.padTB30 {
  padding-top: 30px;
  padding-bottom: 30px; }

.PL5P {
  padding-left: 5px; }

.PR5P {
  padding-right: 5px; }

.padT1 {
  padding-top: 1%; }

.padT10px {
  padding-top: 10px; }

.padL8p {
  padding-left: 8%; }

#backPayTable {
  height: 25px; }

#backPayCalculationTable {
  height: 150px; }

#savingsTable {
  height: 0px; }

#privacyContent, #cookieContent, #termsContent, #aboutContent {
  height: 750px; }

#loadCalendarLanding {
  height: 280px; }

.tableCalendarShift {
  height: 320px; }

/*
#aboutContent, #contactContent {
  height: 600px;
}*/
.T18 {
  font-size: 18px; }

.TAR {
  text-align: right; }

.TAC {
  text-align: center; }

.TAL {
  text-align: left; }

.width80 {
  width: 80%; }

.width20 {
  width: 20%; }

#holidaySummaryTable tr th, #holidaySummaryTablePY tr th {
  text-align: center;
  border: 1px solid #cccccc; }

#holidaySummaryTable tr td, #holidaySummaryTablePY tr td {
  text-align: center;
  border: 1px solid #cccccc; }

#holidaySummaryTable, #holidaySummaryTablePY, .deductionTable {
  width: 100%;
  border: 1px solid #cccccc; }

#holidaySummaryBody {
  padding: 3% 8% 0%; }

.holidayUsedColor {
  background-color: #b3ffb3; }

.holidayBookedColor {
  background-color: #e6ffe6; }

#holidaySummaryTable tr, #holidaySummaryTablePY tr {
  background-color: #f2f2f2; }

#holidaySummaryTable tr [colspan="2"], #holidaySummaryTablePY tr [colspan="2"] {
  background-color: #d9d9d9;
  font-weight: 500; }

#holidaySummaryTable caption, #holidaySummaryTablePY caption {
  border: 1px solid #cccccc;
  border-bottom: none; }

.TARI {
  text-align: right !important;
  padding-right: 2%; }

.deductionTable caption {
  background-color: #e6e6e6;
  border: 1px solid #cccccc;
  border-bottom: none;
  margin-top: 10px; }

.deductionTable tbody tr {
  border-top: 1px solid #cccccc; }

.deductionTable tbody tr td:first-child {
  border-right: 1px solid #cccccc;
  padding-left: 1%;
  padding-right: 1%;
  text-align: center; }

.deductionTable tbody tr td:last-child {
  padding-left: 1%;
  padding-right: 1%;
  text-align: center; }

.deductionTable tbody tr:nth-child(2) {
  background-color: #f2f2f2;
  font-weight: 500; }

.deductionTable tbody tr:nth-child(3) {
  background-color: #f2f2f2;
  font-weight: 500; }

.employeeTableRow {
  background-color: #ffffe6; }

.explainTableRow {
  background-color: #f4ffde; }

.preTaxTableRow {
  background-color: #f2fafc; }

.BT {
  border-top: 1px solid #cccccc; }

div div .table {
  border-collapse: collapse;
  margin: 0px; }

.table-responsive {
  margin: 0px;
  margin-top: 20px;
  border: 1px solid #cccccc;
  -webkit-box-shadow: 0 8px 6px -6px #4d4d33;
  box-shadow: 0 8px 6px -6px #4d4d33;
  padding: 0px;
  overflow: hidden; }

div div table caption {
  position: relative;
  height: 40px;
  padding: 0px 14px;
  border: none;
  border-bottom: 1px solid #cccccc; }

table caption i, .chartTitle i, table tfoot tr td i {
  cursor: pointer;
  color: #3bb300;
  font-size: 35px; }

.fa-info-circle {
  position: absolute;
  right: 4px;
  top: 2px; }

.infoStatic {
  position: static !important; }

#infoBody table caption {
  height: auto;
  min-height: 40px !important; }

.fa-eye-slash {
  position: absolute;
  left: 4px;
  top: 2px;
  z-index: 100; }

table caption i:hover {
  color: green; }

table caption i:focus {
  color: green; }

table caption i:active {
  color: green; }

table tfoot tr td i:hover {
  color: green; }

table tfoot tr td i:focus {
  color: green; }

table tfoot tr td i:active {
  color: green; }

.table thead {
  background-color: #f2f2f2;
  color: #4d4d33;
  height: 35px; }

.table thead tr th:first-child, .table thead tr th:nth-child(2) {
  font-weight: 400;
  font-size: 20px;
  border-bottom: 1px solid #cccccc; }

.table thead tr th:first-child {
  border-right: 1px solid #cccccc;
  text-align: left;
  padding: 0px 0px 0px 15px; }

.table thead tr th:nth-child(2) {
  padding: 0px 15px 0px 0px;
  text-align: right; }

:is(#totalEarningsTableBackPayAnimation, #totalEarningsTableBackPayAnimationLimbo, .totalEarningsTableBackPayAnimationInfo) :is(table thead tr th:nth-child(3)) {
  padding: 0px 15px 0px 0px;
  text-align: right;
  font-weight: 400;
  font-size: 20px;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc; }

.table tbody tr td {
  font-size: 18px;
  padding: 0px;
  border: none; }

.table tbody tr td:first-child {
  text-align: left;
  padding-left: 5px;
  border-right: 1px solid #cccccc !important; }

.table tbody tr td:nth-child(2) {
  padding-right: 5px;
  text-align: right; }

#compareExistingValues > tr > td {
  text-align: center !important;
  height: 40px;
  padding-top: 7px; }

#infoBody > table > thead > tr > th {
  text-align: center !important; }

#infoBody > table {
  margin-bottom: 5px; }

#totalEarningsTableBackPay > tr, .totalEarningsTableBackPayInfo > tr #compareExistingValues > tr > td {
  cursor: pointer; }

#totalEarningsTableBackPay > tr:hover, #compareExistingValues > tr > td:hover {
  opacity: 0.6; }

:is(#totalEarningsTableBackPay, #totalEarningsTableBackPayLimbo, .totalEarningsTableBackPayInfo) :is(tr td:nth-child(3)) {
  padding-right: 5px;
  text-align: right;
  border-left: 1px solid #cccccc; }

#totalEarningsTableBackPay > tr, #totalEarningsTableBackPayLimbo > tr, .totalEarningsTableBackPayInfo > tr {
  border-bottom: 1px solid #cccccc;
  height: 35px; }

:is(#totalEarningsTableBackPay, #totalEarningsTableBackPayLimbo, .totalEarningsTableBackPayInfo) tr > td {
  padding-top: 5px; }

#backPayResultsTableSection {
  margin-bottom: 50px; }

/*#totalEarningsTableBackPay> tr:last-child,#totalEarningsTableBackPayLimbo> tr:last-child{
border-bottom: 0px;
}*/
:is(#backPayTableTfoot, #backPayTableTfootLimbo, .backPayTableTfootInfo) tr > td {
  border-top: none; }

.inc {
  background-color: #e6ffe6; }

.noInc {
  background-color: #ffe6e6; }

canvas {
  position: relative; }

.moveLimboOutOfSight {
  position: fixed;
  left: -10000px;
  width: 100%; }

.themeColorRow,
:is(#taxFreePayTable, #preTaxDeductionsTable, #last12MonthsHoursTable, #last12WeeksPaidHoursTable)
:is(tr:last-child),
:is(#last12MonthsHourlyRateTable, #last12MonthsDailyPayTable, #last12WeeksHourlyRateTable, #last12WeeksDailyPayTable)
:is(tr:nth-last-child(6), tr:nth-last-child(5), tr:nth-last-child(4), tr:nth-last-child(3), tr:nth-last-child(2), tr:last-child),
:is(#totalEarningsTable, #weeklyPaymentsTable, .infoWeeklyPaymentsTable) :is(tr:nth-last-child(4), tr:nth-last-child(3), tr:nth-last-child(2), tr:last-child),
:is(#YTDTable, #last12MonthsTotalsTable, #last12WeeksAveragesTable, #last52WeeksAveragesTable, #last12MonthsAveragesMonthlyTable,
#last3MonthsAveragesTable, #YTDEstimatesTable, #YTDWeeklyAveragesTable, .infoYTDTable) :is(tr:nth-last-child(6), tr:nth-last-child(5), tr:nth-last-child(4), tr:nth-last-child(3)),
:is(#last12MonthsCostToEmployerTable, #last12WeeksCostToEmployerTable, #YTDDailyAveragesTable, #YTDHourlyAveragesTable, #last12MonthsDaysTable) :is(tr:nth-last-child(2), tr:last-child),
:is(#last12MonthsDaysTable) :is(tr:nth-last-child(3)),
:is(#last12MonthsGrossPayTable, #last12WeeksGrossPayTable, #last12WeeksPaidHoursTable) :is(tr:nth-last-child(2)) {
  background: #e6e6e6;
  font-weight: 400; }

#bankHolTable :is(tr:nth-last-child(2), tr:nth-last-child(5)) {
  height: auto;
  height: 0px;
  border-top: 1px solid #cccccc; }

:is(#last12WeeksAveragesTable, #last52WeeksAveragesTable, #YTDWeeklyAveragesTable, #last12MonthsAveragesMonthlyTable, #last12MonthsTotalsTable,
#YTDEstimatesTable, #last3MonthsAveragesTable, #weeklyDeductionsTable, #YTDTable, #totalDeductionsTable, .infoDeductionsTable) :is(tr:nth-last-child(2)) {
  font-weight: 400;
  background: #ffe6e6; }

:is(#weeklyDeductionsTable, #totalDeductionsTable, #YTDTable, #YTDEstimatesTable, #YTDWeeklyAveragesTable, #last12WeeksAveragesTable,
#last12WeeksGrossPayTable, #last52WeeksAveragesTable, #last12MonthsGrossPayTable, #last12MonthsAveragesMonthlyTable,
#last12MonthsTotalsTable, #last3MonthsAveragesTable, .infoDeductionsTable) :is(tr:last-child) {
  background: #ceff99;
  font-weight: 400; }

.payrollGivingStyle {
  background: #fff7e6; }

.mainSocSecReliefStyle {
  background: #fcf5fa; }

#totalHours {
  position: absolute;
  left: 10px;
  top: 6px;
  font-size: 18px; }

:is(#weeklyPaymentsTableWhole, #weeklyPaymentsTableWholeLimbo, .infoWeeklyPaymentsTableWhole) :is(thead tr th) {
  font-weight: 400;
  font-size: 20px;
  border-bottom: 1px solid #cccccc;
  padding: 0px; }

:is(#weeklyPaymentsTableWhole, #weeklyPaymentsTableWholeLimbo, .infoWeeklyPaymentsTableWhole) :is(thead tr th:first-child),
:is(#weeklyPaymentsTableWhole, #weeklyPaymentsTableWholeLimbo, .infoWeeklyPaymentsTableWhole) :is(tbody tr td:first-child) {
  border-right: none !important;
  text-align: left;
  padding-left: 5px; }

:is(#displaySetWeeklyTable, #displaySetWeeklyTableLimbo, #displaySetHolidayTable, #displaySetHolidayTableLimbo,
#displaySetYTDTable, #displaySetYTDTableLimbo, #displaySetLast3MonthsTable, #displaySetLast3MonthsTableLimbo,
#displaySetLast12WeeksTable, #displaySetLast12WeeksTableLimbo, #displaySetLastYearTable, #displaySetLastYearTableLimbo,
#displaySetLast12MonthsTable, #displaySetLast12MonthsTableLimbo, #displaySetIconSettingsTable, #displaySetIconSettingsTableLimbo,
#displaySetUserGuideTable, #displaySetUserGuideTableLimbo, #displaySetMainPageSettingsTable, #displaySetMainPageSettingsTableLimbo,
#displaySetMainTableDaysTable, #displaySetMainTableDaysTableLimbo, #selectAllDayVisTable, #selectAllDayVisTableLimbo,
#dayVisSettingsTable, #dayVisSettingsTableLimbo, #paymentsVisSettingsTable, #paymentsVisSettingsTableLimbo,
#deductionsVisSettingsTable, #deductionsVisSettingsTableLimbo, #paymentsVisSettingsTableSmithey, #paymentsVisSettingsTableSmitheyLimbo) :is(tr td:first-child) {
  border-right: none !important;
  text-align: left;
  padding-left: 5px;
  padding-top: 2px;
  padding-bottom: 2px; }

/* cant use this appraoch as it then removes border in main page!!! will have to stick to ids and the code above
//TEST for display, day vis and other seetings tables.
div>div>div>table>tbody>tr>td:first-child{


  border-right: none !important;
  text-align: left;
  padding-left: 5px;
  padding-top:2px;
  padding-bottom:2px;

}
*/
#paymentsVisSettingsTableContainer, #deductionsVisSettingsTableContainer {
  margin-top: -15px; }

:is(#displaySetUserGuideTable, #displaySetUserGuideTableLimbo) :is(tr td:first-child) {
  padding-right: 5px; }

:is(#weeklyPaymentsTableWhole, #weeklyPaymentsTableWholeLimbo, .infoWeeklyPaymentsTableWhole) :is(thead tr th:last-child, tbody tr td:last-child) {
  text-align: right;
  padding-right: 5px; }

:is(#weeklyPaymentsTable, .infoWeeklyPaymentsTable) :is(tr:nth-last-child(2), tr:nth-last-child(3), tr:last-child) {
  border-top: 1px solid #cccccc; }

:is(#weeklyPaymentsTable, .infoWeeklyPaymentsTable) :is(tr td:nth-last-child(2), tr td:nth-last-child(3)) {
  text-align: right; }

:is(#weeklyPaymentsTableWhole, .infoWeeklyPaymentsTableWhole) :is(thead tr th:nth-last-child(2), thead tr th:nth-last-child(3)) {
  padding-right: 1%;
  text-align: right; }

.greenBackground {
  background-color: #ccffcc;
  font-weight: 400;
  color: green; }

.redBackground {
  background-color: #ffebe6;
  font-weight: 400;
  color: #ff6666; }

.empPensionText {
  font-style: italic;
  color: #8c8c8c;
  background-color: #f2f2f2; }

.empContDedStyle {
  background-color: #f7f7f7; }

#YTDModalTable, .YTDModalTableInfo {
  width: 100%;
  border-bottom: 1px solid #cccccc; }

#YTDModalTable caption, .YTDModalTableInfo caption {
  border-top: 1px solid #cccccc; }

.YTDModalTbodyInfo > tr > td {
  text-align: center;
  border-left: 1px solid #cccccc;
  height: 18px !important; }

.YTDModalTbodyInfo > tr > td:first-child {
  border-left: none; }

#YTDModalTable thead th, .YTDModalTableInfo thead th {
  background-color: #f2f2f2;
  padding: 0px;
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  border-bottom: none; }

.YTDModalTbodyInfo tr:last-child,
:is(#displaySetUserGuideTable, .YTDModalTbodyInfo2, #YTDDaysSummary, #YTDHoursSummary, #last12WeeksPaidHoursSummary,
#last12WeeksAveragesSummary, #last12WeeksGrossPaySummary, #YTDSummary, #last3MonthsAveragesSummary, #last12MonthsTotalsSummary,
#last12MonthsAveragesMonthlySummary, #last52WeeksAveragesSummary, #last12MonthsCostToEmployerSummary, #last12MonthsGrossPaySummary,
#last12MonthsHoursSummary, #last12MonthsDaysSummary) :is(tr:nth-last-child(2)) {
  background-color: #f2f2f2;
  font-weight: 450; }

/*#missPaymentsElementsContainer tr td:first-child{
  border-right: none !important;
}*/
#horizontalMenuDedDivContainer > div tr td,
#horizontalMenuPayDivContainer > div tr td,
#horizontalMenuPayDivContainerLeave > div tr td,
#deductionsSettingsContainer > div tr td,
#missPaymentsTableContainer tr td,
#paymentSettingsContainer > div tr td,
#paymentsSmitheyContainer > div tr td,
div.infoModalTable div.table-responsive table.table tbody tr td {
  padding-top: 2px;
  padding-bottom: 2px;
  border: none !important; }

#horizontalMenuDedDivContainer > div,
#horizontalMenuPayDivContainer > div,
#horizontalMenuPayDivContainerLeave > div {
  margin-top: 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-top: 1px solid #cccccc;
  border-bottom: none;
  display: none;
  height: 0px;
  background: #ffffe6; }

#enhHolRateMainDiv {
  display: none;
  height: 0px; }

div > #sicknessTableMainDiv, #sicknessTable, #sicknessTableSmithey {
  background: #ff9999; }

div > #parentalTableMainDiv, #parentalTable, #parentalTableSmithey {
  background: #ffcc99; }

div > #bereavementTableMainDiv, #bereavementTable, #bereavementTableSmithey {
  background: #4d4d4d;
  color: white; }

div > #miscarriageTableMainDiv, #miscarriageTable, #miscarriageTableSmithey {
  background: #754c4c;
  color: white; }

div > #compassionateTableMainDiv, #compassionateTable, #compassionateTableSmithey {
  background: #ffe6cc; }

div > #furloughTableMainDiv, #furloughTable, #furloughTableSmithey {
  background: #d1e0e0; }

div > #paidTimeOffTableMainDiv, #paidTimeOffTable, #paidTimeOffTableSmithey {
  background: #b3e6b3; }

div > #personalDayLeaveTableMainDiv, #personalDayLeaveTable, #personalDayLeaveTableSmithey {
  background: #c2d1f0; }

div > #gardeningLeaveTableMainDiv, #gardeningLeaveTable, #gardeningLeaveTableSmithey {
  background: #c6ecc6; }

div > #sabbaticalLeaveTableMainDiv, #sabbaticalLeaveTable, #sabbaticalLeaveTableSmithey {
  background: #ccf2ff; }

div > #duvetDayLeaveTableMainDiv, #duvetDayLeaveTable, #duvetDayLeaveTableSmithey {
  background: #9ae59a; }

div > #studyLeaveTableMainDiv, #studyLeaveTable, #studyLeaveTableSmithey {
  background: #f9e6ff; }

div > #juryServiceLeaveTableMainDiv, #juryServiceLeaveTable, #juryServiceLeaveTableSmithey {
  background: #ccccff; }

div > #keepingInTouchDayTableMainDiv, #keepingInTouchDayTable, #keepingInTouchDayTableSmithey {
  background: #fff0b3; }

div > #miscellaneousLeaveTableMainDiv, #miscellaneousLeaveTable, #miscellaneousLeaveTableSmithey {
  background: #fff2e6; }

div > #religiuosLeaveTableMainDiv, #religiuosLeaveTable, #religiuosLeaveTableSmithey {
  background: #ffe44d; }

div > #carersLeaveTableMainDiv, #carersLeaveTable, #carersLeaveTableSmithey {
  background: #c1f0f0; }

div > #volunteersLeaveTableMainDiv, #volunteersLeaveTable, #volunteersLeaveTableSmithey {
  background: #e6e6ff; }

div > #maternityTableMainDiv, #maternityTable, #maternityTableSmithey {
  background: #FEE1E8; }

div > #neonatalCareTableMainDiv, #neonatalCareTable, #neonatalCareTableSmithey {
  background: #f5b99f; }

div > #paternityTableMainDiv, #paternityTable, #paternityTableSmithey {
  background: #CCE2CB; }

div > #adoptionTableMainDiv, #adoptionTable, #adoptionTableSmithey {
  background: #FFD8BE; }

div > #sharedParentalTableMainDiv, #sharedParentalTable, #sharedParentalTableSmithey {
  background: #FFCCB6; }

div > #administrativeLeaveTableMainDiv, #administrativeLeaveTable, #administrativeLeaveTableSmithey {
  background: #f08173; }

div > #specialLeaveTableMainDiv, #specialLeaveTable, #specialLeaveTableSmithey {
  background: #de6c5d; }

div > #medicalLeaveTableMainDiv, #medicalLeaveTable, #medicalLeaveTableSmithey {
  background: #f26d93; }

div > #workationTableMainDiv, #workationTable, #workationTableSmithey {
  background: #ebeb8d; }

div > #businessTripTableMainDiv, #businessTripTable, #businessTripTableSmithey {
  background: #edd77e; }

.visOverflow {
  overflow: visible !important; }

#employmentContainer {
  margin-top: 55px; }

#defaultStartMinute, #holidayStartDay, #defaultStartMinuteMain, #holidayStartDayButtonMain, #taxYearStartDay, #taxYearStartDayMain,
#defaultEndMinute, #defaultEndMinuteMain, #defaultStartMinuteShiftGen, #defaultEndMinuteShiftGen,
#defaultStartMinuteSmithey, #holidayStartDaySmithey, #defaultEndMinuteSmithey {
  border-left: none; }

/*
//for chart, but it doesn seem towork and chart is still not responsive.
.chart-container {
  position: relative;
  margin: auto;
}
*/
#copyMainTable thead tr th, #unsavedChangesTable thead tr th, .copyMainTableInfo thead tr th {
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  padding: 0px; }

#copyMainTable, .copyMainTableInfo {
  border: 1px solid #cccccc;
  border-top: none; }

#copyMainTable caption, .copyMainTableInfo caption {
  border: 1px solid #cccccc; }

:is(#copyMainTable, #unsavedChangesTable, .copyMainTableInfo) :is(thead tr th:nth-last-child(2), thead tr th:nth-last-child(3)),
:is(#copyMainTableBody, .copyMainTableBodyInfo) :is(tr td:nth-last-child(2), tr td:nth-last-child(3)),
:is(#unsavedChangesTable) :is(tbody tr td:nth-last-child(2), tbody tr td:nth-last-child(3)) {
  border-right: 1px solid #cccccc; }

#copyMainTable thead tr th, #unsavedChangesTable thead tr th, .copyMainTableInfo thead tr th {
  border-bottom: none; }

#copyMainTableBody tr td, table .copyMainTableBodyInfo tr td {
  text-align: center;
  border-top: 1px solid #cccccc;
  height: 40px;
  padding-top: 7px;
  white-space: nowrap; }

.copyMainTableInfo {
  -webkit-box-shadow: 0 8px 6px -6px #4d4d33;
  box-shadow: 0 8px 6px -6px #4d4d33; }

table#unsavedChangesTable tr td {
  border-top: 1px solid #cccccc;
  min-height: 40px;
  text-align: center;
  padding-top: 2px; }

#unsavedChangesTable {
  border: 1px solid #cccccc;
  border-top: none; }

#unsavedChangesTable caption {
  border: 1px solid #cccccc; }

#last12WeeksHourlyRateSummary, #last12MonthsAveragesMonthlySummary, #last12WeeksPaidHoursSummary {
  padding-right: 20px; }

tbody#payPeriodsTable tr.radioButtonRow td, tbody#payPeriodsTableContainerMain tr.radioButtonRow td, tbody.payPeriodsTableInfo tr.radioButtonRow td,
tbody#surchargeDedTable tr.radioButtonRow td, tbody#surchargeDedTableContainerMain tr.radioButtonRow td,
tbody#payPeriodsTableSmithey tr.radioButtonRow td, tbody#payPeriodsTableContainerSmithey tr.radioButtonRow td {
  text-align: center; }

tr#biWeeklyPayDateRow td:nth-last-child(3), tbody tr.biWeeklyPayDateRow td:nth-last-child(3) {
  padding-right: 0%; }

tr#biWeeklyPayDateRow td:last-child, tr.biWeeklyPayDateRow td:last-child {
  padding-right: 1%; }

.table2ndTdLeft tbody tr td:last-child {
  text-align: left;
  padding-left: 5px; }

.table2ndTdLeft tbody tr td:last-child, .table2ndTdLeft tbody tr td:first-child {
  white-space: initial; }

div div table.table2ndTdLeft thead th {
  text-align: center !important; }