@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R8aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqyR9aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq_p9aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R9aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq5Z9aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq3p6aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq0N6aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqyR6aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqw16aX8.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Uw-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvr6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCs16Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCu170w-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM70w-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvr70w-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCvC70w-.ttf) format('truetype');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/caveat/v17/WnznHAc5bAfYB2QRah7pcpNvOx-pjfJ9SII.ttf) format('truetype');
}
html {
  --text: #2d2d2a;
  --text-light: rgba(45, 45, 42, 0.7);
  --text-verylight: rgba(45, 45, 42, 0.5);
  --text-extralight: #eaeaea;
  --button-primary: #2e5266;
  --button-primary-text: #ffffff;
  --button-primary-disabled: #d9e0e3;
  --button-primary-disabled-text: #ffffff;
  --button-black: #2d2d2a;
  --checkbox-bg-off: rgba(76, 76, 71, 0.5);
  --checkbox-bg-on: #2e5266;
  --checkbox-toggle: #ffffff;
  --icons: #4c4c47;
  --bg: #f9f9f9;
  --bg0: rgba(249, 249, 249, 0);
  --tabs: #ffffff;
  --tab-icons: rgba(76, 76, 71, 0.8);
  --tab-icon-active: #d84727;
  --tab-marker-active: #d84727;
  --drawer-bg: #ffffff;
  --drawer-icons: rgba(76, 76, 71, 0.8);
  --drawer-divider: #eaeaea;
  --overlay-bg: #ffffff;
  --overlay-head: #eaeaea;
  --flow-bg: #ffffff;
  --flow-bg0: rgba(255, 255, 255, 0);
  --card-bg: rgba(255, 255, 255, 0.7);
  --card-tag-none: rgba(255, 255, 255, 0.5);
  --period-end-bg: #eaeaea;
  --pattern-day-bg: #eaeaea;
  --pattern-day-text: #2d2d2a;
  --pattern-day-selected-bg: #d84727;
  --pattern-day-selected-text: #ffffff;
  --calendar-day-today: rgba(46, 82, 102, 0.1);
  --calendar-day-selected: rgba(46, 82, 102, 0.25);
  --list-item-selected: rgba(46, 82, 102, 0.25);
}
[data-theme="dark"] {
  --text: rgba(234, 234, 234, 0.8);
  --text-light: rgba(234, 234, 234, 0.5);
  --text-verylight: rgba(234, 234, 234, 0.3);
  --text-extralight: #4c4c47;
  --button-primary: #d84727;
  --button-primary-text: #ffffff;
  --button-primary-disabled: #3b130b;
  --button-primary-disabled-text: rgba(255, 255, 255, 0.2);
  --button-black: #000000;
  --checkbox-bg-off: rgba(234, 234, 234, 0.2);
  --checkbox-bg-on: #2e5266;
  --checkbox-toggle: #ffffff;
  --icons: #eaeaea;
  --bg: #2d2d2a;
  --bg0: rgba(45, 45, 42, 0);
  --tabs: #000000;
  --tab-icons: rgba(234, 234, 234, 0.5);
  --tab-icon-active: rgba(255, 255, 255, 0.9);
  --tab-marker-active: rgba(255, 255, 255, 0.9);
  --drawer-bg: #000000;
  --drawer-icons: rgba(234, 234, 234, 0.7);
  --drawer-divider: rgba(234, 234, 234, 0.2);
  --overlay-bg: #2d2d2a;
  --overlay-head: #4c4c47;
  --flow-bg: #2d2d2a;
  --flow-bg0: rgba(45, 45, 42, 0);
  --card-bg: rgba(0, 0, 0, 0.7);
  --card-tag-none: rgba(0, 0, 0, 0.5);
  --period-end-bg: #000000;
  --pattern-day-bg: rgba(234, 234, 234, 0.2);
  --pattern-day-text: #2d2d2a;
  --pattern-day-selected-bg: #d84727;
  --pattern-day-selected-text: #ffffff;
  --calendar-day-today: #4c4c47;
  --calendar-day-selected: rgba(216, 71, 39, 0.25);
  --list-item-selected: rgba(216, 71, 39, 0.25);
}
html {
  font-family: 'Montserrat' !important;
}
body {
  background-color: #000000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
h5 {
  line-height: 1rem;
  margin: 20px 0 0 0;
}
.text.red {
  color: #D84727;
}
.button {
  cursor: pointer;
  user-select: none;
}
button {
  border-radius: 10px;
  outline: none;
  border: none;
  width: 100%;
  padding: 12px 0;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  color: #4C4C47;
}
button.primary {
  background-color: var(--button-primary);
  color: #FFFFFF;
}
button.secondary {
  background-color: var(--bg0);
  border: 1px solid var(--button-primary);
  color: var(--button-primary);
}
button.brand {
  background-color: #D84727;
  color: #FFFFFF;
}
button.black {
  background-color: var(--button-black);
  color: #FFFFFF;
}
button.disabled,
button:disabled {
  opacity: 0.5;
  cursor: default;
}
input[type="checkbox"] {
  position: relative;
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  /* Not removed via appearance */
  margin: 0;
  background-color: var(--checkbox-bg-off);
  width: 60px;
  height: 30px;
  border-radius: 15px;
  transition: background-color 0.2s;
}
input[type="checkbox"]::before {
  position: absolute;
  left: 2px;
  top: 2px;
  content: '';
  background-color: var(--checkbox-toggle);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: left 0.2s;
}
input[type="checkbox"]:checked {
  background-color: #D84727;
}
input[type="checkbox"]:checked::before {
  left: 32px;
}
.field {
  position: relative;
  border-bottom: 1px solid var(--text-extralight);
}
.field label {
  color: var(--text-verylight);
  position: absolute;
  pointer-events: none;
  top: 14px;
  transition: 0.2s ease all;
}
.field input,
.field textarea {
  -webkit-appearance: none;
  width: 100%;
  font-family: 'Montserrat';
  box-sizing: border-box;
  padding: 22px 0 8px 0;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text);
  background: none;
  min-height: 50px;
  text-align: left;
}
.field input::-webkit-date-and-time-value,
.field textarea::-webkit-date-and-time-value {
  text-align: left;
}
.field input::-webkit-calendar-picker-indicator,
.field textarea::-webkit-calendar-picker-indicator {
  display: none !important;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-verylight);
}
.field input:disabled,
.field textarea:disabled {
  color: var(--text-verylight);
}
.field textarea {
  resize: vertical;
  height: 7rem;
}
.field.focused label {
  color: #D84727;
  top: 6px;
  font-size: 11px;
}
.field.filled label {
  top: 6px;
  font-size: 11px;
}
.field select {
  -webkit-appearance: none;
  width: 100%;
  font-family: 'Montserrat';
  box-sizing: border-box;
  padding: 22px 0 8px 0;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text);
  background: none;
  min-height: 50px;
  text-align: left;
}
.help {
  font-size: 14px;
  color: rgba(45, 45, 42, 0.5);
  color: var(--text-verylight);
}
.margin.top.five {
  margin-top: 5px;
}
.margin.top.ten {
  margin-top: 10px;
}
.margin.top.twenty {
  margin-top: 20px;
}
.margin.top.fourty {
  margin-top: 40px;
}
.margin.bottom.five {
  margin-bottom: 5px;
}
.margin.bottom.ten {
  margin-bottom: 10px;
}
.margin.bottom.twenty {
  margin-bottom: 20px;
}
.margin.bottom.fourty {
  margin-bottom: 40px;
}
.margin.left.five {
  margin-left: 5px;
}
.margin.left.ten {
  margin-left: 10px;
}
.margin.left.twenty {
  margin-left: 20px;
}
.margin.left.fourty {
  margin-left: 40px;
}
.margin.right.five {
  margin-right: 5px;
}
.margin.right.ten {
  margin-right: 10px;
}
.margin.right.twenty {
  margin-right: 20px;
}
.margin.right.fourty {
  margin-right: 40px;
}
.bg {
  background-image: var(--bg-image);
  height: 650px;
  height: calc(100vh - 80px);
  margin-top: -650px;
  margin-top: calc(-100vh + 80px);
  width: 100vw;
  background-size: cover;
  background-position: center;
  position: sticky;
  top: 0;
}
.bg::before {
  content: '';
  position: absolute;
  top: 0;
  width: 100vw;
  height: 650px;
  height: calc(100vh - 80px);
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(5px) opacity(1);
  backdrop-filter: blur(5px) opacity(1);
}
.bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 200px;
  background-image: linear-gradient(var(--bg0), var(--bg));
}
#start {
  overflow-y: auto;
  height: 100vh;
  background-color: var(--bg);
}
#start .contents {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  padding: 0 20px;
}
#start .contents .logo {
  width: 200px;
  height: auto;
}
#start .contents #login-form {
  margin-top: 40px;
  width: 100%;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
