From 789e89ed2e56f2ad805be46132d85fbc167fb9b9 Mon Sep 17 00:00:00 2001
From: dragon1211 <vikt0r1211@hotmail.com>
Date: Wed, 29 Sep 2021 21:38:14 -0700
Subject: [PATCH] add scss

---
 backend/public/css/app.css                    | 1442 ++++++++++++-----
 backend/public/js/app.js                      |  115 +-
 backend/public/mix-manifest.json              |    3 +-
 backend/resources/js/app.js                   |    2 +-
 .../complete.js => contact/complete.jsx}      |   12 +-
 backend/resources/sass/app.scss               |  287 +++-
 .../sass/foundation/function/_em.scss         |    4 +-
 .../sass/foundation/function/_rem.scss        |    4 +-
 .../sass/foundation/variable/_animation.scss  |   42 +-
 .../css/index.css => resources/sass/index.md} |   74 +-
 backend/resources/sass/index.scss             |  228 ---
 backend/resources/sass/layout/_footer.scss    |    4 +-
 backend/resources/sass/layout/_header.scss    |    4 +-
 backend/resources/sass/layout/_section.scss   |    4 +-
 .../sass/object/component/_layout.scss        |   26 +-
 .../sass/object/utility/_percent.scss         |   40 +-
 backend/resources/sass___1/_variables.scss    |   22 +
 backend/resources/sass___1/app.scss           |   45 +
 backend/resources/sass___1/layouts/_main.scss |  127 ++
 backend/resources/sass___1/pages/_layout.scss |  293 ++++
 backend/resources/sass___1/pages/_loader.scss |  169 ++
 .../views/contact/complete.blade.php          |   13 +-
 22 files changed, 2050 insertions(+), 910 deletions(-)
 rename backend/resources/js/pages/{contacts/complete.js => contact/complete.jsx} (65%)
 rename backend/{public/css/index.css => resources/sass/index.md} (83%)
 delete mode 100644 backend/resources/sass/index.scss
 create mode 100644 backend/resources/sass___1/_variables.scss
 create mode 100644 backend/resources/sass___1/app.scss
 create mode 100644 backend/resources/sass___1/layouts/_main.scss
 create mode 100644 backend/resources/sass___1/pages/_layout.scss
 create mode 100644 backend/resources/sass___1/pages/_loader.scss

