monopyly 1.4.7__py3-none-any.whl → 1.5.0__py3-none-any.whl

monopyly/static/css/style.css

@@ -46,6 +46,12 @@ form {
   width: 50%;
   margin: auto;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form {
+    width: 90%;
+  }
+}
 
 input {
   color: inherit;
@@ -74,6 +80,7 @@ pre code {
   margin: 5px 0;
   padding: 10px 20px;
   border: 1px solid #eeeeee;
+  overflow: auto;
 }
 
 code {
@@ -98,7 +105,7 @@ header#masthead {
   border-style: solid;
   border-color: var(--moneytree-leaves);
   background-color: var(--masthead-color);
-  opacity: 0.9;
+  opacity: 0.95;
 }
 
 #masthead a {
@@ -112,50 +119,193 @@ header#masthead {
   margin: 0 auto;
 }
 
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #masthead .container a {
+    z-index: 98; /* ensure the logo is on top of the header menu */
+  }
+}
+
 .monopyly-logo {
   margin: 0;
   color: white;
   font-size: 1.7em;
   text-transform: uppercase;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .monopyly-logo {
+    font-size: 1.2em;
+  }
+}
 
 .monopyly-logo:hover {
   filter: brightness(0.95);
 }
 
+.monopyly-logo .development-mode {
+  font-weight: normal;
+  text-transform: none;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .monopyly-logo .development-mode {
+    font-size: 0.6em;
+  }
+}
+
 
 /*
  * Display navigation links inline
  */
-#nav-menu {
+#header-menu {
+  display: flex;
+  flex-direction: column;
   margin-left: auto;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #header-menu {
+    position: fixed;
+    top: 0;
+    width: 90%;
+    align-items: flex-end;
+    z-index: 97;
+  }
+}
+
+#header-menu a.toggle-button {
+  display: none;
+  align-items: center;
+  height: var(--masthead-height);
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #header-menu a.toggle-button {
+    display: flex;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #header-menu ul.menu-links {
+    display: none;
+    flex-direction: column;
+    list-style-type: none;
+    width: min-content;
+    margin: 0;
+    padding: 0;
+    border-top: 3px solid var(--moneytree-leaves);
+  }
+}
 
-#nav-menu li {
+#header-menu li {
   display: inline;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #header-menu li {
+    padding: 15px 25px;
+    border-bottom: 1px solid gray;
+    border-right: 2px solid gray;
+    border-left: 1px solid gray;
+    background-color: var(--masthead-color);
+    font-weight: bold;
+    white-space: nowrap;
+    letter-spacing: 0.25px;
+  }
+  #header-menu li:last-of-type {
+    padding-bottom: 15px;
+    border-bottom: 2px solid gray;
+  }
+}
 
-#nav-menu li + li {
+#header-menu li + li {
   margin-left: 35px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #header-menu li + li {
+    margin-left: 0;
+  }
+}
 
-#nav-menu li a {
+#header-menu li a {
   color: #bbbbbb;
 }
 
-#nav-menu li a:hover {
+#header-menu li a:hover {
   color: #cdcdcd;
 }
 
-#nav-menu li .username {
+#header-menu li .username {
   color: #777777;
 }
 
-#nav-menu li .username:hover {
+#header-menu li .username:hover {
   color: var(--moneytree-leaves);
 }
 
 
+/*
+ * Style the mobile icon for toggling the mobile header navigation menu
+ */
+.mobile-menu {
+  display: none;
+  width: 50px;
+  user-select: none;
+  cursor: pointer;
+  transition: transform 300ms;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .mobile-menu {
+    display: block;
+  }
+}
+
+.mobile-menu-rotate.active {
+  transform: rotate(45deg);
+}
+
+.line {
+  fill: none;
+  transition: stroke-dasharray 300ms, stroke-dashoffset 300ms;
+  stroke: white;
+  stroke-width: 5.5;
+  stroke-linecap: round;
+}
+
+.mobile-menu .top {
+  stroke-dasharray: 40 160;
+}
+
+.mobile-menu .middle {
+  stroke-dasharray: 40 142;
+  transform-origin: 50%;
+  transition: transform 300ms;
+}
+
+.mobile-menu .bottom {
+  stroke-dasharray: 40 85;
+  transform-origin: 50%;
+  transition: transform 300ms, stroke-dashoffset 300ms;
+}
+
+.mobile-menu.active .top {
+  stroke-dashoffset: -64px;
+}
+
+.mobile-menu.active .middle {
+  //stroke-dashoffset: -20px;
+  transform: rotate(90deg);
+}
+
+.mobile-menu.active .bottom {
+  stroke-dashoffset: -64px;
+}
+
+
 /*
  * Create a footer with site information
  */
@@ -168,6 +318,12 @@ footer#site-info {
   font-size: 9pt;
   text-align: center;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #site-info p {
+    font-size: 8pt;
+  }
+}
 
 #site-info span {
   padding: 0 5px;
@@ -188,6 +344,13 @@ footer#site-info {
 #page .container {
   width: 80%;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #page .container {
+    width: 90%;
+    margin: auto;
+  }
+}
 
 aside.sidebar {
   display: flex;
@@ -198,6 +361,12 @@ aside.sidebar {
   min-width: 50px;
   margin-top: 50px; /* account for content header */
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  aside.sidebar {
+    display: none;
+  }
+}
 
 #content-header h1 {
   height: 50px;
@@ -209,21 +378,44 @@ aside.sidebar {
   font-size: 2em;
   letter-spacing: -2px;
 }
-
-#content-header h1.error {
-  text-align: left;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #content-header h1 {
+    font-size: 1.8em;
+  }
 }
 
 
 /*
  * Provide styles for error pages
  */
-.error span.code {
+#content-header h1.error {
+  text-align: left;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #content-header h1.error {
+    height: 100px;
+    font-size: 2em;
+  }
+}
+
+#content-header h1.error span.code {
   margin-left: 30px;
   color: var(--silver-dollar);
   font-weight: 300;
   letter-spacing: 1px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #content-header h1.error span.code {