#start .contents #login-form input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  font-family: 'Montserrat';
  color: #FFFFFF;
  transition: background-color 0.2s, color 0.2s;
}
#start .contents #login-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#start .contents #login-form input:focus {
  background-color: rgba(255, 255, 255, 0.7);
  color: #2D2D2A;
}
#start .contents #login-form input:focus::placeholder {
  color: rgba(45, 45, 42, 0.5);
}
#start .contents #login-form #login {
  border-radius: 5px;
  margin-top: 20px;
}
#start .contents #login-form #forgot {
  margin-top: 20px;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
}
#start .contents #signup {
  border-radius: 5px;
  margin-top: 40px;
}
#start #version {
  position: fixed;
  text-align: center;
  width: 100%;
  bottom: 40px;
  color: var(--text-verylight);
  font-size: 11px;
}
#signup-account {
  display: none;
  overflow-y: auto;
  height: 100vh;
  background-color: var(--bg);
}
#signup-account .contents {
  padding: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#signup-account .contents #card-nav {
  width: 100%;
  margin: 40px 0 0 0;
  display: flex;
  justify-content: space-between;
}
#signup-account .contents #card-nav a {
  cursor: pointer;
  color: var(--card-bg);
  color: #FFFFFF;
  padding: 10px;
  font-size: 14px;
  padding: 20px;
  user-select: none;
}
#signup-account .contents #card-nav a i {
  margin: 0 5px;
}
#signup-account .contents .signup-cards {
  padding: 0 20px;
}
#signup-account .contents .signup-cards .card {
  left: 0;
  box-sizing: border-box;
  width: calc(100vw - 40px);
  margin: 0 20px;
  position: absolute;
  padding: 20px;
  background-color: var(--card-bg);
  border-radius: 15px;
  color: var(--text);
  transition: left 0.2s;
}
#signup-account .contents .signup-cards .card.next {
  left: 100vw;
}
#signup-account .contents .signup-cards .card.future {
  left: 100vw;
}
#signup-account .contents .signup-cards .card.previous {
  left: -100vw;
}
#signup-account .contents .signup-cards .card.history {
  left: -100vw;
}
#signup-account .contents .signup-cards .card .icon {
  text-align: center;
  font-size: 32px;
  color: var(--text-light);
}
#signup-account .contents .signup-cards .card .title {
  text-align: center;
  border-bottom: 1px solid var(--text-light);
  padding: 5px 0 20px 0;
  font-size: 16px;
  font-weight: bold;
}
#signup-account .contents .signup-cards .card .description {
  font-size: 14px;
}
#signup-account .contents .signup-cards .card .form .field .password-toggle {
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 16px;
  color: var(--button-primary);
}
#signup-account .contents .signup-cards .card .actions {
  margin-top: 20px;
}
#signup-account .contents #signup-form {
  margin-top: 40px;
  width: 100%;
  padding-bottom: 40px;
}
#signup-account .contents #signup-form input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px 20px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  font-family: 'Montserrat';
  color: #FFFFFF;
  transition: background-color 0.2s, color 0.2s;
}
#signup-account .contents #signup-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#signup-account .contents #signup-form input:focus {
  background-color: rgba(255, 255, 255, 0.7);
  color: #2D2D2A;
}
#signup-account .contents #signup-form input:focus::placeholder {
  color: rgba(45, 45, 42, 0.5);
}
#signup-account .contents #signup-form #create-account {
  margin-top: 20px;
}
#app {
  display: none;
  position: relative;
  background-color: var(--bg);
  overflow-y: auto;
  height: 100vh;
  border-radius: 0;
  transition: transform 0.3s, border-radius 0.3s;
}
#app.background {
  transform: scale(0.88);
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
#app::after {
  content: '';
  -webkit-backdrop-filter: blur(5px) opacity(0);
  backdrop-filter: blur(5px) opacity(0);
  transition: backdrop-filter 0.3s;
}
#app.blur::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(5px) opacity(1);
  backdrop-filter: blur(5px) opacity(1);
  z-index: 2;
}
#app #change-bg input {
  display: none;
}
#app #stats {
  position: relative;
  box-sizing: border-box;
  color: #2D2D2A;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
  margin: 30px 10px 0 10px;
}
#app #stats .stat {
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
  width: calc(50% - 10px);
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.7);
}
#app #stats .stat .label {
  font-size: 11px;
  margin-top: 5px;
}
#app #stats .stat .value {
  font-size: 24px;
  font-weight: bold;
}
#app #periods,
#app #grouped-tasks {
  position: relative;
  padding: 20px 0 80vh 0;
}
#app #periods .period,
#app #grouped-tasks .period {
  padding-top: 0px;
}
#app #periods .period .card,
#app #grouped-tasks .period .card {
  position: relative;
  box-sizing: border-box;
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: calc(100vw - 20px);
  border-radius: 15px;
  margin: 20px 10px;
  transition: left 0.3s, right 0.3s, transform 0.3s;
  left: 0;
}
#app #periods .period .card .tag,
#app #grouped-tasks .period .card .tag {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: 0 15px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
#app #periods .period .card .tag::after,
#app #grouped-tasks .period .card .tag::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-color: transparent transparent #FFFFFF transparent;
  left: 0;
  bottom: 0;
  position: absolute;
}
#app #periods .period .card .tag::before,
#app #grouped-tasks .period .card .tag::before {
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  color: #FFFFFF;
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 14px;
}
#app #periods .period .card .tag.info::before,
#app #grouped-tasks .period .card .tag.info::before {
  content: '\f05a';
}
#app #periods .period .card .tag.timesheet::before,
#app #grouped-tasks .period .card .tag.timesheet::before {
  content: '\f2f2';
}
#app #periods .period .card .tag.leave::before,
#app #grouped-tasks .period .card .tag.leave::before {
  content: '\f185';
}
#app #periods .period .card .tag.birthday::before,
#app #grouped-tasks .period .card .tag.birthday::before {
  content: '\f1fd';
}
#app #periods .period .card .tag.employee::before,
#app #grouped-tasks .period .card .tag.employee::before {
  content: '\f4fe';
  content: '\f013';
  content: '\f0c0';
}
#app #periods .period .card .tag.company::before,
#app #grouped-tasks .period .card .tag.company::before {
  content: '\f1ad';
}
#app #periods .period .card .tag.setup::before,
#app #grouped-tasks .period .card .tag.setup::before {
  content: '\f013';
}
#app #periods .period .card .tag.none,
#app #grouped-tasks .period .card .tag.none {
  background-color: var(--card-tag-none);
}
#app #periods .period .card .tag.none::before,
#app #grouped-tasks .period .card .tag.none::before {
  color: var(--text-light);
}
#app #periods .period .card .tag.low,
#app #grouped-tasks .period .card .tag.low {
  background-color: #8EA604;
}
#app #periods .period .card .tag.medium,
#app #grouped-tasks .period .card .tag.medium {
  background-color: #2E5266;
}
#app #periods .period .card .tag.high,
#app #grouped-tasks .period .card .tag.high {
  background-color: #D84727;
}
#app #periods .period .card .tag.critical,
#app #grouped-tasks .period .card .tag.critical {
  background-color: #2D2D2A;
}
#app #periods .period .card .body,
#app #grouped-tasks .period .card .body {
  padding: 20px 20px 10px 20px;
}
#app #periods .period .card .avatar,
#app #grouped-tasks .period .card .avatar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
#app #periods .period .card .avatar img,
#app #grouped-tasks .period .card .avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
#app #periods .period .card .avatar .name,
#app #grouped-tasks .period .card .avatar .name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}
#app #periods .period .card .title,
#app #grouped-tasks .period .card .title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
  display: flex;
  align-items: center;
}
#app #periods .period .card .title i,
#app #grouped-tasks .period .card .title i {
  margin-right: 10px;
  font-size: 24px;
  color: var(--icons);
}
#app #periods .period .card .content,
#app #grouped-tasks .period .card .content {
  font-size: 14px;
  color: var(--text);
}
#app #periods .period .card .timesheet-details,
#app #grouped-tasks .period .card .timesheet-details {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: var(--text);
}
#app #periods .period .card .timesheet-details .stat,
#app #grouped-tasks .period .card .timesheet-details .stat {
  text-align: center;
  margin-bottom: 10px;
  width: 50%;
}
#app #periods .period .card .timesheet-details .stat .value,
#app #grouped-tasks .period .card .timesheet-details .stat .value {
  font-weight: bold;
  font-size: 22px;
}
#app #periods .period .card .timesheet-details .stat .label,
#app #grouped-tasks .period .card .timesheet-details .stat .label {
  color: var(--text-light);
  font-size: 11px;
  text-transform: uppercase;
}
#app #periods .period .card .timesheet-details .totalHours,
#app #grouped-tasks .period .card .timesheet-details .totalHours {
  font-size: 22px;
  font-weight: bold;
}
#app #periods .period .card .timesheet-details .wages,
#app #grouped-tasks .period .card .timesheet-details .wages {
  font-size: 22px;
  font-weight: bold;
}
#app #periods .period .card .leave-card-details .row,
#app #grouped-tasks .period .card .leave-card-details .row {
  display: flex;
  margin-bottom: 5px;
}
#app #periods .period .card .leave-card-details .row .label,
#app #grouped-tasks .period .card .leave-card-details .row .label {
  font-weight: bold;
  width: 33%;
}
#app #periods .period .card .actions,
#app #grouped-tasks .period .card .actions {
  display: flex;
}
#app #periods .period .card .actions .button,
#app #grouped-tasks .period .card .actions .button {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  text-align: center;
  padding: 20px;
  border-top: 1px solid var(--bg);
  border-left: 1px solid var(--bg);
  color: var(--button-primary);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}
