.memo-component {
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
  box-sizing: border-box; }
  .memo-component__date span {
    font-weight: bold;
    margin-right: 0.5em; }
  .memo-component__date input {
    border: none;
    border-bottom: 2px solid #D1D1D1;
    border-radius: unset; }
    .memo-component__date input:focus {
      border: none;
      border-bottom: 2px solid #33C3F0; }
  .memo-component textarea {
    display: block;
    margin: 0;
    resize: none;
    height: 12em; }
.clock-component {
  font-size: 2em;
  text-align: center; }
/* Define Base Settings
============================================================================ */
/* Define Mix-in Object
============================================================================ */
.application {
  width: 70%;
  margin: 10px auto; }
  @media (max-width: 768px) {
    .application {
      width: 90%; } }
  .application .waiting {
    cursor: wait;
    color: red;
    border-color: red;
    background-color: white; }
.app-page__menu-button {
  padding: 0;
  font-size: 8px; }

.app-page hr {
  margin: 2rem 0; }
.work-component {
  padding: 10px;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
  box-sizing: border-box;
  width: 48%;
  margin-left: 4%; }
  .work-component__finish {
    color: #FFF;
    background-color: #F06033;
    border-color: #F06033; }
    .work-component__finish:hover {
      color: #FFF;
      background-color: #D3481D;
      border-color: #D3481D; }
  .work-component:first-child {
    margin-left: 0; }
  .work-component button {
    margin-bottom: 0; }
  .work-component img {
    display: block;
    margin: 0 auto;
    margin-bottom: 10px; }
/* Define Base Settings
============================================================================ */
/* Define Mix-in Object
============================================================================ */
.login-page__logo {
  display: block;
  margin: 30px auto; }
  @media (max-width: 768px) {
    .login-page__logo {
      width: 240px;
      height: 74px; } }
.expense-component {
  position: relative;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #E1E1E1;
  border-radius: 4px;
  box-sizing: border-box; }
  .expense-component__date span {
    font-weight: bold;
    margin-right: 0.5em; }
  .expense-component__date input {
    border: none;
    border-bottom: 2px solid #D1D1D1;
    border-radius: unset; }
    .expense-component__date input:focus {
      border: none;
      border-bottom: 2px solid #33C3F0; }
  .expense-component__receipt-group {
    height: 38px;
    line-height: 38px;
    vertical-align: middle; }
    .expense-component__receipt-group span {
      margin-right: 0.5em; }
  .expense-component__remove-button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 5px;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 28px; }
  .expense-component textarea {
    margin: 0; }
.expense-sub-page__ctrls {
  text-align: center; }
  .expense-sub-page__ctrls button {
    margin: 0 10px; }
.calendar-sub-page caption {
  font-weight: bold; }

.calendar-sub-page th:first-child, .calendar-sub-page td:first-child {
  padding-left: 15px;
  padding-right: 15px; }

.calendar-sub-page td {
  white-space: pre-line; }

.calendar-sub-page__edit {
  margin: 0;
  margin-right: 1em;
  padding: 0 10px; }
.account-sub-page__ctrls {
  text-align: center; }
/* Define Base Settings
============================================================================ */
/* Define Mix-in Object
============================================================================ */
.edit-modal-component {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7); }
  .edit-modal-component__caption {
    display: block;
    font-weight: bold; }
  .edit-modal-component__ctrls {
    text-align: center;
    margin-top: 10px; }
    .edit-modal-component__ctrls button {
      margin: 0 10px; }
  .edit-modal-component .container {
    background: #FFF;
    border-radius: 10px;
    width: 70%;
    margin: 10px auto;
    padding: 10px; }
    @media (max-width: 768px) {
      .edit-modal-component .container {
        width: 90%; } }