.uiTopBar {
  height: 77px;
  line-height: 40px;
  box-sizing: border-box;
   width: 1920px;
}

.circleIndicator {
  background-image: url('../images/step-indicator.svg'); 
    width: 40px;
    height: 47px;
    margin: 2px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0e35d0;
    font-size: 24px;
    font-weight: bold;
}

.circleIndicator #stageNum {
  position: relative;
  top: -2px;
  left: 0;
}

.notification_content {
    color: black;
       padding: 16px;
       width: 1262px;
       height: 420px;
       top: 208px;
       left: 284px;
       overflow-y: auto;
       background: white;
       box-sizing: border-box;
       width: 1377px;
   }
 
   .notification_contentSmall {
    color: black;
       padding: 16px;
       width: 1052px;
       height: 320px;
       top: 106px;
       left: 54px;
       overflow-y: auto;
   }

   .profile-miranda {
     width: 120px; /* Adjust the size as needed */
     height: 120px; /* Adjust the size as needed */
     background-image: url('../images/temp-miranda-profile.png'); /* Replace with the path to your image */
     background-size: cover;
     background-position: 0 -30px;
     border-radius: 50%; /* This creates a circular shape */
     overflow: hidden; /* Hides anything outside the circle */
     border: 4px solid #ffffff; /* Optional: add a border to the circle */
   }

   .profile-blank {
    width: 120px; /* Adjust the size as needed */
    height: 120px; /* Adjust the size as needed */
    background-image: url('../images/temp-blank-profile.png'); /* Replace with the path to your image */
    background-size: cover;
    background-position: 0 -30px;
    border-radius: 50%; /* This creates a circular shape */
    overflow: hidden; /* Hides anything outside the circle */
    border: 4px solid #ffffff; /* Optional: add a border to the circle */
  }

   .profile-murdoch {
    width: 120px; /* Adjust the size as needed */
    height: 120px; /* Adjust the size as needed */
    background-image: url('../images/temp-murdoch-profile.png'); /* Replace with the path to your image */
    background-size: cover;
    background-position: 0 -30px;
    border-radius: 50%; /* This creates a circular shape */
    overflow: hidden; /* Hides anything outside the circle */
    border: 4px solid #ffffff; /* Optional: add a border to the circle */
  }

  .hotspot50 {
    width: 50px;
	height: 50px;
	__background: #ff000050;
   }

   .hotspot25 {
    width: 25px;
	height: 25px;
	__background: #ff000050;
   }

.infobox {
  background: #ffffffe0;
}
.infobox li p {
 margin:0;
}

#cal:focus {
  outline: 3px solid yellow;
 }
 

 /* Default styles for both video and image */
#krvideo {
  display: block;
}

#krimage {
  display: none;
}

/* Styles for reduced motion */
@media (prefers-reduced-motion: reduce) {
  #krvideo {
      display: none;
  }

  #krimage {
      display: block;
  }
}

.circle {
  width: 25px;
  height: 25px;
  background-color: #3498db; /* You can change the background color */
  color: #ffffff; /* You can change the text color */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}




.slider-container {
  display: flex;
  width: 100%;
}

.slider-text-column,
.slider-image-column {
  width: 50%;
  box-sizing: border-box;
  padding: 20px;
}

.slider-text-column {
  background-color: #f0f0f0; /* Optional: Set background color for the text column */
}

.slider-image-column img {
  max-width: 100%;
  height: auto;
  display: block;
}

.documentIcon {
  left: 1100px; 
  top: 18px;
  width: 820px;
  height: auto;
  padding: 24px;
  color: black;
  box-sizing: border-box;

 }

 .documentIcon ul {
  list-style-type: none; /* Remove default list style */
  padding: 0; /* Remove default padding */
}

.documentIcon li {
  margin-bottom: 10px; /* Optional spacing between list items */
  padding-left: 110px; /* Optional padding to make room for the custom bullet image */
  background: url('../images/DocumentIcon.png') no-repeat left center; /* Replace 'your-image.png' with the path to your PNG image */
  background-size: 100px; /* Adjust the size of the image as needed */
  line-height: 110px; /* Optional line height for better alignment */
}



.clea-carousel {
  perspective: 1000px;
  position: relative;
  width: 1344px;
  height: 655px;
  
  margin: 0 auto;
}

.clea-cards-container {
  position: relative;
  width: 100%;
  height: 100%;
  
  transform-style: preserve-3d;
}

.clea-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  __box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  __border-radius: 10px;
 
  opacity: 1;
  background-image: url("../images/carousel-card-back.png");
  transition: all 0.5s;
}

.clea-cardContent {
position: absolute;
  left: 150px;
  top: 147px;
  width: 1034px;
  height: 433px;
  _background-color: #ffffff80;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  font-size: 22px;
  font-size: 17pt;
  font-family: 'Roboto', sans-serif;
}

.clea-cardTitle {
  position: absolute;
  left: 357px;
    top: 83px;
    width: 638px;
    height: 30px;
    text-align: center;
    font-size: 17pt;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}


.clea-cardRight {
 transform: translateX(33%) translateZ(-100px) scale(0.8);
 filter: blur(1px) brightness(80%);
 z-index: 1;
}
.clea-cardLeft {
 transform: translateX(-33%) translateZ(-100px) scale(0.8);
 filter: blur(1px) brightness(80%);
 z-index: 1;
}


.clea-card.clea-active {
  opacity: 1;
  transform: translateX(0) translateZ(0) scale(1);
  filter: blur(0px) brightness(100%);
  z-index: 10;
}

.clea-arrow {
  position: absolute;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 75px;
  height: 43px;
  z-index: 100001;
}

.clea-arrow.clea-left {
  left: 573px;
  top: 518px;
  display: none;
}

.clea-arrow.clea-right {
  left: 697px;
  top: 518px;
}

.didList {
  height: 46px;
  width: 937px;
  color: white;
  display: flex;
  align-items: center; /* Vertical alignment */
  border-radius: 8px;
  padding: 8px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  cursor: pointer;
}

.didList:nth-child(even) {
  
}

.didList:nth-child(odd) {
  background: #393F4A;
}



