:root {
  --primary: #3d5866;
}

body {
  background-color: #f0f4f6;
}

.primary {
  background-color: var(--primary);
}

.primary:hover {
  background-color: #4c6e80;
}

.modal .modal-content {
  padding: 10px;
}

.card {
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 10px, rgba(0, 0, 0, 0.09) 0px 1px 2px;
}

.click-able {
  cursor: pointer;
}

.card .card-action {
  border-top: none;
  padding: 10px 24px;
}

.input-field input[type=text]:focus + label {
  color: var(--primary);
}

.input-field input[type]:not([readonly]),
.input-field input[type]:focus:not([readonly]),
.input-field textarea:not([readonly]),
.input-field textarea:focus:not([readonly]) {
  border-bottom: 1px solid var(--primary);
}

.dropdown-content li > a,
.dropdown-content li > span {
  color: var(--primary);
}