src/index.css
html, body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  height: 100vh;
  color: rgba(0, 0, 0, 0.87);
  background: #FFFFFF;
  font-size: 14px;
  overflow: hidden; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: transparent; }

html::-webkit-scrollbar {
  width: 7px;
  background-color: transparent; }

html::-webkit-scrollbar-thumb {
  background-color: #ababab; }

h1, h2, h3, h4, p {
  padding: 0px; }

button {
  cursor: pointer;
  outline: none; }

a {
  text-decoration: none; }

#root {
  height: 100%; }

.App {
  height: 100%; }

img {
  max-width: 100%; }

.hidden {
  display: none !important; }

header {
  margin: 20px 20px;
  font-size: 25px;
  font-family: "Lato", sans-serif;
  font-weight: 400; }

form.form-group * {
  margin: 5px 0px; }

form.form-group .form-item {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: "Lato", sans-serif;
  border: 2px solid #f3eeee;
  border-radius: 2px;
  outline: none;
  background-color: inherit; }
  form.form-group .form-item:hover, form.form-group .form-item:focus {
    border-color: #338fff;
    outline: none; }

form.form-group ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fbfbfb; }

.btn1 {
  background: transparent;
  color: inherit;
  padding: 12px;
  border: solid 1px;
  border-radius: 2px;
  cursor: pointer; }
  .btn1:hover {
    color: #338fff;
    border-color: #338fff; }
  .btn1:focus {
    outline: none; }

.btn2 {
  background: transparent;
  color: inherit;
  cursor: pointer;
  border: none;
  margin: 10px 0px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0;
  font-size: 12px;
  color: #338fff; }
  .btn2:hover {
    color: #338fff; }
  .btn2:focus {
    outline: none; }

.btn3 {
  padding: 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  display: block;
  margin: 5px 0px;
  width: 100%;
  max-width: 400px;
  text-align: left;
  font-size: 15px;
  text-transform: capitalize; }
  .btn3.a {
    color: white;
    background-color: deepskyblue; }
  .btn3.b {
    color: white;
    background-color: #5ef5bd; }
  .btn3.c {
    color: white;
    background-color: #f5004f; }

#postman, .raven {
  position: fixed;
  -webkit-app-region: no-drag;
  bottom: 0px;
  background: #338fff;
  color: #FAFAFA;
  margin: 20px;
  padding: 20px;
  font-size: 16px;
  border-radius: 3px;
  cursor: pointer;
  animation-duration: .75s;
  animation-fill-mode: both;
  animation-name: bounceOut;
  z-index: 500; }
  #postman:hover, .raven:hover {
    background: #1c1925; }
  #postman.open, .raven.open {
    animation-name: bounceIn; }
  #postman .body, .raven .body {
    display: flex;
    flex-direction: row;
    align-items: center; }
    #postman .body *, .raven .body * {
      display: inline-block; }
    #postman .body .emoji-text, .raven .body .emoji-text {
      margin-left: 10px;
      position: relative;
      bottom: 0px; }
    #postman .body img, .raven .body img {
      width: 30px;
      position: relative; }
  #postman svg, .raven svg {
    width: 40px !important; }

.raven {
  background: #ff8000;
  color: #FAFAFA;
  margin: 10px;
  padding: 10px;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  animation-duration: .75s;
  animation-fill-mode: both;
  animation-name: bounceOut;
  z-index: 100; }
  .raven:hover {
    background: #338fff; }
  .raven.open {
    animation-name: bounceIn; }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1); } }

@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); } }

#spinner {
  display: none;
  padding: 22px;
  border-radius: 6px;
  bottom: 0px;
  width: 200px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  z-index: 900;
  background-color: rgba(255, 152, 0, 0.81);
  margin: 25px 78px;
  color: #FAFAFA; }
  #spinner.active {
    display: flex !important; }
  #spinner .text {
    text-align: center;
    font-size: 13px; }
  #spinner .loader-inner label {
    font-size: 16px;
    display: inline-block;
    opacity: 0; }

@keyframes lol {
  0% {
    opacity: 0;
    transform: translateX(-300px); }
  33% {
    opacity: 1;
    transform: translateX(0px); }
  66% {
    opacity: 1;
    transform: translateX(0px); }
  100% {
    opacity: 0;
    transform: translateX(300px); } }

@-webkit-keyframes lol {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-300px); }
  33% {
    opacity: 1;
    -webkit-transform: translateX(0px); }
  66% {
    opacity: 1;
    -webkit-transform: translateX(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(300px); } }

.loader-inner label:nth-child(6) {
  -webkit-animation: lol 2.5s infinite ease-in-out;
  animation: lol 2.5s infinite ease-in-out; }

.loader-inner label:nth-child(5) {
  -webkit-animation: lol 2.5s 100ms infinite ease-in-out;
  animation: lol 2.5s 100ms infinite ease-in-out; }

.loader-inner label:nth-child(4) {
  -webkit-animation: lol 2.5s 200ms infinite ease-in-out;
  animation: lol 2.5s 200ms infinite ease-in-out; }

.loader-inner label:nth-child(3) {
  -webkit-animation: lol 2.5s 300ms infinite ease-in-out;
  animation: lol 2.5s 300ms infinite ease-in-out; }

.loader-inner label:nth-child(2) {
  -webkit-animation: lol 2.5s 400ms infinite ease-in-out;
  animation: lol 2.5s 400ms infinite ease-in-out; }

.loader-inner label:nth-child(1) {
  -webkit-animation: lol 2.5s 500ms infinite ease-in-out;
  animation: lol 2.5s 500ms infinite ease-in-out; }
