body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  float: left;
  width: 100%;
  background-color: #fafafa;
  overflow: hidden;
}
a {
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
li {
  list-style: none;
}

/*

Header Style

*/
.today-page .main-container {
  max-width: 100%;
  padding: 0 19px;
  margin: 0 0 70px 0;
}
#scrollbar {
  overflow: hidden;
  float: left;
  width: 60%;
  height: calc(100vh - 76px);
  padding-right: 2px;
  position: relative;
  /*z-index: 2;*/
}
#scrollbar .body-container {
  margin-bottom: 76px;
}
#scrollbar .main-container {
  margin-bottom: 0;
}
#scrollbar:hover {
  overflow: auto;
}
.today-page .map-aside {
  width: 40%;
  float: left;
}
.today-page .map-aside #map {
  height: calc(100vh - 76px) !important;
}
.header-wrapper {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 19px;
}
.main-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}
.main-container:after {
  content: "";
  /*display: table;*/
  clear: both;
}
.main-wrapper {
  /*min-height: calc(100vh - 76px);*/
}
nav ul {
  margin: 0;
}
nav ul li {
  list-style: none;
  display: inline;
  float: left;
  position: relative;
}
nav ul li a {
  text-decoration: none;
  display: inline-block;
  margin-left: 53px;
  font-size: 14px;
  padding-bottom: 25px;
  line-height: normal;
  color: #262626;
  text-transform: capitalize;
  transition: none;
  position: relative;
}
nav ul li a:hover, nav ul li a:active, nav ul li a:focus {
  color: #262626;
}
nav ul .active a {
  /*border-bottom: 3px solid #262626;*/
}
nav ul li:hover.active a:after,
nav ul .active a:after {
  content: '';
  height: 3px;
  width: 100%;
  background-color: #262626;
  position: absolute;
  bottom: -4px;
  left: 0;
}
nav ul li:hover a:after {
  content: '';
  height: 3px;
  width: 100%;
  background-color: #dbdbdb;
  position: absolute;
  bottom: -4px;
  left: 0;
}
nav .right li:hover a:after {
  border-bottom: 0;
  display: none;
}
nav ul li:first-child a {
  margin-left: 0;
}
nav .left {
  float: left;
  padding-left: 71px;
}
.pulse {
  width: 300px;
  height: 300px;
  background: #bdebca;
  border: 1px solid #b9e8c9;
  border-radius: 50%;
  z-index: 2;
  text-align: center;
  position: absolute;
  transform: scale(0.666, 0.666);
  animation: ring-1 1.35s ease-out infinite;
  top: 0;
}
@keyframes ring-1 {
  0% {
    transform: scale(0.666, 0.666);
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    transform: scale(1.2, 1.2);
    opacity: 0
  }
}
nav .right {
  float: right;
}
header {
  float: left;
  width: 100%;
  border-bottom: 1px solid #dbdbdb;
  line-height: 75px;
  position: fixed;
  background: #fff;
  z-index: 999;
}
.profile-image img {
  object-fit: cover;
  width: 30px;
  height: 30px;
  float: left;
  border-radius: 100%;
}
nav> .right> li:last-child> a {
  margin-bottom: 20px;
  padding-bottom: 0;
  padding-left: 14px;
  margin-left: 14px;
  position: relative;
  font-weight: 600;
}
nav> .profile li .dropdown-backdrop{
  z-index: -1;
}

.hidden-dropdown-list, .workspaces-ul, #datepicker .dropdown-menu {
  width: 206px;
  border-radius: 0;
  box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  border: 1px solid #efefef;
  position: absolute;
  padding: 0px;
  left: inherit;
  top: 75px;
  right: 0;
  /*display: none;*/
  z-index: 9;
  background: #fff;
  margin-top: 0;
}

.right.profile .header {
  border-bottom: 1px solid #e7edf0;
}
.right.profile .header {
  padding: 7px 12px 7px;
  font-weight: 500;
  color: #8e8d8d;
  width: 100%;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 21px;
}
.right.profile .header:hover {
  background-color: #fff;
}
.workspaces-ul svg {
  width: 10px;
  float: left;
  margin-right: 6px;
  display: inline-block;
  margin-top: 5px;
}
.workspaces-ul li:last-child {
  border-top: 1px solid #efefef;
}
.hidden-dropdown-list li, .workspaces-ul li {
  float: none;
  display: block;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #efefef;
}
.hidden-dropdown-list li:first-child , .workspaces-ul li:first-child {
  border-top:0;
}
.hidden-dropdown-list li a, .workspaces-ul li a{
  margin: 0;
  width: 100%;
  padding: 0 12px;
  transition: none;
  line-height: 40px;
}
.hidden-dropdown-list li:hover, .workspaces-ul li:hover {
  background-color: #fafafa;
}

header .profile-image{
  display:none;
}

.profile-image {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  /*border: 1px solid #dbdbdb;*/
  margin-left: 10px;
  vertical-align: middle;
}

a.logo {
  float: left;
  pointer-events: none;
}
a.logo img {
  vertical-align: middle;
  margin-bottom: 8px;
}

/*

Timesheets Style

*/

.body-container {
  float: left;
  width: 705px;
  padding-left: 12px;
  position: relative;
}
.no-location-found {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.timesheets .body-container {
  margin-left: 255px;
}
.timesheets .body-container.larger-div {
  margin: 0 auto;
  width: 100%;
  padding: 0;
}
.today-page  .body-container {
  margin-left: 0px;
}
.half-map-page .body-container {
  float: left;
  width: 705px;
  padding-left: 12px;
  position: relative;
  /*position: fixed;*/
  right: 351px;
}
aside.left input {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  background-color: transparent;
  padding-left: 58px;
  padding-right: 8px;
  color: #8e8d8d;
  font-size: 11px;
  background-image: url(../images/search-icon.svg);
  background-repeat: no-repeat;
  background-position: 24px center;
  -webkit-background-size: 15px;
  background-size: 13px;
}
.timesheets aside.left input:focus {
  background-color: #fff;
  background-image: url(../images/search-icon-black.svg);
  background-repeat: no-repeat;
  background-position: 24px center;
  -webkit-background-size: 15px;
  background-size: 13px;
}
aside.left svg {
  display: none;
}
aside.left input:focus + svg path, .today-page .top-description input:focus + svg path{
  fill: #262626;
}
aside.left ul {
  max-height: calc(100vh - 258px);
  overflow: auto;
}
aside.left {
  float: left;
  width: 255px;
  padding-right: 12px;
  margin-top: 74px;
  position: fixed;
  /*max-height: calc(100vh - 224px);*/
}
aside.left .form {
  position: relative;
}
aside.left .form svg,
aside.left .form img {
  position: absolute;
  top: 50%;
  left: 21px;
  width: 13px;
  transform: translateY(-50%);
}
aside.left input:focus {
  outline: 0;
  text-transform: lowercase;
  background: #fff;
}
aside.left input::-webkit-input-placeholder {
  text-transform: uppercase;
  color: #8e8d8d;
  font-size: 11px;
}
aside.left input:focus:-moz-placeholder {
  color: #262626;
}
aside.left input:-moz-placeholder {
  /* Firefox 18- */
  text-transform: uppercase;
  color: #8e8d8d;
  font-size: 11px;
}
aside.left input::-moz-placeholder {
  /* Firefox 19+ */
  text-transform: uppercase;
  color: #8e8d8d;
  font-size: 11px;
}
aside.left input:-ms-input-placeholder {
  text-transform: uppercase;
  color: #8e8d8d;
  font-size: 11px;
}
/*

Alert Box Messages after Changes

*/
.alertify-logs {
  position: fixed;
  z-index: 1;
  bottom: 53px;
  left: 106px;
}
.today-page .alertify-logs {
  z-index: -1;
}
.alertify-logs i {
  background-image: url("../images/close-btn.svg");
  height: 9px;
  width: 9px;
  background-size: cover;
}
.alertify-log.alertify-log-show{
  left: 0;
  opacity: 1;
}
.alertify-logs a.undo {
  font-size: 12px;
  color: #0cd4d2;
  text-transform: uppercase;
  font-weight: 400;
  display: inline-block;
  margin-left: 45px;
  vertical-align: middle;
}
.alertify-logs b {
  font-weight: 600;
}
.alertify-log {
  display: block;
  -webkit-box-shadow: 3px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  position: relative;
  left: -300px;
  opacity: 0;
  font-size: 14px;
  color: #fff;
  background: #262626;
  padding-left: 20px;
  padding-right: 50px;
  min-height: 50px;
  line-height: 50px;
  border-radius: 4px;
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.alertify-log i {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.alertify-log.alertify-log-hide {
  /*-webkit-transform: translate(300px, 0);*/
  /*-moz-transform: translate(300px, 0);*/
  /*-ms-transform: translate(300px, 0);*/
  /*-o-transform: translate(300px, 0);*/
  /*transform: translate(300px, 0);*/
  -webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  /*opacity: 0;*/
}

.team, .timesheets {
  float: left;
  width: 100%;
  margin-top: 76px;
  height: 100vh;
}
body .timesheets-view {
  height: calc(100vh - 76px);
  overflow: auto;
}
.timesheets-view .user-off .clock-out {
  padding-left: 4px;
}
aside.left li {
  padding: 18px 0 18px 13px;
  border-top: 1px solid #dbdbdb;
  cursor: pointer;
  position: relative;
}
.reload-icon .sync .sync-hover {
  display: none;
}
.reload-icon:hover .sync i.last-sync {
  display: none;
}
.reload-icon:hover .sync .sync-hover {
  display: inline-block;
  cursor: pointer;
}
.reload-icon:hover span {
  color: #262626 !important;
}
.top-aside-header .reload-icon i {
  font-style: normal;
}
main {
  /*padding-bottom: 74px;*/
}
aside.left li:first-child {
  border-top: 0;
}
aside.left li:last-child {
  border-bottom: 1px solid #dbdbdb;
}
aside.left .active {
  background-color: #ffffff;
}
aside.left .active:before {
  content: '';
  width: 2px;
  height: 100%;
  background: #262626 !important;
  position: absolute;
  top: 0;
  left: 0;
}
aside.left li:hover:before {
  content: '';
  width: 2px;
  height: 100%;
  background: #dbdbdb;
  position: absolute;
  top: 0;
  left: 0;
}
.mCSB_inside> .mCSB_container {
  margin-right: 0 !important;
}
.mCSB_container {
  overflow: visible !important;
}
aside.left li a {
  font-size: 15px;
  font-weight: 400;
  color: #262626;
}
a:hover, a:focus, a:active {
  text-decoration: none;
}
.timesheets ul {
  padding: 0;
}
.js-date-label {
  cursor: pointer;
}
li .clock-in span, li .clock-out span {
  display: inline-block;
  line-height: 19px;
  max-width: 113px;
  padding-right: 0 !important;
}
.initials {
  background: #dbdbdb;
  color: #fff;
  text-align: center;
  line-height: 30px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
}
.timesheets .profile-image {
  margin-left: 0;
}
.member-name {
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.top-description span {
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}
.body-container ul li> div {
  font-size: 14px;
  /*width: 100%;*/
  float:   left;
  color: #262626;
}
.body-container .date {
  font-size: 16px;
  font-weight: normal;
}
/*.body-container ul {*/
  /*padding: 0 24px;*/
  /*float: left;*/
  /*width: 100%;*/
  /*border: 1px solid #dbdbdb;*/
  /*border-top-color: #efefef;*/
  /*background-color: #fff;*/
  /*border-bottom-left-radius: 3px;*/
  /*border-bottom-right-radius: 3px;*/
  /*position: relative;*/
  /*padding-bottom: 24px;*/
/*}*/
#accordion .collapse-container li {
  border-top: 0;
  line-height: 32px;
  height: 32px;
}
body .leaflet-container a.leaflet-popup-close-button {
  display: none;
}
#accordion .collapse-container li:first-child {
  margin-top: 10px;
}
/*#accordion {*/
/*/!*max-height: calc(100vh - 258px);*!/*/
/*/!*margin-bottom: 76px;*!/*/
/*}*/
#accordion .collapse-container li:last-child {
  margin-bottom: 10px;
}
#accordion .collapse-container .collapse li:hover, #accordion .collapse-container .collapse .green-map-active,#accordion .collapse-container  .collapse .red-map-active, .clicked {
  background-color: #fafafa;
}
main .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .comments .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .tasks-wrapper .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .tasks-wrapper .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
  border-radius: 8px;
  background-color: #efefef;
}
main .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, main .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
main .timesheets-view aside .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
main aside .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, main .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar  {
  background-color: #dbdbdb;
  filter: "alpha(opacity=1)";
  -ms-filter: "alpha(opacity=1)";
}
main .timesheets-view .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
main .timesheets-view .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
 background-color: #c1c1c1;
}
main .mCSB_scrollTools .mCSB_draggerRail, #accordion .mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #efefef;
  border-radius: 8px;
  /* margin: 0; */
}
main .mCSB_scrollTools {
  right: 0px;
  width: 8px;
  /*position: fixed;*/
  /*top: 82px;*/
  opacity: 1;
}
main .today-page .mCSB_scrollTools {
  right: 0;
  position: absolute;
  top: 0;
}
/*.body-container ul li {*/
  /*padding: 0 15px;*/
  /*width: 100%;*/
  /*border-top: 1px solid #efefef;*/
  /*float: left;*/
  /*position: relative;*/
  /*height: 66px;*/
  /*line-height: 66px;*/
  /*margin: 0;*/
