body {
    font-family: 'Garamond', serif;
    font-size: 20px; /* Adjust as needed */
}


.banner {
    text-align: center;
    background-color: #f9f9fa;
    margin-bottom: 20px;
}
.banner-header {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(4, 4, 192);
    font-weight: bold;
}

.banner-header img {
    margin-right: 20px;
}




.chain-button {
    display: inline-block;
    border: 1px solid grey; /* Border around each button */
    width: 26px; /* Slightly larger than amino acids for clarity */
    height: 14px; /* Equal height to make it square */
    margin-left: 2px; /* Small spacing between buttons */
    text-align: center; /* Center text horizontally */
    font-size: 10px; /* Adjust font size for smaller buttons */
    cursor: pointer; /* Pointer cursor to indicate it's clickable */
    background-color: white; /* Default background color */
    color: black; /* Default text color */
    border-radius: 3px; /* Optional: Rounded corners */
    transition: background-color 0.3s; /* Smooth hover effect */
}

.chain-button.selected {
    background-color: lightblue; /* Highlight color when selected */
    color: black; /* Text color for selected state */
    border-color: blue; /* Border color for selected state */
}


.viewport-container {
    border: 1px solid #ccc;
    height: 400px;  /* Fixed height to match mutation details */
    margin-top: 0;
}

.pdb-dropdown {
    display: flex;
    position: absolute; /* or fixed */
    top: 0;
    left: 0;
    z-index: 100; /* a higher value to ensure it's on top */
}
#chainButtonsContainerE1 {
    position: absolute;
    top: 0px; /* adjust as needed so it's lower than the dropdown */
    right: 0;
    z-index: 90; /* lower than pdb-dropdown if you want it to appear below it */
}

#chainButtonsContainerE2 {
    position: absolute;
    top: 20px; /* adjust accordingly */
    right: 0;
    z-index: 90;
}

.control-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

/* Arrange the top controls (Zoom In, Up, Zoom Out) */
.top-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}

/* Arrange the directional buttons (Left, Down, Right) in a row without gaps */
.middle-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Define common styles for all buttons */
button {
    margin: 0;
    padding: 5px 15px;  /* Adjust padding for a compact look */
    font-size: 10px;
    cursor: pointer;
    border: 1px solid #000;
    width: 50px;  /* Adjust width as needed */
    height: 20px;
    line-height: 1;  /* Ensure line-height doesn't add extra vertical space */
    vertical-align: middle;  /* Align button vertically with other elements */
    display: inline-block;  /* Keep the button inline with other elements */
}


.scrollable-details {
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    min-height: 400px;
    max-height: 400px; /* Adjust based on preference */
    padding: 20px;
    overflow-y: auto; /* Enables vertical scrolling */
    display: block;
    margin-top: 0;
}



#mutation-info { 
    text-align: left; /* Ensures text is left-aligned */
    margin: 0;        /* Removes extra margins */
    padding: 0;       /* Removes extra padding */
}



/* Style dropdowns: Increase font size & make boxes longer */
.dropdown-container select {
    color: #333; /* Darker text color for better readability */
    font-size: 16px; /* Increase font size */
    width: 200px; /* Increase width */
    height: 45px; /* Increase height */
    padding: 5px 10px; /* Better spacing inside */
    border-radius: 5px; /* Slightly rounded corners for modern look */
}

/* Space between dropdowns */
.dropdown-container select:not(:last-child) {
    margin-right: 15px; /* Increases spacing between dropdowns */
}

/* Styles only for the protein dropdown */
#protein {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100px;
  }

#virus {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 300px;
  }


#domain {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
  }

#impact {
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
  }

/* Ensure both boxes have the same height */
.row.mt-4 {
    display: flex;
    align-items: stretch; /* Makes both columns equal in height */
}

/* Set a minimum height so they always align */
.placeholder-box {
    min-height: 30px; /* Adjust as needed */
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center;
    width: 100%;
}


/* For the mutation info */
.mutation-summary-row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.mutation-info-text {
  flex: 1;
  font-size: 20px;
  line-height: 1.5;
}

.mutation-info-chart {
  flex: 3;
  text-align: center;
}

.mutation-info-placeholder {
    flex : 2;
}

.mutation-info-chart img {
  max-height: 20vh;
}

.mutation-details-section {
  font-size: 20px;
  line-height: 1.6;
}




.full-height-row {
    min-height: calc(50vh); /* adjust 150px based on your header/banner height */
}