.sidebar{background-color:#f1f4f8}.add-button{background-color:#748dbc}.divider{border:none;border-top:1.5px solid #ccc;margin:15px 0;width:80%}.content{margin-left:70px;padding:20px}.nl{margin-top:5px}.nl-query-card{margin-top:10px}.nl-query-title{color:#6491bd}.nl-query-input{background-color:#e7eef8;border:none;border-radius:10px;margin-bottom:0;margin-top:10px;outline:none;padding:10px}.nl-query-buttons{display:flex;justify-content:flex-end}.nl-query-header{align-items:center;display:flex;justify-content:space-between}.data-table-section{margin-top:20px}.MuiTabs-root{background-color:#f5f5f5}.MuiTab-textColorPrimary.Mui-selected{color:#6491bd}.MuiTabs-indicator{background-color:#6d879b}.import-btn{background-color:#f4f3f4;border-radius:20px;color:#6491bd;margin-left:20px}.data-table-container{margin-top:10px}.visualize-title{color:#6491bd;margin-bottom:20px}pre{word-wrap:break-word;white-space:pre-wrap}.visualize{display:flex;flex-direction:column;justify-content:space-between}.vql-card{background-color:#fff;border-top:1px solid #ddd;width:100%}.visualization-card{background-color:#e5f5ea;margin-top:10px}.chart-container{padding:20px}.chart{border:1px solid #e0e0e0;border-radius:4px;padding:10px}.vql-content{word-wrap:break-word;white-space:pre-wrap}.vql-line{margin:0}.uppercase-char{color:purple}.number-char{color:green}.explanation-container,.step-by-step-explanation{justify-content:space-between}.left-column1{display:flex;flex:1.4 1;flex-direction:column;margin-right:150px}.right-column1{flex:1 1;margin-right:0}.purple-text{color:#063a68}.step-label{background-color:#063768;border-radius:10px;color:#fff;display:inline-block;padding:5px 10px}.container{background-color:#fdfffd;border-radius:20px;margin-top:20px;padding:20px}.chart{height:250px;width:500px}.highlight-row{background-color:#e5eaf5;border-radius:10px;padding:10px}.highlight1{background-color:#ff0}.highlight1,.highlight2{border-radius:5px;color:#000;padding:2px 5px}.highlight2{background-color:#9acd32}.highlight-row-container{margin-bottom:10px}table{border-collapse:collapse;width:100%}td,th{padding:10px;text-align:left}th{background-color:#eee}td{border-bottom:1px solid #ddd}.explanation-container,.step-by-step-explanation{align-items:flex-start;display:flex;flex-direction:column;width:100%}.explanation-container{background-color:#fff}.step-container{display:flex;justify-content:space-between;margin-bottom:20px;width:100%}.step-label{background-color:#8cacc8;border-radius:5px;color:#000;font-weight:700;margin-bottom:10px;padding:5px;text-align:center}.vql-card{margin-top:10px}.table-container{margin-bottom:0;margin-top:10px}.table-section{margin-bottom:0}.join-tables{align-items:center;display:flex}.join-line{background-color:green;height:2px;margin:0 10px;width:50px}.joined-table{margin-top:20px}.vql-title{color:#6491bd}.highlight-table-name{background-color:#8cacc8;border-radius:3px;color:#000;font-weight:700;margin-right:2px;padding:2px 4px}.table-row{flex-direction:row;margin-bottom:0}.table-column{margin-bottom:0;margin-right:10px}.highlight-join-column{background-color:#d4edda;color:#155724}.highlight-chart-type,.highlight-join-column{border-radius:3px;font-weight:700;padding:2px 4px}.highlight-chart-type{background-color:#f3f1bb;color:#96930a}.highlight-bin-by{background-color:#d4edda;border-radius:3px;color:#155724;font-weight:700;padding:2px 4px}.arrow{flex-shrink:0;margin:150px 0;text-align:center;width:50px}.arrow:before{color:#155724;content:"↔";font-size:35px}.arrow-down{flex-shrink:0;text-align:center;width:100%}.arrow-down:before{color:#155724;content:"↓";font-size:30px}.arrow{margin:80px auto 0}.arrow,.arrow-down{align-items:center;display:flex;height:0;justify-content:center}.arrow-down{margin:-7px auto 0}.table-row{align-items:flex-start;display:flex;justify-content:space-between;margin:10px 0}.table-column{flex:1 1;margin:0 10px}.highlight-cell{background-color:#ff0}.selected-column{border:2px solid blue}.border-column{border:2px solid green}.full-highlight-column{background-color:#90ee90}.highlight-cell{background-color:#d4edda;color:#155724;font-weight:700}.selected-column{border-right:2px solid #155724}.full-highlight-column{background-color:#d4edda}.purple-text{color:#6491bd}.pagination{align-items:center;display:flex;justify-content:center;margin-top:20px}.pagination button.page-button{margin:0 4px;padding:6px 12px}.pagination button,.pagination button.page-button{background-color:#fff;border:none;border-radius:5px;color:#000;cursor:pointer;transition:background-color .3s}.pagination button{font-size:15px;margin:0 6px;padding:6px 8px}.pagination button:hover{background-color:#8ca4c8}.pagination button:disabled{background-color:#f3f2f2;cursor:not-allowed}.pagination button.page-button.active{background-color:#c4d3e9}.App{font-family:Roboto,sans-serif}.App,.main-content{background-color:#fff}.main-content{margin:0}.first-row,.second-row{background-color:#fff;display:flex;justify-content:space-between;margin-bottom:20px}.left-column{display:flex;flex:1.4 1;flex-direction:column;margin-right:150px}.right-column{flex:1 1;margin-right:0}.nl-query{margin-bottom:20px}.data-table-container,.visualization{flex:1 1}.step-by-step-explanation{margin-top:20px}.step{background-color:#e5f5e8;border-radius:4px;margin-top:10px;padding:20px}.highlight{background-color:#ff0}.viz-step{margin-top:20px}.pagination span{cursor:pointer;margin:0 5px}.pagination span:hover{text-decoration:underline}.sidebar{align-items:center;background-color:#f1f5f8;display:flex;flex-direction:column;height:100vh;left:0;padding-top:10px;position:fixed;top:0;width:60px}.add-button,.menu-button{border-radius:10px;margin-bottom:20px;padding:10px}.add-button{background-color:#f8b6c2}.label-button,.labels{align-items:center;display:flex;flex-direction:column}.label-button{margin-bottom:10px}.label-text{font-size:12px;margin-top:5px}.main-content{margin-left:60px;margin-right:100px}.header{align-items:center;background-color:#fff;border-bottom:1.5px solid #ddd;display:flex;justify-content:space-between;margin-left:60px;margin-top:0;padding-bottom:20px;padding-top:20px}.header .title{color:#719cbb;font-size:24px;font-weight:bolder;margin-left:0}.header .vql-switch{align-items:center;display:flex;font-size:24px}.header .vql-switch .MuiTypography-body1{color:#8cabc8;font-size:20px;font-weight:bolder;margin-right:10px}.content{margin-left:40px;margin-top:10px}.label-button.selected{background-color:#85a0ba;color:#fff}.header .timer{align-items:center;display:flex;font-size:24px;gap:8px}
/*# sourceMappingURL=main.2a16a49b.css.map*/