/*}*/
.body-container ul li.pending-invitation {
  border-top: 0;
  border-bottom: 1px solid #efefef;
}
.body-container ul .uncollapse {
  border: 0;
}
.body-container ul li:first-child {
  border-top: 0;
}
.body-container .date b {
  font-weight: 600;
}
.body-container .clock-out {
  width: 187px;
  text-align: left;
  padding-left: 3px;
}
#company-name i, #user-name i {
  font-size: 14px;
  vertical-align: middle;
  margin-left: 7px;
  margin-top: -2px;
  color: #8e8d8d;
}
.uncollapse:hover .clock-out span,
.collapse-container .uncollapse:hover .clock-out span,
.collapse-container li:hover .clock-out span {
  cursor: pointer;
}
.clock-out img {
  margin-right: 0;
  margin-left: 7px;
  margin-bottom: 1px;
}
.body-container .hours {
  width: 74px;
  text-align: left;
}
.uncollapse:hover .clock-in,
.collapse-container li:hover .clock-in,
.uncollapse.clicked .clock-in,
{
  background-image: url('../images/right-arrow.png');
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 109px center;
}
.uncollapse:hover .clock-in span, .collapse-container li:hover .clock-in {
  cursor: pointer;
}
.body-container .clock-in {
  width: 140px;
  text-align: left;
}
.clock-in img.right-arrow {
  width: 17px;
  margin-left: 8px;
  margin-right: 0;
}
.uncollapse:hover .clock-in span:hover,
.collapse-container li:hover .clock-in span:hover,
.collapse .green-map-active .clock-in span,
.uncollapse .green-map-active .clock-in span {
  border: 1px solid #b5e8c8;
  background-color: #f3fcf6;
}
.uncollapse:hover .clock-in span,
.collapse-container li:hover .clock-in span,
.collapse .green-map-active .clock-in span,
.uncollapse.clicked .clock-in span,
.uncollapse .green-map-active .clock-in span {
  color: #10a34f;
}
li .clock-in span {
  border: 1px solid transparent;
  padding: 5px 15px 5px 29px;
  border-radius: 15px;
  color: #262626;
  font-size: 14px;
  background-color: transparent;
}
.weekly-header {
  position: relative;
  border: 1px solid #dbdbdb;
  padding: 10px 39px;
  background: #fff;
  color: #262626;
  float: left;
  width: 100%;
}
.collapse-wrapper {
  float: left;
  width: 100%;
  margin-bottom: 9px;
}
.parent-collapse #accordion {
  margin-bottom: 9px;
}
.weekly-header:hover,
.weekly-header.active,
.weekly-header.open-collapse,
.weekly-header.open-collapse.collapsed:hover,
.weekly-header.open-collapse.collapsed.active:hover {
  background: #0cd4d2;
  color: #fff;
}
.weekly-header.open-collapse.collapsed,
.weekly-header.open-collapse.collapsed.active {
  background: #fff;
  color: #262626;
}
.weekly-header.open-collapse.active {
  background: #0cd4d2;
  color: #fff;
}
.weekly-header:hover a.arrows i,
.weekly-header.active  a.arrows i,
.weekly-header.open-collapse a.arrows i,
.weekly-header.open-collapse.collapsed:hover a.arrows i {
  color: #fff;
}
.weekly-header {
  cursor: pointer;
}
.weekly-header span:first-child {
  font-size: 11px;
  text-transform: uppercase;
}
.weekly-header.open-collapse.collapsed a.arrows i {
  color: #262626;
}
.weekly-header .total {
  float: right;
  width: 97px;
}
.weekly-header span:last-child{
  display: block;
  font-size: 16px;
}
.weekly-header a.arrows {
  right: 36px;
}
#activities-list {
  float: left;
  width: 100%;
  margin-bottom: 40px;
}
.parent-collapse {
  float: left;
  width: 100%;
}
.weekly-header a.arrows i.fa-angle-up {
  display: none;
}
.weekly-header a.arrows.active i.fa-angle-up {
  display: inline-block;
}
.weekly-header.open-collapse a.arrows i.fa-angle-down {
  display: none;
}
.weekly-header.open-collapse a.arrows i.fa-angle-up {
  display: inline-block;
}
.weekly-header.open-collapse a.arrows.active i.fa-angle-down {
  display: inline-block;
}
.weekly-header.open-collapse a.arrows.active i.fa-angle-up {
  display:none;
}
.weekly-header a.arrows.active i.fa-angle-down {
  display: none;
}
.body-container .weekly-header .date {
  width: calc(100% - 269px);
}
.weekly-header div {
  float: left;
}
.uncollapse:hover, .uncollapse.clicked {
  background-color: #fafafa;
}
.body-container .date {
  width: calc(100% - 424px);
}
.uncollapse .right {
  float: left;
  width: 424px;
}
.body-container ul li> div img {
  margin-right: 3px;
  object-fit: cover;
}
a.arrows {
  position: absolute !important;
  right: 12px;
  top: 50%;
  width: 22px;
  text-align: center;
  transform: translateY(-50%);
  padding: 0 !important;
}
a.arrows i {
  color: #262626;
  font-size: 20px;
  vertical-align: middle;
}
a.arrows:hover, a.arrows:active, a.arrows:focus {
  background-color: transparent !important;
}
ul .fa-angle-up {
  display: none;
}
.body-container .title div {
  float: left;
  text-transform: uppercase;
  color: #8e8d8d;
  font-size: 11px;
  font-weight: 400;
}
.title .clock-in {
  text-align: center;
  padding-right: 26px;
  background-image: url('../images/right-arrow.png');
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: 109px center;
  cursor: default;
}
.title .clock-out {
  padding-left: 16px;
}
.body-container .parent-collapse .title {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}
.body-container .title {
  float: left;
  width: 100%;
  padding: 0 40px;
  border: 1px solid #dbdbdb;
  border-bottom: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  background-color: #fff;
  height: 35px;
  line-height: 35px;
}

.body-container .top-description {
  padding: 23px 40px;
  vertical-align: middle;
  position: relative;
  float: left;
  width: 100%;
}
#accordion li div> div {
  float: left;
  color: #262626;
  /*position: relative;*/
}
#accordion li .tooltip .tooltip-inner{
  color: #fff;
  padding: 6px 10px;
}
.tooltip.bottom .tooltip-arrow {
  position: absolute !important;
}
img.green-marker, .clock-out img {
  display: none;
}

.uncollapse:hover .clock-in span, .uncollapse .green-map-active .clock-in span, .collapse-container li:hover .clock-in span,.collapse .green-map-active .clock-in span ,
.green-map-active.clock-in span, .uncollapse.clicked .clock-in span, .clicked .clock-in span{
  background-image: url('../images/green-marker.svg');
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 9px 7px;
  min-width: 99px;
}
.user-off:hover .clock-in span {
  background-image: none;
}
.uncollapse.grey-bg {
  background: #fafafa !important;
}
.user-off:hover .clock-in span:hover {
  background: transparent;
  border: 0;
  cursor: default;
}
.user-off:hover .clock-in {
  background-image: none;
}
.no-accordion .arrows {
  display: none;
}
li .clock-out span {
  padding-left: 10px;
  padding-right: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px solid transparent;
}
.uncollapse:hover .clock-out .unactive, .collapse-container li:hover .clock-out .unactive, .collapse .red-map-active .clock-out span, .uncollapse.clicked .clock-out .unactive,  .uncollapse .red-map-active .clock-out .unactive {
  background-image: url('../images/red-marker.svg');
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: 76px 7px;
  color: #f14700;
  min-width: 99px;
}
.uncollapse:hover .clock-out .unactive:hover, .collapse-container li:hover .clock-out .unactive:hover, .collapse .red-map-active .clock-out span, .uncollapse .red-map-active .clock-out .unactive{
  border: 1px solid #f6d3c6;
  background-color: #fff6f2;
  border-radius: 50px;
  min-width: 99px;
}
ul.collapse, ul.collapsing {
  padding: 0;
  border: 0;
  height: auto;
}
#accordion .collapse-container .collapse li, #accordion .collapse-container .collapsing li {
  padding-right: 0;
}
ul .collapse-container {
  padding: 0;
  border: 0;
  margin: 0;
}
.collapse-container div span, .body-container .collapse-container div {
  color: #8e8d8d;
}
.body-container ul .collapse-container {
  height: auto;
}

.collapse-container:hover li {
  background-color: transparent;
}
.collapse-container .uncollapse:hover .clock-in, .collapse-container li:hover .clock-in {
  color: #b0b0b0;
}
.map-popup {
  display: none;
  position: absolute;
  width: 322px !important;
  /*height: 351px !important;*/
  top: 55px;
  z-index: 99;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.uncollapse:hover .map-popup.green-map .mask, .clicked .map-popup.green-map .mask{
  background: url('../../images/left-mask.png') repeat-x 2px top;
}
.map-popup .mask {
  display: none !important;
}
.red-map .triangle-with-shadow {
  right: inherit;
  left: 70px;
}
.triangle-with-shadow {
  width: 50px;
  height: 19px;
  position: absolute;
  right: 90px;
  overflow: hidden;
  bottom: -19px;
}
.location-description.top .triangle-with-shadow {
  transform: rotateX(180deg);
  bottom: 58px;
}
.triangle-with-shadow:after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  background: #fff;
  transform: rotate(44deg);
  top: -19px;
  left: 25px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
/*.map-popup.green-map .mask{*/
/*content: '';*/
/*height: 14px;*/
/*width: 102%;*/
/*/!*background: url('../../images/left-mask-normal.png') repeat-x 2px top;*!/*/
/*position: absolute;*/
/*top: -1px;*/
/*z-index: 9999;*/
/*left: -3px;*/
/*}*/
/*li.uncollapse:hover .map-popup.red-map .mask, li.clicked .map-popup.red-map .mask{*/
/*/!*background: url('../../images/right-mask.png') repeat-x 5px top;*!/*/
/*}*/
/*.map-popup.red-map .mask{*/
/*content: '';*/
/*height: 14px;*/
/*width: 102%;*/
/*/!*background: url('../../images/right-mask-normal.png') repeat-x 5px top;*!/*/
/*position: absolute;*/
/*top: 0;*/
/*z-index: 9999;*/
/*left: -4px;*/
/*}*/
.map-popup .leaflet-top .leaflet-control {
  margin-top: 23px;
}
.green-map-active .leaflet-top .leaflet-control, .red-map-active .leaflet-top .leaflet-control {
  margin-top: 10px;
}
.leaflet-overlay-pane svg.leaflet-zoom-animated g .leaflet-clickable:not(.leaflet-cluster-spider-leg){
  display: none;
}
.map-popup .map-div  {
  width:322px;
  height:293px;
  max-height: 317px;
}
.hvr-bounce-in {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.top-description .fa {
  padding-left: 5px;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  margin-top: 8px;
}
.top-description .member-name i {
  float: right;
  position: absolute;
}
.top-description .member-name {
  padding-left: 29px;
  max-width: 100%;
}

/*

Clock In Page

*/

main.map-layout .clock-in-page {
  float: left;
  width: 100%;
  position: relative;
  background-size: cover;
  margin-top: 76px;
}
.clock-out-icon {
  background-color: #fff;
  display: none;
}
.red-pulse{
  border: 1px solid #d44306;
  background-color: #f14700;
  z-index: 1;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #d44306;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: ease-in all 0.15s;
  -moz-transition: ease-in all 0.15s;
  -ms-transition: ease-in all 0.15s;
  -o-transition: ease-in all 0.15s;
  transition: ease-in all 0.15s;
}
.clock-out-icon:hover .red-pulse{
  width: 210px;
  height: 210px;
}
.clock-out-icon:hover .inner{}
.clock-in-page #map {
  width: 100%;
  height: 100vh;
  opacity: 0.2;
}
.clock-in-page .icon {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  text-align: center;
}
.clock-in-page .icon {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  text-align: center;
  position: relative;
  background: #fff;

}
.clock-in-page .clock-out-icon, .clock-in-page .clock-in-icon  {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: transparent;
}
.clock-in-page .clock-out-icon {
  min-height: 453px;
}
.clock-in-page main {
  padding-bottom: 0;
}
.clock-in-page .clock-in-icon .icon {
  background: transparent;
}
.icon .inner {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  display: inline-block;
  border-radius: 100%;
  font-size: 22px;
  color: #fff;
  text-align: center;
  z-index: 10;
  font-weight: 700;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  cursor: pointer;
}

.clock-in-icon .inner {
  color: #fff;
  animation: pulse 2s infinite;
}
.clock-out-icon .inner {
  line-height: inherit;
  animation: pulse-out 2s normal forwards;
}
.clock-out-icon .inner .center {
  top: 50%;
  position: relative;
  display: block;
  transform: translateY(-50%);
}
.clock-out-icon .inner span:not(.center) {
  display: block;
  font-weight: 300;
  font-size: 11px;
  padding-top: 15px;
  top: 64%;
  position: relative;
  transform: translateY(-73%);
}

.some-kind-of-pulse{
  background-color: #00be49;
  border: 1px solid #03a541;
  z-index: 5;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -webkit-transition: ease-in all 0.15s;
  -moz-transition: ease-in all 0.15s;
  -ms-transition: ease-in all 0.15s;
  -o-transition: ease-in all 0.15s;
  transition: ease-in all 0.15s;
  box-shadow: 0 0 103.74px 10.26px rgba(250, 250, 250, 0.5);
}
.clock-in-icon:hover .some-kind-of-pulse{
  width: 210px;
  height: 210px;
}
.clock-in-icon:hover .inner{
  box-shadow: none;
  background: transparent;
  border: 0;
}
@keyframes pulse-out {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(250, 250, 250, 0.2);
    box-shadow: 0 0 0 0 rgba(241, 71, 0, 1);
  }
  50% {
    -moz-box-shadow: 0 0 0 54px rgba(241, 71, 0, 0);
    box-shadow: 0 0 0 54px rgba(241, 71, 0, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(241, 71, 0, 0);
    box-shadow: 0 0 0 0 rgba(241, 71, 0, 0);
  }
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #f6d3c6;
}
.daterangepicker .calendar th, .daterangepicker .calendar td {
  border: 1px solid #efefef;
  border-radius: 0;
  padding: 10px 9px;
  font-size: 13px;
  font-weight: 400;
}
.datepicker {
  padding: 0;
}
#datepicker .dropdown {
  float: left;
  cursor: pointer;
}
#datepicker .dropdown ul {
  top: 34px;
}
#datepicker .dropdown ul input {
  width: 100%;
  padding-left: 28px;
  font-size: 11px;
}
#datepicker .dropdown ul svg {
  width: 13px;
  position: absolute;
  left: 7px;
  top: 7px;
}
#datepicker .dropdown ul input:focus {
  border: 0;
  width: 100%;
}
body .daterangepicker:before {
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 6px solid #efefef;
}
#datepicker .dropdown ul li {
  height: 40px;
  line-height: 40px;
  padding: 0 28px;
}
#datepicker .dropdown ul li:hover {
  background-color: #fafafa;
}
.clock-out-date {
  display: none;
}
.clock-out-date, .today-date {
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 99;
}
.clock-out-date .date, .today-date {
  font-size: 22px;
  font-weight: 300;
  color: #262626;
}
.clock-out-date h2 {
  font-size: 60px;
  font-weight: 300;
  margin-top: 16px;
  margin-bottom: 36px;
}
.clock-out-icon img {
  width: 225px;
  margin-top: 51px;
}
.location-description {
  float: left;
  width: 100%;
  padding-top: 7px;
}
.location-description p {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0;
}
.location-description p:first-child {
  color: #262626;
  text-transform: uppercase;
}
.location-description p:last-child, .location-description p:nth-child(2) {
  color: #9ca4a7;
}

/*

Today Page

*/

