/* Apply Roboto Condensed for the menu */
nav ul li a {
    font-family: 'Roboto Condensed', sans-serif;
}

/* Apply Roboto for the content text */
body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

nav {
    background: transparent;
    color: #315482; /*#1a237e;*/
}

nav ul a {
    color: #315482;
    font-weight: bold;
}

.dropdown-content li a {
    color: #315482;
}

i.material-icons {
    color: #315482;
}

/* pushes icon to the right */
.collapsible-header .chevron {
    margin-left: auto;
}

/* rotate chevron on open */
.collapsible > li.active .collapsible-header .chevron {
    transform: rotate(90deg);
    transition: transform 0.2s ease-in-out;
}

.collection-item a {
    display: flex;
    align-items: center;
}

.collection-item a i.material-icons {
    margin-right: 8px; /* spacing before text */
}

/* Nested levels for tree node rendering */
.level-0 {
    margin-left: 0;
}
.level-1 {
    margin-left: 1.5em;
}
.level-2 {
    margin-left: 1.8em;
}
.level-3 {
    margin-left: 2.5em;
}

/* Add a Font Awesome angle down icon before dropdown trigger text */
.dropdown-trigger::after {
    content: "\f107"; /* Unicode for the Font Awesome "angle-down" icon */
    font-family: 'Font Awesome 5 Free'; /* Ensure the correct font is used */
    font-weight: 900; /* Font Awesome uses font-weight for icons */
    margin-left: 4px; /* Add space between icon and text */
}

.brand-logo img {
    height: 48px;
    margin: 8px;
}

/* Full-width cover container */
.cover-container {
    position: relative;  /* Needed for positioning the centered content */
    max-width: 100%;
    width: 100%;
    height: 500px;  /* Example height */
    background-image: url('/static/media/YardMateBackground.jpg');  /* Background image */
    background-size: cover;  /* Ensures the image covers the entire area */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container {
    position: relative;
    max-width: 100%;
    height: 90%;
}

/* Centered image */
#helmImage {
    height: 90%;
}

/* The main image */
#service-image {
    width: auto;
    display: block;
    height: 90%;
}

/* Canvas for drawing the red circles */
#overlay-canvas {
    position: absolute;
    height: 90%;
    top: 0;
    left: 0;
    pointer-events: none; /* Allows clicks to pass through the canvas */
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    font-weight: bold;
}

.chapter {
    margin-top: 10px;
}

/*.col {*/
/*    border: 1px solid red;*/
/*}*/

.centered-image {
    max-width: 200px;
    border-radius: 50%;  /* Optional styling to make it round */
}

/* News styling */
.news-nav-date {
    border-width: 1px;
    border-color: #c0c0c0;
    border-style: none none solid none;
    margin-bottom: 10px;
}

.news-nav.active {
    font-weight: bold;
    border-width: 5px;
    border-color: #0041e6;
    border-style: none none none solid;
    padding-left: 10px;
}

.latest-news {
    background-image: url('/static/media/NewsWebBackgr3.png');
    background-repeat: repeat-y;
    background-size: cover;
    padding: 20px;
}

.latest-news h1,h2,h3,h4,h5,h6 {
    color: #1a237e;
}

.latest-news .row {
    margin: 0;
}

/* Make card background transparent and remove borders */
.latest-news .card {
    background-color: transparent;
    border: none;
    box-shadow: none; /* Remove the shadow if needed */
}

/* Style the card title */
.latest-news .card-title a {
    color: #000000; /* Example color for the title link */
    font-size: 0.8em; /* Custom font size */
    font-weight: bold; /* Bold text */
    text-decoration: none; /* Remove underline from link */
}

/* Change title color on hover */
.latest-news .card-title a:hover {
    color: #e65100; /* Darker color when hovering */
}

/* Style the published date */
.latest-news .card-title + .card-title {
    font-size: 14px;
    color: #000000; /* Example color for the published date */
}

/* Style the content */
.latest-news .card-content {
    padding: 0; /* Remove padding */
}

.latest-news .card-content p {
    color: #000000; /* Example content text color (white) */
    font-size: 16px;
}

/* Style the 'Read more' link */
.latest-news .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {

/*.latest-news .card-action a {*/
    color: #1a237e; /* Link color */
    text-decoration: none;
    font-weight: bold;
}

.latest-news .card-action a:hover {
    color: #e65100; /* Darker color on hover */
}

.more-news-link {
    font-weight: bold;
}

/* Page images */
.page img {
    /*float: right;*/
    display: block;
    margin: 10px 0; /* Optional: Adds some space between images */
    max-width: 100%; /* Ensure the images don't overflow the container */
}

/* List styling for the pages */
.page ul:not(.browser-default) {
    padding-left: 30px;
    list-style-type: disc;
}