#app #periods .period .card .actions .button:first-of-type,
#app #grouped-tasks .period .card .actions .button:first-of-type {
  border-left: 0;
}
#app #periods .period .card.group,
#app #grouped-tasks .period .card.group {
  cursor: pointer;
}
#app #periods .period .card.group .body,
#app #grouped-tasks .period .card.group .body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px;
}
#app #periods .period .card.group .body .content .label,
#app #grouped-tasks .period .card.group .body .content .label {
  position: relative;
  background-color: #4C4C47;
  padding: 5px 10px;
  color: #FFFFFF;
  border-radius: 5px;
  font-size: 14px;
  margin-right: 10px;
  font-weight: bold;
}
#app #periods .period .card.group .body .content .label::before,
#app #grouped-tasks .period .card.group .body .content .label::before,
#app #periods .period .card.group .body .content .label::after,
#app #grouped-tasks .period .card.group .body .content .label::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(76, 76, 71, 0.25);
  border-radius: 5px;
  z-index: -1;
  right: -2px;
  bottom: -2px;
}
#app #periods .period .card.group .body .content .label::after,
#app #grouped-tasks .period .card.group .body .content .label::after {
  right: -4px;
  bottom: -4px;
}
#app #periods .period .card.group .body .content i,
#app #grouped-tasks .period .card.group .body .content i {
  display: none;
}
#app #periods .period .card.group::before,
#app #grouped-tasks .period .card.group::before,
#app #periods .period .card.group::after,
#app #grouped-tasks .period .card.group::after {
  content: '';
  top: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(2deg);
  border-radius: 15px;
  z-index: -1;
}
#app #periods .period .card.group::after,
#app #grouped-tasks .period .card.group::after {
  transform: rotate(-2deg);
}
#app #periods .period .card.right,
#app #grouped-tasks .period .card.right {
  left: 120%;
  transform: rotate(15deg);
}
#app #periods .period .card.left,
#app #grouped-tasks .period .card.left {
  left: -120%;
  transform: rotate(-15deg);
}
#app #periods .period .complete,
#app #grouped-tasks .period .complete {
  display: none;
  text-align: center;
  border-radius: 15px;
  padding: 20px 0;
  margin: 5vh 10px 21vh 10px;
  width: calc(100vw - 20px);
  color: var(--text);
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
#app #periods .period .complete i,
#app #grouped-tasks .period .complete i {
  color: #8EA604;
}
#app #periods .period .end,
#app #grouped-tasks .period .end {
  text-align: center;
  padding: 20px 0;
}
#app #periods .period .end.sticky,
#app #grouped-tasks .period .end.sticky {
  position: sticky;
  bottom: 25px;
}
#app #periods .period .end .button,
#app #grouped-tasks .period .end .button {
  background-color: var(--button-primary);
  color: var(--button-primary-text);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 25px 0 35px 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border-radius: 15px 15px 0 0;
}
#app #periods .period .end .button.disabled,
#app #grouped-tasks .period .end .button.disabled {
  background-color: var(--button-primary-disabled);
  color: var(--button-primary-disabled-text);
}
#app #periods .period .end .date,
#app #grouped-tasks .period .end .date {
  background-color: var(--period-end-bg);
  color: var(--text-light);
  font-size: 12px;
  padding: 2px 0;
  position: relative;
  text-transform: uppercase;
}
#app #periods .period .end .date::before,
#app #grouped-tasks .period .end .date::before {
  background: linear-gradient(-45deg, var(--period-end-bg) 8px, transparent 0), linear-gradient(45deg, var(--period-end-bg) 8px, transparent 0);
  background-repeat: repeat-x;
  background-size: 16px 16px;
  content: " ";
  display: block;
  position: absolute;
  top: -16px;
  left: 0px;
  width: 100%;
  height: 16px;
}
#app #periods .period .end .date::after,
#app #grouped-tasks .period .end .date::after {
  background: linear-gradient(-45deg, transparent 16px, var(--period-end-bg) 0), linear-gradient(45deg, transparent 16px, var(--period-end-bg) 0);
  background-position: -8px 0;
  background-repeat: repeat-x;
  background-size: 16px 16px;
  content: " ";
  display: block;
  position: absolute;
  bottom: -16px;
  left: 0px;
  width: 100%;
  height: 16px;
}
#app #add-item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  background-color: var(--button-primary);
  position: sticky;
  bottom: 150px;
  left: calc(100vw - 70px);
  align-items: center;
  justify-content: center;
  color: var(--button-primary-text);
  font-size: 1.5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
#app .tab.container {
  display: none;
  min-height: 100vh;
  margin-top: 50px;
}
#app .tab.container.active {
  display: block;
}
#app .tab.container .top-nav {
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#app .tab.container .top-nav .button {
  padding: 10px;
  color: #FFFFFF;
  font-size: 24px;
}
#app .tab.container .top-nav .title {
  color: rgba(255, 255, 255, 0.8);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
#app .tab.container .top-nav .title i {
  font-size: 24px;
  margin-right: 10px;
}
#app .contents {
  position: relative;
  min-height: 100vh;
}
#app .contents.padded {
  padding: 10px;
}
#app #app-settings {
  margin-top: 40px;
}
#app #app-settings .item {
  box-sizing: border-box;
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: calc(100vw - 20px);
  border-radius: 15px;
  margin: 20px 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app #app-settings .item .label {
  font-size: 14px;
  color: var(--text);
  margin-left: 10px;
}
#app #app-settings .item a {
  color: var(--button-primary);
  font-size: 14px;
  padding: 6.5px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
}
#app #group #group-title {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  vertical-align: middle;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
#app #group #group-title i {
  font-size: 24px;
  margin-right: 10px;
}
#app #group #group-back {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-primary);
  transition: bottom 0.2s;
}
#app #group #group-back.hide {
  bottom: -80px;
}
#app #group #group-back .label {
  font-size: 14px;
  font-weight: bold;
  color: var(--button-primary-text);
  text-transform: uppercase;
  margin-bottom: 20px;
}
#app #search-employees {
  position: relative;
  z-index: 1;
}
#app #search-employees::after {
  position: absolute;
  content: '\f002';
  font-family: 'Font Awesome 5 Pro';
  color: #4C4C47;
  left: 12px;
  top: 12px;
  pointer-events: none;
  font-size: 16px;
}
#app #search-employees input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  outline: none;
  border-radius: 50px;
  font-size: 16px;
  padding: 10px 5px 10px 40px;
  background-color: rgba(255, 255, 255, 0.2);
  font-family: 'Montserrat';
  color: #FFFFFF;
  transition: background-color 0.2s, color 0.2s;
}
#app #search-employees input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#app #search-employees input:focus {
  background-color: rgba(255, 255, 255, 0.7);
  color: #2D2D2A;
}
#app #search-employees input:focus::placeholder {
  color: rgba(45, 45, 42, 0.5);
}
#app #employee-list {
  position: relative;
  min-height: 100vh;
  margin-top: 40px;
}
#app #employee-list .item {
  cursor: pointer;
  display: flex;
  background-color: var(--card-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  margin: 15px 0;
  border-radius: 10px;
  transition: opacity 0.3s, transform 0.5s;
}
#app #employee-list .item .avatar {
  width: 50px;
  height: 50px;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  border-radius: 10px 0 0 10px;
}
#app #employee-list .item .name {
  margin: 10px 10px 0px 10px;
  font-size: 14px;
  font-weight: bold;
  color: var(--text);
  width: calc(100vw - 90px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#app #employee-list .item .name .last {
  text-transform: uppercase;
}
#app #employee-list .item .job {
  margin: 0px 10px 0px 10px;
  font-size: 12px;
  color: var(--icons);
}
#app #add-employee {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  background-color: var(--button-primary);
  position: sticky;
  bottom: 150px;
  left: calc(100vw - 70px);
  align-items: center;
  justify-content: center;
  color: var(--button-primary-text);
  font-size: 1.5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