.top-description input {
  background-color: transparent;
  font-size: 16px;
  color: #8e8d8d;
  font-weight: 400;
  /*border: 1px solid transparent;*/
  border: 1px solid  #e1e1e1;
  min-height: 33px;
  vertical-align: middle;
  /*width: 36%;*/
  width: 15%;
  padding: 0 5px;
  border-radius: 3px;
  float: left;
}
.top-description input {
  /*background-image: url(../images/search-icon.svg);*/
  background-repeat: no-repeat;
  background-position: 24px center;
  -webkit-background-size: 15px;
  background-size: 13px;
}
.today-page .top-description input:focus {
  background-color: #fff;
  background-image: url(../images/search-icon-black.svg);
  background-repeat: no-repeat;
  background-position: 24px center;
  -webkit-background-size: 15px;
  background-size: 13px;
}
.top-description svg.search-icon {
  display: none;
}
/*

Filter Selected

*/
.filter-list {
  float: left;
  margin-left: 27px;
  position: relative;
}
.filter-list div{
  border: 1px solid #e1e1e1;
  cursor: pointer;
  padding: 0 10px;
  border-radius: 3px;
  width: 125px;
  height: 33px;
  line-height: 32px;
}
#payroll-timesheets .form-group.disable.email-payroll {
  opacity: 1;
  pointer-events: all;
}
#payroll-timesheets .form-group.disable {
  pointer-events: none;
  opacity: 0.4;
}
#payroll-timesheets .icheckbox_minimal.checked + .filter-list div {
  background: #fafafa;
}
.filter-list.open div {
  background-color: #fff;
}
.filter-list.open .dropdown-toggle {
  /*border-bottom: 0;*/
}
.filter-list i {
  padding-left: 5px;
  margin-top: 0 !important;
  vertical-align: middle;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
}
.filter-list .filterspan_1 svg circle{
  fill: #00be49;
}
.filter-list .filterspan_2 svg circle{
  fill: #f14700;
}
.filter-list .filterspan_3 svg circle{
  fill: #888888;
}
.filter-list span, .filter-list ul li {
  color: #8e8d8d;
  font-size: 11px;
}
.filter-list ul li {
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.filter-list ul li:first-child {
  padding-left: 24px;
}
.filter-list span i {
  position: absolute;
  right: 10px;
  font-size: 22px;
  top: 50%;
  transform: translateY(-50%);
}
.filter-list ul {
  position: absolute;
  z-index: 9;
  padding: 0;
  margin-top: 0;
  width: 125px;
  border-radius: 0;
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  border: 1px solid #efefef;
  min-width: 125px;
}
.filter-list ul li {
  padding: 0 10px;
}
.filter-list ul li:hover {
  background-color: #fafafa;
}
.filter-list svg {
  margin-bottom: 0;
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 3px;
}
.sync-content {
  float: right;
  margin-top: 4px;
  min-width: 147px;
  text-align: right;
}
.sync-content:hover svg path {
  fill: #3e3e3f;
}
.sync-content:hover  span {
  color: #3e3e3f;
}
.sync-content span {
  font-size: 12px;
  color: #8e8d8d;
  display: inline-block;
  cursor: pointer;
  float: none !important;
  margin-right: 5px;
}
.sync-content svg {
  margin-top: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
}
.sync-content svg.spinning {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 1000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 1000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes spin {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
#nprogress .spinner, #nprogress .peg {
  display: none !important;
}
#nprogress {
  top: 76px !important;
  position: fixed;
  transition: none !important;
  z-index: 9999;
}
#nprogress .bar {
  background: #0cd4d2 !important;
  top: 76px !important;
}
.sync-content .sync-now {
  display: none;
}
.sync-content:hover .last-sync {
  display: none;
}
.sync-content.active .last-sync, .sync-content.active .sync-now {
  display: none;
}
.sync-content.active .synchronizing {
  display: inline-block;
}
.sync-content.active:hover .sync-now
{
  display: none;
}
.sync-content:hover .sync-now {
  display: inline-block;
}
.top-description .synchronizing {
  display: none;
}
.top-description input:focus {
  background: #fff;
  border: 1px solid #dbdbdb;
  color: #262626;
  min-height: 33px;
  vertical-align: middle;
  /*width: 36%;*/
  width: 15%;
}
.top-description input:focus {
  outline: 0;
}
.today-page .top-description input {
  border: 1px solid #dbdbdb;
  min-height: 33px;
  vertical-align: middle;
  width: calc(100% - 483px);
  padding-left: 61px;
  font-weight: 400;
  font-size: 11px;
  color: #262626;
}
.today-page .title .date svg {
  width: 13px;
}
.today-page img.search-icon {
  width: 20px;
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 2px;
}
.today-page {
  float: left;
  width: 100%;
  position: relative;
  /*z-index: 2;*/
}
.top-description input:focus {
  background: #fff;
}
.top-description input::-webkit-input-placeholder {
  font-size: 11px;
  color: #919090;
  font-weight: 400;
  text-transform: uppercase;
}
.date.member a {
  float: left;
  font-size: 15px;
  font-weight: 400;
  color: #262626;
}
.today-page .member-name {
  display: inline;
  vertical-align: inherit;
}
.today-page .pending-invitation .member-email {
  color: #939393;
  opacity: 1;
}
.today-page .pending-invitation .clock-out span{
  max-width: 100%;
  font-size: 12px;
  text-transform: uppercase;
  color: #c8c6c7;
}
.today-page .pending-invitation:hover {
  background-color: #fafafa ;
}
.today-page .initials {
  margin-bottom: 3px;
}
.today-page .title .date {
  padding-left: 8px;
}
.today-page .title .date svg:hover path {
  fill: #262626;
}
.today-page .title .date a {
  margin-right: 26px;
  float: left;
}
.error-info {
  position: relative;
  border: 0 !important;
  padding: 0 !important;
  line-height: 10px !important;
  background-image: none !important;
  background: transparent !important;
  min-width: auto !important;
  display: inline-block !important;
  transition: none;
}
.today-page .title .date a:focus {
  outline: 0;
}
.clock-out .error-info + span {
  margin-left: 0;
}
.clock-in .error-info + span {
  margin-left: -10px;
}
.clock-out .error-info {
  right: 105px;
  float: right;
  top: 33px;
}
.clock-out .error-info {
  /*top: 17px;*/
  /*right: 97px;*/
  top: 5px;
  right: 0;
  float: none;
  position: relative;
  left: inherit;
}
.clock-in .error-info {
  position: relative;
  float: left;
  left: 14px;
}
.uncollapse .clock-in .error-info {
  top: 32px;
}
.uncollapse.clicked .fa-angle-down{
  display: none;
}
.uncollapse.clicked .fa-angle-up{
  display: inline-block;
}
.collapse-container .clock-in .error-info{
  top: 15px;
}
i[data-toggle="tooltip"] {
  position: relative;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  display: inline-block;
  background-image: url('../images/error-info.svg');
  background-size: cover;
}
.tooltip.bottom {
  min-width: 161px;
}

.body-container ul .uncollapse:hover .clock-in .error-info,
.body-container ul .uncollapse.clicked .error-info,
.body-container .collapse-container li:hover .clock-in .error-info, .green-map-active .clock-in .error-info {
  left: -16px;
}
.body-container ul .uncollapse:hover .clock-out .error-info,
.red-map-active .error-info, .body-container .collapse li:hover .clock-out .error-info,
.body-container ul .uncollapse.clicked .clock-out .error-info {
  right: 0;
  left: inherit;
}
.today-page .title .date a svg {
  width: 13px;
  float: left;
  margin-top: 2px;
}
.right-icons {
  float: right;
  display: flex;
  align-items: center;
}
.right-icons img {
  width: 14px;
}
.right-icons a {
  display: inline-block;
  width: 68px;
  border-radius: 3px;
  transition: none;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #fafafa;
  padding: 5px;
  color: #8e8d8d;
  max-height: 33px;
  line-height: 20px;
  margin-left: 27px;
}
.right-icons a:hover svg path, .right-icons a.active svg path, .right-icons a:first-child:hover svg polygon, .right-icons a.active:first-child svg polygon {
  fill: #262626;
  color: #262626;
}
.right-icons a svg path, .right-icons a:first-child svg polygon {
  fill: #8e8d8d;
  color: #262626;
}
.right-icons a:hover, .right-icons a:active, .right-icons a:focus, .right-icons a.active {
  background: #fff;
  border: 1px solid #dbdbdb;
  color: #262626;
}
.hamburger-menu {
  margin-left: 11px;
}
.right div span, .right div {
  font-weight: 400;
}
.right-icons svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 2px;
}
li:hover svg {
  opacity: 1;
}
.clock-out svg {
  fill: #8f979b;
  width: 11px;
  height: 11px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 40px;
  opacity: 0;
}
.active-user .clock-out svg {
  opacity: 1;
  margin-left: 0;
  margin-top: 3px;
}
.clock-out svg, .clock-in svg {
  margin-right: 3px;
}
.has-clocked-out svg circle {
  fill: #f14700;
}
.hamburger-menu span {
  width: 16px;
  background: #8e8d8d;
  height: 2px;
  margin: 0 auto;
  display: block;
}
.hamburger-menu.active span, .hamburger-menu:hover span {
  background: #262626;
}
.hamburger-menu span:first-child {
  margin-top: 7px;
}
.today-page .top-description {
  padding: 21px 0 21px 24px;
  position: relative;
  width:100%;
  background: #fafafa;
  line-height: 24px;
  float: left;
}
.hamburger-menu span:nth-child(2), .hamburger-menu span:last-child {
  margin-top: 3px;
}
body .dropdown-menu.daterangepicker {
  width: auto;
  margin: 9px 0 0 0;
  padding: 25px 25px 25px 25px;
  float: right;
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  border: 1px solid #efefef;
}
body .daterangepicker .calendar {
  max-width: none;
}
body .daterangepicker .calendar.left {
  padding-right: 12px;
  padding-top: 0;
}
body .daterangepicker .calendar.right {
  padding-left: 13px;
  padding-top: 0;
}
body .daterangepicker .ranges {
  margin: 0;
}
body .daterangepicker.ltr .calendar.left .calendar-table {
  padding-right: 0;
}
body .daterangepicker .calendar td, body .datepicker-dropdown tbody tr td {
  border: 1px solid #efefef;
  border-radius: 0;
  padding: 10px 9px;
  font-size: 13px;
  font-weight: 400;
  border-top: 0;
  color: #262626;
}
body .daterangepicker .calendar th.prev i::before, body .daterangepicker .calendar th.next i::before {
  content: none
}
body .daterangepicker .calendar th.prev {}
body .datepicker-dropdown thead tr:last-child th {
  border-bottom: 1px solid #e7edf0;
  font-size: 10px;
}
body .daterangepicker thead {
  width: 100%;
}
.daterangepicker.ltr .calendar.left, .daterangepicker.ltr .calendar.right {
  margin-top: 0;
}
body .daterangepicker thead, body .daterangepicker tbody {
  display: table;
}
body .daterangepicker .daterangepicker_input {
  display: none;
}
body .daterangepicker .calendar-table {
  padding: 0;
  border: 0;
}
body .daterangepicker table thead tr:last-child th {
  font-size: 10px;
}
body .daterangepicker thead tr th.prev {
  background-position: center;
  background-image: url('../images/calendar-left-arrow.svg');
  background-repeat: no-repeat;
}
body .daterangepicker thead tr th.next {
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/calendar-right-arrow.svg');
}
body .daterangepicker thead tr th.prev, body .daterangepicker thead tr th.next {
  border-radius: 2px;
  font-size: 0;
}
body .daterangepicker thead tr th.prev:hover {
  background-image: url('../images/calendar-left-arrow.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-color: #eee;
}
body .daterangepicker thead tr th.next:hover {
  background-image: url('../images/calendar-right-arrow.svg');
  background-color: #eee;
  background-position: center;
  background-repeat: no-repeat;
}
.dropdown-menu.daterangepicker td.active.start-date, .dropdown-menu.daterangepicker td.in-range.end-date {
  background-color: #0cd4d2;
  color: #fff;
}
.dropdown-menu.daterangepicker td.active.start-date:hover, .dropdown-menu.daterangepicker td.in-range.end-date:hover {
  background:#09acaa !important;
}
.daterangepicker td.in-range {
  background: #0cd4d2;
  color: #fff !important;
}
.daterangepicker td.in-range:hover {
  background:#09acaa !important;
}

body .ranges .active {
  background-color: #0cd4d2;
  color: #fff;
  border: 1px solid #0cd4d2;
}
body .ranges .active:hover {
  background-color: #09acaa !important;
  color: #fff !important;
}
body .ranges li {
  font-size: 13px;
  background: #FFFFFF;
  border: 1px solid #efefef;
  border-radius: 5px;
  color: #262626;
  padding: 8px 12px;
  margin-bottom: 9px;
  cursor: pointer;
}
body .ranges li:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}
body .btn-success:hover, body .btn-success:active, body .btn-success:focus {
  border: 1px solid #09acaa !important;
  background-color: #09acaa !important;
  color: #fff !important;
}
body .btn-success {
  background-color: #0cd4d2;
  color: #fff;
  border: 1px solid #0cd4d2;
}
.range_inputs button {
  width: 75px;
  border-radius: 5px;
}
.range_inputs button:hover, .range_inputs button:focus, .range_inputs button:active {
  outline: 0 !important;
  box-shadow: 0 !important;
}
body .btn-success:hover {
  background: transparent;
}
body .daterangepicker.ltr .ranges {
  padding-right: 15px;
  padding-left: 3px;
}
.half-map-page .top-description {
  padding: 27px 0 27px 0;
  width: 693px;
}
.half-map-page aside .members-list svg, .full-map-page .members-list aside svg {
  overflow: hidden;
  width: 16px;
  height: 16px;
  float: right;
  margin-top: 13px;
  display: inline-block;
  vertical-align: middle;
}
.half-map-page .right-icons {
  margin-top: -6px;
}
.half-map-page #map {
  height: calc(100vh - 222px);
}
aside.left li:hover {
  background-color: #fff;
}
.half-map-page .top-description span {
  font-size: 12px;
  color: #8e8d8d;
}
.top-description span {
  float: left;
}
.half-map-page .top-description span i {
  margin-right: 5px;
  font-style: normal;
}
.half-map-page .top-description span img {
  width: 18px;
  height: 18px;
}
.user-off svg circle {
  fill: #888888;
}
.active-user svg circle {
  fill: #00be49;
}
.user-off .clock-out svg {
  opacity: 1;
  margin-left: 0;
  margin-top: 3px;
}
.user-off .clock-out span, .active-user .clock-out span {
  font-size: 12px;
  text-transform: uppercase;
  color: #8e8d8d;
}
.active-span {
  pointer-events: none;
}
.active-user:hover .clock-out span:hover {
  cursor: default;
}
.user-off:hover .clock-out span:hover {
  cursor: default;
}
.reload-icon i {
  vertical-align: middle;
}
.reload-icon svg {
  margin-top: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
#map {
  transition: width .3s ease-in;
  /*border: 1px solid #efefef;*/
}
.reload-icon:hover svg path {
  fill: #3e3e3f;
}
.main-container-full {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.body-container-full {
  width: 100%;
  padding: 0;
  position: relative !important;
  right: 0 !important;
}
.body-container-full #map {
  height: calc(100vh - 76px);
  width: 100%;
  margin-top: 0;
}
/*aside.aside-fixed {*/
  /*position: fixed;*/
  /*z-index: 99;*/
  /*background: #fff;*/
  /*padding-top: 0;*/
  /*margin-top: 0;*/
  /*top: 184px;*/
  /*padding: 15px 15px 0 15px;*/
  /*width: 246px;*/
  /*left: 48px;*/
  /*max-height: calc(100vh - 231px);*/
  /*box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);*/
/*}*/
/*aside.aside-fixed input {*/
  /*background-color: #fafafa;*/
/*}*/
/*aside.aside-fixed .active {*/
  /*background-color: #efefef;*/