diff --git a/backend/public/css/app.css b/backend/public/css/app.css
index bdc04a4f..655bd2ed 100644
--- a/backend/public/css/app.css
+++ b/backend/public/css/app.css
@@ -1,6 +1,5 @@
 @import url(https://fonts.googleapis.com/css?family=Nunito);
 @charset "UTF-8";
-/* Fonts */
 /*!
  * Bootstrap v4.6.0 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
@@ -8,25 +7,25 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 :root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
+  --blue: #3490dc;
+  --indigo: #6574cd;
+  --purple: #9561e2;
+  --pink: #f66d9b;
+  --red: #e3342f;
+  --orange: #f6993f;
+  --yellow: #ffed4a;
+  --green: #38c172;
+  --teal: #4dc0b5;
+  --cyan: #6cb2eb;
   --white: #fff;
   --gray: #6c757d;
   --gray-dark: #343a40;
-  --primary: #007bff;
+  --primary: #3490dc;
   --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
+  --success: #38c172;
+  --info: #6cb2eb;
+  --warning: #ffed4a;
+  --danger: #e3342f;
   --light: #f8f9fa;
   --dark: #343a40;
   --breakpoint-xs: 0;
@@ -34,7 +33,7 @@
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-sans-serif: "Nunito", sans-serif;
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
@@ -57,13 +56,13 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1rem;
+  font-family: "Nunito", sans-serif;
+  font-size: 0.9rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   color: #212529;
   text-align: left;
-  background-color: #fff;
+  background-color: #f8fafc;
 }
 
 [tabindex="-1"]:focus:not(:focus-visible) {
@@ -156,12 +155,12 @@ sup {
 }
 
 a {
-  color: #007bff;
+  color: #3490dc;
   text-decoration: none;
   background-color: transparent;
 }
 a:hover {
-  color: #0056b3;
+  color: #1d68a7;
   text-decoration: underline;
 }
 
@@ -362,31 +361,31 @@ h1, h2, h3, h4, h5, h6,
 }
 
 h1, .h1 {
-  font-size: 2.5rem;
+  font-size: 2.25rem;
 }
 
 h2, .h2 {
-  font-size: 2rem;
+  font-size: 1.8rem;
 }
 
 h3, .h3 {
-  font-size: 1.75rem;
+  font-size: 1.575rem;
 }
 
 h4, .h4 {
-  font-size: 1.5rem;
+  font-size: 1.35rem;
 }
 
 h5, .h5 {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 }
 
 h6, .h6 {
-  font-size: 1rem;
+  font-size: 0.9rem;
 }
 
 .lead {
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 300;
 }
 
@@ -457,7 +456,7 @@ mark,
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 }
 
 .blockquote-footer {
@@ -476,7 +475,7 @@ mark,
 
 .img-thumbnail {
   padding: 0.25rem;
-  background-color: #fff;
+  background-color: #f8fafc;
   border: 1px solid #dee2e6;
   border-radius: 0.25rem;
   max-width: 100%;
@@ -499,7 +498,7 @@ mark,
 
 code {
   font-size: 87.5%;
-  color: #e83e8c;
+  color: #f66d9b;
   word-wrap: break-word;
 }
 a > code {
@@ -1702,21 +1701,21 @@ pre code {
 .table-primary,
 .table-primary > th,
 .table-primary > td {
-  background-color: #b8daff;
+  background-color: #c6e0f5;
 }
 .table-primary th,
 .table-primary td,
 .table-primary thead th,
 .table-primary tbody + tbody {
-  border-color: #7abaff;
+  border-color: #95c5ed;
 }
 
 .table-hover .table-primary:hover {
-  background-color: #9fcdff;
+  background-color: #b0d4f1;
 }
 .table-hover .table-primary:hover > td,
 .table-hover .table-primary:hover > th {
-  background-color: #9fcdff;
+  background-color: #b0d4f1;
 }
 
 .table-secondary,
@@ -1742,81 +1741,81 @@ pre code {
 .table-success,
 .table-success > th,
 .table-success > td {
-  background-color: #c3e6cb;
+  background-color: #c7eed8;
 }
 .table-success th,
 .table-success td,
 .table-success thead th,
 .table-success tbody + tbody {
-  border-color: #8fd19e;
+  border-color: #98dfb6;
 }
 
 .table-hover .table-success:hover {
-  background-color: #b1dfbb;
+  background-color: #b3e8ca;
 }
 .table-hover .table-success:hover > td,
 .table-hover .table-success:hover > th {
-  background-color: #b1dfbb;
+  background-color: #b3e8ca;
 }
 
 .table-info,
 .table-info > th,
 .table-info > td {
-  background-color: #bee5eb;
+  background-color: #d6e9f9;
 }
 .table-info th,
 .table-info td,
 .table-info thead th,
 .table-info tbody + tbody {
-  border-color: #86cfda;
+  border-color: #b3d7f5;
 }
 
 .table-hover .table-info:hover {
-  background-color: #abdde5;
+  background-color: #c0ddf6;
 }
 .table-hover .table-info:hover > td,
 .table-hover .table-info:hover > th {
-  background-color: #abdde5;
+  background-color: #c0ddf6;
 }
 
 .table-warning,
 .table-warning > th,
 .table-warning > td {
-  background-color: #ffeeba;
+  background-color: #fffacc;
 }
 .table-warning th,
 .table-warning td,
 .table-warning thead th,
 .table-warning tbody + tbody {
-  border-color: #ffdf7e;
+  border-color: #fff6a1;
 }
 
 .table-hover .table-warning:hover {
-  background-color: #ffe8a1;
+  background-color: #fff8b3;
 }
 .table-hover .table-warning:hover > td,
 .table-hover .table-warning:hover > th {
-  background-color: #ffe8a1;
+  background-color: #fff8b3;
 }
 
 .table-danger,
 .table-danger > th,
 .table-danger > td {
-  background-color: #f5c6cb;
+  background-color: #f7c6c5;
 }
 .table-danger th,
 .table-danger td,
 .table-danger thead th,
 .table-danger tbody + tbody {
-  border-color: #ed969e;
+  border-color: #f09593;
 }
 
 .table-hover .table-danger:hover {
-  background-color: #f1b0b7;
+  background-color: #f4b0af;
 }
 .table-hover .table-danger:hover > td,
 .table-hover .table-danger:hover > th {
-  background-color: #f1b0b7;
+  background-color: #f4b0af;
 }
 
 .table-light,
@@ -1961,11 +1960,11 @@ pre code {
 .form-control {
   display: block;
   width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
+  height: calc(1.6em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   color: #495057;
   background-color: #fff;
   background-clip: padding-box;
@@ -1989,9 +1988,9 @@ pre code {
 .form-control:focus {
   color: #495057;
   background-color: #fff;
-  border-color: #80bdff;
+  border-color: #a1cbef;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .form-control::-moz-placeholder {
   color: #6c757d;
@@ -2035,20 +2034,20 @@ select.form-control:focus::-ms-value {
   padding-bottom: calc(0.375rem + 1px);
   margin-bottom: 0;
   font-size: inherit;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .col-form-label-lg {
   padding-top: calc(0.5rem + 1px);
   padding-bottom: calc(0.5rem + 1px);
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1.5;
 }
 
 .col-form-label-sm {
   padding-top: calc(0.25rem + 1px);
   padding-bottom: calc(0.25rem + 1px);
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   line-height: 1.5;
 }
 
@@ -2057,8 +2056,8 @@ select.form-control:focus::-ms-value {
   width: 100%;
   padding: 0.375rem 0;
   margin-bottom: 0;
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: 0.9rem;
+  line-height: 1.6;
   color: #212529;
   background-color: transparent;
   border: solid transparent;
@@ -2072,7 +2071,7 @@ select.form-control:focus::-ms-value {
 .form-control-sm {
   height: calc(1.5em + 0.5rem + 2px);
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   line-height: 1.5;
   border-radius: 0.2rem;
 }
@@ -2080,7 +2079,7 @@ select.form-control:focus::-ms-value {
 .form-control-lg {
   height: calc(1.5em + 1rem + 2px);
   padding: 0.5rem 1rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1.5;
   border-radius: 0.3rem;
 }
@@ -2151,7 +2150,7 @@ textarea.form-control {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 80%;
-  color: #28a745;
+  color: #38c172;
 }
 
 .valid-tooltip {
@@ -2163,10 +2162,10 @@ textarea.form-control {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
+  font-size: 0.7875rem;
+  line-height: 1.6;
   color: #fff;
-  background-color: rgba(40, 167, 69, 0.9);
+  background-color: rgba(56, 193, 114, 0.9);
   border-radius: 0.25rem;
 }
 .form-row > .col > .valid-tooltip, .form-row > [class*=col-] > .valid-tooltip {
@@ -2181,35 +2180,35 @@ textarea.form-control {
 }
 
 .was-validated .form-control:valid, .form-control.is-valid {
-  border-color: #28a745;
-  padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  border-color: #38c172;
+  padding-right: calc(1.6em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.1875rem) center;
-  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  background-position: right calc(0.4em + 0.1875rem) center;
+  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
-  border-color: #28a745;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+  border-color: #38c172;
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.25);
 }
 
 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
-  padding-right: calc(1.5em + 0.75rem);
-  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+  padding-right: calc(1.6em + 0.75rem);
+  background-position: top calc(0.4em + 0.1875rem) right calc(0.4em + 0.1875rem);
 }
 
 .was-validated .custom-select:valid, .custom-select.is-valid {
-  border-color: #28a745;
+  border-color: #38c172;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2338c172' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem) no-repeat;
 }
 .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
-  border-color: #28a745;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+  border-color: #38c172;
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.25);
 }
 
 .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
-  color: #28a745;
+  color: #38c172;
 }
 .was-validated .form-check-input:valid ~ .valid-feedback,
 .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
@@ -2218,28 +2217,28 @@ textarea.form-control {
 }
 
 .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
-  color: #28a745;
+  color: #38c172;
 }
 .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
-  border-color: #28a745;
+  border-color: #38c172;
 }
 .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
-  border-color: #34ce57;
-  background-color: #34ce57;
+  border-color: #5cd08d;
+  background-color: #5cd08d;
 }
 .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.25);
 }
 .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #28a745;
+  border-color: #38c172;
 }
 
 .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
-  border-color: #28a745;
+  border-color: #38c172;
 }
 .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
-  border-color: #28a745;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
+  border-color: #38c172;
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.25);
 }
 
 .invalid-feedback {
@@ -2247,7 +2246,7 @@ textarea.form-control {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 80%;
-  color: #dc3545;
+  color: #e3342f;
 }
 
 .invalid-tooltip {
@@ -2259,10 +2258,10 @@ textarea.form-control {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: 0.1rem;
-  font-size: 0.875rem;
-  line-height: 1.5;
+  font-size: 0.7875rem;
+  line-height: 1.6;
   color: #fff;
-  background-color: rgba(220, 53, 69, 0.9);
+  background-color: rgba(227, 52, 47, 0.9);
   border-radius: 0.25rem;
 }
 .form-row > .col > .invalid-tooltip, .form-row > [class*=col-] > .invalid-tooltip {
@@ -2277,35 +2276,35 @@ textarea.form-control {
 }
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
-  border-color: #dc3545;
-  padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+  border-color: #e3342f;
+  padding-right: calc(1.6em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.1875rem) center;
-  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+  background-position: right calc(0.4em + 0.1875rem) center;
+  background-size: calc(0.8em + 0.375rem) calc(0.8em + 0.375rem);
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  border-color: #e3342f;
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
 }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
-  padding-right: calc(1.5em + 0.75rem);
-  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+  padding-right: calc(1.6em + 0.75rem);
+  background-position: top calc(0.4em + 0.1875rem) right calc(0.4em + 0.1875rem);
 }
 
 .was-validated .custom-select:invalid, .custom-select.is-invalid {
-  border-color: #dc3545;
+  border-color: #e3342f;
   padding-right: calc(0.75em + 2.3125rem);
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e3342f' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e3342f' stroke='none'/%3e%3c/svg%3e") center right 1.75rem/calc(0.8em + 0.375rem) calc(0.8em + 0.375rem) no-repeat;
 }
 .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  border-color: #e3342f;
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
 }
 
 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-  color: #dc3545;
+  color: #e3342f;
 }
 .was-validated .form-check-input:invalid ~ .invalid-feedback,
 .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
@@ -2314,28 +2313,28 @@ textarea.form-control {
 }
 
 .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
-  color: #dc3545;
+  color: #e3342f;
 }
 .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
-  border-color: #dc3545;
+  border-color: #e3342f;
 }
 .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
-  border-color: #e4606d;
-  background-color: #e4606d;
+  border-color: #e9605c;
+  background-color: #e9605c;
 }
 .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
 }
 .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #dc3545;
+  border-color: #e3342f;
 }
 
 .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
-  border-color: #dc3545;
+  border-color: #e3342f;
 }
 .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
-  border-color: #dc3545;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
+  border-color: #e3342f;
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.25);
 }
 
 .form-inline {
@@ -2408,8 +2407,8 @@ textarea.form-control {
   background-color: transparent;
   border: 1px solid transparent;
   padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: 0.9rem;
+  line-height: 1.6;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -2424,7 +2423,7 @@ textarea.form-control {
 }
 .btn:focus, .btn.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .btn.disabled, .btn:disabled {
   opacity: 0.65;
@@ -2439,32 +2438,32 @@ fieldset:disabled a.btn {
 
 .btn-primary {
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #3490dc;
+  border-color: #3490dc;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #0069d9;
-  border-color: #0062cc;
+  background-color: #227dc7;
+  border-color: #2176bd;
 }
 .btn-primary:focus, .btn-primary.focus {
   color: #fff;
-  background-color: #0069d9;
-  border-color: #0062cc;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  background-color: #227dc7;
+  border-color: #2176bd;
+  box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
 }
 .btn-primary.disabled, .btn-primary:disabled {
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #3490dc;
+  border-color: #3490dc;
 }
 .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
   color: #fff;
-  background-color: #0062cc;
-  border-color: #005cbf;
+  background-color: #2176bd;
+  border-color: #1f6fb2;
 }
 .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(82, 161, 225, 0.5);
 }
 
 .btn-secondary {
@@ -2499,122 +2498,122 @@ fieldset:disabled a.btn {
 
 .btn-success {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #38c172;
+  border-color: #38c172;
 }
 .btn-success:hover {
   color: #fff;
-  background-color: #218838;
-  border-color: #1e7e34;
+  background-color: #2fa360;
+  border-color: #2d995b;
 }
 .btn-success:focus, .btn-success.focus {
   color: #fff;
-  background-color: #218838;
-  border-color: #1e7e34;
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+  background-color: #2fa360;
+  border-color: #2d995b;
+  box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
 }
 .btn-success.disabled, .btn-success:disabled {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #38c172;
+  border-color: #38c172;
 }
 .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
   color: #fff;
-  background-color: #1e7e34;
-  border-color: #1c7430;
+  background-color: #2d995b;
+  border-color: #2a9055;
 }
 .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(86, 202, 135, 0.5);
 }
 
 .btn-info {
-  color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+  color: #212529;
+  background-color: #6cb2eb;
+  border-color: #6cb2eb;
 }
 .btn-info:hover {
   color: #fff;
-  background-color: #138496;
-  border-color: #117a8b;
+  background-color: #4aa0e6;
+  border-color: #3f9ae5;
 }
 .btn-info:focus, .btn-info.focus {
   color: #fff;
-  background-color: #138496;
-  border-color: #117a8b;
-  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+  background-color: #4aa0e6;
+  border-color: #3f9ae5;
+  box-shadow: 0 0 0 0.2rem rgba(97, 157, 206, 0.5);
 }
 .btn-info.disabled, .btn-info:disabled {
-  color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+  color: #212529;
+  background-color: #6cb2eb;
+  border-color: #6cb2eb;
 }
 .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
   color: #fff;
-  background-color: #117a8b;
-  border-color: #10707f;
+  background-color: #3f9ae5;
+  border-color: #3495e3;
 }
 .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(97, 157, 206, 0.5);
 }
 
 .btn-warning {
   color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  background-color: #ffed4a;
+  border-color: #ffed4a;
 }
 .btn-warning:hover {
   color: #212529;
-  background-color: #e0a800;
-  border-color: #d39e00;
+  background-color: #ffe924;
+  border-color: #ffe817;
 }
 .btn-warning:focus, .btn-warning.focus {
   color: #212529;
-  background-color: #e0a800;
-  border-color: #d39e00;
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+  background-color: #ffe924;
+  border-color: #ffe817;
+  box-shadow: 0 0 0 0.2rem rgba(222, 207, 69, 0.5);
 }
 .btn-warning.disabled, .btn-warning:disabled {
   color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  background-color: #ffed4a;
+  border-color: #ffed4a;
 }
 .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
   color: #212529;
-  background-color: #d39e00;
-  border-color: #c69500;
+  background-color: #ffe817;
+  border-color: #ffe70a;
 }
 .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(222, 207, 69, 0.5);
 }
 
 .btn-danger {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #e3342f;
+  border-color: #e3342f;
 }
 .btn-danger:hover {
   color: #fff;
-  background-color: #c82333;
-  border-color: #bd2130;
+  background-color: #d0211c;
+  border-color: #c51f1a;
 }
 .btn-danger:focus, .btn-danger.focus {
   color: #fff;
-  background-color: #c82333;
-  border-color: #bd2130;
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+  background-color: #d0211c;
+  border-color: #c51f1a;
+  box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
 }
 .btn-danger.disabled, .btn-danger:disabled {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #e3342f;
+  border-color: #e3342f;
 }
 .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
   color: #fff;
-  background-color: #bd2130;
-  border-color: #b21f2d;
+  background-color: #c51f1a;
+  border-color: #b91d19;
 }
 .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(231, 82, 78, 0.5);
 }
 
 .btn-light {
@@ -2678,28 +2677,28 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-primary {
-  color: #007bff;
-  border-color: #007bff;
+  color: #3490dc;
+  border-color: #3490dc;
 }
 .btn-outline-primary:hover {
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #3490dc;
+  border-color: #3490dc;
 }
 .btn-outline-primary:focus, .btn-outline-primary.focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
 }
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
-  color: #007bff;
+  color: #3490dc;
   background-color: transparent;
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #3490dc;
+  border-color: #3490dc;
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
 }
 
 .btn-outline-secondary {
@@ -2728,103 +2727,103 @@ fieldset:disabled a.btn {
 }
 
 .btn-outline-success {
-  color: #28a745;
-  border-color: #28a745;
+  color: #38c172;
+  border-color: #38c172;
 }
 .btn-outline-success:hover {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #38c172;
+  border-color: #38c172;
 }
 .btn-outline-success:focus, .btn-outline-success.focus {
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.5);
 }
 .btn-outline-success.disabled, .btn-outline-success:disabled {
-  color: #28a745;
+  color: #38c172;
   background-color: transparent;
 }
 .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle {
   color: #fff;
-  background-color: #28a745;
-  border-color: #28a745;
+  background-color: #38c172;
+  border-color: #38c172;
 }
 .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.5);
 }
 
 .btn-outline-info {
-  color: #17a2b8;
-  border-color: #17a2b8;
+  color: #6cb2eb;
+  border-color: #6cb2eb;
 }
 .btn-outline-info:hover {
-  color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+  color: #212529;
+  background-color: #6cb2eb;
+  border-color: #6cb2eb;
 }
 .btn-outline-info:focus, .btn-outline-info.focus {
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(108, 178, 235, 0.5);
 }
 .btn-outline-info.disabled, .btn-outline-info:disabled {
-  color: #17a2b8;
+  color: #6cb2eb;
   background-color: transparent;
 }
 .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle {
-  color: #fff;
-  background-color: #17a2b8;
-  border-color: #17a2b8;
+  color: #212529;
+  background-color: #6cb2eb;
+  border-color: #6cb2eb;
 }
 .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(108, 178, 235, 0.5);
 }
 
 .btn-outline-warning {
-  color: #ffc107;
-  border-color: #ffc107;
+  color: #ffed4a;
+  border-color: #ffed4a;
 }
 .btn-outline-warning:hover {
   color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  background-color: #ffed4a;
+  border-color: #ffed4a;
 }
 .btn-outline-warning:focus, .btn-outline-warning.focus {
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 237, 74, 0.5);
 }
 .btn-outline-warning.disabled, .btn-outline-warning:disabled {
-  color: #ffc107;
+  color: #ffed4a;
   background-color: transparent;
 }
 .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle {
   color: #212529;
-  background-color: #ffc107;
-  border-color: #ffc107;
+  background-color: #ffed4a;
+  border-color: #ffed4a;
 }
 .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 237, 74, 0.5);
 }
 
 .btn-outline-danger {
-  color: #dc3545;
-  border-color: #dc3545;
+  color: #e3342f;
+  border-color: #e3342f;
 }
 .btn-outline-danger:hover {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #e3342f;
+  border-color: #e3342f;
 }
 .btn-outline-danger:focus, .btn-outline-danger.focus {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.5);
 }
 .btn-outline-danger.disabled, .btn-outline-danger:disabled {
-  color: #dc3545;
+  color: #e3342f;
   background-color: transparent;
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {
   color: #fff;
-  background-color: #dc3545;
-  border-color: #dc3545;
+  background-color: #e3342f;
+  border-color: #e3342f;
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.5);
 }
 
 .btn-outline-light {
@@ -2879,11 +2878,11 @@ fieldset:disabled a.btn {
 
 .btn-link {
   font-weight: 400;
-  color: #007bff;
+  color: #3490dc;
   text-decoration: none;
 }
 .btn-link:hover {
-  color: #0056b3;
+  color: #1d68a7;
   text-decoration: underline;
 }
 .btn-link:focus, .btn-link.focus {
@@ -2896,14 +2895,14 @@ fieldset:disabled a.btn {
 
 .btn-lg, .btn-group-lg > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1.5;
   border-radius: 0.3rem;
 }
 
 .btn-sm, .btn-group-sm > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   line-height: 1.5;
   border-radius: 0.2rem;
 }
@@ -2984,7 +2983,7 @@ input[type=button].btn-block {
   min-width: 10rem;
   padding: 0.5rem 0;
   margin: 0.125rem 0 0;
-  font-size: 1rem;
+  font-size: 0.9rem;
   color: #212529;
   text-align: left;
   list-style: none;
@@ -3156,7 +3155,7 @@ input[type=button].btn-block {
 .dropdown-item.active, .dropdown-item:active {
   color: #fff;
   text-decoration: none;
-  background-color: #007bff;
+  background-color: #3490dc;
 }
 .dropdown-item.disabled, .dropdown-item:disabled {
   color: #adb5bd;
@@ -3172,7 +3171,7 @@ input[type=button].btn-block {
   display: block;
   padding: 0.5rem 1.5rem;
   margin-bottom: 0;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   color: #6c757d;
   white-space: nowrap;
 }
@@ -3389,9 +3388,9 @@ input[type=button].btn-block {
   align-items: center;
   padding: 0.375rem 0.75rem;
   margin-bottom: 0;
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   color: #495057;
   text-align: center;
   white-space: nowrap;
@@ -3416,7 +3415,7 @@ input[type=button].btn-block {
 .input-group-lg > .input-group-prepend > .btn,
 .input-group-lg > .input-group-append > .btn {
   padding: 0.5rem 1rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1.5;
   border-radius: 0.3rem;
 }
@@ -3433,7 +3432,7 @@ input[type=button].btn-block {
 .input-group-sm > .input-group-prepend > .btn,
 .input-group-sm > .input-group-append > .btn {
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   line-height: 1.5;
   border-radius: 0.2rem;
 }
@@ -3469,7 +3468,7 @@ input[type=button].btn-block {
   position: relative;
   z-index: 1;
   display: block;
-  min-height: 1.5rem;
+  min-height: 1.44rem;
   padding-left: 1.5rem;
   -webkit-print-color-adjust: exact;
           color-adjust: exact;
@@ -3485,24 +3484,24 @@ input[type=button].btn-block {
   left: 0;
   z-index: -1;
   width: 1rem;
-  height: 1.25rem;
+  height: 1.22rem;
   opacity: 0;
 }
 .custom-control-input:checked ~ .custom-control-label::before {
   color: #fff;
-  border-color: #007bff;
-  background-color: #007bff;
+  border-color: #3490dc;
+  background-color: #3490dc;
 }
 .custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-  border-color: #80bdff;
+  border-color: #a1cbef;
 }
 .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
   color: #fff;
-  background-color: #b3d7ff;
-  border-color: #b3d7ff;
+  background-color: #cce3f6;
+  border-color: #cce3f6;
 }
 .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
   color: #6c757d;
@@ -3518,7 +3517,7 @@ input[type=button].btn-block {
 }
 .custom-control-label::before {
   position: absolute;
-  top: 0.25rem;
+  top: 0.22rem;
   left: -1.5rem;
   display: block;
   width: 1rem;
@@ -3530,7 +3529,7 @@ input[type=button].btn-block {
 }
 .custom-control-label::after {
   position: absolute;
-  top: 0.25rem;
+  top: 0.22rem;
   left: -1.5rem;
   display: block;
   width: 1rem;
@@ -3546,17 +3545,17 @@ input[type=button].btn-block {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
 }
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
-  border-color: #007bff;
-  background-color: #007bff;
+  border-color: #3490dc;
+  background-color: #3490dc;
 }
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
 }
 .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
+  background-color: rgba(52, 144, 220, 0.5);
 }
 .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
+  background-color: rgba(52, 144, 220, 0.5);
 }
 
 .custom-radio .custom-control-label::before {
@@ -3566,7 +3565,7 @@ input[type=button].btn-block {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
 .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
+  background-color: rgba(52, 144, 220, 0.5);
 }
 
 .custom-switch {
@@ -3579,7 +3578,7 @@ input[type=button].btn-block {
   border-radius: 0.5rem;
 }
 .custom-switch .custom-control-label::after {
-  top: calc(0.25rem + 2px);
+  top: calc(0.22rem + 2px);
   left: calc(-2.25rem + 2px);
   width: calc(1rem - 4px);
   height: calc(1rem - 4px);
@@ -3597,17 +3596,17 @@ input[type=button].btn-block {
   transform: translateX(0.75rem);
 }
 .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
-  background-color: rgba(0, 123, 255, 0.5);
+  background-color: rgba(52, 144, 220, 0.5);
 }
 
 .custom-select {
   display: inline-block;
   width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
+  height: calc(1.6em + 0.75rem + 2px);
   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  font-size: 1rem;
+  font-size: 0.9rem;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   color: #495057;
   vertical-align: middle;
   background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
@@ -3618,9 +3617,9 @@ input[type=button].btn-block {
           appearance: none;
 }
 .custom-select:focus {
-  border-color: #80bdff;
+  border-color: #a1cbef;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .custom-select:focus::-ms-value {
   color: #495057;
@@ -3648,7 +3647,7 @@ input[type=button].btn-block {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   padding-left: 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
 }
 
 .custom-select-lg {
@@ -3656,14 +3655,14 @@ input[type=button].btn-block {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   padding-left: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 }
 
 .custom-file {
   position: relative;
   display: inline-block;
   width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
+  height: calc(1.6em + 0.75rem + 2px);
   margin-bottom: 0;
 }
 
@@ -3671,14 +3670,14 @@ input[type=button].btn-block {
   position: relative;
   z-index: 2;
   width: 100%;
-  height: calc(1.5em + 0.75rem + 2px);
+  height: calc(1.6em + 0.75rem + 2px);
   margin: 0;
   overflow: hidden;
   opacity: 0;
 }
 .custom-file-input:focus ~ .custom-file-label {
-  border-color: #80bdff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  border-color: #a1cbef;
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label {
   background-color: #e9ecef;
@@ -3696,11 +3695,11 @@ input[type=button].btn-block {
   right: 0;
   left: 0;
   z-index: 1;
-  height: calc(1.5em + 0.75rem + 2px);
+  height: calc(1.6em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
   overflow: hidden;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   color: #495057;
   background-color: #fff;
   border: 1px solid #ced4da;
@@ -3713,9 +3712,9 @@ input[type=button].btn-block {
   bottom: 0;
   z-index: 3;
   display: block;
-  height: calc(1.5em + 0.75rem);
+  height: calc(1.6em + 0.75rem);
   padding: 0.375rem 0.75rem;
-  line-height: 1.5;
+  line-height: 1.6;
   color: #495057;
   content: "Browse";
   background-color: #e9ecef;
@@ -3736,13 +3735,13 @@ input[type=button].btn-block {
   outline: 0;
 }
 .custom-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .custom-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .custom-range:focus::-ms-thumb {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 .custom-range::-moz-focus-outer {
   border: 0;
@@ -3751,7 +3750,7 @@ input[type=button].btn-block {
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background-color: #007bff;
+  background-color: #3490dc;
   border: 0;
   border-radius: 1rem;
   -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3766,7 +3765,7 @@ input[type=button].btn-block {
   }
 }
 .custom-range::-webkit-slider-thumb:active {
-  background-color: #b3d7ff;
+  background-color: #cce3f6;
 }
 .custom-range::-webkit-slider-runnable-track {
   width: 100%;
@@ -3780,7 +3779,7 @@ input[type=button].btn-block {
 .custom-range::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background-color: #007bff;
+  background-color: #3490dc;
   border: 0;
   border-radius: 1rem;
   -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3795,7 +3794,7 @@ input[type=button].btn-block {
   }
 }
 .custom-range::-moz-range-thumb:active {
-  background-color: #b3d7ff;
+  background-color: #cce3f6;
 }
 .custom-range::-moz-range-track {
   width: 100%;
@@ -3812,7 +3811,7 @@ input[type=button].btn-block {
   margin-top: 0;
   margin-right: 0.2rem;
   margin-left: 0.2rem;
-  background-color: #007bff;
+  background-color: #3490dc;
   border: 0;
   border-radius: 1rem;
   -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3826,7 +3825,7 @@ input[type=button].btn-block {
   }
 }
 .custom-range::-ms-thumb:active {
-  background-color: #b3d7ff;
+  background-color: #cce3f6;
 }
 .custom-range::-ms-track {
   width: 100%;
@@ -3916,8 +3915,8 @@ input[type=button].btn-block {
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
   color: #495057;
-  background-color: #fff;
-  border-color: #dee2e6 #dee2e6 #fff;
+  background-color: #f8fafc;
+  border-color: #dee2e6 #dee2e6 #f8fafc;
 }
 .nav-tabs .dropdown-menu {
   margin-top: -1px;
@@ -3931,7 +3930,7 @@ input[type=button].btn-block {
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
   color: #fff;
-  background-color: #007bff;
+  background-color: #3490dc;
 }
 
 .nav-fill > .nav-link,
@@ -3975,10 +3974,10 @@ input[type=button].btn-block {
 }
 .navbar-brand {
   display: inline-block;
-  padding-top: 0.3125rem;
-  padding-bottom: 0.3125rem;
+  padding-top: 0.32rem;
+  padding-bottom: 0.32rem;
   margin-right: 1rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: inherit;
   white-space: nowrap;
 }
@@ -4016,7 +4015,7 @@ input[type=button].btn-block {
 
 .navbar-toggler {
   padding: 0.25rem 0.75rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1;
   background-color: transparent;
   border: 1px solid transparent;
@@ -4598,13 +4597,13 @@ input[type=button].btn-block {
   padding: 0.5rem 0.75rem;
   margin-left: -1px;
   line-height: 1.25;
-  color: #007bff;
+  color: #3490dc;
   background-color: #fff;
   border: 1px solid #dee2e6;
 }
 .page-link:hover {
   z-index: 2;
-  color: #0056b3;
+  color: #1d68a7;
   text-decoration: none;
   background-color: #e9ecef;
   border-color: #dee2e6;
@@ -4612,7 +4611,7 @@ input[type=button].btn-block {
 .page-link:focus {
   z-index: 3;
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.25);
 }
 
 .page-item:first-child .page-link {
@@ -4627,8 +4626,8 @@ input[type=button].btn-block {
 .page-item.active .page-link {
   z-index: 3;
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #3490dc;
+  border-color: #3490dc;
 }
 .page-item.disabled .page-link {
   color: #6c757d;
@@ -4640,7 +4639,7 @@ input[type=button].btn-block {
 
 .pagination-lg .page-link {
   padding: 0.75rem 1.5rem;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   line-height: 1.5;
 }
 .pagination-lg .page-item:first-child .page-link {
@@ -4654,7 +4653,7 @@ input[type=button].btn-block {
 
 .pagination-sm .page-link {
   padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   line-height: 1.5;
 }
 .pagination-sm .page-item:first-child .page-link {
@@ -4704,15 +4703,15 @@ a.badge:hover, a.badge:focus {
 
 .badge-primary {
   color: #fff;
-  background-color: #007bff;
+  background-color: #3490dc;
 }
 a.badge-primary:hover, a.badge-primary:focus {
   color: #fff;
-  background-color: #0062cc;
+  background-color: #2176bd;
 }
 a.badge-primary:focus, a.badge-primary.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(52, 144, 220, 0.5);
 }
 
 .badge-secondary {
@@ -4730,54 +4729,54 @@ a.badge-secondary:focus, a.badge-secondary.focus {
 
 .badge-success {
   color: #fff;
-  background-color: #28a745;
+  background-color: #38c172;
 }
 a.badge-success:hover, a.badge-success:focus {
   color: #fff;
-  background-color: #1e7e34;
+  background-color: #2d995b;
 }
 a.badge-success:focus, a.badge-success.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(56, 193, 114, 0.5);
 }
 
 .badge-info {
-  color: #fff;
-  background-color: #17a2b8;
+  color: #212529;
+  background-color: #6cb2eb;
 }
 a.badge-info:hover, a.badge-info:focus {
-  color: #fff;
-  background-color: #117a8b;
+  color: #212529;
+  background-color: #3f9ae5;
 }
 a.badge-info:focus, a.badge-info.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(108, 178, 235, 0.5);
 }
 
 .badge-warning {
   color: #212529;
-  background-color: #ffc107;
+  background-color: #ffed4a;
 }
 a.badge-warning:hover, a.badge-warning:focus {
   color: #212529;
-  background-color: #d39e00;
+  background-color: #ffe817;
 }
 a.badge-warning:focus, a.badge-warning.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(255, 237, 74, 0.5);
 }
 
 .badge-danger {
   color: #fff;
-  background-color: #dc3545;
+  background-color: #e3342f;
 }
 a.badge-danger:hover, a.badge-danger:focus {
   color: #fff;
-  background-color: #bd2130;
+  background-color: #c51f1a;
 }
 a.badge-danger:focus, a.badge-danger.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(227, 52, 47, 0.5);
 }
 
 .badge-light {
@@ -4841,7 +4840,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 }
 
 .alert-dismissible {
-  padding-right: 4rem;
+  padding-right: 3.85rem;
 }
 .alert-dismissible .close {
   position: absolute;
@@ -4853,15 +4852,15 @@ a.badge-dark:focus, a.badge-dark.focus {
 }
 
 .alert-primary {
-  color: #004085;
-  background-color: #cce5ff;
-  border-color: #b8daff;
+  color: #1b4b72;
+  background-color: #d6e9f8;
+  border-color: #c6e0f5;
 }
 .alert-primary hr {
-  border-top-color: #9fcdff;
+  border-top-color: #b0d4f1;
 }
 .alert-primary .alert-link {
-  color: #002752;
+  color: #113049;
 }
 
 .alert-secondary {
@@ -4877,51 +4876,51 @@ a.badge-dark:focus, a.badge-dark.focus {
 }
 
 .alert-success {
-  color: #155724;
-  background-color: #d4edda;
-  border-color: #c3e6cb;
+  color: #1d643b;
+  background-color: #d7f3e3;
+  border-color: #c7eed8;
 }
 .alert-success hr {
-  border-top-color: #b1dfbb;
+  border-top-color: #b3e8ca;
 }
 .alert-success .alert-link {
-  color: #0b2e13;
+  color: #123c24;
 }
 
 .alert-info {
-  color: #0c5460;
-  background-color: #d1ecf1;
-  border-color: #bee5eb;
+  color: #385d7a;
+  background-color: #e2f0fb;
+  border-color: #d6e9f9;
 }
 .alert-info hr {
-  border-top-color: #abdde5;
+  border-top-color: #c0ddf6;
 }
 .alert-info .alert-link {
-  color: #062c33;
+  color: #284257;
 }
 
 .alert-warning {
-  color: #856404;
-  background-color: #fff3cd;
-  border-color: #ffeeba;
+  color: #857b26;
+  background-color: #fffbdb;
+  border-color: #fffacc;
 }
 .alert-warning hr {
-  border-top-color: #ffe8a1;
+  border-top-color: #fff8b3;
 }
 .alert-warning .alert-link {
-  color: #533f03;
+  color: #5d561b;
 }
 
 .alert-danger {
-  color: #721c24;
-  background-color: #f8d7da;
-  border-color: #f5c6cb;
+  color: #761b18;
+  background-color: #f9d6d5;
+  border-color: #f7c6c5;
 }
 .alert-danger hr {
-  border-top-color: #f1b0b7;
+  border-top-color: #f4b0af;
 }
 .alert-danger .alert-link {
-  color: #491217;
+  color: #4c110f;
 }
 
 .alert-light {
@@ -4970,7 +4969,7 @@ a.badge-dark:focus, a.badge-dark.focus {
   height: 1rem;
   overflow: hidden;
   line-height: 0;
-  font-size: 0.75rem;
+  font-size: 0.675rem;
   background-color: #e9ecef;
   border-radius: 0.25rem;
 }
@@ -4983,7 +4982,7 @@ a.badge-dark:focus, a.badge-dark.focus {
   color: #fff;
   text-align: center;
   white-space: nowrap;
-  background-color: #007bff;
+  background-color: #3490dc;
   transition: width 0.6s ease;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -5064,8 +5063,8 @@ a.badge-dark:focus, a.badge-dark.focus {
 .list-group-item.active {
   z-index: 2;
   color: #fff;
-  background-color: #007bff;
-  border-color: #007bff;
+  background-color: #3490dc;
+  border-color: #3490dc;
 }
 .list-group-item + .list-group-item {
   border-top-width: 0;
@@ -5205,17 +5204,17 @@ a.badge-dark:focus, a.badge-dark.focus {
 }
 
 .list-group-item-primary {
-  color: #004085;
-  background-color: #b8daff;
+  color: #1b4b72;
+  background-color: #c6e0f5;
 }
 .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
-  color: #004085;
-  background-color: #9fcdff;
+  color: #1b4b72;
+  background-color: #b0d4f1;
 }
 .list-group-item-primary.list-group-item-action.active {
   color: #fff;
-  background-color: #004085;
-  border-color: #004085;
+  background-color: #1b4b72;
+  border-color: #1b4b72;
 }
 
 .list-group-item-secondary {
@@ -5233,59 +5232,59 @@ a.badge-dark:focus, a.badge-dark.focus {
 }
 
 .list-group-item-success {
-  color: #155724;
-  background-color: #c3e6cb;
+  color: #1d643b;
+  background-color: #c7eed8;
 }
 .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
-  color: #155724;
-  background-color: #b1dfbb;
+  color: #1d643b;
+  background-color: #b3e8ca;
 }
 .list-group-item-success.list-group-item-action.active {
   color: #fff;
-  background-color: #155724;
-  border-color: #155724;
+  background-color: #1d643b;
+  border-color: #1d643b;
 }
 
 .list-group-item-info {
-  color: #0c5460;
-  background-color: #bee5eb;
+  color: #385d7a;
+  background-color: #d6e9f9;
 }
 .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
-  color: #0c5460;
-  background-color: #abdde5;
+  color: #385d7a;
+  background-color: #c0ddf6;
 }
 .list-group-item-info.list-group-item-action.active {
   color: #fff;
-  background-color: #0c5460;
-  border-color: #0c5460;
+  background-color: #385d7a;
+  border-color: #385d7a;
 }
 
 .list-group-item-warning {
-  color: #856404;
-  background-color: #ffeeba;
+  color: #857b26;
+  background-color: #fffacc;
 }
 .list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
-  color: #856404;
-  background-color: #ffe8a1;
+  color: #857b26;
+  background-color: #fff8b3;
 }
 .list-group-item-warning.list-group-item-action.active {
   color: #fff;
-  background-color: #856404;
-  border-color: #856404;
+  background-color: #857b26;
+  border-color: #857b26;
 }
 
 .list-group-item-danger {
-  color: #721c24;
-  background-color: #f5c6cb;
+  color: #761b18;
+  background-color: #f7c6c5;
 }
 .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
-  color: #721c24;
-  background-color: #f1b0b7;
+  color: #761b18;
+  background-color: #f4b0af;
 }
 .list-group-item-danger.list-group-item-action.active {
   color: #fff;
-  background-color: #721c24;
-  border-color: #721c24;
+  background-color: #761b18;
+  border-color: #761b18;
 }
 
 .list-group-item-light {
@@ -5318,7 +5317,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .close {
   float: right;
-  font-size: 1.5rem;
+  font-size: 1.35rem;
   font-weight: 700;
   line-height: 1;
   color: #000;
@@ -5512,7 +5511,7 @@ a.close.disabled {
 
 .modal-title {
   margin-bottom: 0;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .modal-body {
@@ -5586,10 +5585,10 @@ a.close.disabled {
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "Nunito", sans-serif;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   text-align: left;
   text-align: start;
   text-decoration: none;
@@ -5600,7 +5599,7 @@ a.close.disabled {
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   word-wrap: break-word;
   opacity: 0;
 }
@@ -5688,10 +5687,10 @@ a.close.disabled {
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: "Nunito", sans-serif;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 1.6;
   text-align: left;
   text-align: start;
   text-decoration: none;
@@ -5702,7 +5701,7 @@ a.close.disabled {
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.875rem;
+  font-size: 0.7875rem;
   word-wrap: break-word;
   background-color: #fff;
   background-clip: padding-box;
@@ -5811,7 +5810,7 @@ a.close.disabled {
 .popover-header {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
-  font-size: 1rem;
+  font-size: 0.9rem;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-top-left-radius: calc(0.3rem - 1px);
@@ -6102,13 +6101,13 @@ a.close.disabled {
 }
 
 .bg-primary {
-  background-color: #007bff !important;
+  background-color: #3490dc !important;
 }
 
 a.bg-primary:hover, a.bg-primary:focus,
 button.bg-primary:hover,
 button.bg-primary:focus {
-  background-color: #0062cc !important;
+  background-color: #2176bd !important;
 }
 
 .bg-secondary {
@@ -6122,43 +6121,43 @@ button.bg-secondary:focus {
 }
 
 .bg-success {
-  background-color: #28a745 !important;
+  background-color: #38c172 !important;
 }
 
 a.bg-success:hover, a.bg-success:focus,
 button.bg-success:hover,
 button.bg-success:focus {
-  background-color: #1e7e34 !important;
+  background-color: #2d995b !important;
 }
 
 .bg-info {
-  background-color: #17a2b8 !important;
+  background-color: #6cb2eb !important;
 }
 
 a.bg-info:hover, a.bg-info:focus,
 button.bg-info:hover,
 button.bg-info:focus {
-  background-color: #117a8b !important;
+  background-color: #3f9ae5 !important;
 }
 
 .bg-warning {
-  background-color: #ffc107 !important;
+  background-color: #ffed4a !important;
 }
 
 a.bg-warning:hover, a.bg-warning:focus,
 button.bg-warning:hover,
 button.bg-warning:focus {
-  background-color: #d39e00 !important;
+  background-color: #ffe817 !important;
 }
 
 .bg-danger {
-  background-color: #dc3545 !important;
+  background-color: #e3342f !important;
 }
 
 a.bg-danger:hover, a.bg-danger:focus,
 button.bg-danger:hover,
 button.bg-danger:focus {
-  background-color: #bd2130 !important;
+  background-color: #c51f1a !important;
 }
 
 .bg-light {
@@ -6230,7 +6229,7 @@ button.bg-dark:focus {
 }
 
 .border-primary {
-  border-color: #007bff !important;
+  border-color: #3490dc !important;
 }
 
 .border-secondary {
@@ -6238,19 +6237,19 @@ button.bg-dark:focus {
 }
 
 .border-success {
-  border-color: #28a745 !important;
+  border-color: #38c172 !important;
 }
 
 .border-info {
-  border-color: #17a2b8 !important;
+  border-color: #6cb2eb !important;
 }
 
 .border-warning {
-  border-color: #ffc107 !important;
+  border-color: #ffed4a !important;
 }
 
 .border-danger {
-  border-color: #dc3545 !important;
+  border-color: #e3342f !important;
 }
 
 .border-light {
@@ -9801,11 +9800,11 @@ button.bg-dark:focus {
 }
 
 .text-primary {
-  color: #007bff !important;
+  color: #3490dc !important;
 }
 
 a.text-primary:hover, a.text-primary:focus {
-  color: #0056b3 !important;
+  color: #1d68a7 !important;
 }
 
 .text-secondary {
@@ -9817,35 +9816,35 @@ a.text-secondary:hover, a.text-secondary:focus {
 }
 
 .text-success {
-  color: #28a745 !important;
+  color: #38c172 !important;
 }
 
 a.text-success:hover, a.text-success:focus {
-  color: #19692c !important;
+  color: #27864f !important;
 }
 
 .text-info {
-  color: #17a2b8 !important;
+  color: #6cb2eb !important;
 }
 
 a.text-info:hover, a.text-info:focus {
-  color: #0f6674 !important;
+  color: #298fe2 !important;
 }
 
 .text-warning {
-  color: #ffc107 !important;
+  color: #ffed4a !important;
 }
 
 a.text-warning:hover, a.text-warning:focus {
-  color: #ba8b00 !important;
+  color: #fde300 !important;
 }
 
 .text-danger {
-  color: #dc3545 !important;
+  color: #e3342f !important;
 }
 
 a.text-danger:hover, a.text-danger:focus {
-  color: #a71d2a !important;
+  color: #ae1c17 !important;
 }
 
 .text-light {
@@ -10003,16 +10002,617 @@ h3 {
     border-color: #dee2e6;
   }
 }
-/* ---------------------------------------------------------------------------------
-	color
---------------------------------------------------------------------------------- */
-/* color */
-/* border color */
-/* input color */
-/* ---------------------------------------------------------------------------------
-	foundation
---------------------------------------------------------------------------------- */
-/* base */
-/* ---------------------------------------------------------------------------------
-	layout
-    --------------------------------------------------------------------------------- */
+.bg-red-4 {
+  background-color: rgba(255, 0, 0, 0.4);
+}
+
+.bg-red-6 {
+  background-color: rgba(255, 0, 0, 0.6);
+}
+
+.bg-black-4 {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.bg-black-6 {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.bg-black {
+  background-color: black;
+}
+
+.bg-green {
+  background-color: #093100;
+}
+
+.bg-green-6 {
+  background-color: #093100;
+  opacity: 0.6;
+}
+
+.bg-none {
+  background-color: transparent;
+}
+
+.bg-white-2 {
+  background-color: rgba(255, 255, 255, 0.2) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 0 8px #000 !important;
+}
+
+.bg-color-1 {
+  background-color: #F5F7F8;
+}
+
+.w-30 {
+  width: 30% !important;
+}
+
+@media (max-width: 991.98px) {
+  .w-md-25 {
+    width: 25% !important;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .w-md-50 {
+    width: 50% !important;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .w-md-75 {
+    width: 75% !important;
+  }
+}
+
+.rounded-right-20 {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.rounded-top-15 {
+  border-top-right-radius: 15px;
+  border-top-left-radius: 15px;
+}
+
+.rounded-15 {
+  border-radius: 15px;
+}
+
+.rounded-top-20 {
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+}
+
+table, th, td {
+  padding: 5px !important;
+}
+@media (max-width: 991.98px) {
+  table, th, td {
+    font-size: 16px !important;
+  }
+}
+
+.reviewRateStar {
+  font-family: "Font Awesome 5 Free";
+  content: "\f005";
+  font-size: 1.8vw;
+  font-weight: 900;
+}
+
+span.star {
+  display: inline-block;
+  width: 80px;
+  line-height: 1;
+  vertical-align: middle;
+  margin-top: -1px;
+  font-size: 0;
+}
+
+.ft-15 {
+  font-size: 15px !important;
+}
+
+@media (max-width: 991.98px) {
+  .ft-md-15 {
+    font-size: 15px !important;
+  }
+}
+
+.ft-12 {
+  font-size: 12px !important;
+}
+
+.ft-13 {
+  font-size: 13px !important;
+}
+
+.ft-30 {
+  font-size: 30px !important;
+}
+
+.ft-30 {
+  font-size: 20px !important;
+}
+
+@media (max-width: 991.98px) {
+  .ft-md-20 {
+    font-size: 20px !important;
+  }
+}
+
+.navbar {
+  background-color: #10580c;
+  padding: 0px 20px;
+  width: 100%;
+  z-index: 2;
+  position: fixed;
+  top: 0px;
+}
+@media (max-width: 991.98px) {
+  .navbar .nav {
+    justify-content: space-evenly;
+  }
+}
+.navbar .nav-link {
+  margin-left: 3px;
+  margin-right: 3px;
+  padding: 10px;
+}
+.navbar .nav-link:hover {
+  background-color: #084405;
+  transition: 0.3s;
+}
+.navbar .nav-link:focus {
+  background-color: #084405;
+  box-shadow: none;
+  border-bottom: 1px solid white;
+}
+.navbar .navbar-toggler {
+  border: none;
+}
+.navbar .navbar-toggler .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 255.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+.navbar.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem #093100 !important;
+}
+.navbar .dropdown-toggle::after {
+  display: none;
+}
+
+pre {
+  font-family: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+  height: 100%;
+  overflow-y: visible;
+  margin: 0;
+}
+
+.edit {
+  position: absolute;
+  right: 30px;
+  background-color: rgba(0, 0, 0, 0.4);
+  padding: 0 10px;
+}
+.edit:hover {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.edit:hover img {
+  transform: scale(1.1);
+}
+
+.count {
+  float: right;
+  position: absolute;
+  display: none;
+  padding: 0.2em 0.3em;
+  margin-top: 20px;
+  margin-right: -10px;
+  margin-left: -10px;
+  color: #fff;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 1.1;
+  letter-spacing: -0.05em;
+  white-space: nowrap;
+  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.15);
+  background-color: #ff2e13;
+  border-radius: 3px;
+  z-index: 1010;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: subpixel-antialiased;
+  max-width: 5.03333em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+::-webkit-scrollbar {
+  width: 20px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #d6dee1;
+  border-radius: 20px;
+  border: 6px solid transparent;
+  background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #a8bbbf;
+}
+
+input[type=checkbox] {
+  border-radius: 0px;
+  border-color: #707070;
+}
+input[type=checkbox]:checked {
+  border-color: #707070;
+  background-image: url(/images/icon-checked.svg);
+  background-color: white;
+  background-size: 14px;
+}
+input[type=checkbox]:focus {
+  box-shadow: none;
+}
+
+input[type=date].hide-calender::-webkit-inner-spin-button, input[type=date].hide-calender::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+.loader2-wrap {
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  top: 0px;
+  position: fixed;
+}
+.loader2-wrap .loading {
+  position: fixed;
+  margin: auto;
+  width: 4rem;
+  height: 4rem;
+  transform-style: preserve-3d;
+  perspective: 800px;
+  top: calc(50vh - 2rem);
+  left: calc(50vw - 2rem);
+}
+.loader2-wrap .loading .arc {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border-bottom: 5px solid white;
+}
+.loader2-wrap .loading .arc:nth-child(1) {
+  -webkit-animation: rotate1 1.15s linear infinite;
+          animation: rotate1 1.15s linear infinite;
+}
+.loader2-wrap .loading .arc:nth-child(2) {
+  -webkit-animation: rotate2 1.15s linear infinite;
+          animation: rotate2 1.15s linear infinite;
+}
+.loader2-wrap .loading .arc:nth-child(3) {
+  -webkit-animation: rotate3 1.15s linear infinite;
+          animation: rotate3 1.15s linear infinite;
+}
+.loader2-wrap .loading .arc:nth-child(1) {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s;
+}
+.loader2-wrap .loading .arc:nth-child(2) {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.loader2-wrap .loading .arc:nth-child(3) {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+@-webkit-keyframes rotate1 {
+  from {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
+  }
+  to {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
+  }
+}
+@keyframes rotate1 {
+  from {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
+  }
+  to {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
+  }
+}
+@-webkit-keyframes rotate2 {
+  from {
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
+  }
+  to {
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
+  }
+}
+@keyframes rotate2 {
+  from {
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
+  }
+  to {
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
+  }
+}
+@-webkit-keyframes rotate3 {
+  from {
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
+  }
+  to {
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
+  }
+}
+@keyframes rotate3 {
+  from {
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
+  }
+  to {
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
+  }
+}
+
+.loader1-wrap {
+  display: none;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+}
+.loader1-wrap .ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 150px;
+  height: 150px;
+  background: #262626;
+  border: 3px solid #3c3c3c;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 150px;
+  font-family: sans-serif;
+  font-size: 20px;
+  color: #fff000;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  text-shadow: 0 0 10px #fff000;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
+.loader1-wrap .ring:before {
+  content: "";
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  width: 150px;
+  height: 150px;
+  border: 3px solid transparent;
+  border-top: 3px solid #fff000;
+  border-right: 3px solid #fff000;
+  border-radius: 50%;
+  -webkit-animation: animateC 2s linear infinite;
+          animation: animateC 2s linear infinite;
+}
+.loader1-wrap #loading {
+  display: block;
+  position: absolute;
+  top: calc(50% - 2px);
+  left: 50%;
+  width: 50%;
+  height: 4px;
+  background: transparent;
+  transform-origin: left;
+  -webkit-animation: animate 2s linear infinite;
+          animation: animate 2s linear infinite;
+}
+.loader1-wrap #loading:before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff000;
+  top: -6px;
+  right: -8px;
+  box-shadow: 0 0 20px #fff000;
+}
+@-webkit-keyframes animateC {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes animateC {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes animate {
+  0% {
+    transform: rotate(45deg);
+  }
+  100% {
+    transform: rotate(405deg);
+  }
+}
+@keyframes animate {
+  0% {
+    transform: rotate(45deg);
+  }
+  100% {
+    transform: rotate(405deg);
+  }
+}
+
+.l-centeringbox {
+  width: 100%;
+  height: 100%;
+}
+.l-centeringbox-wrap {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 100%;
+  border-radius: 20px;
+  box-sizing: border-box;
+}
+@media (min-width: 992px) {
+  .l-centeringbox-wrap {
+    padding: 192px 0;
+  }
+}
+
+.l-single-main {
+  min-height: 100vh;
+  /* Fallback */
+  min-height: calc(var(--vh, 1vh) * 100);
+}
+.l-single-container {
+  max-width: 540px;
+  width: 100%;
+  margin: 0 auto;
+  border-radius: 8px;
+  padding: 50px 24px 70px;
+  background: #fff;
+  box-sizing: border-box;
+  display: block;
+}
+@media (min-width: 992px) {
+  .l-single-container {
+    width: 540px;
+    max-width: none;
+    box-shadow: 0 1px 4px #9b8989;
+    padding: 60px 60px 60px;
+  }
+}
+.l-single-container h1 {
+  font-size: 3rem;
+  text-align: center;
+  margin-bottom: 35px;
+  line-height: 1;
+}
+@media (min-width: 992px) {
+  .l-single-container h1 {
+    margin-bottom: 35px;
+    font-size: 2.8rem;
+  }
+}
+@media (max-width: 991.98px) {
+  .l-single-container h1 {
+    letter-spacing: 0.02em;
+  }
+}
+@media (max-width: 767.98px) {
+  .l-single-container h1 {
+    font-size: 2.8rem;
+  }
+}
+.l-single-inner {
+  width: 100%;
+  margin: 0 auto;
+  width: 410px;
+}
+@media (max-width: 991.98px) {
+  .l-single-inner {
+    width: 100%;
+  }
+}
+.l-single-inner .form-group {
+  margin: 0 0 17px;
+}
+@media (min-width: 992px) {
+  .l-single-inner .form-group {
+    margin: 0 0 20px;
+  }
+}
+
+@media (min-width: 992px) {
+  .l-registration .l-single-container h1 {
+    margin-bottom: 40px;
+  }
+}
+
+.l-container {
+  display: flex;
+  flex-flow: row-reverse;
+  background: #fff;
+  justify-content: flex-end;
+}
+.l-content {
+  max-width: 540px;
+  width: 100%;
+  margin: 0 auto;
+  border-radius: 8px;
+  padding: 50px 20px 70px;
+  background: #fff;
+  box-sizing: border-box;
+  display: block;
+}
+@media (min-width: 992px) {
+  .l-content {
+    width: 540px;
+    max-width: none;
+    padding: 60px 60px 60px;
+  }
+}
+.l-content h1 {
+  font-size: 3rem;
+  text-align: center;
+  margin-bottom: 35px;
+  line-height: 1;
+}
+@media (min-width: 992px) {
+  .l-content h1 {
+    margin-bottom: 35px;
+    font-size: 2.8rem;
+  }
+}
+@media (max-width: 991.98px) {
+  .l-content h1 {
+    letter-spacing: 0.02em;
+  }
+}
+@media (max-width: 767.98px) {
+  .l-content h1 {
+    font-size: 2.8rem;
+  }
+}
diff --git a/backend/public/js/app.js b/backend/public/js/app.js
index 03bb8458..7b457b82 100644
--- a/backend/public/js/app.js
+++ b/backend/public/js/app.js
@@ -9837,7 +9837,7 @@ module.exports = {
 
 __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
-__webpack_require__(/*! ./pages/contacts/complete */ "./resources/js/pages/contacts/complete.js");
+__webpack_require__(/*! ./pages/contact/complete */ "./resources/js/pages/contact/complete.jsx");
 
 /***/ }),
 
@@ -9872,9 +9872,9 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 /***/ }),
 
-/***/ "./resources/js/pages/contacts/complete.js":
+/***/ "./resources/js/pages/contact/complete.jsx":
 /*!*************************************************!*\
-  !*** ./resources/js/pages/contacts/complete.js ***!
+  !*** ./resources/js/pages/contact/complete.jsx ***!
   \*************************************************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
@@ -9892,10 +9892,12 @@ __webpack_require__.r(__webpack_exports__);
 
 var Contact_Complete = function Contact_Complete() {
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("h4", {
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p", {
+      className: "text-center font-weight-bold ft-20",
       children: "\u304A\u554F\u3044\u5408\u308F\u305B\u5B8C\u4E86"
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("p", {
-      children: ["\u304A\u554F\u3044\u5408\u308F\u305B\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002 3\u55B6\u696D\u65E5\u4EE5\u5185\u306B\u304A\u8FD4\u4E8B\u3055\u305B\u3066\u3044\u305F\u3060\u304D\u307E\u3059\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), "\u4E07\u304C\u4E00\u5C4A\u304B\u306A\u3044\u5834\u5408\u306F\u3001\u4EE5\u4E0B\u306E\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u306B \u76F4\u63A5\u3054\u9023\u7D61\u304F\u3060\u3055\u3044\u307E\u305B\u3002"]
+      className: "ft-13 p-2 bg-color-1",
+      children: ["\u304A\u554F\u3044\u5408\u308F\u305B\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), "3\u55B6\u696D\u65E5\u4EE5\u5185\u306B\u304A\u8FD4\u4E8B\u3055\u305B\u3066\u3044\u305F\u3060\u304D\u307E\u3059\u3002", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("br", {}), "\u4E07\u304C\u4E00\u5C4A\u304B\u306A\u3044\u5834\u5408\u306F\u3001\u4EE5\u4E0B\u306E\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u306B \u76F4\u63A5\u3054\u9023\u7D61\u304F\u3060\u3055\u3044\u307E\u305B\u3002"]
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
       children: "sample@gmail.com"
     }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div", {
@@ -9904,12 +9906,14 @@ var Contact_Complete = function Contact_Complete() {
         "class": "col-6",
         children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
           fullWidth: true,
+          className: "ft-15",
           children: "\u89AA\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3078"
         })
       }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
         className: "col-6",
         children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_material_ui_core__WEBPACK_IMPORTED_MODULE_3__.default, {
           fullWidth: true,
+          className: "ft-15",
           children: "\u5B50\u30ED\u30B0\u30A4\u30F3\u753B\u9762\u3078"
         })
       })]
@@ -27308,12 +27312,9 @@ var __WEBPACK_AMD_DEFINE_RESULT__;/**
 /*!*********************************!*\
   !*** ./resources/sass/app.scss ***!
   \*********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-// extracted by mini-css-extract-plugin
+/***/ (() => {
 
+throw new Error("Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):\nModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: There is no module with the namespace \"mixin\".\n   ╷\n3  │ ┌ @include mixin.pc{\n4  │ │   .fade {\n5  │ │     transition: opacity 0.3s ease;\n6  │ │     -webkit-backface-visibility: hidden;\n7  │ │     backface-visibility: hidden;\n8  │ │     &:hover{\n9  │ │       opacity: 0.7;\n10 │ │       cursor: pointer;\n11 │ │     }\n12 │ │   }\n13 │ │   .fade02 {\n14 │ │     transition: opacity 0.3s ease;\n15 │ │     -webkit-backface-visibility: hidden;\n16 │ │     backface-visibility: hidden;\n17 │ │     &:hover{\n18 │ │       opacity: 0.5;\n19 │ │       cursor: pointer;\n20 │ │     }\n21 │ │   }\n22 │ └ }\n   ╵\n  resources\\sass\\foundation\\variable\\_animation.scss 3:1  @import\n  E:\\_Workstation\\6_\\2_kikikanri\\backend\\resources\\sass\\app.scss 96:9                                              root stylesheet\n    at processResult (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\webpack\\lib\\NormalModule.js:707:19)\n    at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\webpack\\lib\\NormalModule.js:813:5\n    at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\loader-runner\\lib\\LoaderRunner.js:399:11\n    at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\loader-runner\\lib\\LoaderRunner.js:251:18\n    at context.callback (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\loader-runner\\lib\\LoaderRunner.js:124:13)\n    at E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass-loader\\dist\\index.js:73:7\n    at Function.call$2 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:95825:16)\n    at _render_closure1.call$2 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:83882:12)\n    at _RootZone.runBinary$3$3 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:28060:18)\n    at _FutureListener.handleError$1 (E:\\_Workstation\\6_\\2_kikikanri\\backend\\node_modules\\sass\\sass.dart.js:26590:21)");
 
 /***/ }),
 
@@ -61085,42 +61086,7 @@ function combine (array, callback) {
 /******/ 		return module.exports;
 /******/ 	}
 /******/ 	
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = __webpack_modules__;
-/******/ 	
 /************************************************************************/
-/******/ 	/* webpack/runtime/chunk loaded */
-/******/ 	(() => {
-/******/ 		var deferred = [];
-/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
-/******/ 			if(chunkIds) {
-/******/ 				priority = priority || 0;
-/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
-/******/ 				deferred[i] = [chunkIds, fn, priority];
-/******/ 				return;
-/******/ 			}
-/******/ 			var notFulfilled = Infinity;
-/******/ 			for (var i = 0; i < deferred.length; i++) {
-/******/ 				var [chunkIds, fn, priority] = deferred[i];
-/******/ 				var fulfilled = true;
-/******/ 				for (var j = 0; j < chunkIds.length; j++) {
-/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
-/******/ 						chunkIds.splice(j--, 1);
-/******/ 					} else {
-/******/ 						fulfilled = false;
-/******/ 						if(priority < notFulfilled) notFulfilled = priority;
-/******/ 					}
-/******/ 				}
-/******/ 				if(fulfilled) {
-/******/ 					deferred.splice(i--, 1)
-/******/ 					var r = fn();
-/******/ 					if (r !== undefined) result = r;
-/******/ 				}
-/******/ 			}
-/******/ 			return result;
-/******/ 		};
-/******/ 	})();
-/******/ 	
 /******/ 	/* webpack/runtime/compat get default export */
 /******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
@@ -61182,66 +61148,13 @@ function combine (array, callback) {
 /******/ 		};
 /******/ 	})();
 /******/ 	
