@font-face{font-family:Montserrat;src:url(../fonts/Oswald-VariableFont_wght.7cecd0da.ttf)}.font-montserrat{font-family:Oswald}*{font-family:Oswald,sans-serif;margin:0;padding:0}:root{--blue:#287bff;--white:#fff;--grey:#f5f5f5;--black1:#222;--black2:#999;--green:#60b9bb}body{min-height:100vh;overflow-x:hidden}.container{position:fixed;width:100%}.navigation{background:var(--green);border-left:10px solid var(--green);height:100%;overflow:hidden;position:fixed;transition:.5s;width:300px}.navigation.active{width:80px}.navigation ul{left:0;position:absolute;top:0;width:100%}.navigation ul li{border-bottom-left-radius:30px;border-top-left-radius:30px;list-style:none;position:relative;width:100%}.navigation ul li:hover{background:var(--white)}.navigation ul li:first-child{margin-bottom:40px;pointer-events:none}.navigation ul li a{color:var(--white);display:block;display:flex;position:relative;text-decoration:none;width:100%}.navigation ul li:hover a{color:var(--green);font-weight:500}.navigation ul li a .icon{height:50px;line-height:60px;min-width:60px;text-align:center}.navigation ul li a .icon q-icon{font-size:1.8em}.navigation ul li a .title{display:block;height:40px;line-height:60px;padding:0 5px;position:relative;text-align:start;white-space:normal}.navigation ul li:hover a:before{box-shadow:35px 35px 0 10px var(--white);top:-50px}.navigation ul li:hover a:after,.navigation ul li:hover a:before{background:#0000;border-radius:50%;content:"";height:50px;pointer-events:none;position:absolute;right:0;width:50px}.navigation ul li:hover a:after{bottom:-50px;box-shadow:35px -35px 0 10px var(--white)}.main{background:var(--white);left:300px;min-height:100vh;position:absolute;transition:.5s;width:calc(100% - 300px)}.main.active{left:80px;width:calc(100% - 80px)}.topbar{height:60px;justify-content:space-between;padding:0 10px;width:100%}.toggle,.topbar{align-items:center;display:flex}.toggle{color:var(--green);cursor:pointer;font-size:2.5em;height:50px;justify-content:center;width:50px}.search,.toggle{position:relative}.search{margin:0 10px;width:400px}.search label{position:relative;width:100%}.search label input{border:1px solid var(--black2);border-radius:40px;font-size:18px;height:40px;outline:none;padding:5px 20px 5px 35px;width:100%}.search label{font-size:1.4em;justify-content:space-between;left:10px;position:absolute;top:0}.boxuser{align-items:center;background-color:var(--green);border-radius:50%;display:flex}.nickname{color:var(--white);font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:11px;padding-left:8px;padding-right:5px}.user{border-radius:50%;cursor:pointer;height:45px;overflow:hidden;position:relative;width:45px}.user img{height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.logo img{border-bottom-left-radius:4%;border-bottom-right-radius:4%;height:90%;overflow:hidden;padding-top:10px;position:relative;width:96%}.cardbox{display:grid;grid-template-columns:repeat(4,1fr);padding:20px;position:relative;width:100%;grid-gap:30px}.cardbox .card{background:var(--white);border-radius:20px;box-shadow:0 7px 25px #00000014;cursor:pointer;display:flex;justify-content:space-between;padding:30px;position:relative}.cardbox .card .number{color:var(--blue);font-size:2em;font-weight:540;position:relative}.cardbox .card .cardname{color:var(--black2);font-size:1.1em}.cardbox .card .iconbox{color:var(--black2);font-size:3.5em}.cardbox .card:hover{background:var(--blue)}.cardbox .card:hover .cardname,.cardbox .card:hover .iconbox,.cardbox .card:hover .number{color:var(--white)}.s-font-size_12{font-size:12px}.s-font-size_11{font-size:11px}.s-font-size_10{font-size:10px}.s-font-size_8{font-size:8px}