/*}*/
/*aside.aside-fixed {*/
/*display: none;*/
/*}*/
/*aside.aside-fixed li:hover {*/
/*background-color: #efefef;*/
/*}*/
/*aside.aside-fixed li:last-child {*/
/*border-bottom: 1px solid #efefef;*/
/*}*/
/*aside.aside-fixed ul {*/
/*margin-bottom: 0;*/
/*max-height: calc(100vh - 309px);*/
/*overflow: auto;*/
/*}*/
/*aside.aside-fixed .member-name {*/
/*max-width: 129px;*/
/*}*/
.bullets {
  width: 100%;
  text-align: center;
  display: inline-block;
  padding: 4px 0;
}
.bullets svg {
  float: none !important;
  margin-top: 0 !important;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.top-aside-header {
  position: fixed;
  z-index: 99;
  background: #fff;
  left: 48px;
  top: 118px;
  vertical-align: middle;
  height: 45px;
  line-height: 45px;
  width: 246px;
  padding: 0 15px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  display: none;
}
.top-aside-header span {
  font-size: 10px;
  color: #8E8D8D;
}
.top-aside-header .right-icons {
  display: inline;
  margin-top: 0 !important;
}
.top-aside-header .right-icons a:hover,
.top-aside-header .right-icons a:active,
.top-aside-header .right-icons a:focus,
.top-aside-header .right-icons a.active {
  background: #fafafa;
  border: 1px solid #dbdbdb;
}
.top-aside-header .reload-icon, .top-aside-header .reload-icon i {
  float: left;
}
.top-aside-header .reload-icon i {
  margin-right: 10px;
}
.top-aside-header .reload-icon i svg {
  vertical-align: middle;
}
.top-aside-header .right-icons a {
  border: 1px solid #fff;
}
.top-aside-header .hamburger-menu {
  margin-left: 0;
}
.bullets {
  display: none;
}
aside.aside-fixed .bullets {
  display: block;
}
.top-aside-header .right-icons a {
  width: 28px;
  height: 28px;
  line-height: 14px;
}
.top-aside-header .right-icons a svg {
  width: 16px;
  height: 16px;
  margin-top: -5px;
}
.top-aside-header .right-icons a.hamburger-menu svg{
  margin-top: -1px;
}
.body-container-full #map {
  border: 0;
}

/* -------- Info Window Customisation ---------- */

#siteNotice{
  float: left;
  width: 100%;
  z-index: 2;
  position: relative;
}
#siteNotice img.marker {
  float: left;
  width: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -2px;
}
#siteNotice span:first-child, #siteNotice span:last-child {
  display: block;
}
#siteNotice .member-image, #siteNotice .member-info {
  float: left;
  margin-bottom: 4px;
}
#siteNotice .member-image {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  float: right;
  background: #dbdbdb;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-size: 30px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  left: 79%;
}
#siteNotice .member-image img {
  width: 80px;
  border-radius: 100%;
  height: 80px;
  object-fit: cover;
}
#siteNotice span:first-child {
  font-size: 15px;
  margin-bottom: 1px;
  color: #282828;
}
.leaflet-div-icon:before {
  content: '';
  width: 40px;
  height: 40px;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  z-index: -1;
  text-align: center;
  position: absolute;
  animation: ring-1 2s ease-out infinite;
  pointer-events: none;
}
body .leaflet-popup-tip-container{
  display: none;
}

/* ------ Marker Cluster Reset Style ------- */

.marker-cluster span {
  color: #fff;
  font-size: 11px;
}

body .marker-cluster:before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: -1;
  text-align: center;
  position: absolute;
  left: scale(0.1, 0.1);
  animation: ring-1 2s ease-out infinite;
}
body .marker-cluster.in span {
  background: #00be49;
}
body .marker-cluster span {
  line-height: 18px;
}
body .marker-cluster.out span {
  background: #f14700;
}
body .marker-cluster.in:before {
  background-color: rgba(0, 190, 73, 0.2);
  border: 1px solid rgba(0, 190, 73, 0.1);
}
body .marker-cluster.out:before {
  background-color: rgba(241, 71, 0, 0.2);
  border-color: rgba(241, 71, 0, 0.1);
}
body .marker-cluster-small {
  background: transparent;
}
body .marker-cluster div {
  width: 18px;
  height: 18px;
  border-radius: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}
.reverse {
  top:auto;
  bottom:100%;
}
body .leaflet-bar a, body .leaflet-bar a:hover {
  color: #8e8d8d;
  transition: none;
}
body .leaflet-bar a:hover {
  background-color: #fafafa;
}
body .leaflet-touch .leaflet-bar{
  border: 0;
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
}
body .leaflet-div-icon {
  background: none !important;
  border: 0 !important;
}
.leaflet-div-icon.marker-clockin:before {
  background-color: rgba(0, 190, 73, 0.2);
  border: 1px solid rgba(0, 190, 73, 0.1);
}
.leaflet-div-icon.marker-clockout:before {
  background-color: rgba(241, 71, 0, 0.2);
  border-color: rgba(241, 71, 0, 0.1);
}
.leaflet-div-icon.marker-clockin span{
  background: #00be49;
}
.leaflet-div-icon.marker-clockout span{
  background: #f14700;
}
.leaflet-div-icon span {
  width: 18px !important;
  height: 18px !important;
  border-radius: 100%;
  display: inline-block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.leaflet-popup {
  margin-left: -170px;
  margin-bottom: -38px !important;
  min-width: 290px;
}
body .leaflet-popup-content-wrapper {
  border-radius:50px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}
body .leaflet-popup-content {
  margin: 7px 7px 7px 16px;
  display: flex;
  align-items: center;
}
body .leaflet-popup-content .right-mask {
  position: absolute;
  z-index: 1;
  right: -13px;
  top: -2px;
  float: left;
  height: 92px;
  width: 57px;
  background: url('../../images/marker-right-mask.png') no-repeat left 4px;
  background-size: contain;
}
body .leaflet-bar {
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0;
}
#siteNotice span:last-child {
  color: #262626;
  font-size: 10px;
}
#siteNotice span:nth-child(2) {
  padding-right: 24px;
  margin-right: 9px;
  background-image: url('../images/right-arrow.png');
  background-repeat: no-repeat;
  background-size: 17px;
  background-position: right center;
  margin-bottom: 2px;
  display: inline-block;
}
#siteNotice .clock-in-info.last-location {
  font-size: 11px;
  font-weight: 600;
  color: #262626;
  text-transform: none;
  background-image: none;
}
.member-info {
  padding-left: 29px;
}
#siteNotice span:nth-child(2), #siteNotice span:nth-child(3) {
  font-size: 11px;
  /*text-transform: uppercase;*/
}
#siteNotice .time-synch {
  text-transform: none;
}
.clock-in-info{
  color:#00be49;
}
.clock-out-info{
  color: #f44400;
}
.gm-style-iw {
  width: 266px !important;
  position: relative;
  height: 100px;
  padding-top: 3px;
}
.gm-style-iw > div{
  display: block!important;
  width: calc(100% - 10px)!important;
  padding: 7px 7px 7px 15px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  border-radius: 50px;
}
.gm-style-iw > div #content{
  float: left;
  position: relative;
  z-index: 2;
  width: 100%;
}
.gm-style-iw > div .right-mask{
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  float: left;
  height: 97px;
  width: 57px;
  background: url('../../images/marker-right-mask.png') no-repeat left 4px;
  background-size: contain;
}
.enlarge-map, .resize-map {
  display: inline-block;
  vertical-align: middle;
  padding: 12px 17px;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #8e8d8d;
  font-size: 10px;
  position: absolute;
  z-index: 9;
  right: 6px;
  top: 81px;
}
.enlarge-map:hover {
  color: #454c4e;
}
.enlarge-map img, .resize-map img {
  width: 18px;
  margin-right: 8px;
}
.resize-map {
  display: none;
}
.body-container ul .map-popup .location-description img {
  width: 13px;
  float: left;
}
.map-popup:before, .map-popup:after {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 50%;
  padding-bottom: inherit;
  background-color: inherit;
}
.map-popup:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.map-popup:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}
.body-container ul .map-popup .location-description {
  line-height: 16px;
}
.map-popup .location-description p {
  float: left;
  padding-left: 5px;
  line-height: 18px;
  width: calc(100% - 20px);
}
.map-popup .map-div  .gm-style-iw {
  display: none !important;
}
.map-popup .location-description p b {
  font-size: 14px;
  color: #262626;
}
.map-popup .location-description {
  padding: 11px 20px;
  background: #fff;
  min-height: 58px;
  position:relative;
}
.login-wrap {
  padding:20px;
  position:relative;
}
.registration {
  position:absolute;
  bottom:-35px;
  color: #b8bab9;
}
.login-wrapper {
  float: left;
  width: 100%;
  height: 100vh;
  position: relative;
}
.login-container {
  max-width: 512px;
  padding: 80px;
  background-color: #fff;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  border: 1px solid #efefef;
  box-shadow: 0 1px 1px 0 rgba(34, 36, 38, 0.15);
}
.login-container.signup-container {
  padding: 80px 80px 20px 80px;
}
.login-container form {
  position: relative;
}

.login-container .help-block {
  position: absolute;
  bottom: 47px;
  left: 18px;
}
.sign-up #password-span {
  bottom: 176px;
}
.login-container .help-block#confirm-password-span {
  bottom: 100px;
}
.login-container .header {
  margin-bottom: 38px;
  float: left;
  width: 100%;
}
.login-container .header .header-title {
  font-size: 38px;
  line-height: 30px;
  letter-spacing: -2px;
  font-weight: 600;
  color: #262626;
  float: left;
  margin-top: -1px;
  margin-bottom: 0;
}
.login-container input[type=password] {
  margin-bottom: 27px;
}
.login-container .header .logo {
  float: right;
  height: 30px;
  width: 133px;
  pointer-events: inherit;
  background: url('../images/logo.png') no-repeat right top;
  margin: 0;
  background-size: contain;
}
.login-container input {
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  font-size: 18px;
  color: #262626;
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 19px;
  font-family: 'Open Sans', sans-serif;
}
.login-container input:focus {
  border: 1px solid #0cd4d2;
}
.login-container .btn-login {
  width: 100%;
  background-color: #0cd4d2;
  text-transform: uppercase;
  line-height: 46px;
  border-radius: 5px;
  border: 0;
  color: #fff;
  text-align: center;
  margin-top: 11px;
  font-size: 16px;
}
.login-container .btn-login:hover {
  background-color: #09acaa;
}
.icheckbox_square-blue, .iradio_square-blue {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 14px;
  height: 14px;
  border: none;
  cursor: pointer;
  background-size: contain;
  float: left;
}
label:hover .icheckbox_square-blue,
label:hover .icheckbox_minimal, label:hover .iradio_square-blue  {
  background: url('../images/hovered-bg.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.icheckbox_square-blue, label .icheckbox_minimal, .iradio_square-blue {
  background: url('../images/unchecked-bg.svg');
  background-size: contain;
  background-position: center !important;
}
label .icheckbox_square-blue.checked, label .icheckbox_minimal.checked,
label .iradio_square-blue.checked {
  background: url('../images/checked-bg.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}
a.remember-me label span {
  margin-left: 10px;
  font-size: 13px;
  line-height: 14px;
  float: left;
  font-weight: 400;
  color: #8e8d8d;
}
.login-container .remember-me {
  font-size: 13px;
  font-weight: 400;
  color: #b1a9a9;
  margin-top: 10px;
  float: left;
}
.login-container .remember-me:focus {
  outline: none;
}
.login-container .remember-me label:focus {
  outline: none;
}
.login-container .remember-me label {
  cursor:pointer;
}
.login-wrapper .signup {
  position: absolute;
  bottom: calc((100% - 512px) / 4 - 11px);
  text-align: center;
  left: 50%;
  transform: translate(-50%);
}
.login-wrapper .signup.new-signup {
  bottom: calc((100% - 366px) / 4 - 20px);
}
.login-wrapper .signup p{
  float: left;
  vertical-align: middle;
  margin-right: 15px;
  margin-bottom: 0;
  line-height: 37px;
  color: #262626;
}
.login-wrapper .signup a {
  width: 120px;
  border: 1px solid #262626;
  color: #262626;
  background: transparent;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 35px;
  border-radius: 5px;
  margin: 0 auto;
  display: block;
  transition: none;
  text-align: center;
  float: left;
}
.terms-of-service-p {
  color: #8e8d8d;
  font-size: 13px;
  margin-top: 20px;
  margin-bottom: 0;
}
.terms-of-service-p a {
  color: #262626;
  font-size: 13px;
  text-decoration: underline;
}
.login-wrapper .signup a:hover {
  background-color: #262626;
  color: #fff;
  border-color: #262626;
}

/* -------- User Settings Page ------------ */

#user-settings{
  margin-top: 60px;
  padding: 25px 120px 25px;
  float: left;
  width: 100%;
  margin-bottom: 0;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.user-settings-scroll {
  float: left;
  width: 100%;
  height: calc(100vh - 76px);
  overflow-y: auto;
  margin-top: 76px;
}
#user-settings .form-wrapper .form-group.password {
  margin-bottom: 0;
}
.user-settings-scroll .form-wrapper .action-buttons {
  margin-top: 0;
}
#user-settings .read-only-input {
  background: #fafafa;
}
#user-settings .read-only-input:focus {
  border-color: #dbdbdb;
}
.picture-wrapper{
  float: left;
  width: 234px;
  height: 234px;
  position: relative;
}

/* --------- Profile with Picture ---------- */

.profile-pic{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background: #8e8d8d;
  color: #fff;
  font-size: 75px;
}
.profile-pic .shown-span, .profile-pic .hidden-span {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  transform: translateY(-50%);
}
.profile-pic img{
  border-radius:  100%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.edit-picture{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  -webkit-transition: ease-in all 0.10s;
  -moz-transition: ease-in all 0.10s;
  -ms-transition: ease-in all 0.10s;
  -o-transition: ease-in all 0.10s;
  transition: ease-in all 0.10s;
}
.edit-picture.no-image p{
  float: left;
  width: 100%;
}
.edit-picture.no-image #edit-picture {
  float: left;
  width: 100%;
  text-align: center;
}
.edit-picture.no-image #edit-picture label {
  text-align: center;
  width: 100%;
}
.edit-picture .change-picture{
  float: left;
  width: 100%;
  padding: 0 50px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.edit-picture .change-picture li{
  text-align: center;
  opacity: 0;
  -webkit-transition: ease all 0.15s;
  -moz-transition: ease all 0.15s;
  -ms-transition: ease all 0.15s;
  -o-transition: ease all 0.15s;
  transition: ease all 0.15s;
}
.edit-picture .change-picture li#delete-picture{
  float: left;
  margin-top: 15px;
  transition-delay: 0.10s;
}
.edit-picture .change-picture li#edit-picture, .edit-picture .change-picture .add{
  float: right;
  margin-top: 15px;
  transition-delay: 0.20s;
}
.picture-wrapper:hover .edit-picture{
  opacity: 1;
}
.edit-picture:hover .change-picture li#delete-picture,
.edit-picture:hover .change-picture li#edit-picture, .edit-picture:hover .change-picture .add{
  opacity: 1;
  margin-top: 0;
  cursor: pointer;
}
.edit-picture .change-picture li a, .edit-picture .change-picture li label{
  float: left;
  width: 40px;
  height: 45px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 33px auto;
  cursor: pointer;
}
.edit-picture:hover .change-picture li#delete-picture a{
  background-image: url('../../images/delete-picture-icon.svg');
}
.edit-picture:hover .change-picture li#edit-picture label{
  background-image: url('../../images/edit-picture-icon.svg');
}
.edit-picture:hover .change-picture .add label{
  background-image: url('../../images/camera-icon.svg');
}
.edit-picture.no-image .change-picture {
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #fff;
  text-align: center;
}
.edit-picture .add {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  justify-content: center;
}

