@font-face {
  font-display: swap;
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gabriela-v23-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Gupter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gupter-v14-latin-regular.woff2") format("woff2");
}

:root {
  --COLOURI: #eae9d7;
  --COLOURII: #00b81b;
}

body { font-family: "Gupter", "Times New Roman"; background-color: var(--COLOURI); }

.searchInput {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 0.125rem groove #999999; /* border-bottom only is more modern. */
  transition: all .5s;
}

.searchInput:focus {
  background: transparent;
  box-shadow: none;
  border-bottom: 0.125rem groove #dc3545;
  color: #ffffff;
}

.searchButton { border-radius: 50%; padding: 0.7rem 0.7rem 0.5rem 0.7rem; transition: all .5s; }
.searchButton:hover { background-color: #ffffff; transform: translateY(-0.1777rem); }

.iconParent { position: relative; }

.iconBullet::after {
  content: ""; /* here content need to be empty. */
  position: absolute;
  top: 7px; /* increament brings the icons down while decreament takes the icons up. */
  left: 20px; /* increament takes the icons right, while decreament brings the icons left. */
  height: 0.75rem;
  width: 0.75rem;
  background-color: #ff0000;
  border-radius: 50%;
}
/*! top navigation end */

.sideBar {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/businessdashboardsidebar.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* bg -position, -repeat and -size helps fit image perfectly. */
  box-shadow: 0.3125rem 0.4375rem  1.5625rem var(--COLOURII);;
}

.btmbd { border-bottom: 0.1rem groove var(--COLOURII); }

.sidebarLink { transition: all 1.5s; cursor: pointer; }
.sidebarLink:hover { background-color: var(--COLOURII); color: #000000; border-radius: 0.4rem; }

.cur {
  background-color: #787878;
  border-radius: 0.4rem;
  box-shadow: 0.2rem 0.3rem 1rem #444444;
  cursor: pointer;
  transition: all 1s;
}

.cur:hover { background-color: var(--COLOURII); transform: translateY(-0.2rem); }
/*! side navigation end */

.cardCommon { box-shadow: 0.0625rem 0.125rem 0.3125rem var(--COLOURII); transition: all .5s; }

.cardCommon:hover { box-shadow: 0.1875rem 0.3125rem 0.9375rem var(--COLOURII); transform: translateY(-0.3125rem); }
/*! card end */

.taskBorder { border-left: 0.1875rem groove var(--COLOURII); }
/*! progress and task list end */

footer .developer { font: bold 1.2rem "Gabriela"; }
footer #developer { letter-spacing: 0.4rem; font: bold 1.2rem "Gabriela"; color: #ffffff; text-shadow: 1px 1px 2px #ffd700, 0 0 25px #000000, 0 0 5px #000000; }

@media (max-width: 768px) { /* for small and Xtra small screens. This is done inorder to make hamburger icon visible on extra small screens. */
  
  .sideBar { position: static; height: auto; }

  .topNavbar { position: static; }

}