.sectionTitle {
  width: 440px;
  height: 24px;
  text-align: center;
  color: white;
 }
 .dropdown {
  width: 420px; 
  height: 40px;
  color: white;
  text-align: left;
  box-sizing: border-box;
  padding: 8px;
  font-size: 1.1em;
  z-index: 10;
 }
 .dropdown:hover,
 .dropdown:focus {
     background: #505050; /* Background color on hover and focus */
 }
 .buttonIcon {
  position: absolute;
  left: 400px;
 }
 
 .separator {
     height: 1px;
     width: 100%;
      margin: 8px 0; /* Adjust margin as needed for spacing */
     box-sizing: border-box;
         border-bottom: 1px dotted #00000020;
 }
 
 .dropList {
 background: #E6E7E5; 
 color: black; 
 width: 432px; 
 height: 456px; 
 overflow: hidden; 
 overflow-y: auto;  
 border-radius: 0 0 16px 16px; /* top-left top-right bottom-right bottom-left */ 
 padding: 24px; 
 box-sizing: border-box; 
 top: 170px;
 z-index: 1;
 }
 
 
 .dropItem {
  color: black;
     padding: 10px;
     text-align: center;
     width: 100%;
     outline: 1px solid #50505050;
   margin-bottom: 12px;
   border-radius: 8px;
 }
 
 .dropItem:hover,
 .dropItem:focus {
     background: #ffffff; /* Background color on hover and focus */
 }
 
 
 .catItem {
  position: relative;
  color: white;
  background-image: url('../images/did/selected-background.png');
  background-position: center center;
  width: 209px;
  height: 39px;
  display: inline-block;
  text-align: left;
  padding: 10px;
  overflow: hidden;
  margin: 3px;
 }
 .catItem .buttonIcon {
  position: absolute;
  left: 164px;
  top: 2px;
 }
 

 
 .catItem:hover,
 .catItem:focus {
     background-color: #ffffff; /* Background color on hover and focus */
 }
 
 
 .displayCategories {
  width: 434px;
  height: 376px;
 }
 

 #radio-container {
  display: block;
}

.radio-row {
  display: block;
  width: 460px;
  height: 48px;
  padding-top: 4px;
  box-sizing: border-box;
}

.radio-row-col {
  width: 150px;
  text-align: center;
  _background: #ffff0030;
  display: inline-block;
  vertical-align: middle;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
 }

.radio-row input[type="radio"] {

  transform: scale(1.5);
  cursor: pointer;
}


.radio-row input[type="radio"]:last-child {
  margin-right: 0;
}

.didLong {
  width: 1377px;
}



.krHolder {
  width: 712px; 
  height: 132px; 
  border-radius: 16px; 
  border: 1px solid #00E4FF; 
  border-left: 36px solid #00E4FF; 
  box-sizing: border-box;
}

.krA::before {
  content: 'A';
  color: black; 
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  left: -28px;
  top: 36px;
}

.krB::before {
  content: 'B';
  color: black; 
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  left: -28px;
  top: 36px;
}

.krC::before {
  content: 'C';
  color: black; 
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  left: -28px;
  top: 36px;
}

.krD::before {
  content: 'D';
  color: black; 
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  left: -28px;
  top: 36px;
}


.krHolder:focus, .krHolder:hover {
  border: 1px solid #DAFF2B; 
  border-left: 36px solid #DAFF2B; 
}

.krAnswer {
  width: 100%; height: 100%; box-sizing: border-box; padding: 16px; overflow: hidden; overflow-y: auto;
}

#stage a, .clea-cardContent a {
  color: #daff2b;
  color:  #0000FF;
}
#feedbackText a {
  color:  #0000FF;
}


#tflist .text {
  background: #ffffff30;
  padding: 8px;
  margin-bottom: 10px;
}

#tflist .col2 {
  border-bottom: 1px dotted #ffffff30;
  padding: 8px;
}

#tflist .col2 label {
  margin-right: 16px;
}

#tflist input[type="radio"] {

  transform: scale(1.5);
  cursor: pointer;
  margin-left: 12px;
}

.didList:focus {
  
    _filter: drop-shadow(8px 8px 10px #ffff00a0) drop-shadow(-8px -8px 10px #ffff00a0); /* Combine two drop shadow filters */
    box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.8);
   z-index:1;
}

#answerSubmit:focus, #answerSubmit:focus-visible {
  outline: 2px solid yellow;
}




.clea-carousel {
  perspective: 1000px;
  position: relative;
  width: 1344px;
  height: 655px;
  
  margin: 0 auto;
}

.clea-carousel {
  position: relative;
  width: 1353px;
  height: 656px;
  margin: 0 auto;
}


.clea-cards-container {
  position: relative;
  width: 100%;
  height: 100%;
  
  transform-style: preserve-3d;
}

.clea-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  __box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  __border-radius: 10px;
 
  opacity: 1;
  background-image: url("../images/panel-empty.png");
  transition: all 0.5s;
}

.clea-cardImage {
  position: absolute;
  right: 42px;
  top: 42px;
}

.clea-cardContent {
position: absolute;
  left: 100px;
  top: 147px;
  width: 1034px;
  height: 433px;
  _background-color: #ffffff80;
  padding: 20px;
  box-sizing: border-box;
  color: white;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.clea-cardContent {
  position: absolute;
    left: 71px;
    top: 151px;
    width: 615px;
    height: 433px;
    color: black;
    _background: #ffff0050;
  }


.clea-cardTitle {
  position: absolute;
  left: 357px;
    top: 83px;
    width: 638px;
    height: 30px;
    text-align: center;
    font-size: 16pt;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
}


.clea-cardRight {
 transform: translateX(33%) translateZ(-100px) scale(0.8);
 filter: blur(1px) brightness(80%);
 z-index: 1;
}
.clea-cardLeft {
 transform: translateX(-33%) translateZ(-100px) scale(0.8);
 filter: blur(1px) brightness(80%);
 z-index: 1;
}


.clea-card.clea-active {
  opacity: 1;
  transform: translateX(0) translateZ(0) scale(1);
  filter: blur(0px) brightness(100%);
  z-index: 10;
}

.clea-arrow {
  position: absolute;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 75px;
  height: 43px;
  z-index: 100001;
}

.clea-left {
  width: 41px;
  height: 50px;
  background-image: url('../images/carousel_lft_arw_reg.png');
 } 
 .clea-left:hover {
  background-image: url('../images/carousel_lft_arw_hl.png');
 } 

 .clea-right {
  width: 41px;
  height: 50px;
  background-image: url('../images/carousel_rt_arw_reg.png');
 } 
 .clea-right:hover {
  background-image: url('../images/carousel_rt_arw_hl.png');
 } 


.clea-arrow.clea-left {
  left: 613px;
  top: 525px;
  display: none;
}

.clea-arrow.clea-right {
  left: 699px;
  top: 525px;
}

img.team {
  filter: none;
}

.teamName, .teamRole {
  display: none;
}

.button-container button {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	text-align: left;
}


.teamButton {
  overflow: visible;
}
.teamButton:focus .team, .teamButton:hover .team {
  _transform: scale(1.05);
  filter: none;
}

.teamButton.selected {
  filter: grayscale(1);
}


#chatBubble img {
  position: absolute;
  top: 0;
  right: 0;
}

/* UI */
.uiTop {
  width: 1920px;
  height: 969px;
  background-image: url('../images/BCM_Plat_UI.jpg');
  pointer-events: none;
}


