:root {
  --core-home-btn: 18px;
  --blue-btn: #57c4ea;
  --yellow-btn: #ffc201;
  --green-btn: #009b3f;
  --brown-btn: #594a40;
  --admin-btn: #5f8d4e;
  --red-btn: #dc3545;
  --secondary-color: #989ca2;
}

.btn-underline {
  text-decoration: underline;
}

.footer_btn {
  background-color: #009b3f;
  color: #ffffff;
}

.pill-btn {
  align-items: center !important;
  /* font-family: "Open Sans", Arial, Verdana, sans-serif; */
  font-weight: bold !important;
  font-size: 11px !important;
  display: inline-block !important;
  height: 100% !important;
  white-space: nowrap !important;
  width: auto !important;
  position: relative !important;
  border-radius: 100px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  padding: 0px 12px 0px 20px !important;
  text-overflow: ellipsis !important;
  line-height: 1.25rem !important;
  color: #595959 !important;
  word-break: break-word !important;
}
.pill-btn:before {
  border-radius: 50% !important;
  content: "";
  height: 10px !important;
  left: 6px !important;
  margin-top: -5px !important;
  position: absolute !important;
  top: 50% !important;
  width: 10px !important;
}
.pill-btn--success {
  background: #b4eda0;
}
.pill-btn--success:before {
  background: #6bc167;
}
.pill-btn--warning {
  background: #ffebb6;
}
.pill-btn--warning:before {
  background: #ffc400;
}
.pill-btn--danger {
  background: #ffd5d1;
}
.pill-btn--danger:before {
  background: #ff4436;
}

.input-field-btn {
  margin-left: -110px !important;
  padding: 12px 20px !important;
  border: 0 !important;
  border-radius: 30px;
}

.button-full-green {
  padding: 8px 30px;
  background-color: #009b3f !important;
  border-color: #009b3f !important;
  color: white !important;
}

.button-green-transparent {
  background-color: white !important;
  padding: 8px 30px;
  border-color: #009b3f !important;
  color: #009b3f !important;
}

.button-full-brown {
  padding: 8px 15px;
  background-color: var(--brown-btn) !important;
  border-color: var(--brown-btn) !important;
  color: white !important;
}

.btn-secondary {
  background-color: transparent;
  color: #6c757d;
  padding: 8px 15px;
}

.btn-secondary-sm {
  background-color: transparent;
  color: #6c757d;
  border-color: #6c757d !important;

  padding: 6px 15px;
}

.btn-primary {
  background-color: white !important;
  padding: 8px 30px;
  border-color: #009b3f !important;
  color: #009b3f !important;
}

.btn-danger {
  background-color: white !important;
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:hover #trash-red {
  background-color: #dc3545 !important;
  fill: #ffffff !important;
  color: white !important;
}

.full-length-btn {
  display: block;
  width: 100%;
  border: none;
  background-color: #04aa6d;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active,
.btn-primary:hover #icon-back-green {
  background-color: #009b3f !important;
  color: white !important;
  border-color: #009b3f !important;
  fill: #ffffff !important;
}

.button-show-more {
  background: transparent !important;
  padding: 8px 30px !important;
  min-width: 220px;
  /* background-color: white !important; */
  border-color: #009b3f !important;
  color: #009b3f !important;
}

.button-show-more:focus,
.button-show-more:hover {
  background-color: #009b3f !important;
  color: white !important;
  border-color: #009b3f !important;
  fill: #ffffff !important;
}

.yellow-btn {
  background: transparent !important;
  padding: 15px 30px;
  min-width: 200px;
  border-color: var(--yellow-btn) !important;
  color: var(--yellow-btn) !important;
  font-size: var(--core-home-btn);
}

.yellow-btn:focus,
.yellow-btn:hover {
  background-color: var(--yellow-btn) !important;
  color: white !important;
  border-color: var(--yellow-btn) !important;
  fill: #ffffff !important;
}

.blue-btn {
  background: transparent !important;
  padding: 15px 30px;
  min-width: 200px;
  border-color: var(--blue-btn) !important;
  color: var(--blue-btn) !important;
  font-size: var(--core-home-btn);
}

.blue-btn:focus,
.blue-btn:hover {
  background-color: var(--blue-btn) !important;
  color: white !important;
  border-color: var(--blue-btn) !important;
  fill: #ffffff !important;
}

