:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400}body{margin:0;width:100vw;height:100vh;overflow-x:hidden}#home{width:100vw;height:100vh;background:#fff;display:flex;align-items:center;justify-content:center}#nav{width:100%;height:150px;display:flex;align-items:end;position:fixed;top:0;opacity:0;animation:get-visible 2s ease-in-out 2s forwards}@keyframes get-visible{0%{opacity:0}to{opacity:1}}#nav #title{width:fit-content;height:fit-content;display:flex;gap:10px;align-items:center;justify-content:center;position:absolute;left:10%}#nav #title img{width:40px;height:40px}#nav #title span{font-size:20px;font-weight:600}#nav #login-options{width:fit-content;height:40px;display:flex;gap:20px;align-items:center;justify-content:center;position:absolute;right:10%}#nav #login-options span{font-size:16px;font-weight:400}#nav #login-options button{all:unset;width:fit-content;height:fit-content;padding:10px 15px;color:#1e90ff;font-size:16px;font-weight:600;border-radius:3px;border:1px solid dodgerblue;cursor:pointer;position:relative;overflow:hidden}#home-content{width:fit-content;height:fit-content;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}#home-content span{margin-bottom:-25px;transform:translateY(-30px);animation:move-down 2s ease-in-out 2s forwards}@keyframes move-down{0%{transform:translateY(-30px)}to{transform:translateY(0)}}#home-content p{max-width:60vw;text-align:center;transform:translateY(30px);opacity:0;animation:move-up 2s ease-in-out 2s forwards}#home-content button{all:unset;width:fit-content;height:fit-content;padding:10px 15px;color:#1e90ff;font-size:16px;font-weight:600;border-radius:50px;border:1px solid dodgerblue;cursor:pointer;transform:translateY(30px);opacity:0;animation:move-up 2s ease-in-out 2s forwards}@keyframes move-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}#dashboard{width:100vw;height:100vh;background:#fff;display:flex;flex-direction:column;align-items:center}#dashboard-nav{width:100vw;height:100px;display:flex;justify-content:space-evenly;align-items:center;position:fixed;top:0;z-index:10}#dashboard-nav #container-options{width:400px;height:40px;border-radius:10px;background:#e8f9ff;display:flex;align-items:center;position:absolute;left:5%;overflow:hidden}#container-options .option{width:23.3%;height:100%;border-radius:10px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer}#container-options .option:nth-child(4){width:30%}#dashboard-nav #container-date{width:fit-content;height:40px;border-radius:5px;display:flex;align-items:center;gap:15px;position:absolute;left:(50%);overflow:hidden}#container-date #prev,#container-date #next{all:unset;width:40px;height:40px;border-radius:50%;background-color:#e8f6ff;display:flex;align-items:center;justify-content:center;cursor:pointer}#container-date span{font-weight:600}#dashboard-nav #buttons-container{width:fit-content;height:50px;display:flex;align-items:center;justify-content:center;position:absolute;right:5%;overflow:hidden}#buttons-container #new-appointment{all:unset;width:180px;height:40px;border-radius:5px;background-color:#e8f6ff;display:flex;align-items:center;justify-content:start;padding-left:5px;gap:5px;cursor:pointer}#buttons-container #profile-btn{all:unset;width:40px;height:40px;border-radius:50%;background-color:#e8f6ff;display:flex;align-items:center;justify-content:center;cursor:pointer}#calendar-content{position:relative;top:100px}.content{width:90vw;height:fit-content;min-height:300px}#calendar-grid{color:#646464;font-size:16px;font-weight:600;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;border-radius:5px;border:2px solid lightgray;background:#d3d3d3}.calendar-header{height:50px;display:flex;align-items:center;justify-content:center;background:#fff}.calendar-header:nth-child(1){background:#ffafcc}.calendar-header:nth-child(2){background:#ffd6ff}.calendar-header:nth-child(3){background:#e7c6ff}.calendar-header:nth-child(4){background:#c8b6ff}.calendar-header:nth-child(5){background:#b8c0ff}.calendar-header:nth-child(6){background:#bbd0ff}.calendar-header:nth-child(7){background:#f4cae0}.calendar-cell{font-size:20px;height:70px;padding:10px;display:flex;align-items:start;justify-content:start;background:#fff;overflow:visible}.has-appointment{position:relative}.appointment-message{height:60%;width:65%;padding:5px;border-radius:5px;background:#ffefd5;font-size:12px;position:absolute;right:8px;bottom:8px;cursor:zoom-in;box-shadow:0 0 5px #0000004d}.appointment-info{width:100%;height:100%;display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appointment-message{height:60%;width:65%;padding:5px;border-radius:5px;background:#ffefd5;font-size:12px;position:absolute;right:8px;bottom:8px;z-index:1}.appointment-info{display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appointment-info span{max-width:95%;-webkit-mask-image:linear-gradient(to right,#000 80%,#0003);mask-image:linear-gradient(to right,#000 80%,#0003)}.appointment-message{transition:all .3s ease-in-out}.appointment-message:hover{transform:translateY(-10px);scale:1.2;height:85%;width:100%;font-size:10px;z-index:10}.appointment-message.multiple{height:50%;width:55%;position:relative;top:35%;left:20%}.appointment-info.multiple{padding:5px;border-radius:5px;background:#ffefd5;font-size:11px;position:absolute;right:0;bottom:0;cursor:zoom-in;box-shadow:0 0 5px #0000004d;transition:transform .3s ease-in-out}.appointment-dot.multiple{height:12px;width:12px;position:absolute;background:red;border-radius:50%;top:-14px;right:-7px;z-index:3}#week{position:relative}#time-slot-label{height:60px;width:100px;display:flex;align-items:center;justify-content:center;font-weight:600;color:gray}#week-time-slots{height:auto;width:100px;display:grid;grid-template-columns:1,100px;gap:15px;position:absolute;top:85px;left:0}.week-time-slot{height:60px;width:100%;display:flex;align-items:center;justify-content:center}#week-days-header{height:70px;width:fit-content;display:grid;grid-template-rows:1,1fr;grid-template-columns:repeat(7,140px);gap:15px;position:absolute;top:0;left:140px}#week-days-header #button-left,#week-days-header #button-right{all:unset;height:40px;width:40px;border-radius:50%;background:transparent;position:absolute;transform:all .15s ease-in-out;display:flex;align-items:center;justify-content:center}#week-days-header #button-left{left:-40px;align-self:center;stroke-width:5px}#week-days-header #button-right{right:-40px;align-self:center;stroke-width:5px}#week-days-header #button-left:active,#week-days-header #button-right:active{scale:.9;background:#d3d3d3}.week-day{height:100%;width:140px;font-weight:600;color:#414141;display:flex;align-items:center;justify-content:center}.week-day>div{display:flex;flex-direction:column;align-items:center;justify-content:center}.week-day #button-right{border-radius:50%;background:transparent}.week-day:nth-child(2){background:#ffafcc}.week-day:nth-child(3){background:#ffd6ff}.week-day:nth-child(4){background:#e7c6ff}.week-day:nth-child(5){background:#c8b6ff}.week-day:nth-child(6){background:#b8c0ff}.week-day:nth-child(7){background:#bbd0ff}.week-day:nth-child(8){background:#f4cae0}#week-appointments-wrapper{font-size:12px;height:fit-content;width:fit-content;display:grid;grid-template-columns:repeat(7,140px);gap:15px;position:absolute;top:85px;left:140px}.week-appointment{height:60px;width:140px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 3px #0000004d;overflow:hidden}.week-appointment.has-appointment{position:relative;background-color:#ecfdf5;border-left:4px solid palegreen;-webkit-mask-image:linear-gradient(to right,#000 80%,#0000004d);mask-image:linear-gradient(to right,#000 80%,#0000004d)}.week-appointment.multiple{position:relative;background-color:#ecfdf5;border-left:4px solid green;-webkit-mask-image:linear-gradient(to right,#000 80%,#0000004d);mask-image:linear-gradient(to right,#000 80%,#0000004d)}.appointment-item{background-color:#d1fae5;padding:2px 4px;border-radius:4px;font-size:.8rem;position:absolute;left:5px;display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appointment-item.multiple{position:absolute;left:5px;background-color:#d1fae5;padding:2px 4px;border-radius:4px;font-size:.8rem;display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#date-wrapper{width:350px;height:40px;border-radius:5px;display:flex;align-items:center;gap:15px;position:fixed;top:30px;left:calc(50% - 150px);z-index:100}#date-wrapper span{font-weight:600}#duration-dropdown{width:fit-content;height:40px;border-radius:5px;display:flex;align-items:center;gap:10px;position:fixed;top:30px;left:calc(50% + 180px);z-index:100}#duration-label{color:gray;font-size:14px;font-weight:600}#date-wrapper button{all:unset;width:40px;height:40px;border-radius:50%;background-color:#e8f6ff;display:flex;align-items:center;justify-content:center;cursor:pointer}.day-time-slot{display:flex;align-items:center;min-height:60px;padding:10px 10px 10px 15px;border-bottom:1px solid lightgray}.time-slot-label{width:100px}.day-appointment-wrapper{width:100%;height:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.day-appointment{font-size:14px;padding:10px;background:#e1ffe1;border-radius:7px;border-left:5px solid lightgreen;display:flex;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.day-appointment span b{all:unset;font-size:12px;font-weight:700;color:#90ee90}.appt{border-bottom:1px solid lightgray;padding:10px 10px 10px 20px;display:flex;gap:40px}#clear-appointments{all:unset;width:180px;padding:7px;border-radius:5px;color:#fff;background:tomato;display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;top:30px;left:calc(50% - 75px);cursor:pointer;z-index:100}.appt-date{width:fit-content;font-size:18px;font-weight:600}.appt-wrapper-1{min-width:20vw;display:flex;flex-direction:column;gap:10px}.appt-wrapper-2{width:70vw;padding:10px;border-radius:7px;border:1px solid lightgray}.appt-content-wrapper{display:flex;gap:15px}.appt-content-wrapper span{min-width:150px;width:auto;padding:5px}.appt-wrapper-1 span b,.appt-content-wrapper span b{font-size:14px;color:gray}#set-appointment-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:450px;height:600px;background-color:#fff;border-radius:12px;box-shadow:0 10px 25px #0003;z-index:100;display:none;overflow:hidden}#appointment-content-wrapper{height:580px;padding:0 20px;overflow-x:hidden;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#999 transparent}#appointment-content-wrapper::-webkit-scrollbar{width:6px}#modal-title{background:#fff;-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent);mask-image:linear-gradient(to bottom,black 80%,transparent);width:100%;height:70px;font-size:20px;font-weight:700;display:flex;justify-content:center;align-items:center;position:fixed}#set-appointment-modal>div{margin-bottom:12px}#appointment-buttons{display:flex;justify-content:space-between;margin-top:20px}#appointment-buttons button{flex:1;padding:10px 16px;margin:0 6px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background-color .3s}#appointment-cancel{background-color:#e74c3c;color:#fff}#appointment-cancel:hover{background-color:#c0392b}#appointment-add{background-color:#2ecc71;color:#fff}#appointment-add:hover{background-color:#27ae60}#appointment-type{margin-top:70px;display:flex;flex-direction:column;gap:7px}#appointment-title,#appointment-date,#appointment-timezone,#appointment-duration,#appointment-time-slot{margin-top:14px;display:flex;flex-direction:column;gap:7px}#appointment-type span,#appointment-title span,#appointment-date span,#appointment-timezone span,#appointment-duration span,#appointment-time-slot span{color:gray;font-size:14px;font-weight:600}input{border:1px solid rgb(175,175,175);box-shadow:0 0 5px #0000001a;height:35px;font-size:14px;border-radius:5px;padding-left:10px}select{border:1px solid rgb(175,175,175);box-shadow:0 0 5px #0000001a;height:35px;font-size:14px;border-radius:5px;padding:0 5px}#date-container{background:#f1f1f1;border-radius:20px;padding:20px}#appointment-date #appointment-container-month{display:flex;align-items:center;justify-content:space-between}#appointment-date #appointment-container-month #prev,#appointment-date #appointment-container-month #next{all:unset;height:40px;width:40px;display:flex;align-items:center;justify-content:center;border-radius:50px;cursor:pointer}#appointment-date #appointment-container-month #prev:hover,#appointment-date #appointment-container-month #next:hover{background:#ddd}#appointment-date #appointment-container-month span{font-size:18px;font-weight:600;color:#000}#appointment-date #appointment-calendar{color:#414141;font-size:14px;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;border-radius:5px}.appointment-calendar-header{font-weight:600;height:45px;width:45px;display:flex;align-items:center;justify-content:center}.appointment-calendar-cell{border-radius:50px;height:45px;width:45px;display:flex;align-items:center;justify-content:center;cursor:pointer}.appointment-calendar-cell.disabled{color:#a0a0a0;background:#ddd;pointer-events:none}.appointment-calendar-cell:hover{background:#ddd}.appointment-calendar-cell.not-date{all:unset}.appointment-calendar-cell.selected{background-color:#1e90ff;color:#fff}#time-slot-wrapper{font-size:14px;padding:0 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.time-slot{height:40px;display:flex;align-items:center;justify-content:center;border-radius:5px;box-shadow:0 0 3px #0003;cursor:pointer}.time-slot:hover{background:#e6f2ff}.time-slot.selected{background-color:#1e90ff;color:#fff}