mortgage.css

body {
  margin: 0;
}

.sb-title {
  position: relative;
  top: -12px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
}

.sb-title-icon {
  position: relative;
  top: -5px;
}

.card-container {
  display: flex;
  height: 285px;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: black;
}

.panel {
  background: white;
  width: 300px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.half-input-container {
  display: flex;
  justify-content: space-between;
}

.half-input {
  max-width: 120px;
}



h2 {
  margin: 0;
  font-family: Roboto, sans-serif;
}

input {
  height: 30px;
}

input {
  border: 0;
  border-bottom: 1px solid black;
  font-size: 14px;
  font-family: Roboto, sans-serif;
  font-style: normal;
  font-weight: normal;
}

input:focus::placeholder {
  color: white;
}


.button1 {
  cursor: pointer;
  background :linear-gradient(90deg, #000000 0%, rgb(58, 56, 49) 100%);
  color: white;
  border-radius: 75px;
  height: 90px;
}

.content,
.content1,
.content2 {
  
  font: 100 24px/100px sans-serif;
  height: 650px;
  max-width: 100%;
  text-align: center;
  justify-content: space-around;
  
}






.content1 {
  display: flex;
  height: 500px;
  max-width: 100%;
  display: flex;
  color: black;
}

.content4 {
  width: 300px;
  padding: 20px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: black;
}

.content5 {
  max-width: max-content;
  height: auto;
  color: black;
}

.dbox {
  height: 50px;
}

.dropbtn {
  background-color: #2980B9;
  color: rgb(255, 255, 255);
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  height: 40px;
}

.menu {
  color: rgba(157,163,175,255);
}


/* The popup bubble styling. */
.popup-bubble {
  /* Position the bubble centred-above its parent. */
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the bubble. */
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  font-family: sans-serif;
  overflow-y: auto;
  max-height: 60px;
  box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
}

/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
  /* Position the div a fixed distance above the tip. */
  position: absolute;
  width: 100%;
  bottom: 8px;
  left: 0;
}

/* This element draws the tip. */
.popup-bubble-anchor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  /* Center the tip horizontally. */
  transform: translate(-50%, 0);
  /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  width: 0;
  height: 0;
  /* The tip is 8px high, and 12px wide. */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid white;
}

/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
  cursor: auto;
  height: 0;
  position: absolute;
  /* The max width of the info window. */
  width: 200px;
}