-/******/ 	/* webpack/runtime/jsonp chunk loading */
-/******/ 	(() => {
-/******/ 		// no baseURI
-/******/ 		
-/******/ 		// object to store loaded and loading chunks
-/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
-/******/ 		var installedChunks = {
-/******/ 			"/js/app": 0,
-/******/ 			"css/app": 0
-/******/ 		};
-/******/ 		
-/******/ 		// no chunk on demand loading
-/******/ 		
-/******/ 		// no prefetching
-/******/ 		
-/******/ 		// no preloaded
-/******/ 		
-/******/ 		// no HMR
-/******/ 		
-/******/ 		// no HMR manifest
-/******/ 		
-/******/ 		__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
-/******/ 		
-/******/ 		// install a JSONP callback for chunk loading
-/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
-/******/ 			var [chunkIds, moreModules, runtime] = data;
-/******/ 			// add "moreModules" to the modules object,
-/******/ 			// then flag all "chunkIds" as loaded and fire callback
-/******/ 			var moduleId, chunkId, i = 0;
-/******/ 			for(moduleId in moreModules) {
-/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
-/******/ 				}
-/******/ 			}
-/******/ 			if(runtime) var result = runtime(__webpack_require__);
-/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
-/******/ 			for(;i < chunkIds.length; i++) {
-/******/ 				chunkId = chunkIds[i];
-/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 					installedChunks[chunkId][0]();
-/******/ 				}
-/******/ 				installedChunks[chunkIds[i]] = 0;
-/******/ 			}
-/******/ 			return __webpack_require__.O(result);
-/******/ 		}
-/******/ 		
-/******/ 		var chunkLoadingGlobal = self["webpackChunk"] = self["webpackChunk"] || [];
-/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
-/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
-/******/ 	})();
-/******/ 	
 /************************************************************************/
 /******/ 	
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
-/******/ 	// This entry module depends on other loaded chunks and execution need to be delayed
-/******/ 	__webpack_require__.O(undefined, ["css/app"], () => (__webpack_require__("./resources/js/app.js")))
-/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["css/app"], () => (__webpack_require__("./resources/sass/app.scss")))
-/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
+/******/ 	__webpack_require__("./resources/js/app.js");
+/******/ 	// This entry module doesn't tell about it's top-level declarations so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./resources/sass/app.scss");
 /******/ 	
 /******/ })()
 ;
