:root {
  --onyx: rgba(52, 62, 61, 1);
  --granite: rgba(96, 116, 102, 1);
  --turquoise: rgba(102, 215, 209, 1);
  --goldenrod: rgba(219, 244, 167, 1);
  --auroblue: rgba(213, 249, 222, 1);

  --aliceblue: rgba(238, 238, 255, 1);
  --lavender: rgba(127, 124, 175, 1);
  --wildblue: rgba(159, 180, 199, 1);
  --dazzledblue: rgba(40, 88, 123, 1);
  --laurelgreen: rgba(159, 183, 152, 1);
}

.bg-onyx {
  background: var(--onyx);
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
}

.main-page {
  background: var(--aliceblue);
  background-image: url(../images/background-tile-trans.png);
  background-repeat: repeat;
}

/*main styles*/

.right-padding {
  padding-right: 0;
}

.no-padding {
  padding: 0;
}

.max-viewport {
  min-height: 100vh;
}

/*navbar */

.navbar .navbar-brand {
  /* color: var(--laurelgreen); */
  /* color: var(--onyx); */
  color: var(--auroblue);
}

.navbar {
  font-family: "Lora", sans-serif;
  background-color: var(--onyx);
  background-image: url('../images/top-banner2.jpeg');
  border-bottom: 7px solid var(--dazzledblue);
  min-height: 20vh;
  background-size: cover;
}

.navbar .nav-link,
.navbar .icons {
  color: var(--laurelgreen);
}

.navbar .nav-link:hover,
.navbar .icons:hover {
  color: #fff;
}

.navbar .icon {
  position: relative;
}

/*sidebar*/

.sidebar {
  background-color: var(--onyx);
  border-right: 7px solid var(--dazzledblue);
}

.sidebar .nav-link,
.sidebar .navbar-brand {
  color: var(--laurelgreen);
}

.sidebar .nav-link:hover,
.sidebar .navbar-brand:hover {
  color: #fff;
}

/*inform-card*/

.inform-card .card-1 {
  background-color: #403f4c;
}

.inform-card .card-2 {
  background-color: #efbcd5;
}

.inform-card .card-3 {
  background-color: #f9dc5c;
}

.inform-card .card-4 {
  background-color: #3185fc;
}

.inform-card .card .body-icon {
  font-size: 60px;
  transform: rotate(315deg);
  color: #f15025;
}

.inform-card .card .fa,
.inform-card .card a {
  color: #f15025;
}

.inform-card .card a:hover {
  text-decoration: none;
  color: #fff;
}

.inform-card .card {
  color: #fff;
}

.inform-card .card-footer {
  background: rgba(0, 0, 0, 0.5);
}

/* Login */
.login {
  position: absolute;
  min-height: 6rem;
  background: var(--onyx);
  top: 0;
  right: 0;
  width: 0;
  overflow: hidden;
}

.show-login {
  width: 18rem;
  padding: 2rem 1.5rem;
  transform: rotateX(-360);
}

.login-box {
  background: var(--onyx);
}

/* Custom CSS */

/* Buttons */
.btn-fsp {
  background: var(--dazzledblue);
  color: #fff;
}
.btn-fsp:hover {
  background: var(--granite);
  color: #fff;
}

.btn-fsp-inv {
  background: var(--granite);
  color: #fff;
}
.btn-fsp-inv:hover {
  background: var(--dazzledblue);
  color: #fff;
}

.fa-bars {
  color: var(--laurelgreen);
}

.card-title {
  color: var(--laurelgreen);
}


/* Hover over submenu */
.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
  background: var(--laurelgreen);
}

.dropdown-item:hover {
  background: var(--laurelgreen);
  color: #fff;
}

.page-title {
  background-color: var(--onyx);
  border-bottom: 7px solid var(--dazzledblue);
  color: var(--laurelgreen);
  margin-top: 0;
}

.single-sale-app {
  border: solid 3px;
  border-color: var(--laurelgreen);
  border-radius: 5px;
}

.single-sale-pen {
  border: solid 3px;
  border-color: var(--goldenrod);
  border-radius: 5px;
}

.single-sale-ref {
  border: solid 3px;
  border-color: red;
  border-radius: 5px;
}

.navbar-nav .dropdown-menu {
  position: absolute;
  top: -7px;
  right: auto;
  left: 50%;
}

.customer-card {
  border: solid 2px;
  border-color: var(--dazzledblue);
  border-radius: 5px;
  color: var(--dazzledblue);
}

.customer-card-site {
  border: solid 1px;
  border-color: var(--dazzledblue);
  border-radius: 5px;
  background-color: var(--aliceblue);
}

.customer-card-pack {
  border: solid 1px;
  border-color: var(--dazzledblue);
  border-radius: 5px;
  background-color: var(--goldenrod);
}

.blue-text-color {
  color: var(--dazzledblue);
}