*,:after,:before{padding:0;margin:0;box-sizing:border-box;font-family:"Rubik",sans-serif}li{list-style:none}body{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:#0f1424;padding:3rem 2rem}.app{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:30px;gap:30px}header{grid-column:1/2;grid-row:1/3;height:518px;width:256px}header,header .user-background{background-color:#1c1f4a;border-radius:1rem}header .user-background{position:relative;width:100%;height:354px;padding:32px 0 0 30px;overflow:hidden}header .user-background:before{content:"";position:absolute;top:-128px;left:-128px;background-color:#5847eb;border-radius:50%;width:256px;height:256px;-webkit-animation:expansion .5s ease-in-out .4s forwards;animation:expansion .5s ease-in-out .4s forwards;-webkit-transform-origin:50%;transform-origin:50%;-webkit-transform:scale(0);transform:scale(0)}header .user-background .user{position:relative;height:354px;width:100%;z-index:10}@-webkit-keyframes expansion{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(4);transform:scale(4)}}@keyframes expansion{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(4);transform:scale(4)}}header .user-background .user .avatar{height:86px;width:86px;border-radius:50%;overflow:hidden;background-color:#fff;position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:40px}header .user-background .user .avatar img{width:80px;height:80px;display:flex;justify-content:center;align-items:center;border-radius:50%;opacity:0;transition:opacity .2s ease-in-out .4s}header .user-background .user .avatar img.visible{opacity:1}header .user-background .user h1 .report{display:block;width:100%;font-weight:400;font-size:15px;margin-bottom:3px;color:#bdc1ff;-webkit-animation:text .5s ease-in-out forwards;animation:text .5s ease-in-out forwards}header .user-background .user h1 .name{font-size:18px;color:#fff;font-weight:300;font-size:40px;opacity:0;-webkit-animation:text .5s ease-in-out .5s forwards;animation:text .5s ease-in-out .5s forwards}header .tabs{padding:18px}header .tabs li{width:100%;height:38px;margin-bottom:4px;opacity:0}header .tabs li:first-child{-webkit-animation:text .2s ease-in-out 1s forwards;animation:text .2s ease-in-out 1s forwards}header .tabs li:nth-child(2){-webkit-animation:text .2s ease-in-out 1.2s forwards;animation:text .2s ease-in-out 1.2s forwards}header .tabs li:last-child{margin-bottom:0;-webkit-animation:text .2s ease-in-out 1.4s forwards;animation:text .2s ease-in-out 1.4s forwards}header .tabs li button{width:100%;height:100%;padding:0 14px;background:none;border:none;cursor:pointer;font-size:18px;color:#6f76c8;display:flex;justify-content:flex-start;align-items:center;transition:color .2s ease-in-out}header .tabs li button:hover{transition:none;color:#fff}header .tabs li button:disabled{transition:none;color:#34397b}header .tabs li button.active{color:#fff}@-webkit-keyframes text{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes text{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.card{width:256px;height:198px;position:relative;margin-bottom:46px;opacity:0;-webkit-animation:appear .4s ease-in-out forwards;animation:appear .4s ease-in-out forwards}.card.loading .info{-webkit-animation:reload .8s ease-in-out forwards;animation:reload .8s ease-in-out forwards}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes appear{0%{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes reload{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}40%{opacity:0;-webkit-transform:translateY(-46px);transform:translateY(-46px)}60%{opacity:0;-webkit-transform:translateY(-46px);transform:translateY(-46px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes reload{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}40%{opacity:0;-webkit-transform:translateY(-46px);transform:translateY(-46px)}60%{opacity:0;-webkit-transform:translateY(-46px);transform:translateY(-46px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.card .iconLayer{width:100%;height:100%;border-radius:1rem;display:flex;justify-content:flex-end;align-items:flex-start;overflow:hidden}.card .iconLayer svg{position:relative;right:22px;top:-5px;-webkit-animation-name:movement;animation-name:movement;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-duration:12s;animation-duration:12s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-transform:translateY(-5px);transform:translateY(-5px)}@-webkit-keyframes movement{0%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}10%{-webkit-transform:translate(5px);transform:translate(5px)}20%{-webkit-transform:translateY(5px);transform:translateY(5px)}30%{-webkit-transform:translate(-5px,3px);transform:translate(-5px,3px)}40%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px)}50%{-webkit-transform:translate(-15px,5px);transform:translate(-15px,5px)}60%{-webkit-transform:translate(-20px);transform:translate(-20px)}70%{-webkit-transform:translate(-15px,-5px);transform:translate(-15px,-5px)}80%{-webkit-transform:translate(-10px,-7px);transform:translate(-10px,-7px)}90%{-webkit-transform:translate(-5px,-7px);transform:translate(-5px,-7px)}to{-webkit-transform:translateY(-5);transform:translateY(-5)}}@keyframes movement{0%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}10%{-webkit-transform:translate(5px);transform:translate(5px)}20%{-webkit-transform:translateY(5px);transform:translateY(5px)}30%{-webkit-transform:translate(-5px,3px);transform:translate(-5px,3px)}40%{-webkit-transform:translate(-10px,3px);transform:translate(-10px,3px)}50%{-webkit-transform:translate(-15px,5px);transform:translate(-15px,5px)}60%{-webkit-transform:translate(-20px);transform:translate(-20px)}70%{-webkit-transform:translate(-15px,-5px);transform:translate(-15px,-5px)}80%{-webkit-transform:translate(-10px,-7px);transform:translate(-10px,-7px)}90%{-webkit-transform:translate(-5px,-7px);transform:translate(-5px,-7px)}to{-webkit-transform:translateY(-5);transform:translateY(-5)}}.card .info{background-color:#1c1f4a;width:100%;height:198px;position:absolute;left:0;bottom:-46px;border-radius:1rem;padding:23px 30px;color:#fff;transition-property:background-color,opacity,-webkit-transform;transition-property:background-color,opacity,transform;transition-property:background-color,opacity,transform,-webkit-transform;transition-duration:.2s;transition-timing-function:ease-in-out;cursor:default}.card .info:hover{transition:none;background-color:#34397b}.card .info .title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.card .info .title h2{font-size:18px;line-height:18px;font-weight:500}.card .info .title button{background:none;width:32px;height:32px;border:none;display:flex;justify-content:center;align-items:center;border-radius:.5rem;cursor:pointer}.card .info .title button span{display:none}.card .info .title button svg path{transition:fill .2s ease-in-out}.card .info .title button:hover>svg path{transition:none;fill:#fff}.card .info .time{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.card .info .time .hours{font-size:54px;font-weight:300;margin-bottom:10px}.card .info .time .previous{font-size:15px;line-height:16px;font-weight:400;color:#bdc1ff}.loader-container{margin:0 auto;width:100%;height:100%;display:flex;justify-content:center;align-items:center;grid-column:2/5;grid-row:1/3}.loader-container h2{color:#fff;font-size:24px;text-align:center;font-weight:400}.loader-container .loader{width:64px;height:64px;border-radius:50%;border-color:transparent #fff;border-style:solid;border-width:3px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.orange{background-color:#ff8c66}.orange svg{top:-11px!important}.blue{background-color:#56c2e6}.blue svg{-webkit-animation-delay:1s;animation-delay:1s}.red{background-color:#ff5c7c}.red svg{top:-7px!important;-webkit-animation-delay:2s;animation-delay:2s}.green{background-color:#4acf81}.green svg{top:-2px!important;-webkit-animation-delay:3s;animation-delay:3s}.purple{background-color:#7536d3}.purple svg{top:0!important;-webkit-animation-delay:4s;animation-delay:4s}.yellow{background-color:#f1c65b}.yellow svg{top:-12px!important;-webkit-animation-delay:5s;animation-delay:5s}@media screen and (max-width:1279px){body{align-items:flex-start}.loader-container{grid-column:2/4;grid-row:1/3}.app{grid-template-columns:repeat(3,1fr)}.card:nth-child(6){grid-column:2}}@media screen and (max-width:899px){.loader-container{grid-column:2/3;grid-row:1/3}.app{grid-template-columns:repeat(2,1fr)}.card:nth-child(6){grid-column:auto}}@media screen and (max-width:619px){body{align-items:flex-start}.loader-container{grid-column:auto;grid-row:auto;padding:1rem 0;margin-top:1rem}.loader-container h2{font-size:18px}.app{grid-template-columns:repeat(1,1fr);width:100%}header{width:306px;max-width:328px;height:212px}header .user-background{height:142px;padding-top:0}header .user-background .user{display:flex;justify-content:flex-start;align-items:center;height:100%}header .user-background .user .avatar{width:72px;height:72px;margin:0}header .user-background .user .avatar img{width:66px;height:66px}header .user-background .user h1{padding:0 16px}header .user-background .user h1 .report{margin:0 0 6px;width:-webkit-max-content;width:max-content}header .user-background .user h1 .name{font-size:24px;line-height:24px}header .tabs{display:flex;padding:15px}header .tabs li:first-child button{padding:0 14px 0 24px}header .tabs li:nth-child(2) button{display:flex;justify-content:center;align-items:center}header .tabs li:last-child button{display:flex;justify-content:flex-end;align-items:center;padding:0 24px 0 14px}.card{width:100%;width:306px;max-width:328px}.card .info .time .hours{font-size:42px}}@media screen and (max-width:411px){body{padding:3rem 1rem}header{height:204px;width:328px}header .user-background{padding-left:18px;height:134px}header .user-background .user h1 .name{font-size:22px;width:-webkit-max-content;width:max-content}header .tabs{padding:13px 22px}header .tabs li button{padding:0 14px}header .tabs li:first-child button{padding:0 14px 0 6px}header .tabs li:nth-child(2) button{display:flex;justify-content:center;align-items:center;padding-right:20px}header .tabs li:last-child button{display:flex;justify-content:flex-end;align-items:center;padding:0 6px 0 18px}.card{height:122px;width:328px}.card .info{bottom:-38px;height:122px;padding:23px}.card .info .title{margin-bottom:4px}.card .info .time{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.card .info .time .hours{font-size:32px;line-height:32px;margin-bottom:0}.card .info .time .previous{width:-webkit-max-content;width:max-content}}@media screen and (max-width:374px){header{width:316px}header .tabs{padding:13px 18px}.card{width:316px}}@media screen and (max-width:359px){header{width:310px}header .tabs{padding:13px 15px}.card{width:310px}}@media screen and (max-width:339px){header{width:296px}header .tabs{padding:13px 12px}.card{width:296px}}
/*# sourceMappingURL=main.ac2f5eab.chunk.css.map */