\ No newline at end of file
diff --git a/backend/public/mix-manifest.json b/backend/public/mix-manifest.json
index 2d601171..0d5d4a41 100644
--- a/backend/public/mix-manifest.json
+++ b/backend/public/mix-manifest.json
@@ -1,4 +1,3 @@
 {
-    "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/js/app.js": "/js/app.js"
 }
diff --git a/backend/resources/js/app.js b/backend/resources/js/app.js
index 966f5c66..ebaa4c2a 100644
--- a/backend/resources/js/app.js
+++ b/backend/resources/js/app.js
@@ -1,2 +1,2 @@
 require('./bootstrap');
-require('./pages/contacts/complete');
+require('./pages/contact/complete');
diff --git a/backend/resources/js/pages/contacts/complete.js b/backend/resources/js/pages/contact/complete.jsx
similarity index 65%
rename from backend/resources/js/pages/contacts/complete.js
rename to backend/resources/js/pages/contact/complete.jsx
index 2f2f74fd..21063121 100644
--- a/backend/resources/js/pages/contacts/complete.js
+++ b/backend/resources/js/pages/contact/complete.jsx
@@ -6,10 +6,10 @@ import { Button } from '@material-ui/core';
 const Contact_Complete = () => {
 	return (
         <div>
-            <h4>お問い合わせ完了</h4>
-            <p>
-                お問い合わせが完了しました。
-                3営業日以内にお返事させていただきます。<br/>
+            <p className="text-center font-weight-bold ft-20">お問い合わせ完了</p>
+            <p className="ft-13 p-2 bg-color-1">
+                お問い合わせが完了しました。<br/>
+                3営業日以内にお返事させていただきます。<br/><br/>
                 万が一届かない場合は、以下のメールアドレスに 直接ご連絡くださいませ。
             </p>
             <div>
@@ -17,10 +17,10 @@ const Contact_Complete = () => {
             </div>
             <div className="row">
                 <div class="col-6">
-                    <Button fullWidth>親ログイン画面へ</Button>
+                    <Button fullWidth className="ft-15">親ログイン画面へ</Button>
                 </div>
                 <div className="col-6">
-                    <Button fullWidth>子ログイン画面へ</Button>
+                    <Button fullWidth className="ft-15">子ログイン画面へ</Button>
                 </div>
             </div>
         </div>
diff --git a/backend/resources/sass/app.scss b/backend/resources/sass/app.scss
index c5015fd3..32b63908 100644
--- a/backend/resources/sass/app.scss
+++ b/backend/resources/sass/app.scss
@@ -1,85 +1,228 @@
 @charset "UTF-8";
-
-@mixin pc($breakpoint: $_default-breakpoint) {
-    @if map-has-key($_breakpoint-up, $breakpoint) {
-      @media screen and (min-width: 1068px) {
-        @content;
-      }
-    } @else {
-      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$_breakpoint-up` map.";
-    }
-  }
-
-@mixin sp($breakpoint: $_default-breakpoint) {
-    @if map-has-key($_breakpoint-down, $breakpoint) {
-      @media screen and (max-width: 1067px) {
-        @content;
-      }
-    } @else {
-      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$_breakpoint-down` map.";
-    }
-  }
-  
-  @mixin sp02($breakpoint: $_default-breakpoint) {
-    @if map-has-key($_breakpoint-down, $breakpoint) {
-      @media screen and (max-width: 430px) {
-        @content;
-      }
-    } @else {
-      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$_breakpoint-down` map.";
-    }
-  }
-  
-  
-  @mixin min($breakpoint: $_default-breakpoint) {
-    @if map-has-key($_breakpoint-down, $breakpoint) {
-      @media screen and (max-width: 374px) {
-        @content;
-      }
-    } @else {
-      @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-      + "Please make sure it is defined in `$_breakpoint-down` map.";
-    }
-  }
-  
-
-
-/* Fonts */
 @import url('https://fonts.googleapis.com/css?family=Nunito');
 
+/**
+ * VARIABLE
+ * global...サイト全体に使用するサイズや数値に関する変数です。
+ * breakpoint...メディアクエリで使用するブレイクポイントです。
+ * font-family...font-family指定をまとめています。
+ * color...グローバルに使用する色指定です。
+ * z-index...z-indexの並び順を管理します。
+ * easing...cubic-bezier関数を使用したタイミング関数を定義しています。
+ *
+ * FUNCTION
+ * strip-unit...pxやremなどの単位を取り除きます。
+ * em...pxをemに変換します。
+ * rem...pxをremに変換します。
+ * tint...白色を加えて明度を明るくします。
+ * shade...黒色を加えて明度を暗くします。
+ * z-index...z-indexの並び順を管理します。
+ * tracking...Photoshopのカーニングをemに変換します。
+ *
+ * MIXIN
+ * mq-up...メディアクエリを`min-width`で挿入します。
+ * mq-down...メディアクエリを`max-width`で挿入します。
+ * responsive...レスポンシブ対応クラスを生成します。
+ * clearfix...floatの解除をします。
+ * on-event...:hover, :active, :focusをまとめて指定します。
+ * sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
+ *
+ * BASE
+ * normalize...Normalize.cssをインポートしています。
+ * base...タイプセレクタと属性セレクタのデフォルトスタイルです。
+ *
+ * LAYOUT
+ * header...ヘッダーエリアのコンテナブロックのスタイルです。
+ * footer...フッターエリアのコンテナブロックのスタイルです。
+ * main...コンテンツエリアのコンテナブロックのスタイルです。
+ * side...サイドバーエリアのコンテナブロックのスタイルです。
+ * section...`<section>`要素を使うようなセクションの余白を管理します。
+ *
+ * COMPONENT
+ * wrapper...最大幅を指定します。
+ * layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
+ * media...画像とテキストが横並びになるオブジェクトです。
+ * list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
+ * embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
+ * table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
+ *
+ * PROJECT
+ * icon...アイコンフォントです。テンプレートから自動で生成されます。
+ * icon-extend...アイコンフォントを拡張するModifierです。
+ * button...ボタンコンポーネントです。
+ * breadcrumb...パンくずリストコンポーネントです。
+ * label...インラインのラベルコンポーネントです。
+ * badge...投稿数のような数値を表示するバッジコンポーネントです。
+ * card...カードタイプのコンポーネントです。
+ * split...定義リストをブロックからインラインにするコンポーネントです。
+ * notification...お知らせエリアのコンポーネントです。
+ *
+ * SCOPE
+ * blog...ブログページのスタイルです。
+ *
+ * UTILITY
+ * text...テキストのスタイルに関する汎用クラスです。
+ * image...画像のレイアウトに関する汎用クラスです。
+ * margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
+ * display...要素の表示や改行をコントロールする場合に使用します。
+ * width...おもにグリッドで使用する`width`を指定する汎用クラスです。
+ * offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
+ * percent...`width`プロパティを5%刻みで指定する汎用クラスです。
+ */
+/**
+ * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
+ * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
+ * 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
+ */
 
-// Bootstrap
-@import '~bootstrap/scss/bootstrap';
+/* =============================================================================
+   #Foundation
+   ========================================================================== */
+//
+// Sassの変数と関数を定義します。
+// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
+// プレフィックス（接頭辞）として`_`をつけます。
+
+@import "./foundation/mixin/box";
+@import "./foundation/mixin/clearfix";
+@import "./foundation/mixin/layout";
+@import "./foundation/mixin/on-event";
+@import "./foundation/mixin/pc";
+@import "./foundation/mixin/responsive";
+@import "./foundation/mixin/sp";
+@import "./foundation/mixin/sr-only";
+
+// //
+@import "./foundation/variable/animation";
+@import "./foundation/variable/breakpoint";
+@import "./foundation/variable/color";
+@import "./foundation/variable/easing";
+@import "./foundation/variable/font-family";
+@import "./foundation/variable/global";
+@import "./foundation/variable/z-index";
 
 
-/* ---------------------------------------------------------------------------------
-	color
---------------------------------------------------------------------------------- */
-/* color */
-$colorRed: #af0606;
-$colorBlue: #004DC7;
-$colorBlack: #000000;
-$colorGray: #B2B2B2;
-/* border color */
-$borderColorGray: #eeeeee;
-/* input color */
-$inputBorderGray: #D8D8D8;
+@import "foundation/function/_em";
+@import "foundation/function/_rem";
+@import "foundation/function/_tint";
+@import "foundation/function/_shade";
 
 
-/* ---------------------------------------------------------------------------------
-	foundation
---------------------------------------------------------------------------------- */
-/* base */
+/**
+ * Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
+ * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
+ * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
+ */
+// @import "foundation/base/normalize";
+// @import "foundation/base/base";
+// @import "foundation/base/reset";
 
+/* =============================================================================
+   #Layout
+   ========================================================================== */
+/**
+ * Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
+ * 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
+ * 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
+ * グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
+ * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
+ * プレフィックス（接頭辞）として`l-`をつけます。
+ */
+@import "./layout/content";
+@import "./layout/footer";
+@import "./layout/header";
+@import "./layout/main";
+@import "./layout/section";
+@import "./layout/side";
 
+/* =============================================================================
+   #Object
+   ========================================================================== */
+/**
+ * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
+ * 拡張性などによって、4つのレイヤーにわけられます。
+ * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
+ * 1. Component（`c-`）
+ * 2. Project（`p-`）
+ * 3. Scope(`s-`)
+ * 4. Utility（`u-`）
+ *
+ * ランディングページのようにページ特有のスタイルを多く含む場合は、
+ * ページ専用のCSSファイルを作成することもできます。
+ * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
+ * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
+ */
 
-/* ---------------------------------------------------------------------------------
-	layout
-    --------------------------------------------------------------------------------- */
-// @import "./variables";
+/* -----------------------------------------------------------------------------
+   #Component
+   -------------------------------------------------------------------------- */
+/**
+ * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
+ * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
+ * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
+ * 例えばgridやmediaといったレイアウトパターンが該当します。
+ * プレフィックス（接頭辞）として`c-`をつけます。
+ */
+@import "object/component/_wrapper";
+@import "object/component/_layout";
+@import "object/component/_table";
 
-// @import "./layout/_main";
+/* -----------------------------------------------------------------------------
+   #Project
+   -------------------------------------------------------------------------- */
+/**
+ * Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
+ * 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`p-`をつけます。
+ */
+@import "object/project/article";
+@import "object/project/box";
+@import "object/project/breadcrumb";
+@import "object/project/button";
+@import "object/project/card";
+@import "object/project/edit";
+@import "object/project/form";
+@import "object/project/icon-extend";
+@import "object/project/icon";
+@import "object/project/label";
+@import "object/project/login";
+@import "object/project/meeting";
+@import "object/project/modal";
+@import "object/project/notification";
+@import "object/project/profile";
+@import "object/project/search";
+@import "object/project/user";
 
+/* -----------------------------------------------------------------------------
+   #Scope
+   -------------------------------------------------------------------------- */
+/**
+ * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
+ * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
+ * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
+ * 例えばブログページのスタイルとして_blog.scssを作成します。
+ * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、
+ * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`s-`をつけます。
+ */
+// @import "object/scope/_blog";
+
+/* -----------------------------------------------------------------------------
+   #Utility
+   -------------------------------------------------------------------------- */
+/**
+ * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
+ * コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
+ * `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
+ * pxよりもemや%で指定することを推奨します。
+ * 確実にスタイルを適応させるために`!important`を使用します。
+ * プレフィックス（接頭辞）として`u-`をつけます。
+ */
+@import "object/utility/align";
+@import "object/utility/display";
+@import "object/utility/margin";
+@import "object/utility/percent";
+@import "object/utility/sr-only";
+@import "object/utility/text";
\ No newline at end of file
diff --git a/backend/resources/sass/foundation/function/_em.scss b/backend/resources/sass/foundation/function/_em.scss
index 204a476f..bdf24262 100644
--- a/backend/resources/sass/foundation/function/_em.scss
+++ b/backend/resources/sass/foundation/function/_em.scss
@@ -2,8 +2,6 @@
 // @param {Number} $self - 指定したいpx。
 // @param {Number} $parent - 基準となるpx。
 // @example - _em(15px, 30px) => 0.5em
-@use "sass:math";
-
 @function _em($self, $parent) {
-  @return math.div($self, $parent) * 1em;
+  @return ($self / $parent) * 1em;
 }
diff --git a/backend/resources/sass/foundation/function/_rem.scss b/backend/resources/sass/foundation/function/_rem.scss
index 47051e3b..fdde8064 100644
--- a/backend/resources/sass/foundation/function/_rem.scss
+++ b/backend/resources/sass/foundation/function/_rem.scss
@@ -2,9 +2,7 @@
 // @param {Number} - 指定したいピクセル値。
 // @param {String} $key [sm] - 指定するブレイクポイントを`$_font-size`のキーで指定。
 // @example - _rem(15px) => 1rem
-@use "sass:math";
-
 @function _rem($px, $key: 'sm') {
   $value: map-get($_font-size, $key);
-  @return math.div($px, $value) * 1rem;
+  @return ($px / $value) * 1rem;
 }
diff --git a/backend/resources/sass/foundation/variable/_animation.scss b/backend/resources/sass/foundation/variable/_animation.scss
index 140db498..256af2df 100644
--- a/backend/resources/sass/foundation/variable/_animation.scss
+++ b/backend/resources/sass/foundation/variable/_animation.scss
@@ -1,22 +1,22 @@
-// // アニメーションの管理
+// アニメーションの管理
 
-// @include mixin.pc{
-//   .fade {
-//     transition: opacity 0.3s ease;
-//     -webkit-backface-visibility: hidden;
-//     backface-visibility: hidden;
-//     &:hover{
-//       opacity: 0.7;
-//       cursor: pointer;
-//     }
-//   }
-//   .fade02 {
-//     transition: opacity 0.3s ease;
-//     -webkit-backface-visibility: hidden;
-//     backface-visibility: hidden;
-//     &:hover{
-//       opacity: 0.5;
-//       cursor: pointer;
-//     }
-//   }
-// }
\ No newline at end of file
+@include mixin.pc{
+  .fade {
+    transition: opacity 0.3s ease;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    &:hover{
+      opacity: 0.7;
+      cursor: pointer;
+    }
+  }
+  .fade02 {
+    transition: opacity 0.3s ease;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    &:hover{
+      opacity: 0.5;
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file
diff --git a/backend/public/css/index.css b/backend/resources/sass/index.md
similarity index 83%
rename from backend/public/css/index.css
rename to backend/resources/sass/index.md
index ab9b1e3a..bd1319b3 100644
--- a/backend/public/css/index.css
+++ b/backend/resources/sass/index.md
@@ -1,5 +1,6 @@
-@import url(https://fonts.googleapis.com/css?family=Nunito);
-@charset "UTF-8";
+## TOC（目次）
+
+```scss
 /**
  * VARIABLE
  * global...サイト全体に使用するサイズや数値に関する変数です。
@@ -68,19 +69,55 @@
  * offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
  * percent...`width`プロパティを5%刻みで指定する汎用クラスです。
  */
+```
+
+## CSS構成
+
+```scss
 /**
  * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
  * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
  * 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
  */
+
 /* =============================================================================
    #Foundation
    ========================================================================== */
+//
+// Sassの変数と関数を定義します。
+// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
+// プレフィックス（接頭辞）として`_`をつけます。
+//
+@import "foundation/variable/_global";
+@import "foundation/variable/_breakpoint";
+@import "foundation/variable/_font-family";
+@import "foundation/variable/_color";
+@import "foundation/variable/_z-index";
+@import "foundation/variable/_easing";
+
+@import "foundation/function/_strip-unit";
+@import "foundation/function/_em";
+@import "foundation/function/_rem";
+@import "foundation/function/_tint";
+@import "foundation/function/_shade";
+@import "foundation/function/_z-index";
+@import "foundation/function/_tracking";
+
+@import "foundation/mixin/_mq-up";
+@import "foundation/mixin/_mq-down";
+@import "foundation/mixin/_responsive";
+@import "foundation/mixin/_clearfix";
+@import "foundation/mixin/_on-event";
+@import "foundation/mixin/_sr-only";
+
 /**
  * Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
  * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
  * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
  */
+@import "foundation/base/_normalize";
+@import "foundation/base/_base";
+
 /* =============================================================================
    #Layout
    ========================================================================== */
@@ -92,6 +129,12 @@
  * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
  * プレフィックス（接頭辞）として`l-`をつけます。
  */
+@import "layout/_header";
+@import "layout/_footer";
+@import "layout/_main";
+@import "layout/_sidebar";
+@import "layout/_section";
+
 /* =============================================================================
    #Object
    ========================================================================== */
@@ -109,6 +152,7 @@
  * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
  * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
  */
+
 /* -----------------------------------------------------------------------------
    #Component
    -------------------------------------------------------------------------- */
@@ -119,6 +163,13 @@
  * 例えばgridやmediaといったレイアウトパターンが該当します。
  * プレフィックス（接頭辞）として`c-`をつけます。
  */
+@import "object/component/_wrapper";
+@import "object/component/_layout";
+@import "object/component/_media";
+@import "object/component/_list-unstyled";
+@import "object/component/_embed";
+@import "object/component/_table";
+
 /* -----------------------------------------------------------------------------
    #Project
    -------------------------------------------------------------------------- */
@@ -128,6 +179,15 @@
  * もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
  * プレフィックス（接頭辞）として`p-`をつけます。
  */
+@import "object/project/_icon";
+@import "object/project/_icon-extend";
+@import "object/project/_button";
+@import "object/project/_breadcrumb";
+@import "object/project/_label";
+@import "object/project/_badge";
+@import "object/project/_card";
+@import "object/project/_split";
+
 /* -----------------------------------------------------------------------------
    #Scope
    -------------------------------------------------------------------------- */
@@ -141,6 +201,8 @@
  * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
  * プレフィックス（接頭辞）として`s-`をつけます。
  */
+@import "object/scope/_blog";
+
 /* -----------------------------------------------------------------------------
    #Utility
    -------------------------------------------------------------------------- */
@@ -152,3 +214,11 @@
  * 確実にスタイルを適応させるために`!important`を使用します。
  * プレフィックス（接頭辞）として`u-`をつけます。
  */
+@import "object/utility/_text";
+@import "object/utility/_image";
+@import "object/utility/_margin";
+@import "object/utility/_display";
+@import "object/utility/_width";
+@import "object/utility/_offset";
+@import "object/utility/_percent";
+```
diff --git a/backend/resources/sass/index.scss b/backend/resources/sass/index.scss
deleted file mode 100644
index 050552b6..00000000
--- a/backend/resources/sass/index.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-@charset "UTF-8";
-@import url('https://fonts.googleapis.com/css?family=Nunito');
-
-/**
- * VARIABLE
- * global...サイト全体に使用するサイズや数値に関する変数です。
- * breakpoint...メディアクエリで使用するブレイクポイントです。
- * font-family...font-family指定をまとめています。
- * color...グローバルに使用する色指定です。
- * z-index...z-indexの並び順を管理します。
- * easing...cubic-bezier関数を使用したタイミング関数を定義しています。
- *
- * FUNCTION
- * strip-unit...pxやremなどの単位を取り除きます。
- * em...pxをemに変換します。
- * rem...pxをremに変換します。
- * tint...白色を加えて明度を明るくします。
- * shade...黒色を加えて明度を暗くします。
- * z-index...z-indexの並び順を管理します。
- * tracking...Photoshopのカーニングをemに変換します。
- *
- * MIXIN
- * mq-up...メディアクエリを`min-width`で挿入します。
- * mq-down...メディアクエリを`max-width`で挿入します。
- * responsive...レスポンシブ対応クラスを生成します。
- * clearfix...floatの解除をします。
- * on-event...:hover, :active, :focusをまとめて指定します。
- * sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
- *
- * BASE
- * normalize...Normalize.cssをインポートしています。
- * base...タイプセレクタと属性セレクタのデフォルトスタイルです。
- *
- * LAYOUT
- * header...ヘッダーエリアのコンテナブロックのスタイルです。
- * footer...フッターエリアのコンテナブロックのスタイルです。
- * main...コンテンツエリアのコンテナブロックのスタイルです。
- * side...サイドバーエリアのコンテナブロックのスタイルです。
- * section...`<section>`要素を使うようなセクションの余白を管理します。
- *
- * COMPONENT
- * wrapper...最大幅を指定します。
- * layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
- * media...画像とテキストが横並びになるオブジェクトです。
- * list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
- * embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
- * table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
- *
- * PROJECT
- * icon...アイコンフォントです。テンプレートから自動で生成されます。
- * icon-extend...アイコンフォントを拡張するModifierです。
- * button...ボタンコンポーネントです。
- * breadcrumb...パンくずリストコンポーネントです。
- * label...インラインのラベルコンポーネントです。
- * badge...投稿数のような数値を表示するバッジコンポーネントです。
- * card...カードタイプのコンポーネントです。
- * split...定義リストをブロックからインラインにするコンポーネントです。
- * notification...お知らせエリアのコンポーネントです。
- *
- * SCOPE
- * blog...ブログページのスタイルです。
- *
- * UTILITY
- * text...テキストのスタイルに関する汎用クラスです。
- * image...画像のレイアウトに関する汎用クラスです。
- * margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
- * display...要素の表示や改行をコントロールする場合に使用します。
- * width...おもにグリッドで使用する`width`を指定する汎用クラスです。
- * offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
- * percent...`width`プロパティを5%刻みで指定する汎用クラスです。
- */
-/**
- * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
- * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
- * 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
- */
-
-/* =============================================================================
-   #Foundation
-   ========================================================================== */
-//
-// Sassの変数と関数を定義します。
-// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
-// プレフィックス（接頭辞）として`_`をつけます。
-
-// @import "./foundation/mixin/box";
-// @import "./foundation/mixin/clearfix";
-// @import "./foundation/mixin/layout";
-// @import "./foundation/mixin/on-event";
-@import "./foundation/mixin/pc";
-// @import "./foundation/mixin/responsive";
-@import "./foundation/mixin/sp";
-// @import "./foundation/mixin/sr-only";
-
-// //
-// @import "./foundation/variable/animation";
-// @import "./foundation/variable/breakpoint";
-// @import "./foundation/variable/color";
-// @import "./foundation/variable/easing";
-// @import "./foundation/variable/font-family";
-// @import "./foundation/variable/global";
-// @import "./foundation/variable/z-index";
-
-
-// @import "foundation/function/_em";
-// @import "foundation/function/_rem";
-// @import "foundation/function/_tint";
-// @import "foundation/function/_shade";
-
-
-/**
- * Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
- * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
- * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
- */
-// @import "foundation/base/normalize";
-// @import "foundation/base/base";
-// @import "foundation/base/reset";
-
-/* =============================================================================
-   #Layout
-   ========================================================================== */
-/**
- * Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
- * 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
- * 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
- * グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
- * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
- * プレフィックス（接頭辞）として`l-`をつけます。
- */
-// @import "./layout/content";
-// @import "./layout/footer";
-// @import "./layout/header";
-// @import "./layout/main";
-// @import "./layout/section";
-// @import "./layout/side";
-
-/* =============================================================================
-   #Object
-   ========================================================================== */
-/**
- * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
- * 拡張性などによって、4つのレイヤーにわけられます。
- * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
- * 1. Component（`c-`）
- * 2. Project（`p-`）
- * 3. Scope(`s-`)
- * 4. Utility（`u-`）
- *
- * ランディングページのようにページ特有のスタイルを多く含む場合は、
- * ページ専用のCSSファイルを作成することもできます。
- * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
- * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
- */
-
-/* -----------------------------------------------------------------------------
-   #Component
-   -------------------------------------------------------------------------- */
-/**
- * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
- * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
- * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
- * 例えばgridやmediaといったレイアウトパターンが該当します。
- * プレフィックス（接頭辞）として`c-`をつけます。
- */
-// @import "object/component/_wrapper";
-// @import "object/component/_layout";
-// @import "object/component/_table";
-
-/* -----------------------------------------------------------------------------
-   #Project
-   -------------------------------------------------------------------------- */
-/**
- * Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
- * 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
- * もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
- * プレフィックス（接頭辞）として`p-`をつけます。
- */
-// @import "object/project/article";
-// @import "object/project/box";
-// @import "object/project/breadcrumb";
-// @import "object/project/button";
-// @import "object/project/card";
-// @import "object/project/edit";
-// @import "object/project/form";
-// @import "object/project/icon-extend";
-// @import "object/project/icon";
-// @import "object/project/label";
-// @import "object/project/login";
-// @import "object/project/meeting";
-// @import "object/project/modal";
-// @import "object/project/notification";
-// @import "object/project/profile";
-// @import "object/project/search";
-// @import "object/project/user";
-
-/* -----------------------------------------------------------------------------
-   #Scope
-   -------------------------------------------------------------------------- */
-/**
- * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
- * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
- * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
- * 例えばブログページのスタイルとして_blog.scssを作成します。
- * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
- * もし、このレイヤーで同じパターンが3箇所で使われていたら、
- * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
- * プレフィックス（接頭辞）として`s-`をつけます。
- */
-// @import "object/scope/_blog";
-
-/* -----------------------------------------------------------------------------
-   #Utility
-   -------------------------------------------------------------------------- */
-/**
- * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
- * コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
- * `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
- * pxよりもemや%で指定することを推奨します。
- * 確実にスタイルを適応させるために`!important`を使用します。
- * プレフィックス（接頭辞）として`u-`をつけます。
- */
-// @import "object/utility/align";
-// @import "object/utility/display";
-// @import "object/utility/margin";
-// @import "object/utility/percent";
-// @import "object/utility/sr-only";
-// @import "object/utility/text";
diff --git a/backend/resources/sass/layout/_footer.scss b/backend/resources/sass/layout/_footer.scss
index f6802b92..3ab4d134 100644
--- a/backend/resources/sass/layout/_footer.scss
+++ b/backend/resources/sass/layout/_footer.scss
@@ -27,6 +27,6 @@ categories: [layout]
 </body>
 ```
 */
-// .l-footer {
+.l-footer {
 
-// }
+}
diff --git a/backend/resources/sass/layout/_header.scss b/backend/resources/sass/layout/_header.scss
index 5336c2a3..15ede1b3 100644
--- a/backend/resources/sass/layout/_header.scss
+++ b/backend/resources/sass/layout/_header.scss
@@ -27,6 +27,6 @@ categories: [layout]
 </body>
 ```
 */
-// .l-header {
+.l-header {
 
-// }
+}
diff --git a/backend/resources/sass/layout/_section.scss b/backend/resources/sass/layout/_section.scss
index 6ce0c919..7a50bd2a 100644
--- a/backend/resources/sass/layout/_section.scss
+++ b/backend/resources/sass/layout/_section.scss
@@ -34,6 +34,6 @@ Modifierなしをmedium、変更する場合にはModifierを指定します。
 </div>
 ```
 */
-// .l-section {
+.l-section {
 
-// }
+}
diff --git a/backend/resources/sass/object/component/_layout.scss b/backend/resources/sass/object/component/_layout.scss
index 7dd02661..03c3e52e 100644
--- a/backend/resources/sass/object/component/_layout.scss
+++ b/backend/resources/sass/object/component/_layout.scss
@@ -45,10 +45,8 @@ Modifierは以下のとおりです。
 </div>
 ```
 */
-@use "sass:math";
-
 $_layout-gutter: $_white-space !default;
-$_layout-gutter-small: ($_layout-gutter * 0.5) !default;
+$_layout-gutter-small: ($_layout-gutter / 2) !default;
 $_layout-gutter-large: ($_layout-gutter * 2) !default;
 
 .c-layout {
@@ -123,55 +121,55 @@ $_layout-gutter-large: ($_layout-gutter * 2) !default;
  */
 @include _responsive('.c-layout--col2') {
   > .c-layout__item {
-    width: percentage(1 * 0.5);
+    width: percentage(1 / 2);
   }
 }
 
 @include _responsive('.c-layout--col3') {
   > .c-layout__item {
-    width: percentage(math.div(1, 3));
+    width: percentage(1 / 3);
   }
 }
 
 @include _responsive('.c-layout--col4') {
   > .c-layout__item {
-    width: percentage(math.div(1,4));
+    width: percentage(1 / 4);
   }
 }
 
 @include _responsive('.c-layout--col2and10') {
   > .c-layout__item:nth-child(odd) {
-    width: percentage(math.div(2, 12));
+    width: percentage(2 / 12);
   }
   > .c-layout__item:nth-child(even) {
-    width: percentage(math.div(10, 12));
+    width: percentage(10 / 12);
   }
 }
 
 @include _responsive('.c-layout--col3and9') {
   > .c-layout__item:nth-child(odd) {
-    width: percentage(math.div(3, 12));
+    width: percentage(3 / 12);
   }
   > .c-layout__item:nth-child(even) {
-    width: percentage(math.div(9, 12));
+    width: percentage(9 / 12);
   }
 }
 
 @include _responsive('.c-layout--col4and8') {
   > .c-layout__item:nth-child(odd) {
-    width: percentage(math.div(4, 12));
+    width: percentage(4 / 12);
   }
   > .c-layout__item:nth-child(even) {
-    width: percentage(math.div(8, 12));
+    width: percentage(8 / 12);
   }
 }
 
 @include _responsive('.c-layout--col5and7') {
   > .c-layout__item:nth-child(odd) {
-    width: percentage(math.div(5, 12));
+    width: percentage(5 / 12);
   }
   > .c-layout__item:nth-child(even) {
-    width: percentage(math.div(7, 12));
+    width: percentage(7 / 12);
   }
 }
 
diff --git a/backend/resources/sass/object/utility/_percent.scss b/backend/resources/sass/object/utility/_percent.scss
index 754c1db6..42c171e0 100644
--- a/backend/resources/sass/object/utility/_percent.scss
+++ b/backend/resources/sass/object/utility/_percent.scss
@@ -26,23 +26,23 @@ categories: [utility]
 </div>
 ```
 */
-.u-percent5 { width: percentage(5 * 0.01) !important; }
-.u-percent10 { width: percentage(10 * 0.01) !important; }
-.u-percent15 { width: percentage(15 * 0.01) !important; }
-.u-percent20 { width: percentage(20 * 0.01) !important; }
-.u-percent25 { width: percentage(25 * 0.01) !important; }
-.u-percent30 { width: percentage(30 * 0.01) !important; }
-.u-percent35 { width: percentage(35 * 0.01) !important; }
-.u-percent40 { width: percentage(40 * 0.01) !important; }
-.u-percent45 { width: percentage(45 * 0.01) !important; }
-.u-percent50 { width: percentage(50 * 0.01) !important; }
-.u-percent55 { width: percentage(55 * 0.01) !important; }
-.u-percent60 { width: percentage(60 * 0.01) !important; }
-.u-percent65 { width: percentage(65 * 0.01) !important; }
-.u-percent70 { width: percentage(70 * 0.01) !important; }
-.u-percent75 { width: percentage(75 * 0.01) !important; }
-.u-percent80 { width: percentage(80 * 0.01) !important; }
-.u-percent85 { width: percentage(85 * 0.01) !important; }
-.u-percent90 { width: percentage(90 * 0.01) !important; }
-.u-percent95 { width: percentage(95 * 0.01) !important; }
-.u-percent100 { width: percentage(100 * 0.01) !important; }
+.u-percent5 { width: percentage(5 / 100) !important; }
+.u-percent10 { width: percentage(10 / 100) !important; }
+.u-percent15 { width: percentage(15 / 100) !important; }
+.u-percent20 { width: percentage(20 / 100) !important; }
+.u-percent25 { width: percentage(25 / 100) !important; }
+.u-percent30 { width: percentage(30 / 100) !important; }
+.u-percent35 { width: percentage(35 / 100) !important; }
+.u-percent40 { width: percentage(40 / 100) !important; }
+.u-percent45 { width: percentage(45 / 100) !important; }
+.u-percent50 { width: percentage(50 / 100) !important; }
+.u-percent55 { width: percentage(55 / 100) !important; }
+.u-percent60 { width: percentage(60 / 100) !important; }
+.u-percent65 { width: percentage(65 / 100) !important; }
+.u-percent70 { width: percentage(70 / 100) !important; }
+.u-percent75 { width: percentage(75 / 100) !important; }
+.u-percent80 { width: percentage(80 / 100) !important; }
+.u-percent85 { width: percentage(85 / 100) !important; }
+.u-percent90 { width: percentage(90 / 100) !important; }
+.u-percent95 { width: percentage(95 / 100) !important; }
+.u-percent100 { width: percentage(100 / 100) !important; }
diff --git a/backend/resources/sass___1/_variables.scss b/backend/resources/sass___1/_variables.scss
new file mode 100644
index 00000000..10f12762
--- /dev/null
+++ b/backend/resources/sass___1/_variables.scss
@@ -0,0 +1,22 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+// Colors
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66d9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;
+
+$color1: #F5F7F8;
+
diff --git a/backend/resources/sass___1/app.scss b/backend/resources/sass___1/app.scss
new file mode 100644
index 00000000..37aa2cb6
--- /dev/null
+++ b/backend/resources/sass___1/app.scss
@@ -0,0 +1,45 @@
+// Fonts
+@charset "UTF-8";
+
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+
+$breakpoint-up: (
+    'pc': 'screen and (min-width: 1068px)',
+    'sp': 'screen and (min-width: 431px)',
+    'sp02': 'screen and (min-width: 375px)',
+) !default;
+
+$breakpoint-down: (
+    'sp': 'screen and (max-width: 1067px)',
+    'sp02': 'screen and (max-width: 430px)',
+    'min': 'screen and (max-width: 374px)',
+) !default;
+
+@mixin mq_up($breakpoint: md) {
+    @media #{map-get($breakpoint-up, $breakpoint)} {
+        @content;
+    }
+}
+
+@mixin mq_down($breakpoint: md) {
+    @media #{map-get($breakpoint-down, $breakpoint)} {
+        @content;
+    }
+}
+
+
+  
+
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+@import './pages/layout';
+@import './pages/loader';
+
+@import './layouts/main';
+
diff --git a/backend/resources/sass___1/layouts/_main.scss b/backend/resources/sass___1/layouts/_main.scss
new file mode 100644
index 00000000..40caa62d
--- /dev/null
+++ b/backend/resources/sass___1/layouts/_main.scss
@@ -0,0 +1,127 @@
+
+
+.l-centeringbox{
+  width: 100%;
+  height: 100%;
+  &-wrap{
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%,0);
+    width: 100%;
+    border-radius: 20px;
+    box-sizing: border-box;
+    @include media-breakpoint-up(lg) {
+      padding: 192px 0;
+    }
+  }
+}
+
+.l-single {
+  &-main{
+    min-height: 100vh; /* Fallback */
+    min-height: calc(var(--vh, 1vh) * 100);
+  }
+  &-container{
+    max-width: 540px;
+    width: 100%;
+    margin: 0 auto;
+    border-radius: 8px;
+    padding: 50px 24px 70px;
+    background: #fff;
+    box-sizing: border-box;
+    display: block;
+
+    @include media-breakpoint-up(lg) {
+        width: 540px;
+        max-width: none;
+        box-shadow: 0 1px 4px #9b8989;
+        padding: 60px 60px 60px;
+    }
+    
+    h1{
+      font-size: 3rem;
+      text-align: center;
+      margin-bottom: 35px;
+      line-height: 1;
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 35px;
+        font-size: 2.8rem;
+      }
+      @include media-breakpoint-down(md) {
+        letter-spacing: 0.02em;
+      }
+      @include media-breakpoint-down(sm) { 
+        font-size: 2.8rem;
+      }
+   }
+  }
+  &-inner{
+    width: 100%;
+    margin: 0 auto;
+    width: 410px;
+    @include media-breakpoint-down(md) {
+      width: 100%;
+    }
+    .form-group{
+      margin: 0 0 17px;
+      @include media-breakpoint-up(lg) {
+        margin: 0 0 20px;
+      }
+    }
+  }
+}
+.l-registration{
+  .l-single-container h1{
+    @include media-breakpoint-up(lg) {
+      margin-bottom: 40px;
+    }
+  }
+}
+
+
+.l-container{
+  display: flex;
+  flex-flow: row-reverse;
+  background: #fff;
+  justify-content: flex-end;
+  @include media-breakpoint-up(lg) {
+    // background: $_color-bg02;
+  }
+}
+
+
+
+.l-content{
+    max-width: 540px;
+    width: 100%;
+    margin: 0 auto;
+    border-radius: 8px;
+    padding: 50px 20px 70px;
+    background: #fff;
+    box-sizing: border-box;
+    display: block;
+
+    @include media-breakpoint-up(lg) {
+        width: 540px;
+        max-width: none;
+        padding: 60px 60px 60px;
+    }
+    
+    h1{
+      font-size: 3rem;
+      text-align: center;
+      margin-bottom: 35px;
+      line-height: 1;
+      @include media-breakpoint-up(lg) {
+        margin-bottom: 35px;
+        font-size: 2.8rem;
+      }
+      @include media-breakpoint-down(md) {
+        letter-spacing: 0.02em;
+      }
+      @include media-breakpoint-down(sm) { 
+        font-size: 2.8rem;
+      }
+    }
+}
diff --git a/backend/resources/sass___1/pages/_layout.scss b/backend/resources/sass___1/pages/_layout.scss
new file mode 100644
index 00000000..0e9740b0
--- /dev/null
+++ b/backend/resources/sass___1/pages/_layout.scss
@@ -0,0 +1,293 @@
+.bg-red-4{
+    background-color: rgba(255, 0, 0, 0.4);
+}
+
+.bg-red-6{
+    background-color: rgba(255, 0, 0, 0.6);
+}
+
+.bg-black-4{
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.bg-black-6{
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.bg-black{
+    background-color: black;
+}
+
+.bg-green{
+    background-color: #093100
+}
+
+.bg-green-6{
+    background-color: #093100;
+    opacity: .6;
+}
+
+.bg-none{
+    background-color: transparent;
+}
+
+.bg-white-2{
+    background-color: rgb(255,255,255, .2) !important;
+}
+
+.shadow-lg{
+    box-shadow: 0 0 8px #000 !important;
+}
+
+.bg-color-1{
+    background-color: $color1;
+}
+
+
+.w-30{   width: 30% !important; }
+
+.w-md-25{
+    @include media-breakpoint-down(md){
+        width: 25% !important;
+    }
+}
+
+.w-md-50{
+    @include media-breakpoint-down(md){
+        width: 50% !important;
+    }
+}
+
+.w-md-75{
+    @include media-breakpoint-down(md){
+        width: 75% !important;
+    }
+}
+
+.rounded-right-20{
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+.rounded-top-15{
+    border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+}
+
+.rounded-15{
+    border-radius: 15px;
+}
+
+.rounded-top-20{
+    border-top-right-radius: 20px;
+    border-top-left-radius: 20px;
+}
+
+
+table, th, td{
+    padding: 5px !important;
+    @include media-breakpoint-down(md){
+        font-size: 16px !important;
+    }
+}
+
+.reviewRateStar{
+    font-family: 'Font Awesome 5 Free';
+    content: "\f005";
+    font-size: 1.8vw;
+    font-weight: 900;
+}
+
+span.star{
+    display: inline-block;
+    width: 80px;
+    line-height: 1;
+    vertical-align: middle;
+    margin-top: -1px;
+    font-size: 0;
+}
+
+.ft-15{
+    font-size: 15px !important;
+}
+
+.ft-md-15{
+    @include media-breakpoint-down(md){
+        font-size: 15px !important;
+    }
+}
+
+.ft-12{
+    font-size: 12px !important;
+}
+
+.ft-13{
+    font-size: 13px !important;
+}
+
+.ft-30{
+    font-size: 30px !important;
+}
+
+.ft-30{
+    font-size: 20px !important;
+}
+
+.ft-md-20{
+    @include media-breakpoint-down(md){
+        font-size: 20px !important;
+    }
+}
+
+.navbar{
+    background-color: #10580c;
+    padding: 0px 20px;
+    width: 100%;
+    z-index: 2;
+    position: fixed;
+    top: 0px;
+
+    .nav{
+        @include media-breakpoint-down(md){
+            justify-content: space-evenly;
+        }
+    }
+    
+    .nav-link{
+        margin-left: 3px;
+        margin-right: 3px;
+        padding: 10px;
+        &:hover{
+            background-color: #084405;
+            transition: .3s;
+        }
+        &:focus{
+            background-color: #084405;
+            box-shadow: none;
+            border-bottom: 1px solid white;
+        }
+    }
+    .navbar-toggler{
+        border: none;
+        .navbar-toggler-icon{
+            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 255.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
+        }
+    }
+    &.shadow-sm{
+        box-shadow: 0 0.125rem 0.25rem rgb(9 49 0) !important;
+    }
+
+    .dropdown-toggle::after{
+        display: none;
+    }
+}
+
+pre{
+    font-family: inherit;
+    white-space: pre-wrap;
+    word-break: break-word;
+    height: 100%;
+    overflow-y: visible;
+    margin: 0;
+}
+
+.edit{
+    position: absolute;
+    right: 30px;
+    background-color: rgb(0,0,0,.4);
+    padding: 0 10px;
+    &:hover{
+        background-color: rgb(0,0,0,.6);
+        img{
+            transform:scale(1.1);
+        }
+    }
+}
+
+.count{
+    float: right;
+    position: absolute;
+    // display: inline-block;
+    display: none;
+    padding: .2em .3em;
+    margin-top: 20px;
+    margin-right: -10px;
+    margin-left: -10px;
+    color: #fff;
+    font-size: 10px;
+    font-weight: bold;
+    line-height: 1.1;
+    letter-spacing: -.05em;
+    white-space: nowrap;
+    text-shadow: -1px -1px 1px rgb(0 0 0 / 15%);
+    background-color: #ff2e13;
+    border-radius: 3px;
+    z-index: 1010;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: subpixel-antialiased;
+    max-width: 5.03333em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;    
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+
+
+::-webkit-scrollbar {
+    width: 20px;
+  }
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+    border: 6px solid transparent;
+    background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #a8bbbf;
+}
+
+
+input[type='checkbox']{
+    border-radius: 0px;
+    // background-color: white;
+    border-color: #707070;
+    
+    &:checked{
+        border-color: #707070;
+        background-image: url(/images/icon-checked.svg);
+        background-color: white;
+        background-size: 14px;
+    }
+    &:focus{
+        box-shadow: none;
+    }
+}
+
+
+input[type="date"].hide-calender{
+
+    &::-webkit-inner-spin-button,&::-webkit-calendar-picker-indicator{
+       display: none;
+       -webkit-appearance: none;
+   }
+    
+}
\ No newline at end of file
diff --git a/backend/resources/sass___1/pages/_loader.scss b/backend/resources/sass___1/pages/_loader.scss
new file mode 100644
index 00000000..2f9e448a
--- /dev/null
+++ b/backend/resources/sass___1/pages/_loader.scss
@@ -0,0 +1,169 @@
+@use "sass:math";
+
+.loader2-wrap{
+    display: none;
+
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(0,0,0,0.6);
+    top: 0px;
+    position: fixed;
+    
+    .loading {
+      position: fixed;
+      
+      margin: auto;
+      width: 4rem;
+      height: 4rem;
+      transform-style: preserve-3d;
+      perspective: 800px;
+
+      top: calc(50vh - 2rem);
+      left: calc(50vw - 2rem);
+    
+      .arc {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border-bottom: 5px solid white;
+    
+        @for $i from 1 through 3 {
+          &:nth-child(#{$i}) {
+            animation: rotate#{$i} 1.15s linear infinite;
+          }
+        }
+    
+        &:nth-child(1) {
+          animation-delay: -0.8s;
+        }
+    
+        &:nth-child(2) {
+          animation-delay: -0.4s;
+        }
+    
+        &:nth-child(3) {
+          animation-delay: 0s;
+        }
+      }
+    }
+    
+    @keyframes rotate1 {
+      from {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
+      }
+    
+      to {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
+      }
+    }
+    
+    @keyframes rotate2 {
+      from {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
+      }
+    
+      to {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
+      }
+    }
+    
+    @keyframes rotate3 {
+      from {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
+      }
+    
+      to {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
+      }
+    }
+
+}
+  
+
+.loader1-wrap {
+    display: none;
+    background-color: rgb(0,0,0,0.4);
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+
+    .ring {
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform:translate(-50%,-50%);
+        width:150px;
+        height:150px;
+        background:#262626;
+        border:3px solid #3c3c3c;
+        border-radius:50%;
+        text-align:center;
+        line-height:150px;
+        font-family:sans-serif;
+        font-size:20px;
+        color:#fff000;
+        letter-spacing:4px;
+        text-transform:uppercase;
+        text-shadow:0 0 10px #fff000;
+        box-shadow:0 0 20px rgba(0,0,0,.5);
+    }
+    .ring:before {
+        content:'';
+        position:absolute;
+        top:-3px;
+        left:-3px;
+        width:150px;
+        height:150px;
+        border:3px solid transparent;
+        border-top:3px solid #fff000;
+        border-right:3px solid #fff000;
+        border-radius:50%;
+        animation:animateC 2s linear infinite;
+    }
+    #loading {
+        display:block;
+        position:absolute;
+        top:calc(50% - 2px);
+        left:50%;
+        width:50%;
+        height:4px;
+        background:transparent;
+        transform-origin:left;
+        animation:animate 2s linear infinite;
+    }
+    #loading:before {
+        content:'';
+        position:absolute;
+        width:16px;
+        height:16px;
+        border-radius:50%;
+        background:#fff000;
+        top:-6px;
+        right:-8px;
+        box-shadow:0 0 20px #fff000;
+    }
+
+    @keyframes animateC
+    {
+        0% {
+            transform:rotate(0deg);
+        }
+        100% {
+            transform:rotate(360deg);
+        }
+    }
+    @keyframes animate
+    {
+        0% {
+            transform:rotate(45deg);
+        }
+        100% {
+            transform:rotate(405deg);
+        }
+    }
+}
\ No newline at end of file
diff --git a/backend/resources/views/contact/complete.blade.php b/backend/resources/views/contact/complete.blade.php
index be163cf4..03166a79 100644
--- a/backend/resources/views/contact/complete.blade.php
+++ b/backend/resources/views/contact/complete.blade.php
@@ -20,17 +20,10 @@
 
     </head>
     <body class="">
-        <main class="l-single-main l-registration">
-        <div class="l-centeringbox">
-            <div class="l-centeringbox-wrap">
-            <div class="l-single-container">
-                <div class="l-single-inner">
-                    <div id="contact-complete"></div>
-                </div>
+        <main class="l-container">
+            <div class="l-content">
+                <div id="contact-complete"></div>
             </div>
-            </div>
-
-        </div>
         </main>
     </body>