header{
    padding-top: 0.75em;
    padding-bottom: 0.75em;
}
.container {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

h2 {
    margin-top: 0.5rem;
}

p {
    margin-top: 1em;
    margin-bottom: 0;
    text-align: justify;
}

.home {
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

a {
    color: #428bca;
    text-decoration: none
}

a:hover,a:focus {
    color: #2a6496;
    text-decoration: none
}

a:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}


.purple-link {
    color: #3084c5;
}

.purple-link:hover {
    color: #6fadde;
}

.nav-link:hover {
    text-decoration: none;
    font-weight: bold;
}

.key-concept {
    font-weight: 600;
}

strong {
    font-weight: 800;
    font-size: 20px;
}

.btn-primary {
    --bs-btn-bg: #3084c5;
    --bs-btn-border-color: black;
    --bs-btn-hover-bg: #6fadde;
    --bs-btn-hover-border-color: black;
}

.highlighted-row {
    --bs-table-bg: #ffff99;
    font-weight: bold;
}

.clicked-row {
    --bs-table-bg: #bfd4cb;
    font-weight: bold;
}

/* click state */
.clicked-residue-row {
  /* colour when *not* hovered */
  --bs-table-bg:        #bfd4cb;
  /* colour when hovered */
  --bs-table-hover-bg:  #bfd4cb;
  font-weight: bold;
}


.scroll-y{
    overflow-y: scroll;
}

.centered-items {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center child elements horizontally */
    align-items: center;  /* Center child elements vertically */
}

.narrow-items, .wide-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* EDITING THE BOOTSTRAP TABLE CSS CLASSES */

.table{
    --bs-table-hover-bg: #ffff99;
}

.table-hover > tbody > tr:hover {
    font-weight: bold;
}

.table-bordered th,
.table-bordered td {
    border: 2px solid black !important;
    text-align: center;
}

.table .custom-row td {
    color: inherit;  /* This makes the table cell text color inherit the row's text color */
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1; 
}

.sticky-header th::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;  /* Shifts the pseudo-element outside of the th */
    height: 3px;
    background-color: black;  /* Border color */
    z-index: 2;
    box-sizing: border-box;  /* Ensures that height is consistent */
}

.sticky-header th::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;  /* Shifts the pseudo-element outside of the th */
    height: 2px;
    background-color: black;  /* Border color */
    z-index: 2;
    box-sizing: border-box;  /* Ensures that height is consistent */
}

.featurette-divider {
    border-top: 3px solid #3084c5;
}

.box {
    border: 5px solid #3084c5;
    border-radius: 5px;
    padding: 0px;
}

.box-header {
    margin-left: 0;
    margin-right: 0;
}

.applet-border {
    width: 99.5% !important; 
    height: 99.5% !important;
    max-width: 700px;
    max-height: 700px;
    position: relative;
    box-sizing: border-box;
}

.navbar-brand {
    margin-right: 0;
}

li {
    text-align: justify;
}

img.responsive {
    max-width: 100%;
    max-height: 60px;
    height: auto;
    width: auto;
}

img.responsive-logo {
    max-width: 100%;
    max-height: 80px;
    height: auto;
    width: auto;
}

.container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;

}

.custom-padding {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5)
}

/* For vertical scrollbar */
.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #3084c5;
    border-radius: 10px;
    border: 1px solid black;
}

.table-responsive {
    margin-right: 8px;
    margin-bottom: 8px;
}

@font-face {
	font-family: 'PT Root UI';
	src: 
		url('../fonts/pt-root-ui_regular.woff2') format('woff2'),
		url('../fonts/pt-root-ui_regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PT Root UI';
	src: 
		url('../fonts/pt-root-ui_bold.woff2') format('woff2'),
		url('../fonts/pt-root-ui_bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

.uniwidthsans {
    font-family: 'PT Root UI', sans-serif;
}

.column:not(:last-child) {
    position: relative;
}

.column:nth-child(1)::before {
    content: "";
    height: 100%;
    background-color: transparent;
    border-right: 2px dashed #3084c5; /* or any color of your choice */
    position: absolute;
    left: -5%;
    bottom: 0;
    top: 0;
} 

.column:nth-child(1)::after {
    content: "";
    height: 100%;
    background-color: transparent;
    border-right: 2px dashed #3084c5; /* or any color of your choice */
    position: absolute;
    right: -5%;
    bottom: 0;
    top: 0;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    color: #734A98 !important;
} 

/* Custom dropdown styling */

.dropup {
    position: relative;
    display: inline-block;
}

.dropup-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    bottom: 100%;
    z-index: 1;
    overflow-y: auto;
    max-height: 175px; /* Adjust based on your requirement */
    box-shadow: 5px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px; /* Optional: Adds rounded corners */
    outline: 1px solid black;
    font-size: 14px;
}

.dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    outline: 0.5px solid black;
}

.dropup-content a:hover {background-color: #f1f1f1}

.dropup-button {
    background-color:#f1f1f1;
    color: black;
    padding: 10px;
    font-size: 16px;
    border: 1px solid black;
    cursor: pointer;
    border-radius: 5px; /* Optional: Adds rounded corners */
}

input[type="range"] {
    -webkit-appearance: none;
    width: 200px;
    height: 8px;
    background: white;
    outline: none;
    border: 1px solid black; /* Black outline around the slider */
    border-radius: 5px;
}

/* Style for the slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 3px;
    height: 20px;
    background-color: black; /* Thumb color */
    border: 1px solid black; /* Black outline around the thumb */
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #3084c5;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    background-color: #3084c5;
    border: 2px solid black;
    border-radius: 50%;
    cursor: pointer;
}

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* Optional: adds a semi-transparent white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Lower z-index to keep it under the border */
    box-sizing: border-box;
}

.custom-spinner {
    animation-duration: 1.5s; /* Slows down the rotation */
}

.spinner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Lower z-index to keep it under the border */
    box-sizing: border-box;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8); /* 80% opacity white */
    z-index: 5; /* Below the spinner but above the canvas */
    display: flex; /* Initially hidden */
}

.custom-close {
    font-weight: bold; /* Make the X bold */
    font-size: 38px; /* Increase size of the X */
    color: black; /* Set X color */
    background: none; /* Remove default button background */
    border: none; /* Remove default button border */
    cursor: pointer; /* Add pointer cursor on hover */
    line-height: 1; /* Center-align the button text */
    padding: 0; /* Remove default padding */
}

.custom-close:hover {
    color: black; /* Optional: Change color on hover */
}

.alert-custom {
    display: flex; /* Make the alert content a flex container */
    align-items: center; /* Align items vertically to center */
    justify-content: flex-start; /* Align content to the start */
    gap: 10px; /* Add spacing between the close button and text */
}