header{position:sticky;top:0;z-index:9}nav{background:#fff;justify-content:space-between;padding:0 3rem}nav,nav .left{align-items:center;display:flex}nav .left{gap:1.5rem;width:70%}nav .right{gap:2rem}.userImage,nav .right{align-items:center;display:flex}.userImage{color:var(--text-clr-1);gap:10px;text-decoration:none}.userImage span:first-child{height:40px;width:40px}.userImage span:first-child img{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.navigation{list-style:none}.navigation,.navigation li a{align-items:center;display:flex}.navigation li a{color:#777;font-size:16px;font-weight:500;gap:8px;padding:1.8rem 1rem;position:relative;text-decoration:none}.navigation li a img{filter:brightness(0) saturate(100%) invert(45%) sepia(23%) saturate(20%) hue-rotate(112deg) brightness(97%) contrast(85%);height:25px}.navigation li .active,.navigation li .router-link-active{color:var(--primary)}.navigation li .active img,.navigation li .router-link-active img{filter:brightness(0) saturate(100%) invert(71%) sepia(78%) saturate(4104%) hue-rotate(1turn) brightness(106%) contrast(107%)}.navigation li a:before{background-color:var(--primary);border-radius:4px;bottom:0;content:"";height:3px;left:50%;position:absolute;transform:translate(-50%)}.navigation li .router-link-active:before{animation:before .3s linear 1;width:100%}.navigation li .active:before{width:100%}@keyframes before{0%{width:0}to{width:100%}}.logo{display:flex;flex-shrink:0;width:140px}.logo img{width:100%}nav .left .bar{border-right:1px solid #777;display:block;height:40px}.search{margin-left:4rem;position:relative;width:50%}.search input{border:1px solid var(--border);border-radius:4px;font-size:16px;font-weight:500;padding:15px 40px 15px 15px;width:100%}.search input::-moz-placeholder{font-size:14px;font-weight:400}.search input::placeholder{font-size:14px;font-weight:400}.search input:focus{outline-color:var(--primary)}.search img{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:20px}.menuBtn{display:block;width:30px}.menuBtn img{width:100%}.userProfile{align-items:center;color:var(--black);cursor:pointer;display:flex;gap:7px;text-decoration:none}.userProfile .span-1{background-color:var(--primary);border-radius:50%;display:grid;font-size:18px;font-weight:400;height:50px;overflow:hidden;place-items:center;text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:50px}.userProfile .span-2{font-size:16px;font-weight:500}.userProfile .span-1 img{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.curserNotWork{cursor:unset}nav .mobRight{display:none}@media only screen and (max-width:800px){.navigation,.search,nav .left .bar,nav .right{display:none}nav{border-bottom:1px solid var(--border-2);box-shadow:0 0 4px #0000001a;padding:.5rem 1rem}.logo{width:100px}nav .left{width:unset}nav .mobRight{align-items:center;display:flex;gap:1rem}nav .mobRight a{width:22px}nav .mobRight a img{filter:brightness(0) saturate(100%);width:100%}.mobUserImage{border-radius:50%;height:40px;overflow:hidden;width:40px}.mobUserImage img{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}}