.uiTitle {
  position: absolute;
  width: 1100px;
  left: 410px;
  color: white;
  text-align: center;
  font-size: 1.25em; 
  font-family: 'Open Sans', sans-serif;  
  _text-transform: uppercase;
  z-index: 10;
  top: 15px;
}

.uiBottom {
  position:absolute;
  width: 1920px;
  height: 205px;
  left: 0px;
  top: calc(969px - 205px);
  pointer-events: none;
}

#openMenu {
    position: absolute; 
    right: 12px; 
    top: 6px; 
    z-index:10;
    width: 146px;
    height: 54px;
    background-image: url('../images/ui/btn_menu_open_reg.png');
  }
#openMenu:hover {
    background-image: url('../images/ui/btn_menu_open_hl.png');
}

#closeMenu {
  position: absolute; 
  left: 432px;
  top: 5px; 
  z-index:20;
  width: 146px;
  height: 54px;
  background-image: url('../images/ui/btn_menu_close_reg.png');
}
#closeMenu:hover {
  background-image: url('../images/ui/btn_menu_close_hl.png');
}


#backButton {
  position: absolute; 
  left: 94px;
  top: 31px; 
  z-index:20;
  width: 120px;
  height: 54px;
  background-image: url('../images/button_back.png');
}
#backButton:hover {
  _background-image: url('../images/ui/btn_back_hl.png');
}

#nextButton {
  position: absolute; 
  left: 300px;
  top: 31px; 
  z-index:20;
  width: 121px;
  height: 54px;
  background-image: url('../images/button_next.png');
}
#nextButton:hover {
  _background-image: url('../images/ui/btn_next_hl.png');
}

.pageIndicator {
    position: relative;
    line-height: 30px;
    font-size: 1.25em;
    width: 83px;
    height: 30px;
    text-align: center;
    color: #FFAE00;
    color: white;
    top: 47px;
    left: 215px;
}

.splashTitle {
  color: black; 
  width: 1920px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 40pt;
  font-style: italic;
  top: 220px;
}

.splashText {
  color: white; 
  width: 1920px;
  text-align: center;
  font-size: 45pt;
  top: 320px;
}
.splashText h1, .splashText h2 {
  margin: 4px;
}
.splashText h2 {
  font-size: 1.25em;
}

.destineeButton {
  border-radius: 26px;
  background: #ffffff50;
  width: 1210px;
  height: 200px;
  left: 520px;
}





img.team {
  position: relative;
  z-index: 2;
  top:-2px;
   width: 200px;
   filter: grayscale(75%);
   transition: transform 0.25s ease-in-out, filter 0.25s ease-in-out;
  }
  
  .button-container {
   position: relative;
        max-width: 1920px;
        margin: 0 auto;
        padding-left: 30px;
        padding-right: 30px;
        display: flex;
        justify-content: space-evenly;
      }
    
  .teamName {
  position: relative;
   width: 100%;
   font-weight: bold;
  text-align: center;
   padding: 12px;
   box-sizing: border-box;
   font-size: 20px;
   color:#000000;
   background: white;
   z-index: 5;
  } 
  .teamRole {
  position: relative;
   width: 100%;
   font-weight: bold;
  text-align: center;
   padding: 0px;
   box-sizing: border-box;
   font-size: 18px;
   color:#808080;
   background: white;
   z-index: 5;
   padding-bottom: 10px;
  } 
  
  .teamButton {
   overflow: hidden; /* Prevents the child elements from overflowing */
   outline: 1px solid black;
   box-shadow: rgba(0, 0, 0, 0.26) 0px 4px 8px;
   border-radius: 14px;
   background: white;
  }
  
  
  .teamButton:focus .team, .teamButton:hover .team {
        transform: scale(1.05);
        filter: grayscale(0%);
      }
  .teamInfo {
   width: 1830px; 
   outline: 1px solid #000000a0;
    border-radius: 14px;
    top: 590px;
    padding: 24px;
    box-sizing: border-box;
    left: 40px;
    background: white;
    color: black;
    height: 140px;
  }


  .diginote-layout {
    column-count: 2; /* Number of columns */
    column-gap: 5em; /* Space between columns (the spine) */
    column-fill: auto; 
    padding: 16px;
    font-family: 'Handlee', sans-serif;
    width: 1000px;
    position: absolute;
    left: 439px;
    top: 117px;
    height: 593px;
    font-size: 18px;
}

.diginote-layout a {
  color: yellow;
}

/* convo */
.convoButton {
  width: 110px;
  height: 40px;
}

.convoButton:focus {
  outline: none; /* Hide the outline for all focuses */
}


.convoButton:focus-visible {
  outline: 2px solid yellow; /* Show the outline when focused via keyboard */
}
.convoButton:hover span {
  color: white !important;
}

#convoPrev img {
  position: absolute;
  top: 5px;
}
#convoPrev span {
  position: absolute;
  top: 12px;
  left: 40px;
  color: #ffae00;
}
#convoNext img {
  position: absolute;
  top: 5px;
  right: 5px;
}
#convoNext span {
  position: absolute;
  top: 12px;
  left: 0px;
  color: #ffae00;
}


.techButton {
  width: 796px;
  height: 234px;
  background-image: url('../images/acq0710-00280_btn1.png');
}
.techButton:hover {
  background-image: url('../images/acq0710-00280_btn1_hl.png');
}
.techButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 20px;
  top: -20px;
}


.pointButton {
  width: 796px;
  height: 229px;
  background-image: url('../images/acq0710-00280_btn2.png');
}
.pointButton:hover {
  background-image: url('../images/acq0710-00280_btn2_hl.png');
}
.pointButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 20px;
  top: -20px;
}


.cardsButton {
  width: 800px;
  height: 240px;
  background-image: url('../images/bt_tpd_matching_game_reg.png');
}
.cardsButton:hover {
  background-image: url('../images/bt_tpd_matching_game_hl.png');
}

.cardsButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 20px;
  top: -20px;
}


.examplesButton {
  width: 800px;
  height: 231px;
  background-image: url('../images/bt_tpd_example_reg.png');
}
.examplesButton:hover {
  background-image: url('../images/bt_tpd_example_hl.png');
}
.examplesButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 20px;
  top: -20px;
}

#smartboard details summary {
  color: black;
  background: white;
  padding: 8px;
  border-radius: 12px;
  outline: 1px solid black;
}

#destineeButton1 {
  top: 250px;
  left: 510px;
}

#destineeButton2 {
  top: 420px;
  left: 510px;
}

#destineeButton3 {
  top: 590px;
  left: 510px;
}

.opviewButton {
  width: 1231px;
  height: 157px;
  background-image: url('../images/acq0710-00040_Operational_View_Normal.png');
}
.opviewButton:hover {
  background-image: url('../images/acq0710-00040_Operational_View_Hover.png');
}
.opviewButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 26px;
  font-weight: bold;
  top: 0px;
}


