@import "../../vendor/bootstrap/dist/css/bootstrap.min-z0zQt-h.css";
@import "../packages/mdb-ui-kit/css/mdb.min-yYa_AXG.css";
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&family=Vollkorn&display=swap');

/*Branding data*/
:root {
    --interact-blue: #0e6eb6;
    --interact-dark-blue: #123d67;
    --interact-light-blue: #0099bc;
    --interact-yellow: #e7c41f;
    --interact-blue-bg: #6594b2;
    --interact-dark-blue-bg: #123d67;
    --interact-light-blue-bg: #d5e9f2;
    --interact-yellow-bg: #e5e3e4;
    --interact-yellow-bg-2: #f4f2f2;
    --interact-dark-green: #267067;
    --interact-light-green: #63ba8d;
    --interact-dark-brown: #cd732a;
    --interact-light-brown: #f7a833;
    --interact-dark-green-bg: #bfddde;
    --interact-light-green-bg: #e1efe3;
    --interact-dark-brown-bg: #f7dcc4;
    --interact-light-brown-bg: #fff2ce;
    --interact-font-primary: "Vollkorn";
    --interact-font-secondary: "Open Sans";
    --file-pdf: #EF5350;
    --file-doc: #1976D2;
    --file-xls: #388E3C;
    --file-zip: #8D6E63;
}

.badge-interact {
    color: var(--interact-dark-blue);
    background-color: var(--interact-light-blue-bg);
}

*, body {
    font-family: var(--interact-font-primary), sans-serif;
    color: black;
}

header {
    z-index: 1100 !important;
}

p, ul > li {
    font-family: var(--interact-font-secondary), sans-serif;
    font-weight: 300;
}

p {
    *:not(strong) {
        font-family: var(--interact-font-secondary), sans-serif;
    }

    a:not(.btn) {
        text-decoration: underline;
    }
}

.h7 {
    font-size: 0.7rem;
}

.logo {
    max-width: 295px;
}

footer {
    h4, p, a {
        color: white;
    }

    a {
        text-decoration: underline;

        &:hover {
            color: white;
            text-decoration: none;
        }
    }
}

/* Multi Carousel */
   .homepage {
       .carousel-control-next, .carousel-control-prev {
           position: relative !important;
       }
   }

#news {
    .multi-carousel.vertical {
        max-width: 100%;
        height: 600px;

        .carousel-control-next {
            width: auto;

            span {
                transform: none;
            }
        }

        .carousel-control-prev {
            width: inherit;

            span {
                transform: none;
            }
        }
    }
}

.event-block .header {
    height: 70px;
}

.library-block {
    height: 350px !important;
    position: relative;
    overflow: hidden;

    .content-preview {
        height: 260px;
    }

    .details {
        position: absolute;
        bottom: 0;
        width: 100%;

        p {
            font-size: 12px;
            margin-bottom: 0;
        }

        p:last-child {
            margin-top: 6px;
        }
    }
}

.team {
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #d3cfcf;
    color: #FFFFFF;

    .team-image {
        height: inherit;
    }

    .details {
        position: absolute;
        bottom: 0;
        width: 100%;

        p {
            font-size: 12px;
            margin-bottom: 0;
        }

        p:last-child {
            margin-top: 6px;
        }
    }
}

/* Form components */
   .datepicker-header {
       background-color: var(--interact-blue-bg);
   }

#backToTop {
    visibility: hidden;
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    cursor: pointer; /* Add a mouse pointer on hover */
    font-size: 18px; /* Increase font size */
}

#event-calendar {
    table.month {
        td {
            height: 30px;
        }
    }
    .calendar-tools {
        .btn-link {
            padding-left: 12px;
            padding-right: 12px;
        }
    }
}

#event-calendar-view {
    & > table {
        & > thead {
            background-color: var(--interact-light-blue-bg);
        }

        & > tbody {
            td:nth-child(n+6) {
                background-color: var(--interact-yellow-bg);
            }
        }
    }
}

.tooltip-inner {
    * {
        color: white;
    }
}

.modal-dialog {
    top: 300px;
}

.btn {
    text-transform: none !important;
}

#cookies {
    z-index: 9999;
    width: 280px;
    height: auto;
    right: 30px;
    bottom: 70px;
    display: none;
    transition: all 2s ease;
}

#cookies.show {
    display: block !important;
}

hr.hide-last {
    &:last-child {
        display: none;
    }
}

#main-nav {
    box-shadow: none;
}

#nav-bar-main {
    .nav-item {
        a {
            font-family: var(--interact-font-secondary), sans-serif;

            .h5:first-child {
                color: var(--interact-blue);
                margin-bottom: 0;
            }
        }
    }
}

.dropdown {
    position: initial;

    .dropdown-menu {
        top: 85%;
        li {
            position: relative;
        }

        .dropdown-submenu {
            &:hover {
                padding-left: 15px;
            }

            transition: padding-left 0.3s ease-in-out;
        }
    }
}

.bg-dark-blue {
    background-color: var(--interact-dark-blue-bg);
}

.bg-blue {
    background-color: var(--interact-blue-bg);
}

.bg-light-blue {
    background-color: var(--interact-light-blue-bg);
}

@media screen and (min-width: 767px) {
    .dropdown {
        &:hover {
            > .dropdown-menu {
                display: block;
            }
        }

        > .dropdown-toggle {
            &:active {
                pointer-events: none;
            }
        }
    }
}

@media screen and (min-width: 767px) {
    .logo {
        max-width: 350px;
    }

    #highlights {
        .controls {
            margin-top: -50px;
        }
    }

    #news {
        .multi-carousel.vertical {
            height: 900px;
        }
    }

    .tooltip-inner {
        width: 400px;
        max-width: 100%;
    }

    .team {
        min-height: 156px !important;
    }

    #cookies {
        z-index: 9999;
        width: 420px;
        height: auto;
        right: 100px;
        bottom: 20px;
    }
}