/******* Bootstrap Theming ********/
.local {
    --ktzh-darkblue: #0070b4;
    --ktzh-lightgrey: #e3e3e3;
    --font-family-sans-serif: "Helvetica W01 Roman", Helvetica, Arial, sans-serif;
    --headings-font-weight: bold;
    --enable-responsive-font-sizes: true;
    --border-radius: 5px;
    --btn-border-radius: 30px;
}


/*
 *   _______                                _______  ______ ______ 
 *  (_______)             _                (_______)/ _____) _____)
 *  _       _   _  ___ _| |_ ___  ____     _      ( (____( (____  
 * | |     | | | |/___|_   _) _ \|    \   | |      \____ \\____ \ 
 * | |_____| |_| |___ | | || |_| | | | |  | |_____ _____) )____) )
 * \______)____/(___/   \__)___/|_|_|_|   \______|______(______/ 
 *
 */
.main {
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #f9f9f9;
}

#geotop {
    /**background-color: var(--ktzh-darkblue);**/
    background-color: #0070b4;
}

/* Hover effect for the login link in the geotop. */
.geotop-login-link {
    color: #ffffff !important;
    transition: color 0.15s ease-in-out;
}

.geotop-login-link:hover {
    color: #e3e3e3 !important;
}

/* Hover effect for the menu links in the blue bar. */
#geotop .navbar-nav .nav-link {
    color: #ffffff !important;
    transition: color 0.15s ease-in-out;
}

#geotop .navbar-nav .nav-link:hover,
#geotop .navbar-nav .nav-link:focus {
    color: #e3e3e3 !important;
}

/* Prevents the active link from remaining static. */
#geotop .navbar-nav .nav-link.active {
    color: #ffffff !important;
}

#geotop .navbar-nav .nav-link.active:hover {
    color: #e3e3e3 !important;
}


.field_with_errors input,
.field_with_errors textarea,
.field_with_errors select {
    border-color: red;
    border-width: thick;
}


/*
 * Table as div.
 */
#container {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid green;
}

.element {
    flex: 0 0 25%;
    border-bottom: 1px solid rgb(233, 229, 229);
    padding-top: 5px;
    padding-bottom: 5px;
}

.element label {
    font-weight: bold;
}

/* end: tables as div */



/*
 *  ______       _____                  __________                       _______________          _____ 
 *  __    |_________(_)______ _________ __  /___(_)____________     ________  __/__  __/____________  /_
 * __  /| |_  __ \_  /__  __ `__ \  __ `/  __/_  /_  __ \_  __ \    _  _ \_  /_ __  /_ _  _ \  ___/  __/
 * _  ___ |  / / /  / _  / / / / / /_/ // /_ _  / / /_/ /  / / /    /  __/  __/ _  __/ /  __/ /__ / /_  
 * /_/  |_/_/ /_//_/  /_/ /_/ /_/\__,_/ \__/ /_/  \____//_/ /_/     \___//_/    /_/    \___/\___/ \__/  
 *
 */

@keyframes highlight-fade {
    0% {
        /* Sets Bootstrap's internal table background variable to your blue. */
        --bs-table-bg-type: #0070b4 !important;
        background-color: #0070b4 !important;
        /* Temporarily disables Bootstrap's box shadow, which would otherwise cover the color. */
        box-shadow: inset 0 0 0 9999px #0070b4 !important;
        color: white;
        /* Set the text color to white so that the dark blue is legible. */
    }

    100% {
        /* Reset to the default table look. */
        background-color: transparent;
        box-shadow: none;
    }
}

/* The animation MUST directly affect the cells (td), because Bootstrap colors each cell individually. */
.newly-created-row td {
    animation: highlight-fade 2.5s ease-out forwards;
}

/* Slows down the fold-in and unfold animation for the lookup input form. */
#newCollapse.collapsing {
    transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease-in-out !important;
}

/* Safety net: If Bootstrap stubbornly switches classes, we force a soft fade-out via opacity. */
#newCollapse:not(.show) {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}







/*************************************/

@media screen and (max-width: 1680px) {}

@media screen and (max-width: 768px) {}

/********** Custom Tooltip & Popover CSS ************/
.info-tooltip {
    --bs-tooltip-bg: #0070b4;
    --bs-tooltip-color: #e3e3e3;
}

.warning-tooltip {
    --bs-tooltip-bg: var(--bs-yellow);
    --bs-tooltip-color: var(--bs-dark);
}

.error-tooltip {
    --bs-tooltip-bg: var(--bs-red);
    --bs-tooltip-color: #e3e3e3;
}

.info-popover {
    --bs-popover-max-width: 350px;
    --bs-popover-header-bg: #0070b4;
    --bs-popover-header-color: var(--bs-white);
}

/***************************************************/