.progmembersButton {
  width: 1231px;
  height: 157px;
  background-image: url('../images/acq0710-00040_Program_Members_Normal.png');
}
.progmembersButton:hover {
  background-image: url('../images/acq0710-00040_Program_Members_Hover.png');
}
.progmembersButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 26px;
  font-weight: bold;
  top: 0px;
}


.timelineButton {
  width: 1231px;
  height: 157px;
  background-image: url('../images/acq0710-00040_Timeline_Normal.png');
}
.timelineButton:hover {
  background-image: url('../images/acq0710-00040_Timeline_Hover.png');
}
.timelineButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 26px;
  font-weight: bold;
  top: 0px;
}

.hotspot43 {
  width: 37px;
  height: 37px;
  _background: #ffff0050;
  position: absolute;
}


.ipstratButton {
  width: 1231px;
  height: 157px;
  background-image: url('../images/acq0710-00650_5PhaseIP_Normal.png');
}
.ipstratButton:hover {
  background-image: url('../images/acq0710-00650_5PhaseIP_Hover.png');
}
.ipstratButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 26px;
  font-weight: bold;
  top: 0px;
}


.diginoteButton {
  width: 1231px;
  height: 157px;
  background-image: url('../images/acq0710-00650_Diginote_Normal.png');
}
.diginoteButton:hover {
  background-image: url('../images/acq0710-00650_Diginote_Hover.png');
}
.diginoteButton span {
  position: relative;
  margin-left: 190px;
  width: 500px;
  display: block;
  _background: #ffff0050;
  font-size: 26px;
  font-weight: bold;
  top: 0px;
}

.lightboxCloseButton {
  width: 44px;
  height: 48px;
  background-image: url('../images/btn_overlay_close_reg.png');
}
.lightboxCloseButton:hover {
  background-image: url('../images/btn_overlay_close_hl.png');
}


.teamCharter {
  line-height: 1.4;
  color: #333;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  outline: 1px solid black;
}

.teamCharter .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.teamCharter .full-width {
  grid-column: 1 / -1;
}
.teamCharter .team-member {
  margin-bottom: 10px;
}
.teamCharter .team-role {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 10px;
  margin-bottom: 10px;
}
.teamCharter .grey {
background: #eeeeee;
padding: 4px;
}

.teamCharter .team-members {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 10px;
}
.teamCharter .team-members > div {
  padding: 5px;
}

.cardgameSelect {
  transition: top 1s ease, left 1s ease, transform 0.25s ease;
}

.cardgameSelect[aria-pressed="false"] {
  transform: scale(0.95);
}

.cardgameSelect[aria-pressed="true"] {
  transform: scale(1);
  outline: 5px solid yellow;
}

.cardgameSelect:focus{
 outline: 2px solid yellow;
 filter: drop-shadow(5px 5px 10px #ffff00); 
}

.cardgameDest:focus{
  outline: 2px solid yellow;
 }

 .cardgameSelect:disabled {
  filter: grayscale(100%);
  cursor: default;
  opacity: 0.6; /* Optional: reduces the opacity to further indicate it's disabled */
}

.cardgameDest:disabled {
  filter: grayscale(100%);
  cursor: default;
  opacity: 0.6; /* Optional: reduces the opacity to further indicate it's disabled */
}

.clea-cardContent h1 {
  margin-top: 0px;
}

.popup_header {
  background: #11436F;
}

#videoHolder {
  width: 1387px !important;
  height: 780px !important;
  position: absolute; 
  top: 50% !important;
  left: 50%; 
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px 14px rgba(0, 0, 0, 0.5);
}

#smartboard details summary:focus-visible {

  outline: 2px solid blue;

}

#smartboard details summary:focus-visible {

  outline: 2px solid blue;

}

.cardgameSelect:focus-visible {
  
  outline: 2px solid yellow;

}

#audioTranscript:focus-visible {
  
  outline: 2px solid yellow !important;

}

.coverPage {
  position: absolute; 
  width: 1450px; 
  color: white; 
  font-size: 60px; 
  left: 230px; 
  top: 290px;
}
.coverPage span {
  font-size: 90px; 
  text-transform: uppercase;
  font-weight: bold;
  font-style: italic;
}

.objectiveText {
  color: black;
  width: 778px;
  height: 622px;
  left: 207px;
  top: 104px;
  padding: 30px;
  box-sizing: border-box;
}

.objectiveText H1 {
  color: #385876;
}

.objectiveText li {
  padding: 6px;
}

.objectiveImage {
  position: absolute;
  top: 81px;
  left: 1016px;
}


.whyImportantText {
  color: black;
  width: 918px;
  height: 702px;
  left: 68px;
  top: 54px;
  padding: 30px;
  box-sizing: border-box;
  _background: #ffff0050;
}

.whyImportantText H1 {
  color: #385876;
}

.whyImportantText li {
  padding: 6px;
}

.whyImportantImage {
  position: absolute;
  top: 10px;
  _left: 1007px;
  right: 54px;
}

.lessonCoverTitle {
  position: absolute; 
  width: 730px; 
  color: white; 
  font-size: 40px; 
  left: 590px; 
  top: 280px;
  _background: #ffff0050;
}
.lessonCoverMain {
  font-size: 50px; 
  font-weight: bold;
  left: 590px; 
  top: 340px;
  width: 730px; 
  _background: #ff000050;
}

.inlineImage {
  margin-top: 24px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.doublewideText {
  color: black;
  width: 1738px;
  height: 702px;
  left: 84px;
  top: 54px;
  padding: 30px;
  box-sizing: border-box;
  _background: #ffff0050;
}

.doublewideText H1,
#maintext H1 {
  color: #385876;
}
#maintext h1:first-of-type {
  margin-top: 0px;
}

.doublewideText li {
  padding: 6px;
}