#app #first-employee {
  position: fixed;
  bottom: 50px;
  right: 60px;
  text-align: center;
}
#app #first-employee .icon {
  color: rgba(255, 255, 255, 0.8);
  font-size: 65px;
}
#app #first-employee .label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 32px;
  font-family: 'Caveat', cursive;
}
#app #first-employee .arrow {
  margin-top: -70px;
  margin-left: 60px;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
}
#app #first-employee .arrow svg {
  width: 40vw;
  transform: rotate(20deg);
}
#app #first-employee .arrow svg #arrow g {
  fill: rgba(255, 255, 255, 0.9);
}
#app #tabs {
  display: flex;
  justify-content: space-around;
  background-color: var(--tabs);
  position: sticky;
  width: 100vw;
  bottom: 0;
  padding-bottom: 20px;
  transition: bottom 0.2s;
}
#app #tabs.hide {
  bottom: -80px;
}
#app #tabs .tab.button {
  flex-grow: 1;
  font-size: 30px;
  padding: 5px 0 3px 0;
  color: var(--tab-icons);
  border-top: 3px solid var(--tabs);
  text-align: center;
}
#app #tabs .tab.button .label {
  font-size: 9px;
  text-transform: uppercase;
}
#app #tabs .tab.button.active {
  color: var(--tab-icon-active);
  border-top: 3px solid var(--tab-marker-active);
}
/*
 .d88888b.                            888
d88P" "Y88b                           888
888     888                           888
888     888 888  888  .d88b.  888d888 888  8888b.  888  888
888     888 888  888 d8P  Y8b 888P"   888     "88b 888  888
888     888 Y88  88P 88888888 888     888 .d888888 888  888
Y88b. .d88P  Y8bd8P  Y8b.     888     888 888  888 Y88b 888
 "Y88888P"    Y88P    "Y8888  888     888 "Y888888  "Y88888
                                                        888
                                                   Y8b d88P
                                                    "Y88P"
*/
.overlay {
  z-index: 2;
  position: fixed;
  width: 100vw;
  height: calc(100vh - 65px);
  bottom: -100vh;
  background-color: var(--overlay-bg);
  color: var(--text);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: bottom 0.3s;
  overflow: hidden;
}
.overlay.active {
  bottom: 0;
}
.overlay .close {
  color: var(--text);
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
  z-index: 999;
}
.overlay .save.button {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--button-primary);
}
.overlay .save.button .label {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.overlay .save.button.disabled {
  opacity: 0.5;
}
.overlay [data-screen] {
  position: absolute;
  width: 100vw;
  height: 100%;
  left: 100vw;
  top: 0;
  transition: left 0.2s;
  z-index: 3;
  background-color: var(--overlay-bg);
}
.overlay [data-screen].active {
  left: 0;
  z-index: 2;
  box-shadow: 0 -10px 10px 20px rgba(0, 0, 0, 0.1);
}
.overlay [data-screen].back {
  left: -50vw;
  z-index: 2;
}
.overlay [data-screen] .nav-bar {
  display: flex;
  justify-content: space-between;
  background-color: var(--overlay-head);
  align-items: center;
}
.overlay [data-screen] .nav-bar div {
  flex-grow: 1;
}
.overlay [data-screen] .nav-bar .button {
  padding: 20px;
  color: var(--text);
}
.overlay [data-screen] .nav-bar .title {
  color: var(--text);
  text-align: center;
  flex-grow: 2;
  font-size: 16px;
  font-weight: bold;
}
.overlay [data-screen] .nav-bar .title i {
  color: var(--text-light);
  margin-right: 10px;
}
.overlay [data-screen] .form {
  padding: 20px 20px;
  height: calc(100% - 100px);
  overflow-y: auto;
}
.overlay [data-screen] .form .items {
  display: flex;
  flex-direction: column;
}
.overlay [data-screen] .form .items .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay [data-screen] .form .items .item .label {
  font-weight: bold;
}
.overlay [data-screen] .form .items .item .label i {
  color: var(--text-light);
  margin-right: 10px;
}
.overlay [data-screen] .form .items .item .value#closepay-summary-total {
  font-weight: bold;
}
.overlay [data-screen] .form .items .item[data-item] {
  cursor: pointer;
}
.overlay [data-screen] .form .items .item[data-item] .value::after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  padding-left: 10px;
  color: var(--text-extralight);
}
.overlay [data-screen] .form .items#timesheets-list .item .label {
  font-weight: normal;
}
.overlay [data-screen] .form .items#timesheets-list .item.open .label {
  font-weight: bold;
}
.overlay[data-overlay="employee"] .content {
  height: 100%;
  overflow-y: auto;
  border-radius: 5px 5px 0 0;
}
.overlay[data-overlay="employee"] .content .employee-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="employee"] .content .employee-card .head {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--overlay-head);
  width: 100%;
  padding: 20px 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="employee"] .content .employee-card .head #change-avatar .avatar {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid var(--overlay-bg);
  background-size: cover;
  background-position: center;
}
.overlay[data-overlay="employee"] .content .employee-card .head #change-avatar input {
  display: none;
}
.overlay[data-overlay="employee"] .content .employee-card .head .details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.overlay[data-overlay="employee"] .content .employee-card .head .details .name {
  font-size: 24px;
  color: var(--text);
  text-align: center;
}
.overlay[data-overlay="employee"] .content .employee-card .head .details .job {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 5px;
}
.overlay[data-overlay="employee"] .content .employee-card .contact {
  background-color: var(--overlay-head);
  display: flex;
  width: 100%;
  justify-content: center;
}
.overlay[data-overlay="employee"] .content .employee-card .contact .item {
  padding: 10px 0 30px 0;
}
.overlay[data-overlay="employee"] .content .employee-card .contact .item a {
  box-sizing: border-box;
  background-color: var(--button-primary);
  font-size: 13px;
  border: 2px solid var(--button-primary);
  border-radius: 20px;
  padding: 7px 20px;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0 10px 20px 10px;
}
.overlay[data-overlay="employee"] .content .employee-card .contact .item a i {
  margin-right: 10px;
}
.overlay[data-overlay="employee"] .content .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="employee"] .content .items .item {
  display: flex;
  padding: 15px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--text-extralight);
}
.overlay[data-overlay="employee"] .content .items .item:last-child {
  border: none;
}
.overlay[data-overlay="employee"] .content .items .item .icon {
  font-size: 18px;
  padding-right: 10px;
  color: var(--text-light);
}
.overlay[data-overlay="employee"] .content .items .item .description {
  flex-grow: 1;
  color: var(--text);
}
.overlay[data-overlay="employee"] .content .items .item .description h3 {
  font-size: 18px;
  margin: 0;
}
.overlay[data-overlay="employee"] .content .items .item .description h3 i {
  margin-right: 10px;
}
.overlay[data-overlay="employee"] .content .items .item .description .details {
  margin-top: 5px;
}
.overlay[data-overlay="employee"] .content .items .item .description .details table tr td {
  vertical-align: top;
  margin: 0.2rem 0 0 0;
  font-size: 13px;
}
.overlay[data-overlay="employee"] .content .items .item .description .details table tr td .capitalize {
  display: inline-block;
}
.overlay[data-overlay="employee"] .content .items .item .description .details table tr td .capitalize::first-letter {
  text-transform: uppercase;
}
.overlay[data-overlay="employee"] .content .items .item .description .details table tr td .required {
  color: #D84727;
}
.overlay[data-overlay="employee"] .content .items .item .description .details table tr td:first-child {
  width: 90px;
}
.overlay[data-overlay="employee"] .content .items .item .status {
  text-align: right;
}
.overlay[data-overlay="employee"] .content .items .item .status i.fa-exclamation-triangle {
  color: #D84727;
}
.overlay[data-overlay="employee"] .content .items .divider {
  width: 100%;
  height: 1px;
  background-color: var(--text-extralight);
  margin: 10px 0;
}
.overlay[data-overlay="employee"] .content .actions {
  padding: 10px 10px 60px 10px;
}
.overlay[data-overlay="company"] .content {
  height: 100%;
  overflow-y: auto;
  border-radius: 5px 5px 0 0;
}
.overlay[data-overlay="company"] .content .company-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="company"] .content .company-card .head {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--overlay-head);
  width: 100%;
  padding: 20px 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="company"] .content .company-card .head #change-logo .logo {
  position: relative;
  width: calc(100vw - 40px);
  height: 120px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.overlay[data-overlay="company"] .content .company-card .head #change-logo input {
  display: none;
}
.overlay[data-overlay="company"] .content .company-card .head .details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.overlay[data-overlay="company"] .content .company-card .head .details .name {
  font-size: 24px;
  color: var(--text);
  text-align: center;
}
.overlay[data-overlay="company"] .content .company-card .head .details .job {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 5px;
}
.overlay[data-overlay="company"] .content .company-card .contact {
  background-color: var(--overlay-head);
  display: flex;
  width: 100%;
  justify-content: center;
}
.overlay[data-overlay="company"] .content .company-card .contact .item {
  padding: 10px 0 30px 0;
}
.overlay[data-overlay="company"] .content .company-card .contact .item a {
  box-sizing: border-box;
  background-color: var(--button-primary);
  font-size: 13px;
  border: 2px solid var(--button-primary);
  border-radius: 20px;
  padding: 7px 20px;
  color: #FFFFFF;
  text-decoration: none;
  margin: 0 10px 20px 10px;
}
.overlay[data-overlay="company"] .content .company-card .contact .item a i {
  margin-right: 10px;
}
.overlay[data-overlay="company"] .content .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="company"] .content .items .item {
  display: flex;
  padding: 15px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--text-extralight);
}
.overlay[data-overlay="company"] .content .items .item:last-child {
  border: none;
}
.overlay[data-overlay="company"] .content .items .item .icon {
  font-size: 18px;
  padding-right: 10px;
  color: var(--text-light);
}
.overlay[data-overlay="company"] .content .items .item .description {
  flex-grow: 1;
  color: var(--text);
}
.overlay[data-overlay="company"] .content .items .item .description h3 {
  font-size: 18px;
  margin: 0;
}
.overlay[data-overlay="company"] .content .items .item .description h3 i {
  margin-right: 10px;
}
.overlay[data-overlay="company"] .content .items .item .description .details {
  margin-top: 5px;
}
.overlay[data-overlay="company"] .content .items .item .description .details table tr td {
  vertical-align: top;
  margin: 0.2rem 0 0 0;
  font-size: 13px;
}
.overlay[data-overlay="company"] .content .items .item .description .details table tr td .capitalize {
  display: inline-block;
}
.overlay[data-overlay="company"] .content .items .item .description .details table tr td .capitalize::first-letter {
  text-transform: uppercase;
}
.overlay[data-overlay="company"] .content .items .item .description .details table tr td .required {
  color: #D84727;
}
.overlay[data-overlay="company"] .content .items .item .description .details table tr td:first-child {
  width: 90px;
}
.overlay[data-overlay="company"] .content .items .item .status {
  text-align: right;
}
.overlay[data-overlay="company"] .content .items .item .status i.fa-exclamation-triangle {
  color: #D84727;
}
.overlay[data-overlay="company"] .content .items .divider {
  width: 100%;
  height: 1px;
  background-color: var(--text-extralight);
  margin: 10px 0;
}
.overlay[data-overlay="company"] .content .actions {
  padding: 10px 10px 60px 10px;
}
.overlay[data-overlay="company"] #banking-no-card .form {
  height: inherit;
  overflow-y: inherit;
  min-height: 100vh;
}
.overlay[data-overlay="company"] #banking-yes-card {
  display: none;
}
.overlay[data-overlay="company"] #banking-yes-card .card-details {
  display: block;
  margin: 20px 10px;
  padding: 8px 10px 30px 30px;
  border: 1px solid var(--text-extralight);
  border-radius: 10px;
  color: var(--text);
  background-color: var(--text-extralight);
}
.overlay[data-overlay="company"] #banking-yes-card .card-details .card-type {
  text-align: right;
  font-size: 2rem;
  color: var(--text-verylight);
}
.overlay[data-overlay="company"] #banking-yes-card .card-details .card-number {
  font-family: monospace;
  font-size: 1.4rem;
  margin: 1rem 0;
}
.overlay[data-overlay="company"] #banking-yes-card .card-details .card-expiry {
  font-family: monospace;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.overlay[data-overlay="company"] #banking-yes-card .card-details .card-expiry::before {
  content: 'EXP: ';
}
.overlay[data-overlay="company"] #banking-yes-card .card-details .card-name {
  font-family: monospace;
  font-size: 1rem;
}
.overlay[data-overlay="close-pay"] .content {
  height: 100%;
  overflow-y: auto;
}
.overlay[data-overlay="close-pay"] .content .heading {
  text-align: center;
  background-color: var(--overlay-head);
  padding: 40px 20px 10px 20px;
}
.overlay[data-overlay="close-pay"] .content .heading .icon {
  font-size: 46px;
}
.overlay[data-overlay="close-pay"] .content .heading .title {
  font-size: 24px;
  color: var(--text);
  margin: 10px 0;
}
.overlay[data-overlay="close-pay"] .content .heading .period {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.overlay[data-overlay="close-pay"] .content .summary {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="close-pay"] .content .summary .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay[data-overlay="close-pay"] .content .summary .item .label {
  font-weight: bold;
}
.overlay[data-overlay="close-pay"] .content .summary .item .value#closepay-summary-total {
  font-weight: bold;
}
.overlay[data-overlay="close-pay"] .content .summary .item[data-item] {
  cursor: pointer;
}
.overlay[data-overlay="close-pay"] .content .summary .item[data-item] .value::after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  padding-left: 10px;
  color: var(--text-extralight);
}
.overlay[data-overlay="close-pay"] .content .warnings {
  padding: 0px 10px 100px 10px;
}
.overlay[data-overlay="close-pay"] .content .warnings .warning {
  font-size: 14px;
  color: #D84727;
  border: 1px solid #D84727;
  border-radius: 5px;
  padding: 16px 10px 10px 16px;
  margin-bottom: 10px;
  display: flex;
}
.overlay[data-overlay="close-pay"] .content .warnings .warning .icon {
  margin-right: 10px;
}
.overlay[data-overlay="close-pay"] .content .warnings .warning .content {
  height: 100%;
}
.overlay[data-overlay="close-pay"] .content .warnings .warning .content p {
  margin: inherit;
  margin-bottom: 0.5rem;
}
.overlay[data-overlay="close-pay"] .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="close-pay"] .items .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay[data-overlay="close-pay"] .items .item .label {
  font-weight: bold;
}
.overlay[data-overlay="timesheet"] .content {
  height: 100%;
  overflow-y: auto;
  border-radius: 5px 5px 0 0;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head {
  display: flex;
  flex-direction: column;
  z-index: 1;
  background-color: var(--overlay-head);
  width: 100%;
  padding: 0px 0 0 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .avatar {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 15px 0 0 10px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .avatar .name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper {
  width: 100%;
  height: 150px;
  padding-bottom: 20px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide .timesheet-stat {
  color: var(--text);
  text-align: center;
  margin-bottom: 5px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide .timesheet-stat .value {
  font-size: 42px;
  font-weight: bold;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide .timesheet-stat .label {
  text-transform: uppercase;
  font-size: 13px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide .meta {
  color: var(--text-verylight);
  font-size: 13px;
  text-align: center;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide #four-week-trend {
  width: 100%;
  box-sizing: border-box;
  padding-top: 20px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide #four-week-trend .ct-series-a .ct-area {
  fill-opacity: 0;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide #four-week-trend .ct-series-a .ct-line {
  stroke: var(--text-light);
  stroke-width: 1px;
  stroke-dasharray: 5px 2px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide #four-week-trend .ct-series-b .ct-area {
  fill-opacity: 0.2;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide #four-week-trend .ct-series-b .ct-line {
  stroke: #D84727;
  stroke-width: 3px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide #four-week-trend .ct-label.ct-horizontal.ct-end {
  white-space: nowrap;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-slide .four-week-label {
  margin-top: -20px;
}
.overlay[data-overlay="timesheet"] .content .timesheet-summary .head .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--button-primary);
}
.overlay[data-overlay="timesheet"] .content .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="timesheet"] .content .items .item {
  color: var(--text);
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--text-extralight);
}
.overlay[data-overlay="timesheet"] .content .items .item .date i {
  margin-right: 10px;
}
.overlay[data-overlay="timesheet"] .content .items .item .hours::after {
  content: 'h';
  color: var(--text-verylight);
  font-size: 13px;
  margin-left: 5px;
}
.overlay[data-overlay="timesheet"] .content .items .item.future .date {
  color: var(--text-verylight);
  font-style: italic;
}
.overlay[data-overlay="timesheet"] .content .items .item.future .hours {
  color: var(--text-verylight);
}
.overlay[data-overlay="timesheet"] .content .actions {
  padding: 20px 10px 60px 10px;
}
.overlay[data-overlay="leave"] .content {
  height: 100%;
  overflow-y: auto;
  border-radius: 5px 5px 0 0;
}
.overlay[data-overlay="leave"] .content .leave-summary {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="leave"] .content .leave-summary .head {
  display: flex;
  flex-direction: column;
  z-index: 1;
  background-color: var(--overlay-head);
  width: 100%;
  padding: 0px 0 0 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .avatar {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 15px 0 0 10px;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .avatar .name {
  font-size: 16px;
  font-weight: bold;
  color: var(--text);
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper {
  width: 100%;
  height: 150px;
  padding-bottom: 20px;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper .swiper-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper .swiper-slide .leave-stat {
  color: var(--text);
  text-align: center;
  margin-bottom: 5px;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper .swiper-slide .leave-stat .value {
  font-size: 42px;
  font-weight: bold;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper .swiper-slide .leave-stat .label {
  text-transform: uppercase;
  font-size: 13px;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper .swiper-slide .meta {
  color: var(--text-verylight);
  font-size: 13px;
  text-align: center;
}
.overlay[data-overlay="leave"] .content .leave-summary .head .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--button-primary);
}
.overlay[data-overlay="leave"] .content .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="leave"] .content .items.leave-details {
  cursor: pointer;
  user-select: none;
}
.overlay[data-overlay="leave"] .content .items #leave-type {
  margin: 10px;
  text-align: center;
}
.overlay[data-overlay="leave"] .content .items #leave-type .icon {
  font-size: 36px;
  color: var(--text-verylight);
}
.overlay[data-overlay="leave"] .content .items #leave-type .label {
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text);
}
.overlay[data-overlay="leave"] .content .items .dates {
  position: relative;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  color: var(--text);
}
.overlay[data-overlay="leave"] .content .items .dates::after {
  position: absolute;
  content: '';
  display: block;
  height: 2px;
  width: 50%;
  background-color: var(--text-extralight);
}
.overlay[data-overlay="leave"] .content .items .dates .start,
.overlay[data-overlay="leave"] .content .items .dates .end {
  position: relative;
  margin-top: 10px;
  font-size: 14px;
}
.overlay[data-overlay="leave"] .content .items .dates .start::after,
.overlay[data-overlay="leave"] .content .items .dates .end::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-extralight);
  border: 5px solid var(--flow-bg);
  left: calc(50% - 7px);
  top: -18px;
  z-index: 1;
}
.overlay[data-overlay="leave"] .content .items .leave-comment-container {
  margin: 30px 0 20px 0;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: var(--text-extralight);
}
.overlay[data-overlay="leave"] .content .items .leave-comment-container .leave-comment {
  font-size: 14px;
  color: var(--text);
  font-style: italic;
}
.overlay[data-overlay="leave"] .content .items .leave-comment-container .leave-comment::before {
  content: "\f10d";
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  color: var(--flow-bg);
  margin-right: 10px;
  font-size: 16px;
}
.overlay[data-overlay="leave"] .content .actions {
  padding: 20px 10px 60px 10px;
}
.overlay[data-overlay="leave"] .content .actions button {
  margin-bottom: 20px;
}
.overlay[data-overlay="period-settings"] .content {
  height: 100%;
  overflow-y: auto;
}
.overlay[data-overlay="period-settings"] .content .heading {
  text-align: center;
  background-color: var(--overlay-head);
  padding: 40px 20px 10px 20px;
}
.overlay[data-overlay="period-settings"] .content .heading .icon {
  font-size: 46px;
}
.overlay[data-overlay="period-settings"] .content .heading .title {
  font-size: 24px;
  color: var(--text);
  margin: 10px 0;
}
.overlay[data-overlay="period-settings"] .content .heading .period {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.overlay[data-overlay="period-settings"] .content .summary {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="period-settings"] .content .summary .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay[data-overlay="period-settings"] .content .summary .item .label {
  font-weight: bold;
}
.overlay[data-overlay="period-settings"] .content .summary .item .value#closepay-summary-total {
  font-weight: bold;
}
.overlay[data-overlay="period-settings"] .content .summary .item[data-item] {
  cursor: pointer;
}
.overlay[data-overlay="period-settings"] .content .summary .item[data-item] .value::after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  padding-left: 10px;
  color: var(--text-extralight);
}
.overlay[data-overlay="period-settings"] .content .warnings {
  padding: 0px 10px 100px 10px;
}
.overlay[data-overlay="period-settings"] .content .warnings .warning {
  font-size: 14px;
  color: #D84727;
  border: 1px solid #D84727;
  border-radius: 5px;
  padding: 16px 10px 10px 16px;
  margin-bottom: 10px;
  display: flex;
}
.overlay[data-overlay="period-settings"] .content .warnings .warning .icon {
  margin-right: 10px;
}
.overlay[data-overlay="period-settings"] .content .warnings .warning .content {
  height: 100%;
}
.overlay[data-overlay="period-settings"] .content .warnings .warning .content p {
  margin: inherit;
  margin-bottom: 0.5rem;
}
.overlay[data-overlay="period-settings"] .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="period-settings"] .items .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay[data-overlay="period-settings"] .items .item .label {
  font-weight: bold;
}
.overlay[data-overlay="support"] .content {
  height: 100%;
  overflow-y: auto;
}
.overlay[data-overlay="support"] .content .heading {
  text-align: center;
  background-color: var(--overlay-head);
  padding: 40px 20px 10px 20px;
}
.overlay[data-overlay="support"] .content .heading .icon {
  font-size: 46px;
}
.overlay[data-overlay="support"] .content .heading .title {
  font-size: 24px;
  color: var(--text);
  margin: 10px 0;
}
.overlay[data-overlay="support"] .content .heading .subtitle {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 10px;
}
.overlay[data-overlay="support"] .content .summary {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="support"] .content .summary .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay[data-overlay="support"] .content .summary .item .label {
  font-weight: bold;
}
.overlay[data-overlay="support"] .content .summary .item .value#closepay-summary-total {
  font-weight: bold;
}
.overlay[data-overlay="support"] .content .summary .item[data-item] {
  cursor: pointer;
}
.overlay[data-overlay="support"] .content .summary .item[data-item] .value::after {
  content: '\f054';
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  padding-left: 10px;
  color: var(--text-extralight);
}
.overlay[data-overlay="support"] .content .warnings {
  padding: 0px 10px 100px 10px;
}
.overlay[data-overlay="support"] .content .warnings .warning {
  font-size: 14px;
  color: #D84727;
  border: 1px solid #D84727;
  border-radius: 5px;
  padding: 16px 10px 10px 16px;
  margin-bottom: 10px;
  display: flex;
}
.overlay[data-overlay="support"] .content .warnings .warning .icon {
  margin-right: 10px;
}
.overlay[data-overlay="support"] .content .warnings .warning .content {
  height: 100%;
}
.overlay[data-overlay="support"] .content .warnings .warning .content p {
  margin: inherit;
  margin-bottom: 0.5rem;
}
.overlay[data-overlay="support"] .items {
  display: flex;
  flex-direction: column;
  padding: 20px 10px;
}
.overlay[data-overlay="support"] .items .item {
  display: flex;
  justify-content: space-between;
  color: var(--text);
  font-size: 16px;
  border-bottom: 1px solid var(--text-extralight);
  padding: 15px 0;
}
.overlay[data-overlay="support"] .items .item .label {
  font-weight: bold;
}
#close-pay-process {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--button-primary);
  top: 100vh;
  z-index: 999;
  transition: top 0.2s;
  padding: 80px 30px;
  box-sizing: border-box;
  color: var(--bg);
}
#close-pay-process.active {
  top: 0;
}
#close-pay-process .tasks {
  margin-top: 40px;
}
#close-pay-process .tasks .task {
  margin-bottom: 10px;
}
#close-pay-process .tasks .task .check {
  margin-right: 20px;
  font-size: 2rem;
  vertical-align: middle;
}
#close-pay-process .all-done {
  margin-top: 40px;
  text-align: right;
}
#credit-card-scan {
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  color: #FFFFFF;
  position: fixed;
  top: 100vh;
  left: 0;
  z-index: 9;
  transition: top 0.2s;
}
#credit-card-scan.active {
  top: 0;
}
#credit-card-scan .close {
  color: #FFFFFF;
  position: absolute;
  font-size: 20px;
  top: 40px;
  right: 10px;
  padding: 20px;
  z-index: 1;
  cursor: pointer;
}
#credit-card-scan .instructions {
  width: calc(100% - 80px);
  margin: 40px 40px 0 40px;
  text-align: center;
  position: relative;
  top: 80px;
  z-index: 1;
}
#credit-card-scan .card-photo {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('../img/credit-card-table4.jpg');
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
}
#credit-card-scan .actions {
  position: absolute;
  bottom: 0;
  width: calc(100% - 0px);
  margin: 0px;
}
#credit-card-scan .actions button {
  border-radius: 0;
  padding: 20px 0 40px 0;
  cursor: pointer;
}
/*
8888888b.
888  "Y88b
888    888
888    888 888d888 8888b.  888  888  888  .d88b.  888d888
888    888 888P"      "88b 888  888  888 d8P  Y8b 888P"
888    888 888    .d888888 888  888  888 88888888 888
888  .d88P 888    888  888 Y88b 888 d88P Y8b.     888
8888888P"  888    "Y888888  "Y8888888P"   "Y8888  888
*/
.drawer {
  z-index: 2;
  position: fixed;
  box-sizing: border-box;
  width: 100vw;
  min-height: 20vh;
  bottom: -100vh;
  background-color: var(--drawer-bg);
  border-radius: 5px 5px 0 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  padding: 40px 20px;
  transition: bottom 0.3s;
}
.drawer.active {
  bottom: 0;
}
.drawer .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
  color: var(--text);
}
.drawer .items {
  display: flex;
  flex-direction: column;
}
.drawer .items .item {
  display: flex;
  margin: 15px 0;
  cursor: pointer;
}
.drawer .items .item .icon {
  font-size: 2.5rem;
  padding-right: 1.5rem;
  color: var(--drawer-icons);
}
.drawer .items .item .description {
  color: var(--text);
}
.drawer .items .item .description h3 {
  margin: 0;
}
.drawer .items .item .description p {
  margin: 0.2rem 0 0 0;
  font-size: 12px;
}
.drawer .items .divider {
  width: 100%;
  height: 1px;
  background-color: var(--drawer-divider);
  margin: 10px 0;
}
/*
8888888888 888
888        888
888        888
8888888    888  .d88b.  888  888  888
888        888 d88""88b 888  888  888
888        888 888  888 888  888  888
888        888 Y88..88P Y88b 888 d88P
888        888  "Y88P"   "Y8888888P"
*/
.flow-group {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100vw;
  overflow: hidden;
  height: 0;
  top: 0;
  z-index: 2;
  transform: scale(0);
  transition: transform 0.3s;
}
.flow-group.active {
  height: 100vh;
  display: flex;
  transform: scale(1);
}
.flow-group .close {
  color: #2D2D2A;
  position: relative;
  top: calc(-35vh - 20px);
  left: calc(50vw - 50px);
  font-size: 24px;
  cursor: pointer;
}
.flow-group .flow-card {
  position: absolute;
  box-sizing: border-box;
  padding: 0 20px 0px 20px;
  width: calc(100vw - 60px);
  height: 70vh;
  background-color: var(--flow-bg);
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  left: 200%;
  transition: left 0.3s;
}
.flow-group .flow-card.history {
  left: -200%;
}
.flow-group .flow-card.prev {
  left: calc(-100% + 80px);
}
.flow-group .flow-card.active {
  left: calc(0% + 30px);
}
.flow-group .flow-card.next {
  left: calc(100% - 20px);
}
.flow-group .flow-card .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  padding: 20px 0 10px 0;
  position: sticky;
  top: 0;
  background-color: var(--flow-bg);
  z-index: 1;
  border-bottom: 1px solid var(--text-light);
  color: var(--text);
}
.flow-group .flow-card .title i {
  color: var(--text-light);
  font-size: 32px;
  margin-bottom: 5px;
}
.flow-group .flow-card .content {
  position: relative;
  min-height: calc(70vh - 188px);
}
.flow-group .flow-card .option {
  display: flex;
  flex-direction: column;
}
.flow-group .flow-card .option .label {
  font-size: 14px;
  color: var(--text);
  font-weight: bold;
  margin-bottom: 5px;
}
.flow-group .flow-card .option .item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--text-extralight);
  padding: 12px 0;
  cursor: pointer;
  align-items: center;
}
.flow-group .flow-card .option .item .label {
  font-size: 16px;
  font-weight: normal;
  color: var(--text-light);
  margin: 0;
}
.flow-group .flow-card .option .item .value {
  color: #D84727;
}
.flow-group .flow-card .option .item.disabled {
  cursor: default;
}
.flow-group .flow-card .option .item.disabled .label {
  opacity: 0.3;
}
.flow-group .flow-card .week {
  display: flex;
  justify-content: space-between;
}
.flow-group .flow-card .week .day {
  width: 40px;
  height: 40px;
  background-color: rgba(46, 82, 102, 0.25);
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.flow-group .flow-card .week .day.selected {
  background-color: #D84727;
  color: #FFFFFF;
}
.flow-group .flow-card #add-employee-pattern .day {
  background-color: var(--pattern-day-bg);
  color: var(--pattern-day-text);
}
.flow-group .flow-card #add-employee-pattern .day.selected {
  background-color: var(--pattern-day-selected-bg);
  color: var(--pattern-day-selected-text);
}
.flow-group .flow-card .actions {
  position: sticky;
  bottom: 0;
  background: var(--flow-bg);
  padding: 0px 0 20px 0;
  margin-top: 20px;
}
.flow-group .flow-card .actions::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 20px;
  top: -20px;
  background-image: linear-gradient(var(--flow-bg0), var(--flow-bg));
}
.flow-group #leave-select-employee {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.flow-group #leave-select-employee .item {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  align-items: center;
}
.flow-group #leave-select-employee .item .avatar {
  font-size: 0;
}
.flow-group #leave-select-employee .item .avatar img {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.flow-group #leave-select-employee .item .name {
  color: var(--text);
  font-size: 14px;
  width: calc(100vw - 150px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.flow-group #leave-select-employee .item .job {
  font-size: 9px;
  color: var(--text-verylight);
  text-transform: uppercase;
}
.flow-group #leave-select-employee .item.selected {
  background-color: var(--list-item-selected);
  border-radius: 20px;
}
.flow-group #leave-select-type {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.flow-group #leave-select-type .item {
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  align-items: center;
  padding: 3px 0;
  height: 40px;
}
.flow-group #leave-select-type .item i {
  font-size: 24px;
  margin: 0 10px;
  color: var(--text-verylight);
}
.flow-group #leave-select-type .item .type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100vw - 150px);
}
.flow-group #leave-select-type .item .type .name {
  color: var(--text);
  font-size: 14px;
}
.flow-group #leave-select-type .item .type .balance {
  font-size: 11px;
  color: var(--text-light);
  margin-right: 10px;
}
.flow-group #leave-select-type .item.selected {
  background-color: var(--list-item-selected);
  border-radius: 20px;
}
.flow-group #leave-select-type .item.selected i {
  color: #FFFFFF;
}
.flow-group .calendar {
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--text);
}
.flow-group .calendar .nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.flow-group .calendar .days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.flow-group .calendar .days div {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 14.285%;
  height: 40px;
}
.flow-group .calendar .days div.name {
  font-weight: bold;
  border-bottom: 1px solid var(--text-extralight);
}
.flow-group .calendar .days div.day {
  cursor: pointer;
}
.flow-group .calendar .days div.day.today {
  border: 2px solid var(--calendar-day-today);
  border-radius: 20px 20px 20px 20px;
}
.flow-group .calendar .days div.day.selected {
  border: none;
  background-color: var(--calendar-day-selected);
  border-radius: 20px 20px 20px 20px;
}
.flow-group .calendar .days div.day.selected.start {
  border-radius: 20px 0 0 20px;
}
.flow-group .calendar .days div.day.selected.end {
  border-radius: 0 20px 20px 0;
}
.flow-group .calendar .days div.day.fill {
  border: none;
  background-color: var(--calendar-day-selected);
  border-radius: 0 0 0 0;
}
.flow-group #leave-summary {
  text-align: center;
}
.flow-group #leave-summary .avatar {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.flow-group #leave-summary .name {
  color: var(--text);
  font-size: 14px;
  margin-bottom: 3px;
}
.flow-group #leave-summary .job {
  font-size: 9px;
  color: var(--text-verylight);
  text-transform: uppercase;
}
.flow-group #leave-summary .totaldays {
  color: var(--text-light);
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
}
.flow-group #leave-summary .totaldays .label {
  background-color: var(--text-light);
  color: var(--bg);
  padding: 2px 6px;
  border-radius: 5px;
}
.flow-group #leave-summary .dates {
  position: relative;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
  color: var(--text);
}
.flow-group #leave-summary .dates::after {
  position: absolute;
  content: '';
  display: block;
  height: 2px;
  width: 50%;
  background-color: var(--text-extralight);
}
.flow-group #leave-summary .dates .start,
.flow-group #leave-summary .dates .end {
  position: relative;
  margin-top: 10px;
  font-size: 14px;
}
.flow-group #leave-summary .dates .start::after,
.flow-group #leave-summary .dates .end::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-extralight);
  border: 5px solid var(--flow-bg);
  left: calc(50% - 7px);
  top: -18px;
  z-index: 1;
}
.flow-group #leave-summary .type {
  margin: 10px 0 18px 0;
  text-align: center;
}
.flow-group #leave-summary .type i {
  font-size: 24px;
  color: var(--text-verylight);
  display: inline-block;
}
.flow-group #leave-summary .type .name {
  font-size: 14px;
  color: var(--text-verylight);
}
.flow-group #add-employee-summary {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.flow-group #add-employee-summary .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--text-extralight);
  font-size: 14px;
  font-weight: bold;
  color: var(--text);
}
.flow-group #add-employee-summary .row i.fa-check {
  color: #8EA604;
}
.flow-group #add-employee-summary .row i.fa-question {
  color: #EAEAEA;
}
.flow-group #add-employee-summary .row i.fa-times {
  color: #D84727;
}
.flow-group #add-employee-summary .summary-comment {
  font-size: 14px;
  font-weight: bold;
  color: #D84727;
}
/*
888    888 d8b          888                             
888    888 Y8P          888                             
888    888              888                             
8888888888 888 .d8888b  888888 .d88b.  888d888 888  888 
888    888 888 88K      888   d88""88b 888P"   888  888 
888    888 888 "Y8888b. 888   888  888 888     888  888 
888    888 888      X88 Y88b. Y88..88P 888     Y88b 888 
888    888 888  88888P'  "Y888 "Y88P"  888      "Y88888 
                                                    888 
                                               Y8b d88P 
                                                "Y88P"  
*/
#history-timeline {
  padding: 10px;
  overflow-x: hidden;
}
#history-timeline .date {
  color: var(--card-bg);
  font-size: 13px;
  margin: 10px 0 20px 0;
  background-color: var(--text);
  padding: 10px 15px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  position: relative;
}
#history-timeline .item-container {
  position: relative;
}
#history-timeline .item-container::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 40px;
  width: 0px;
  height: 20px;
  border-left: 3px dotted var(--text);
}
#history-timeline .item-container .pull_delete .pd_btn {
  border-radius: 10px 0 0 10px;
  background-color: var(--button-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
#history-timeline .item-container .locked::after {
  position: absolute;
  top: 10px;
  right: 10px;
  content: '\f023';
  font-family: 'Font Awesome 5 Pro';
  font-weight: bold;
  font-size: 14px;
  color: var(--text-verylight);
}
#history-timeline .item-container .item {
  display: flex;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}
