/* HTML */

html {
  font-family: "Roboto";
  height: 100%;
  margin: 0;
}

/* Body */

body  {
  font-family: "Roboto";
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
}

.content-bg {
  background-color: #F8F9FA;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.content-main {
  max-width: 1200px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Navbar */

.margin4 {
  margin: 3.5rem;
}

.navbar {
  width: 100%;
}

.navbar-light .navbar-nav .nav-link {
    color: #F8F9FA;
  }

.navbar-css {
  background-color: #000 !important;
  }

.logout {
  color: #F8F9FA;
  }

.logout:hover {
  color: #F8F9FA;
  }

.navbar-nav .nav-item {
  position: relative;
  }
  
.navbar-nav .nav-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #F8F9FA; 
  transform: scaleX(0);
  transition: transform 0.3s ease;
  }
  
.navbar-nav .nav-item:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
  transform: scaleX(1);
  }

/* Footer */

footer {
  bottom: 0;
  width: 100%;
  height: 54px;
  }

.footer-styles {
  color: #F8F9FA;
  text-decoration: none;
}  

.footer-mail {
  text-decoration: none;
  color: #F8F9FA;
  font-weight: 700;
}

/* Estimate */

.card-container {
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('/logo-2') no-repeat;
  background-size: cover, contain;
  background-position: center, center 80%;
  border-color: #d1ab7e !important;
  min-height: 600px;
}

.form-control, .input-group-text, #spread {
  background-color: transparent !important;
  border-color: #d1ab7e !important;
}
.form-control:disabled {
  background-color: transparent !important;
  border-color: #d1ab7e !important;
}
input[type="number"] {
  background-color: transparent !important;
}
.input-group > * {
  border-color: #d1ab7e !important;
}
.form-control:focus {
  border-color: #d1ab7e !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}

/* Font */

.roboto-thin {
  font-family: "Roboto", system-ui;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", system-ui;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", system-ui;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", system-ui;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", system-ui;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", system-ui;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", system-ui;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", system-ui;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", system-ui;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", system-ui;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", system-ui;
  font-weight: 900;
  font-style: italic;
}