.calendar-page{padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px}.calendar-page .button-box{display:flex;justify-content:center;gap:30px;background-color:var(--input-background);border-radius:40px;width:500px;max-width:100%}.calendar-page .button-box button{padding:10px 30px;border-radius:40px;background-color:var(--input-background);width:90%}.calendar-page .button-box .active{background-color:var(--primary-color);color:#fff}.calendar-page .button-box-2{background:transparent;gap:20px;width:300px;max-width:100%}.calendar-page .button-box-2 button{padding:8px 20px;min-width:100px}.calendar-page .data-view-box{display:flex;flex-direction:column;gap:10px;width:100%}.calendar-page .data-view-box .data-container .render-daily{text-align:center;margin-bottom:20px;font-size:13px}.calendar-page .data-view-box input{background-color:var(--input-background);outline:none;padding:10px}.calendar-page .data-view-box .data-card-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:20px}.calendar-page .data-view-box .data-card-box .data-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px;background-color:var(--input-background);border-radius:10px;box-shadow:var(--box-shadow);cursor:pointer;position:relative}.calendar-page .data-view-box .data-card-box .data-card .pending{color:orange}.calendar-page .data-view-box .data-card-box .data-card .fail{color:red}.calendar-page .data-view-box .data-card-box .data-card .active{color:green}.calendar-page .data-view-box .data-card-box .data-card p{flex-grow:1}.calendar-page .data-view-box .data-card-box .data-card div{text-align:right}.calendar-page .data-view-box .data-card-box .data-card span{position:absolute;height:20px;width:20px;border-radius:50%;background-color:var(--primary-color);top:-10px;right:10px;text-align:center;line-height:20px;font-size:12px}@media(max-width:500px){.calendar-page{padding-bottom:80px}.calendar-page .button-box{width:80%;justify-content:space-between}.calendar-page .button-box button{width:fit-content}.calendar-page .button-box-2{justify-content:center;gap:20px}.calendar-page .data-view-box .data-card-box{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}