#history-timeline .item-container .item .meta {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 80px;
  background-color: var(--card-bg);
  padding: 10px;
  border-radius: 10px 0 0 10px;
  box-sizing: border-box;
}
#history-timeline .item-container .item .meta .icon {
  font-size: 24px;
  color: var(--icons);
  margin-bottom: 3px;
}
#history-timeline .item-container .item .meta .time {
  color: var(--text-light);
  font-size: 11px;
}
#history-timeline .item-container .item .details {
  margin-left: 0px;
  width: calc(100vw - 100px);
  color: var(--text);
  background-color: var(--card-bg);
  padding: 10px;
  border-radius: 0 10px 10px 0;
  box-sizing: border-box;
}
#history-timeline .item-container .item .details .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
#history-timeline .item-container .item .details .description {
  font-size: 14px;
}
#history-timeline .item-container .closepay .item .meta {
  background-color: var(--text-verylight);
}
#history-timeline .item-container .closepay .item .meta .icon {
  color: var(--bg);
}
#history-timeline .item-container .closepay .item .meta .time {
  color: var(--bg);
}
#history-timeline .item-container .closepay .item .details {
  background-color: var(--text-verylight);
  color: var(--bg);
}
#history-empty {
  text-align: center;
  margin-top: 120px;
}
#history-empty .icon {
  color: rgba(255, 255, 255, 0.8);
  font-size: 65px;
}
#history-empty .label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 32px;
  font-family: 'Caveat', cursive;
}
/*
88888888888                         888
    888                             888
    888                             888
    888   .d88b.   8888b.  .d8888b  888888
    888  d88""88b     "88b 88K      888
    888  888  888 .d888888 "Y8888b. 888
    888  Y88..88P 888  888      X88 Y88b.
    888   "Y88P"  "Y888888  88888P'  "Y888
*/
#toast {
  z-index: 99999999;
  position: fixed;
  top: -120px;
  width: 100vw;
  min-height: 100px;
  display: flex;
  padding: 50px 20px 20px 20px;
  box-sizing: border-box;
  color: #FFFFFF;
  transition: top 0.3s;
}
#toast.active {
  top: 0px;
}
#toast .icon {
  margin-right: 20px;
}
#toast .icon::after {
  font-family: 'Font Awesome 5 Pro';
  font-size: 2rem;
  font-weight: bold;
}
#toast .content {
  display: flex;
  flex-direction: column;
}
#toast .content .title {
  font-weight: bold;
  font-size: 1rem;
}
#toast .content .message {
  font-size: 0.8rem;
}
#toast.success {
  background-color: #8EA604;
}
#toast.success .icon::after {
  content: '\f058';
}
#toast.info {
  background-color: #2E5266;
}
#toast.info .icon::after {
  content: '\f05a';
}
#toast.error {
  background-color: #D84727;
}
#toast.error .icon::after {
  content: '\f06a';
}
.countdown {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.countdown .label {
  position: relative;
  margin-top: -30px;
  color: #FFFFFF;
  font-size: 11px;
  text-transform: uppercase;
}
.gauge-container {
  width: 150px;
  height: 150px;
  display: block;
  padding: 0px 0 0 0;
}
.gauge-container > .gauge .dial {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 5;
  fill: rgba(0, 0, 0, 0);
  stroke-linecap: round;
}
.gauge-container > .gauge .value {
  stroke: #FFFFFF;
  stroke: #ffffff;
  stroke-width: 5;
  fill: rgba(0, 0, 0, 0);
  stroke-linecap: round;
}
.gauge-container > .gauge .value-text {
  fill: #ffffff;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 2.5em;
}
.ct-chart .ct-series-a .ct-bar {
  stroke: #2E5266;
}
.ct-chart .ct-series-b .ct-bar {
  stroke: #D84727;
}
.ct-chart .ct-grid {
  stroke: var(--text-verylight);
}
.ct-chart .ct-label {
  color: var(--text-verylight);
}
.pull_delete {
  position: relative;
  width: calc(100% + 120px) !important;
}
.pull_delete.trans {
  transition: all 0.4s;
}
.pull_delete .pd_btn {
  position: absolute !important;
  right: -10px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 120px !important;
  color: #ffffff !important;
  text-align: center !important;
}
.pull_delete .pd_btn::before {
  content: 'Undo';
  font-style: normal !important;
}