.green-btn {
  background: transparent !important;
  padding: 15px 30px;
  min-width: 200px;
  border-color: var(--green-btn) !important;
  color: var(--green-btn) !important;
  font-size: var(--core-home-btn);
}

.green-btn:focus,
.green-btn:hover {
  background-color: var(--green-btn) !important;
  color: white !important;
  border-color: var(--green-btn) !important;
  fill: #ffffff !important;
}

.brown-btn {
  background: transparent !important;
  padding: 15px 30px;
  min-width: 200px;
  border-color: var(--brown-btn) !important;
  color: var(--brown-btn) !important;
  font-size: var(--core-home-btn);
}

.brown-btn:focus,
.brown-btn:hover {
  background-color: var(--brown-btn) !important;
  color: white !important;
  border-color: var(--brown-btn) !important;
  fill: #ffffff !important;
}

.core-home-page-button-pricing {
  padding: 15px 30px;
  min-width: 200px;
}

.admin-button-action {
  background: transparent !important;
  padding: 5px 10px;
  /* min-width: 200px; */
  border-radius: 10px;
  border-color: var(--green-btn) !important;
  color: var(--green-btn) !important;
  font-size: var(--core-home-btn);
}

#user-details-wrapper {
  border: 2px solid lightsteelblue;
  text-align: center;
  width: 500px;
  margin: 20px auto;
  padding: 20px;
}

.email,
.avatar,
#sign-out {
  margin: auto;
  display: block;
}

.avatar {
  border-radius: 95%;
}

#button-sign-out {
  font-family: "Roboto", arial, sans-serif;
  display: inline-block;
  justify-content: center;
  font-size: 16px;
  width: 240px;
  height: 50px;
  border-radius: 1px;
  background-color: grey;
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 1px 1px 1px grey;
}

#button-sign-out:hover {
  cursor: pointer;
}

#g-sign-in-wrapper {
  display: inline-block;
  width: 240px;
  height: 50px;
  border-radius: 1px;
  background-color: #4285f4;
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 1px 1px 1px grey;
}

#g-sign-in-wrapper:hover {
  cursor: pointer;
}

.g-icon-wrapper {
  float: left;
  width: 18px;
  height: 20px;
  background: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 1px;
  margin-right: 16px;
}

.button-text {
  display: block;
  font-family: "Roboto", arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.21px;
  margin: 0 6px 0 6px;
  line-height: 48px;
  vertical-align: top;
  text-align: center;
}

#button-sign-out-text {
  display: block;
  text-align: center;
}

.button-p {
  background: #fff;
  border: none;
  border-radius: none !important;
  padding: 1px 9px 2px 9px;
  box-shadow: 1px 2px 4px 0px gray;
}

.button_plus {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #fff;
  cursor: pointer;

  /* Mittig */
  top: 50%;
  left: 50%;
}

.button_plus:after {
  content: "";
  position: absolute;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 50%;
  background: #095776;
  top: 50%;
  left: 50%;
}

.button_plus:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #095776;
  height: 50%;
  width: 4px;
}

.button_plus:hover:before,
.button_plus:hover:after {
  background: #fff;
  transition: 0.2s;
}

.button_plus:hover {
  background-color: #095776;
  transition: 0.2s;
}

.level2-link {
  color: #000000 !important;
}

.navbar-sgg {
  color: #000000;
  text-decoration: none;
}

.navbar-sgg-active {
  background-color: #f8f8f8;
  color: var(--green-btn) !important;
  padding: 13px 25px;
  border-radius: 30px;
}

/* Custom CSS for carousel control buttons */
.custom-carousel-control {
  width: auto; /* Set button width to auto */
  background: transparent; /* Remove background color */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  position: absolute; /* Position them absolutely within the carousel */
  top: 30%; /* Move them vertically to the center */
  transform: translateY(-50%); /* Center vertically */
  z-index: 1; /* Ensure they appear above the carousel content */
}

/* Adjust the position of the icons */
.custom-carousel-control .carousel-control-prev-icon,
.custom-carousel-control .carousel-control-next-icon {
  width: 1.5rem; /* Set icon width */
  height: 1.5rem; /* Set icon height */
}

/* Adjust icon alignment for left button */
.custom-carousel-control.carousel-control-prev {
  left: 0; /* Position left button at the left edge */
}

/* Adjust icon alignment for right button */
.custom-carousel-control.carousel-control-next {
  right: 0; /* Position right button at the right edge */
}

.button-radius {
  border-radius: 30px;
  border: 0;
}

.c-pointer {
  cursor: pointer;
}