/* General Styles */
a {
    color: #0175ae;
}

/* Version Button */
#version-display {
    background-color: #0366A1;
    color: white;
    box-shadow: 5px 12px 12px #2e6da4;
    text-align: center;
    display: inline;
    font-weight: bolder;
    padding: 15px;
    position: fixed;
    top: 40px;
    left: -5px;
    z-index: 3000;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Container Width Adjustment */
@media (min-width: 1920px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1860px;
    }
}

/* Button Styles */
.btn-primary, .btn-secondary {
    color: #fff;
    background-color: #0366A1;
    border-color: #0366A1;
}

.btn-outline-primary {
    color: #fff;
    border-color: #0366A1;
}

/* Background Color */
.bg-primary {
    background-color: #0175ae !important;
}

/* Table Style */
.table {
    border-top: 1px solid rgba(0,0,0,.125);
}

/* Navbar Style */
.navbar {
    background-color: #0175ae;
}

/* Dropdown Menu Styles */
.dropdown-menu a.nav-link {
    color: #0175ae !important;
    border-color: #0175ae;
}

.dropdown-menu a.nav-link:hover {
    color: #013149 !important;
    border-color: #0175ae;
}

/* Card Styles */
.card.fixed-size-card {
    height: 250px; /* Fixed height */
    width: 280px;  /* Fixed width */
    display: flex;
    flex-direction: column;
    display: inline-block; /* Ensures the card doesn't expand to fill the container */
}

/* .card-img-top {
    height: 50px; /* Max height for image 
    width: 100%; /* Full width of card 
    object-fit: scale-down;
} */

.card-img-top {
    height: 40px; /* Fixed height */
    width: auto; /* Width adjusts proportionally */
    object-fit: cover; /* Ensures the image covers the area */
    display: flex; /* Ensures the image is a block-level element */
    margin: 0 auto; /* Centers the image in the container */
    order: 1; /* Ensures the image is positioned at the end */
}


.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Centers content vertically */
    text-align: center; /* Centers text horizontally */
}

.card-title, .card-text, .card-links {
    overflow: hidden; 
    text-overflow: ellipsis;
    /*order: -1;  Positions these elements above the image */
}


.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Adjust if needed */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Optional */
    line-height: 1.6em; /* Your line height */
    height: 3.2em; /* Height for three lines */
    margin-bottom: 0.5em; /* Adjust as needed */
    order: -1;
}



.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Shows one line of text */
    -webkit-box-orient: vertical;
    max-height: 1.8em; /* Height for one line */
}

.card-link {
    margin: 0 5px; /* Horizontal space between links */
}

.card-links {
    margin-top: auto; /* Pushes links to the bottom */
    justify-content: space-between; /* Evenly distributes links */
}
.bom-footer {
    background-color: #0175ae !important;
    color: white;
}

/* Custom styles for Bootstrap alerts */
.alert {
    position: fixed;
    top: 60px; /* Adjust based on your top menu height */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* Add animation for better visibility */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -30px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.alert {
    animation: fadeInDown 0.5s ease-out;
}
.close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
}
.header.column.extra.icon::before {
    content: "\F26E"; /* Unicode for bi-check-square */
    font-family: "Bootstrap-icons";
}
body .messages .success,
#content .messages .success {
    display: inline-block;
    max-width: 100%;
    text-align: left;
    padding: 10px 15px;
    margin: 5px 0;
    border-radius: 4px;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

#messages {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    min-width: 300px;
    max-width: 80%;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 15px 40px 15px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#messages .close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}