body{font-family:Arial,sans-serif;margin:0}.header{align-items:center;background:#f9f9f9;box-shadow:0 2px 0 0 #0003;color:#d22b2b;height:30px;justify-content:center;padding:16px;position:sticky;top:0;width:100%;z-index:1000}.header,.sidebar{display:flex;flex-direction:column;transition:.3s}.sidebar{box-shadow:0 4px 8px 0 #0003;box-shadow:2px 0 5px #0000001a;left:0;padding:10px}.sidebar-header{border-bottom:1px solid #333;color:#d22b2b;padding:15px;text-align:center}.sidebar-nav{flex:1 1;margin-top:10px}.sidebar-nav ul{list-style:none;padding:0}.sidebar-nav ul li{margin:10px 0}.sidebar-nav ul li a{border-radius:5px;color:#000;display:block;padding:10px 15px;text-decoration:none;transition:background-color .3s}.selected,.sidebar-nav ul li a:hover{background-color:#bfbfbf}.main{display:flex;flex-direction:row}.content{display:flex;flex:1 1;flex-direction:column}.monaco-editor{pointer-events:auto!important;position:relative!important;z-index:10!important}.cm-editor{background:#fff;border:1px solid #ccc;border-radius:6px;padding:8px;transition:border-color .2s ease}.cm-editor:focus-within{border:1px solid #4caf50;outline:none}.cm-editor:hover{border-color:#888}.cm-content{outline:none}.container{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin:10px}.card-container{background:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;height:95%;padding:10px}.left-section{flex:1 1;max-width:400px;min-width:300px}.right-section{flex:2.5 1;min-width:300px}.table-section{margin:20px}.editor-container{background:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin-bottom:15px;padding:10px}.select-field{-webkit-appearance:none;appearance:none;border:1px solid #ccc;border-radius:6px;font-size:14px;margin:10px;outline:none;padding:10px;transition:border-color .3s ease,box-shadow .3s ease;width:95%}.button-group{display:flex;flex-direction:column;gap:16px}.primary{background-color:#d22b2b;border:none;border-radius:5px;color:#fff;cursor:pointer;padding:10px 20px;width:100%}.preview-title{font-size:18px;font-weight:700}.editor-area{margin:10px}.error-message{background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:5px;color:#d9534f;font-size:16px;margin:10px 0;padding:15px}.error-message,.loaderParent{align-items:center;display:flex}.loaderParent{background-color:#fffc;color:#333;font-size:18px;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:9999}.common-table{margin:20px 0;overflow-x:auto;width:100%}.table{border-collapse:collapse;table-layout:fixed;width:100%}.table td,.table th{border-bottom:1px solid #ddd;padding:12px 15px;text-align:left}.table th{background-color:#f4f4f4;font-weight:700}.table tr:hover{background-color:#f1f1f1}.action-btn{border:none;border-radius:4px;cursor:pointer;font-size:14px;margin:2px 5px;padding:6px 12px}.action-btn:hover{opacity:.8}.action-btn:focus{outline:none}.action-btn.secondary{background-color:#dc3545;color:#fff}.iframe-component{align-items:center;display:flex;flex-direction:column;font-family:Arial,sans-serif;margin-bottom:20px;padding-bottom:15px}.preview-title{color:#212121;font-size:26px;font-weight:600;margin-bottom:15px}.viewport-controls{align-items:center;background-color:#f5f5f5;border-radius:30px;box-shadow:0 6px 12px #0000001a;display:flex;gap:10px;justify-content:center;margin-bottom:20px;padding:12px}.viewport-btn{background-color:#fff;border:2px solid #ddd;border-radius:25px;color:#212121;cursor:pointer;font-size:14px;padding:8px 18px;transition:background-color .3s,color .3s,border-color .3s}.viewport-btn.active,.viewport-btn:hover{background-color:#d22b2b;border-color:#d22b2b;color:#fff}.custom-dimensions{align-items:center;background-color:#fff;border-radius:20px;box-shadow:0 4px 8px #0000001a;display:flex;gap:15px;padding:12px}.custom-dimension{align-items:center;display:flex;gap:5px}.custom-dimension input{border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px;text-align:right;width:70px}.custom-dimension input:focus{border-color:#d22b2b;outline:none}.custom-dimension label{color:#212121;font-size:14px;font-weight:600;opacity:0;position:absolute}.custom-dimensions input:focus+label{color:#999;font-size:10px;left:10px;opacity:1;position:absolute;top:5px;transition:all .3s ease-in-out}.dynamic-iframe{border-radius:8px;box-shadow:0 4px 12px #0000001a;height:500px;margin-top:5px;max-width:100%;transition:width .3s ease,height .3s ease;width:100%}.dynamic-iframe:hover{box-shadow:0 8px 12px #0003}@media (max-width:768px){.viewport-controls{flex-direction:column;gap:10px;padding:10px}.custom-dimensions{flex-direction:column;padding:10px;width:100%}.custom-dimensions input{width:80%}.dynamic-iframe{height:400px}}.loader{aspect-ratio:1;border-radius:50%;position:relative;transform:rotate(45deg);width:40px}.loader:before{animation:l18 2s linear infinite;border:5px solid #c8102e;border-radius:50%;content:"";inset:-10px;position:absolute}@keyframes l18{0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0)}25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}to{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}}.banner{align-items:center;border-radius:8px;display:flex;font-family:Arial,sans-serif;font-size:16px;left:0;margin:0;opacity:1;padding:15px;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;width:100%;z-index:1000}.banner.success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.banner.error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.banner.info{background-color:#cce5ff;border:1px solid #b8daff;color:#004085}.banner.warning{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.banner .message{flex-grow:1}.banner .close-btn{background:none;border:none;color:#888;cursor:pointer;font-size:18px;position:absolute;right:10px;top:10px}.banner .close-btn:hover{color:#333}.modal-title{font-size:18px;font-weight:700;margin-bottom:10px}.modal-message{font-size:14px;margin-bottom:20px}.modal-buttons{display:flex;justify-content:space-between}.btn{border:none;border-radius:4px;cursor:pointer;padding:8px 12px}.btn-danger{background:#c8102e;color:#fff}.btn-cancel{background:gray;color:#fff}.modal-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:50}.modal-content{background-color:#fff;border-radius:1rem;box-shadow:0 4px 6px #0000001a;padding:1.5rem;width:24rem}.modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.modal-title{font-size:1.25rem;font-weight:600}.modal-close-button{color:#555;cursor:pointer;font-size:1.5rem;transition:color .3s ease}.modal-close-button:hover{color:#000}.add-button{align-items:end;background-color:#c8102e;border:2px solid #0000;border-radius:25px;color:#fff;cursor:pointer;font-size:16px;font-weight:700;margin:20px;padding:12px 20px;text-transform:uppercase;transition:all .3s ease-in-out}.add-button:hover{background-color:#fff;border:2px solid #c8102e;color:#c8102e}.button-div{display:flex;justify-content:start}.form-container{background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;gap:1rem;margin:0 auto;max-width:400px;padding:2rem}.form-container,.input-group{display:flex;flex-direction:column}.input-group{gap:.5rem}label{font-weight:600}input,label{font-size:1rem}input{background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;color:#333;padding:.75rem}
/*# sourceMappingURL=main.e402b538.css.map*/