/* this is an empty block to push the body down so navbar fixed at top works */
/* 
body {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
} */


/* ghost element */
body::before {
  display: block;
  content: '';
  height: 80px;
}

/* section::before {
  height: 54px;
  content: "";
  display:block;
} */

/* this isn't needed */
.b4test {
  height: 38px;
  content: "";
  display:block;
}

.img-hp {
  max-width: 100%;
  /* max-height: 50%; */
}

/* navbar color matches logo */
/* Added March 2, 2023 for fixing collapse on menu
  z-index should be above .close-navbar-toggler */
.navbar{
  background-color: #5C7A92;
  /* z-index:2; */
}
/* 
.close-navbar-toggler{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  z-index:1;
  cursor:pointer;
}

.close-navbar-toggler.collapsed{
  z-index:-1;
} */

.footer{
   background-color: #5C7A92;
}

.my-primary {
  color: #5C7A92;
}

.bg-willj{
  background-color: #5c7a92ca;
}

.btn-primary{
  background-color: #5C7A92;
  border-color: #5C7A92;
  transition: none;
  box-shadow: 1px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
  background-color: #5C7A92;
  border-color: #5C7A92;
}

.btn-primary:focus-visible, .btn-primary:focus {
  border-color: #5C7A92;
  box-shadow: none !important;
  /* This one below is needed */
  outline: none !important;
}

/* accordion */

.accordion-button{
  font-weight: 650;
  color: #5C7A92;
}

.accordion-button:not(.collapsed) {
  color: #5C7A92;
  font-weight: 650;
  background-color: #f1f5fa;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-button:focus {
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

/* Customize navbar link styles */

.navbar-dark .navbar-nav .nav-link {
  /* color: rgba(255, 255, 255, 1); */
    color: #f5f5f5,0.9;
    transition: none;
}

h7{
 margin-bottom: 0;
 font-weight: 550;
}

.active {
  font-weight: 525;
}

/* sidebar */
.sidebar .nav-link {
  font-weight: 400;
  color: #5C7A92;
  /* color: var(--bs-dark); */
}
.sidebar .nav-link:hover {
  background: var(--bs-light);
  /* color: var(--bs-primary); */
}

/* Split the newsletter signup to 50% width */
@media (min-width: 768px) {
  .news-input {
    width: 50%;
  } 
}

#map {
  width:100%;
  height: 100%;
  border-radius: 10px;
}

dt{
  font-weight: 550;
}

/* custom form errors */

form div {
  margin-bottom: 18px;
}

/* form div:last-child {
  border-top: 1px dashed #E4E5E7;
} */


form input[type="radio"] {
  position: relative;
  top: 2px;
  margin-left: 18px;
}

form input[type="text"], form input[type="password"], form input[type="email"] {
  padding: 0.75em 12px;
  width: 100%;
}

form input[type=text], form input[type="password"], form input[type="email"], textarea {
  color: #6A6C6F;
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 3px;
}

form label {
  display: inline-block;
  margin-bottom: 9px;
} 

.form-control-sm:focus {
  border-color: #5C7A92;
}

.form-control-sm{
  box-shadow: none !important;
  /* This one below is needed */
  outline: none !important;
}

.error {
  color: #C0392B;
  font-weight: bold;
  display: block;
}

.error + textarea, .error + input {
  border-color: #C0392B !important;
  border-width: 2px !important;
}

/* photo styles */
.photo-row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.photo-column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.photo-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.offcanvas { 
  /* width: 300px; */
  --bs-offcanvas-width: 300px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .photo-column {
    flex: 33%;
    max-width: 33%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .photo-column {
    flex: 100%;
    max-width: 100%;
  }
}


/* New Login */

.card-img-left {
  width: 35%;
  /* Link to your background image using in the property below! */
  background: scroll center url('../img/rocks.jpg');
  background-size: cover;
}

.card-title {
  color: #5C7A92;
}