form {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-flow: column;
  gap: 8px;
  max-width: -moz-available;
  max-width: 600px;
  border: 6px solid #e5e7eb;
  border-radius: 12px;
  background-color: #f3f4f6;
  padding: 16px;
  margin-bottom: 16px;
}
form div {
  display: flex;
  flex-wrap: wrap;
}

label {
  min-width: 30%;
}

input[type=text], input[type=password], select {
  min-width: 65%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
}

textarea {
  min-width: 45%;
  height: 150px;
  padding: 10px;
}

input[type=submit] {
  width: 100%;
  background-color: #04AA6D;
  color: white;
  padding: 14px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  label,
  input[type=text],
  input[type=submit],
  select, textarea {
    flex: 100%;
    min-width: fit-content();
  }
}
.btn {
  padding: 8px;
  border: none;
  background: #d1d5db;
}
.btn:hover {
  background-color: #f3f4f6;
}

.btn-primary {
  background: #a3e635;
}

.form-hidden {
  display: none;
}

/* Inline | https://crm.dev:9443/client/3/edit */
fieldset {
  display: grid;
  gap: 16px;
  max-width: -moz-available;
  width: -webkit-fill-available;
  width: -moz-available;
}

#actions {
  display: flex;
  justify-content: flex-end;
}

.add-event {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 16px;
  flex-direction: row;
}
.add-event input {
  width: 100%;
}
.add-event .event-base {
  flex-grow: 3;
  flex-basis: 16px;
}
.add-event .event-base input {
  width: 100%;
}
.add-event .event-base div {
  width: -moz-available;
  width: -webkit-fill-available;
}
.add-event .event-note {
  flex: 1;
  display: flex;
  flex-direction: column;
  order: 2;
}

.client-details .icon-address:after {
  content: url('data: image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 10L3 8M3 8L10 1L17 8M3 8V18C3 18.5523 3.44772 19 4 19H7M17 8L19 10M17 8V18C17 18.5523 16.5523 19 16 19H13M7 19C7.55228 19 8 18.5523 8 18V14C8 13.4477 8.44772 13 9 13H11C11.5523 13 12 13.4477 12 14V18C12 18.5523 12.4477 19 13 19M7 19H13" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: inline-block;
}
.client-details .icon-email:after {
  content: url('data: image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 10L3 8M3 8L10 1L17 8M3 8V18C3 18.5523 3.44772 19 4 19H7M17 8L19 10M17 8V18C17 18.5523 16.5523 19 16 19H13M7 19C7.55228 19 8 18.5523 8 18V14C8 13.4477 8.44772 13 9 13H11C11.5523 13 12 13.4477 12 14V18C12 18.5523 12.4477 19 13 19M7 19H13" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: inline-block;
}
.client-details .icon-phone:after {
  content: url('data: image/svg+xml, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5C3 3.89543 3.89543 3 5 3H8.27924C8.70967 3 9.09181 3.27543 9.22792 3.68377L10.7257 8.17721C10.8831 8.64932 10.6694 9.16531 10.2243 9.38787L7.96701 10.5165C9.06925 12.9612 11.0388 14.9308 13.4835 16.033L14.6121 13.7757C14.8347 13.3306 15.3507 13.1169 15.8228 13.2743L20.3162 14.7721C20.7246 14.9082 21 15.2903 21 15.7208V19C21 20.1046 20.1046 21 19 21H18C9.71573 21 3 14.2843 3 6V5Z" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: inline-block;
}
.client-details .icon-mobile:after {
  content: url('data:image/svg+xml, <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18H12.01M8 21H16C17.1046 21 18 20.1046 18 19V5C18 3.89543 17.1046 3 16 3H8C6.89543 3 6 3.89543 6 5V19C6 20.1046 6.89543 21 8 21Z" stroke="%23111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  display: inline-block;
}

.client-details th {
  position: relative;
  padding-right: 8px;
  padding-left: 8px;
}

.calendar-container {
  float: right;
  background: #f1f5f9;
  width: 320px;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.calendar-container header {
  display: flex;
  align-items: center;
  padding: 15px 20px 8px;
  justify-content: space-between;
}

header .calendar-navigation {
  display: flex;
}

header .calendar-navigation span {
  height: 30px;
  width: 30px;
  margin: 0 2px;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  user-select: none;
  color: #aeabab;
  font-size: 1.4rem;
}

.calendar-navigation span:last-child {
  margin-right: -8px;
}

header .calendar-navigation span:hover {
  background: #f2f2f2;
}

header .calendar-current-date {
  font-weight: 500;
  font-size: 1.2rem;
}

.calendar-body {
  padding: 10px;
}

.calendar-body ul {
  list-style: none;
  flex-wrap: wrap;
  display: flex;
  text-align: center;
}

.calendar-body .calendar-dates {
  margin-bottom: 10px;
  width: 100%;
}

.calendar-body li {
  width: calc(100% / 7);
  height: 30px;
  line-height: 30px;
  font-size: 0.9rem;
  color: #414141;
  margin-top: 20px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.calendar-body .calendar-weekdays li {
  cursor: default;
  font-weight: 500;
  font-size: 0.85rem;
}

.calendar-dates li.inactive {
  color: #aaa;
  cursor: default;
}

.calendar-dates li.active {
  color: #fff;
}

.calendar-dates li::before {
  position: absolute;
  content: "";
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.calendar-dates li.active::before {
  background: #3b82f6;
}

.calendar-dates li:not(.active):not(.highlight):hover::before {
  background: #858484;
}

.calendar-dates li.highlight {
  background: transparent !important;
  border: 2px dotted #38f3b1 !important;
  border-radius: 50%;
  position: relative;
  z-index: 10;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: calc(100% / 7);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

a {
  color: #000;
}

h1 {
  margin: 16px 0px 8px 0px;
}

h2, h3 {
  margin: 16px 0px 8px 0px;
}

header {
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 8px;
  display: table;
  width: -webkit-fill-available;
  width: -moz-available;
}
header .logo {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
}
header nav ul li {
  display: table-cell;
  vertical-align: middle;
  margin-left: 2rem;
}
header nav ul li a {
  padding: 8px;
}
header nav ul li a:hover {
  background-color: #f3f4f6;
}

main {
  width: auto;
  max-width: 960px;
  margin: 0 auto;
}
main > article {
  margin-top: 16px;
}

.alert {
  width: 100%;
  text-align: center;
}
.alert .alert-danger {
  border: 2px solid red;
  padding: 8px;
  background-color: #ffdfdf;
}

table {
  border: 1px solid #9ca3af;
  border-collapse: collapse;
  padding: 4px;
  width: unset;
}
@media (max-width: 540px) {
  table {
    width: 100%;
  }
  table thead {
    display: none;
  }
  table tr, table td {
    display: block;
    width: 100%;
  }
  table tr {
    margin-bottom: 1rem;
  }
}
table tr.disabled {
  background: grey;
  display: none;
}
table tr.odd:hover {
  background-color: #e5e7eb;
}
table tr.even:hover {
  background-color: #d1d5db;
}
table .even {
  background-color: #f3f4f6;
}
table thead tr th {
  background-color: #e5e7eb;
  border-bottom: 1px solid #111827;
}

table {
  border: none;
  border-collapse: collapse;
  padding: 4px;
  width: unset;
  box-shadow: 4px 4px 17px -10px #a8a29e;
  margin-bottom: 8px;
}
table thead tr th {
  background-color: #e2e8f0;
  border-bottom: 2px solid #64748b;
  color: #1e293b;
  padding: 8px;
}
table td {
  padding: 8px;
}

/*# sourceMappingURL=app.css.map */