﻿nav.full {
    position: sticky;
    top: 0;
    left: 0;
    min-width: 261px;
    display: flex;
    align-items: flex-start;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    flex-direction: column;
    height: 100vh;
}

    nav.full .logo {
        min-width: 227px;
        display: flex;
        align-items: center;
        margin: 0px 24px 0px 0px;
        padding: 10px 0px;
        margin: 0px 0px 0px 26px;
    }

        nav.full .logo .menu-icon {
            color: #333;
            font-size: 24px;
            margin-right: 14px;
            cursor: pointer;
        }

        nav.full .logo .logo-name {
            color: #333;
            font-size: 22px;
            font-weight: 500;
        }



        nav.full .sidebar-content {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
            padding: 30px 16px;
        }

    nav.full .sidebar-content .list {
        list-style: none;
        cursor: pointer;
    }

        nav.full .sidebar-content .list .nav-link {
            display: flex;
            align-items: center;
            margin: 8px 0;
            padding: 10px 12px;
            border-radius: 8px;
            text-decoration: none;
        }

    nav.full .sidebar-content .lists .nav-link:hover,
    nav.full .sidebar-content .bottom-content .nav-link:hover {
        background-color: #e2efff;
    }

    nav.full .sidebar-content .nav-link .icon {
        margin-right: 14px;
        font-size: 20px;
        color: #707070;
    }

    nav.full .sidebar-content .nav-link .link {
        font-size: 16px;
        color: #707070;
        font-weight: 400;
    }

    nav.full .sidebar-content .lists .nav-link:hover .icon,
    nav.full .sidebar-content .lists .nav-link:hover .link {
        color: #fff;
    }

            nav.full .sidebar-content .lists {
                min-width: 210px;
                padding-left: 0;
            }

    nav.full ul {
        transition: all 0.4s ease;
    }

    nav.full .logo .logo-name,
    nav.full .sidebar,
    nav.full .link,
    nav.full ul {
        transition: all 0.4s ease;
    }

    /* Quando o menu estiver fechado */
    /* Quando o menu estiver fechado */
    /* Quando o menu estiver fechado */

    nav.full.close {
        min-width: 70px;
    }

        nav.full.close .sidebar-content .lists {
            min-width: 58px;
            padding-left: 0;
        }
        nav.full.close .logo {
            min-width: 38px;
        }




        nav.full.close .logo .logo-name,
        nav.full.close .sidebar,
        nav.full.close .link,
        nav.full.close ul {
            transition: all 0.4s ease;
        }

        nav.full.close .logo .logo-name {
            display: none;
        }

        nav.full.close .sidebar {
            left: 0;
            width: 70px;
        }

        nav.full.close .link {
            display: none;
        }

        nav.full.close ul {
            padding-left: 0;
        }

        nav.full.close .radios {
            display: none !important;
        }

    /* Cores do texto to menu */
    /* Cores do texto to menu */
    /* Cores do texto to menu */

    nav.full .color-1 {
        color: #A36361 !important;
    }

    nav.full .color-2 {
        color: #8495E3 !important;
    }

    nav.full .color-3 {
        color: rgb(173, 184, 92) !important;
    }

    nav.full .color-seop {
        color: #e38484 !important
    }



    nav.full .cor-icone-1 {
        color: #000000 !important;
    }

    nav.full .cor-icone-2 {
        color: #B59B47 !important;
    }

    nav.full .cor-icone-3 {
        color: #006159 !important;
    }

    nav.full .cor-icone-4 {
        color: #ddc200 !important;
    }

    nav.full .cor-icone-5 {
        color: #d51c47 !important;
    }

    nav.full .cor-icone-6 {
        color: #307b3c !important;
    }

    nav.full .cor-icone-7 {
        color: #eb1866 !important;
    }

    nav.full .cor-icone-8 {
        color: #d51c47 !important;
    }

    nav.full .cor-icone-9 {
        color: #307b3c !important;
    }

    nav.full .cor-icone-10 {
        color: #000000 !important;
    }

    nav.full .cor-icone-11 {
        color: #589167 !important;
    }

    nav.full .cor-icone-12 {
        color: #0e0d00 !important;
    }

    nav.full .cor-icone-13 {
        color: #2a27e9 !important;
    }

    nav.full .cor-icone-14 {
        color: #307b3c !important;
    }

    nav.full .cor-icone-15 {
        color: #307b3c !important;
    }

    nav.full .cor-icone-16 {
        color: #3767CE !important;
    }

    nav.full .cor-icone-17 {
        color: #006159 !important;
    }

    nav.full .cor-icone-18 {
        color: #ddc200 !important;
    }

    nav.full .cor-icone-19 {
        color: #2a27e9 !important;
    }

    nav.full .cor-icone-20 {
        color: #eb43ff !important;
    }

    nav.full .cor-icone-21 {
        color: #307b3c !important;
    }

    /* Input de datas */
    /* Input de datas */
    /* Input de datas */

    nav.full.close .input-container {
        display: none;
    }

    nav.full .input-container {
        position: relative;
    }

        nav.full .input-container .input {
            font-size: 1em;
            padding: 0.6em 1em;
            border: none;
            border-radius: 6px;
            background-color: #f8f8f8;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            max-width: 210px;
            min-width: 210px;
            color: #333;
        }

            nav.full .input-container .input:hover {
                background-color: #f2f2f2;
            }

            nav.full .input-container .input:focus {
                outline: none;
                background-color: #fff;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            nav.full .input-container .input::placeholder {
                color: #999;
            }

        nav.full .input-container .highlight {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #6c63ff;
            transition: width 0.3s ease;
            max-width:210px;
        }

        nav.full .input-container .input:focus + .highlight {
            width: 100%;
        }

/* Optional: Animation on focus */
/* Optional: Animation on focus */
/* Optional: Animation on focus */

@keyframes input-focus {
    from {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
    }

    to {
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

nav.full .input-container .input:focus {
    animation: input-focus 0.3s ease;
}

@media (max-width:660px) {
    nav.full {
        background-color: #fff;
        box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
        position: fixed;
        width: 100%;
        z-index: 3;
        height: 50px;
    }

        nav.full .sidebar-content {
            display: none;
        }

        nav.full.close .sidebar-content {
            display: block;
            height: 460px;
            background: #fff;
            width: 100%;
        }

        nav.full.close .logo .logo-name {
            display: block;
        }

        nav.full.close .link {
            display: block;
        }

        nav.full.close .radios {
            display: block !important;
        }

        nav.full.close .input-container {
            display: block;
            max-width: 210px;
        }

        nav.full .logo {
            padding: 8px 0px;
        }

        nav.full ~ main {
            margin-top: 40px;
        }
}