html{box-sizing:border-box;font-size:16px}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;font-weight:normal}ol,ul{list-style:none}img{max-width:100%;height:auto}body{font-family:"Roboto",sans-serif}main{display:flex;width:100%;min-width:100vw;min-height:100vh;background:#313232}main .content-general{width:70%}main aside{width:30%}.title img{width:100%;border-radius:30px;background-color:#fff;padding-bottom:30px}.title{display:block;position:relative}.title h2{font-size:24px;position:static;color:#000;width:100%;text-align:center;margin-top:-40px}.title h2 span{font-family:monospace;font-size:12px}.data-box{font-size:50px!important;color:#d7d7d7}.appointment-box{padding:30px}.ap-box{background:#fff;padding:30px;border-radius:20px}.rightnow.ap-box{height:calc(100vh - 70px)}.upcoming.ap-box{height:calc(100vh - 265px)}.ap-box h3{width:100%;font-size:58px;font-weight:bold;text-transform:uppercase;letter-spacing:3px}aside .ap-box h3{text-align:center}header{display:flex;justify-content:space-between;padding:20px;align-items:center}.data-box{font-size:30px}.appointments-box{display:flex}.appointments-box .upcoming,.appointments-box .rightnow{width:100%}ul.appointments-list{display:flex;flex-wrap:wrap;grid-gap:1%;gap:1%}.upcoming ul.appointments-list{display:grid;grid-gap:1%;gap:1%;column-count:3;grid-template-columns:1fr 1fr 1fr}ul.appointments-list .appointment-item span.id{font-size:48px;display:block;width:100%;text-align:center;font-weight:bold;letter-spacing:3px}ul.appointments-list .appointment-item span.staff{font-size:38px}ul.appointments-list .appointment-item span.date{font-size:28px}li.appointment-item{color:#313232;background:rgb(168 201 98 / 45%);border:0;width:100%;border-radius:15px;position:relative;padding:15px 15px 15px 35px;margin-bottom:15px}li.appointment-item:after{content:"";width:10px;height:90%;position:absolute;display:block;background:#A8C962;top:5%;left:10px;border-radius:50px}li.appointment-item .footer-card{display:flex;justify-content:space-between;width:100%}li.appointment-item span.staff{text-transform:uppercase;font-weight:300;font-size:32px}li.appointment-item span.date{font-size:25px;font-weight:600;background:#A8C962;border-radius:5px;padding:3px 10px}.rightnow ul.appointments-list .appointment-item{background:rgba(255,81,54,.45)}.rightnow ul.appointments-list .appointment-item:after{background:#FF5136;animation:rightnow 1s ease-in-out infinite}.rightnow ul.appointments-list .appointment-item span.date{background:#FF5136;animation:rightnow 3s 1.5s ease-in-out infinite}@keyframes rightnow{0%{opacity:1}40%{opacity:1}45%{opacity:.1}55%{opacity:.1}60%{opacity:1}to{opacity:1}}