/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import '~@circlon/angular-tree-component/css/angular-tree-component.css';
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
@import "~@fortawesome/fontawesome-free/css/all.min.css";
@import "~@fortawesome/fontawesome-free/css/brands.min.css";

:root {
  --noded-background-note: #3A86FF;
  --noded-color-note: white;
  --noded-background-note-hover: #66a1ff;

  --noded-background-db: #8338EC;
  --noded-color-db: white;
  --noded-background-db-hover: #a873f2;

  --noded-background-node: #FB5607;
  --noded-color-node: white;
  --noded-background-node-hover: #fc864f;

  --noded-background-code: #FF006E;
  --noded-color-code: white;
  --noded-background-code-hover: #FF5CA3;

  --noded-background-files: #0E7B81;
  --noded-color-files: white;
  --noded-background-files-hover: #14AFB8;

  --noded-background-markdown: #5F4D30;
  --noded-color-markdown: white;
  --noded-color-markdown-hover: #7A633E;
}

div.picker-wrapper {
  border: 2px solid lightgrey !important;
  border-radius: 7px !important;
}

.noded-loading-mask {
  //--background: #222;
  //--spinner-color: #fff;
  --backdrop-opacity: 0.7;

  ion-backdrop {
    background: #333;
  }

  //color: #fff;
}

hr {
  background: darkgray;
}

.compat-toast-container {
  color: white !important;
}

.compat-toast-container::part(header) {
  font-size: 1.2em;
  font-weight: bold;
}

.markdown-display {
  h1, h2, h3, h4, h5 {
    margin-top: 35px;
  }

  blockquote {
    padding: 1px 20px;
    color: #444;
    background: #eee;
    border-left: 2px solid darkgrey;
    margin-left: 10px;
  }

  table {
    width: 100%;
    margin: 30px 0;
  }

  table, th, td {
    border: 1px solid darkgrey;
    border-collapse: collapse;
  }

  th, td {
    padding: 5px;
  }

  code {
    color: #ea4894;
  }

  pre {
    background: #fff9ff;
    padding: 10px;
  }
}

.modal-big {
  .modal-wrapper {
    height: calc(100vh - 30px);
    width: calc(100vw - 30px);
  }
}

.clear-btn {
  background: rgba(0,0,0,0);
}