.main-frame {
  background-color: white;
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  transform: translateY(-50%);
  border-radius: 10px;
}

/* company details */

.company-container {
  margin-left: 2vw;
  padding-top: 2vw;
}

.company-title {
  font-family: "Martel", serif;
  font-size: 40px;
}

.company-subtitle {
  font-family: "Martel", serif;
  font-size: 20px;
  color: rgb(140, 140, 140);
}

/* card elements */

.cards-wrapper {
  display: flex;
  margin: auto;
  justify-content: center;
}

.card-container {
  display: flex;
  padding: 15%;
  margin: auto;
  text-align: center;
  justify-content: center;
}

.card-container-2 {
  display: flex;
  padding: 3%;
  text-align: center;
}

.bg-white {
  background-color: rgba(195, 253, 144, 0.564)!important;
  height: 200px;
  width: 200px;
  display: flex;
  text-align: center;
  vertical-align: middle;
}

.bg-alt {
  background-color: rgba(255, 247, 0, 0.62) !important;
}

.bg-alt-2 {
  background-color: rgba(84, 84, 84, 0.237) !important;
}

.request-title {
  color: rgb(6, 41, 3);
  font-weight: 700;
  margin: auto;
  text-align: center;
  font-family: "Martel", serif;
  font-size: 2rem;
}

.bg-white:hover .request-title {
  color: rgb(24, 176, 10)
}

.bg-white:hover {
  background-color: rgb(195, 253, 144)!important;
  cursor: pointer;
}

.bg-alt:hover {
  background-color: rgba(255, 208, 0, 0.897) !important;
  cursor: pointer;
}

.bg-alt-2:hover {
  background-color: rgb(84, 84, 84) !important
}

.bg-alt:hover .request-title {
  color: rgb(255, 255, 71)!important
}

.bg-alt-2:hover .request-title {
  color: rgb(159, 159, 159) !important
}

/* footer elements */
.footer {
  text-align: center;
}

.footer-element {
  display: inline-block;
  font-family: "Martel", serif;
  color: rgb(140, 140, 140);
  font-size: 15px;
  margin: 0 20px;
  padding-bottom: 2%;
}

.footer-element:hover{
  color: black;
  cursor: pointer;
}

/* form elements */
.form-frame {
  background-color: white;
  border-radius: 10px;
  width: 60%;
  height: 90%;
  overflow-y: auto;
  /* Allow vertical scrolling if needed */
  position: absolute;
  /* Position the element absolutely */
  left: 50%;
  /* Move the element to the horizontal center */
  top: 50%;
  /* Move the element to the vertical center */
  transform: translate(-50%, -50%);
  /* Adjust the position to center both horizontally and vertically */
}

.form-container {
  display: flex;
  padding: 2%;
  margin: auto;
  text-align: center;
  justify-content: center;
}

.form-intro {
  text-align: center;
  font-family: "Martel", serif;
  font-size: 30px;
  padding-bottom: 2%;
  padding-top: 7%;
  color: rgb(65, 65, 65);
}

.form-intro-note {
  text-align: center;
  font-family: "Martel", serif;
  font-style: italic;
  font-size: 15px;
  padding-bottom: 5%;
  color: rgb(140, 140, 140);
}

.row-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.cell-item {
  padding: 2%;
}

.form-label{
  text-align: left;
  font-family: "Martel", serif;
  font-size: 20px;
}

#submit {
  color: rgb(6, 41, 3);
  border-color: rgba(6, 41, 3, 0);
  font-weight: 700;
  width: 150px;
  height: 45px;
  font-family: "Martel", serif;
  background-color: rgba(195, 253, 144, 0.564) !important;
}

#submit:hover {
  color: rgb(24, 176, 10);
  background-color: rgb(195, 253, 144) !important;
  cursor: pointer;
}

.error-general {
  color: rgba(255, 51, 0, 0.625);
  margin-top: 1px;
  font-size: 10px;
}

.error-submission {
  color: rgba(255, 51, 0, 0.625);
  margin-top: 1px;
  font-size: 14px;
  justify-content: center;
  display: flex;
  padding-bottom: 5%;
}

div#loading {
  width: 35px;
  height: 35px;
  display: none;
  cursor: wait;
}