@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Medium.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Bold.otf") format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Regular.otf") format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Bold.otf") format('opentype');
  font-weight: bold;
  font-style: normal;
}

.gotham {
  font-family: "Gotham", Helvetica, Arial, sans-serif;
}

.myriad {
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
}

.orange {
  color: #2dab79;
}

.blue {
  color: #007FEB;
}

.red {
  color: #9e1e00;
}

.form-checkbox input:checked+.form-icon, .form-radio input:checked+.form-icon, .form-switch input:checked+.form-icon {
  background: #2dab79;
  border-color: #2dab79;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font: 14px Arial, sans-serif;
}

.modal.modal-sm .modal-container {
  max-width: 320px;
  padding: 20px;
  border: 1px solid #8E8E93;
}

.buttons {
  margin-top: 30px;
}

button {
  background-color: #2dab79;
  border: 1px solid transparent;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  margin: 20px 0 0 0;
  border-radius: 5px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}

button:hover {
  border: 1px solid #2dab79;
}

button:disabled {
  color: #ffffff66;
  cursor: default;
  opacity: .5;
}

button.wide {
  width: 100%;
}

button.blue {
  background-color: #007FEB;
  border: 2px solid #007FEB;
  color: #ffffff;
  padding: 10px 20px 8px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  margin: 20px 10px 0 0;
  border-radius: 5px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
}

button.blue:hover {
  border: 2px solid #007FEB;
}

button.blue.outline {
  background-color: transparent;
  border: 2px solid #007FEB;
  color: #007FEB;
  padding: 10px 20px 8px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  margin: 20px 10px 0 0;
  border-radius: 5px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
}

button.blue.outline:not([disabled]):hover, button.blue.outline.active {
  color: #ffffff;
  background-color: #007FEB;
}

button.red {
  background-color: #9e1e00;
  border: 2px solid #9e1e00;
  color: #ffffff;
  padding: 10px 20px 8px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  margin: 20px 0 0 0;
  border-radius: 5px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
}

button.red:hover {
  border: 2px solid #9e1e00;
}

button.red.outline {
  background-color: transparent;
  border: 2px solid #9e1e00;
  color: #9e1e00;
  padding: 10px 20px 8px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  margin: 20px 0 0 0;
  border-radius: 5px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
}

button.red.outline:not([disabled]):hover, button.red.outline.active {
  color: #ffffff;
  background-color: #9e1e00;
}

.buttons button {
  margin-right: 10px;
}

.buttons button:disabled {
  opacity: .3;
  cursor: default;
}

.group input, .group select {
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 7px 14px 4px 14px;
}

.group select option:hover {
  background-color: #ffffff;
}

.group input::placeholder { 
  color: #C7C7CC; 
}

.group {
  display: inline-block;
  margin: 0 4px;
}

.group .inputBox {
  position: relative;
}

.group .inputBox input {
  width: 100%;
}

.group select {
  background-color: #ffffff;
}

.group select.inactive {
  color: #D1D1D6;
}

.group select.inactive:focus {
  color: #000000;
}

.group .inputBox .icon.icon-cross {
  position: absolute;
  right: 6px;
  top: 11px;
  cursor: pointer;
}
.group .inputBox .icon.icon-cross.inactive {
  color: #f1f1f1;
  cursor: default;
}

.group p {
  margin: 26px 0 6px 0;
  font-family: "Gotham", Helvetica, Arial, sans-serif;
  font-size: 20px;
}

.group input.form-input.form-control.input {
  /* display: none; */
}

.group.disabled .flatpickr-calendar {
  pointer-events: none;
}



.login {
  width: 100%;
  height: 100%;
  background-image: url(../images/excavator_sunset.jpg);
  background-size: cover;
}

.login .overlay {
  width: 100%;
  height: 100%;
  background-color: #00000044;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login .overlay .centered {
  width: 327px;
}