.page ul:not(.browser-default)>li {
    list-style-type: disc;
}

.page ul li {
    list-style-type: disc;
}

.page ul:not(.browser-default)>li {
    margin-left: 5px;
}

.page ul:not(.browser-default) li.ql-indent-1 {
    margin-left: 30px; /* Indent level 1 */
}

.page ul:not(.browser-default) li.ql-indent-2 {
    margin-left: 60px; /* Indent level 2 */
}

.page ul:not(.browser-default) li.ql-indent-3 {
    margin-left: 80px; /* Indent level 3 */
}

.page ul:not(.browser-default) li.ql-indent-4 {
    margin-left: 100px; /* Indent level 4 */
}

.page {
    color: #676767;
}

.page h1,h2,h3,h4,h5,h6 {
    color: #676767;
}

/* Member page */
.member .col-end {
    padding-left: 30px;
}

.member img.logo {
    object-fit: scale-down;
    display: unset;
    margin: 80px auto;

    width: 256px;
    height: 256px;

    border: 1px solid #1a237e;
    border-radius: 50%;
}

/* Form page styling */
.form-container {
    margin-left: 20px;
    margin-right: 20px;
}

/* Back Arrow */
.back-arrow {
    margin-top: 20px;
    margin-bottom: 20px;
}

/** Material Search Form **/
.searchFormContainer .row, .searchFormContainer .col, .searchFormContainer form  {
    /*padding-top: 0;*/
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.searchFormContainer form  {
    border: 1px solid #ddd;
    padding-top: 12px; !important;
}

.searchFormContainer .input-field .buttons {
    position: absolute;
    top: 0;
    right: 5px;
    margin-top: 10px; /* Adjust to align with the input */
}

.searchFormContainer input {
    border: none;
}

.searchFormContainer #searchFormClearButton {
    background-color: transparent;
}

/* Members Search navigation */
.search-navigation {
    border: 1px solid #ddd;
    padding: 0;
}

.search-navigation tr, .search-navigation td, .search-navigation .row, .search-navigation .col, .search-navigation form {
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.search-navigation .input-field .buttons {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 10px; /* Adjust to align with the input */
}

#clearSearch {
    background-color: transparent;
}

#searchInput {
    border: none;
}

/* Alphabet navigation */
.alphabet-navigation {
}

.alphabet-navigation td {
    border: 1px solid #ddd;
    text-align: center;
}

.alphabet-navigation a {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

.alphabet-navigation .disabled {
    color: #999999;
}

/* Members lis table */
.members-list {
    border: 1px solid #ddd;
}

.members-list thead th {
    background-color: #f1f1f1;
}

.members-list .letter-group {
    font-weight: bold;
    font-size: 1.2em;
    background-color: #f1f1f1;
    padding: 0 0 0 10px;
}

.members-list a {
    color: #000000;
    text-decoration: none;
}

span.active {
    font-weight: bold;
    color: green; /* Active link color */
}

span.inactive {
    color: #ec0808; /* Inactive link color */
}

span.active::before {
    content: "✔ "; /* Unicode checkmark */
    color: green;
    font-weight: bold;
}

span.inactive::before {
    content: "✖ "; /* Unicode cross mark */
    color: #ec0808;
    font-weight: bold;
}

/*
 * Marketplace Navigation
 */

 /* Chevron alignment */
 .collapsible-header .chevron {
     margin-left: auto;
     transition: transform 0.2s ease-in-out;
 }

/* Indent inner collection list */
.collapsible-body .collection {
    margin: 0;
    border: none;
    box-shadow: none;
}

.collapsible-body .collection-item {
    padding-left: 20px;
}

/*
 * Marketplace MY-RFQ
 */

/* Make RFQ name links look like normal text links */
.rfq-link {
    color: #315482;
}
.rfq-link:hover {
    text-decoration: underline;
}

/* Small tweak so action icons align nicely */
#my-rfqs-table td .material-icons {
    vertical-align: middle;
}

/* Base chip adjustments */
.chip {
    font-weight: 500;
    color: white !important;
    padding: 0 12px;
}

/* Status: Draft (0) */
.status-draft {
    background-color: #9e9e9e !important; /* Grey */
}

/* Status: Open (1) */
.status-open {
    background-color: #43a047 !important; /* Green darken-1 */
}

/* Status: Closed (2) */
.status-closed {
    background-color: #607d8b !important; /* Blue-grey */
}

/* Status: Expired (3) */
.status-expired {
    background-color: #fb8c00 !important; /* Orange darken-1 */
}

/* Status: Cancelled (4) */
.status-cancelled {
    background-color: #e53935 !important; /* Red darken-1 */
}

/* Status: Awarded (5) */
.status-awarded {
    background-color: #8e24aa !important; /* Purple darken-1 */
}