/* Size of the site name inside the header */
.md-header__title .md-header__topic:first-child .md-ellipsis {
  font-size: 1.1rem;
}

/* Table styles remain unchanged */
.wy-table-responsive table td, .wy-table-responsive table th {
    white-space: normal !important;
}


.wy-table-responsive {
    overflow : visible !important;
}

/* Primary color changes and top band styles */
:root {
    --md-primary-fg-color:        #00afef; /* Primary color is now white */
    --md-primary-fg-color--light: #00afef;
    --md-primary-fg-color--dark:  #00afef;
}

/* HEADER ------------------------------------------------- */

[data-md-color-scheme="default"] .header {
    background-color: #dbf2fa; /* Top band background set to light blue */
    color: #00afef; /* Text in the top band is colored #00afef */
    /*border-bottom: 2px solid #00afef; /* Grey lower delimiting line */
}

[data-md-color-scheme="slate"] .header {
    background-color: #00305C;
    color: #00afef; /* Text in the top band is colored #00afef */
    /*border-bottom: 2px solid #00afef; /* Grey lower delimiting line */
}

/* Light mode: project name in blue */
[data-md-color-scheme="default"] .md-header__title .md-header__topic:first-child .md-ellipsis {
  color: #00afef; /* Your desired blue */
}

/* Dark mode: project name in white */
[data-md-color-scheme="slate"] .md-header__title .md-header__topic:first-child .md-ellipsis {
  color: #ffffff;
}


/* SEARCH BAR ------------------------------------------------------------------*/

/* Change the background color of the search bar */
[data-md-color-scheme="default"] .md-search__input {
    background-color: #ffffff; 
    color: #afafaf; 
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
}

[data-md-color-scheme="slate"] .md-search__input {
    background-color: #424242; 
    color: #afafaf; 
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
}

[data-md-color-scheme="default"] .md-search__input::placeholder {
    color: #00afefe8;
    opacity: 1;
}

[data-md-color-scheme="default"] .md-search__icon {
    color: #00afefe8;
}

/* Change the hover effect for the search bar input */
.md-search__input:hover {
    background-color: #00afefe8; 
    color: #485457;
}

/* Change the background color and text color when focused */
.md-search__input:focus {
    border-color: #004158; 
    background-color: #00afefe8; 
    color: #dbf2fa; 
}

[data-md-color-scheme="default"] .md-search__input:hover::placeholder {
    color: #dbf2fa;
}

[data-md-color-scheme="default"] .md-search__input:hover ~ .md-search__icon,
[data-md-color-scheme="default"] .md-search__input:focus ~ .md-search__icon {
    color: #ffffff;
}

/* NAVBAR ------------------------------------------------- */

[data-md-color-scheme="default"] .md-nav__link--active {
    color: #00afef !important; /* Keep active tab in the same color */
}

/* NAVBAR TABS ------------------------------------------------- */

/* Adjust the font color of the top navigation bar section names */
.md-tabs__link {
    color: #00afef !important; /* Set top navigation link color */
    text-decoration: none; /* Optional: Remove underline */
}

.md-tabs__link:hover {
    color: #00afef !important; /* Optional: Slightly darker blue on hover */
}

/* Optional: Adjust active tab color */
.md-tabs__link--active {
    color: #0283b3 !important; /* Keep active tab in the same color */
    border-bottom: 2px solid #00afef; /* Highlight active tab */
}

/* Add a subtle shadow and border for a clean separation */
[data-md-color-scheme="default"] .md-tabs {
    border-bottom: 1px solid #e0e0e0; /* Thin border to separate the tabs from content */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    background-color: #ffffff; /* Optional: Set a white background if it helps with separation */
}

[data-md-color-scheme="slate"] .md-tabs {
    border-bottom: 1px solid #1e2129; /* Thin border to separate the tabs from content */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    background-color: #1e2129; /* Optional: Set a white background if it helps with separation */
}



/* CARDS IN SOFTWARE TAB ----------------------------------------------*/

/* Container to hold the cards in a flexible grid layout */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the cards */
    margin: 0 auto; /* No margin, compact layout */
    max-width: 1200px; /* Limit the container width */
}

/* Styling for individual cards */
[data-md-color-scheme="default"] .card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Light gray border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 28%; /* Slightly wider for more content space */
    padding: 20px;
    margin: 8px; /* Reduced margin between cards */
    text-align: left; /* Align text to the left */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-md-color-scheme="slate"] .card {
    position: relative;
    background-color: #1e2129;
    border: 1px solid #5b5e61; /* Light gray border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 28%; /* Slightly wider for more content space */
    padding: 20px;
    margin: 8px; /* Reduced margin between cards */
    text-align: left; /* Align text to the left */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px); /* Hover effect, slight lift */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Card title */

[data-md-color-scheme="default"] .card h2 {
    font-size: 18px;
    font-weight: bold;
    color: #00afef; /* Title color remains the same */
    margin-bottom: 12px;
}

[data-md-color-scheme="slate"] .card h2 {
    font-size: 18px;
    font-weight: bold;
    color: #00afef; /* Title color remains the same */
    margin-bottom: 12px;
}

/* Card description */
.card p {
    font-size: 14px;
    margin-bottom: 20px;
}

/* Card link (styled like a button) */
.card a {
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
    background-color: #00afef;
    padding: 12px 20px;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease;
}

.card a:hover {
    background-color: #067abd; /* Darker blue on hover */
    color: #ffffff;
}


.card .top-right-button {
    position: absolute; /* Allows precise positioning */
    top: 10px;
    right: 20px;
    font-size: 0.8rem; /* Optional: make the button smaller */
    padding: 0px 0px; /* Optional: adjust padding */
    line-height: 1.2; /* Optional: improve alignment */
    background-color: transparent;
    border-radius: 4px;
    border: 0px;
    display: inline-block;
    opacity: 1; /* Ensure the button is fully visible */
    visibility: visible; /* Ensure the button is visible */
    transition: opacity 1s ease-out; 
    z-index: 10; /* Ensure it's above other content */
}


.card .top-right-button:hover {
    transform: scale(1.3);
    background-color: transparent;
    transition: transform 0.1s ease;
}

.card .top-right-button:focus {
    background-color: transparent;
}

/* Responsive Design: Adjust card layout for smaller screens */
@media (max-width: 1200px) {
    .card {
        width: 45%; /* Two cards per row on medium screens */
    }
}

@media (max-width: 900px) {
    .card {
        width: 100%; /* One card per row on smaller screens */
    }
}

[data-md-color-scheme="slate"] h1 { color: #b2bec5; }

[data-md-color-scheme="default"] h1 { color: #485457; }


/* LOGO --------------------------------------------------------- */

.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}

.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 2rem;
    width: auto;
}

/* image background base on def or night mode ----------------------------------------------*/

[data-md-color-scheme="default"] .md-images_background_color {
    background-color: #ffffff; /* White background for images in default mode */
}

[data-md-color-scheme="slate"] .md-images_background_color {
    background-color: #272a35; /* Dark background for images in slate mode */
}

/* increase central column size --------------------------------------------*/

@media only screen and (min-width: 70.25em) {
  .md-grid {
  max-width: 86%; /* or 100%, if you want to stretch to full-width */
  }
  /* .md-main__inner {
    max-width: none;
  }
  .md-sidebar--primary {
    left: 0;
  }
  .md-sidebar--secondary {
    right: 0;
    margin-left: 0;
    -webkit-transform: none;
    transform: none;   
  }
} */