Create assets/custom.css

assets/custom.css

@@ -0,0 +1,96 @@
+body {
+    background-color: #F7F7F7;
+    color: #454545;
+}
+
+.navbar {
+    background-color: #116F70;
+}
+
+.btn-primary {
+    background-color: #1C304A;
+    border-color: #1C304A;
+}
+
+.btn-primary:hover {
+    background-color: #116F70;
+    border-color: #116F70;
+}
+
+.btn-secondary {
+    background-color: #116F70;
+    border-color: #116F70;
+}
+
+.btn-secondary:hover {
+    background-color: #00AEAF;
+    border-color: #00AEAF;
+}
+
+.btn-tertiary {
+    background-color: #E0E0E0;
+    border-color: #E0E0E0;
+    color: #1C304A;
+}
+
+.btn-tertiary:hover {
+    background-color: #DEF4F4;
+    border-color: #DEF4F4;
+    color: #1C304A;
+}
+
+.card {
+    background-color: #FFFFFF;
+    border-color: #E0E0E0;
+}
+
+.dot-flashing {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #1C304A;
+    color: #1C304A;
+    animation: dot-flashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+    display: inline-block;
+    margin-left: 5px;
+}
+
+.dot-flashing::before, .dot-flashing::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+}
+
+.dot-flashing::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #1C304A;
+    color: #1C304A;
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 0s;
+}
+
+.dot-flashing::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: #1C304A;
+    color: #1C304A;
+    animation: dot-flashing 1s infinite alternate;
+    animation-delay: 1s;
+}
+
+@keyframes dot-flashing {
+    0% {
+        background-color: #1C304A;
+    }
+    50%, 100% {
+        background-color: rgba(28, 48, 74, 0.2);
+    }
+}