.buttonTitle {
  position: absolute;
  color: white;
  width: 100%;
  height: 80px;
  left: 0px;
  bottom: 0px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

.button-container button {
  position: relative;
}

.teamCard {
  position: absolute;
  width: 228px;
  height: 363px;
}

.teamCard .teamCardName {
  color: white;
  position: absolute;
  top: 15px; 
  left: 18px;
}

.teamCard .teamCardRole {
  color: white;
  position: absolute;
  left: 18px;
  top: 297px;

  width: 175px;
  text-align: center;
  height: 54px;
  padding-left: 8px;
  padding-right: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.checkListTitle {
  position: absolute;
  _background: #ffff0050;
  width: 410px;
  height: 40px;
  text-align: center;
  left: 236px;
  top: 60px;
}

.checkListTable {
  position: absolute;
  color: black;
  top: 120px;
  left: 50px;
  width: 770px;
}
.checkListTable table {
  width: 100%;
}

.checkListTable table ol {
  margin: 0px;
}

.checkListTable table th, table td {
  padding: 0.35em;
  border: 1px solid #999;
}

.teamCardHighlight {
  filter: drop-shadow(0px 0px 5px #000000) drop-shadow(0px 0px 10px #ffff00);
}


.emailIconButton {
  width: 229px;
  height: 207px;
  background-image: url('../images/teams_email_reg.png');
}
.emailIconButton:hover,
.emailIconButton:focus {
  background-image: url('../images/teams_email_hover.png');
}


.cardgameSelect {
  width: 384px;
  height: 99px;
  text-align: center;
  background-image: url('../images/select_btn_normal.png');
}
.cardgameSelect:hover,
.cardgameSelect:focus {
  background-image: url('../images/select_btn_hover.png');
}


.cardgameDest {
  width: 391px;
  height: 392px;
  text-align: center;
  padding: 30px;
  box-sizing: border-box;
  color: black;
  background-image: url('../images/destination_btn_normal.png');
  background-size: cover; /* This will make the background image cover the entire element */
    background-position: center; /* This will center the image */
    background-repeat: no-repeat; /* This prevents the image from repeating */
}
.cardgameDest:hover,
.cardgameDest:focus {
  background-image: url('../images/destination_btn_hover.png');
}


.lessonCompleteTitle {
  position: absolute; 
  width: 1210px; 
  color: white; 
  font-size: 50px; 
  left: 360px; 
  top: 230px;
  font-weight: bold;
  _background: #ffff0050;
}
.lessonCompleteMain {
  font-size: 30px; 
  left: 360px; 
  top: 330px;
  width: 1210px; 
  _background: #ff000050;
}



.flipcard-container {
  display: flex;
  gap: 20px;
}

.flipcard-container .card {
  perspective: 1000px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 332px;
  height: 511px;
}

.flipcard-container .card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flipcard-container .card-front, .flipcard-container .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flipcard-container .card-front {
  background-color: #ffffff;
}

.flipcard-container .card-back {
  background-color: #f1f1f1;
  transform: rotateY(180deg);
}

.flipcard-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flipcard-container h2 {
  position: absolute;
  top: 300px;
  color: white;
  font-size: 1.2rem;
  display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 60px; /* Adjust as needed */
    margin: 0; /* Remove default margin */
    padding-left: 16px;
    padding-right: 16px;
}

.flipcard-container .details {
  position: absolute;
  display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 450px;
  top: 10px;
  color: black;

  font-size: 1rem;
    text-align: center;
    margin: 0; /* Remove default margin */
    padding: 24px;
    flex-direction: column;
}


.flipcard-container .card:active .card-inner {
  transform: rotateY(180deg);
}

.flipcard-container .card-inner.is-flipped {
  transform: rotateY(180deg);
}


.sepFolderButton {
  width: 400px;
  height: 345px;
  background-image: url('../images/sep-folders.png');
}

.endChat {
  display: none;
}


.tempFolderButton {
  width: 389px;
  height: 389px;
  background-image: url('../images/acq2100b-00350_folders_reg.png');
}
.tempFolderButton:hover,
.tempFolderButton:focus {
  background-image: url('../images/acq2100b-00350_folders_hover.png');
}

.tempFolderButton p {
  position: relative;
  color: black;
  text-align: center;
  width: 50%;
  left: 25%;
  font-weight: bold;
  font-size: 20px;
}


.greenFolderButton {
  width: 389px;
  height: 389px;
  background-image: url('../images/acq2100b-00400_folders_reg.png');
}
.greenFolderButton:hover,
.greenFolderButton:focus {
  background-image: url('../images/acq2100b-00400_folders_hover.png');
}

.greenFolderButton p {
  position: relative;
  color: black;
  text-align: center;
  width: 50%;
  left: 25%;
  font-weight: bold;
  font-size: 20px;
}


.aquaFolderButton {
  width: 389px;
  height: 389px;
  background-image: url('../images/acq2100b-00430_folder_reg.png');
}
.aquaFolderButton:hover,
.aquaFolderButton:focus {
  background-image: url('../images/acq2100b-00430_folder_hover.png');
}

.aquaFolderButton p {
  position: relative;
  color: black;
  text-align: center;
  width: 50%;
  left: 25%;
  font-weight: bold;
  font-size: 20px;
}


.blueFolderButton {
  width: 389px;
  height: 389px;
  background-image: url('../images/acq2100b-00450_folder_reg.png');
}
.blueFolderButton:hover,
.blueFolderButton:focus {
  background-image: url('../images/acq2100b-00450_folder_hover.png');
}

.blueFolderButton p {
  position: relative;
  color: black;
  text-align: center;
  width: 50%;
  left: 25%;
  font-weight: bold;
  font-size: 20px;
}


.krbutton-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px;
}

.kroption-button {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  border: none;
  cursor: pointer;
  padding: 10px;
  text-align: left;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
  width: 100%;
}

.kroption-button:hover {
  background-color: #ddd;
}
.kroption-button:disabled:hover {
  background-color: #f7f7f7; /* or any other default color you want for disabled buttons */
 
}

.krcircle {
  width: 50px;
  height: 50px;
  background-image: url('../images/letter_btn_reg.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.krletter {
  color: white;
  font-weight: bold;
  font-size: 24px;
  line-height: 50px;
  text-align: center;
}

.krtext {
  font-size: 18px;
}

.krTitle {
  left: 40px;
  top: 32px;
  color: black;
}

.krHoldernew {
  left: 40px; 
  top: 110px;
  color: black;
  width: 1000px;
}

.krCharacter {
  position: absolute;
  left: 1160px;
  bottom: 36px;
}

.krSubmitButton {
  width: 174px;
  height: 72px;
  display: block;
    margin-left: auto;
    margin-right: auto;
  background-image: url('../images/submit_btn_reg.png');
}
.krSubmitButton:hover,
.krSubmitButton:focus {
  background-image: url('../images/submit_btn_hover.png');
}

.krSubmitButton span {
  color: white;
  font-weight: bold;
  text-align: center;
  display: block;
  width: 100%;
  position: relative;
  top: -6px;
}

.kroption-button img {
  position: absolute;
  right: -18px;
  top: -18px;
  display: none;
}

.kroption-button[aria-pressed="true"] {
  background-color: #B4D8FC; /* Change background color */
}



/* Common styles for all buttons */
.buttonMap {
 
  display: inline-block;
  background-size: cover;
  background-position: center;
}

.buttonMap::before {
  content: attr(data-info);
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 5px 10px;
  background-color: white;
  color: black;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  opacity: 1;
  visibility: visible;
}


/* Specific styles for each button (background images and dimensions) */
.buttonMap--digital-engineering {
    background-image: url('../images/desktop_btn_reg.png');
    width: 141px;
    height: 151px;
}
.buttonMap--digital-engineering:hover,
.buttonMap--digital-engineering:focus {
    background-image: url('../images/desktop_btn_hl.png');
}


.brownFolderButton {
  position: absolute;
  width: 710px;
  height: 551px;
  display: block;
    margin-left: auto;
    margin-right: auto;
  background-image: url('../images/acq2100b-00930_folder_btn_reg.png');
}
.brownFolderButton:hover,
.brownFolderButton:focus {
  background-image: url('../images/acq2100b-00930_folder_btn_hl.png');
}

.brownFolderButton span {
  color: black;
  color: #4C4C4C;
  font-weight: bold;
  text-align: center;
  display: block;
  width: 100%;
  position: relative;
  top: -6px;
}

#scene_popup, #lb_popup {
  border-radius: 12px;
  border: #9e9e9e solid 4px;
  outline: none !important;
}


.halfwideText {
  color: black;
  width: 990px;
  height: 632px;
  left: 464px;
  top: 94px;
  padding: 30px;
  box-sizing: border-box;
  _background: #ffff0050;
}

.halfwideText H1,
#maintext H1 {
  color: #385876;
}


.halfwideText li {
  padding: 6px;
}



.avatarButton {
  width: 408px;
  height: 133px;
  background-image: url('../images/avatar_basetxt_btn_reg.png');
 } 
 .avatarButton:hover {
  background-image: url('../images/avatar_basetxt_btn_hover.png');
 } 
 .avatarButton span {
  width: 100%;
  position: relative;
  top: -4px;
  display: block;
  text-align: center;
  font-size: 20px;
 }

 .playvoiceButton {
  width: 131px;
  height: 131px;
  background-image: url('../images/play_voice_btn_reg.png');
 } 
 .playvoiceButton:hover {
  background-image: url('../images/play_voice_btn_hover.png');
 } 




.simContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  height: 100%;
}
.simColumn {
  flex: 1;
  min-width: 200px;
  _background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;

  height: 740px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    justify-content: flex-start; /* Changed from center to flex-start */
            align-items: stretch; /* Changed from center to stretch */

}
.simColumn:first-child {
  justify-content: center;
}

