.demo-note{font-size:12px;color:#777187;margin:12px 0}.demo-stage{width:100%;position:relative;overflow:hidden}.demo-canvas{width:1260px;height:720px;transform-origin:top left;font:12px Arial,sans-serif;color:#43464c;text-align:left}.demo-canvas *{box-sizing:border-box}.demo-window{position:relative;width:100%;height:720px;border:2px solid #4a91ed;border-radius:3px;background:#fff;display:flex;flex-direction:column;overflow:hidden}.demo-title{height:32px;min-height:32px;background:#4a91ed;color:#fff;padding:0 10px;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:400}.demo-title>span:last-child{font-size:19px}.demo-toolbar{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px}.demo-canvas input,.demo-canvas select,.demo-canvas textarea{min-width:0;max-width:100%;height:29px;padding:5px 8px;border:1px solid #cdd0d5;border-radius:4px;background:#eee;color:#65696d;font:12px Arial,sans-serif}.demo-toolbar>input{width:210px;background:#fff}.demo-toolbar label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:bold}.demo-toolbar select{width:150px;background:#fff}.demo-canvas button{border:0;border-radius:4px;background:#4a91ed;color:#fff;padding:8px 10px;font:11px Arial,sans-serif;white-space:nowrap;box-shadow:0 2px 7px #0002}.demo-canvas .red{background:#c03729}.demo-canvas .orange{background:#ecac55}.demo-canvas .mint{background:#8bd3c2}.spacer{flex:1}.demo-footer{margin-top:auto;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:linear-gradient(#f5f6f8,#e5e6e8);border-top:1px solid #b6c9e6;font-size:11px;color:#252525}.demo-actions{justify-content:flex-start;background:#e6e6e6}.demo-table{margin:0 14px;overflow:auto;flex:1;border:1px solid #d5d8df;background:#fff}.demo-table table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px}.demo-table th{text-align:left;padding:7px 5px;background:linear-gradient(#f9fafb,#e4e7eb);border:1px solid #c8d4e4;font-weight:400;color:#171717}.demo-table th input{width:100%;height:23px;background:#fff}.demo-table td{height:30px;padding:6px;border-bottom:1px solid #e8e9eb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-table tbody tr:nth-child(even){background:#f8f9fa}.demo-badge{display:inline-block;padding:3px 6px;background:#5097ce;border-radius:5px;color:white;font-size:10px;white-space:nowrap}.demo-badge.pending{background:#f0b15e}.demo-dashboard{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:18px;padding:16px;background:#e6e8ed;flex:1;min-height:0}.demo-dashboard article{background:#fff;border:1px solid #e2e4e9;border-radius:4px;box-shadow:0 2px 5px #0002;overflow:hidden}.demo-dashboard h3{font:700 13px Arial;margin:0;padding:13px;text-align:center;background:#f6f7f9;border-bottom:1px solid #e7e8ec}.demo-dashboard .attendance{grid-column:span 2}.demo-list>div{padding:10px;display:flex;justify-content:space-between;border-bottom:1px solid #eee}.demo-list>div span:last-child{color:#46a846}.demo-legend{text-align:center;font-size:10px;padding:12px}.demo-pie{width:225px;height:225px;border-radius:50%;background:conic-gradient(#417ac8 50%,#e56cba 0);margin:0 auto;border:2px solid white}.demo-dashboard .demo-table{border:0;margin:0}.demo-dashboard .demo-table thead tr:nth-child(2){display:none}.demo-inner-tabs{display:flex;gap:30px;margin:18px 12px 10px;background:#304871;color:#fff;align-items:center;height:32px}.demo-inner-tabs>*{padding:10px}.demo-inner-tabs>b{background:#fff;color:#304871}.demo-card-form{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding:4px 38px;flex:1}.demo-card-form label{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:3px;font-size:11px}.demo-card-form textarea{height:135px}.demo-card-form p{font-size:11px;margin:12px 0}.demo-card-form strong{color:#4da853;font-size:17px;margin-left:20px}.demo-avatar{width:100px;height:100px;margin:8px auto;background:#e6e1f8;border:5px solid #f4f5fa;border-radius:8px;display:grid;place-items:center;font-size:32px;color:#7652be}.demo-dialog{position:absolute;top:85px;left:20%;width:75%;bottom:28px;background:#fff;border:2px solid #4a91ed;border-radius:3px;box-shadow:0 3px 5px #0003;display:flex;flex-direction:column;overflow:hidden}.demo-dialog-body{padding:16px 14px;flex:1;min-height:0;overflow:auto}.demo-stack>label{display:grid;grid-template-columns:205px minmax(0,1fr);align-items:start;gap:14px;margin-bottom:5px;font-size:11px;font-weight:600}.demo-stack textarea{height:85px}.demo-timeline{background:#f4f4f4;border:1px solid #e4e6e8;padding:12px;border-radius:4px}.demo-timeline>div{display:flex;align-items:center;gap:12px;margin-bottom:10px}.demo-timeline>div>.demo-badge{margin-left:auto}.demo-timeline i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ecb062;color:#fff;font-style:normal}.demo-approval{display:grid;grid-template-columns:1fr 1fr;gap:55px;padding:0 12px}.demo-approval .demo-stack>label{grid-template-columns:170px 1fr}.demo-step{position:relative;padding:20px 16px;margin:0 0 14px;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 3px 6px #0001}.demo-step b{float:right}.demo-step select{width:100%;margin-top:12px;height:35px}.demo-two{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}.demo-two label{display:grid;gap:8px;font-size:11px;font-weight:600}.demo-two .wide{grid-column:1/-1}.demo-dialog.hours{top:42px;left:23%;width:63%;bottom:22px}.demo-days{display:grid;gap:10px;margin-top:20px}.demo-days>div{display:flex;align-items:center;gap:10px;background:#4a91ed;padding:12px;border-radius:12px;color:white;min-height:53px}.demo-days>div>span{width:165px;flex-shrink:0}.demo-days label{display:flex;gap:5px;align-items:center;font-size:10px}.demo-days input{width:66px;height:38px;background:#fff}.demo-dialog.qr{top:42px;left:25%;width:59%;bottom:12px}.demo-qr{display:grid;justify-items:center;gap:6px;margin-top:14px;font-size:12px}.demo-qr svg{display:block;width:190px;height:190px;max-width:100%;background:#fff}.demo-window input[type=checkbox]{height:16px;width:16px}.overview-page #demo-tabs{flex-wrap:wrap;overflow:visible}.demo-stage [hidden]{display:none}
.demo-dialog.qr .demo-qr svg{width:160px;height:160px}
.demo-dialog.hours .demo-days{gap:8px;margin-top:14px}
.demo-dialog.hours .demo-days>div{padding:9px 12px;min-height:47px}