/* ---------- Profile with Picture ---------- */
/* ---------- Profile with Initials ---------- */

.profile-initials{
  width: 234px;
  height: 234px;
  border-radius: 100%;
  background-color: #dbdbdb;
}
.profile-initials .initials{
  width: 100%;
  font-size: 65px;
  color: #fff;
  line-height: 234px;
  text-align: center;
  background-color: transparent;
  float: left;
  position: relative;
  z-index: 1;
}
.set-picture{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  -webkit-transition: ease-in all 0.15s;
  -moz-transition: ease-in all 0.15s;
  -ms-transition: ease-in all 0.15s;
  -o-transition: ease-in all 0.15s;
  transition: ease-in all 0.15s;
}
.has-initials:hover .set-picture{
  opacity: 1;
}
.has-initials .set-picture div{
  height: 100px;
  width: 130px;
  position: relative;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  margin-left: -65px;
}
.has-initials .set-picture div i {
  width: 44px;
  height: 36px;
  margin: 4px 0 13px;
  display: inline-block;
  text-align: center;
  background: url('../../images/camera-icon.svg') no-repeat center;
}
.has-initials .set-picture div p{
  font-size: 18px;
  color: #fff;
  line-height: 22px;
  margin-bottom: 0;
}

/* ---------- Profile with Initials ---------- */

.form-wrapper{
  float: right;
  width: 420px;
}
.form-wrapper h1{
  color: #8e8d8d;
  line-height: 30px;
  font-size: 24px;
  margin: 0;
  margin-bottom: 28px;
}
.form-wrapper .form-group{
  float: left;
  width: 100%;
  margin-left: 0;
  margin-bottom: 22px;
}
.form-wrapper .form-group.password{
  margin-bottom: 25px;
}
.form-wrapper .form-group label{
  float: left;
  margin-bottom: 7px;
  width: 100%;
  color: #262626;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
}
.form-wrapper .form-group input[type=text],
.form-wrapper .form-group input[type=email],
.form-wrapper .form-group input[type=password]{
  padding: 12px 15px;
  background-color: transparent;
  width: 100%;
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  font-size: 17px;
  color: #262626;
  -webkit-transition: ease all 0.15s;
     -moz-transition: ease all 0.15s;
      -ms-transition: ease all 0.15s;
       -o-transition: ease all 0.15s;
          transition: ease all 0.15s;
}
.form-wrapper .form-group input[type=text]:focus,
.form-wrapper .form-group input[type=email]:focus,
.form-wrapper .form-group input[type=password]:focus{
  outline: 0;
  box-shadow: none;
  border-color: #0cd4d2;
}
.form-wrapper .form-group.password input{
  margin-bottom: 25px;
}
.form-wrapper .action-buttons{
  float: right;
  margin-top: 4px;
}
.form-wrapper .action-buttons button{
  font-size: 16px;
  font-weight: 600;
  line-height: 50px;
  height: 50px;
  border: 0;
  float: left;
  margin-left: 25px;
  padding: 0;
  text-align: center;
}
.form-wrapper .action-buttons button.cancel{
  width: 112px;
  margin-left: 0;
  color: #8e8d8d;
  background-color: #dbdbdb;
}
.form-wrapper .action-buttons button.cancel:hover{
  background-color: #cccccc;
}
.form-wrapper .action-buttons button.save{
  width: 177px;
  color: #fff;
  background-color: #0cd4d2;
}
.form-wrapper .action-buttons button.save:hover{
  background-color: #09acaa;
}
.form-wrapper .action-buttons button:focus{
  outline: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* ---------------- User Settings Page ---------------- */
/* ---------------- Manage Team Page ---------------- */

.team.body-container{
  padding-left: 0;
}
.team.body-container ul {
  margin-bottom: 0;
}
.team .top-description{
  float: left;
  width: 100%;
  padding: 26px 36px 27px 85px;
}
.team .title{
  /*padding: 0 45px 0 56px;*/
}
.team .top-description h2{
  font-size: 20px;
  color: #8e8d8d;
  margin: 0;
  float: left;
}
.team .top-description .project-name{
  float: left;
  font-size: 20px;
  line-height: 22px;
  color: #262626;
  margin-left: 15px;
  position: relative;
  padding-left: 13px;
}
.team .top-description .project-name:focus {
  outline:0;
}
.team .top-description .project-name:hover .edit-project {
  background: url('../../images/pencil-icon-blue.svg') no-repeat left top;
  width: 16px;
  height: 14px;
  background-size: contain;
}
.team .top-description .edit-project{
  width: 16px;
  height: 14px;
  float: right;
  background: url('../../images/pencil-icon.svg') no-repeat left top;
  background-size: contain;
  margin-left: 6px;
  margin-top: 4px;
}
.team .top-description .project-name:before{
  content: '';
  height: 15px;
  width: 1px;
  background-color: #787878;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.team .top-description .invite{
  float: right;
  font-size: 16px;
  line-height: 22px;
  color: #8e8d8d;
  transition: none;
}
.team .top-description .invite svg *{
  fill: #0cd4d2;
}
.team .top-description .invite:hover {
  color: #0cd4d2;
}
.team .top-description .invite:focus{
  outline: 0;
}
.team .top-description .invite svg{
  float: left;
  height: auto;
  width: 13px;
  margin-top: 4px;
  margin-right: 15px;
}
.body-container .title .name{
  /*width: 320px*/
}
#manage-team .title .name {
  padding-left: 30px;
}
.body-container .title .email{
  width: 320px;
  padding-left: 28px;
}
.body-container .title .role{
  width: 142px;
  float: right;
  padding-left: 2px;
}
.team .profile-image{
  float: left;
  margin: 18px 0;
}
.team .member-name{
  float: left;
}
.team ul li:hover{
  background-color: #fafafa;
}

/* ------ Button Styling -------- */

.team ul li .btn{
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 400;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  -webkit-transition: ease-in all 0.10s;
  -moz-transition: ease-in all 0.10s;
  -ms-transition: ease-in all 0.10s;
  -o-transition: ease-in all 0.10s;
  transition: ease-in all 0.10s;
}
.team ul li .btn:hover{
  background-color: #262626;
  color: #fff;
  border-color: #262626;
}
.team ul li:hover a,
.team ul li a{
  background: transparent !important;
}
.team ul li .buttons a:hover{
  background: transparent !important;
}
.team ul li .member{
  width: 365px;
}
.team ul li .member .member-name{
  color: #262626;
  font-size: 15px;
  font-weight: 400;
  padding-left: 17px;
}
.team ul li .member-email{
  width: 320px;
}
.team ul li .member-email p{
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  color: #262626;
}

/* ------------ Member Role ------------- */

.team ul li .member-role{
  width: 113px;
  float: right;
}
.team ul li .member-role a{
  font-size: 14px;
  color: #262626;
  font-weight: 400;
}
.member-role .fa {
  color:#8e8d8d;
}
.member-role .dropdown-menu{
  padding: 0;
  margin-top: -1px;
  border-radius: 0;
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
}
.member-role .dropdown-menu li{
  height: auto;
  padding: 0;
  border-top: 1px solid #efefef;
}
.member-role .dropdown-menu li a{
  padding: 10px 12px;
  transition: none;
}
.team ul li .delete{
  float: right;
  width: auto;
  opacity: 0;
}
.team .delete .confirmation {
  float: right;
}
.team ul li:hover .delete{
  opacity: 1;
}
.team ul li .delete a.delete-member{
  width: 34px;
  height: 36px;
  float: left;
  background: url('../../images/delete-member-ico.svg') no-repeat center center;
  -webkit-background-size: 14px 16px;
  background-size: 14px 16px;
  margin: 15px 0;
  padding: 10px 10px;
}
.team ul li .delete a.delete-member:hover {
  background: url('../../images/delete-member-ico-black.svg') no-repeat center center;
  -webkit-background-size: 14px 16px;
  background-size: 14px 16px;
}
.team ul li a.delete-btn:hover{
  background: #fff;
  color: #262626;
}

/* --------- Pending Invitation ---------- */

.team ul .pending-invitation .pending{
  width: 365px;
  padding-left: 45px;
  margin-bottom: 0;
}
.team ul .pending-invitation .pending p, .pending-invitation .member-email{
  opacity: 0.5;
}
.team ul .pending-invitation .pending .resend{
  display: none;
}
.team ul .pending-invitation:hover .pending .resend{
  display: inline-block;
}
.team ul li .delete-confirm,
.team ul .pending-invitation .delete-confirm{
  width: 150px;
  float: right;
}
.team ul li .delete-confirm .delete-btn{
  background-color: #262626;
  color: #fff;
  border: 1px solid #262626;
}
.team ul li .delete-confirm .cancel-btn{
  border-color: transparent;
  background-color: transparent;
}
.team ul li .delete-confirm .cancel-btn:hover{
  border-color: transparent;
  background-color: transparent;
  color: #262626;
}
.team ul .pending-invitation .pending p{
  margin-bottom: 0;
  color: #8e8d8d;
  float: left;
  margin-right: 15px;
}

/* --------- Confirm Delete Member ------------ */

.team ul .delete .member,
.team ul .delete .member-email p{
  opacity: 0.5;
}
.modal-backdrop{
  background: #ffffff;
  opacity: 0.7;
}
.team ul .delete .member-email p {
  float: left;
}
body .modal.in .modal-dialog{
  top: 50%;
  width: 520px;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  margin: 0;
}
body .modal.in .modal-dialog .modal-content{
  width: 100%;
  padding: 50px;
  float: left;
  border-radius: 3px;
  border: 1px solid #dbdbdb;
  -webkit-box-shadow: 3px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 5px 9.5px 0.5px rgba(0, 0, 0, 0.1);
}
body .modal.changes-confirm .modal-dialog .modal-content {
  padding: 26px;
  text-align: center;
}
body .modal.changes-confirm .modal-dialog .modal-content h4 {
  margin-bottom: 0 !important;
}
body .modal.in .modal-dialog .modal-content .modal-header{
  padding: 0;
  border-bottom: 0;
}
body .modal.in .modal-dialog .modal-content .modal-header h4{
  font-size: 30px;
  line-height: 30px;
  color: #262626;
  text-transform: capitalize;
  margin-bottom: 23px;
  font-weight: 400;
}
body #editName.modal.in .modal-dialog .modal-content .modal-header h4{
  margin-bottom: 25px;
}
body .modal.in .modal-dialog .modal-content .modal-body{
  padding: 0;
  width: 100%;
  float: left;
}
body .modal.in .modal-dialog .modal-content .modal-body label{
  font-size: 14px;
  line-height: 14px;
  color: #8e8d8d;
  width: 100%;
  float: left;
  margin-bottom: 15px;
  font-weight: 400;
  text-transform: uppercase;
}
body .modal.in .modal-dialog .modal-content .modal-body input[type=text],
body #deleteAccount.modal.in .modal-dialog .modal-content .modal-body input[type=password]{
  width: 100%;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  font-size: 18px;
  line-height: 22px;
  padding: 13px 15px;
  margin-bottom: 14px;
}
body #createCompany .modal-dialog .modal-content .modal-body input[type=text],
body #deleteAccount.modal.in .modal-dialog .modal-content .modal-body input[type=password] {
  margin-bottom: 25px;
}
body #createCompany .modal-dialog .modal-content .modal-header h4 {
  text-transform: none;
}
body #editName.modal.in .modal-dialog .modal-content .modal-body input[type=text]{
  margin-bottom: 25px;
}
body .modal.in .modal-dialog .modal-content .modal-body input[type=text]:focus{
  outline: 0;
  border-color: #0cd4d2;
}
body #deleteAccount button.submit {
  background-color: #f14700;
}
body #deleteAccount button.submit:hover {
  background-color: #e64f10;
}
body #deleteAccount button.submit:focus {
  outline: 0;
}
body #deleteAccount input:focus {
  outline: 0;
}
body #deleteAccount h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 7px;
}
body #deleteAccount p {
  margin-bottom: 23px;
}
.delete-account{
  color: #8e8d8d;
  outline: 0;
  font-size: 14px;
  transition: none;
  margin-top: 20px;
  display: inline-block;
}
.delete-account:focus {
  outline: 0;
}
.delete-account:focus, .delete-account:hover {
  color:#0cd4d2;
}
body #deleteAccount p a {
  color: #262626;
  text-decoration: underline;
}
body #deleteAccount label {
  font-weight: 600;
  text-transform: none;
  color: #262626;
}
.add-other{
  color: #0cd4d2;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  margin-bottom: 25px;
  float: left;
  -webkit-transition: none;
     -moz-transition: none;
      -ms-transition: none;
       -o-transition: none;
          transition: none;
}
.add-other:hover{
  color: #09acaa;
}
.add-other i{
  padding-right: 4px;
  font-weight: 400;
}
.form .action-buttons{
  float: right;
}
.form .action-buttons button{
  font-size: 16px;
  font-weight: 600;
  line-height: 50px;
  height: 50px;
  border: 0;
  float: left;
  margin-left: 25px;
  padding: 0;
  text-align: center;
}
.form .action-buttons button.cancel{
  width: 112px;
  margin-left: 0;
  color: #8e8d8d;
  background-color: #dbdbdb;
}
.form .action-buttons button.cancel:focus {
  outline: none;
}
.form .action-buttons button.cancel:hover{
  background-color: #cccccc;
}
.form .action-buttons button.submit{
  width: 177px;
  color: #fff;
  background-color: #0cd4d2;
}
.form .action-buttons button.submit:hover{
  background-color: #09acaa;
}

/* ---------------- Manage Team Page ---------------- */

/* ---------------- No Results Page ---------------- */