.simColumn img {
  max-width: 100%;
  max-width: 100%; /* Ensures images are responsive */
  height: auto;
}


.simBubble, .responses {
  width: 800px !important;
  box-sizing: border-box;
  max-width: 100%;
  margin: auto;
  position: unset !important;
}

.responses {
  margin-top: 16px;
}

#responseHolder button {
  margin-bottom: 6px;
  padding: 4px;
}


.defaultTable table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  color: black;
  outline: 4px solid white;
  border: 1px solid black;
}
.defaultTable table th, .defaultTable table td {
  padding: 0.35em;
}
.defaultTable table th {
  text-align: left;
  background-color: #AEBCD4;
}
.defaultTable th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: -internal-center;
}
.defaultTable tr:nth-child(odd) {
background-color: #f2f2f2;
}
.defaultTable tr:nth-child(even) {
  background-color: #ffffff;
  }
.defaultTable table caption {
  text-align: left;
  font-weight: bold;
}

/* content table */
.contentTable {
  background: white;
  border-radius: 27px;
    border: #9e9e9e solid 2px;
    padding: 26px;
}
/* inline table */
.tableInline table {
  width: auto;
  margin: auto;
  font-size: 15px;
}
.tableInline table th, .tableInline table td {
  padding: 0.15em;
}

.scale50 {
  transform: scale(0.5);
}
.scale75 {
  transform: scale(0.75);
}

.contentZoom {
  position: fixed; /* Make it fixed to the viewport */
  top: 50%; /* Center it vertically */
  left: 50%; /* Center it horizontally */
  transform: translate(-50%, -50%); /* Adjust the centering */
  background-color: white; /* Lightbox effect */
  padding: 20px; /* Add some padding */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow */
  z-index: 1000; /* Ensure it’s on top of other elements */
  max-width: 90%; /* Prevent overflow */
  max-height: 90%; /* Prevent overflow */
  overflow: auto; /* Allow scrolling if content overflows */
}

/* cac004 */
.cac1container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
}
.cac1column {
  width: 30%; /* Adjust the width as needed */
  padding: 10px;
  color: black;
}
.cac1image-column {
  width: 40%; /* Adjust the width for the image column */
  padding: 10px;
  text-align: center; /* Centering the image */
}

.cacLinks {
  background: transparent;
  color: blue;            /* The link text is blue */
  text-decoration: underline; /* Links are underlined */
  cursor: pointer; 
  padding: 4px;
} 

/* cac001 */
li {
  margin-bottom: 2px;
}
li > * {
  _display: inline-block;
  vertical-align: top;
  margin: 0;
}
li button {
  text-align: left;
  white-space: normal;
  width: calc(100% - 20px);
}

/* cac002 */
.formula {
  color: black;
  background: #FFC845;
  padding: 24px;
  border-radius: 16px;
  outline: 2px solid black;
  font-size: 2em;
  display: inline-block;
  margin-bottom: 16px;
}
/* Specific adjustment for subscript elements */
li sub {
  vertical-align: sub;
}
.iformula {
  transition: all 0.1s ease;
  cursor: pointer;
  font-size: 1.25em;
}

.xiformula:hover,
.xiformula:focus {
  position: fixed;
  color: black;
  background: #FFC845;
  padding: 24px;
  border-radius: 16px;
  outline: 2px solid black;
  font-size: 1.5em;


}

.sidebox {
  position: absolute;
  left: 600px; 
  top: 200px;
  padding: 20px;
  background: white;
  outline: 2px solid black;
  border-radius: 16px;
}

ol ol {
  list-style-type: lower-alpha;
}

#openMenu {
  display: none;
}

.glossary-container {
  max-width: 800px;
  margin: 0 auto;

  border-radius: 8px;

  padding: 20px;
  font-size: 20px;
}
.glossary-container h1 {
  text-align: center;
  color: #0000A0;
}
.glossary-item {
  margin-bottom: 20px;
}
.term {
  font-size: 1.2em;
  font-weight: bold;
  color: #2c3e50;
}
.definition {
  font-size: 1em;
  margin-top: 5px;
  color: #555;
  line-height: 1.6;
}

.card-name {
  font-size: 1em;
  margin-top: 5px;
  font-style: italic;
  color: black;
  line-height: 1.6;
  color: #0070e0; 
  text-decoration: underline;
  cursor: pointer;
}

.glossary-item:not(:last-child) {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

/* platinum */
.lifeCycle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.35em;


    border: 4px solid white;
}



.lifeCycle table th, .lifeCycle table td {
  padding: 0.75em;
}

.lifeCycle th,
.lifeCycle td {
  border: 2px solid #ffffff;
  text-align: center;
  padding: 8px;
}

.lifeCycle table th {
  background-color: #00243E;
  color: #fff;
  text-align: center;
}