+    display: block;
+    height: 30px;
+    margin-top: 15px;
+    margin-left: 0;
+    font-size: 0.75em;
+  }
+}
 
 .custom-error-content p {
   font-size: 18pt;
@@ -264,7 +456,6 @@ aside.sidebar {
 }
 
 .button-block {
-  margin: 15px 0;
   border: 1px solid var(--border-gray);
   border-radius: 10px;
   box-shadow: 1px 1px 3px #bbbbbb;
@@ -273,14 +464,6 @@ aside.sidebar {
   color: inherit;
 }
 
-.button-block:first-of-type {
-  margin-top: 0;
-}
-
-.button-block:last-of-type {
-  margin-bottom: 0;
-}
-
 .button-block:hover {
   filter: brightness(0.98);
   text-decoration: none;
@@ -290,6 +473,13 @@ aside.sidebar {
   color: inherit;
 }
 
+.highlight {
+  background-color: #fff9ee;
+  background-image: linear-gradient(135deg, #ffffff, 15%, #fff9ee, 85%, #ffffff);
+  color: sienna;
+  font-weight: 500;
+}
+
 .screenshot {
   width: 100%; /* override the markdown default */
   margin: 20px 0;
@@ -298,10 +488,10 @@ aside.sidebar {
 }
 
 .group-stack {
-  margin: 15px 10px 25px;
   padding: 20px 30px;
   border-radius: 15px;
   box-shadow: 0 0 20px #eeeeee;
+  box-sizing: border-box;
   background-color: #eef5eb;
 }
 
@@ -321,6 +511,12 @@ aside.sidebar {
   font-weight: 400;
 }
 
+.group-stack .stack-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
 .paid-notice {
   color: var(--moneytree-leaves);
   font-weight: bold;
@@ -351,7 +547,7 @@ aside.sidebar {
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.75);
-  z-index: 10;
+  z-index: 50;  /* in front of content, but behind the header */
 }
 
 .modal {
@@ -373,25 +569,17 @@ aside.sidebar {
 /*
  * Style forms
  */
-form.transaction {
-  min-width: 300px;
-}
-
 form .form-line {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
+  column-gap: 5px;;
 }
 
 form .form-field {
-  margin-left: 0;
   flex-grow: 1;
 }
 
-form .form-line .form-field ~ .form-field {
-  /* Only set margin for fields other than the first on a line */
-  margin-left: 5px;
-}
-
 form .add-info.buttons {
   margin: 20px 0;
 }
@@ -410,9 +598,15 @@ form .add-info.button {
 
 form label {
   display: block;
-  padding: 10px 0;
+  margin: 15px 0 7.5px;
   font-size: 1.1em;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form label  {
+    font-size: 0.8em;
+  }
+}
 
 form button,
 form input,
@@ -470,6 +664,13 @@ form button .icon {
   margin: 0 10px;
   filter: brightness(0.8);
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form button .icon {
+    height: 30px;
+    width: 30px;
+  }
+}
 
 form button.dark-background .icon {
   filter: brightness(1.2);
@@ -508,9 +709,28 @@ form .subform .close.button {
 /*
  * Style transaction forms
  */
+form.transaction {
+  min-width: 300px;
+}
+
+form.transaction div.form-suggestion {
+  margin: 5px 0 ;
+  color: #999999;
+  font-size: 11pt;
+}
+
+form.transaction div.form-suggestion .suggested-value {
+  font-weight: bold;
+}
+
+form.transaction div.form-suggestion .suggested-value:hover {
+  color: var(--moneytree-leaves);
+  cursor: pointer;
+}
+
 form .subtotal-field {
   flex: 1;
-  min-width: 100px;
+  min-width: 125px;
 }
 
 form .subtotal-field input.currency {
@@ -546,7 +766,7 @@ form .autocomplete-box {
   position: absolute;
   top: 98%;
   left: 0;
-  z-index: 99;
+  z-index: 40;  /* in front of most content, but behind the header */
   width: 100%;
   padding-right: 10px;
   border: 1px solid var(--silver-dollar);
@@ -589,7 +809,6 @@ form .autocomplete-box .item.active {
 .sidebar-menu div:first-of-type {
   margin-top: 5px;
 }
-
 .sidebar-menu div:last-of-type {
   margin-bottom: 5px;
 }
@@ -848,16 +1067,45 @@ form .autocomplete-box .item.active {
 }
 
 .box-table .box-row {
+  padding: 10px;
   border-top: 0.5px solid var(--border-gray);
   border-bottom: 0.5px solid var(--border-gray);
   background-color: #f5f5f5;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .box-table .box-row {
+    font-size: 0.8em;
+  }
+}
 
-.box-table .box-row:hover {
+.box-table .box-row.action:hover {
   cursor: pointer;
   filter: brightness(0.98);
 }
 
+.box-table .box-header {
+  margin: 0;
+  padding: 10px;
+  border-bottom: 2px solid var(--border-gray);
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .box-table .box-header {
+    font-size: 1.2em;
+  }
+}
+
+.group-stack .box-table .box-row {
+  padding: 25px 30px;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .group-stack .box-table .box-row {
+    padding: 15px 30px;
+  }
+}
+
 
 /*
  * Style the card filter
@@ -865,12 +1113,13 @@ form .autocomplete-box .item.active {
 #card-filter {
   display: flex;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px 4px;
   margin-bottom: 20px;
 }
 
 #card-filter .card {
   position: relative;
-  margin: 0 3px;
   padding: 1px 10px;
   border-radius: 10px;
   background-color: #eeeeee;
@@ -1029,6 +1278,12 @@ form .autocomplete-box .item.active {
   color: #666666;
   font-size: 12pt;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transaction .description {
+    font-size: 11pt;
+  }
+}
 
 .transaction .description-header {
   display: flex;
@@ -1061,9 +1316,25 @@ form .autocomplete-box .item.active {
 
 .transactions-table .row {
   display: flex;
-  height: 100%;
-  width: 100%;
   align-items: center;
+  border-top: 0px solid var(--border-gray);
+  border-bottom: 1px solid var(--border-gray);;
+}
+
+.transactions-table .transaction.row {
+  flex-direction: column;
+  transition: border-bottom 0.2s ease,
+              border-top 0.2s ease;
+}
+
+.transactions-table .selected.transaction.row {
+  /*Make top & bottom borders approximately the same size */
+  border-top: 2px solid var(--border-gray);
+  border-bottom: 3px solid var(--border-gray);
+}
+
+.transactions-table .future.transaction.row {
+  color: #aaaaaa;
 }
 
 /* Define a region with row content (separate from actions/buttons) */
@@ -1081,50 +1352,74 @@ form .autocomplete-box .item.active {
   box-sizing: border-box;
   margin: 0 10px;
 }
-
-.transactions-table .date.column {
-  flex: 1;
-  min-width: 100px;
-  text-align: center;
+.transactions-table .column:first-of-type {
+  margin-left: 30px;
 }
-
-.transactions-table .merchant.column {
-  flex: 3;
-  min-width: 180px;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .column {
+    margin: 0 5px;
+  }
+  .transactions-table .column:first-of-type {
+    margin-left: 20px;
+  }
 }
 
-.transactions-table .balance.column,
-.transactions-table .amount.column {
-  flex: 1;
-  text-align: right;
+.transactions-table .text.column {
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.transactions-table .amount.column {
-  min-width: 100px;
+.transactions-table .date.column {
+  width: 80px;
+  min-width: 80px;
 }
 
-.transactions-table .balance.column {
-  min-width: 80px;
+.transactions-table .merchant.column {
+  flex: 6;
+  min-width: 180px;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .merchant.column {
+    min-width: 100px;
+  }
 }
 
 .transactions-table .notes.column {
-  flex: 4;
-  min-width: 175px;
-  white-space: nowrap;
-  overflow: hidden;
+  flex: 9;
+  min-width: 100px;
 }
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 600px) {
   /* Mobile layout */
   .transactions-table .notes.column {
     display: none;
   }
 }
 
-.transactions-table .notes.column:hover {
-  overflow: auto;
+
+.transactions-table .amount.column {
+  flex: 3;
+  min-width: 80px;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .amount.column {
+    min-width: 80px;
+  }
+}
+
+.transactions-table .balance.column {
+  flex: 1;
+  min-width: 80px;
 }
 
+.transactions-table .balance.column,
+.transactions-table .amount.column {
+  text-align: right;
+  white-space: nowrap;
+}
 
 .transactions-table .card.column {
   flex: 1;
@@ -1138,16 +1433,21 @@ form .autocomplete-box .item.active {
     margin-left: auto;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .card.column {
+    display: none;
+  }
+}
 
 .transactions-table .buttons.column {
-  min-width: 40px;
-  margin: 0 0 0 20px;
-  padding: 5px 10px;
+  width: 20px;
 }
-
-.transactions-table .titles,
-.transactions-table .transaction {
-  border-bottom: 1px solid var(--border-gray);
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .buttons.column {
+    display: none;
+  }
 }
 
 .transactions-table .titles {
@@ -1166,35 +1466,20 @@ form .autocomplete-box .item.active {
   display: inline;
 }
 
-.transactions-table .transaction {
+.transactions-table .transaction .buttons {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  transition: border 0.2s ease;
+  visibility: hidden;
 }
-
-.transactions-table .transaction.future {
-  color: #aaaaaa;
+.transactions-table .transaction:hover .buttons {
+  z-index: 10;
+  visibility: visible;
 }
-
-.transactions-table .transaction .condensed {
-  height: 25px;
-  transition: background-color 0.1s ease;
-}
-
-.transactions-table .transaction .condensed:hover {
-  background-color: #fafafa;
-}
-
-.transactions-table .transaction .buttons {
-  display: flex;
-  flex-direction: column;
-  visibility: hidden;
-}
-
-.transactions-table .transaction:hover .buttons {
-  z-index: 99;
-  visibility: visible;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .buttons {
+    display: none;
+  }
 }
 
 .transactions-table .transaction .button {
@@ -1220,138 +1505,175 @@ form .autocomplete-box .item.active {
   }
 }
 
-.transactions-table .selected.transaction {
-  /*Make top & bottom borders approximately the same size */
-  border-width: 3px;
-  border-top: 2px solid #eeeeee;
+.transactions-table .transaction .transaction-info {
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;  /* allow the info (columns) to collapse */
+}
+
+.transactions-table .transaction .condensed {
+  height: 25px;
+  width: 100%;
+  transition: background-color 0.1s ease;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .condensed {
+    height: 30px;
+  }
+}
+
+.transactions-table .transaction .condensed:hover {
+  background-color: #fafafa;
 }
 
 .transactions-table .transaction .expanded {
   display: none;
+  width: 100%;
   opacity: 0;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded {
+    margin: 5px 0 5px 0;
+  }
+}
 
-.transactions-table .transaction .expanded .row {
-  align-items: flex-start;
+.transactions-table .transaction .expanded .row-content {
+  margin: 5px 0;
 }
 
-.transactions-table .expanded .row-content {
-  align-items: flex-start;
-  margin: 20px 0;
+.transactions-table .transaction .expanded .transaction-info {
+  margin: 10px 0;
+}
+
+.transactions-table .transaction .expanded .setting {
+  display: flex;
+  flex: 15;
 }
 @media screen and (max-width: 1000px) {
-  .transactions-table .expanded .row-content {
-    margin-left: 28px;
+  .transactions-table .transaction .expanded .setting {
+    flex-direction: column
   }
 }
 
+.transactions-table .transaction .expanded .setting.column {
+  margin: 0;
+}
 @media screen and (max-width: 1000px) {
-  .transactions-table .expanded .date.column {
-    margin: 0;
+  .transactions-table .transaction .expanded .setting.column {
+    margin: 0 10px 0 30px;  /* revert to behaving like a normal column */
+  }
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded .setting.column {
+    margin-left: 20px;  /* revert to behaving like a normal column */
   }
 }
 
-.transactions-table .expanded .setting {
-  display: flex;
-  flex: 3;
+.transactions-table .transaction .expanded .date.column {
+  font-weight: bold;
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
-  .transactions-table .expanded .setting {
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 9;
+  .transactions-table .transaction .expanded .date.column {
+    margin-left: 0;
+    margin-bottom: 5px;
   }
 }
 
-.transactions-table .expanded .setting .date {
+.transactions-table .transaction .expanded .stacked-date {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  flex: 2;
-  padding-top: 3px;
+  width: min-content;
+  margin-left: 5px;
   font-weight: bold;
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
-  .transactions-table .expanded .setting .date {
-    align-items: flex-start;
+  .transactions-table .transaction .expanded .stacked-date {
+    margin-left: 0;
   }
 }
 
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
-  .transactions-table .expanded .setting .date .month,
-  .transactions-table .expanded .setting .date .day,
-  .transactions-table .expanded .setting .date .year {
+  .transactions-table .transaction .expanded .date .month,
+  .transactions-table .transaction .expanded .date .day,
+  .transactions-table .transaction .expanded .date .year {
     display: none;
   }
 }
 
-.transactions-table .expanded .setting .date .month {
+.transactions-table .transaction .expanded .date .month {
   margin-bottom: -10px;
   font-size: 18pt;
 }
 
-.transactions-table .expanded .setting .date .day {
+.transactions-table .transaction .expanded .date .day {
   font-size: 36pt;
 }
 
-.transactions-table .expanded .setting .date .year {
+.transactions-table .transaction .expanded .date .year {
   margin-top: -10px;
   font-size: 14pt;
   letter-spacing: 3px;
 }
 
-.transactions-table .expanded .setting .date .full {
+.transactions-table .transaction .expanded .date .full-date {
   display: none;
   color: #aaaaaa;
   font-size: 1.1em;
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
-  .transactions-table .expanded .setting .date .full {
+  .transactions-table .transaction .expanded .date .full-date {
     display: block;
   }
 }
 
-.transactions-table .expanded .setting .description {
-  flex: 13;
-  min-width: 250px;
+.transactions-table .transaction .expanded .description {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 200px;
 }
+
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
-  .transactions-table .expanded .setting .description {
-    width: 95%;
-    margin-top: 5px;
+  .transactions-table .transaction .expanded .description.column {
+    margin: 0;
   }
 }
 
-.transactions-table .transaction .expanded .setting .description-header {
+.transactions-table .transaction .expanded .description .description-header {
   transition: font-size 0.3s;
 }
 @media screen and (max-width: 1200px) {
   /* Statement disappear */
-  .transactions-table .transaction .expanded .setting .description-header {
+  .transactions-table .transaction .expanded .description .description-header {
     font-size: 22pt;
   }
 }
 @media screen and (max-width: 1050px) {
-  /* Disable transitions for mobile switch */
-  .transactions-table .transaction .expanded .setting .description-header {
+  /* Disable transitions for reduced view */
+  .transactions-table .transaction .expanded .description .description-header {
     transition: all 0s;
   }
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
-  .transactions-table .transaction .expanded .setting .description-header {
+  /* Condensed layout */
+  .transactions-table .transaction .expanded .description .description-header {
     font-size: 20pt;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded .description .description-header {
+    font-size: 14pt;
+  }
+}
 
-.transactions-table .transaction .expanded .setting .description-header .merchant,
-.transactions-table .transaction .expanded .setting .description-header .brief {
+.transactions-table .transaction .expanded .description .description-header .merchant,
+.transactions-table .transaction .expanded .description .description-header .brief {
   flex: 4;
   box-sizing: border-box;
   padding-right: 10px;
@@ -1368,6 +1690,12 @@ form .autocomplete-box .item.active {
   flex: 4;
   padding-right: 10px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded .setting .subtransaction-details .notes {
+    padding-right: 15px;
+  }
+}
 
 .transactions-table .transaction .expanded .setting .subtransaction-details .subtotal {
   flex: 1;
@@ -1400,9 +1728,8 @@ form .autocomplete-box .item.active {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  flex: 1;
+  flex: 5;
   height: 100%;
-  padding-right: 10px;
 }
 @media screen and (max-width: 1200px) {
   /* Statement disappear */
@@ -1411,7 +1738,7 @@ form .autocomplete-box .item.active {
   }
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
+  /* Condensed layout */
   .transactions-table .transaction .expanded .payment {
     flex-direction: column;
     justify-content: center;
@@ -1420,6 +1747,12 @@ form .autocomplete-box .item.active {
     margin-top: 15px;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded .payment {
+    margin-top: 30px;
+  }
+}
 
 .transactions-table .transaction .expanded .payment .statement {
   position: relative;
@@ -1505,11 +1838,17 @@ form .autocomplete-box .item.active {
   }
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
+  /* Condensed layout */
   .transactions-table .transaction .expanded .payment .card {
     height: 50px;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded .payment .card {
+    height: 30px;
+  }
+}
 
 .transactions-table .transaction .expanded .payment .card .card-background {
   height: 100%;
@@ -1542,7 +1881,7 @@ form .autocomplete-box .item.active {
   }
 }
 @media screen and (max-width: 1000px) {
-  /* Mobile layout */
+  /* Condensed layout */
   .transactions-table .transaction .expanded .payment .card-number {
     font-size: 0.5em;
   }
@@ -1554,15 +1893,24 @@ form .autocomplete-box .item.active {
   justify-content: space-between;
   align-self: flex-start;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .transactions-table .transaction .expanded .buttons {
+    margin-left: 10px;
+    z-index: 10;
+    visibility: visible;
+  }
+}
 
 .transactions-table .transaction .expanded .buttons a.button {
   margin: 3px 0;
 }
 
+
 /*
  * Style linked transaction overlays
  */
-#linked-transaction-display {
+#linked-transaction-display.modal {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1570,13 +1918,13 @@ form .autocomplete-box .item.active {
   height: 80%;
 }
 
-#linked-transaction-display #link {
+#linked-transaction-display.modal #link {
   width: 50px;
   height: 50px;
   background-size: 50px 50px;
 }
 
-#linked-transaction-display .buttons {
+#linked-transaction-display.modal .buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -1584,12 +1932,12 @@ form .autocomplete-box .item.active {
   width: 100%;
 }
 
-#linked-transaction-display .button {
+#linked-transaction-display.modal .buttons .button {
   height: 40px;
   width: 40px;
 }
 
-#linked-transaction-display .linked-transaction {
+#linked-transaction-display.modal .linked-transaction {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -1597,11 +1945,11 @@ form .autocomplete-box .item.active {
   padding: 20px 40px;
 }
 
-#linked-transaction-display .linked-transaction.selected {
+#linked-transaction-display.modal. linked-transaction.selected {
   border: 5px solid var(--moneytree-leaves);
 }
 
-#linked-transaction-display .linked-transaction .date {
+#linked-transaction-display.modal .linked-transaction .date {
   margin-bottom: 20px;
   color: #888888;
   font-size: 14pt;
@@ -1610,45 +1958,45 @@ form .autocomplete-box .item.active {
   text-align: right;
 }
 
-#linked-transaction-display .linked-transaction .description-header {
+#linked-transaction-display.modal .linked-transaction .description-header {
   display: flex;
 }
 
-#linked-transaction-display .linked-transaction .description-header .account {
+#linked-transaction-display.modal .linked-transaction .description-header .account {
   flex: 4;
   padding-right: 10px;
   font-size: 20pt;
 }
 
-#linked-transaction-display .linked-transaction .description-header .account-type {
+#linked-transaction-display.modal .linked-transaction .description-header .account-type {
   color: #888888;
   font-size: 16pt;
   font-weight: bold;
   text-transform: uppercase;
 }
 
-#linked-transaction-display .linked-transaction .description-header .total {
+#linked-transaction-display.modal .linked-transaction .description-header .total {
   flex: 1;
   margin-top: auto;
   font-size: 20pt;
   font-weight: bold;
 }
 
-#linked-transaction-display .linked-transaction .notes {
+#linked-transaction-display.modal .linked-transaction .notes {
   font-size: 12pt;
 }
 
-#linked-transaction-display .linked-transaction .buttons {
+#linked-transaction-display.modal .linked-transaction .buttons {
   display: flex;
   justify-content: flex-end;
   visibility: hidden;
 }
 
-#linked-transaction-display .linked-transaction:hover .buttons {
+#linked-transaction-display.modal .linked-transaction:hover .buttons {
   visibility: visible;
 }
 
-#linked-transaction-display .linked-transaction .button {
+#linked-transaction-display.modal .linked-transaction .button {
   height: 20px;
   width: 20px;
   margin: 0 5px;
@@ -1701,6 +2049,13 @@ form .autocomplete-box .item.active {
   min-width: 500px;
   margin: 0 0 0 0;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .summary-container {
+    width: 100%;
+    min-width: 250px;
+  }
+}
 
 .details .summary-box {
   display: flex;
@@ -1712,10 +2067,18 @@ form .autocomplete-box .item.active {
   box-shadow: 1px 1px 5px #dddddd;
   background-color: #f8f8f8;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .summary-box {
+    width: 80%;
+    padding: 20px 25px 30px;
+  }
+}
 
 .details .summary-box .balance {
   display: flex;
   justify-content: space-between;
+  width: 100%;
   margin: 20px 0;
   font-size: 72pt;
   font-weight: bold;
@@ -1723,6 +2086,10 @@ form .autocomplete-box .item.active {
   text-align: center;
 }
 
+.details .summary-box .balance svg {
+  width: 100%;
+}
+
 .details .summary-box .projected-balance .amount {
   color: var(--moneytree);
   font-weight: 500;
@@ -1735,6 +2102,12 @@ form .autocomplete-box .item.active {
 .details .summary-box .title {
   font-size: 28pt;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .summary-box .title {
+    font-size: 20pt;
+  }
+}
 
 .details .summary-box .suptitle,
 .details .summary-box .subtitle {
@@ -1745,7 +2118,7 @@ form .autocomplete-box .item.active {
 
 .details .summary-box .suptitle {
   margin-bottom: 10px;
-  font-size: 14pt;
+  font-size: 12pt;
 }
 
 .details .summary-box .subtitle {
@@ -1764,19 +2137,21 @@ form .autocomplete-box .item.active {
     margin-top: 50px;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .transactions-container {
+    width: 90%;
+    min-width: 200px;
+  }
+}
 
 .details .transactions-table {
   width: 100%;
   min-width: inherit;
 }
 
-.details .transactions-table .date.column {
-  flex: 1;
-}
-
 .details .transactions-table .merchant.column {
   flex: 4;
-  min-width: 150px;
 }
 
 .details .transactions-table .amount.column {
@@ -1784,98 +2159,112 @@ form .autocomplete-box .item.active {
   margin-left: auto;
 }
 
-.details .transactions-table .notes.column {
-  flex: 4;
-  min-width: 100px;
+.details .transactions-table .transaction .expanded .setting {
+  flex: 1;
 }
-
 @media screen and (max-width: 1500px) {
-  .details .transactions-table .expanded .row-content {
-    margin-left: 28px;
+  /* Condensed layout */
+  .details .transactions-table .transaction .expanded .setting {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }
 
 @media screen and (max-width: 1500px) {
-  .details .transactions-table .expanded .date.column {
-    margin: 0;
+  .details .transactions-table .transaction .expanded .setting.column {
+    margin: 0 10px 0 30px;  /* revert to behaving like a normal column */
   }
 }
-
-.details .transactions-table .expanded .setting {
-  width: 100%;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .transactions-table .transaction .expanded .setting.column {
+    margin-left: 20px;  /* revert to behaving like a normal column */
+  }
 }
+
 @media screen and (max-width: 1500px) {
-  /* Mobile layout */
-  .details .transactions-table .expanded .setting {
-    flex-direction: column;
+  /* Condensed layout */
+  .details .transactions-table .transaction .expanded .date {
     align-items: flex-start;
   }
 }
 
 @media screen and (max-width: 1500px) {
-  /* Mobile layout */
-  .details .transactions-table .expanded .setting .date {
-    align-items: flex-start;
+  /* Condensed layout */
+  .details .transactions-table .transaction .expanded .date.column {
+    margin-left: 0;
+    margin-bottom: 5px;
   }
 }
 
 @media screen and (max-width: 1500px) {
-  .details .transactions-table .expanded .setting .date .month,
-  .details .transactions-table .expanded .setting .date .day,
-  .details .transactions-table .expanded .setting .date .year {
+  /* Condensed layout */
+  .details .transactions-table .transaction .expanded .setting .date .month,
+  .details .transactions-table .transaction .expanded .setting .date .day,
+  .details .transactions-table .transaction .expanded .setting .date .year {
     display: none;
   }
 }
 
 @media screen and (max-width: 1500px) {
-  /* Mobile layout */
-  .details .transactions-table .expanded .setting .date .full {
+  /* Condensed layout */
+  .details .transactions-table .transaction .expanded .date .full-date {
     display: block;
   }
 }
 
 @media screen and (max-width: 1500px) {
-  /* Mobile layout */
-  .details .transactions-table .expanded .setting .description {
+  /* Condensed layout */
+  .details .transactions-table .transaction .expanded .description.column {
     width: 100%;
-    margin-top: 5px;
+    margin: 0;
   }
 }
 
 @media screen and (max-width: 1800px) {
   /* Statement disappear */
-  .details .transactions-table .expanded .setting .description-header {
+  .details .transactions-table .transaction .expanded .description .description-header {
     font-size: 22pt;
   }
 }
 @media screen and (max-width: 1550px) {
   /* Disable transitions for mobile switch */
-  .details .transactions-table .expanded .setting .description-header {
+  .details .transactions-table .transaction .expanded .description .description-header {
     transition: all 0s;
   }
 }
 @media screen and (max-width: 1500px) {
-  /* Statement disappear */
-  .details .transactions-table .expanded .setting .description-header {
+  /* Condensed layout (statement disappear) */
+  .details .transactions-table .transaction .expanded .description .description-header {
     font-size: 20pt;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .transactions-table .transaction .expanded .description .description-header {
+    font-size: 14pt;
+  }
+}
 
-.details .transactions-table .expanded .payment {
-  flex: 0;
-  padding: 0;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .details .transactions-table .transaction .expanded .description .description-header .transaction-type {
+    display: block;
+  }
 }
 
-.details .transactions-table .expanded .buttons {
-  height: 60%;
+.details .transactions-table .transaction .expanded .payment {
+  flex: 0;
+  margin: 0;
 }
 
+
 /*
  * Customization for the 'Home' page
  */
 #homepage-block {
   margin-bottom: 20px;
-  padding: 0 0 30px 0;
+  padding: 10px 10px 25px;
   background-color: gainsboro;
   border: 1px solid lightgray;
   border-radius: 6px;
@@ -1883,44 +2272,94 @@ form .autocomplete-box .item.active {
 }
 
 #homepage-block h2 {
-  margin: 0 0;
+  margin: 10px 0;
   font-size: 3em;
   letter-spacing: -2px;
   text-align: center;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-block h2 {
+    font-size: 2em;
+  }
+}
 
 #homepage-block h3 {
   margin: 25px 0;
+  padding: 0 20px;
   color: #777777;
   font-size: 1.7em;
   font-weight: 100;
   letter-spacing: 0.5px;
   text-align: center;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-block h3 {
+    font-size: 1em;
+  }
+}
 
 #homepage-block .buttons {
   display: flex;
   justify-content: flex-end;
   height: 30px;
-  padding: 10px;
   filter: brightness(0.90);
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-block .buttons {
+    filter: brightness(0.95);
+  }
+}
 
 #homepage-block .button {
   height: 25px;
   opacity: 0;
   transition: opacity 0.5s ease;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-block .button {
+    opacity: 100%;
+  }
+}
 
 #homepage-block:hover .button {
   opacity: 100%;
 }
 
+#homepage-suggestion {
+  display: none;
+  padding: 20px;
+  color: gray;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-suggestion {
+    display: block;
+  }
+}
+
+#homepage-suggestion p {
+  margin: 25px 0;
+}
+
+#homepage-suggestion p.register {
+  font-size: 0.8em;
+}
+
 #homepage-panels {
   display: flex;
   justify-content: space-between;
   width: 100%;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-panels {
+    flex-direction: column;
+  }
+}
 
 #homepage-panels .panel {
   display: flex;
@@ -1932,11 +2371,16 @@ form .autocomplete-box .item.active {
   box-shadow: 2px 2px 5px var(--silver-dollar);
   background-color: #fafafa;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #homepage-panels .panel {
+    margin: 20px 0;
+  }
+}
 
 #homepage-panels div:first-of-type {
   margin-left: 0;
 }
-
 #homepage-panels div:last-of-type {
   margin-right: 0;
 }
@@ -1956,7 +2400,6 @@ form .autocomplete-box .item.active {
 #homepage-panels .panel ul {
   margin: 0 0 15px;
 }
-
 #homepage-panels .panel ul:last-of-type {
   margin: 0;
 }
@@ -1995,10 +2438,32 @@ form .autocomplete-box .item.active {
   margin: auto;
   text-align: justify;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .about {
+    width: 90%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  .about p {
+    margin: 20px 0;
+    font-size: 10pt;
+    line-height: 1.5;
+  }
+}
+
 
 #readme #header {
   margin: 40px 0;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #readme #header {
+    margin: 20px 0 30px;
+  }
+}
 
 #readme #title {
   margin: 0;
@@ -2033,6 +2498,13 @@ form .autocomplete-box .item.active {
   width: 80%;
   margin: 0 auto;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #changelog {
+    width: 90%;
+    font-size: 10pt;
+  }
+}
 
 #changelog h1 {
   font-size: 32pt;
@@ -2048,6 +2520,12 @@ form .autocomplete-box .item.active {
   margin: 30px 0;
   font-size: 1.5em;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #changelog a.latest-release {
+    text-align: center;
+  }
+}
 
 #story .signature {
   margin-bottom: 100px;
@@ -2055,22 +2533,57 @@ form .autocomplete-box .item.active {
   font-style: oblique;
   text-align: right;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #story .signature {
+    margin-top: 30px;
+  }
+}
 
+#credits .affiliation-disclaimer {
+  margin-top: 200px;
+  padding: 10px 20px;
+  border: 1px solid var(--border-gray);
+  border-radius: 10px;
+  background-color: whitesmoke;
+  font-size: 8pt;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credits .affiliation-disclaimer {
+    padding: 10px 10px;
+  }
+}
 
-/*
- * Customization for the 'Credits' page
- */
-.affiliation-disclaimer {
-  margin-top: 80px;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credits .affiliation-disclaimer p {
+    font-size: 8pt;
+    line-height: 1.25;
+  }
 }
 
 
 /*
  * Customization for the 'Profile' page
  */
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #profile {
+    width: 90%;
+    margin: auto;
+  }
+}
+
 #profile h2 {
   font-size: 24pt;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #profile h2 {
+    font-size: 20pt;
+  }
+}
 
 #profile .username-section {
   font-size: 24pt;
@@ -2093,6 +2606,12 @@ form .autocomplete-box .item.active {
   margin-right: 10%;
   margin-bottom: 60px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #profile .profile-section {
+    margin-bottom: 25px;
+  }
+}
 
 #profile .settings.profile-section {
   flex-basis: 100%;
@@ -2100,6 +2619,12 @@ form .autocomplete-box .item.active {
   padding-bottom: 50px;
   border-bottom: 0.5px solid var(--border-gray);
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #profile .settings.profile-section {
+    padding-bottom: 25px;
+  }
+}
 
 #profile .banking.profile-section .bank-list {
   width: 90%;
@@ -2121,15 +2646,23 @@ form .autocomplete-box .item.active {
 /*
  * Customization for the 'Bank Accounts' page
  */
+#bank-container {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+#bank-container .bank-stack {
+  max-width: 1000px;
+}
+
 #bank-container .bank-stack .stack-title {
   padding: 0 30px;
   text-align: left;
 }
 
-#bank-container .account-block {
-  padding: 25px 30px;
-}
-
 #bank-container .account-block .account-info {
   display: flex;
   align-items: center;
@@ -2151,36 +2684,41 @@ form .autocomplete-box .item.active {
 }
 
 #bank-account-settings {
-  margin: 50px 0 25px;
-  padding: 0 25px;
+  margin: 50px 25px 25px;
 }
 
 #account-type-container {
-  width: 30%;
+  width: 40%;
   min-width: 350px;
   border: 2px solid var(--border-gray);
   background-color: #f5f5f5;
 }
-
-#account-type-container h2 {
-  margin: 0;
-  padding: 10px;
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #account-type-container {
+    width: 100%;
+    min-width: 200px;
+  }
 }
 
-#account-type-container .account-types {
-  border-top: 2px solid var(--border-gray);
+
+/*
+ * Customization for the 'New Bank Account' & 'Update Bank Account' pages
+ */
+form#bank-account #last-four-digits-field {
+  flex-basis: 25%;
+  min-width: 150px;
 }
 
-#account-type-container .account-type {
-  padding: 10px;
-  border-top: 0.5px solid var(--border-gray);
-  border-bottom: 0.5px solid var(--border-gray);
+form#bank-account #active-field {
+  flex-basis: 10%;
+  min-width: 60px;
 }
 
+form#bank-account #active-field label {
+  text-align: center;
+}
 
-/*
- * Customization for the 'New Bank Account' & 'Update Bank Account' pages
- */
 form#bank-account .hidden {
   display: none;
 }
@@ -2192,7 +2730,7 @@ form#bank-account .hidden {
 #bank-account-summaries-container {
   display: flex;
   flex-direction: column;
-  align-items: center
+  align-items: center;
 }
 
 #bank-account-summaries-container h2.bank {
@@ -2216,7 +2754,11 @@ form#bank-account .hidden {
 #bank-account-summaries {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  gap: 25px;
   width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
 }
 
 #bank-account-summaries .account-type-stack {
@@ -2224,7 +2766,13 @@ form#bank-account .hidden {
   flex-direction: column;
   width: 60%;
   min-width: 400px;
-  margin: 15px auto 25px;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #bank-account-summaries .account-type-stack {
+    width: 100%;
+    min-width: 0;
+  }
 }
 
 #bank-account-summaries .account-block {
@@ -2233,19 +2781,43 @@ form#bank-account .hidden {
   align-items: center;
   padding: 30px 10%;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #bank-account-summaries .account-block {
+    padding: 20px 20px;
+  }
+}
 
 #bank-account-summaries .account-block .title {
   font-size: 16pt;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #bank-account-summaries .account-block .title {
+    font-size: 12pt;
+  }
+}
 
 #bank-account-summaries .account-block .title .digits {
   margin-right: 10px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #bank-account-summaries .account-block .title .digits {
+    display: block;
+  }
+}
 
 #bank-account-summaries .account-block .balance {
   font-size: 24pt;
   font-weight: bold;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #bank-account-summaries .account-block .balance {
+    font-size: 18pt;
+  }
+}
 
 
 /*
@@ -2257,18 +2829,25 @@ form#bank-account .hidden {
   }
 }
 
-#balance-chart {
+#balance-chart-container {
   width: 42.5%;
   max-width: 600px;
-  margin-top: 40px;
+  margin: 40px auto 0;
 }
 @media screen and (max-width: 1500px) {
-  #balance-chart {
+  #balance-chart-container {
     order: 2;
     width: 45%;
     min-width: 450px;
   }
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #balance-chart-container {
+    width: 90%;
+    min-width: 200px;
+  }
+}
 
 #balance-chart .ct-chart-line {
   overflow: visible;
@@ -2282,6 +2861,13 @@ form#bank-account .hidden {
   stroke-width: 2px;
 }
 
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #balance-chart .ct-label {
+    font-size: 0.5rem;
+  }
+}
+
 
 /*
  * Customization for the 'New Bank Transaction'/'Update Bank Transaction' pages
@@ -2289,6 +2875,12 @@ form#bank-account .hidden {
 form#bank-transaction .bank-field {
   flex: 3;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#bank-transaction .bank-field {
+    min-width: 200px;
+  }
+}
 
 form#bank-transaction .account-type-field {
   flex: 1;
@@ -2378,21 +2970,22 @@ form#bank-transaction .transfer-title {
   transition: margin-left 0.2s;
   perspective: 1200px;
 }
-
-#credit-account-info div.credit-card-block:hover {
-  margin-left: 0;
-  padding-left: 15px;
-}
-
 #credit-account-info div.credit-card-block:first-of-type {
   padding-right: 10px;
 }
-
 #credit-account-info div.credit-card-block:last-of-type {
   margin-left: 0;
   padding-left: 0;
 }
 
+#credit-account-info div.credit-card-block:hover {
+  margin-left: 0;
+  padding-left: 15px;
+}
+#credit-account-info div.credit-card-block:last-of-type:hover {
+  padding-left: 0;
+}
+
 #credit-account-info .credit-card .card-face {
   cursor: pointer;
 }
@@ -2410,10 +3003,6 @@ form#bank-transaction .transfer-title {
 /*
  * Customization for the 'New Card' & 'Update Card' pages
  */
-form#card {
-  min-width: 500px;
-}
-
 form#card #last-four-digits-field {
   flex-basis: 25%;
   min-width: 150px;
@@ -2500,12 +3089,34 @@ form#card #statement-due-day-field  {
 #credit-statements {
   display: flex;
   justify-content: space-around;
+  gap: 25px;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statements {
+    justify-content: left;
+    scroll-snap-type: x mandatory;
+    padding-bottom: 20px;
+    overflow-x: scroll;
+  }
 }
 
 #credit-statements .card-stack {
   display: flex;
   flex-direction: column;
   height: min-content;
+  box-sizing: border-box;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statements .card-stack {
+    flex: 0 0 100%;
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+  }
 }
 
 #credit-statements .card-stack .stack-title {
@@ -2519,6 +3130,13 @@ form#card #statement-due-day-field  {
   width: 275px;
   padding: 45px 50px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statements .statement-block {
+    width: 200px;
+    padding: 30px 40px;
+  }
+}
 
 #credit-statements .statement-block .date,
 #credit-statements .statement-block .payment {
@@ -2531,16 +3149,35 @@ form#card #statement-due-day-field  {
   font-size: 22pt;
   letter-spacing: -1px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statements .statement-block .date .month {
+    font-size: 16pt;
+  }
+}
 
 #credit-statements .statement-block .date .year {
   font-size: 16pt;
   letter-spacing: 1px;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statements .statement-block .date .year {
+    font-size: 12pt;
+  }
+}
 
 #credit-statements .statement-block .payment .balance {
   font-size: 30pt;
   font-weight: bold;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statements .statement-block .payment .balance {
+    font-size: 24pt;
+  }
+}
+
 
 #credit-statements .statement-block .payment .paid-notice {
   font-size: 10pt;
@@ -2550,10 +3187,6 @@ form#card #statement-due-day-field  {
 /*
  * Customization for the (credit) 'Statement Details' page
  */
-#credit-statement-details #statement-summary {
-  min-width: 375px;
-}
-
 #credit-statement-details #statement-summary #payment {
   width: 100%;
   font-size: 12pt;
@@ -2562,7 +3195,8 @@ form#card #statement-due-day-field  {
 #credit-statement-details #statement-summary #due {
   float: left;
   display: flex;
-  width: 140px;
+  width: 40%;
+  min-width: 160px;
 }
 
 #credit-statement-details #statement-summary #due-date {
@@ -2572,15 +3206,44 @@ form#card #statement-due-day-field  {
 
 #credit-statement-details #statement-summary #paid {
   float: right;
+  width: 60%
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statement-details #statement-summary #paid {
+    width: 60px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statement-details #statement-summary #paid.slide-text-gadget:hover .sleeve {
+    transform: none;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  #credit-statement-details #statement-summary #paid.slide-text-gadget:hover .sleeve .main {
+    padding-right: 0;
+  }
 }
 
 form#pay {
   clear: left;
   position: relative;
