Proyectos de Subversion LeadersLinked - Antes de SPA

.navbar{display:flex;background-color:var(--bg-color);width:100%;border-bottom:solid 1px var(--border-primary);padding:1rem 1rem 0;gap:1rem;justify-content:space-between;flex-wrap:wrap;align-items:center;position:relative;height:auto;margin-bottom:1rem;box-shadow:var(--shadow)}.rightNavContainer{display:none;align-items:center;height:100%}@media(max-width: 361px){.rightNavContainer{gap:5px}.rightNavContainer .btn{padding:0 !important}.rightNavContainer .btn .badge{font-size:.6rem}}.logo{height:65px;order:1}.logo img{height:100%}.hamburgerIcon{color:var(--font-color);font-size:1.5rem;order:3}.searchIcon{color:var(--font-color);width:25px;height:25px;border-radius:50%;font-size:1.2rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.mailIcon{color:var(--font-color);width:25px;height:25px;font-size:1.2rem;display:flex;justify-content:center;align-items:center;margin-right:.5rem}@media(max-width: 361px){.mailIcon{margin-right:0rem}}.badge{top:0%;left:50%;font-size:.7rem;transform:translateX(-80%);background-color:var(--danger);color:#fff;border-radius:100px;position:absolute}.bellIcon{color:var(--font-color);font-size:1.2rem;display:flex;justify-content:center;align-items:center;font-weight:600;clip-path:circle(50%)}@media(max-width: 361px){.bellIcon{font-size:1rem;width:21px;height:21px}}.triangleDown{border-left:7px solid rgba(0,0,0,0);border-right:7px solid rgba(0,0,0,0);border-top:7px solid #fff;margin-left:.5rem}.triangleUp{border-left:7px solid rgba(0,0,0,0);border-right:7px solid rgba(0,0,0,0);border-bottom:7px solid #fff;margin-left:.5rem}.backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.205);z-index:900}.searchInputContainer{font-size:.9rem;min-width:65%;flex:1;order:1}.searchInputContainer form{display:flex;align-items:center;width:100%;position:relative}.searchInputContainer input{width:100%;padding:.2rem 1rem .2rem 2rem;border-radius:30px;background-color:var(--bg-color);color:var(--font-color);border:1px solid var(--border-primary)}.searchInputContainer input::placeholder{color:var(--font-color)}.searchInputContainer button{font-size:1rem;color:var(--font-color);border:none;position:absolute;left:.5rem;top:50%;transform:translateY(-50%)}.chatIcon{width:30px;height:30px;object-fit:contain;margin-right:.2rem;position:relative}.chatIcon_active::before{content:"";width:10px;height:10px;border-radius:50%;background-color:red;position:absolute;top:-1px;right:1px}@media(min-width: 1000px){.chatIcon{display:none}}@media(min-width: 768px){.navbar{justify-content:space-evenly}.logo{max-width:317px}.hamburgerIcon{display:none}.searchInputContainer input{padding:.4rem 1rem .4rem 2rem}.bellIcon{background-color:initial;color:var(--font-color)}}@media(min-width: 1024px){.navbar{padding:1rem 5% 0}}@media(min-width: 1200px){.searchInputContainer{order:3;min-width:auto;flex:inherit}.navbar{min-height:104px;padding:0 5%;flex-wrap:nowrap}}.searchBox{padding:2rem;background-color:var(--bg-color);position:relative;z-index:999}.searchBox form{display:flex;align-items:center}.searchBox input{width:100%;padding:.5rem 1rem;border:none;border-radius:30px 0 0 30px;height:40px}.searchBox button{font-size:1.5rem;height:40px;background-color:var(--bg-color);border-radius:0 30px 30px 0;padding-right:.5rem}.backdrop{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.205);z-index:900}.fadeIn{transform-origin:top;animation:fadeIn .3s}.fadeOut{transform-origin:top;animation:fadeOut .3s}@keyframes fadeIn{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}@keyframes fadeOut{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}.userImgContainer{display:flex;align-items:center;position:relative;gap:1rem;cursor:pointer;display:none;order:4}.userImgContainer .d-flex,.userImgContainer .d-inline-flex{gap:5px}.userImgContainer h3{font-weight:bold}.userImg{width:45px;object-fit:contain;border-radius:50%;background-color:#fff}.userDropdown{position:absolute;top:100%;right:0;background-color:var(--bg-color);width:220px;box-shadow:var(--light-shadow);border:1px solid var(--border-primary);overflow:hidden;z-index:1000}@media(max-width: 767px){.userDropdown{right:0}}.userDropdown ul{display:flex;flex-direction:column;justify-content:center;padding:1.5rem}.userDropdown ul li:not(:first-child){margin-top:1rem}.userDropdown ul a{color:var(--font-color);font-size:1rem}.userDropdown ul a:hover{color:var(--font-color);font-weight:bold}.userDropdown ul .logOutContainer__a{font-weight:600}.userDropdown ul .logOutContainer__a:hover{color:var(--danger)}.fadeIn{transform-origin:top;animation:fadeIn .3s}.fadeOut{transform-origin:top;animation:fadeOut .3s}@keyframes fadeIn{0%{transform:scaleY(0)}100%{transform:scaleY(1)}}@keyframes fadeOut{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}@media(min-width: 768px){.userImgContainer{order:2;display:flex}.userImg{width:65px}}@media(min-width: 1200px){.userImgContainer{order:4}}.navLinksContainer{flex:1;order:3;min-width:50%;display:flex}.navLinksContainer>ul{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.navLinksContainer>ul>li{position:relative;display:flex;flex-direction:column;color:var(--font-color);padding-top:0;padding-bottom:12px;gap:.5rem}.navLinksContainer>ul>li svg,.navLinksContainer>ul>li i{font-size:1.5rem}.navLinksContainer>ul>li a,.navLinksContainer>ul>li p{font-size:1.1rem;display:flex;color:var(--font-color);flex-direction:column;align-items:center;gap:.5rem;position:relative}.navLinksContainer>ul>li p{display:none}.navLinksContainer>ul>li:not(:last-child):hover{border-bottom:2px solid var(--font-color)}.navLinksContainer>ul>li:not(:last-child):hover>a,.navLinksContainer>ul>li:not(:last-child):hover>p{font-weight:bold}.navLinksContainer>ul>li:not(:last-child):hover .navLinkDropdown{display:block}.navLinksContainer>ul>li:last-child:hover .aditional_links{display:block}.aditional_links{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1000;background-color:var(--bg-color);border-radius:var(--border-radius);box-shadow:var(--shadow)}.aditional_links ul{display:flex;flex-direction:column;padding:1rem;gap:.5rem}.aditional_links ul li{position:relative}.aditional_links ul li a{font-size:1.1rem;display:flex}.aditional_links ul li a:hover{font-weight:bold}.navLinkDropdown,.navigation-level_three{background-color:var(--bg-color);border-radius:var(--border-radius);box-shadow:var(--shadow);display:none;padding:1rem;position:absolute;left:50%;top:100%;transform:translateX(-35%);z-index:900}.navLinkDropdown ul,.navigation-level_three ul{display:flex;flex-direction:column;gap:1rem}.navLinkDropdown ul li,.navigation-level_three ul li{align-items:center;display:flex;position:relative;gap:1rem}.navLinkDropdown ul li a,.navigation-level_three ul li a{max-width:30ch;font-size:1.1rem;text-align:left}.navLinkDropdown ul li a:hover,.navigation-level_three ul li a:hover{font-weight:bold}.navLinkDropdown ul li:hover .navigation-level_three,.navigation-level_three ul li:hover .navigation-level_three{display:block}.navigation-level_three{top:-10%;left:100%;transform:none;max-height:20rem;overflow:auto}.navigation-level_three ul li:hover a{font-weight:bold}@media(min-width: 768px){.navLinksContainer>ul>li p{display:inline-flex}.navLinksContainer>ul>li:hover .navLinkDropdown{transform:translateX(-50%)}}@media(min-width: 1200px){.navLinksContainer{margin-left:2rem;min-width:auto;order:2}.navLinksContainer>ul{justify-content:space-around}.navLinksContainer>ul>li{padding-top:32px;padding-bottom:12px}.aditional_links ul li:hover .navigation-level_three{display:block}}.responsiveNavbar{display:flex;flex-direction:column;gap:1rem;position:fixed;top:0;width:70vw;height:100vh;background:var(--bg-color);overflow-y:scroll;z-index:1000}.responsiveNavbar ul{display:flex;flex-direction:column;justify-content:center;gap:.5rem}.responsiveNavbar ul a{color:var(--font-color);font-size:1rem}.responsiveNavbar ul a:hover{font-weight:bold}.backContainer{width:100%;padding:1rem;border-bottom:1px solid var(--white);text-align:left;margin-bottom:1rem;transition:all .3s ease}.backContainer a{color:var(--white);font-size:1.3rem}.backContainer a i{margin-right:1rem}.slideIn{transform:translateX(0)}.slideOut{transform:translateX(-100%)}