github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/static/css/dashboard.css (about)

     1  /* THEME BASED COLORS */
     2  *{
     3    box-sizing: border-box;
     4  }
     5  :root{
     6    --db-bg-color: var(--black-2);
     7    --db-options-bg-color:var(--black-3);
     8    --edit-panel-bg-color:var(--black-1);
     9    --panel-table-bg-color:var(--black-2);
    10    --panel-table-line-color:var(--white-4);
    11    --edit-panel-border-color:var(--black-5);
    12    --edit-panel-option-bg-color:var(--black-2);
    13    --edit-panel-dropdown-bg-color-hover:var(--black-2);
    14    --edit-panel-input-bg-focus:var(--black-1);
    15    --color-selector-active:var(--white-1);
    16    --number-and-unit-color:var(--orange-1);
    17    --db-setting-option-selected:var(--black-4);
    18    --db-setting-option-text-selected:var(--white-1);
    19    --db-setting-placeholder:var(--black-5);
    20    --db-setting-text:var(--white-2);
    21    --legend-element-hover: var(--white-1);
    22    --top-setting-btn-bg-img: url("../assets/settings-icon.svg");
    23    --top-save-btn-bg-img: url("../assets/save-icon.svg");
    24    --top-refresh-btn-bg-img: url("../assets/refresh-icon.svg");
    25    --arrow-dashboard-img: url("../assets/arrow-dashboard-light.svg");
    26  }
    27  
    28  [data-theme='light']{
    29    --db-bg-color: var(--white-0);
    30    --db-options-bg-color:var(--white-3);
    31    --edit-panel-bg-color:var(--white-0);
    32    --panel-table-bg-color:var(--white);
    33    --panel-table-line-color: var(--white-3);
    34    --edit-panel-border-color:var(--white-3);
    35    --edit-panel-option-bg-color:var(--white-2);
    36    --edit-panel-dropdown-bg-color-hover:var(--white-2);
    37    --color-selector-active:var(--black-1);
    38    --edit-panel-input-bg-focus:var(--white-2);
    39    --db-setting-option-text-selected:var(--black-1);
    40    --number-and-unit-color:var(--purple-1);
    41    --db-setting-option-selected:var(--white-8);
    42    --db-setting-placeholder:var(--black-6);
    43    --db-setting-text:var(--black-4);
    44    --legend-element-hover: var(--black-1);
    45    --top-setting-btn-bg-img: url("../assets/setting-icon.svg");
    46    --top-save-btn-bg-img: url("../assets/save-btn.svg");
    47    --top-refresh-btn-bg-img: url("../assets/refreshy-icon.svg");
    48    --arrow-dashboard-img: url("../assets/arrow-dashboard-black.svg");
    49  }
    50  
    51  
    52  /* PANEL EDITOR PAGE */
    53  
    54  .panelEditorLeft {
    55    width: 70%;
    56    display: flex;
    57    flex-direction: column;
    58    align-items: center;
    59    justify-content: flex-start;
    60    padding-right: 2%;
    61  }
    62  
    63  /* PANEL-OPTIONS */
    64  
    65  .panelEditorRight {
    66    width: 30%;
    67    display: flex;
    68    flex-direction: column;
    69    align-items: center;
    70    position: relative;
    71  }
    72  
    73  
    74  .panelEditorRightTop {
    75    width: 100%;
    76    display: flex;
    77    flex-direction: column;
    78    align-items: center;
    79    height: 100%;
    80    border-radius: 5px;
    81    border: 1px solid var(--border-color-regular);
    82    box-shadow: 0px 2px 8px 0px #00000029;
    83  }
    84  
    85  .submitBtn-container {
    86    justify-self: center;
    87    max-height: 100%;
    88    width: 85%;
    89    display: flex;
    90    flex-direction: row;
    91    justify-content: flex-end;
    92    justify-self: flex-end;
    93    bottom: 30px;
    94    right: 30px;
    95    padding-bottom: 30px;
    96  }
    97  
    98  .title1 {
    99    width: 85%;
   100    margin-top: 16px;
   101    display: flex;
   102    flex-direction: row;
   103    align-items: center;
   104    font-size: 22px;
   105    margin-bottom: 15px;
   106  }
   107  
   108  .panEdit-nameChange,
   109  .panEdit-descrChange {
   110    width: 85%;
   111  }
   112  
   113  .panEdit-nameChange {
   114    display: flex;
   115    flex-direction: column;
   116    justify-content: center;
   117    align-items: flex-start;
   118  }
   119  
   120  #panEdit-nameChangeInput {
   121    border: 1px solid var(--border-color-regular);
   122    outline: none;
   123    padding: 0.25rem 0.5rem;
   124    width: 100%;
   125    border-radius: 5px;
   126    font-size: 18px;
   127    height: 32px;
   128  }
   129  
   130  .panEdit-descrChange {
   131    display: flex;
   132    flex-direction: column;
   133    justify-content: center;
   134    align-items: flex-start;
   135    margin-bottom: 1rem;
   136  }
   137  
   138  #panEdit-descrChangeInput {
   139    border: 1px solid transparent;
   140    outline: none;
   141    padding: 0.25rem 0.5rem;
   142    width: 100%;
   143    border-radius: 5px;
   144    font-size: 18px;
   145    height: 100px;
   146    resize: none;
   147    margin-top: 15px;
   148    border: 1px solid var(--border-color-regular);
   149  }
   150  
   151  #panEdit-descrChangeInput,
   152  #panEdit-nameChangeInput {
   153    font-size: 14px;
   154    background-color: var(--drop-down-btn-bg-regular);
   155    color: var(--text-color);
   156  }
   157  
   158  #panEdit-nameChangeInput:focus,
   159  #panEdit-descrChangeInput:focus {
   160    border: 1px solid var(--purple-1);
   161    background: var(--edit-panel-input-bg-focus);
   162  }
   163  
   164  .dropDownTitle {
   165    width: 85%;
   166    padding: 0.5em 0.75em;
   167    cursor: pointer;
   168    transition: all 0.3s;
   169    border-radius: 5px;
   170    height: 32px;
   171    display: flex;
   172    flex-direction: row;
   173    justify-content: space-between;
   174    align-items: center;
   175    font-size: 14px;
   176    border: 1px solid var(--border-color-regular);
   177  }
   178  
   179  .dropDown-data-options.active  .dropDown-data-options.selected{
   180    width: 85%;
   181    background-color: #2a2f3b;
   182    background-color: var(--black-1);
   183    color: #fff;
   184    padding: 0.5em 0.75em;
   185    cursor: pointer;
   186    transition: all 0.3s;
   187    border-radius: 5px;
   188    display: flex;
   189    flex-direction: row;
   190    justify-content: space-between;
   191    align-items: center;
   192  }
   193  
   194  .dropDownTitle.active {
   195    background-color: rgba(99, 71, 217, 0.15);
   196    border: 1px solid var(--purple-1);
   197  }
   198  
   199  .dropDownTitle:hover {
   200    background-color: var(--edit-panel-dropdown-bg-color-hover);
   201  }
   202  
   203  .dropDown-color, .dropDown-unit , .dropDown-logLinesView{
   204    margin-top: 15px;
   205  }
   206  .editPanelMenu-logLinesView .editPanelMenu-options{
   207    padding: 0px;
   208    height: 28px;
   209  }
   210  .dropDown-unit,.dropDown-logLinesView{
   211    display: none;
   212  }
   213  
   214  .caret {
   215    width: 0;
   216    height: 0;
   217    border-left: 5px solid transparent;
   218    border-right: 5px solid transparent;
   219    border-top: 6px solid var(--orange-1);
   220    transition: 0.3s;
   221    rotate: 180deg;
   222  }
   223  
   224  .horizontalCaret{
   225    width: 0;
   226    height: 0;
   227    border-left: 5px solid transparent;
   228    border-right: 5px solid transparent;
   229    border-top: 6px solid var(--orange-1);
   230    transition: 0.3s;
   231    rotate: 90deg;
   232  }
   233  
   234  .editPanelMenu{
   235    list-style: none;
   236    width: 85%;
   237    cursor: pointer;
   238    font-size: 14px;
   239    background-color: var(--edit-panel-bg-color);
   240    display: flex;
   241    flex-direction: column;
   242    align-items: center;
   243    border: 1px solid var(--edit-panel-border-color);
   244    border-radius: 5px;
   245    margin-top: 8px;
   246    margin-bottom: 0;
   247    padding: 10px 0;
   248  }
   249  
   250  .editPanelMenu-options, .editPanelMenu-unit-options {
   251    width: 92%;
   252    border-radius: 4px;
   253    display: flex;
   254    flex-direction: row;
   255    padding: 10px 0 10px 12px;
   256  }
   257  
   258  .editPanelMenu-unit-options {
   259    display: flex;
   260    align-items: center;
   261    justify-content: space-between;
   262    height: max-content;
   263    padding: 5px 6px 5px 0px;
   264  }
   265  
   266  .inner-options{
   267    width: 92%;
   268    height: 25px;
   269    border-radius: 4px;
   270    background-color: var(--black-2);
   271    margin-top: 3px;
   272    display: flex;
   273    flex-direction: row;
   274    align-items: center;
   275    justify-content: flex-start;
   276    padding-left: 10px;
   277  }
   278  
   279  .editPanelMenu-options:not(:first-child), .editPanelMenu-unit-options:not(:first-child){
   280    margin-top: 7px;
   281  }
   282  
   283  .editPanelMenu-options li {
   284    display: flex;
   285    flex-direction: row;
   286    align-items: center;
   287    height: 30px;
   288    margin-left: 11px;
   289  }
   290  
   291  .editPanelMenu-unit-options li {
   292    display: flex;
   293    flex-direction: row;
   294    align-items: center;
   295    height: 100%;
   296    margin-left: 11px;
   297  }
   298  
   299  .editPanelMenu-options:hover,  .editPanelMenu-unit-options:hover{
   300    background-color: var(--purple-1);
   301    color: var(--white-1);
   302  }
   303  
   304  .editPanelMenu-options input[type="checkbox"] {
   305    cursor: pointer;
   306  }
   307  
   308  .editPanelMenu-unit-options input[type="checkbox"] {
   309    cursor: pointer;
   310  }
   311  
   312  /* .editPanelMenu-chart {
   313    margin-bottom: 1rem;
   314  } */
   315  
   316  .dropDownTitle {
   317    background-color: var(--drop-down-btn-bg-regular);
   318    color: var(--text-color);
   319  }
   320  
   321  .editPanelMenu-options,.editPanelMenu-unit-options,.inner-options{
   322    background-color: var(--edit-panel-option-bg-color);
   323    color: var(--black-5);
   324  }
   325  
   326  .inner-options:hover,.editPanelMenu-unit-options:hover,.editPanelMenu-options:hover,
   327  .editPanelMenu-options.selected,.editPanelMenu-unit-options.selected, .inner-options.selected,
   328  .inner-options.active {
   329    background-color: var(--purple-1);
   330    color: var(--white-0);
   331  }
   332  
   333  
   334  
   335  
   336  /* COLOR PALETTE */
   337  .colorCircle {
   338    width: 25px;
   339    height: 25px;
   340    border-radius: 50%;
   341    border: 1.5px solid var(--white-0);
   342  }
   343  
   344  .colorCircle:not(:first-child) {
   345    margin-left: 14px;
   346  }
   347  
   348  .colorCircle.selected {
   349    border: 1.5px solid var(--color-selector-active);
   350  }
   351  
   352  .colorCircle-1 {
   353    background-color: var(--lavender-1);
   354    border: 1.5px solid var(--lavender-1);
   355  }
   356  
   357  .colorCircle-2 {
   358    background-color: var(--purple-1);
   359    border: 1.5px solid var(--purple-1);
   360  }
   361  
   362  .colorCircle-3 {
   363    background-color: var(--orange-1);
   364    border: 1.5px solid var(--orange-1);
   365  }
   366  
   367  .colorCircles {
   368    display: flex;
   369    flex-direction: row;
   370    justify-content: flex-start;
   371    align-items: center;
   372    margin-top: 6px;
   373  }
   374  
   375  .editPanelMenu-color {
   376    display: flex;
   377    flex-direction: column;
   378    align-items: flex-start;
   379    padding-left: 12px;
   380  
   381    font-size: 14px;
   382    padding-bottom: 13px;
   383    color: var(--black-5);
   384  }
   385  
   386  
   387  .colorLine {
   388    width: 95%;
   389    height: 9px;
   390    border-radius: 20px;
   391    margin-left: 2px;
   392    margin-top: 5px;
   393  }
   394  
   395  .colorLine-gyr {
   396    background: linear-gradient(270deg, #F24B5B 0%, #EDDB30 50.31%, #68AA5F 100%);
   397  }
   398  
   399  .colorLine-bg {
   400    background: linear-gradient(270deg, #4BF266 0%, #30E2ED 50.31%, #2262C3 100%);
   401  }
   402  
   403  .editPanelMenu-color span {
   404    height: 20px;
   405    display: flex;
   406    align-items: center;
   407  }
   408  
   409  .span-colorCircles {
   410    margin-top: 5x;
   411  }
   412  
   413  .span-colorLine {
   414    margin-top: 12px;
   415  }
   416  
   417  /* QUERY INPUT SECTION - BOTTOM LEFT */
   418  .queryInputs {
   419    width: 100%;
   420    display: flex;
   421    flex-direction: row;
   422    justify-content: space-between;
   423    margin-top: 26px;
   424    align-items: flex-start;
   425  }
   426  
   427  .dropDown-container {
   428    width: 18%;
   429  }
   430  
   431  .dropDown {
   432    display: flex;
   433    flex-direction: row;
   434    justify-content: flex-end;
   435  }
   436  
   437  .editPanelMenu-dataSource {
   438    width: 100%;
   439  }
   440  
   441  .queryInput-container {
   442    width: 82%;
   443    display: flex;
   444    flex-direction: column;
   445    margin-left: 10px;
   446    justify-content: space-between;
   447    max-height: 100px;
   448  }
   449  
   450  .queryInput-InnerContainer{
   451    display: flex;
   452    flex-direction: row;
   453  }
   454  
   455  .dropDown-dataSource {
   456    width: 100%;
   457    height: 32px;
   458  }
   459  
   460  .queryInput {
   461    height: 32px;
   462    font-size: 14px;
   463    width: 100%;
   464    color: var(--search-bar-text-color-regular-or-hover);
   465    background: var(--search-bar-bg);
   466    outline: none;
   467    border-radius: 5px;
   468    padding-left: 10px;
   469    padding-right: 40px;
   470    border: 1px solid var(--border-color-regular);
   471  }
   472  
   473  .edit-panel-corner-popup {
   474    top: 100px;
   475  }
   476  
   477  
   478  /* PANEL DISPLAY */
   479  
   480  .panelDisplay {
   481    display: flex;
   482    flex-direction: column;
   483    align-items: center;
   484    width: 100%;
   485    min-height: 55vh;
   486    height: max-content;
   487    justify-content: center;
   488    border-radius: 5px;
   489    position: relative;
   490    background-color: var(--datatable-bg-color);
   491  }
   492  
   493  .panelDescription {
   494    width: 100%;
   495    min-height: 65px;
   496    display: flex;
   497    flex-direction: row;
   498    align-items: center;
   499    justify-content: space-between;
   500    font-size: 1.5rem;
   501  }
   502  
   503  .panelDescription .dropDown-container {
   504    width: auto;
   505  }
   506  
   507  .dropDown-timePicker span {
   508    font-size: 1rem;
   509  }
   510  
   511  .panelDisplay .panEdit-panel{
   512    height: 100%;
   513    width: 100%;
   514    background-color: var(--drop-down-btn-bg-regular);
   515    overflow: hidden;
   516    margin: 0;
   517    border-radius: 5px;
   518    padding: 10px;
   519  }
   520  
   521  .panelDisplay .timePicker {
   522    background-color: var(--black-1);
   523    padding: 0.75em 1em;
   524    border-radius: 5px;
   525    color: #fff;
   526  }
   527  
   528  /* BUTTONS */
   529  
   530  .btn-runQuery {
   531    background: var(--btn-regular-bg-color) !important;
   532    margin: 0;
   533    padding: 0px 12px;
   534    text-decoration: none;
   535    border: none;
   536    height: 32px;
   537    line-height: 7px;
   538    margin-top: 10px;
   539    align-self: flex-end;
   540    border-radius: 5px;
   541    box-shadow: none !important;
   542    font-size: 14px;
   543    color: white !important;
   544  }
   545  
   546  .btn-runQuery:hover {
   547    background: var(--btn-hover-or-click-bg-color) !important;
   548  }
   549  
   550  .btn-runQuery:active {
   551    background: var(--btn-hover-or-click-bg-color) !important;
   552  }
   553  
   554  .panelEditor-container {
   555    display: flex;
   556    flex-direction: row;
   557    width: 100%;
   558    min-height: 100vh;
   559    background-color: var(--db-bg-color);
   560    padding: 1.5%;
   561  }
   562  
   563  /* PANEL EDIT NAV BAR */
   564  .panEdit-navBar {
   565    display: flex;
   566    flex-direction: row;
   567    align-items: center;
   568    justify-content: space-between;
   569    width: 100%;
   570    background-color: var(--db-bg-color);
   571    color: var(--text-color);
   572    font-size: 18px;
   573    margin-bottom: 12px;
   574  }
   575  
   576  .panEdit-navBar .dropdown{
   577    display: flex;
   578    flex-direction: row;
   579    justify-content: flex-end;
   580  }
   581  
   582  .panEdit-navBar #date-picker-btn, .panEdit-navBar #index-btn , .table-view-toggle-container{
   583    margin-left: 15px;
   584  }
   585  
   586  .panEdit-goToDB, .panView-goToDB {
   587    cursor: pointer;
   588    padding: 0.25rem 0.5rem;
   589    color: var(--purple-1);
   590    font-weight: 600;
   591  }
   592  
   593  .panView-goToDB {
   594    display: none;
   595  }
   596  
   597  .panEdit-navBtns {
   598    display: flex;
   599    flex-direction: row;
   600    align-items: center;
   601    width: 100%;
   602    justify-content: flex-end;
   603    margin-bottom: 12px;
   604  }
   605  
   606  .panEdit-btn {
   607    height: 32px;
   608    outline: none;
   609    border: 0px;
   610    margin-right: 10px;
   611    line-height: 14px;
   612    border-radius: 5px;
   613    box-shadow: none !important;
   614    font-size: 14px;
   615    border: 1px solid var(--border-color-regular) !important;
   616  }
   617  
   618  
   619  .panEdit-btn:last-child {
   620    margin-right: 0;
   621  }
   622  
   623  .panelEditorRight .dropdown{
   624    display: flex;
   625    flex-direction: row;
   626  }
   627  
   628  /* DASHBOARD.HTML */
   629  
   630  .panel-container {
   631    position: relative;
   632  }
   633  
   634  
   635  /* DASHBOARD SAVE POPUP */
   636  .classBody {
   637    position: relative;
   638  }
   639  
   640  .div-toast {
   641    background: linear-gradient(to right, #6347D9, #160F29);
   642    right: 15px;
   643    top: 70px;
   644    position: absolute;
   645    padding: 0.5rem 1rem;
   646    transition: 1s;
   647    z-index: 2;
   648    color: var(--white-0);
   649  }
   650  
   651  .toast-close {
   652    cursor: pointer;
   653    border: none;
   654    outline: none;
   655    background-color: transparent;
   656    color: var(--white-0);
   657  }
   658  
   659  .panelDisplay #corner-popup {
   660    position: static;
   661    border: none;
   662    background-color: var(--datatable-bg-color);
   663    margin: 0;
   664    display: flex;
   665    justify-content: center;
   666    align-items: center;
   667    height: 100%;
   668    width: 100%;
   669    max-height: 100%;
   670    font-size: 24px;
   671    font-weight: 700;
   672    color: var(--empty-response-text-color);
   673    z-index: 1;
   674  }
   675  
   676  /* EMPTY-RESPONSE CSS FIX */
   677  .panelDisplay #empty-response,
   678  .panel #empty-response {
   679    margin: 0;
   680    display: flex;
   681    justify-content: center;
   682    align-items: center;
   683    font-size: 24px;
   684    font-weight: 700;
   685    height: 100%;
   686    width: 100%;
   687    background-color: var(--datatable-bg-color);
   688    border-radius: 5px;
   689  }
   690  
   691  /* AG-GRID DIV HEADER STYLES */
   692  .panel .ag-header {
   693    background-color: var(--black-1) !important;
   694    color: var(--white-3) !important;
   695    border-bottom: 1px solid var(--white-4) !important;
   696  }
   697  
   698  /* SIDENAV */
   699  #app-container #app-side-nav {
   700    height: 100vh;
   701    position: fixed;
   702    z-index: 2;
   703  }
   704  
   705  /* BIG NUMBER */
   706  .big-number-display-container {
   707    display: flex;
   708    justify-content: center;
   709    align-items: center;
   710    background-color: var(--datatable-bg-color);
   711    border-radius: 5px;
   712    height: 100%;
   713    width: 100%;
   714  }
   715  
   716  .big-number {
   717    display: flex;
   718    justify-content: center;
   719    align-items: center;
   720    color: var(--orange-1);
   721    font-size: 8vmax;
   722    font-weight: 500;
   723    color: var(--number-and-unit-color);
   724  }
   725  
   726  .unit {
   727    display: flex;
   728    justify-content: center;
   729    align-items: flex-end;
   730    position: relative;
   731    bottom: 28px;
   732    margin-left: 16px;
   733    font-size: 85px;
   734    font-weight: 500;
   735    color: var(--number-and-unit-color);
   736  }
   737  
   738  /* DASHBOARD SETTINGS PAGE */
   739  .dbSet-navBar {
   740    display: flex;
   741    flex-direction: row;
   742    align-items: center;
   743    justify-content: space-between;
   744    margin: 12px 20px;
   745  }
   746  
   747  .dbSet-body {
   748    min-width: 100vw;
   749    min-height: 92vh;
   750    display: flex;
   751    flex-direction: row;
   752    position: relative;
   753  }
   754  
   755  /* DASHBOARD SETTINGS - LEFT */
   756  .dbSet-left {
   757    width: 25%;
   758    height: 92vh;
   759    background-color: var(--db-options-bg-color);
   760    display: flex;
   761    flex-direction: column;
   762    align-items: center;
   763    border-radius: 0 5px 0 0;
   764  }
   765  
   766  .dbSet-nav {
   767    height: 50px;
   768    width: 100%;
   769    display: flex;
   770    flex-direction: row;
   771    align-items: center;
   772    width: 90%;
   773    margin-top: 1rem;
   774  }
   775  
   776  .dbSet-goToDB {
   777    cursor: pointer;
   778    padding: 0.25rem 0.5rem;
   779    color: var(--purple-1);
   780    font-weight: 600;
   781  }
   782  
   783  .dbSet-heading {
   784    padding-left: 1rem;
   785  }
   786  
   787  .dbSet-options {
   788    display: flex;
   789    flex-direction: column;
   790    width: 80%;
   791    margin-top: 1rem;
   792    color: var(--db-setting-option-text-selected);
   793  }
   794  
   795  .dbSet-options>span {
   796    padding: 0.75rem 1.25rem;
   797  }
   798  
   799  .dbSet-options span {
   800    border-radius: 5px;
   801  }
   802  
   803  .dbSet-jsonModel {
   804    margin-top: 1rem;
   805    cursor: pointer;
   806  }
   807  
   808  .dbSet-general {
   809    cursor: pointer;
   810  }
   811  
   812  .dbSet-dbName::placeholder,
   813  .dbSet-dbDescr::placeholder,
   814  .dbSet-jsonModelData::placeholder {
   815    color: var(--db-setting-placeholder);
   816  }
   817  
   818  .dbSet-dbName,
   819  .dbSet-dbDescr,
   820  .dbSet-jsonModelData {
   821    color: var(--db-setting-text);
   822  }
   823  
   824  /* DASHBOARD SETTINGS - RIGHT */
   825  .dbSet-right {
   826    width: 72%;
   827    height: 92vh;
   828  }
   829  
   830  .dbSet-generalHTML {
   831    width: 100%;
   832    height: 100%;
   833    display: flex;
   834    flex-direction: column;
   835    align-items: center;
   836    position: relative;
   837  }
   838  
   839  .dbSet-inputContainer{
   840    width: 80%;
   841    display:flex;
   842    flex-direction: column;
   843    align-items: flex-start;
   844  }
   845  
   846  #dbSet-nameContainer{
   847    margin-top: calc(50px + 2rem);
   848  }
   849  
   850  #dbSet-descrContainer{
   851    margin-top: 2rem;
   852    height: 40vh;
   853  }
   854  
   855  .dbSet-dbName {
   856    border: 1px solid var(--white-4);
   857    outline: none;
   858    padding: 0.8rem 1.25rem;
   859    width: 80%;
   860    background: transparent;
   861    border-radius: 5px;
   862    margin-top: 10px;
   863  }
   864  
   865  .dbSet-dbDescr {
   866    border: 1px solid var(--white-4);
   867    outline: none;
   868    padding: 1rem 1.25rem;
   869    width: 80%;
   870    background: transparent;
   871    border-radius: 5px;
   872    height: 40%;
   873    resize: none;
   874    margin-top: 10px;
   875  }
   876  
   877  .dbSet-dbDescr:focus {
   878    color: var(--search-bar-text-color-active);
   879    border-radius: 5px;
   880    background: var(--search-bar-bg);
   881    outline: 1pt solid var(--drop-down-btn-border-active);
   882    outline-offset: -1pt;
   883  }
   884  
   885  .dbSet-saveBtnContainer {
   886    width: 80%;
   887    display: flex;
   888    flex-direction: row;
   889    align-items: center;
   890    justify-content: flex-end;
   891  
   892    position: absolute;
   893    bottom: 50px;
   894    right: 10%;
   895  }
   896  
   897  .dbSet-container .selected {
   898    background: var(--db-setting-option-selected);
   899  }
   900  
   901  .dbSet-right .hide {
   902    display: none;
   903    pointer-events: none;
   904    user-select: none;
   905  }
   906  
   907  /* JSON MODEL CONTAINER */
   908  
   909  .dbSet-jsonModelTitle {
   910    color: var(--text-color);
   911    background-color: transparent;
   912    display: flex;
   913    flex-direction: row;
   914    align-items: flex-end;
   915    width: 80%;
   916    height: 15%;
   917    font-size: 20px;
   918  }
   919  
   920  .dbSet-textareaContainer {
   921    width: 80%;
   922    height: 70%;
   923    margin-top: 1rem;
   924    position: relative;
   925  }
   926  
   927  .dbSet-copyToClipboard {
   928    position: absolute;
   929    right: 13px;
   930    top: 13px;
   931    width: 30px;
   932    height: 30px;
   933  }
   934  
   935  .dbSet-copyToClipboard img {
   936    height: 100%;
   937    width: 100%;
   938  }
   939  
   940  .dbSet-jsonModelData {
   941    border: 1px solid var(--white-4);
   942    outline: none;
   943    padding: 1rem 1.25rem;
   944    width: 80%;
   945    background: transparent;
   946    border-radius: 5px;
   947    height: 100%;
   948    resize: none;
   949  }
   950  
   951  .dbSet-jsonModelData:focus {
   952    color: var(--search-bar-text-color-active);
   953    border-radius: 5px;
   954    background: var(--search-bar-bg);
   955    outline: 1pt solid var(--drop-down-btn-border-active);
   956    outline-offset: -1pt;
   957  }
   958  
   959  .dbSet-jsonModelHTML {
   960    width: 100%;
   961    height: 100%;
   962    display: flex;
   963    flex-direction: column;
   964    align-items: center;
   965    position: relative;
   966  }
   967  
   968  /* UNIT TYPE NESTED DROPDOWN */
   969  
   970  .dropDown-data-options, .dropDown-throughput-options{
   971    width: 100%;
   972  }
   973  
   974  #nestedDropDownContainer{
   975    display: flex;
   976    flex-direction: row;
   977    align-items: center;
   978    justify-content: center;
   979    width: 85%;
   980  }
   981  #nestedDropDownContainer{
   982    display: none;
   983  }
   984  .editPanelMenu-unit{
   985    width: 100%;
   986  }
   987  
   988  .editPanelMenu-inner-options{
   989    width: 100%;
   990  }
   991  
   992  #nestedDropDown{
   993    display:flex;
   994    flex-direction: row;
   995    justify-content: space-between;
   996    align-items: center;
   997  }
   998  
   999  .forBigNum{
  1000    display: none;
  1001  }
  1002  
  1003  /* Line chart */
  1004  .panEdit-panel .line-chart-canvas{
  1005    height: 50vh !important;
  1006    margin: 8px;
  1007  }
  1008  #app-container .line-chart-canvas{
  1009    height: 100% !important;
  1010    margin: 6px
  1011  }
  1012  .lineChartLegend{
  1013    color:var(--metrics-legends-text-color);
  1014    height: 108px;
  1015    overflow-y: scroll;
  1016    margin-left: 60px;
  1017  }
  1018  .legend-element-line{
  1019    display: flex;
  1020    align-items: center;
  1021    font-weight: bold;
  1022    font-size: 14px;
  1023    gap: 10px;
  1024  }
  1025  .lineChartLegend:last-child{
  1026    padding-bottom: 4px;
  1027  }
  1028  .legend-colors-line{
  1029    border-radius: 3px;
  1030    width: 25px;
  1031    height: 6px;
  1032    display: inline-block;
  1033  }
  1034  
  1035  .legend-element-line:hover {
  1036    color: var(--legend-element-hover);
  1037  }
  1038  
  1039  .legend-element-line.selected {
  1040    color: var(--legend-element-hover);
  1041  }
  1042  
  1043  .dbSet-name,.dbSet-heading{
  1044    white-space: nowrap;
  1045    font-weight: 500;
  1046    font-size: 18px;
  1047  }
  1048  
  1049  #metrics-query-language-btn{
  1050    height: 32px;
  1051    margin-left: 10px;
  1052    padding: 0px 20px;
  1053  }
  1054  
  1055  .queryInput-InnerContainer .info-icon{
  1056    right: 5px;
  1057  }
  1058  #panel-loading {
  1059    border: 4px solid var(--purple-1);
  1060    border-radius: 50%;
  1061    border-top: 4px solid var(--lavender-1);
  1062    border-bottom: 4px solid var(--lavender-1);
  1063    width: 30px;
  1064    height: 30px;
  1065    -webkit-animation: spin 2s linear infinite;
  1066    animation: spin 2s linear infinite;
  1067    position: absolute;
  1068    z-index: 100;
  1069  }
  1070  
  1071  @-webkit-keyframes spin {
  1072    0% { -webkit-transform: rotate(0deg); }
  1073    100% { -webkit-transform: rotate(360deg); }
  1074  }
  1075  
  1076  @keyframes spin {
  1077    0% { transform: rotate(0deg); }
  1078    100% { transform: rotate(360deg); }
  1079  }
  1080  
  1081  .switch {
  1082    position: relative;
  1083    display: inline-block;
  1084    width: 32px;
  1085    height: 16px;
  1086  }
  1087  
  1088  .switch input { 
  1089    opacity: 0;
  1090    width: 0;
  1091    height: 0;
  1092  }
  1093  
  1094  .slider {
  1095    position: absolute;
  1096    cursor: pointer;
  1097    top: 0;
  1098    left: 0;
  1099    right: 0;
  1100    bottom: 0;
  1101    background-color: var(--db-options-bg-color);
  1102    transition: .4s;
  1103  }
  1104  
  1105  .slider:before {
  1106    position: absolute;
  1107    content: "";
  1108    height: 12px;
  1109    width: 12px;
  1110    left: 2px;
  1111    bottom: 2px;
  1112    background-color: var(--white-0);
  1113    -webkit-transition: .4s;
  1114    transition: .4s;
  1115  }
  1116  
  1117  input:checked + .slider {
  1118    background-color: var(--purple-1);
  1119  }
  1120  
  1121  input:checked + .slider:before {
  1122    transform: translateX(15px);
  1123  }
  1124  
  1125  .slider.round {
  1126    border-radius: 34px;
  1127  }
  1128  
  1129  .slider.round:before {
  1130    border-radius: 50%;
  1131  }
  1132  
  1133  .table-view-toggle-container{
  1134    height: 32px;
  1135    width: 147px;
  1136    display: flex;
  1137    align-items: center;
  1138    border: 1px solid var(--border-color-regular);
  1139  }
  1140  
  1141  .label-table-view{
  1142    padding-right: 10px;
  1143  }
  1144  
  1145  .navbar-options{
  1146    display: flex;
  1147  }
  1148  
  1149  .panel-info-corner{
  1150    width: 30px;
  1151    height: 30px;
  1152    position: absolute;
  1153    top: 0;
  1154    left: 0;
  1155    border-bottom: 30px solid #0000;
  1156    border-left: 32px solid var(--purple-1);
  1157    border-right: none;
  1158    border-radius: 5px 0;
  1159    cursor: pointer;
  1160    z-index: 99;
  1161  }
  1162  
  1163  #panel-desc-info{
  1164    cursor: pointer;
  1165    font-size: 48%;
  1166    left: -25px;
  1167    position: absolute;
  1168    top: 5px;
  1169    color: #ffffffcb;
  1170    font-weight: 600;
  1171  }
  1172  
  1173  .refresh-container{
  1174    display: flex;
  1175  }
  1176  
  1177  #refresh-picker-btn{
  1178    margin: 0;
  1179    text-decoration: none;
  1180    border: none;
  1181    height: 32px;
  1182    line-height: 14px;
  1183    cursor: pointer;
  1184    border-radius: 0 5px 5px 0 !important;
  1185    margin-top: -3px;
  1186    width: auto;
  1187    padding: 0 5px;
  1188  }
  1189  
  1190  #refresh-picker-btn:hover {
  1191    background: var(--drop-down-btn-bg-hover);
  1192  }
  1193  
  1194  #refresh-picker-btn.active {
  1195    background: var(--drop-down-btn-bg-active) !important;
  1196    outline: 1px solid var(--drop-down-btn-border-active);
  1197    outline-offset: -1pt;
  1198  }
  1199  
  1200  .refresh-btn{
  1201    border-radius: 5px 0 0 5px !important;
  1202    background-color: var(--drop-down-btn-bg-regular) !important;
  1203    width: 32px;
  1204  }
  1205  
  1206  .refresh-picker.show{
  1207    min-width: 53px !important;
  1208    height: auto !important;
  1209    background: var(--timepicker-bg-color);
  1210    border: 1px solid var(--timepicker-border-color);
  1211    color: var(--table-or-regular-text-color);
  1212    border-radius: 5px;
  1213    left:3px !important;
  1214    padding: 0.5rem;
  1215  }
  1216  
  1217  .refresh-range-item.active {
  1218    background-color: var(--index-drop-down-item-active-bg-color);
  1219    color: var(--index-drop-down-item-active-text-color);
  1220  }
  1221  .refresh-range-item {
  1222    padding:6px 10px !important;
  1223    display: flex;
  1224    align-items: center;
  1225    border-radius: 5px;
  1226    line-height: 23px;
  1227    cursor: pointer;
  1228  }
  1229  
  1230  .refresh-range-item:hover {
  1231    color: var(--timepicker-text-color-hover);
  1232  }
  1233  
  1234  .panEdit-navBtns .refresh-btn{
  1235    border-radius: 5px !important;
  1236  }
  1237  .btn-top{
  1238    width: 137px;
  1239    height: 32px !important;
  1240    border: 1px solid var(--border-color-regular);
  1241  }
  1242  .btn-top:hover{
  1243    color: var(--drop-down-text-color) !important;
  1244  }
  1245  .settings-btn{
  1246    width: 32px;
  1247    height: 32px !important;
  1248    border: 1px solid var(--border-color-regular) !important;
  1249    background: var(--top-setting-btn-bg-img) var(--drop-down-btn-bg-regular) center center no-repeat !important;
  1250    background-size: 50% !important;
  1251  }
  1252  .refresh-btn{
  1253    height: 32px !important;
  1254    background: var(--top-refresh-btn-bg-img) var(--drop-down-btn-bg-regular) center center no-repeat !important;
  1255    background-size: 46% !important;
  1256  }
  1257  .chart-display{
  1258    width: 30px;
  1259    height: 30px;
  1260  }
  1261  .panEdit-discard{
  1262    width: 80px;
  1263    background-color: var(--drop-down-btn-bg-regular);
  1264    color: var(--text-color-regular) !important;
  1265  }
  1266  .panEdit-save{
  1267    width: 60px;
  1268    color: var(--text-color-regular) !important;
  1269  }
  1270  #save-btn:hover{
  1271    background-color: var(--drop-down-btn-bg-hover) !important;
  1272  }
  1273  .panEdit-discard:hover{
  1274    background-color: var(--drop-down-btn-bg-hover) !important;
  1275  }
  1276  .panEdit-apply{
  1277    width: 68px;
  1278    background-color: var(--purple-1) !important;
  1279    color: white !important;
  1280    border: 0 !important;
  1281  }
  1282  .panEdit-apply:hover{
  1283    background: var(--btn-hover-or-click-bg-color) !important;
  1284  }
  1285  .settings-btn:hover{
  1286    background: var(--top-setting-btn-bg-img) var(--drop-down-btn-bg-hover) center center no-repeat !important;
  1287    background-size: 50% !important;
  1288    }
  1289  .refresh-btn:hover{
  1290    background: var(--top-refresh-btn-bg-img) var(--drop-down-btn-bg-hover) center center no-repeat !important;
  1291    background-size: 46% !important;
  1292    }
  1293  #save-db-btn:hover{
  1294    background: var(--top-save-btn-bg-img) var(--drop-down-btn-bg-hover) center center no-repeat !important;
  1295    background-size: 45% !important;
  1296  }
  1297  .panel-header:hover{
  1298    background-color: var(--edit-panel-border-color) !important;
  1299  }
  1300  .panelDisplay,
  1301  .refresh-btn,
  1302  .dropdown-dash,
  1303  .dropdown-toggle{
  1304    border: 1px solid var(--border-color-regular) !important;
  1305  }
  1306  .dropdown-dash{
  1307    width: 32px;
  1308  }
  1309  #query-language-btn,
  1310  #date-picker-btn,
  1311  #index-btn{
  1312    line-height: 6px !important;
  1313  }
  1314  .logs-options{
  1315    padding: 0;
  1316  }
  1317  #save-btn{
  1318    background-color: var(--drop-down-btn-bg-regular) !important;
  1319  }
  1320  #save-db-btn{
  1321    background: var(--top-save-btn-bg-img) var(--drop-down-btn-bg-regular) center center no-repeat !important;
  1322    background-size: 45% !important;
  1323  }
  1324  #add-panel-btn,
  1325  #save-db-btn,
  1326  #query-language-btn{
  1327    height: 32px !important;
  1328  }
  1329  #add-panel-btn:hover {
  1330    background: var(--btn-hover-or-click-bg-color) !important;
  1331  }
  1332  .info-icon{
  1333    line-height: 20px !important;
  1334  }
  1335  
  1336  .panel div.panel-header p{
  1337    color: var(--datatable-header-text-color) !important;
  1338  }
  1339  #new-dashboard{
  1340    padding-left: 20px !important;
  1341    padding-right: 20px;
  1342  }
  1343  .panel{
  1344    border: 1px solid var(--border-color-regular) !important;
  1345  }
  1346  .logs-options{
  1347    background-color: var(--dropdown-bg-color-new);
  1348    color: var(--drop-down-text-color-new);
  1349  }
  1350  .ag-header-viewport,
  1351  .ag-header-cell{
  1352    background-color: var(--panel-table-bg-color);
  1353  }
  1354  .panel div.panel-header .dropdown-btn{
  1355    background-image: var(--arrow-dashboard-img) !important;
  1356  }
  1357  .ag-row-position-absolute::after{
  1358    content: '';
  1359    position: absolute;
  1360    left: 10px;
  1361    width: 7000px;
  1362    height: 1px;
  1363    background-color: var(--panel-table-line-color);
  1364    bottom: 0;
  1365  }
  1366  .dropdown-arrow.orange {
  1367    padding: 0 !important;
  1368  }
  1369  .chart-options{
  1370    color: var(--text-color-regular);
  1371  }
  1372  .chart-options.selected,
  1373  .chart-options:hover {
  1374    border: 1px solid var(--purple-1) !important;
  1375    background-color: var(--edit-panel-option-bg-color) !important;
  1376    color: var(--text-color-regular);
  1377  }
  1378  .dropdown-menu{
  1379    background-color: var(--index-drop-down-box-bg-color) !important;
  1380  }
  1381  .index-btn-show{
  1382    width: 100px;
  1383  }
  1384  .over-title{
  1385    display: inline-block;
  1386    white-space: nowrap;
  1387    overflow: hidden;
  1388    text-overflow: ellipsis;
  1389    max-width: 150px;
  1390    vertical-align: bottom;
  1391  }
  1392  #dbSet-discard, #dbSet-save{
  1393    background: var(--myOrg-input);
  1394    color: var(--text-color);
  1395    width: 100px;
  1396  }