/************* BASE */
@font-face {
  font-family: "Jana-Regular";
  src: url("../fonts/Janna-LT-Regular.ttf") format("truetype");
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: "Jana-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #111111;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

a {
  color: #b83f45;
  text-decoration: underline;
}

a:visited,
a:hover,
a:active {
  /* color: #5a3f45; */
}

h1 {
  color: #b83f45;
  font-size: 60px;
  font-weight: 200;
}

h3 {
  color: #b83f45;
  /* font-size: 24px; */
  font-weight: 300;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px dashed #c5c5c5;
  border-bottom: 1px dashed #f7f7f7;
}
/* hr {
  border-top: 1px solid #d9d9d9;
  border-bottom: none;
} */

button {
  margin: 0;
  padding: 0;
  border: 0;
  padding: 10px;
  border-radius: 3px;
  font-weight: 700;
  background-color: transparent;
  cursor: pointer;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button.btn-red {
  background: #d83f45;
  color: white;
}

button.btn-red:hover {
  background-color: #c83f45;
}

label {
  display: block;
  margin: 0 0 3px 0;
  font-weight: 500;
}

input {
  box-sizing: border-box;
  padding: 10px 5px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}

input[type="text"]:not(:focus):invalid,
input[type="number"]:not(:focus):invalid,
input[type="email"]:not(:focus):invalid,
input[type="password"]:not(:focus):invalid {
  color: red;
  outline-color: red;
}

textarea {
  box-sizing: border-box;
  padding: 10px 5px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}

select {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
}

.hidden {
  display: none;
}

.app {
  padding: 15px;
  background: #fff;
  margin: 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.messages {
  padding: 10px;
  margin: 10px 0;
  background: #ccf2b3;
  border-radius: 5px;
}
/* background image by Cole Bemis <https://feathericons.com> */
.messages p {
  font-weight: 400;
  line-height: 1.3;
  /* color: #d83f45; */
  padding-left: 20px;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d83f45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-alert-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); */
  /* background-repeat: no-repeat; */
  /* background-position: center left; */
  margin: 5px 0;
}

/************* LOGIN */
.login header {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  margin-top: 30px;
}

.login h1 {
  padding: 0 10px;
}

.login label,
.login input {
  width: 100%;
}

/* .prompt {
  max-width: 400px;
  margin: 10px auto;
  padding: 25px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
} */

.login button {
  display: block;
  width: 100%;
}

form section {
  margin: 0 0 20px 0;
}

p.help {
  text-align: center;
  font-weight: 400;
}

/************* HOMEPAGE */
/************* HEADER */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.header ul {
  margin: 0;
  list-style: none;
  text-align: center;
  padding: 0;
}

.header li {
  display: inline-block;
  height: 40px;
  margin: 0;
  font-weight: 400;
  line-height: 40px;
}

.header li.title {
  font-size: 16px;
  color: #b83f45;
  font-weight: 600;
}

.header li.subtitle {
  font-size: 12px;
  color: #7f7f7f;
}

.header button {
  height: 40px;
}

.header button:hover {
  border-bottom: 1px solid #db7676;
  cursor: pointer;
}

/* background image by Cole Bemis <https://feathericons.com> */
.header .user {
  padding-right: 20px;
  margin-left: 20px;
}

/* background image by Cole Bemis <https://feathericons.com> */
.header .logout {
  padding-right: 20px;
  padding-top: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center right;
}

/************* NAVBAR */
ul.navbar {
  margin: 10px 0 0;
  list-style: none;
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

.navbar li {
  padding: 0;
  margin: 0 0 0 10px;
}

.navbar li a {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: center right;
}
.navbar li.selected a {
  text-decoration: none;
}
.navbar li.daily a {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>');
}

.navbar li.clients a {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>');
}

.navbar li.stats a {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>');
}

/************* FORMS */
.app-forms button {
  width: 130px;
  padding: 5px 10px;
}

.app-forms label {
  margin: 0 0 3px 0;
  min-width: 90px;
  display: inline-block;
}

.nav-client {
  text-align: left;
}
/* background image by Cole Bemis <https://feathericons.com> */
.nav-client a {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user-plus"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>');
}

/************* TABLE */
table {
  width: 100%;
}
table th,
table td {
  padding: 8px 4px;
}

.table-clients .edit {
  width: 25%;
}

.file-icon {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>');
}

.edit-icon {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>');
}
.delete-icon {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>');
}
.add-icon {
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: center right;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>');
}

.table-clients tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.table-client {
  margin-bottom: 20px;
}

.table-client tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}
.table-client .daily {
  background-color: #c4c4c4;
}
.table-client tfoot tr {
  background-color: #d4d4d4;
}