.no-results{
  float: left;
  width: 100%;
  height: 573px;
  background: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #dbdbdb;
  position: relative;
}
.no-results .no-res-wrapper{
  position: absolute;
  width: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.no-results .no-res-wrapper i{
  width: 113px;
  height: 99px;
  background: url('../../images/no-timesheets.svg') no-repeat left top;
  -webkit-background-size: contain;
  background-size: contain;
  display: block;
  margin: 0 auto;
}
.leaflet-marker-pane .red-marker {
  background: #f14700;
  color: #fff;
  border-radius: 100%;
  text-align: center;
}
.leaflet-marker-pane .green-marker:before {
  content: '';
  pointer-events: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: -1;
  margin-left: -17px;
  text-align: center;
  margin-top: -11px;
  position: absolute;
  left: scale(0.1, 0.1);
  animation: ring-1 2s ease-out infinite;
  background-color: rgba(0, 190, 73, 0.2);
  border: 1px solid rgba(0, 190, 73, 0.1);
  pointer-events: none;
}
.leaflet-marker-pane .red-marker:before {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  margin-left: -17px;
  position: absolute;
  margin-top: -11px;
  text-align: center;
  left: scale(0.1, 0.1);
  animation: ring-1 2s ease-out infinite;
  background-color: rgba(241, 71, 0, 0.2);
  border-color: rgba(241, 71, 0, 0.1);
  pointer-events: none;
}
.leaflet-marker-pane .green-marker {
  background: #00be49;
  color: #fff;
  border-radius: 100%;

  text-align: center;
}
.no-results .no-res-wrapper h3{
  margin: 41px 0 45px;
  font-size: 20px;
  font-weight: 400;
  color: #262626;
}
.no-results .no-res-wrapper .btn{
  background-color: #0cd4d2;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin: 0 auto;
  padding: 13px 22px;
  border-radius: 5px;
  transition: none;
}
.no-results .no-res-wrapper .btn:hover {
  background-color: #09acaa;
}

/* ----------- No Results Page ----------- */

#confirm-password-span, #old-password-span, #old-password-incorrect-span, #name-span, #daily-span, #weekly-span,
#password-span, #firstname-span, #lastname-span, #company-span, #email-span, #password-for-deactivate-span, #create-company-name-span{
  display: none;
}
.delete-this{
  display: none;
}
.workspaces-ul{
  min-width: 160px;
}
input[type="file"] {
  display: none;
}
#notifications_banner{
  font-weight: 900;
  background: #dfa941;
  display:none;
}
.banner-content{
  font-size: 14px;
  text-align: center;
  width: 100%;
  color: #fff;
  -webkit-transition: .1s;
  -moz-transition: .1s;
  transition: .1s;
  position: relative;
  line-height: 30px;
  padding: .5rem 2.5rem;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
div .noactive-font span, .noactive-font b{
  color: #8e8d8d !important;
}
.leaflet-div-icon .hovered-marker{
  width: 21px !important;
  height: 21px !important;
}
.hidden-span,.hidden-img{
  display: none;
}
.datepicker-i{
  cursor:pointer;
}
.leaflet-popup-content{
  width: 234px;
  height: 76px;
}

/***** Account Settings Style *****/

.account-settings, .team{
  margin-top: 76px;
  overflow: auto;
  height:calc(100vh - 76px);
}
.account-settings #name,
.account-settings #workweek-settings,
.account-settings #overtime-settings, .account-settings #payroll-timesheets{
  border-bottom: 1px solid #efefef;
  margin-bottom: 21px;
  float: left;
  width: 100%;
}
#workweek-settings .field-title {
  margin-bottom: 13px;
}
.account-settings #monthly, .account-settings #weekly, .account-settings #semi-monthly {
  display: none;
}
.account-settings #overtime-settings label {
  margin-bottom: 10px;
}
.account-settings #payroll-timesheets .form-group.email-payroll label {
  margin-bottom: 7px;
}
.account-settings #overtime-settings .form-group,  .account-settings #payroll-timesheets .form-group.email-payroll {
  margin-bottom: 7px;
}
.account-settings #name #name{
  margin-bottom: 0;
}
.account-settings .head-title{
  margin-bottom: 24px;
}
.account-settings .form-wrapper{
  width: 100%;
  float: left;
  margin-top: 60px;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  padding: 27px 120px;
}
.account-settings .form-group{
  width: 224px;
  margin-bottom: 25px;
  margin-right: 23px;
}
.account-settings .form-group:last-child{
  margin-right: 0;
}
.account-settings .filter-list{
  margin-left: 0;
  width: 100%;
}
.account-settings .filter-list.open .dropdown-toggle{
  border-color: #0cd4d2;
}
.account-settings .filter-list div{
  width: 100%;
  height: 50px;
  padding: 0 18px;
}
.account-settings .filter-list i{
  right: 18px;
}
.account-settings .filter-list div span{
  line-height: 50px;
  font-size: 17px;
  text-transform: capitalize;
  color: #262626;
}
.account-settings #weekly .filter-list div {
  line-height: 50px;
  font-size: 17px;
  text-transform: capitalize;
  color: #262626;
}
.account-settings #weekly .filter-list div span  {
  padding-left: 5px;
}
.account-settings .filter-list ul{
  width: 100%;
}
.account-settings .filter-list ul li{
  padding: 0 18px;
  border-top: 1px solid #efefef;
  font-size: 14px;
}
.account-settings .filter-list ul li:first-child {
  border-top: 0;
}
.account-settings .filter-list ul li:first-child{
  padding-left: 18px;
}
.field-title{
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  margin-right: 0;
  letter-spacing: -0.025em;
}
.map-layout .account-settings .field-title {
  margin-top: 0;
}
#overtime-settings label div, #payroll-timesheets label div{
  margin-right: 5px;
  vertical-align: top;
}
.account-settings #payroll-timesheets .form-group.email-payroll {
  width: 492px;
}
#overtime-settings label .title, #payroll-timesheets label .title{
  font-size: 16px;
  line-height: 14px;
  color: #262626;
  text-transform: capitalize;
  margin-left: 2px;
}
#overtime-settings .icheckbox_minimal, #payroll-timesheets .icheckbox_minimal{
  width: 14px;
  height: 14px;
  background-size: cover;
}
#overtime-settings .paragraph, #payroll-timesheets .paragraph{
  font-size: 14px;
  line-height: 18px;
  color: #8e8d8d;
  float: left;
  width: 100%;
  padding-left: 21px;
  margin-top: 3px;
}
.spinner {
  float: left;
  clear: left;
  width: 100%;
  height: 50px;
  border: 1px solid #e1e1e1;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 0 32px 0 18px;
  position: relative;
}
.spinner.blue {
  border-color:#0cd4d2;
}
.spinner input{
  border: 0;
  box-shadow: none;
  float: left;
  border: 0!important;
  padding: 0!important;
  line-height: 48px;
  height: 48px;
}
.spinner .timeEntry-control{
  background-image: url('../images/spinner-image.png')!important;
  background-position: 0 0!important;
  -webkit-background-size: contain!important;
  background-size: contain!important;
  position: absolute;
  top: 14px;
  right: 18px;
  cursor: pointer;
}

/* ------ Nanobar Plugin Reset ---------- */

.nanobar {
  top: 76px;
}

/* ------- Verify Email Style --------- */

.body-wrapper .content {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.body-wrapper  img{
  width: 90px;
  margin-bottom: 22px;
}
.body-wrapper .content p {
  font-size: 30px;
  color: #262626;
  margin: 0;
  text-align: center;
}
.body-wrapper .welcome-page-inner {
  text-align: center;
}
.body-wrapper .content p:last-child {
  font-size: 22px;
}

/*-------404 Page Style---------*/

.body-404 .content {
  float: left;
}
.body-404 .inner-body {
  float: left;
  display: flex;
  min-width: 100vw;
  min-height: 100vh;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.body-404 h1 {
  color: #262626;
  font-size: 122px;
  font-weight: 300;
  line-height: 96px;
  margin-bottom: 25px;
  margin-top: 0;
}
.body-404 h2 {
  font-size: 40px;
  font-weight: 400;
  margin: 0;
}
.body-404 p {
  font-size: 20px;
  font-weight: 300;
  margin-top: 6px;
}
.body-404 a {
  width: 122px;
  display: inline-block;
  height: 41px;
  padding-bottom: 0;
  line-height: 41px;
  background: #0cd4d2;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #0cd4d2;
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
  text-transform: uppercase;
  transition: none;
}
.body-404 a i {
  position: relative;
}
.body-404 a:hover i {
  left: -3px;
}
.body-404 a:hover {
  background: #09acaa;
  border-color: #09acaa;
}

/***** Account Settings Style *****/

.read-only-div{
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  height: 47px;
  line-height: 47px;
  color: #b1a9a9;
  font-size: 18px;
  background: #fafafa;
  margin-bottom: 19px;
}
.login-container #signupForm input[type='password'] {
  margin-bottom: 19px;
}

/*------ Billing Page Style------*/

.tab-content>.tab-pane {
  padding: 0;
}
aside.payment-methods li {
  padding: 0;
}
aside.payment-methods li:first-child {
  border-top: 1px solid #dbdbdb;
}
aside.payment-methods li a{
  padding-left: 13px;
  line-height: 67px;
  height: 67px;
  display: inline-block;
  width: 100%;
}
.billing .body-container {
  margin-top: 60px;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid #dbdbdb;
  background-color: #fff;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position: relative;
  min-height: calc(100vh - 228px);
  margin-left: 270px;
}
.tab-content h3 {
  margin-top: 0;
  margin-bottom: 24px;
}
.tab-content  .font-20 {
  font-size: 18px;
}
.tab-content  b {
  font-weight: 600;
}
.tab-content h4 {
  margin-top: 24px;
  margin-bottom: 5px;
}
.tab-content .grey-font {
  color: #8e8d8d;
  font-size: 16px;
}
.tab-content .grey-font b {
  color: #262626;
}
.tab-content .buttons {
  margin-top: 25px;
}
.billing .buttons button {
  font-size: 16px;
  font-weight: 400;
  line-height: 50px;
  border: 0;
  float: left;
  margin-left: 25px;
  padding: 0;
  text-align: center;
  transition: none;
  border-radius: 4px;
}
.billing .buttons .add {
  background: #0cd4d2;
  color: #fff;
  width: 177px;
  text-transform: uppercase;
  margin: 0;
}
.billing .buttons .add:hover {
  background: #09acaa;
}
.tab-content .buttons .cancel:hover {
  background: #dbdbdb;
  color: #262626;
}
.tab-content .buttons .cancel {
  border: 1px solid #dbdbdb;
  color: #8e8d8d;
  width: 200px;
  line-height: 48px;
  background: #fff;
}
.billing .float {
  float: left;
  width: 100%;
}
.billing hr {
  margin: 25px 0 20px 0;
  border-top: 1px solid #f1f1f1;
}
.billing p.header {
  font-size: 16px;
  margin-bottom: 13px;
}
.billing .half-width {
  width: 50%;
  float: left;
  position: relative;
}
.half-width b {
  margin-bottom: 3px;
  display: inline-block;
}
.half-width .grey-font {
  font-size: 14px;
}
.half-width .grey-font b {
  color: #8e8d8d;
}
.billing a.change {
  color: #0cd4d2;
  font-weight: 600;
  text-decoration: underline;
  font-size: 14px;
}
.card-holder {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}
.card-holder img {
  width: 36px;
  float: left;
  margin-top: 7px;
}
.card-holder .info {
  float: left;
  margin-left: 15px;
}
.card-holder .user-name {
  font-weight: 600;
  margin-bottom: 3px;
}
.card-holder .ending-date {
  font-size: 16px;
  margin-bottom: 3px;
}
.card-holder .desc {
  font-size: 12px;
  color: #8e8d8d;
  margin-bottom: 0;
}
.billing #methods .buttons {
  margin-top: 7px;
}
.card-holder .card-in-use-btn {
  display: inline-block;
  width: 110px;
  height: 25px;
  background: #262626;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  border-radius: 4px;
  vertical-align: middle;
}
.card-holder .close-btn {
  display: inline-block;
  width: 28px;
  height: 25px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
  font-size: 14px;
  color: #8e8d8d;
  margin-left: 6px;
  transition: none;
}
.card-holder.card-in-use {

}
.card-holder .right-btn {
  float: right;
}
.card-holder .use-this-card-btn {
  background: #dbdbdb;
  color: #262626;
}
.card-holder.use-this-card .close-btn:hover {
  background: #dbdbdb;
  border-color: #dbdbdb;
  color: #262626;
}
.card-holder .close-btn:hover {
  background: #262626;
  border-color: #262626;
  color: #fff;
}
#invoices .charge, #invoices .status {
  width: 80px;
}
#invoices .title .charge {
  width: 76px;
}
.body-container #invoices .date {
  width: 106px;
}
#invoices .title .invoice-date {
  width: 103px;
}
#invoices .description {
  width: calc(100% - 266px);
}
#invoices .title .description {
  width: calc(100% - 270px);
}
#invoices ul li .date {
  font-size: 14px;
}
#invoices ul li .description {
  font-size: 12px;
}
#invoices ul li .download-icon {
  width: 14px;
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translateY(-50%);
}
#invoices .download-icon {
  background: url("../images/download-icon.svg");
  background-position: center center;
  background-size: 14px;
  background-repeat: no-repeat;
  text-indent: -99999px;
  opacity: 0;
  transition: none;
}
#invoices .download-icon:hover {
  background: url("../images/black-download-icon.svg");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center center;
}
#invoices ul .paid-failed .status {
  color: #f14700;
}
#invoices ul li:hover {
  background: #fafafa;
}
#invoices ul li:hover .download-icon {
  opacity: 1;
}
.body-container #invoices ul {
  border: 0;
  padding: 0 19px;
}
.body-container #invoices h3 {
  padding-left: 33px;
  margin-bottom: 11px;
}
.body-container #invoices .title {
  border-left: 0;
  border-right: 0;
  height: auto;
  border-bottom: 1px solid #efefef;
  border-top: 1px solid #efefef;
  padding: 0 34px;
}
.billing #plan, .billing #methods {
  padding: 29px 34px;
}
#invoices {
  padding-top: 29px;
}
#invoices .title span {
  font-size: 11px;
  color: #8e8d8d;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
}
/*----- Billing Steps -----*/
.billing-steps .body-container {
  margin-left: 0;
  width: 100%;
  padding: 29px 120px;
}
.billing-steps .billing-plan {
  float: left;
  width: 100%;
  padding: 9px 15px;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  margin-bottom: 15px;
}
.billing-steps .billing-plan:hover {
  border-color: #0cd4d2;
}
.billing-steps .billing-plan.active {
  border-color: #0cd4d2;
}
.billing-steps .billing-plan label {
  float: left;
}
.billing-steps .billing-plan .plan-info {
  float: left;
  margin-left: 13px;
}
.billing-steps .font-20 {
  font-size: 18px;
}
.billing-steps  b {
  font-weight: 600;
}
.billing-steps .icheckbox_minimal {
  width: 13px;
  height: 13px;
  border-radius: 2px;
}
.billing-steps .billing-plan .plan-name {
  font-size: 16px;
  margin-bottom: 5px;
}
.billing-steps .billing-plan .grey-font {
  font-size: 16px;
  color: #8e8d8d;
  margin-bottom: 0;
}
.billing-steps .payment-value {
  float: right;
}
.billing-steps .billing-plan .payment-value p.grey-font {
  font-size: 12px;
}
.left.payment-methods {
  margin-top: 60px;
}
.billing-steps .payment-value .value {
  font-size: 30px;
  font-weight: 600 !important;
  color: #0cd4d2;
  margin: 0;
  line-height: 33px;
}
.billing-steps .more-info, .billing-steps .less-info {
  font-weight: 600;
  color: #0cd4d2;
  text-decoration: underline;
}
.less-info {
  display: none;
}
.billing-steps h4 {
  font-size: 24px;
  color: #8e8d8d;
  margin-bottom: 8px;
}
.billing-steps h4 b {
  color: #262626;
  font-weight: 400;
}
.billing-steps .using-desc {
  margin-bottom: 30px;
}
.billing-steps .box{
  min-width: 201px;
  border: 1px solid #dbdbdb;
  float: left;
  padding: 17px 15px;
  font-size: 18px;
  border-radius: 4px;
}
.billing#step1 hr {
  margin: 11px 0 22px 0;
}
.user-plan span {
  float: left;
  vertical-align: middle;
  display: inline-block;
  margin: 14px 23px;
  font-weight: 600;
  color: #8e8d8d;
  font-size: 20px;
}
.billing .manage-users {
  margin-top: 2px;
}
.billing .manage-users span {
  float: right;
  color: #8e8d8d;
  padding-right: 28px;
}
.billing .manage-users a {
  color: #0cd4d2;
  padding-left: 16px;
  transition: none;
}
.billing .manage-users a:hover {
  color: #262626;
  text-decoration: underline;
}
.billing .manage-users a:focus {
  outline: 0;
}
.billing-steps#step1 .buttons {
  float: right;
  margin-top: 43px;
}
.billing-steps#step1 .buttons button {
  font-weight: 600;
  text-transform: capitalize;
  font-size: 20px;
  min-width: 201px;
}
.billing-steps .user-plan h4 {
  margin-bottom: 20px;
  margin-top: 0;
}
.billing .input {
  margin-bottom: 20px;
}
.billing .no-margin-b{
  margin-bottom: 0;
}
.billing .half-width {
  width: 50%;
}
.billing .one-third-width {
  width: 33.33%;
}
.billing .two-third-width {
  width: 66.66%;
}
.billing .padding-r-10 {
  padding-right: 10px;
}
.billing .padding-10 {
  padding: 0 10px;
}
.billing .padding-l-10 {
  padding-left: 10px;
}
.billing .input input, .billing .input .dropdown-toggle {
  width: 100%;
  padding: 12px 16px;
  border-radius: 4px;
  outline: 0;
  border: 1px solid #dbdbdb;
  font-size: 16px;
  color: #262626;
}
.billing .input input:focus {
  border-color: #0cd4d2 !important;
}
.billing .input .dropdown-toggle i {
  float: right;
  vertical-align: middle;
  margin-top: 4px;
}
.billing form label {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
}
.billing .dropdown-menu {
  position: absolute;
  z-index: 9;
  padding: 0;
  margin-top: 0;
  width: 229px;
  border-radius: 0;
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  border: 1px solid #efefef;
  min-width: 125px;
  max-height: 300px;
  overflow: auto;
}
.billing .dropdown-toggle {
  cursor: pointer;
  float: left;
}
.billing .dropdown-menu li {
  padding: 0 18px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  color: #8e8d8d;
  font-size: 11px;
  text-transform: uppercase;
}
.billing-steps.step2 h4 {
  margin-bottom: 27px;
}
.card-images  {
  float: right;
}
.card-images img {
  margin-left: 7px;
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}
.billing .input .dropdown-toggle span, .billing .input .dropdown-toggle i {
  color: #8e8d8d;
}
.billing-steps.step2 .font-20 {
  margin-top: 0;
}
.step2 .buttons {
  float: right;
  margin-top: 15px;
}
.step2 .buttons button {
  text-transform: capitalize;
}
.billing .inner-box {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  padding: 15px;
}
.billing .inner-box p {
  font-size: 14px;
  color: #8e8d8d;
}
.billing .inner-box p .font-20 {
  color: #262626;
}
.billing .inner-box .font-18 {
  font-size: 18px;
  margin-bottom: 1px;
}
.billing .inner-box  .margin-b-4 {
  margin-bottom: 4px;
}
.billing .inner-box .company-name, .billing .inner-box .card-name {
  margin-bottom: 7px;
}
.billing .inner-box .grey-font {
  line-height: 15px;
  max-width: 134px;
}
#hidden-paragraph {
  display: none;
  margin-bottom: 20px;
}
.card-name .change {
  margin-top: 15px;
  display: inline-block;
}
.step2 .buttons{
  width: 33.33%;
  padding-left: 10px;
  margin-top: 35px;
}
.step2#step2 .buttons {
  margin-top: 15px;
}
.step2#step2 .buttons button {
  text-transform: capitalize;
}
.step2 .buttons button.add {
  width: 100%;
  margin-bottom: 20px;
  font-weight: 600;
}
#step3 .buttons p, #timesheets-modal .buttons p {
  color: #8e8d8d;
  font-size: 11px;
}

