/*
 * This file is, in principle, clean. The other css files contain
   stuff that is unused.
*/


.content-title {
    font-size: 2em
}

/* Navigation bars */

.nav-link-top,
.nav-link-bottom {

    color: var(--main-contra-color);
}

.nav-link-top:hover,
.nav-link-bottom:hover {
    color: var(--link-active-contra-color);
    text-decoration: none;
}

.side-nav-box a:hover {
    color: var(--link-active-contra-color);
    text-decoration: none;
}

.nav-box-current a:hover {
    color: var(--main-color);
    text-decoration: none;
}

.nav-box-current {
    background-color: var(--lightened-main-color);
}

.side-nav-box {
    color: var(--muted-on-main-color);
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Top navigation bar */
.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
    background-color: var(--main-color);
}

/* Left navigation bar */
.left-nav {
    background-color: var(--main-color);
}

.left-nav a {
    color: var(--main-contra-color);
}

.site-title {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 2.25rem;
    color: var(--main-color);
}

.site-title:hover {
    text-decoration: none;
}




/*
 * Footer
 */
.blog-footer {
    /* padding: 0.5rem 0; */
    color: #999;
    text-align: center;
    background-color: var(--main-color);
    /* border-top: .05rem solid #e5e5e5; */
}

.blog-footer p:last-child {
    margin-bottom: 0;
}


/* Main content */

.text-content {
    text-align: justify;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: justify;
    text-indent: 1em;
}

li {
    text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    color: var(--main-color);
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.4em;
}

h4 {
    font-size: 1.3em;
    font-style: italic;
}

h5 {
    font-size: 1.1em;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-active-color);
}


/* We are currently using colored-div and colored-text-box. The former has no margins and may be useful for tables.  */

.colored-div {
    background-color: var(--main-color);
    color: var(--main-contra-color);
}

.colored-div h1,
.colored-div h2,
.colored-div h3,
.colored-div h4,
.colored-div h5,
.colored-div h6,
.colored-div h7 {
    color: var(--main-contra-color);
}

.colored-div a {
    color: var(--link-contra-color);
}

.colored-text-box {
    background-color: var(--main-color);
    margin-left: -15px;
    color: var(--main-contra-color);

    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
}

.colored-text-box h1,
.colored-text-box h2,
.colored-text-box h3,
.colored-text-box h4,
.colored-text-box h5,
.colored-text-box h6,
.colored-text-box h7 {
    color: var(--main-contra-color);
}

.colored-text-box .text-muted {
    color: var(--muted-on-main-color) !important;
}

.colored-text-box a {
    color: var(--link-contra-color);
}

.colored-text-box strong {
    color: var(--strong-on-main-color);
}

.colored-text-box hr {
    border-top: 1px solid var(--muted-on-main-color);
    color: var(--main-contra-color);
}


.submit-button {
    background-color: var(--main-color);
    color: var(--main-contra-color);
    border: 1px solid var(--main-contra-color);
    padding: 0.5em;
    cursor: pointer;
}

.submit-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        }

        

/* Logout button styling */
.logout-form {
    display: inline;
}

.logout-btn {
    /* padding: 0.5rem; */
    /* color: var(--link-color); */
    text-decoration: none;
    border: none;
    background: transparent;        
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
}

.logout-btn:hover {
    text-decoration: underline;
}


.video-div_16_9 {
    position: relative;
    padding-top: 56.25%;
    background: var(--main-color);
}

.video-section {
    padding-top: 30px;
}


/* Tables (e.g. in Positions) */

.std-table {
    border: 1px solid var(--main-color);
}

.std-table td {
    border: 1px solid var(--main-color);
    padding: 0.3em;
}

label {
    color: var(--main-color);
    font-weight: bold;
      margin-bottom: 0.25rem;
}

        .required-field::after {
            content: " *";
            color: #dc3545;
            font-weight: bold;
}

/* table */

.default-table,
.default-table th,
.default-table td {
    border: 3px solid var(--main-color);
    border-collapse: collapse;
    padding: .4em;
    /*border-radius:6px;*/
}


/* used?*/
.text-div {
    padding-left: 200px;
    border-top: .05rem solid #e5e5e5;

}

/* Autocomplete. E.g. BibMan ref. search */

.autocomplete-items {
    position: relative;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 999;
    /*position the autocomplete items to be the same width as the container:*/
    /*top: 100%;*/
    width: auto;
    border: 1px solid black;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}



/* used?*/
.spaced-list {
    line-height: 200%;
}

/* -------------------------------------------------------------------------- */
/* We make the styles for navigation buttons more general than above --> adopt
them everywhere */
.nav-bar {
    background-color: var(--main-color);
    color: var(--main-contra-color);
    overflow-y: scroll
}

/* Hide scrollbar for Chrome, Safari, and Edge */
.nav-bar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
.nav-bar {
    scrollbar-width: none;
}

.nav-button {
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}

/* to be used together with nav-button if the button is selected*/
.nav-button-selected {
    background-color: var(--lightened-main-color);
    color: var(--lightened-main-contra-color);
}

.nav-button:hover {
    color: var(--muted-on-main-color);
}

/* Class to prevent that floats stick out of their parent divs.*/
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.float-figure {
    float: right;
    /* Floats the image and its caption to the left */
    margin: 10px;
    /* Adds spacing around the figure */
}

.float-figure img {
    display: block;
    /* Ensures the image doesn't have inline spacing issues */
    width: 100%;
    /* Ensures the image fits within the figure */
}

.float-figure figcaption {
    text-align: center;
    /* Centers the caption text */
    font-size: 0.9em;
    /* Makes the caption slightly smaller */
    color: #555;
    /* Adds a subtle color to the caption */
    margin-top: 5px;
    /* Adds space between the image and caption */
}