.login .overlay .centered .whiteLogo {
  width: 165px;
  height: 40px;
  margin: 0 auto 20px auto;
  background-image: url(../images/kwestgrouplogo_white.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

.login .overlay .centered .box {
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: #000000;
}

.login .overlay .centered .box .title {
  text-align: center;
  font-size: 20px;
  color: #2dab79;
  font-weight: bold;
  margin: 30px 0;
}

.login .overlay .centered .box input {
  display: block;
  border: 1px solid #8E8E93;
  font-size: 14px;
  width: 295px;
  padding: 14px 12px;
  margin: 16px auto;
}

.login .overlay .centered .box input::placeholder { 
  color: #C7C7CC; 
}

.login .overlay .centered .box .message {
  text-align: center;
  font-size: 12px;
  margin: 20px 0;
}

/* sidebar */

nav {
  margin: 0;
  padding: 0 0 0 37px;
  width: 220px;
  background-color: #F2F2F7;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  overflow: auto;
  font-family: "Gotham", Helvetica, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

nav h3 {
  color: #2dab79;
  font-weight: bold;
  font-size: 21px;
  margin: 47px 0 0 0;
  border-bottom: 1px solid black;
  padding-bottom: 9px;
  font-family: "Gotham", Helvetica, Arial, sans-serif;
}

nav h3 .loading {
  position: relative;
  margin: 0px 0 0 20px;
  display: inline-block;
}

nav h3 .loading.hidden {
  display: none;
}

nav button.blue.outline {
  margin: 19px 0 0 4px;
}

nav a {
  display: block;
  margin: 26px 0 0 6px;
  text-transform: uppercase;
  color: black;
}

nav a:visited {
  color: black;
}

@media screen and (max-height: 730px) {
  nav a {
    margin: 16px 0 0 6px;
  }
}

nav a:hover, nav a.active {
  color: #2dab79;
  text-decoration: none;
}

nav a.shortLogout {
  display: none;
}

nav a.admin {
  margin-left: 19px;
}

nav .adminTools {
  display: block;
  margin-top: 26px;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 19px;
  background-image: url(../images/arrow_right.png);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: 0 50%;
  cursor: pointer;
}

nav .adminTools.expanded {
  background-image: url(../images/arrow_down.png);
} 

nav a.logout {
  display: block;
  height: 20px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #2699FB;
  font-size: 12px;
  position: absolute;
  left: 21px;
  bottom: 100px;
  padding: 4px 0 4px 29px;
  background-image: url(../images/icon9.png);
  background-repeat: no-repeat;
  background-size: 29px;
  background-position: 0 53%;
}

nav .hello {
  position: absolute;
  bottom: 128px;
  left: 34px;
  text-transform: uppercase;
}

nav .logo {
  width: 165px;
  height: 40px;
  position: absolute;
  left: 28px;
  bottom: 24px;
  background-image: url(../images/kwestgrouplogo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50%;
}

@media screen and (max-height: 620px) {
  nav .logo, nav .hello, nav a.logout {
    display: none;
  }
  nav a.shortLogout {
    display: block;
  }
}

.layout > .content {
  position: absolute;
  left: 220px;
  top: 0px;
  width: calc(100% - 220px);
  height: 100%;
}

.pagination {
  position: absolute;
  right: -17px;
  top: -21px;
  width: 120px;
  height: 70px;
}

.pagination .desc {
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
}

.pagination .left, .pagination .right {
  display: block;
  position: absolute;
  top: 23px;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  background-color: #F2F2F7;
  width: 38px;
  height: 32px;
  color: #8E8E93;
  cursor: pointer;
}

.pagination .left {
  left: 18px;
}

.pagination .right {
  right: 17px;
}

.pagination .left.disabled, .pagination .right.disabled {
  cursor: default;
  border: 1px solid #ffffff;
  background-color: #f4f4f5;
}

.pagination .left i, .pagination .right i {
  font-size: 10px;
  margin: 10px 0px 0px 13px;
}

.pagination .left.disabled i, .pagination .right.disabled i {
  color: #dcdcdc;
}

/* page */

.page {
  position: relative;
  margin: 0 29px 29px 16px;
}

.page .header {
  border-bottom: 1px solid black;
}

.header .title {
  color: #2dab79;
  font-size: 34px;
  font-weight: bold;
  font-family: "Gotham", Helvetica, Arial, sans-serif;
  margin: 85px 0 10px 0;
  padding: 0 0 0 35px;
  background-position: -17px -12px;
  background-repeat: no-repeat;
  background-size: 60px;
}

/* policy */

.page.policy .header .title {
  background-image: url(../images/Per_Diem_Icons-01.png);
  padding: 0 0 0 42px;
  background-position: 0px 3px;
  background-size: 32px;
}

.page.policy .policyTable {
  margin: 20px 0;
}

/* updatePolicy */

.page.updatePolicy .header .title {
  background-image: url(../images/Per_Diem_Icons-01.png);
  padding: 0 0 0 42px;
  background-position: 0px 3px;
  background-size: 32px;
}

.page.updatePolicy .policyTable {
  margin: 20px 0;
}

.page.updatePolicy .buttons button {
  margin-right: 10px;
}

.page.updatePolicy .checkedIconPolicy, .page.updatePolicy .hotelIconPolicy {
  background-image: url(../images/Per_Diem_Icons-05.png);
  position: relative;
  top: 5px;
  width: 24px;
  height: 24px;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 50%;
  display: inline-block;
  margin-right: 10px;
}

.page.updatePolicy .hotelIconPolicy {
  background-image: url(../images/Per_Diem_Icons-08.png);
}

.page.updatePolicy th input {
  width: 70px;
  height: 36px;
  padding: 4px 6px;
  font-size: 20px;
  margin-left: 10px;
}

.page.updatePolicy td input {
  width: 60px;
  height: 36px;
  padding: 4px 6px;
  font-size: 20px;
}

.page.updatePolicy input::placeholder {
  color: rgb(185, 185, 185);
}

.page.updatePolicy .globalRates {
  margin-top: 10px;
}

.page.updatePolicy .globalRates .group {
  margin: 10px;
}

.page.updatePolicy .globalRates .group .label {
  font-size: 16px;
}

.page.updatePolicy .globalRates .group input {
  width: 70px;
  height: 36px;
  padding: 4px 6px;
  font-size: 20px;
  margin-left: 10px;
}

.page.updatePolicy .policyTable td span {
  font-size: 16px;
}

/* help */

.page.help .header .title {
  background-image: url(../images/icon15.png);
}

.page.help .markdownContainer {
  margin-top: 20px;
}

/* updateHelp */

.page.updateHelp .header .title {
  background-image: url(../images/icon15.png);
}

.page.updateHelp .markdownContainer {
  margin-top: 20px;
}

.page.updateHelp .directions {
  margin-top: 20px;
}

.page.updateHelp .buttons button {
  margin-right: 10px;
}

/* reports */

.page.reports .title {
  padding: 0;
}

.page.reports .title i {
  margin-right: 5px;
  position: relative;
  top: -3px;
}

.page.reports .report {
  margin: 30px 0;
}

.page.reports span.reportTitle {
  font-weight: bold;
  font-size: 20px;
}

.page.reports .filter {
  margin-bottom: 10px;
}

.page.reports .filter .form-input.flatpickr-input.filterDate {
  width: 141px;
}

.page.reports .filter .chipZone {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #80808038;
  margin: 0 6px;
  min-width: 100px;
  min-height: 38px;
}

.page.reports button.btn {
  clear: left;
  display: block;
  margin: 16px;
}

.page.reports .filter .any {
  opacity: .35;
}

.page.reports .filter .form-group {
  clear: left;
  margin: 8px 16px;
}

.page.reports .filter .boxWithX {
  margin-left: 6px;
  margin-right: 4px;
}

.page.reports .filter > .title {
  margin-left: 22px;
}

.page.reports .filter > .title, .page.reports .filter > .boxWithX, .page.reports .filter > .form-select, .page.reports .filter > .form-checkbox {
  margin-right: 12px;
}

.page.reports .filter .boxWithX {
  position: relative;
  display: inline-block;
}

.page.reports .filter .boxWithX .icon.icon-cross {
  position: absolute;
  right: 6px;
  top: 11px;
  cursor: pointer;
  color: #5a0909;
}
.page.reports .filter .boxWithX .icon.icon-cross.inactive {
  position: absolute;
  right: 6px;
  top: 11px;
  color: gainsboro;
  cursor: default;
}

.page.reports .filter .hidePosted {
  display: inline-block;
}

.page.reports .filter .form-input.flatpickr-input[readonly] {
  background-color: #ffffff;
}

.page.reports .filter .form-input, .page.reports .filter .form-select {
  width: auto;
}

.page.reports .form-group > span {
  width: 80px;
  display: inline-block;
  text-align: right;
}

.page.reports table {
  font-family: monospace;
}

.page.reports table tr td {
  width: 25%;
}

.page.reports table tr.expandable .employeeName {
  padding-left: 19px;
  background-image: url(../images/arrow_right.png);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: 0 50%;
  cursor: pointer;
}

.page.reports table tr.expandable.expanded .employeeName {
  background-image: url(../images/arrow_down.png);
}

.page.reports table tr.details {
  background-color: #127feb1c;
}

.page.reports table tr td.blue {
  cursor: pointer;
}

.page.reports table tr.totals {
  font-weight: bold;
  border-top: 2px solid #2dab79;
}

.page.reports table.drilled tr.totals {
  border-top: 2px solid #bdbfc3;
}

.page.reports table tr.drilledDownEmployee {
  font-weight: bold;
  border-bottom: 2px solid #2dab79;
}

.page.reports table tr.pagRow {
  border-top: 2px solid #2dab79;
}

.page.reports table tr.clickable {
  cursor: pointer;
}

.page.reports table tr.clickable td i.icon {
  color: #127ee8;
  opacity: 0.6;
}

.page.reports table tr th {
  cursor: pointer;
}

.page.reports table tr td, .page.reports table tr th {
  text-align: right;
}

.page.reports table.table tbody tr.grayed {
  opacity: 0.25;
}

.page.reports table.table tbody tr.drillDown td a {
  color: #2dab79;
  font-weight: bold;
  text-decoration: none;
}

.page.reports table.table tbody tr.drillDown td a span.projectName {
  color: #3b4351;
  font-size: 11px;
}

.page.reports table .pagination {
  position: relative;
  padding: 0px;
  justify-content: flex-end;
}

.page.reports table .pagination .desc {
  position: relative;
  margin-right: 10px;
  top: -1px;
  color: gray;
}

.page.reports table .pagination i {
  margin: 0 4px;
  color: #127ee8;
  cursor: pointer;
  padding: 12px;
  position: relative;
  top: -5px;
  border-radius: 2px;
}

.page.reports table .pagination i:hover {
  background-color: #e4e4e4;
}

.page.reports table .pagination i.disabled {
  opacity: .4;
  cursor: default;
  background-color: transparent;
}

.page.reports table th.asc::before {
  content: "\25B5";
  color: #2dab79;
}

.page.reports table th.desc::before {
  content: "\25BF";
  color: #2dab79;
}

.page.reports .boxWithX input {
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-size: 11px;
}

.page.reports .chips {
  display: inline-block;
  border: .05rem solid #bcc3ce;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  font-size: 11px;
  margin: 0 10px 0 7px;
  position: relative;
  height: 36px;
  min-width: 140px;
  padding: 10px 10px 0 10px;
  vertical-align: top;
}

.page.reports .chips .chip {
  position: relative;
  top: -5px;
}

.page.reports .inputBox {
  position: relative;
}

.page.reports .inputBox input {
  width: 100%;
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 12px 14px 10px 14px;
}

.page.reports .inputBox .icon.icon-cross {
  position: absolute;
  right: 6px;
  top: 11px;
  cursor: pointer;
}
.page.reports .inputBox .icon.icon-cross.inactive {
  color: #f1f1f1;
  cursor: default;
}

.page.reports .inputBox.employeeSearch {
  display: inline-block;
  width: 242px;
}

.page.reports .matches {
  position: absolute;
  width: 242px;
  z-index: 5;
}

.page.reports .matches span {
  position: relative;
  cursor: pointer;
  display: block;
  font-size: 14px;
  background-color: #f2f2f7;
  border-bottom: 1px solid #8E8E93;
  padding: 4px 6px;
  color: #127feb;
}
.page.reports .matches span:hover {
  color: #1d7525;
}

.page.reports select {
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  color: #7b7b7b;
}

.page.reports .exceptionTable td {
  width: 15%;
}

/* projects */

.page.projects .title {
  padding: 0;
}

.page.projects .title i {
  margin-right: 5px;
  position: relative;
  top: -3px;
}

.page.projects .report {
  margin: 30px 0;
}

.page.projects .title > span {
  font-weight: bold;
}

.page.projects .nudgeDown {
  margin-top: 20px;
}

.page.projects #newProjectSubaddressSelect {
  display: inline-block;
  width: auto;
  margin-right: 10px;
}

.page.projects .projectName {
  margin-top: 30px;
  font-size: 17px;
  margin-bottom: 14px;
  color: #2dab79;
}

.page.projects .projectDetails {
  margin-left: 10px;
}

.page.projects .projectDetails input {
  margin-bottom: 10px;
}

.page.projects .projectDetails input.name {
  width: 45%;
}

.page.projects .projectDetails .addlonglat {
  width: 65%;
}

.page.projects .projectDetails button {
  margin-right: 10px;
  margin-top: 8px;
}

/* log */

.page.log .header .title {
  background-image: url(../images/icon16.png);
  background-position: -16px -12px;
}

.page.log table {
  margin-top: 20px;
  font-size: 12px;
  font-family: monospace;
  border-spacing: 16px 4px;
}

.page.log table tr.special {
  background-color: #fbebe7;
}

.page.log table tr.logEntry span {
  margin-left: 6px;
}
.page.log table tr.logEntry span.sep {
  margin-left: 0px;
}
.page.log table tr.logEntry span:nth-child(1) {
  margin-left: 0px;
}

.page.log table tr.logEntry span.action {
  font-weight: bold;
}

.page.log table tr.logEntry span.hl {
  background-color: rgb(228, 228, 228);
}

.page.log .logEntry:hover {
  cursor: pointer;
  color: #2dab79;
}

/* log entry page */

.content > .log h3 {
  position: relative;
  margin: 30px 30px;
  font-size: 20px;
}

.content > .log .entries {
  position: relative;
  margin: 20px;
}

.content > .log .entries .entry {
  position: relative;
  cursor: pointer;
}

.content > .log .entries .entry.active {
  cursor: default;
  color: #2dab79;
}

.content > .log .entries .entry .bullet {
  position: relative;
  opacity: 0;
}

.content > .log .entries .entry.active .bullet {
  position: relative;
  opacity: 1;
}

/* perdiemList */

.page.perdiemList .header {
  padding-bottom: 15px;
}

.page.perdiemList .header.queue {
  margin-bottom: 20px;
}

.page.perdiemList .header .title {
  background-image: url(../images/Per_Diem_Icons-01.png);
  padding: 0 0 0 42px;
  background-position: 0px 3px;
  background-size: 32px;
}

.page.perdiemList .perdiem {
  max-width: 1000px;
  cursor: pointer;
}

.page.perdiemList .perdiem.draft {
  color: gray;
}

.page.perdiemList .perdiem:nth-child(even) {
  background-color: #F2F2F7;
}

.page.perdiemList .perdiem .left {
  display: inline-block;
  width: 37%;
}

.page.perdiemList .perdiem .middle {
  display: inline-block;
  width: 27%;
}

.page.perdiemList .perdiem .right {
  display: inline-block;
  width: 21%;
}

.page.perdiemList .perdiem .actions {
  display: inline-block;
  width: 15%;
}

.page.perdiemList .perdiem .detail {
  margin: 16px 4px 4px 10px;
  font-family: "Gotham", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.page.perdiemList .perdiem:hover .detail {
  color: #2dab79;
}

.page.perdiemList .perdiem .desc {
  margin: 4px 4px 14px 10px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  color: #8E8E93;
  font-size: 10px;
}

.page.perdiemList .perdiem .approve {
  display: inline-block;
  width: 34px;
  height: 24px;
  background-image: url(../images/icon_check.png);
  background-repeat: no-repeat;
  background-size: 105%;
  background-position: 50%;
  cursor: pointer;
  margin-left: 10px;
}
.page.perdiemList .perdiem .approve.disabled {
  background-image: url(../images/icon_check_gray.png);
  cursor: default;
}

.page.perdiemList .perdiem .deny {
  display: inline-block;
  margin-left: 14px;
  width: 24px;
  height: 24px;
  background-image: url(../images/icon11.png);
  background-repeat: no-repeat;
  background-size: 195%;
  background-position: 50%;
  cursor: pointer;
}

.page.perdiemList .perdiem .comments {
  color: #127feb;
  display: inline-block;
  width: 46px;
  height: 21px;
  font-size: 10px;
  font-weight: bold;
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 0px 0px;
  padding-left: 19px;
  padding-top: 2px;
  position: relative;
  top: 0px;
  background-image: url(../images/Per_Diem_Icons-02a.png);
}
.page.perdiemList .perdiem .comments.messageCount {
  background-image: url(../images/Per_Diem_Icons-02.png);
  top: -9px;
}

.page.perdiemList .perdiem .copyAsNew {
  display: inline-block;
  width: 35px;
  height: 24px;
  background-image: url(../images/Per_Diem_Icons-03.png);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 0% 50%;
  padding-left: 30px;
}

.page.perdiemList .noTimeoffs {
  font-size: 30px;
  color: #e6e6e6;
  font-weight: bold;
  padding-top: 0px;
  position: relative;
  top: 10px;
  left: 10px;
}

/* perdiem */

.page.perdiem .header {
  padding-bottom: 15px;
}

.page.perdiem .header .title {
  background-image: url(../images/Per_Diem_Icons-01.png);
  padding: 0 0 0 42px;
  background-position: 0px 3px;
  background-size: 32px;
}

.page.perdiem table {
  margin-top: 20px;
  font-family: Gotham;
}
.page.perdiem table.verbose {
  min-width: 1200px;
}
.page.perdiem table.disableForm {
  /* margin-top: -16px; */
}

.page.perdiem table tr:nth-child(even) {
  background-color: #f2f2f7;
}

.page.perdiem td {
  height: 64px;
  padding: 0 0 0 10px;
}

.page.perdiem.v2 td {
  height: 74px;
}

.page.perdiem td.char {
  width: 40px;
}

.page.perdiem td.char input {
  text-align: center;
}

.page.perdiem td.money {
  width: 67px;
}

.page.perdiem td.char input {
  text-align: center;
}

.page.perdiem td.money input {
  text-align: right;
}

.page.perdiem td.money.custom input {
  background-color: #546A7B;
  color: white;
}

.page.perdiem td.zone input.custom {
  background-color: #546A7B;
  color: white;
}

.page.perdiem td.del {
  background-color: #ffffff;
}

.page.perdiem img.trashcan {
  width: 17px;
  margin: 0 10px 0 0;
  cursor: pointer;
}

.page.perdiem .checkAll img.trashcan {
  display: none;
}

.page.perdiem td.info {
  min-width: 170px;
}
.page.perdiem td.info .name {
  font-size: 14px;
  font-weight: bold;
}
.page.perdiem td.info .id {
  font-size: 10px;
  color: gray;
}
.page.perdiem td.info .zone {
  font-size: 10px;
  color: gray;
  display: inline;
}
.page.perdiem td.info .milesMinutes {
  font-size: 10px;
  color: gray;
  display: inline;
}

.page.perdiem td.sun, .page.perdiem td.mon, .page.perdiem td.tue, .page.perdiem td.wed, .page.perdiem td.thu, .page.perdiem td.fri, .page.perdiem td.sat {
  min-width: 72px;
}

.page.perdiem.v2 td.sun, .page.perdiem.v2 td.mon, .page.perdiem.v2 td.tue, .page.perdiem.v2 td.wed, .page.perdiem.v2 td.thu, .page.perdiem.v2 td.fri, .page.perdiem.v2 td.sat {
  border-left: 1px solid #838383;
  padding: 0;
}

.page.perdiem.v2 td.sat {
  border-right: 1px solid #838383;
}

.page.perdiem.v2 td.sun, .page.perdiem.v2 td.mon, .page.perdiem.v2 td.tue, .page.perdiem.v2 td.wed, .page.perdiem.v2 td.thu, .page.perdiem.v2 td.fri, .page.perdiem.v2 td.sat {
  padding: 0;
}

.page.perdiem.v2 td.sun.checked, .page.perdiem.v2 td.mon.checked, .page.perdiem.v2 td.tue.checked, .page.perdiem.v2 td.wed.checked, .page.perdiem.v2 td.thu.checked, .page.perdiem.v2 td.fri.checked, .page.perdiem.v2 td.sat.checked {
  background-color: #2dab7917;
}

.page.perdiem.v2 td.trade.char {
  padding: 0 10px 0 5px;
}

.page.perdiem.v2 td.trade.char span {
  margin-left: 6px;
}

.page.perdiem div.dow {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../images/Per_Diem_Icons-04-sm.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  color: #9a9a9a;
  cursor: pointer;
}
.page.perdiem .disableForm div.dow {
  cursor: default;
}
.page.perdiem div.dow.checked {
  background-image: url('../images/Per_Diem_Icons-05.png');
}

.page.perdiem div.v2Dow {
  position: relative;
  width: 50%;
  height: 100%;
  background-image: url('../images/Per_Diem_Icons-04-sm.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 13px 40%;
  color: #9a9a9a;
  cursor: pointer;
  float: left;
}
.page.perdiem .disableForm div.v2Dow {
  cursor: default;
}
.page.perdiem div.v2Dow.checked {
  background-image: url('../images/Per_Diem_Icons-05.png');
}

.page.perdiem div.dow .miles {
  display: block;
  position: absolute;
  left: 38px;
  top: 23px;
  width: 50px;
  font-size: 9px;
}
.page.perdiem div.dow .from {
  display: block;
  position: absolute;
  left: 38px;
  top: 32px;
  width: 50px;
  font-size: 9px;
}
.page.perdiem div.dow .dHotel {
  display: block;
  position: absolute;
  left: 38px;
  top: 27px;
  width: 50px;
  font-size: 9px;
  color: #c1c1c1;
  user-select: none;
}
.page.perdiem div.dow .dHotel.active {
  color: #238b62;
}

.page.perdiem td.hotel {
  width: 46px;
}

.page.perdiem td.hotel .hotel {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../images/Per_Diem_Icons-07.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer;
}
.page.perdiem .disableForm td.hotel .hotel {
  cursor: default;
}
.page.perdiem td.hotel .hotel.checked {
  background-image: url('../images/Per_Diem_Icons-08.png');
}

.page.perdiem td .v2Hotel {
  position: relative;
  width: 50%;
  height: 100%;
  background-image: url('../images/Per_Diem_Icons-07.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 6px 40%;
  cursor: pointer;
  float: left;
}
.page.perdiem td .v2Hotel.checked {
  background-image: url('../images/Per_Diem_Icons-08.png');
}

.page.perdiem td.travel {
  width: 46px;
}

.page.perdiem td.travel .travel {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../images/Per_Diem_Icons-09.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer;
}
.page.perdiem .disableForm td.travel .travel {
  cursor: default;
}
.page.perdiem td.travel .travel.checked {
  background-image: url('../images/Per_Diem_Icons-10.png');
}
.page.perdiem td.travel .travel.optOut {
  background-image: url('../images/Per_Diem_Icons-11.png');
}

.page.perdiem.v2 td.travel .travel {
  background-position: 70% 50%;
}

.page.perdiem.v2 td .v2Miles {
  width: 72px;
  position: absolute;
  padding-top: 52px;
  color: gray;
  font-size: 8px;
  text-align: center;
  pointer-events: none;
}

.page.perdiem.v2 td .v2Miles span.miles {
  margin-right: 3px;
}

.page.perdiem td.comments {
  width: 66px;
}

.page.perdiem td.comments .comments {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../images/Per_Diem_Icons-02a.png);
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  font-size: 10px;
  font-weight: bold;
  color: #127feb;
  cursor: pointer;
}
.page.perdiem td.comments .comments.messageCount {
  background-image: url(../images/Per_Diem_Icons-02.png);
}

.page.perdiem.v2 td.comments .comments {
  background-position: 10px 50%;
}

.page.perdiem td.comments .comments span {
  position: absolute;
  left: 29px;
  top: 25px;
}

.page.perdiem div.checkAll {
  position: relative;
  text-align: right;
  color: gray;
  font-size: 9px;
}
.page.perdiem .verbose div.checkAll, .page.perdiem .disableForm div.checkAll {
  display: none;
}

.page.perdiem div.dowCA {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('../images/Per_Diem_Icons-04-sm.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 10px 50%;
  cursor: pointer;
}
.page.perdiem .disableForm div.dowCA {
  cursor: default;
}
.page.perdiem div.dowCA.checked {
  background-image: url('../images/Per_Diem_Icons-05.png');
}

.page.perdiem div.dowCA span {
  position: absolute;
  width: 50px;
  text-align: center;
  left: -3px;
  top: 1px;
  color: gray;
  font-size: 9px;
}

.page.perdiem.v2 td.dowCA {
  padding: 0;
}

.page.perdiem.v2 .dowCA span.dayLabelV2 {
  position: relative;
  width: 50px;
  text-align: center;
  top: 1px;
  color: gray;
  font-size: 9px;
  margin-left: 30px;
}

.page.perdiem.v2 .verbose .dowCA span.dayLabelV2 {
  margin-left: 34px;
}

.page.perdiem table.verbose tr:nth-child(1) td, .page.perdiem table.disableForm tr:nth-child(1) td {
  height: 20px;
  vertical-align: bottom;
  padding-bottom: 8px;
}

.page.perdiem table.verbose tr:nth-child(1) div, .page.perdiem table.disableForm tr:nth-child(1) div {
  position: relative;
  width: 100%;
  height: 20px;
}

.page.perdiem table.verbose tr:nth-child(1) div.dowCA, .page.perdiem table.disableForm tr:nth-child(1) div.dowCA {
  width: 50px;
}

.page.perdiem table.verbose tr:nth-child(1) div span, .page.perdiem table.disableForm tr:nth-child(1) div span {
  position: absolute;
  width: 100%;
  text-align: center;
  left: -3px;
  bottom: 0px;
  color: gray;
  font-size: 9px;
}

.page.perdiem.v2 table.verbose tr:nth-child(1) div span, .page.perdiem table.disableForm tr:nth-child(1) div span {
  left: -9px;
}

.page.perdiem.v2 table td.dowCA .dowCAV2 {
  position: relative;
  width: 50%;
  height: 50px;
  background-image: url('../images/Per_Diem_Icons-04-sm.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 13px 50%;
  color: #9a9a9a;
  cursor: pointer;
  float: left;
  top: 0!important;
}

.page.perdiem.v2 table td.dowCA .dowCAV2.checked {
  background-image: url('../images/Per_Diem_Icons-05.png');
}

.page.perdiem.v2 table td.dowCA .dowHotelCAV2 {
  position: relative;
  width: 50%;
  height: 50px;
  background-image: url('../images/Per_Diem_Icons-07.png');
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: 6px 50%;
  cursor: pointer;
  float: left;
  top: 0!important;
}

.page.perdiem.v2 table td.dowCA .dowHotelCAV2.checked {
  background-image: url('../images/Per_Diem_Icons-08.png');
}

.page.perdiem.v2 table.verbose td.dowCA .dowCAV2, .page.perdiem.v2 table.verbose td.dowCA .dowHotelCAV2 {
  display: none;
}

.page.perdiem table:not(.verbose):not(.disableForm) tr:nth-child(1) div {
  top: 10px;
}

.page.perdiem table.verbose tr td input {
  width: 100%;
  border: 1px solid #d6d6d6;
  font-size: 14px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 7px 4px 4px 4px;
  background-color: #f7f7f7;
  color: #676767;
}

.page.perdiem table.verbose tr td input:disabled {
  background-color: #f7f7f7;
  opacity: 1;
  cursor: default;
}

.page.perdiem table.verbose div.dowCA, .page.perdiem table.disableForm div.dowCA {
  background-image: none;
}
.page.perdiem table.verbose tr td div span, .page.perdiem table.disableForm tr td div span {
  top: auto;
  bottom: 10px;
}

.page.perdiem div.hotelNCA {
  position: relative;
  width: 100%;
  height: 100%;
}

.page.perdiem div.hotelNCA span {
  position: absolute;
  width: 50px;
  text-align: center;
  left: -3px;
  bottom: 20px;
  color: gray;
  font-size: 9px;
}

.page.perdiem div.travelNCA {
  position: relative;
  width: 100%;
  height: 100%;
}

.page.perdiem div.travelNCA span {
  position: absolute;
  width: 50px;
  text-align: center;
  left: -3px;
  bottom: 20px;
  color: gray;
  font-size: 9px;
}

.page.perdiem .details {
  max-width: 1150px;
}

.page.perdiem .details select, .page.perdiem .details .inputBox {
  display: inline-block;
  position: relative;
  width: 32%;
  margin: 0 0 0 0;
}

.page.perdiem .details select:disabled, .page.perdiem .details input:disabled {
  color: #000000;
  background-color: #ffffff;
  cursor: default;
  opacity: 1;
}

.page.perdiem .details select {
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 7px 14px 7px 14px;
}

.page.perdiem .details select:nth-child(2) {
  margin: 0 10px;
}

.page.perdiem .inputBox input {
  width: 100%;
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 12px 14px 10px 14px;
}

.page.perdiem .inputBox .icon.icon-cross {
  position: absolute;
  right: 6px;
  top: 11px;
  cursor: pointer;
}
.page.perdiem .inputBox .icon.icon-cross.inactive {
  color: #f1f1f1;
  cursor: default;
}

.page.perdiem .matches {
  position: absolute;
  width: 100%;
  z-index: 5;
}

.page.perdiem .matches span {
  position: relative;
  cursor: pointer;
  display: block;
  font-size: 14px;
  background-color: #f2f2f7;
  border-bottom: 1px solid #8E8E93;
  padding: 4px 6px;
  color: #127feb;
}
.page.perdiem .matches span:hover {
  color: #2dab79;
}

.page.perdiem .noEmployeesYet {
  position: absolute;
  top: 120px;
  left: 20px;
  font-size: 23px;
  color: #ececec;
  font-family: Gotham;
}

.page.perdiem button.delete {
  float: right;
}

.page.perdiem button.reassign {
  float: right;
}

.page.perdiem .modal.active.reassign select {
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 7px 14px 4px 14px;
}

/* modals */

.modal-container {
  position: relative;
  min-height: 40px;
}

.modal-container .modalCloseButton {
  background: 0 0;
  border: 0;
  color: currentColor;
  height: 1rem;
  line-height: .8rem;
  margin-left: .2rem;
  margin-right: -2px;
  opacity: 1;
  padding: .1rem;
  text-decoration: none;
  width: 1rem;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;
}
.modal-container .modalCloseButton::before {
  content: "\2715";
}

.modal-container .modalText {
  position: relative;
  font-size: 16px;
  display: inline-block;
  margin: 20px;
}

/* modal note form */

.modal.discussion .modal-container {
  box-shadow: 0 0.2rem 0.5rem rgba(48,55,66,.3);
}

.modal.discussion .modal-header .close {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 4px;
  border-radius: 2px;
  color: #127ee8;
  cursor: pointer;
}
.modal.discussion .modal-header .close:hover {
  background-color: #e4e1e1;
}

.modal.discussion .modal-header p {
  margin-bottom: 0;
}

.modal.discussion .modal-body {

}

.modal.discussion .modal-body hr {
  opacity: .3;
}

.modal.discussion .modal-body .note {
  padding: 8px 20px;
}

.modal.discussion .modal-body .note .byline {
  font-size: 12px;
}

.modal.discussion .modal-body .note .from {
  color: #538156;
  font-weight: bold;
}

.modal.discussion .modal-body .note .date {
  color: gray;
}

.modal.discussion .modal-body .note .content {
  font-size: 16px;
  white-space: pre-wrap;
}

.modal.discussion .modal-footer {
  text-align: left;
  padding-bottom: 30px;
}

.modal.discussion .modal-footer .noteForm textarea {
  position: relative;
}

/* modal travel form */

.modal.travel .modal-container {
  box-shadow: 0 0.2rem 0.5rem rgba(48,55,66,.3);
}

.modal.travel .modal-header .close {
  position: absolute;
  right: -10px;
  top: 0px;
  padding: 4px;
  border-radius: 2px;
  color: #127ee8;
  cursor: pointer;
}
.modal.travel .modal-header .close:hover {
  background-color: #e4e1e1;
}

.modal.travel .modal-header {
  position: relative;
  margin: 10px;
  border-bottom: 1px solid black;
  padding: 8px 0;
}

.modal.travel .modal-header h4 {
  margin: 0;
  color: #2dab79;
  font-size: 30px;
  font-weight: bold;
  font-family: "Gotham", Helvetica, Arial, sans-serif;
}

.modal.travel .modal-body {
  position: relative;
  overflow-y: unset;
}

.modal.travel .modal-body .lastHome {
  margin-left: 10px;
  color: darkgrey;
}

.modal.travel .modal-body p {
  margin-bottom: 10px;
}

.modal.travel .modal-body .split {
  height: 3px;
  border-bottom: 1px solid black;
  margin: 14px 0 20px 0;
}

.modal.travel .modal-body table {
  margin: 20px 0px 10px 0;
}
 
.modal.travel .modal-body table tr td .dow {
  text-align: center;
  font-family: Gotham;
  width: 60px;
  height: 70px;
  background-image: url(../images/Per_Diem_Icons-04-sm.png);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: 50%;
}
.modal.travel .modal-body table tr td .dow.checked {
  background-image: url(../images/Per_Diem_Icons-05.png);
}

.modal.travel .modal-body table tr td .dow span.name {
  display: block;
  color: gray;
  font-size: 9px;
}

.modal.travel .modal-body table tr td .dow span.miles {
  margin-top: 45px;
  display: block;
  font-size: 9px;
}

.modal.travel .modal-body table tr td .dow span.from {
  display: block;
  font-size: 9px;
}

.modal.travel .modal-body .selectJob {
  position: relative;
  width: 40%;
}

.modal.travel .inputBox.psearch {
  max-height: 36px;
  overflow: visible;
  position: relative;
  width: 50%;
  margin-left: 24px;
}

.modal.travel .inputBox input {
  width: 100%;
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 12px 14px 10px 14px;
}

.modal.travel .inputBox .icon.icon-cross {
  position: absolute;
  right: 6px;
  top: 11px;
  cursor: pointer;
}
.modal.travel .inputBox .icon.icon-cross.inactive {
  color: #f1f1f1;
  cursor: default;
}

.modal.travel .matches {
  position: absolute;
  left: 0px;
  top: 36px;
  width: 100%;
  z-index: 5;
}

.modal.travel .matches span {
  position: relative;
  cursor: pointer;
  display: block;
  font-size: 14px;
  background-color: #f2f2f7;
  border-bottom: 1px solid #8E8E93;
  padding: 4px 6px;
  color: #127feb;
}
.modal.travel .matches span:hover {
  color: #2dab79;
}

.modal.travel .modal-body select {
  border: 1px solid #8E8E93;
  font-size: 11px;
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
  padding: 7px 14px 4px 14px;
}


.modal.travel .modal-footer {
  position: relative;
  text-align: left;
  padding-bottom: 30px;
}

/* users */

.page.users .header .title {
  background-image: url(../images/icon5.png);
}

.page.users .roleGroup {
  margin-top: 40px;
}

.page.users .roleGroup .shiftRight { 
  margin-left: 16px;
}

.page.users .roleName { 
  font-size: 20px;
  font-weight: bold;
}

.page.users input.addUser {
  display: inline-block;
  width: 176px;
  margin-left: 10px;
}

.page.users input.addMapping {
  display: inline-block;
  width: 176px;
  margin-left: 10px;
}

.page.users button.saveMapping {
  position: relative;
  top: -1px;
  margin-left: 6px;
  font-size: 14px;
}

.page.users span.arrows {
  margin-left: 6px;
}

.page.users .payRollPMs {
  background-color: #f3f3f3;
  padding: 10px;
  border: 1px solid #bfd6bd;
  margin: 10px;
}

.page.users .payRollPMs .chip {
  background-color: #dcd9d9;
}

.page.users .noneYet {
  opacity: .5;
}

/* proxy */

.page.proxy .header {
  margin-bottom: 20px;
}

.page.proxy .header .title {
  background-image: url(../images/icon5.png);
  padding: 0 0 0 42px;
  background-position: -16px -11px;
  background-size: 60px;
}

.page.proxy .boxWithX, .proxies .form-select, .proxies .form-input {
  margin-right: 12px;
}

.page.proxy input.form-input.rep {
  display: inline-block;
  width: 208px;
}

.page.proxy .boxWithX {
  position: relative;
  display: inline-block;
}

.page.proxy .boxWithX .icon.icon-cross {
  position: absolute;
  right: 6px;
  top: 11px;
  cursor: pointer;
  color: #5a0909;
}
.page.proxy .boxWithX .icon.icon-cross.inactive {
  position: absolute;
  right: 6px;
  top: 11px;
  color: gainsboro;
  cursor: default;
}

.page.proxy .form-input.flatpickr-input[readonly] {
  background-color: #ffffff;
}

.page.proxy .form-select {
  width: auto;
}

.page.proxy .proxy {
  margin-bottom: 10px;
}

.page.proxy .proxy span.to {
  margin-right: 12px;
}

.page.proxy .buttons {
  /* margin-bottom: 26px; */
  margin-top: 0;
}

.page.proxy .proxy .btn.save {
  margin-right: 10px;
}

/* foreman ipad view */

.foreman nav {
  padding: 0 0 0 10px;
  width: 140px;
}

.foreman.layout > .content {
  left: 140px;
  width: calc(100% - 140px);
}

.foreman nav h3 .loading {
  margin: 0px 0 0 16px;
}

.foreman nav .hello {
  left: 16px;
}

.foreman nav a.logout {
  left: 4px;
}

.foreman nav .logo {
  width: 110px;
  left: 14px;
}

.foreman .page.perdiem img.trashcan {
  margin: 0 10px 0 -10px;
}

.foreman .page.perdiem div.hotelNCA span {
  width: 33px;
}

.foreman .page.perdiem div.travelNCA span {
  width: 33px;
}

.foreman .page.perdiem .details:nth-child(1) {
  width: 33.5%;
}

.foreman .page {
  margin: 0 29px 29px 14px;
}

.iconButton {
  display: inline-block;
  border: 1px solid gray;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  color: green;
  background-color: white;
  cursor: pointer;
}