.accordion-button:not(.collapsed) {
  /* UI Properties */
  background: #A7A7A9 !important;
  border-radius: 20px 20px 0px 0px;
  opacity: 1;
}

.accordion-button {
  background: #A7A7A9 !important;
  color: #313133 !important;
}

.acordion-width-center {
  width: 80%;
  margin: auto;
  height: 70%;
  margin-bottom: 50px;
  margin-top: 150px;
}

.accordion-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.black-box {
  border-radius: 5px;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  /* Add styles for the black box */
  width: 249px;
  height: 70px;
  background-color: #313133;
  position: relative; /* This allows the gray box to be positioned relative to the black box */
  text-align: center;
}

.governance-tree-top-item {
  border-radius: 5px;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  /* Add styles for the black box */
  width: 249px;
  height: 70px;
  background-color: #313133;
  position: relative; /* This allows the gray box to be positioned relative to the black box */
}


.governance-tree-sub-top-item {
  color: #313133;
  margin: auto;
  /* Add styles for the gray box */
  width: 249px;
  height: 62px;
  background: #EDEDEE 0% 0% no-repeat padding-box;
  border-radius: 5px 5px 0px 0px;
  opacity: 1;
  position: absolute; /* This positions the gray box relative to the black box */
  top: -63px; /* This positions the gray box above the black box */
  display: none; /* This makes the gray box invisible by default */
}

.governance-tree-top-item:hover .governance-tree-sub-top-item {
  /* When the black box is hovered over, display the gray box */
  display: flex;
}


.gray-box {
  color: #313133;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 25px;
  /* Add styles for the gray box */
  width: 249px;
  height: 70px;
  background-color: #E0E0E4;
  position: absolute; /* This positions the gray box relative to the black box */
  top: 60px; /* This positions the gray box above the black box */
  left: 50%; /* This centers the gray box horizontally within the black box */
  transform: translateX(-50%); /* This corrects the position of the gray box, so that it's truly centered */
  display: none; /* This makes the gray box invisible by default */
  text-align: center;
}

.black-box:hover .gray-box {
  /* When the black box is hovered over, display the gray box */
  display: block;
}

.governance-tree-ceo-item {
  border-radius: 5px;
  margin: auto;
  margin-top: 100px;
  /* Add styles for the black box */
  width: 311px;
  height: 62px;
  background-color: #87878B;
  position: relative; /* This allows the gray box to be positioned relative to the black box */
  text-align: center;
}


.governance-tree-ceo-sub-item {
  color: #313133;
  margin: auto;
  /* Add styles for the gray box */
  width: 311px;
  height: 62px;
  background: #EDEDEE 0% 0% no-repeat padding-box;
  border-radius: 0px 0px 5px 5px;
  opacity: 1;
  position: absolute; /* This positions the gray box relative to the black box */
  top: 63px; /* This positions the gray box above the black box */
  display: none; /* This makes the gray box invisible by default */
  text-align: center;
}

.governance-tree-ceo-item:hover .governance-tree-ceo-sub-item {
  /* When the black box is hovered over, display the gray box */
  display: flex;
}


.black-box-text {
  color: white; /* this will make the text white */
  text-align: center; /* this will center the text */
  padding: 15px; /* this will add some padding around the text */
  text-align: center;
}

.line-center-right {
  width: 150px;
  height: 2px;
  background-color: gray;
  position: absolute;
  top: 30px;
  left: -60%;
}

.line-top-item {
  background-color: gray;
  border-left: 2px solid;
  height: 175px;
  position: absolute;
  left: 50%;
  /* margin-left: -3px; */
  top: 70px;
}

.line-bottom-right {
  width: 40%; /* Set the width of the line to be the same as the black box */
  height: 2px; /* Set the height of the line */
  background-color: gray; /* Set the color of the line to white */
  position: absolute; /* Position the line relative to the black box */
  top: 32px;
  left: 311px;
}

.governance-tree-bottom-right-item {
  border-radius: 5px;
  margin: auto;
  margin-top: -62px;
  margin-left: 809px;
  /* Add styles for the black box */
  width: 249px;
  height: 62px;
  background-color: #A9A9AA;
  position: relative; /* This allows the gray box to be positioned relative to the black box */
  text-align: center;
}