.lifeCycle td {
  background-color: #00243E;
  color: #fff;
}

.lifeCycle table td:first-child {
  text-align: left;
  background-color: #00243E;
  color: #fff;
  padding-left: 10px; /* Optional: Adds some padding for better readability */
}


/* Assuming 'CURRENT' is represented by green */
.lifeCycle .current-cell {
  background-color: #057705;
  color: white;
}

/* Assuming 'EXPIRED' is represented by yellow */
.lifeCycle .expired-cell {
  background-color: #E8C100;
  color: black;
}

/* Assuming 'CANCELED' is represented by red */
.lifeCycle .canceled-cell {
  background-color: #8D1100;
  color: white;
}

.lifeCycle .empty-cell {
  background-color: #00243E;
  color: #00243E;
}

.lifeCycle .test-cell {
  background-color: orange;
}

.lifeCycleButtons {
  position: relative;
  width: 211px;
  height: 53px;
}

.lifeCycleButtonsContainer {
  display: flex;
  justify-content: space-around; /* This will evenly space the buttons */
  width: 1500px;
}

.popupPanel {
  left: 424px; top: 190px; display: none; z-index:50;
}

.popup_header {
  background: none;
  left: 80px;
  top: 10px;
  width: 800px;
}

.popup_content {
  width: 910px;
  color: black;
  top: 68px;
  left: 90px;
  height: auto;
  height: 398px;
  font-size: 1.1em;
}

.popup_footer {
  width: 900px;
  color: black;
  top: 463px;
}


.lifeCycle.blp table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.2em;


    border: 4px solid white;
}

.lifeCycle.blp table td {
  background-color: #c6c6c6;
  color: black;
}
.lifeCycle.blp table th:first-child td,
.lifeCycle.blp table td:first-child {
  background-color: #00243E;
  color: white;
}

table td.definition::before,
table th.definition::before {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 33px;
  height: 32px;
  background-image: url('../images/icon-tabledetails.png');
  background-size: cover;
}

table .definition {
  position: relative;
  cursor: pointer;
}

/* cer table */
.lifeCycle.cer table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0em;


    border: 4px solid white;
}

.lifeCycle.cer table td {
  background-color: #c6c6c6;
  color: black;
  text-align: left;
}
.lifeCycle.cer table th:first-child td,
.lifeCycle.cer table td:first-child {
  background-color: #00243E;
  color: white;
}

td.definition:focus {
  outline: 3px solid yellow;
}

/* prt table */
.lifeCycle.prt table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0em;


    border: 4px solid white;
}

.lifeCycle.prt table td {
  background-color: #c6c6c6;
  color: black;
  text-align: left;
}
.lifeCycle.prt table th:first-child td,
.lifeCycle.prt table td:first-child {
  background-color: #00243E;
  color: white;
}

td.definition:focus {
  outline: 3px solid yellow;
}

.lifeCycle.prt td:first-child {
  width: 60px;
}

.timeNow {
  width: 300px;
  height: 113px;
  background-image: url('../images/BCM_Plat_TimeNow_NRM.png');
 } 
 .timeNow {
  background-image: url('../images/BCM_Plat_TimeNow_HVR.png');
 } 

 .ppbeCycle {
  width: 300px;
  height: 113px;
  background-image: url('../images/BCM_Plat_PPBECy_NRM.png');
 } 
 .ppbeCycle {
  background-image: url('../images/BCM_Plat_PPBECy_HVR.png');
 } 


 .button-indicatorEt::after {
  content: "";
  position: absolute;
  top: -16px;
  right: 0;
  width: 24px; /* Adjust width as needed */
  height: 24px; /* Adjust height as needed */
  background-image: url('../images/button_indicator.png');
  background-size: contain; /* Ensure the image scales properly */
  background-repeat: no-repeat;
}

.button-indicator::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px; /* Adjust width as needed */
  height: 24px; /* Adjust height as needed */
  background-image: url('../images/button_indicator.png');
  background-size: contain; /* Ensure the image scales properly */
  background-repeat: no-repeat;
}

.chartDiamondText {
  width: 150px; 
  height: 92px; 
  text-align: center; 
  top: 45px; 
  color: white; 
  left: 85px; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  font-weight: bold;
}

.chartOtherText {
  width: 198px; height: 67px; box-sizing: border-box; background: #00243F; outline: 4px solid white; color: white; display: flex; justify-content: center; align-items: center;
  font-weight: bold;
}

.buttonReset {
  width: 300px;
  height: 113px;
  background-image: url('../images/BCM_Plat_PracDecis_NRM.png');
 } 
 .buttonReset:hover {
  background-image: url('../images/BCM_Plat_PracDecis_HVR.png');
 } 

 .buttonComplete {
  width: 300px;
  height: 113px;
  background-image: url('../images/BCM_Plat_ShowFull_NRM.png');
 } 
 .buttonComplete:hover {
  background-image: url('../images/BCM_Plat_ShowFull_HVR.png');
 } 

 .button-diamondIndicator {
  width: 324px;
  height: 184px;
 }

 .button-diamondIndicator::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 83px; /* Adjust width as needed */
  height: 24px; /* Adjust height as needed */
  background-image: url('../images/BCM_Plat_FundingDecisionTree_Indicator.png');
  background-size: contain; /* Ensure the image scales properly */
  background-repeat: no-repeat;
}

select option {
  font-size: 16px;  /* Change the font size of the options */
}


.mainMenuIcon {
  position: relative;
  width: 268px; 
  height: 318px;
  margin-bottom: 10px; /* Optional: space between rows */
  box-sizing: border-box; /* Ensures padding is included in the width calculation */
}

.mainMenuIcon span {
  position: absolute;
  display: flex; /* Use Flexbox for centering */
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
  left: 53px;
  top: 215px;

  width: 165px;
  height: 80px;
  text-align: center;
  font-size: 19px;
  box-sizing: border-box; /* Ensures padding is included in the width calculation */
}


#pageTitle h3 {
  margin: 4px;
  font-size: 33px;
 }


 .cardIntro-icon {
  position: absolute;
  left: 55px;
  right: unset;
  color: black;
  top: 30px;
  font-size: 1.5em;
  padding: 0px;
  border-radius: 50%;
  width: 51px;
  height: 50px;
  text-align: center;
  z-index: 20;
  display: inline-block;
  background-image: url("../images/button_intro_notext.png"); /* Correct way to set background image */
  background-size: cover; /* Adjusts the image to cover the element */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  transition: box-shadow 0.3s ease;

  left: 245px;
  top: -80px;
}



