nav {
    font-family: "Open_Sans";
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    background-color: #2A3647;
}

nav a {
    font-size: 16px;
    text-decoration: none;
    color: #CDCDCD;
}

.nav-links {
    width: 100%;
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-links a {
    height: 76px;
    width: 80px;
    border-radius: 16px;
    gap: 4px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.nav-icon {
    fill:#D9D9D9;
}

.nav-links a:active {
    color: #fff;
    background-color: #081A31;
    fill: #fff;
    cursor: default;
}

.nav-links a:active .nav-icon{
    fill: #fff;
}

.nav-links a:active:hover{
    background-color: #081A31;
}

.nav-active {
    color: #fff;
    background-color: #081A31;
    fill: #fff;
    cursor: default;
}

.nav-active .nav-icon {
    fill: #fff;
}

.d-none-nav {
    display: none;
}

/* Desktop */
 /* FIXME: desktopView for modal 800px*/
@media (min-width: 1024px) {

    .desktop-view{
        height: 100vh;
    }
    
    nav {
        height: 100vh;
        width: 232px;
        min-width: 232px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: #2A3647;
    }

    .nav-links {
        height: 229px;
        width: 100%;
        gap: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .nav-links a {
        width: 100%;
        height: 46px;
        display: flex;
        flex-direction: unset;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 0;
    }

    .nav-links-text {
        width: 38%;
        font-size: 16px;
        text-decoration: none;
    }

    .nav-links svg {
        width: 30px;
        height: 30px;
    }

    .nav-logo {
        width: 100%;
        padding: 64px 0 64px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .copyright {
        height: 232px;
        width: 100%;
        display: flex;
        margin-bottom: 80px;

    }

    .copyright-links {
        display: flex;
        flex-direction: column;
        justify-content: end;
        width: 100%;
        gap: 8px;
    }

    .copyright-links a {
        padding-left: 54px;
        font-weight: 400;
        height: 35px;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .nav-links a:hover {
        text-decoration: none;
        background-color: #2E3C57;
    }
    
    .copyright-links a:hover {
        text-decoration: none;
        font-weight: bold;
        color: #55A9DE;
    }

    .copyright-links a:active {
        text-decoration: none;
        font-weight: normal;
        background-color: #081A31;
        color: #CDCDCD;
        cursor: default;
    }

    .copyright-links a.copyright-activ {
        text-decoration: none;
        font-weight: normal;
        background-color: #081A31;
        color: #CDCDCD;
        cursor: default;
    }
    
    .copyright-links a.copyright-activ:hover {
        text-decoration: none;
        font-weight: normal;
        color: #CDCDCD;
    }


    .nav-active:hover {
        background-color: #081A31 !important;
    }
}