/*-------- Billing Steps Modals Style -----------*/

#trialEnded p {
  font-size: 18px;
}
#trialEnded p b {
  font-weight: 600;
}
#trialEnded .form .action-buttons {
  width: 100%;
  margin-top: 15px;
}
#trialEnded .form .action-buttons button {
  width: 100%;
  margin: 0;
  font-size: 20px;
  text-transform: uppercase;
}
body #trialEnded.modal.in .modal-dialog .modal-content .modal-header h4 {
  font-weight: 600;
}
body #trialEnded.modal.in .modal-dialog .modal-content {
  padding: 63px;
}
body #manageActiveUsers.modal.in .modal-dialog .modal-content {
  padding: 0;
}
.body-container #manageActiveUsers ul {
  border-right: 0;
  border-left: 0;
  border-bottom: 0;
  max-height: 465px;
  overflow-y: auto;
  padding-bottom: 0;
  margin-bottom: 24px;
}
#newCompanySettings {
  overflow: hidden;
}
#newCompanySettings .action-buttons {
  width: 75%;
  text-align: right;
  float: left;
  padding-top: 0;
  margin: 0;
  position: fixed;
  bottom: 1px;
  background: #fff;
  height: 140px;
  padding-right: 1%;
  z-index: 999;
  left: 120px;
}
#newCompanySettings .action-buttons hr {
  border-top: 1px solid #efefef;
  float: left;
  width: 100%;
  margin: 25px 0;
}
#newCompanySettings .action-buttons button {
  float: right;
}
#emailsContainer::-webkit-scrollbar, #emailsContainerActivity::-webkit-scrollbar   {
  width: 8px;
}
#emailsContainer::-webkit-scrollbar-track, #emailsContainerActivity::-webkit-scrollbar-track {
  background: transparent;
}
#emailsContainer::-webkit-scrollbar-thumb,#emailsContainerActivity::-webkit-scrollbar-thumb {
  background: rgba(219,219,219,0.75);
  border-radius: 8px;
}
#emailsContainer::-webkit-scrollbar-thumb:hover, #emailsContainerActivity::-webkit-scrollbar-thumb:hover  {
  background: rgba(219,219,219,0.9);
}
#emailsContainer ul li{
  float: left;
  width: 100%;
}
#emailsContainer, #emailsContainerActivity {
  float: left;
  width: 102%;
  max-height: 385px;
  overflow: auto;
}
#inviteMember #emailsContainer {
  padding-right: 5px;
}
#newCompanySettings #step1 {
  float: left;
  width: 100%;
}
#newCompanySettings #step2, #step3{
  display:none;
}
#newCompanySettings #step1 .form-group.email {
  margin-right: 25px;
}
#newCompanySettings #step1 .form-group.email {
  width: 462px;
}
#newCompanySettings #step1 .field-title{
  margin-bottom: 11px;
  margin-top: 20px;
}
#newCompanySettings #step1 .form-group {
  margin-bottom: 15px;
}
#newCompanySettings #step1 li:last-child .form-group {
  margin-bottom: 10px;
}
#newCompanySettings #step1 ul{
  padding: 0;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
#newCompanySettings #step1 .add-more {
  float: left;
  width: 100%;
  text-align: left;
  margin-top: 4px;
}
#newCompanySettings .account-settings #payroll-timesheets {
  border-bottom: 0;
  margin-bottom: 2px;
}
#newCompanySettings #step3 .modal-body {
  margin-bottom: 27px;
}
body #newCompanySettings.modal.in .modal-dialog .modal-content h4 {
  font-size: 24px;
  margin-bottom: 22px;
  color: #8e8d8d;
}
#newCompanySettings .account-settings #step2  .form-group {
  margin-bottom: 4px;
}
body #newCompanySettings.modal.in .modal-dialog .modal-content h4 b {
  font-weight: 600;
  color: #262626;
}
#newCompanySettings #step2 #workweek-settings {
  /*margin-bottom: 21px;*/
  margin-bottom: 0;
  padding-bottom: 25px;
}
body #newCompanySettings.modal.in .modal-dialog .modal-content #step2 .modal-body  label {
  font-size: 14px;
  color: #262626;
  text-transform: none;
  margin-bottom: 9px;
}
body #newCompanySettings.modal.in .modal-dialog .modal-content #step2 .modal-body #workweek-settings label {
  margin-bottom: 9px;
}
#newCompanySettings #step2 #overtime-settings .field-title {
  margin-bottom: 16px;
}
#newCompanySettings #step3 .left-column, #newCompanySettings #timesheets-modal .left-column{
  float: left;
  width: 44%;
  margin-top: 86px;
}
#newCompanySettings #step3 .left-column {
  margin-top: 70px;
}
#newCompanySettings #step3 .right-column, #newCompanySettings #timesheets-modal .right-column {
  float: left;
  width: 56%;
  padding-left: 62px;
  margin-top: 13px;
}
#newCompanySettings #step3 hr, #newCompanySettings #timesheets-modal hr {
  border-top: 1px solid #efefef;
  float: left;
  margin-top: 28px;
  width: 100%;
}
#newCompanySettings #step2 #overtime-settings {
  /*margin-bottom: 21px;*/
  margin-bottom: 0;
}
#newCompanySettings #step2 #overtime-settings .form-group {
  margin-bottom: 11px;
}
#newCompanySettings #step2 .field-title {
  margin-bottom: 14px;
  margin-top: 20px;
}
#newCompanySettings .list-title p:first-child {
  float: left;
}
#newCompanySettings .list-title p:last-child {
  float: right;
  width: 224px;
}
#newCompanySettings .list-title p {
  margin-bottom: 5px;
}
#newCompanySettings #step3 a.app-store-btn, #newCompanySettings #timesheets-modal a.app-store-btn  {
  display: inline-block;
  background: url("../images/app-store-btn.jpg");
  margin-right: 3px;
}
#newCompanySettings #step3 a.google-play-btn, #newCompanySettings #timesheets-modal a.google-play-btn {
  display: inline-block;
  background: url("../images/google-play-btn.jpg");
}
#newCompanySettings #timesheets-modal .btn-group {
  margin-top: 35px;
}
#newCompanySettings #step3 .btn-group {
  margin-top: 45px;
}
#newCompanySettings #step3 .btn-group a, #newCompanySettings #timesheets-modal .btn-group a{
  min-width: 128px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  min-height: 44px;
  border-radius: 7px;
  text-indent: -99999px;
}
body #newCompanySettings.modal.in .modal-dialog .modal-content {
  padding: 28px 112px 140px 120px;
  padding-bottom: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 111px);
  position: relative;
}
body #newCompanySettings.modal.in .modal-dialog .modal-content #step2 {
  /*padding-bottom: 137px;*/
}
body #newCompanySettings.modal.in .modal-dialog {
  min-width: 963px;
}
#newCompanySettings #step3 .form .action-buttons button, #newCompanySettings #timesheets-modal .form .action-buttons button{
  margin: 0;
}
#newCompanySettings #step3 p, #newCompanySettings #timesheets-modal p {
  font-size: 14px;
  margin-top: 21px;
}
#newCompanySettings #step1 a.invite {
  display: inline-block;
  float: none;
  font-size: 14px;
  color: #0cd4d2;
  font-weight: 400;
  vertical-align: middle;
  position: relative;
}
#newCompanySettings #step1 a.invite:focus {
  outline: none;
}
.account-settings .filter-list ul {
  max-height: 173px;
  overflow: auto;
}
#newCompanySettings .account-settings {
  height: auto;
}
#newCompanySettings #step1 a.invite svg {
  width: 9px;
  vertical-align: middle;
  margin-top: -6px;
}
#newCompanySettings #step1 a.invite svg path  {
  fill: #0cd4d2;
}
.body-container #manageActiveUsers ul::-webkit-scrollbar,
body #newCompanySettings.modal.in .modal-dialog .modal-content::-webkit-scrollbar {
  background: transparent;
  width: 0;
  transition: width .3s ease;
}
.body-container #manageActiveUsers ul::-webkit-scrollbar,
body #newCompanySettings.modal.in .modal-dialog .modal-content::-webkit-scrollbar  {
  width: 8px;
}
.body-container #manageActiveUsers ul::-webkit-scrollbar-track,
body #newCompanySettings.modal.in .modal-dialog .modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.body-container #manageActiveUsers ul::-webkit-scrollbar-thumb,
body #newCompanySettings.modal.in .modal-dialog .modal-content::-webkit-scrollbar-thumb {
  background: rgba(219,219,219,0.75);
  border-radius: 8px;
}
.body-container #manageActiveUsers ul::-webkit-scrollbar-thumb:hover {
  background: rgba(219,219,219,0.9);
}
.body-container #manageActiveUsers ul li:hover {
  background-color: #fafafa;
}
body #manageActiveUsers.modal.in .modal-dialog .modal-content .modal-header {
  padding: 7px 84px;
  text-transform: uppercase;
  color: #8e8d8d;
  font-size: 11px;
  font-weight: 400;
}
body #manageActiveUsers .member-name {
  color: #262626;
}
body #manageActiveUsers .delete-member {
  width: 34px;
  height: 36px;
  float: left;
  background: url(../../images/delete-member-ico.svg) no-repeat center center;
  -webkit-background-size: 14px 16px;
  background-size: 14px 16px;
  margin: 15px 0;
  padding: 10px 10px;
}
body #manageActiveUsers .delete-member:hover {
  background: url(../../images/delete-member-ico-black.svg) no-repeat center center;
  -webkit-background-size: 14px 16px;
  background-size: 14px 16px;
}
body #manageActiveUsers .member {
  width: calc(100% - 40px);
}
body #manageActiveUsers .delete {
  width:40px;
}
body #manageActiveUsers .member-to-delete .delete {
  width: 112px;
}
body #manageActiveUsers .member-to-delete .delete a{
  background-image: none;
  height: auto;
  width: auto;
  line-height: 18px;
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 12px;
  margin: 19px 0;
}
body #manageActiveUsers .member-to-delete .delete .cancel-action {
  color: #8e8d8d;
}
body #manageActiveUsers .member-to-delete .delete-member {
  background-color: #262626;
  color: #fff;
}
body #manageActiveUsers .member-to-delete .member{
  width:calc(100% - 112px);
}
body #manageActiveUsers ul li:last-child {
  border-bottom: 1px solid #efefef;
}
body #manageActiveUsers.modal.in .modal-dialog {
  width: 384px;
}
body  #manageActiveUsers.modal.in .modal-dialog .modal-content .modal-body {
  padding-bottom: 24px;
}
#manageActiveUsers .action-buttons {
  margin-right: 24px;
}
#manageActiveUsers .action-buttons button{
  width: 150px;
  font-size: 20px;
}
body #changeCompanyInfo.modal.in .modal-dialog, body #changeCardInfo.modal.in .modal-dialog  {
  width: 960px;
}
body #changeCompanyInfo.modal.in label,  body #changeCardInfo.modal.in label {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 10px;
  text-transform: capitalize;
  color: #262626;
  width: auto;
  line-height: inherit;
}
body #changeCompanyInfo.modal.in .modal-dialog .modal-content,  body #changeCardInfo.modal.in .modal-dialog .modal-content {
  padding: 29px 120px;
}
body #changeCompanyInfo.modal.in .form .action-buttons,  body #changeCardInfo.modal.in  form .action-buttons {
  margin-top: 10px;
}
body #changeCompanyInfo.modal.in .form .action-buttons button,  body #changeCardInfo.modal.in  form .action-buttons button {
  margin: 0;
  width: 100%;
  font-size: 20px;
}
.billing .full-width {
  width: 100%;
}
.billing  a:focus {
  outline: 0;
}
body #changeCardInfo  .padding-r-10 {
  clear: both;
}
.my-name{
  color: #8e8d8d;
  font-size: 13px;
}
#manage-team .my-name {
  padding-left: 4px;
}
body.confirmation-page {
  min-height: 100vh;
  width: 100%;
}
.confirmation-page section {
  background: url(../images/map-bg.jpg);
  background-size: cover;
  min-height: inherit;
  width: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.confirmation-page h1 {
  font-size: 70px;
  font-weight: 400;
  margin-bottom: 0;
}
.confirmation-page p {
  font-size: 30px;
  font-weight: 300;
  line-height: 31px;
  margin-top: 16px;
}
.confirmation-page b {
  font-weight: 600;
}
.confirmation-page .logo img {
  width: 77px;
  transition: none;
}
.confirmation-page .right a {
  position: relative;
  width: 122px;
  display: inline-block;
  padding-bottom: 0;
  line-height: 41px;
  background: transparent;
  border-radius: 4px;
  text-align: center;
  border: 1px solid #fff;
  color: #fff;
  vertical-align: middle;
  text-transform: uppercase;
  margin-top: 3px;
}
.confirmation-page nav li a {
  font-size: 14px;
}
.confirmation-page nav .left {
  padding-left: 94px;
}
.confirmation-page nav .left a {
  padding-top: 4px;
  padding-bottom: 0;
  vertical-align: middle;
  margin-left: 45px;
}
.confirmation-page nav li:nth-child(2) a {
  margin-left: 0;
}

.confirmation-page footer {
  min-height: 62px;
}
.confirmation-page nav ul li a:hover {
  color: #0cd4d2;
}
.confirmation-page footer .copyright {
  position: relative;
  bottom: 0;
  top: 13px;
  float: left;
  left: 0;
  transform: none;
}
.confirmation-page footer .logo {
  cursor: default;
}
.confirmation-page footer nav, .confirmation-page footer .social-icons {
  margin-top: 6px;
}
.confirmation-page header nav ul li a {
  color: #262626;
}
.confirmation-page .right li:first-child a {
  background: #f8f8f8;
  border-color: #dbdbdb;
  color: #707070;
}
.confirmation-page .right li:first-child a:hover,  .confirmation-page .right li:first-child a:hover {
  background-color: #dbdbdb;
  border-color: #dbdbdb;
}
.confirmation-page nav .right img.icon-black {
  display: inline-block;
}
.confirmation-page nav .right img.icon-grey {
  display: none;
}
.confirmation-page .right img {
  width: 14px;
  margin-right: 5px;
  margin-top: -3px;
}
.confirmation-page header a:hover {
  text-decoration: none;
}
.confirmation-page section h1 {
  font-size: 70px;
  letter-spacing: -1px;
  margin-bottom: 41px;
}
.confirmation-page nav ul li:hover a:after {
  display: none;
}
.confirmation-page section p {
  font-size: 30px;
  letter-spacing: -1px;
  font-weight: 300;
  text-align: center;
  line-height: 36px;
}
.confirmation-page section p b {
  font-weight: 600;
}
.confirmation-page header nav .right li:last-child a {
  display: inline-block;
  margin-left: 11px;
  background-color: #0cd4d2;
  color: #fff;
  text-transform: uppercase;
  padding: 0;
  border: 1px solid #0cd4d2;
  margin-bottom: 0;
}
.confirmation-page header nav .right li:last-child a:hover {
  background-color: #09acaa;
  border-color: #09acaa;
  color: #fff !important;
}
.confirmation-page .container {
  width: 100%;
  padding: 0 133px;
}
.confirmation-page header {
  background: transparent;
  border-bottom: none;
}

/*-------------- Walkthrough Style -------------------*/

.walkthrough {
  position: absolute;
  right: 0;
  max-width: 300px;
  z-index: 999999;
  background: #fff;
  top: 75px;
  padding: 32px;
  border: 1px solid #efefef;
  border-radius: 4px;
  box-shadow: 3px 5px 14.25px 0.75px rgba(0, 0, 0, 0.1);
}
.walkthrough-overlay.walthrough-on{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.2);
}
.walkthrough h3 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin-top: 0;
  margin-bottom: 15px;
}
.walkthrough p {
  font-size: 12px;
  margin-bottom: 18px;
  line-height: 15px;
}
.walkthrough a {
  display: inline-block;
  width: 60px;
  height: 30px;
  line-height: 30px;
  background: #efefef;
  border-radius: 4px;
  color: #262626;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;
  margin-top: 2px;
  transition: none;
}
.walkthrough a:hover {
  background: #262626;
  color: #ffffff;
}
.walkthrough:before, .walkthrough:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.1);
  content: '';
}
.walkthrough:before {
  top: -10px;
  border-right: 10px solid transparent;
  border-left: 12px solid transparent;
  border-bottom: 10px solid #efefef;
}
body body .walkthrough:before {
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 6px solid #efefef;
}
.walkthrough:before {
  right: 36px;
}
.walkthrough:after {
  top: -10px;
  border-right: 9px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
}
.walkthrough:after {
  right: 37px;
}
.walkthrough-on.sync-content {
  min-width: inherit;
  border: 1px solid #b5e8c8;
  border-radius: 50px;
  padding: 5px 7px 5px 13px;
  margin-top: 0;
  float: right;
  position: absolute;
  right: 0;
  z-index: 99999;
  background: rgba(243,252,246, 0.8);
}
#walkthrough{
  display:none;
}
.invite-error-span{
  display:none;
  color:red;
}

