body{font-family:Arial,sans-serif;margin:0;padding:0}header{background:#fff;padding:10px 15px;display:flex;justify-content:center;align-items:center;position:relative;height:60px}header img.logo-left{height:50px;position:absolute;left:15px;top:10px}header img.logo-right{height:70px;position:absolute;right:15px;top:10px}header h1{font-size:22px;font-weight:700;font-family:Arial Black,sans-serif;letter-spacing:5px;color:gray;margin:10px auto 0 120px}.control-section{margin-top:20px;padding:20px}#TaskMode{width:100%;height:600px;min-height:400px;border:1px solid #ccc;background-color:#f9f9f9}#customMenu{display:flex;justify-content:flex-start;gap:10px;margin-bottom:10px;padding:10px;background:#f8f9fa;border-radius:8px;box-shadow:0 4px 6px #0000001a}button{border:none;cursor:pointer;transition:.3s}.save-btn{background:#28a745;color:#fff;padding:10px 20px;font-size:16px;border-radius:8px;font-weight:700;margin-right:15px}.save-btn:hover{background:#218838}.dropbtn{background-color:#007bff;color:#fff;padding:10px 15px;font-size:14px;border-radius:6px}.dropbtn:hover{background-color:#0056b3}.dropdown-content{display:none;position:absolute;z-index:9999;background-color:#fff;min-width:160px;box-shadow:0 8px 16px #0003;border-radius:6px;z-index:1000}.dropdown-content a{color:#000;padding:10px 15px;text-decoration:none;display:block;font-size:14px}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content{display:block}.help-icon{position:fixed;top:30px;left:470px;background:#007bff;color:#fff;border-radius:50%;width:30px;height:30px;font-size:18px}.modal-content{background-color:#fff;padding:20px;border-radius:8px;width:50%;margin:15% auto}.close-button{float:right;font-size:24px;cursor:pointer}.switch{position:relative;display:inline-block;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(26px)}.taskbar-content{display:flex;flex-direction:column;align-items:center;font-size:12px;color:#fff}.taskbar-block{display:inline-block;padding:5px;background-color:#007bff;border-radius:5px;margin:2px}#openMarkerModalBtn{background-color:#007bff;color:#fff;padding:10px 15px;border:none;border-radius:4px;cursor:pointer;margin-right:10px}#openMarkerModalBtn:hover{background-color:#0056b3}#openDeleteMarkerModalBtn{background-color:#dc3545;color:#fff;padding:10px 15px;border:none;border-radius:4px;cursor:pointer}#openDeleteMarkerModalBtn:hover{background-color:#c82333}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080}.modal .modal-content{background-color:#fff;margin:10% auto;padding:20px;border-radius:8px;width:400px;position:relative}.close-marker,.close-delete-marker{position:absolute;top:10px;right:15px;font-size:24px;cursor:pointer}#markerModal .modal-content h2{margin-top:0;font-size:22px;font-weight:700}#markerModal label{display:block;margin-bottom:5px;font-weight:700}#markerModal input[type=text],#markerModal input[type=date]{width:100%;padding:8px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px}#saveMarkerBtn,#cancelMarkerBtn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;margin-right:10px}#saveMarkerBtn{background-color:#28a745;color:#fff}#saveMarkerBtn:hover{background-color:#218838}#cancelMarkerBtn{background-color:#dc3545;color:#fff}#cancelMarkerBtn:hover{background-color:#c82333}#deleteMarkerModal .modal-content h2{margin-top:0;font-size:22px;font-weight:700}#deleteMarkerModal select{width:100%;padding:8px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px}#deleteMarkerBtn,#cancelDeleteMarkerBtn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;margin-right:10px}#deleteMarkerBtn{background-color:#dc3545;color:#fff}#deleteMarkerBtn:hover{background-color:#c82333}#cancelDeleteMarkerBtn{background-color:#6c757d;color:#fff}#cancelDeleteMarkerBtn:hover{background-color:#5a6268}.dropdown{position:relative;display:inline-block}.menu-button{background-color:#007bff;z-index:1000;color:#fff;padding:10px 15px;border:none;cursor:pointer;border-radius:5px}.menu-button:hover{background-color:#0056b3}.dropdown-content{display:none;position:absolute;background-color:#fff;min-width:200px;box-shadow:0 4px 8px #0003;z-index:1000;list-style:none;padding:0;margin:0;border-radius:5px}.dropdown-content li{padding:12px;cursor:pointer;border-bottom:1px solid #ddd}.dropdown-content li:hover{background-color:#f0f0f0}.show{display:block}.modal{display:none;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;box-shadow:0 4px 10px #0003;border-radius:10px;z-index:1000}#indicatorModal .modal-content{background-color:#fff;margin:10% auto;padding:20px;border-radius:8px;width:600px;max-width:90%;position:relative}#indicatorTaskSelect{width:100%;font-size:16px;padding:8px;border:1px solid #ccc;border-radius:4px}#indicatorModal h2{margin-top:0;font-size:22px;font-weight:700}#indicatorModal label{display:block;margin-bottom:5px;font-weight:700}#indicatorModal input[type=text],#indicatorModal input[type=date],#indicatorModal select{width:100%;padding:8px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px}#saveIndicatorBtn,#cancelIndicatorBtn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;margin-right:10px}#saveIndicatorBtn{background-color:#28a745;color:#fff}#saveIndicatorBtn:hover{background-color:#218838}#cancelIndicatorBtn{background-color:#dc3545;color:#fff}#cancelIndicatorBtn:hover{background-color:#c82333}#deleteIndicatorModal .modal-content{background-color:#fff;margin:10% auto;padding:20px;border-radius:8px;width:400px;position:relative}#deleteIndicatorModal h2{margin-top:0;font-size:22px;font-weight:700}#deleteIndicatorModal select{width:100%;padding:8px;margin-bottom:15px;border:1px solid #ccc;border-radius:4px}#deleteIndicatorBtn,#cancelDeleteIndicatorBtn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;margin-right:10px}#deleteIndicatorBtn{background-color:#dc3545;color:#fff}#deleteIndicatorBtn:hover{background-color:#c82333}#cancelDeleteIndicatorBtn{background-color:#6c757d;color:#fff}#cancelDeleteIndicatorBtn:hover{background-color:#5a6268}.dropdown-list{position:absolute;background-color:#fff;border:1px solid #ccc;border-radius:4px;max-height:200px;overflow-y:auto;width:calc(100% - 20px);display:none;z-index:1000}.dropdown-item{padding:10px;cursor:pointer;border-bottom:1px solid #ddd}.dropdown-item:hover{background-color:#f1f1f1}#indicatorDetailModal{display:none;position:fixed;z-index:9999;left:50%;top:10%;transform:translate(-70%);background:#fff;padding:12px 18px;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #0000004d;max-width:600px;max-height:200px;font-size:14px}#indicatorDetailModal .close{position:absolute;top:5px;right:10px;cursor:pointer;font-size:38px;color:red}#indicatorDetailModal .e-indicator-span{width:24px;height:24px;display:inline-block;border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 1px #000;border:2px solid white}.e-gantt .e-indicator-span{width:24px;height:24px;display:inline-block;border-radius:50%;position:relative;cursor:pointer;border:2px solid white;box-shadow:0 0 0 1px #000;margin:1px 3px;z-index:3}.indicator-green{background-color:green}.indicator-orange{background-color:orange}.indicator-red{background-color:red}.e-gantt .e-indicator-span:hover:after{content:attr(data-tooltip);position:absolute;top:-30px;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;padding:4px 8px;border-radius:4px;white-space:nowrap;font-size:12px;z-index:3}.e-gantt .e-indicator-span:hover:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(0,0,0,.85) transparent}.okIcon:before{content:"✅";color:green}.warningIcon:before{content:"⚠️";color:orange}.alarmIcon:before{content:"❌";color:red}.modal-content{text-align:center}.close{float:right;cursor:pointer;font-size:22px}