-  width: 300px;
+  width: 85%;
   margin: 50px auto 0;
   border-radius: 5px;
   box-sizing: border-box;
+  font-size: 0.9em;
+}
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#pay {
+    width: 100%;
+    font-size: 0.75em;
+  }
 }
 
 form#pay button {
@@ -2615,6 +3278,12 @@ form#pay .form-line {
   border-bottom-right-radius: 0;
   box-sizing: border-box;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#pay .form-line {
+    width: 70%;
+  }
+}
 
 form#pay .form-line input,
 form#pay .form-line select {
@@ -2629,12 +3298,25 @@ form#pay .form-line .dollar-sign {
   height: 100%;
   color: #666666;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#pay .form-line .dollar-sign {
+    top: -15px;
+  }
+}
 
 form#pay .form-line #pay-amount,
 form#pay .form-line #pay-date {
-  width: 50%;
+  width: 49%;
   border-bottom: 2px solid #eeeeee;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#pay .form-line #pay-amount,
+  form#pay .form-line #pay-date {
+    width: 100%;
+  }
+}
 
 form#pay .form-line #pay-amount {
   padding-left: 25px;
@@ -2645,6 +3327,12 @@ form#pay .form-line #pay-amount {
   border-bottom-left-radius: 0;
   text-align: right;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#pay .form-line #pay-amount {
