/* New class for the main title to make it pop */
.title-heading-main {
    font-family: 'Arial Black', 'Avant Garde';
    font-size: 5vh; /* Larger font size for emphasis */
    color: #0056b3 !important; /* A vibrant blue color */
    font-weight: bold;
    position: relative;
    padding: 5px 0; /* Padding for spacing */
}

/* Class for the emoji to keep its original color */
.title-emoji {
    font-size: 5vh; /* Match the font size of the main title */
    vertical-align: middle; /* Align the emoji with the text */
}

.title-heading {
    font-family: 'Arial Black', 'Avant Garde';
    font-size: 18pt;
    color: #333;
    font-weight: bold;
    position: relative;
}

.animated-border {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 50, 0.15));
    border-bottom: 4px solid black;
    margin-top: -40px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 0px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    position: relative;
    /* Needed for positioning the pseudo-element */
    display: flex;
    flex-direction: column;
    /* Stack children vertically */
    justify-content: space-between;
    /* Space out items */
    text-align: center;
}

.header-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
}

.header-logo {
    height: 150px;
    animation: fadeIn 2s ease-in-out;
    margin-bottom: 10px; /* Space between the image and the title */
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background-color: #4c75a0;
    margin-top: -20px;
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 8px 8px 0 0;
    border-bottom: 4px black solid;
    padding: 8px;
    color: white;
    font-weight: 800;
}

.card-hover-border {
    transition: border 0.3s ease;
}

.card-hover-border-obs:hover {
    border: 2px solid darkred;
}

.textarea-large {
    height: 200px; /* or any desired height */
    resize: vertical; /* Allows users to resize the textarea vertically if needed */
}

/* Basic styling for dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    min-width: 150px;
}

.dropdown-content a {
    display: block;
    padding: 8px;
    text-decoration: none;
    color: black;
    cursor: pointer;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.uk-badge-success {
    box-sizing: border-box;
    min-width: 25px;
    height: 25px;
    padding: 5px 5px;
    border-radius: 5px;
    vertical-align: middle;
    background: #32d296;
    color: #fff!important;
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    line-height: 0;
    letter-spacing: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
}

.uk-badge-danger {
    box-sizing: border-box;
    min-width: 25px;
    height: 25px;
    padding: 5px 5px;
    border-radius: 5px;
    vertical-align: middle;
    background: #f0506e;
    color: #fff!important;
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    line-height: 0;
    letter-spacing: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
}