.governance-tree-bottom-right-sub-item {
  color: #313133;
  margin: auto;
  /* Add styles for the gray box */
  width: 249px;
  height: 62px;
  background: #EDEDEE 0% 0% no-repeat padding-box;
  border-radius: 0px 0px 5px 5px;
  opacity: 1;
  position: absolute; /* This positions the gray box relative to the black box */
  top: 63px; /* This positions the gray box above the black box */
  display: none; /* This makes the gray box invisible by default */
}

.governance-tree-bottom-right-item:hover .governance-tree-bottom-right-sub-item {
  /* When the black box is hovered over, display the gray box */
  display: flex;
}

.line-bottom-left {
  width: 40%; /* Set the width of the line to be the same as the black box */
  height: 2px; /* Set the height of the line */
  background-color: gray; /* Set the color of the line to white */
  position: absolute; /* Position the line relative to the black box */
  top: 32px;
  left: -123px;
}

.governance-tree-bottom-left-item {
  border-radius: 5px;
  margin: auto;
  margin-top: -62px;
  margin-left: 0px;
  /* Add styles for the black box */
  width: 249px;
  height: 62px;
  background-color: #A9A9AA;
  position: relative; /* This allows the gray box to be positioned relative to the black box */
  text-align: center;
}

.governance-tree-bottom-left-sub-item {
  color: #313133;
  margin: auto;
  /* Add styles for the gray box */
  width: 249px;
  height: 62px;
  background: #EDEDEE 0% 0% no-repeat padding-box;
  border-radius: 0px 0px 5px 5px;
  opacity: 1;
  position: absolute; /* This positions the gray box relative to the black box */
  top: 63px; /* This positions the gray box above the black box */
  display: none; /* This makes the gray box invisible by default */
  text-align: center;
}

.governance-tree-bottom-left-item:hover .governance-tree-bottom-left-sub-item {
  /* When the black box is hovered over, display the gray box */
  display: flex;
}

.governance-tree-center-right-item {
  border-radius: 5px;
  margin: auto;
  margin-top: -190px;
  margin-left: 680px;
  /* Add styles for the black box */
  width: 249px;
  height: 62px;
  background-color: #666667;
  position: relative; /* This allows the gray box to be positioned relative to the black box */
  text-align: center;
}

.governance-tree-center-right-sub-item {
  color: #313133;
  margin: auto;
  /* Add styles for the gray box */
  width: 249px;
  height: 62px;
  background: #EDEDEE 0% 0% no-repeat padding-box;
  border-radius: 5px 5px 0px 0px;
  opacity: 1;
  position: absolute; /* This positions the gray box relative to the black box */
  top: -63px; /* This positions the gray box above the black box */
  display: none; /* This makes the gray box invisible by default */
  text-align: center;
}

.governance-tree-center-right-item:hover .governance-tree-center-right-sub-item {
  /* When the black box is hovered over, display the gray box */
  display: flex;
}

.container {
  display: flex;
  justify-content: center; /* Center the black box horizontally */
  align-items: center; /* Center the black box vertically */
}

.container-right {
  display: flex;
  justify-content: right; /* Center the black box horizontally */
  align-items: center; /* Center the black box vertically */
}

.reduis-supervisoryBoard {
  border-radius: 20px 20px 0px 0px !important;
}

.reduis-technicalCommittee {
  border-radius: 0px 0px 0px 0px !important;
  border: 1px solid #E0E0E4;
}

.reduis-partnerships {
  border-radius: 0px 0px 20px 20px !important;
}

.gevernance-section {
  background: #A7A7A9 0% 0% no-repeat padding-box;
  height: 56px;
  opacity: 1;
}

.governance-reduis {
  border-radius: 20px 20px 20px 20px !important;
  overflow: hidden;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.br-1px {
  border: 1px solid #E0E0E4 !important;
}

.bg-governance-collpase {
  background-color: #F9F9F9 !important;
}

.governance-tree-text-item {
  text-align: center;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
}

.Supervisory-Board {
  width: 267px;
  height: 269px;
}

@media (min-width: 500px) {
  .supervisory-board-img-md {
    width: 267px;
    height: 269px;
  }
}

.supervisory-board-img-sm {
  width: 200px;
  height: 200px;
}

.governance-tree-img {
  height: 360px;
  width: 940px;
}

.mb-30 {
  margin-bottom: 7.5rem !important;
}

.governance-tree-responsive {
  overflow-x: auto;
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}