@media (min-width: 1201px) {
    .header-login-container { padding: 10px 25px; min-width: 125px; color: #b3b6bb !important; text-align: center; border: 1px solid #b3b6bb; border-radius: 5px; transition: .25s; }
    .header-login-container.logged { display: flex; padding: 5px; width: calc(2rem + 10px); min-width: unset; text-align: center; aspect-ratio: 1; border: 1px solid #b3b6bb; border-radius: 50%; justify-content: center; align-items: center; }
    .header-login-icon { display: none; }
    .header-login-content { }

    body.scrolled .header-login-container { color: var(--mainBlue) !important; border-color: var(--mainBlue); }

    @media (pointer: fine) {
        .header-login-container:hover,
        body.scrolled .header-login-container:hover { color: #FFF !important; background: var(--mainBlue); border-color: var(--mainBlue); }
    }
}

@media (max-width: 1200px) {
    .header-login-container { margin-right: 15px; fill: #FFF; stroke: #FFF; transition: .25s; }
    .header-login-icon { display: block; width: 30px; height: auto !important; fill: none; stroke-width: 2px; }
    .header-login-icon.logged { fill: unset; stroke-width: unset; }
    .header-login-content { display: none; }

    body.scrolled .header-login-container { fill: var(--mainBlue); stroke: var(--mainBlue); }
}