+    padding-right: 5px;
+  }
+}
 
 form#pay .form-line #pay-date {
   text-align: center;
@@ -2652,7 +3340,6 @@ form#pay .form-line #pay-date {
   border-bottom-left-radius: 0;
 }
 
-
 form#pay #make-payment {
   position: absolute;
   top: 0;
@@ -2679,6 +3366,13 @@ form#pay #make-payment[type="submit"] {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+@media screen and (max-width: 600px) {
+  /* Mobile layout */
+  form#pay #make-payment[type="submit"] {
+    left: 70%;
+    width: 30%;
+  }
+}
 
 form#pay #make-payment[type="submit"] #prompt {
   display: none;
@@ -2694,6 +3388,195 @@ form#pay #make-payment[type="submit"] #prompt {
   text-align: right;
 }
 
+#category-chart-container {
+  width: 42.5%;
+  max-width: 600px;
+  margin: 40px auto 0;
+}
+@media screen and (max-width: 1500px) {
+  #category-chart-container {
+    order: 2;
+    width: 45%;
+    min-width: 450px;
+  }
+}
+@media screen and (max-width: 600px) {
+  #category-chart-container {
+    width: 80%;
+    min-width: 100px;
+  }
+}
+
+#category-chart.ct-chart {
+  min-height: 400px;
+}
+
+#category-chart text.ct-label {
+  transition: fill 0.1s ease;
+}
+
+#category-chart text.ct-label:hover {
+  fill: rgba(0, 0, 0, 0.8);
+}
+
+#category-chart .ct-series-a .ct-slice-donut {
+  stroke: var(--moneytree-leaves);
+}
+
+#category-chart .ct-series-b .ct-slice-donut {
+  stroke: #41493b;
+}
+
+#category-chart .ct-series-c .ct-slice-donut {
+  stroke: #a4ae9d;
+}
+
+#category-chart .ct-series-d .ct-slice-donut {
+  stroke: #00bdfb;
+}
+
+#category-chart .ct-series-e .ct-slice-donut {
+  stroke: #0087c3;
+}
+
+
+/*
+ * Customization for the (credit) 'Statement Reconciliation' details page
+ */
+#credit-statement-reconciliation-details .note {
+  font-size: 9pt;
+  color: #888888;
+}
+
+#statement-reconciliation-summary {
+  min-width: 75%;
+}
+
+#statement-reconciliation-summary.summary-box .balance {
+  justify-content: center;
+  margin: 20px 0 30px;
+}
+
+#statement-reconciliation-summary.summary-box .balance .dollar-sign {
+  margin-right: 15px;
+}
+
+#statement-reconciliation-summary .reconciliation-indicator {
+  width: 200px;
+  align-self: center;
+  padding: 50px;
+}
+
+#statement-reconciliation-summary #statement-discrepancies-container h2 {
+  margin: 25px 0;
+  color: #888888;
+  font-size: 14pt;
+  font-weight: 500;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+}
+
+#credit-statement-reconciliation-details statement-transactions-container .note {
+  padding: 0 20px 20px;
+}
+
+#credit-statement-reconciliation-details div.discrepancy-category {
+  margin-bottom: 30px;
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity {
+  display: flex;
+  flex-direction: row;
+  margin: 3px 0px;
+  padding: 5px 15px;
+  border-radius: 10px;
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity:hover {
+  box-shadow: 0 0 3px 0 #cccccc;
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity .button {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity .button .icon {
+  width: 25px;
+  opacity: 0;
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity:hover .button .icon {
+  opacity: 1;
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity.discrepancy-highlight {
+  box-shadow: 0 0 5px 0 var(--moneytree-leaves);
+}
+
+#credit-statement-reconciliation-details #statement-discrepancies-container .reconciliation-activity.discrepancy-highlight:hover {
+  box-shadow: 0 0 5px 0 var(--moneytree-leaves);
+}
+
+#credit-statement-reconciliation-details #statement-transactions-container .transaction .discrepancy-highlight {
+  background-color: #f1fbeb;
+  background-image: linear-gradient(135deg, #fff, 5%, #f1fbeb, 95%, #fff);
+  color: var(--moneytree);
+  font-weight: 500;
+}
+
+
+/*
+ * Customization for the statement reconciliation modal
+ */
+#statement-reconciliation.modal {
+  width: 50%;
+  min-width: 300px;
+  transform: translate(-50%, 100%);
+}
+
+#statement-reconciliation.modal .modal-box {
+  height: 100%;
+  width: 100%;
+  padding: 30px;
+}
+
+#statement-reconciliation.modal .buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 30px;
+  width: 100%;
+}
+
+#statement-reconciliation.modal .buttons .button {
+  height: 30px;
+  width: 30px;
+}
+
+#statement-reconciliation.modal p {
+  width: 80%;
+  margin: auto;
+}
+
+#statement-reconciliation.modal form {
+  margin: 30px auto;
+  padding: 20px 50px 30px;
+  border: 3px solid var(--moneytree-leaves);
+  border-radius: 15px;
+  background-color: #fefefe;
+}
+
+#statement-reconciliation.modal form input {
+  margin: 3px 0;
+}
+
+#statement-reconciliation.modal form label {
+  text-transform: uppercase;
+  font-size: 10pt;
+  letter-spacing: 2px;
+}
+
 
 /*
  * Customization for the 'New Credit Transaction'/