﻿body {
    grid-template-rows: var(--header-height) var(--navbar-height) 1fr var(--footer-height);
}

    body.center-form {
        grid-template-rows: 1fr var(--footer-height);
    }

header {
    .nav-toggler {
        display: none;
    }
}


nav {
    position: sticky;
    top: var(--header-height);
    z-index: 9;

    .nav-toggler {
        display: none;
    }

    .container {
        height: 100%;
    }

    ul.mainmenu {
        display: flex;
        height: 100%;

        > li {
            &:hover,
            &.active {
                background-color: rgba(255,255,255,.1);
            }

                &:hover div.submenu {
                    position: absolute;
                    top: 100%;
                    left: 0px;
                    opacity: 1;
                }
        }
    }
}

div.submenu {
    position: absolute;
    top: calc(100% + 20px);
    left: -5000px;
    opacity: 0;
    transition: top ease-in-out .3s, opacity linear .3s;
    z-index: 1000;
    text-wrap: nowrap;
    white-space: nowrap;

    ul {
        background-color: #fff;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: rgba(0,0,0,.3) 2px 2px 5px;
        border-top: 3px solid var(--color-2);
        margin: 0px 7px 7px 0px;
        padding: 0;
        padding: 10px 0px;

        &:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
            top: -10px;
            left: 20px;
        }

        li {
            &:not(.spacer) {
                a {
                    padding: 5px 20px;
                    color: #506690;
                    display: block;

                    &:hover {
                        background-color: #ebedf2;
                        color:var(--bs-link-color);
                    }
                }
            }

            &.spacer {
                padding:0px;
                margin:0px;
                border-top:1px solid #eaeaea;
            }
        }
    }
}

.modal {
    .modal-dialog {
        transform: scale(0.7);
        opacity: 0;
    }

    &.show .modal-dialog {
        animation: modal-pop-in 0.25s ease-out forwards;
    }

    &.closing .modal-dialog {
        animation: modal-pop-out 0.15s ease-in forwards;
    }
}