.cardIntro-icon::after {
  content: "Review Intro";
  position: absolute;
  top: 100%; /* Place it below the button */
  left: 50%; /* Start positioning from center */
  transform: translateX(-50%); /* Adjust to center text */
  margin-top: 5px; /* Space between button and label */
  font-size: 20px; /* Adjust text size as needed */
  color: #000; /* Text color */
  text-align: center;
  background-color: #fff; /* White background for the label */
  padding: 2px 6px; /* Padding around the text */
  white-space: nowrap; /* Prevent text from wrapping */
  border-radius: 3px; /* Optional: to add rounded corners */
}


#dateDropdown option {
  font-size: 14px; /* Adjust this value as needed */
}


.hintBubble
{
   position: absolute;
   color: black;
   width: auto;
   height: auto;
   padding: 12px;
   line-height: 20px;
   background: #ffffff;
   border-radius: 10px;
    border: #D6D2D2 solid 1px;
}

.hintBubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #ffffff transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -19px;
    left: 20%;
}

.hintBubble:before
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #D6D2D2 transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -20px;
    left: 20%;
}



.hintBubbleTop
{
   position: absolute;
   color: black;
   width: auto;
   height: auto;
   padding: 12px;
   line-height: 20px;
   background: #ffffff;
   border-radius: 10px;
    border: #D6D2D2 solid 1px;
}

.hintBubbleTop:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 20px 20px;
    border-color: #ffffff transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: -19px;
    left: 10%;
}

.hintBubbleTop:before
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 20px 20px;
    border-color: #D6D2D2 transparent;
    display: block;
    width: 0;
    z-index: 0;
    top: -20px;
    left: 10%;
}


.hintBubbleLeft {
  position: absolute;
  color: black;
  width: auto;
  height: auto;
  padding: 12px;
  line-height: 20px;
  background: #ffffff;
  border-radius: 10px;
  border: #D6D2D2 solid 1px;
}

.hintBubbleLeft:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 20px 30px 20px 0; /* Adjust for left-pointing arrow */
  border-color: transparent #ffffff transparent transparent; /* White triangle for background */
  display: block;
  width: 0;
  z-index: 1;
  top: 20%; /* Position the tail vertically */
  left: -29px; /* Position the triangle on the left */
}

.hintBubbleLeft:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 20px 30px 20px 0; /* Adjust for left-pointing arrow */
  border-color: transparent #D6D2D2 transparent transparent; /* Border color for the outline */
  display: block;
  width: 0;
  z-index: 0;
  top: 20%; /* Position the tail vertically */
  left: -30px; /* Position the triangle on the left */
}


#leftTitle h2,
#rightTitle h2 {
  margin: 4px;
}


/* Define the glow and animation effect */
@keyframes attentionAnimation {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  20% {
    box-shadow: 0 0 15px 5px yellow;
  }
  40% {
    transform: scale(1.1) rotate(0deg);
  }
  60% {
    transform: scale(1.1) rotate(-5deg);
  }
  80% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

.attention {
  animation: tada2 2s ease-in-out 2s 1 forwards;
}



@keyframes tada2 {
  from {
    transform: scale3d(1, 1, 1);
    box-shadow: 0 0 15px 5px yellow;
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
    box-shadow: none;
  }
}


.cer ol ul {
  list-style-type: lower-alpha; /* Changes the list items to letters a, b, c, etc. */
  margin-left: 20px; /* Optional: Adjust the indentation */
}

/* Nov-13th CRs */

/* Initialize a counter in the container where .button-indicator elements reside */
#stage {
  counter-reset: button-counter;
}

.number-indicator::after {
  /* Increment the counter */
  counter-increment: button-counter;
  
  /* Display the counter value as content */
  content: counter(button-counter);
  
  /* Style the counter */
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FF9600; /* Background color for visibility */
  color: #000; /* Text color */
  font-weight: bold;
  border-radius: 50%; /* Optional: make it circular */
}

/* Override top position for specific elements */
.number-indicator--adjusted::after {
  top: -20px; /* Adjusted position */
}


.lifeCycle table {
  background: black;
}

.lifeCycle table td:focus-visible {
  outline: 3px solid yellow;
}

.lifeCycle tbody tr td:first-child {
  cursor: pointer;
}

/* Dimmed effect for non-selected rows */
.dimmed {
  opacity: 0.3;
}

/* Styling for the speech bubble */
.speech-bubble {
  position: absolute;
  display: none;
  max-width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  color: black;
  border-radius: 8px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}
.speech-bubble::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 21px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}

.toccButton {
  width: 660px;
  height: 40px;
  _ background: #ffff0050;
}

.cardList ul {
  list-style-type: lower-alpha;
}

#rightPanelText p {
  margin: 8px;
}
#rightPanelText p:first-of-type {
  margin-top: 0;
}



/* Keyboard focs items */
#closePopup:focus-visible,
.toccButton:focus-visible {
  outline: 2px solid yellow;
}


#scene_popupClose {
  width: 44px;
  height: 45px;
  background-image: url('../images/BCM_Plat_TotalOwnershipCostComp_PopClose.png');
}
.homeButton {
  width: 58px;
  height: 58px;
  background-image: url('../images/BCM_UI_BTN_Home.png');
}
.glossaryButton {
  width: 58px;
  height: 58px;
  background-image: url('../images/BCM_UI_BTN_Glossary.png');
}

.labelButton::before {
  content: attr(data-info);
  font-size: 20px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 5px 10px;
  _background-color: white;
  color: black;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
}

.yellowFocus:focus-visible {
  outline: 3px solid yellow;
 }



 .lifeCycleButtonsContainer #buttonCurrent {
  width: 227px;
  height: 53px;
  background-image: url('../images/BCM_ALC_Current_NRM.png');
 } 
 .lifeCycleButtonsContainer #buttonCurrent:hover {
  background-image: url('../images/BCM_ALC_Current_HVR.png');
 } 


 .lifeCycleButtonsContainer #buttonExpired {
  width: 227px;
  height: 53px;
  background-image: url('../images/BCM_ALC_Expired_NRM.png');
 } 
 .lifeCycleButtonsContainer #buttonExpired:hover {
  background-image: url('../images/BCM_ALC_Expired_HVR.png');
 } 


 .lifeCycleButtonsContainer #buttonCanceled {
  width: 227px;
  height: 53px;
  background-image: url('../images/BCM_ALC_Cancelled_NRM.png');
 } 
 .lifeCycleButtonsContainer #buttonCanceled:hover {
  background-image: url('../images/BCM_ALC_Cancelled_HVR.png');
 }


 .lifeCycleButtonsContainer #buttonReset {
  width: 227px;
  height: 53px;
  background-image: url('../images/BCM_ALC_ResetTable_NRM.png');
 } 
 .lifeCycleButtonsContainer #buttonReset:hover {
  background-image: url('../images/BCM_ALC_ResetTable_HVR.png');
 }

 .number-indicator:focus-visible {
  outline: 3px solid yellow;  /* Inner outline (yellow) */
  box-shadow: 0 0 0 5px black;         /* Outer outline (black) */

 }