/*------ Invite member modal -------*/

body .invite-members.modal.in .modal-dialog {
  width: 695px;
}
body .invite-members.modal.in .modal-dialog .modal-content .form-group {
  float: left;
  margin-bottom: 0;
}
body .invite-members.modal.in .modal-dialog .modal-content .form-group.email {
  width: 60%;
}
body .invite-members.modal.in .modal-dialog .modal-content .form-group.employee {
  width: 40%;
}
body .invite-members.modal.in .modal-dialog .modal-content input {
  width: 100% !important;
  float: left;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  font-size: 18px;
  line-height: 22px;
  padding: 13px 15px;
  margin-bottom: 14px;
}
body .invite-members.modal.in .modal-dialog .modal-content input:focus {
  border-color: #0cd4d2;
  outline: 0;
}
body .invite-members.modal.in .modal-dialog .filter-list div {
  height: 50px;
  line-height: 46px;
  width: 202px;
  padding: 0 15px;
}
body .invite-members.modal.in .modal-dialog .filter-list span {
  font-size: 18px;
  color: #262626;
}
body .invite-members.modal.in #emailsContainer {
  padding: 0;
  margin-bottom: 0;
}
body .invite-members.modal.in .modal-dialog .filter-list i {
  right: 15px;
}
#emailsContainerActivity {
  padding: 0;
}
body .invite-members.modal.in .modal-dialog .dropdown.open div {
  border:1px solid #0cd4d2;
}
body .invite-members.modal.in .modal-dialog .filter-list ul {
  width: 202px;
}
body .invite-members.modal.in .modal-dialog .filter-list ul li:first-child {
  padding-left: 10px;
}
body .invite-members.modal.in .modal-dialog .filter-list ul li {
  font-size: 14px;
}
body .invite-members.modal.in .modal-dialog #emailsContainer, body .invite-members.modal.in .modal-dialog #emailsContainerActivity {
  overflow: visible;
}
body .invite-members.modal.in .modal-dialog #emailsContainer > li{
  float: left;
  width: 100%;
}
body .invite-members.modal.in .modal-dialog  .modal-content  label.email {
  float: left;
  width: 66%;
  text-transform: capitalize;
}
body .invite-members.modal.in .modal-dialog  .modal-content  label.role {
  width: 34%;
  text-transform: capitalize;
}
body .invite-members.modal.in .modal-dialog .modal-content .modal-header {
  margin-bottom: 8px;
}
body .invite-members.modal.in .modal-dialog .modal-content .modal-header h4 {
  float: left;
}
body .invite-members.modal.in .modal-dialog a.manage-team-view {
  display: inline-block;
  width: 110px;
  background: #efefef;
  height: 40px;
  line-height: 40px;
  color: #8e8d8d;
  text-align: center;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  transition: none;
  float: right;
}
body .invite-members.modal.in .modal-dialog a.manage-team-view:hover {
  background-color: #dbdbdb;
  border-color: #dbdbdb;
}
.no-members-filter {
  font-size: 15px;
  font-weight: 400;
  color: #262626;
  padding-left: 61px;
  margin-bottom: 11px;
  margin-top: 16px;
}
.no-members-filter b {
  font-weight: 600;
}


.team .users-table{
  max-width:100%;
}

#companies-list a{
  color:inherit;
}

.fa-sort-asc.sort-arrow{
  position: relative;
  top: 2px;
  left: 8px;
}

.fa-sort-desc.sort-arrow{
  position: relative;
  top: -2px;
  left: 8px;
}

/* ------ Media Queries -------- */

@media only screen and (min-device-width: 994px) and (max-width: 1200px)  {

}
@media only screen and (min-device-width: 768px) and (max-width: 994px)  {

}
/* -------------- iPad -------------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {

}
/* -------------- iPad -------------- */
@media only screen and (max-width: 768px) {
  body.login-body.sign-up{
    overflow: auto;
  }
  body.login-body.sign-up .login-wrapper{
    height: auto;
  }
  .login-container.signup-container {
    padding: 30px 20px;
    width: 100%;
    top: auto;
    transform: none;
    left: auto;
    max-width: 100%;
    min-height: 100vh;
  }
  .login-container{
    width: 100%;
    padding: 40px 20px 60px;
  }
  .login-wrapper .signup{
    width: 90%;
  }
  .login-wrapper .signup p{
    width: 100%;
    margin-right: 0;
    text-align: center;
  }
  .login-wrapper .signup a{
    float: none;
    margin: 0 auto;
    display: inline-block;
  }
  .confirmation-page h1{
    font-size: 27px;
    line-height: 31px;
    margin-top: 0;
  }
  .confirmation-page p{
    font-size: 18px;
    line-height: 22px;
    margin-top: 25px;
    margin-bottom: 0;
  }
  .alertify-logs{
    min-width: 90%;
    left: 5%;
    z-index: -1;
  }
  body .modal.in .modal-dialog{
    max-width: 100%;
  }
  body .modal.in .modal-dialog .modal-content{
    padding: 40px 20px;
    width: calc(100% - 20px);
    margin: 0 10px;
  }
  .form .action-buttons{
    width: 100%;
  }
  .form .action-buttons button.submit{
    width: calc(100% - 137px);
  }
  .alertify-log{
    left: -100%
  }

  /* ------ Header -------- */

  .confirmation-page .navbar-toggle span{
    background: #000;
  }
  .confirmation-page .row {
    margin: 0;
  }
  .confirmation-page .container {
    padding: 0 30px;
  }
  .navbar-toggle {
    padding: 9px 16px;
    margin-top: 29px;
    z-index: 99;
    margin-right: 0;
  }
  .navbar-toggle .icon-bar {
    display: block;
    position: absolute;
    width: 100%;
    background-color: #fff;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    padding: 0 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  .navbar-toggle .icon-bar:first-child {
    top: 0;
  }
  .navbar-toggle .icon-bar:nth-child(2) {
    top: 8px;
    margin-top: 0;
  }
  .navbar-toggle .icon-bar:last-child {
    top: 16px;
    margin-top: 0;
  }
  .navbar-toggle.open .icon-bar:nth-child(1) {
    top: 8px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .navbar-toggle.open .icon-bar:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  .navbar-toggle.open .icon-bar:nth-child(3) {
    top: 8px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .hidden-header .navbar-toggle .icon-bar {
    background-color: #262626;
  }
  nav .hamburger-menu {
    width: 100%;
    position: absolute;
    left: 0;
    margin: 0;
    padding: 0;
    top:0;
    opacity: 0;
    padding-left: 0 !important;
    background-color: #fff;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transition: transform 0.15s, opacity 0.15s;
    -moz-transition: transform 0.15s, opacity 0.15s;
    transition: transform 0.15s, opacity 0.15s ;
  }
  nav .hamburger-menu.collapse.in {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    visibility: visible;
  }
  .navbar-toggle.open .icon-bar:nth-child(3) {
    top: 8px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  nav .hamburger-menu li {
    display: block;
    float: none;
    line-height: 31px;
    margin: 0 0 40px 0;
    padding-left: 30px;
  }
  nav .hamburger-menu li:first-child {
    position: absolute;
    margin-top: 16px;
  }
  nav .hamburger-menu li:nth-child(2) {
    margin-top: 72px;
    border-top: 1px solid #dbdbdb;
  }
  nav .hamburger-menu li:first-child img {
    width: 77px;
    display: block;
  }
  .confirmation-page nav .left {
    padding: 0 !important;
    width: 100%;
  }
  nav .hamburger-menu li:nth-child(2) a {
    padding-top: 32px;
  }
  .confirmation-page nav .left a {
    margin-left: 0;
  }
  .navbar-collapse ul li a {
    font-size: 16px;
  }
  .confirmation-page .right {
    display: none;
  }
  .mobile-btn {
    text-align: center;
    margin-bottom: 34px !important;
    padding-left: 0 !important;
  }
  .mobile-btn a {
    position: relative;
    width: 42.3%;
    display: inline-block;
    height: 55px;
    line-height: 55px;
    border-radius: 4px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    margin-top: 3px;
    padding: 0 !important;
  }
  li a.login-mobile {
    border: 1px solid #dbdbdb;
    background: #f8f8f8;
    color: #707070;
  }
  li a.sign-up-mobile {
    background-color: #0cd4d2;
    color: #fff !important;
    border: 1px solid #0cd4d2;
  }
  .login-mobile a img {
    width: 14px;
    margin-bottom: 5px;
  }
  .confirmation-page section h1 {
    padding: 0 15px;
    font-size: 41px;
    line-height: 37px;
  }
  .confirmation-page section p {
    padding: 0 15px;
    line-height: 30px;
    margin-top: 0;
    font-size: 26px;
  }
}
@media only screen and (max-width: 480px) {
  body.login-body.login{
    position: relative;
    height: 100vh;
  }
  .login-body.login .login-wrapper{
    height: auto;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
  }
  .login-body.login .login-container{
    width: 100%;
    padding: 40px 20px 60px;
    top: auto;
    bottom: 0;
    float: left;
    left: auto;
    transform: none;
  }
  .login-body.login .login-wrapper .signup{
    position: relative;
    margin-top: 10px;
    float: left;
    margin-bottom: 15px;
  }

  .buttons a:hover{
    background: transparent;
  }

}