/*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// viz.css /////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700;800&family=Roboto:wght@600;700;800&family=Montserrat:wght@600;700;800&family=Poppins:wght@600;700;800&family=Alegreya:wght@600;700;800&family=Raleway:wght@600;700;800&&display=swap'); /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// GENERAL CSS /////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body { overflow:hidden; --display: flex; display:none; align-items: center; justify-content: center; height: 100vh; width: 100vw; min-width: 0 !important; min-height: 0 !important; } #mainContainer { display: none; box-sizing: border-box; width: calc(100% - 4rem); height: calc(100% + 0.75rem); margin-top: 8rem; margin-bottom:-1.75rem; margin-left:-0.75rem; --overflow:hidden; } ::-webkit-scrollbar { width: 8px; height:8px; background-color:var(--color-transparent); } hspacer{ width: 1.5rem; } label { font-size: 1rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING PAGE ////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body:not(.run-mode):not(.share-mode) #mainContainer { margin-top: 1rem; } body:not(.run-mode) #dataVisualizationPanel { margin-top:0.25rem; } body.show-landing landing { display: flex; } body.show-landing #uploadDropZone { display: none; } landing { width:100vw; height:100vh; padding:0 12vw; display: none; align-items: center; justify-content: center; box-sizing:border-box; } landing button.primary { font-size:1rem; background:var(--color-primary-700); width:250px;} landing button.primary:hover { background:var(--color-primary-800); } landing button.primary:focus, landing button.primary:active {box-shadow:0 0 0 3px rgb(44 82 130 / 45%); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING PAGE HEADER /////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ landing landingHeader { position: absolute; top:0; left:0; width:100vw; box-sizing: border-box; padding:3rem 7.5vw; font-weight:bold; text-align: right; font-size:1.1rem; } landing landingHeader span:first-of-type { float:left; cursor:default; margin-left:0; font-size:1.5rem; font-weight:900; letter-spacing:2px; color:var(--color-primary-700); } landing landingHeader span.right-side-option { cursor:pointer; margin: 0 1.5rem; transition:0.15s ease; padding-top: 6px; display: inline-block; } landing landingHeader span.right-side-option:hover { opacity: 0.7; } landing landingHeader span.right-side-option i { transition: 0.15s ease-out; } landing landingHeader span.right-side-option:hover i { transform: translateX(4px); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING BLOCKS //////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ landing landingContainer { display:flex; max-width: 1200px; width:85vw; box-sizing:border-box; overflow-y: auto; margin-top:5vh; margin-left: 3.5vw; box-sizing: border-box; padding:1rem; overflow: visible;} landing .landing-block.left { margin-right:4rem; min-width:405px; max-width:405px;} landing .landing-block.right { border-radius:40px 40px 0 0; position: relative; width:inherit; background:linear-gradient(to bottom, var(--color-gray-200), var(--color-white)); padding:2rem 8rem; height:20rem;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING INTRO TEXT /////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ landing .text-5xl { line-height: 1.1; } landing .description { color:var(--color-gray-600); line-height: 1.7; display:block; margin:1.5rem 0 2rem; } landing .description span.tooltip { color:var(--color-primary-600); cursor:help; } landing .tooltiptext, .alertify .tooltiptext {width: 300px !important; margin-left: -150px !important; top: calc(100% + 8px) !important; overflow: hidden; text-overflow: ellipsis;} landing underline { position: relative;} landing underline::after{ content:''; position: absolute; top:calc(100% - 9px); z-index:-1; height:6px; left:0; right:0; border-radius:4px; background:var(--color-primary-400); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING PAGE SCREENSHOT /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ landing #desktopScreenshot { background-color: var(--color-gray-900); box-sizing: border-box; width:100%; border-radius:15px; margin-top:-6rem; overflow: hidden; height:33rem; transform: translateY(0px); } landing #desktopScreenshot iframe { pointer-events:none; margin-top: 0.5rem; width:calc(100% - 2rem); margin-left: 1rem; border:none; height:calc(100% + 0.5rem); opacity:0; transition:0.3s ease-out; } landing .landing-icon { position: absolute; top:0; left:3.5rem; background:var(--color-white); width:6rem; height:6rem; border-radius:100px; display:flex; align-items:center; justify-content:center; z-index:100; color:var(--color-green-500); font-size:3rem; box-shadow:0px 10px 20px rgba(45, 55, 72,0.23); } landing .landing-icon:nth-of-type(2) { top:calc(50% - 3rem); left:1rem; color:var(--color-primary-800); } landing .landing-icon:nth-of-type(3) { top:auto; bottom:0; color:var(--color-gold-500); } landing .landing-icon:nth-of-type(4) { left:auto; right:4.5rem; color:var(--color-primary-500); } landing .landing-icon:nth-of-type(5) { left:auto; top:calc(50% - 3rem); right:1rem; color:var(--color-red-600); } landing .landing-icon:nth-of-type(6) { left:auto; top:auto; bottom:0; right:4.5rem; color:var(--color-gray-600); } #screenshotLoading {width:100%; color:var(--color-gray-400); text-align: center; font-size:4rem; position: absolute; z-index:10; left:0; top:45%; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING PAGE MOBILE /////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @media only screen and (max-width:1250px) { landing .landing-icon:first-of-type {left:1rem; } landing .landing-icon:nth-of-type(4) { right:1rem; } landing .landing-block.right { padding:2rem 5rem; } } @media only screen and (max-width:1150px) { landing .landing-icon { display:none; } landing .landing-block.right { padding:2rem; background:linear-gradient(to bottom, var(--color-gray-400), var(--color-white)); } } @media only screen and (max-width:1020px) { landing .landing-block.right { display:none; } } @media only screen and (max-width:480px) { landing {padding: 0 9.5vw; } landing landingHeader{ padding: 2rem 9.5vw; } landing landingContainer { padding: 0; margin-top:0; } landing .text-5xl { font-size: 2.5rem; } landing .landing-block.left { min-width: 0; max-width: 1000px; width:100%; margin-right:0;} landing .description { margin-top:0.5rem; } } @media only screen and (max-height:750px) { landing #desktopScreenshot { height: 30rem; margin-top:-4rem; } } @media only screen and (max-height:680px) { landing #desktopScreenshot { height: 26rem; margin-top:-3rem; } } @media only screen and (max-height:600px) and (min-width:480px) { landing landingHeader {display: none;} } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body.pwa-mode .desktop-screenshot, body.pwa-mode landingHeader, body.pwa-mode .landing-block.right{ display:none; } body.pwa-mode landingContainer { justify-content: center; margin-top:0; } /*/////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// IN-BROWSER ADJUSTMENTS //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body:not(.pwa-mode) #uploadDropZone { margin-top: 2.5rem; height: calc(100% - 7rem); } /*/////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// HEADER //////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ header { display: block; position: fixed; top: 0; left: 0; right: 0; padding: 0.75rem 3.5rem; font-weight: 900; letter-spacing: 2px; color: var(--color-gray-700); font-size: 0.875rem; background: var(--color-white); background: linear-gradient(to bottom, var(--color-white), var(--color-gray-100)); text-align: center; box-shadow: 0 0.1rem 0.5rem rgb(60 70 88 / 20%); border-bottom: 1px solid var(--color-gray-400); z-index: 25; background: var(--color-white); border-color: var(--color-gray-300); overflow-x: auto; overflow-y:hidden; white-space: nowrap;} body.pwa-mode:not(.showing-visualization) header, body.print-mode header, body.show-landing header {display: none !important; } header i { cursor: pointer; } headerbutton { cursor :pointer; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// UPLOAD UI ///////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #initialLoadingIcon { --display:block !important; position: absolute; font-size:4em; color: var(--color-gray-550); margin-bottom: 3rem; } #initialLoadingIcon.fa-spin { animation:fa-spin 0.75s cubic-bezier(0.04, 0.56, 0.32, 0.78) infinite; } #initialLoadingIcon.fa-beat-fade { animation:fa-beat-fade 0.75s cubic-bezier(0.04, 0.56, 0.32, 0.78) infinite; } #uploadDropZone { display: flex; width: calc(100% - 3rem); height:calc(100% - 3rem); align-items: center; justify-content:center; text-align: left; color:var(--color-gray-600); border-radius: var(--border-radius-lg); font-weight:600; font-size:1.0625rem; border:4px solid var(--color-gray-400); border-color:var(--color-white); border-style: dashed; } body.active-file-drag #mainContainer { filter: blur(5px); } body.active-file-drag #uploadDropZone { display: flex; border-style: solid; border-color:var(--color-gray-400); background: var(--color-gray-200); } #uploadDropZone > div { margin-bottom: 10vh; } #uploadDropZone small b{ display: block; color:var(--color-primary-800); margin: -12.5vh 0 -1.125rem; font-weight:800; } #uploadDropZone div.new-data-source-option-container > div:not(.new-data-source-option-horizontal-divider) { width: 185px; } #uploadDropZone div.new-data-source-option-container { margin-top: 0.5rem; display:flex; width:400px; justify-content: space-between; } #uploadDropZone div.new-data-source-option, #uploadDropZone label{ text-align: center !important; cursor:pointer; font-size: 1.0625rem; padding: 0.4375rem 0 !important; color: var(--color-gray-700); } #uploadDropZone label { padding: 0 !important; width:100%; } #uploadDropZone div.new-data-source-option:hover { color:var(--color-gray-900); background: var(--color-gray-150); border-radius: var(--border-radius); } #uploadDropZone .new-data-source-option-vertical-divider{ height: 2px; width:100%; margin:0.5rem 0; background:var(--color-gray-300); } #uploadDropZone .new-data-source-option-horizontal-divider{ width: 2px; background:var(--color-gray-300); margin-left: 1px; } #uploadDropZone hr:nth-of-type(2) { margin: 0.875rem 0rem !important;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// UPLOAD UI (OPEN DATASET OPTIONS) /////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #uploadDropZone #recentDatasetsSelectContainer ul.options::-webkit-scrollbar { width: 12px; height:12px; } #uploadDropZone #recentDatasetsSelectContainer ul.options::-webkit-scrollbar-thumb { background: var(--color-white); } #uploadDropZone #recentDatasetsSelectContainer ul.options::-webkit-scrollbar-thumb:hover { background: var(--color-gray-350); } #uploadDropZone #useSampleButton, #uploadDropZone #recentDatasetsSelectContainer .styledSelect { background:var(--color-primary-700); color:var(--color-white); box-shadow: 1px 2px 4px rgb(42 67 101 / 50%); padding:0.75rem 0 ; text-align: center; font-size: 16px; font-weight: 800; display: inline-block; width:400px; margin-bottom:1.25rem; border-radius: var(--border-radius);} #uploadDropZone .fa-cube { width:15px; margin-right: 0.75rem; --color:var(--color-primary-600); font-size: 15px; } #uploadDropZone #recentDatasetsSelectContainer { display: none;} #uploadDropZone #recentDatasetsSelectContainer select{ width: 0; padding:0; } #uploadDropZone #recentDatasetsSelectContainer .options { animation:none; left: -24px; margin-top:-96px; width:fit-content; overscroll-behavior: none; padding:1.5rem 0.5rem 1.5rem 1.5rem; text-align: left; max-height:40vh; min-height:300px; max-width: 450px; min-width: 445px; transition: 0.1s top ease-out; } #uploadDropZone #recentDatasetsSelectContainer .options li:first-of-type { display:none; } #uploadDropZone #recentDatasetsSelectContainer .options input { margin-bottom: 0.75rem; width:390px; border: none; background: var(--color-gray-200); padding: 0.75rem 0.875rem; border-radius: var(--border-radius); position: relative; } #uploadDropZone #recentDatasetsSelectContainer .options li { margin-left: -15px; } #uploadDropZone #recentDatasetsSelectContainer .options .dataset-option-row {cursor: pointer; text-decoration: none !important; display: flex; padding-right: 1rem; align-items: center; margin: 1px 0 1px 4px; } #uploadDropZone #recentDatasetsSelectContainer .options .dataset-option-row div:nth-child(1) { background: var(--color-primary-200); border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; color:var(--color-primary-800); margin-right: 0.75rem; width:2.25rem; min-width:2.25rem; height:2.25rem; } #uploadDropZone #recentDatasetsSelectContainer .options .dataset-option-row div:nth-child(2) { white-space: nowrap; font-size:16px; font-weight:600; color:var(--color-gray-800); } #uploadDropZone #recentDatasetsSelectContainer .options li:hover .dataset-option-row div:nth-child(2), #uploadDropZone #recentDatasetsSelectContainer .options li:hover .dataset-option-row div:nth-child(2) span { color:var(--color-primary-600) !important; } #uploadDropZone #recentDatasetsSelectContainer .options .dataset-option-row div:nth-child(2) span { font-size:14px; color: var(--color-gray-500); display:block; margin-top:2px; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #manualFileSelector { display: none; } .alertify details input { display: inline; width: 66px !important; padding: 0 !important; margin: 0 5px; } .aws-file-uploading-icon, .ask-data-question-discard-button { position:absolute; bottom: 1rem; right: 1rem; font-size: 0.875rem; background-color: var(--color-primary-600); font-weight: 700; padding:0.75rem; border-radius: var(--border-radius); color:var(--color-primary-100); z-index:101; display:none; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%); } .aws-file-uploading-icon i { margin-right: 0.75rem; animation:fa-spin 0.75s cubic-bezier(0.04, 0.56, 0.32, 0.78) infinite; } .ask-data-question-discard-button { cursor: pointer; display: block; background: var(--color-gray-700); color:var(--color-gray-400); font-weight:500} .ask-data-question-discard-button a { color: var(--color-white); font-weight: 700; padding: 0.75rem 0.5rem; } .ask-data-question-text-area { color: var(--color-gray-900); font-size: 1rem !important; width: 100%; font-weight: 600; font-family: 'Muli', sans-serif; resize: none; border:none; background: var(--color-gray-100); padding: 1rem; height: 4.75rem; outline: none; margin-top: 0.75rem; border-radius: var(--border-radius); border:2px solid var(--color-gray-200); } .ask-data-question-text-area:focus { border-color: var(--color-gray-300); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LARGE DATASET PICKER UI /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options { position:fixed; top: calc(118px + 9vh); left: 10vw; width: 80vw; box-sizing: border-box; max-width: none; height: 80vh; max-height: none; padding-top:8.5rem; grid-template-columns: repeat(3, 1fr); grid-auto-rows: min-content; grid-template-rows:repeat(auto-fill, 64px); } body.pwa-mode.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options { top: calc(88px + 9vh); } body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options li { max-width: calc(100% - 4rem); overflow: hidden; } body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer .options li:first-of-type { display: block; z-index: 1; margin-left: 0; font-size: 20px; font-weight: 800; position: fixed; pointer-events: none; padding: 1.75rem 1.5rem; } body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer .options li:first-of-type i { font-size: 20px; width:20px; } body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options input { margin-top: 0.5rem; position: fixed; border: 0 solid var(--color-white); border-width: 74px 16px 16px; transform: translate(24px, -8px); margin-left: -16px; width: calc(80vw - 70px);} #recentDatasetsSelectContainer .fa-arrow-up-right, #recentDatasetsSelectContainer .fa-arrow-down-left { cursor: pointer; padding: 0.625rem 0.25rem 0.625rem 1.125rem; color:var(--color-gray-400); font-size: 1.375rem; transform:translateY(2px); width: 36px; box-sizing: border-box; } #recentDatasetsSelectContainer .fa-arrow-up-right:hover, #recentDatasetsSelectContainer .fa-arrow-down-left:hover { color:var(--color-gray-700); } #recentDatasetsSelectContainer .fa-arrow-down-left { position:fixed; transform: translate(calc(80vw - 78px), 68px); padding: 1rem 1.25rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @media only screen and (max-width:1444px) { body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width:956px) { body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options { grid-template-columns: repeat(1, 1fr); } } /* @media only screen and (max-width:956px) { body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options { display: block !important; } body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer .options li:first-of-type { transform: translate(-20px, -136px); } body.large-dataset-picker #uploadDropZone #recentDatasetsSelectContainer ul.options input { transform: translateY(-144px); } #recentDatasetsSelectContainer .fa-arrow-down-left { transform: translate(calc(80vw - 100px), -67px); } } */ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// MANAGE DATASETS /////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .manage-dataset-header span { float: right; cursor: pointer; color:var(--color-gray-600); padding: 0.375rem; font-weight:600; font-size: 1rem;} .manage-dataset-header span:hover { color:var(--color-gray-800); } .manage-dataset-table-container { height:calc(100vh - 340px); max-height: 300px; overflow:auto; border-radius:0 0 0 var(--border-radius); border: 0px solid var(--color-gray-300); border-width: 0 2px 2px; } .manage-dataset-table-container::-webkit-scrollbar-track, .select-save-datasets::-webkit-scrollbar-track { background-color: var(--color-gray-150);} .manage-dataset-table tr:first-child td { border-top: 0 !important; } .manage-dataset-table tr:last-child td { border-bottom: 0 !important; } .manage-dataset-table tr:hover{ background: var(--color-gray-100); } .manage-dataset-table td { border-width: 0 0 2px !important; cursor: pointer !important; vertical-align: middle !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important;} .manage-dataset-table td:first-child { background-color: var(--color-transparent) !important; } .manage-dataset-type-icon { margin-left: 0.625rem; color:var(--color-primary-100); background: var(--color-primary-800); display: flex !important; justify-content: center; align-items: center; min-width: 1.625rem; min-height: 1.625rem; width: 1.625rem; height: 1.625rem; border-radius: 100px; font-size: 14px; } .manage-dataset-table .manage-dataset-name { white-space: normal !important;} .manage-dataset-table .manage-dataset-action {color:var(--color-gray-450); font-size:15px; width: 40px !important; text-align: center !important; padding: 0.25rem !important; } .manage-dataset-table .manage-dataset-action:hover { color:var(--color-gray-800); } .manage-dataset-table .manage-dataset-action:hover .fa-trash{ color:var(--color-red-700); } .manage-dataset-table .manage-dataset-action .fa-table { margin-right: 10px; font-size:17px; } .manage-dataset-table .manage-dataset-action .fa-money-check-pen { font-size: 18px; transform: translateX(-4px); } .manage-dataset-table .manage-dataset-action:last-child { padding-right: 0.5rem !important; width: 44px !important; } .metadata-row-ellipsis-cutoff { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .select-save-datasets { max-height:40vh; overflow:auto; border: 2px solid var(--color-gray-300); } .select-save-datasets td { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .select-save-datasets td:first-child i { background: none; font-size: 1.1875rem; height: 1rem; width: 0.5rem; line-height: 0.85;} .duplicate-dataset-row {border-top: 2px solid var(--color-gray-300); border-width: 2px 0; padding: 1rem 0 0.75rem; color: var(--color-gray-700); font-weight: 600;} .duplicate-dataset-row a { color: var(--color-gray-500) !important; margin-right: 0.75rem; font-size:14px; text-decoration: none} .duplicate-dataset-row a.selected { color:var(--color-primary-600) !important; } .fa-dropbox { color: var(--color-primary-600); } #loadCollectionInput { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } #customBackendForm input { padding-bottom: 0.25rem !important; --font-size: 15px !important; } #customBackendForm label { font-size: 0.875rem; padding-top: 0.125rem; color: var(--color-gray-550); } .fa-aws { color: var(--color-gold-600); font-size: 1.1875rem; transform: translate(-3px, 2px); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CUSTOM CODE /////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #codeEditor { outline: none; border:none; resize:none; border-top: 2px solid var(--color-gray-400); width:100%; height:35vh; padding-top: 1.25rem; margin-top: 1rem; overflow: hidden; } .monaco-editor { margin-left: -10px; } .monaco-hover[role="tooltip"] { display: none !important; } .alertify code { color: var(--color-red-600); } .alertify pre { background: var(--color-gray-200); padding: 1rem; border-radius: var(--border-radius); color: var(--color-primary-800); white-space: break-spaces; overflow:auto; } #codeEditorSaveIndicator { font-weight: 600; font-size: 0.875rem; display: inline-block; margin-left: 1rem; color: var(--color-gray-500); } body.fullscreen-code-editor .alertify-code-editor .dialog > *{ height: 100%; width: 100%; } body.fullscreen-code-editor #codeEditor { height: calc(100% - 195px); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// HEADER PAGINATION ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ header::-webkit-scrollbar { height: 0px; } header:hover::-webkit-scrollbar { height: 6px; } header:hover::-webkit-scrollbar-thumb { background:var(--color-gray-600); } header:hover::-webkit-scrollbar-track { background:var(--color-gray-200); } header #backToHomeButton { position: absolute; left: 0; top:0; font-size: 19px; padding: 11px 1rem 11px 1.75rem; transition: 0.1s; color:var(--color-gray-500); } header:hover #backToHomeButton { color:inherit } header #backToHomeButton:hover { color:var(--color-primary-600); transform:scale(1.1) } header .header-page-item { letter-spacing: 0; font-weight: 600; color:var(--color-gray-550); cursor:pointer; padding: 8px; font-size: 1rem; line-height: 16px; } header .header-page-item.active{ color:var(--color-gray-800); border-bottom: 2px solid;} header .header-page-item { margin-left: 1rem; } header .header-page-item:last-child{ margin-right: 0.5rem; margin-left: 0.65rem; } header .header-page-item:last-child:hover { color:var(--color-primary-600); } header .header-page-item:last-child i { font-size:15px; opacity: 0 } header:hover .header-page-item:last-child i { opacity: 1; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CONTROL PANE ////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #dataControlPanel { display:flex; justify-content: space-between; margin-bottom:-0.4375rem; margin-top:-0.75rem; font-size:0.9375rem; color:var(--color-gray-600); flex-wrap: wrap; } body:not(.share-mode) #dataControlPanel { background: var(--color-white); --outline: 2.5rem solid var(--color-white); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CONTROL PANE - FIELDS ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #dataTitle { color:var(--color-gray-900); font-size:1.4rem; margin-right:3rem; } #dataTitle .options { min-width: 250px; overflow: auto; } #yAxisSelectContainer { margin-right:6px; } #yAxisSelectContainer select, #xAxisSelectContainer select{ width: 0; } #yAxisSelectContainer select {display: none;} #yAxisSelectContainer .select { width: fit-content; min-width: 0;} #yAxisSelectContainer .styledSelect, #xAxisSelectContainer .styledSelect, body.share-mode #shareChartTitle b { font-weight: 800; } body.share-mode #shareChartTitle span { font-size: 1rem; } #yAxisSelectContainer .styledSelect:hover, #xAxisSelectContainer .styledSelect:hover { opacity: 0.6; } fieldselectorspacer, body.share-mode #shareChartTitle { font-weight: 600; } .second-metric-trigger-container {font-size: 0.9375rem; margin-top:0.25rem; --padding: 0.75rem 0.5rem; border-left: 3px solid var(--color-white); border-top:1px solid var(--color-gray-400); color: var(--color-gray-800); } .second-metric-trigger-container > div { padding: 0.75rem 0.5rem; display: flex; align-items: center; justify-content: space-between; color: var(--color-gray-600); transition: 0.08s ease-out; } .second-metric-trigger-container > div:hover { color: var(--color-primary-600); } body.has-second-metric #addSecondMetric, body:not(.has-second-metric) #modifySecondMetric { display: none;} body.has-second-breakdown #addSecondBreakdown, body:not(.has-second-breakdown) #modifySecondBreakdown { display: none;} body.has-second-breakdown .hide-on-second-breakdown { display: none !important; } body.map-chart #addSecondMetric, body.map-chart #addSecondBreakdown { display: none !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CONTROL PANE - CONTROLS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #dataControls { margin-top: 2px; } .control-panel-button { position:relative; width:46px; display:inline-block; text-align: center; z-index: 1; margin-left: -0.25rem; padding:0.5rem 0rem; cursor:pointer; transition: 0.1s ease; border-radius: var(--border-radius-lg); border-radius:var(--border-radius); line-height: 3.5; color:var(--color-gray-550); } .control-panel-button:hover { background:var(--color-gray-200); color:var(--color-gray-900); --background:linear-gradient(to top, var(--color-gray-200), var(--color-transparent)); } .control-panel-button i { pointer-events: none; } #dataControlPanel .options i { margin-left:-8px; width:38px; font-size:0.875rem; color:var(--color-gray-450); } #dataControlPanel select { width: 0px; } #dataControls .styledSelect:hover { color:var(--color-gray-800); opacity:1; background: var(--color-gray-200); } #chartSortSelectContainer .styledSelect.active, #chartTypeSelectContainer .styledSelect.active, #chartColorSelectContainer .styledSelect.active, #chartFilterSelectContainer .styledSelect.active i, .control-panel-button.active-button { color:var(--color-gray-800) !important; opacity:1; background: var(--color-gray-200) !important; } /*// SORT (AND TYPE) /////////////////////////////////////////////////////////////////////////////*/ #chartSortSelectContainer{ margin-right: -0.25rem; margin-left:-0.65rem; } #chartSortSelectContainer .options, #chartTypeSelectContainer .options{ right: -45px; } #chartSortSelectContainer .styledSelect, #chartTypeSelectContainer .styledSelect{ text-align: center; padding: 6px 0; margin:-6px 0; width: 70px; border-radius: var(--border-radius); } /*// TYPE ////////////////////////////////////////////////////////////////////////////////////////*/ #chartTypeSelectContainer .styledSelect { width: 58px; } #chartTypeSelectContainer .options i { margin-left:-8px; width:42px;} /*// COLOR ///////////////////////////////////////////////////////////////////////////////////////*/ #chartColorSelectContainer { margin-right: -0.125rem; margin-left: -0.25rem; } #chartColorSelectContainer .styledSelect .fa-circle { transform: translateX(0.45rem);font-size: 0.875rem; } #chartColorSelectContainer .select { width: 50px; } #chartColorSelectContainer .styledSelect { padding: 9px 0 8px 10px; margin: -8px 0; width: 38px; border-radius: var(--border-radius); } #chartColorSelectContainer .options { right: -75px; margin-top:6px; } #chartColorSelectContainer .options li:last-child, #chartFilterSelectContainer .options li:last-child{ border-top: 1px solid var(--color-gray-400); margin-top: 4px; padding-top: 12px; } #chartColorSelectContainer .options li:last-child i { font-size:1rem; } /*// DESIGN //////////////////////////////////////////////////////////////////////////////////////*/ #dataControlPanel .fa-sliders-simple { font-size: 1.0625rem; transform: translateY(1px); } #dataControlPanel #designButton { width: 50px; padding-top: 6px; } /*// FILTER //////////////////////////////////////////////////////////////////////////////////////*/ #chartFilterSelectContainer .select, #chartFilterSelectContainer .styledSelect { width: 48px; border-radius: var(--border-radius); } #chartFilterSelectContainer .fa-table { width: 52px; } #chartFilterSelectContainer .options { right: -75px; margin-top: -2px; left: -4px; } #chartFilterSelectContainer .options li:last-child { color:var(--color-gray-550); } .filter-indicator { opacity:0; width: 0; margin-right: -4px; position:relative; z-index: 1; font-size: 11px; transform: translate(-21px, -8px); color: var(--color-primary-600); pointer-events: none; } #filterAppliedAsterisk, #yscaleAppliedAsterisk { opacity: 0; font-weight:bold; color: var(--color-primary-600); display: inline-block; margin-left: 2px; } body.show-filter-indicator .filter-indicator, body.show-filter-indicator #filterAppliedAsterisk { opacity: 1; } body.show-yscale-indicator .filter-indicator, body.show-yscale-indicator #yscaleAppliedAsterisk { opacity: 1; } /*// SHARE ///////////////////////////////////////////////////////////////////////////////////////*/ #dataControlPanel #printButton { width:48px; padding-top: 9px; margin-right:12px; } #dataControlPanel .fa-arrow-up-from-square, #dataControlPanel .fa-user-group, #dataControlPanel .fa-home-alt { transform: translateY(-1px); font-size: 0.875rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// TOGGLES /////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #noteContextMenu .fa-toggle-off, #noteContextMenu .fa-toggle-on { display:none; } body.hide-labels #labelsToggle .fa-toggle-off, body.rotate-axis #rotateAxisToggle .fa-toggle-on, body.hide-gridlines #gridlinesToggle .fa-toggle-off, body.hide-x-axis #hideXAxisToggle .fa-toggle-off, body.hide-y-axis #hideYAxisToggle .fa-toggle-off, body.aggregate-average #aggAverageToggle .fa-toggle-on, body.thin-bars #thinBarsToggle .fa-toggle-on, body.remove-pie-cutout #removeCutoutToggle .fa-toggle-on, body.shades-of-color #shadesOfColorToggle .fa-toggle-on, body.hide-empty-values #hideEmptyValuesToggle .fa-toggle-on, body.include-trendline #addTrendlineToggle .fa-toggle-on, body.show-line-points #showPointsToggle .fa-toggle-on, body.interpolate-lines #interpolationToggle .fa-toggle-on, body.show-full-precision #fullPrecisionToggle .fa-toggle-on, body.y-axis-zero #startYAxisToggle .fa-toggle-off, body:not(.hide-labels) #labelsToggle .fa-toggle-on, body:not(.rotate-axis) #rotateAxisToggle .fa-toggle-off, body:not(.hide-gridlines) #gridlinesToggle .fa-toggle-on, body:not(.hide-x-axis) #hideXAxisToggle .fa-toggle-on, body:not(.hide-y-axis) #hideYAxisToggle .fa-toggle-on, body:not(.aggregate-average) #aggAverageToggle .fa-toggle-off, body:not(.thin-bars) #thinBarsToggle .fa-toggle-off, body:not(.remove-pie-cutout) #removeCutoutToggle .fa-toggle-off, body:not(.shades-of-color) #shadesOfColorToggle .fa-toggle-off, body:not(.hide-empty-values) #hideEmptyValuesToggle .fa-toggle-off, body:not(.include-trendline) #addTrendlineToggle .fa-toggle-off, body:not(.show-line-points) #showPointsToggle .fa-toggle-off, body:not(.interpolate-lines) #interpolationToggle .fa-toggle-off, body:not(.show-full-precision) #fullPrecisionToggle .fa-toggle-off, body:not(.y-axis-zero) #startYAxisToggle .fa-toggle-on { display: block; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// FONT SIZE SLIDER PANE ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .font-select { padding: 0.5rem; margin-bottom: 1.25rem; max-height: 15vh; overflow: auto; color: var(--color-gray-700); border: 2px solid var(--color-gray-300); border-radius: var(--border-radius); } .font-select div { padding:0.5rem 0.75rem; line-height: 1; border-radius: var(--border-radius); cursor: pointer; font-weight: bold; } .font-select div.selected { background:var(--color-primary-100); color:var(--color-primary-700); } .alertify input.font-slider { padding: 0 !important; width: 100%; height: 10px; margin-top:1rem; background: var(--color-gray-300); outline: none; border-radius: var(--border-radius); -webkit-transition: .2s; transition: opacity .2s; border:none; } .font-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border:5px solid var(--color-white); border-radius:100px; background: var(--color-primary-600); cursor: pointer; } .font-slider::-moz-range-thumb { width: 25px; height: 25px; background: var(--color-primary-600); cursor: pointer; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// VISUALIZATION PANE //////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #dataVisualizationPanel { width: 100%; margin-top: 1rem; height: 500px; position: relative; } #dataVisualizationPanel canvas { margin-left: -0.5rem; } #dataVisualizationPanel #chartLegend { display:none; --display:flex; width:fit-content; flex-wrap:wrap; padding-left: 1px; font-weight: 700; margin-bottom: -0.5rem; padding-top:0.25rem;} #dataVisualizationPanel #chartLegend .legend-item { cursor: pointer; border-bottom: 3px solid var(--color-transparent); padding-bottom: 1px; border-radius:var(--border-radius); margin:0 1.25rem 0.5rem 0; } #dataVisualizationPanel #chartLegend .legend-item:hover { opacity:0.8; } body.hide-second-field-legend #dataVisualizationPanel #chartLegend { display: none !important; } body.background-altered #dataVisualizationPanel{ margin-left: -2rem; width: calc(100% + 5rem); padding: 0 1.5rem 0 2rem; box-sizing: border-box; } body.hide-y-axis #dataVisualizationPanel canvas { margin-left:0; } body.tree-chart canvas { height: calc(100% + 2.5rem) !important; margin-top: -1rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// VISUALIZATION ROWS //////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #visualizationRows { height: calc(100% - 6rem); padding-top: 2rem; transition: 0.25s ease-out; } body.loading-visualization-rows #visualizationRows { transform: translateY(1rem); opacity: 0; } #visualizationRowContainer { overflow: auto; height: 100%; display: flex; justify-content: center; align-items: center; } #visualizationRowContainer::-webkit-scrollbar { width: 0px; height:0px; display: none; } #visualizationRowTable { border-collapse: collapse; margin-top: auto; margin-bottom: auto; height: fit-content; font-weight: 600; } #visualizationRowTable tr.vizualization-data-header-row { border-bottom: 2px solid var(--color-primary-600); } #visualizationRowTable th { padding: 0.5rem 1rem; } #visualizationRowTable td { padding: 1rem; font-size: 1.125rem; } #visualizationRowTable td.vizualization-row-dimension, #visualizationRowTable th.vizualization-row-dimension { padding-left: 0; text-align: left; padding-right: 5vw; word-break: break-all; } #visualizationRowTable td.vizualization-row-metric, #visualizationRowTable th.vizualization-row-metric { text-align: right; padding-right: 3vw; } #visualizationRowTable td:last-child, #visualizationRowTable th:last-child { padding-right: 0; } #visualizationRowTable tr.vizualization-data-row { border-bottom: 2px solid var(--color-gray-400); } body.hide-gridlines #visualizationRowTable tr.vizualization-data-row { border-bottom: 0; } body.hide-gridlines #visualizationRowTable td { padding-top:1.5rem !important; padding-bottom: 0 !important; } #visualizationRowTable tr:last-child td{ border-width: 0; } body.row-chart #dataVisualizationPanel #chartLegend .legend-item { border: none; } body.images-as-x-values #visualizationRowTable td.vizualization-row-dimension, body.images-as-x-values #visualizationRowTable th.vizualization-row-dimension { padding-right: 1.5vw; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// VISUALIZATION MAP ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #visualizationMap { height: calc(100% - 1rem); padding-top: 1rem; } body:not(.share-mode) #visualizationMap { width: calc(100% + 4.75rem); margin-left: -2rem; } .highcharts-mapview-inset-border { display: none; } body.map-chart li[rel="editDataYScale"] { display: none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// VISUALIZATION CONTEXT MENU //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #noteContextMenuContainer { pointer-events: none; z-index: 35; } #noteContextMenuContainer #noteContextMenu { pointer-events: all; background: var(--color-white); border: 1px solid rgba(30 41 59 / 12%); max-height: 55vh; overflow: auto; animation: slide-down .1s ease-out; --transition:0.1s ease-out; font-size: 0.9375rem; box-shadow: 0px 3px 4px -1px rgb(30 41 59 / 15%), 0px 0px 15px rgb(30 41 59 / 15%), 0px 18px 20px -15px rgb(30 41 59 / 12%); } #noteContextMenuContainer #noteContextMenu { background: rgba(251, 253, 255, 0.94); backdrop-filter: blur(30px); border-radius: 3px; } #noteContextMenuContainer #noteContextMenu { background: var(--color-white); } #noteContextMenuContainer .note-context-menu-item-full-width { color:var(--color-gray-900); margin-bottom: 0.125rem; } #noteContextMenuContainer .note-context-menu-item-option-title { cursor:pointer; width: 115px; transition:0.1s ease-out; } #noteContextMenuContainer .no-hover-style:hover { background-color: var(--color-transparent-200) !important; } #noteContextMenuContainer .note-context-menu-item-option { margin-right: 16px; padding-bottom: 2px; margin-bottom: -2px; border-bottom: 2px solid var(--color-transparent); } #noteContextMenuContainer .note-context-menu-item-option:last-of-type { margin-right: 0;} #noteContextMenuContainer .note-context-menu-item-option:hover { --border-color: var(--color-primary-600); --color:var(--color-primary-600); background: var(--color-gray-200); } #noteContextMenuContainer #noteContextMenu h2 { display:none; padding: 0.85rem 0.65rem 0.5rem; } .note-context-menu-toggle { display: flex !important; align-items: center; padding: 0 0.25rem 0 0.65rem !important} .note-context-menu-toggle:hover .note-context-menu-item-option-title{ color:var(--color-gray-900) !important; } .note-context-menu-toggle:hover .fa-toggle-off { color:var(--color-gray-550) !important; } .fa-toggle-on { color:var(--color-primary-600) !important; font-size: 22px !important; padding: 4px; transition: 0.05s ease-out; } .fa-toggle-off { color:var(--color-gray-500) !important; font-size: 22px !important; padding:4px; transition: 0.05s ease-out; } #noteContextMenuContainer.docked #noteContextMenu { border: none; box-shadow: 0 7px 14px rgba(60, 70, 88, 0.28); min-height: 90px; max-height: 65vh;} #noteContextMenuContainer.docked #noteContextMenu .hide-on-docked { display: none !important; } #noteContextMenuContainer .only-show-context-menu-item-on-share { display: none; } body.share-mode #noteContextMenuContainer .only-show-context-menu-item-on-share { display: block; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CHART TYPE SPECIFIC CSS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body.bar-chart .hide-on-bar-chart { display: none !important; } body.line-chart .hide-on-line-chart { display: none !important; } body.doughnut-chart .hide-on-pie-chart { display: none !important; } body.area-chart .hide-on-area-chart { display: none !important; } body.dots-chart .hide-on-dots-chart { display: none !important; } body.tree-chart .hide-on-tree-chart { display: none !important; } body.row-chart .hide-on-row-chart { display: none !important; } body.map-chart .hide-on-map-chart { display: none !important; } body.background-altered .hide-on-background-altered { display: none !important; } body.rotate-axis .hide-on-rotated-axis { display: none !important; } body.images-as-x-values .hide-on-images-as-x-values { display: none !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT DATA / FILTER DATA MODAL ///////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .editing-table-container { max-height:350px; position:relative; max-height:45vh; margin:0.75rem 0 -0.5rem -0.5rem; padding:0.5rem; width:100%; box-sizing: border-box; overflow-y:scroll; overflow-x: auto; } table:not(#visualizationRowTable) { width: 100%; border-collapse: collapse;} table:not(#visualizationRowTable) th, table:not(#visualizationRowTable) td { width: calc(45% - 15px); max-width: 125px; cursor:cell; padding:0.25rem 1rem 0.25rem 0.5rem; text-align: left; border:2px solid var(--color-gray-300); vertical-align: top; } table:not(#visualizationRowTable) td { white-space:nowrap; overflow: hidden;} table:not(#visualizationRowTable) th { padding:0.65rem 1rem 0.65rem 0.5rem; --border-bottom: 2px solid var(--color-gray-500); height: inherit;} table:not(#visualizationRowTable) th span{ display: block; box-sizing: content-box !important; height:100%; margin: -0.65rem -1rem -0.65rem -0.5rem; padding: 0.65rem 1rem 0.65rem 0.5rem; } table:not(#visualizationRowTable) th span.next-to-button { padding-left: 37px; } th:focus, td:focus, span:focus { cursor: text; outline-color: var(--color-primary-600); --background: var(--color-gray-100); white-space: normal !important; } table:not(#visualizationRowTable) th:first-child, table:not(#visualizationRowTable) td:first-child { color:var(--color-gray-450); cursor:default; font-weight:600; background:var(--color-gray-100); padding: 0.25rem; width: 0; text-align: right; padding-left: 6px;} .y-filter-range-input { display:flex; margin-top:-1rem; justify-content: space-between; } .y-filter-range-input label { white-space: nowrap; color:var(--color-gray-550); overflow: hidden; text-overflow: ellipsis; width: 100%; } .find-and-replace-row { background: var(--color-gray-100); border: 2px solid var(--color-gray-300); margin-top: 6px; padding: 0.25rem 0.75rem 0.25rem 0; box-sizing: border-box; width: calc(100% - 24px); } .find-and-replace-button { font-weight:700; color:var(--color-primary-700) !important; position: absolute; margin: -5px 0 0 -2px; display: flex; align-items: center; justify-content: center; width:28px; height:30px; border-radius:var(--border-radius); } .find-and-replace-button:hover { background: var(--color-gray-200); text-decoration: none !important;} .strikethrough-gray { text-decoration: line-through; color: var(--color-gray-400) !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SPEADSHEET MODAL ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #spreadsheetContainer { width: 100% !important; height: calc(100vh - 340px) !important; max-height: 375px; background: var(--color-gray-100); overflow: hidden; border: 2px solid var(--color-gray-300); border-radius: var(--border-radius); position: relative; margin-top:0.75rem; } #spreadsheetContainer .fa-spinner-third.fa-spin { font-size: 3rem; color:var(--color-gray-500); position: absolute; left:calc(50% - 1.5rem); top:calc(50% - 1.5rem); } body.fullscreen-spreadsheet .alertify-spreadsheet .dialog > *{ height: 100%; width: 100%; } body.fullscreen-spreadsheet #spreadsheetContainer { height: calc(100% - 195px) !important; max-height: none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .handsontable { z-index: 1; } .wtHolder { overscroll-behavior: none; width: 100% !important; height: 100% !important } .wtHolder::-webkit-scrollbar { width:12px; height: 12px; } .wtHolder::-webkit-scrollbar-thumb{ background :var(--color-gray-300); } .wtHolder::-webkit-scrollbar-thumb:hover{ background :var(--color-gray-400); } .wtHolder::-webkit-scrollbar-track{ background :var(--color-gray-100); } .manualColumnResizerGuide, .manualColumnResizer:hover, .manualColumnResizer.active { background-color: var(--color-primary-600) !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .handsontable .wtBorder.current { background-color: var(--color-primary-600) !important; } .handsontable .wtBorder.current.corner { background-color: var(--color-primary-800) !important; } .ht_clone_top .wtHolder { width: calc(100% - 4px) !important;} .ht_clone_left .wtHolder { height: calc(100% - 4px) !important;} .handsontable textarea { line-height: 1.9; padding-left:9px; box-shadow: inset 0 0 0 2px var(--color-primary-600) !important; color:var(--color-gray-800); } .ht_clone_top textarea { font-weight: 700; } body.applying-spreadsheet-cell-reference .handsontable .wtBorder.current { background-color: var(--color-green-500) !important; } body.applying-spreadsheet-cell-reference .handsontable .wtBorder.corner { display: none !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #spreadsheetContainer tbody th, #spreadsheetContainer th:first-child { border-left: 0 !important; } #spreadsheetContainer tr:first-child td { font-weight: 700; } #spreadsheetContainer thead th { border-top: 0 !important; border-bottom: 0 !important; background: var(--color-gray-100); text-align: center; height: 20px !important; color: var(--color-gray-450); font-weight: 600; padding: 0; vertical-align: middle;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .htContextMenu .htCore tr td:first-child { background: white !important; border: none !important; text-align: left !important; padding: 0 !important; color: var(--color-gray-700) !important; font-size: 14px; font-weight: 400 !important; } .htContextMenu .ht_master table.htCore { border-color: var(--color-gray-400) !important; } .htContextMenu table tbody tr td .htItemWrapper { padding: 0.25rem 0.5rem !important; margin: 0 !important; cursor: pointer;} .htContextMenu table tbody tr td .htItemWrapper:hover { background-color: var(--color-gray-150); color: var(--color-gray-900); } .htContextMenu .htSeparator { pointer-events: none; } .htContextMenu table tbody tr .htSeparator .htItemWrapper { border-top: 1px solid var(--color-gray-400); margin-top: 8px !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SECOND DATASET //////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .second-dataset-menu { max-height:30vh; overflow:auto; --margin-bottom:-1rem; } .second-dataset-menu .second-dataset-option { display:flex; cursor: pointer; width:95%; box-sizing: border-box; padding:0.25rem 1rem 0.45rem 0; font-weight:700; color: var(--color-gray-600); transition: 0.1s ease-out; border-radius: var(--border-radius);} .second-dataset-menu .second-dataset-option.selected, .second-dataset-menu .second-dataset-option:hover { color:var(--color-gray-800); } .second-dataset-menu .second-dataset-option i{ margin-left:1px; padding-right:8px; color:var(--color-gray-400); line-height: 1.25; font-size:1.25rem; } .second-dataset-menu .second-dataset-option .fa-square-check {color:var(--color-primary-600) !important; display:none; } .second-dataset-menu .second-dataset-option.selected .fa-square-check { display:inline-block } .second-dataset-menu .second-dataset-option.selected .fa-square { display: none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CUSTOM COLORS MODAL /////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .alertify .color-selector-panel small { font-weight: 600; font-size:1rem; } input[type="color"] { height:50px; border: none; padding: 0 !important; cursor:pointer; margin-top: -2px !important; } #saveAsDefaultButton.save-as-default { font-weight:bold; color:var(--color-primary-600); } #saveAsDefaultButton.save-as-default i { display: inline-block !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SHARE MODAL /////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .alertify .share-modal-type-selection { float:right; font-size:1rem; font-weight:600; padding-top: 0.25rem; } .alertify .share-modal-type-selection a { text-decoration: none !important; color:var(--color-gray-600); border: 2px solid var(--color-transparent); border-bottom: 2px solid var(--color-gray-300); padding: 4px 12px; margin-left: -6px; } .alertify .share-modal-extra-settings { margin: 1.5rem 0 1.75rem; color:var(--color-gray-800) } #saveAsFileContainer, #shareLinkURL { display: none; } #shareWebLinkButtonsRow { display: flex; align-items: center; justify-content: space-between; } #shareWebLinkButtonsRow div { width:calc(50% - 0.75rem); } body.share-modal-save-file #shareWebLinkContainer { display: none; } body.share-modal-save-file #saveAsFileContainer { display: block; } body:not(.share-modal-save-file) a#shareWebLinkButton, body.share-modal-save-file #shareSaveFileButton { color:var(--color-primary-600); border: 0px solid var(--color-gray-300); border-width: 2px 2px 0 2px; border-radius: var(--border-radius) var(--border-radius) 0 0; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SHARE PAGE //////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body.share-mode .hide-on-share { display: none !important; } body.share-mode .deactivate-on-share { pointer-events: none !important; } body.share-mode #shareChartTitle { margin: 1rem 0 0.5rem; line-height: 1.5; } body.share-mode #shareChartTitle b { display: inline-block; } body.share-mode #dataVisualizationPanel #chartLegend .legend-item { cursor: default; pointer-events: none; } body.share-mode #dataTitle { margin-right:0rem; } body.share-mode #noteContextMenuContainer .note-context-menu-item-option { display: block; padding: 0.5rem; width: 100%; box-sizing: border-box; border-radius: var(--border-radius); border: none; } body.hide-share-mode-header #headerContainer { display: none; } body.hide-share-mode-header #mainContainer { margin-top: 1.5rem !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// PRINT MODE //////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body.print-mode #mainContainer { width: 650px; width: 875px; height: 700px; pointer-events: none; margin-top:0; } body.print-mode #dataTitle { width:100%; margin-bottom:1.5rem; font-size:1.55rem; } body.print-mode .styledSelect { white-space: nowrap; max-width:650px; overflow:hidden; display: flex; } body.print-mode select { display:none; } body.print-mode #chartTypeSelectContainer, .print-mode #chartColorSelectContainer, .print-mode .control-panel-button, body.print-mode #chartSortSelectContainer { display:none; } body.print-mode #dataControlPanel { margin-top: 0rem; } body.print-mode .filter-indicator { display: none;} body.print-mode #dataVisualizationPanel { height:610px !important; margin-top:0; } body.print-mode #dataVisualizationPanel #chartLegend { margin-top: -2rem; } body.print-mode.row-chart #mainContainer { height: 100%; } body.print-mode .alertify-logs { display: none;} body.print-mode.row-chart #dataControlPanel, body.print-mode.row-chart #chartLegened { display:none; } body.print-mode.row-chart #visualizationRowContainer { overflow: visible; zoom:0.85; justify-content: flex-start; align-items: flex-start; } body.print-mode.row-chart * { break-inside: avoid; } body.print-mode.map-chart #visualizationMap.state { width: 800px; margin-left: 60px; margin-top:-20px; } body.print-mode.map-chart #visualizationMap.world { width: 1150px; margin-left:-125px; margin-top: 10px; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CUSTOM SELECT ELEMENT ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ select{ padding: 0; } .s-hidden { visibility:hidden; padding-right:10px; } .select { display: inline-block; position: relative; padding-bottom:8px; margin-bottom:-8px; } .styledSelect { font-weight: bold; cursor: pointer; transition:0.1s ease-out; } .styledSelect:hover { opacity: 0.7; } .select:hover { border-color:var(--color-primary-600); } .styledSelect:active, .styledSelect.active { border-color: var(--color-primary-600); } .options { display:none; max-height:400px; overflow:auto; position:absolute; top:calc(100%); right:0; left:0; z-index:30; margin:0 0; font-weight:600; border-radius:var(--border-radius); padding:0 0; list-style:none; background-color:var(--color-white); box-shadow:0 7px 14px rgba(60, 70, 88, 0.28); margin-top:4px; font-size: 1rem; animation: slide-down .1s ease-out; scrollbar-gutter: stable; } .options li { font-size:0.9375rem; padding:0.65rem 0.5rem; border-left:3px solid var(--color-white); cursor:default; transition: 0.08s ease-out; color:var(--color-gray-800); } .options li:hover { border-color:var(--color-primary-600); color:var(--color-primary-600) !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ALERTIFY ADJUSTMENTS ////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .alertify .dialog > * { width: 500px; min-width: 0 !important; } .alertify small { font-size: 14px; display:inline-block; } .alertify button { padding: 0.6rem 1rem !important; transition: 0.05s ease !important; margin-top:1.65rem !important; } .alertify a { color:var(--color-primary-600); } .alertify .fa-table-layout { color: var(--color-green-500); } .alertify li { line-height: 1.3; margin-bottom: 1rem; margin-left: -0.5rem; } .alertify-box-button { padding: 0.5rem 1.8rem; background: var(--color-white); border: 2px solid var(--color-gray-400); transition: 0.1s ease-out; margin:0 1rem 0 0; border-radius: var(--border-radius); cursor: pointer; color: var(--color-gray-700); font-weight: 700; text-align: center; } .alertify-box-button:hover, .alertify-box-button.highlighted { color: var(--color-primary-800); background:var(--color-gray-100); border-color: var(--color-primary-500); } .alertify-box-button:active { transform:translateY(2px); background: var(--color-gray-300); color: var(--color-primary-900);} .alertify-warning-label { display: flex; align-items: flex-start; padding: 0.5rem 0.75rem; font-weight: 600; border:2px solid var(--color-gray-300); border-radius: var(--border-radius); margin: 1rem 0; } .alertify-warning-label i { margin: 0.25rem 0.75rem 0 .25rem; color:var(--color-gold-500); } .alertify-logs > .error { background:var(--color-gold-600); color: var(--color-white) } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EXTENDED LOADING ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #extendedLoadingContainer { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(26,32,44,0.4); display: none; align-items: center; justify-content: center; z-index: 1000;} #extendedLoadingTile { background: var(--color-white); padding: 2rem; border-radius: var(--border-radius); text-align: center; transition: 0.15s ease-out; box-shadow: 0px 15px 35px rgba(45,55,72,0.5); } #extendedLoadingTile h2 { font-size:1.5rem; } #extendedLoadingTile img { width: 275px; margin: -50px -30px -40px; } #extendedLoadingTile h2, p { position: relative; z-index: 1; } #extendedLoadingTimeDisplay { color: var(--color-gray-800); margin-top:1rem; font-weight: 700; } body.show-extended-loading #extendedLoadingContainer { display: flex; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #extendedLoadingTile video { height: 206px; width:275px; margin: -15px -20px -10px; pointer-events: none; } #extendedLoadingTile.video-animation { background: #010429; } #extendedLoadingTile.video-animation h2 { color: var(--color-white); } #extendedLoadingTile.video-animation p { opacity: 0.75; color: var(--color-white); } #extendedLoadingTile.video-animation #extendedLoadingTimeDisplay { opacity: 0.9; color: var(--color-white); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// MOBILE //////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .hide-on-desktop{ display:none !important; } @media only screen and (max-width:500px) { .hide-on-desktop{ display:inline-block !important; } .hide-on-mobile { display: none !important; } body{ position: fixed !important; } ::-webkit-scrollbar { width: 0px; height:0px; display: none; } #mainContainer { width: calc(100% - 2.5rem); margin-left: 0rem; } #dataControlPanel { margin: -1.25rem 0 -1rem } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// IN-BROWSER ADJUSTMENTS //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ body:not(.pwa-mode) #uploadDropZone { margin-top: -2rem; height: calc(100% - 12rem); } body:not(.pwa-mode) #mainContainer { margin-top: 7rem; } body:not(.pwa-mode) #dataControlPanel { margin: -1rem 0 0rem; } body:not(.pwa-mode) #dataVisualizationPanel { margin-top:0 !important; } body:not(.pwa-mode) #dataControlPanel #dataControls { margin: -5px 0 4px } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING ADJUSTMENTS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ landing landingHeader span.right-side-option { margin-right: 0rem; } landing landingContainer { margin-left: 0; } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// IN-BROWSER ADJUSTMENTS //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ #uploadDropZone { margin-top: -0.75rem; height: calc(100% - 4rem); border-width: 0; } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// UPLOAD PANEL ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ #uploadDropZone div.new-data-source-option-container { display:block; } #uploadDropZone div.new-data-source-option { margin-bottom: 0.5rem ;} #uploadDropZone div.new-data-source-option, #uploadDropZone label { text-align: center !important;} #uploadDropZone div.new-data-source-option-container > div:not(.new-data-source-option-horizontal-divider) { width: 245px; } #uploadDropZone #recentDatasetsSelectContainer .options { max-width: 70vw; min-width: 245px; } #recentDatasetsSelectContainer select {display: none; } #uploadDropZone div.new-data-source-option-container, #uploadDropZone #useSampleButton, #uploadDropZone #recentDatasetsSelectContainer .styledSelect, #uploadDropZone #recentDatasetsSelectContainer .options li:first-of-type, #uploadDropZone #recentDatasetsSelectContainer .options input { width: 245px; } .aws-file-uploading-icon, .ask-data-question-discard-button { bottom: 6rem; } .fa-aws { transform: none; } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CONTORL PANEL ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ header .header-page-item i { opacity: 1; } body.pwa-mode #dataControlPanel #dataControls { margin: -0.5rem 0 0.75rem } #chartSortSelectContainer { margin-left: -0.5rem; } body:not(.share-mode) #dataControlPanel #dataTitle { width: 100%; overflow-x: auto; overflow-y:hidden; overscroll-behavior: none; white-space: nowrap; display: block; margin-right: 0;} body:not(.share-mode) .control-panel-button{ width:38px !important; } body:not(.share-mode) #chartColorSelectContainer .select, body:not(.share-mode) #chartTypeSelectContainer .styledSelect { width: 45px !important} body:not(.share-mode) #chartColorSelectContainer { margin-left: 1rem; } body:not(.share-mode) #chartFilterSelectContainer .styledSelect, #chartFilterSelectContainer .select{ width: 35px; } body:not(.share-mode) #chartTypeSelectContainer { margin: 0 -1.75rem 0 -0.4rem; } body:not(.share-mode) #dataTitle .select { position: static; } body:not(.share-mode) #dataTitle .options { top:0; left:10; right:10; } .filter-indicator { transform: translate(-16px, -8px); } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// VISUALIZATION ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ #dataVisualizationPanel { margin-top: 0.25rem; } #dataVisualizationPanel #chartLegend { padding: 0.5rem 0 0 2px; } #visualizationRows { height: calc(100% - 3rem); } #visualizationRowTable { width: 100%; } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT DATA/ //////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ th { height: 100%; } #spreadsheetContainer { height: 250px !important; } #spreadsheetDescription { display: none; } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SHARE MODE //////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ body.share-mode #shareChartTitle { margin: 1.5rem 0 0; line-height: 1.5; } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ALERTIFY ////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ body:not(.share-mode) .alertify { align-items: flex-start; } body:not(.share-mode) .alertify .dialog > * { padding: 0.5rem 0 15vh ; box-shadow: none; } body:not(.share-mode) .alertify .alert, body:not(.share-mode) .alertify .dialog { height: 100%; background: var(--color-white); top: 2rem !important; border-radius: 30px 30px 0 0; box-shadow: 0px -3px 8px rgb(0 0 0 / 15%) } } /*////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NARROW IFRAME USAGE /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////*/ @media only screen and (max-width:300px) { body.share-mode.hide-share-mode-header #mainContainer { width: 100%; margin-top: 0 !important; } body.share-mode #visualizationRowTable td { font-size: 0.9375rem; padding: 0.75rem 0; } body.share-mode #visualizationRowTable { margin-top: 0;} body.share-mode #visualizationRows { padding-top: 0.25rem; } body.share-mode #dataTitle { font-size: 1.25rem; margin: -0.35rem 0 0.5rem; } body.share-mode #noteContextMenuContainer #noteContextMenu { display: none !important; } }