/* global app */

:root {

    font-size: 1em; /*browser’s default of 16 px*/
    box-sizing: border-box;  /*width+border+margin */

  --main-bg-color: #cbd3d3;

    --color1: #0bff89;
    --color2: #FF8B8B;
    --color3: #0BBCD6;
    --color4: #B18AE0;
    --color5: #EED974;
    --color6: #005397;
    --color7: #e1cac4;
    --color8: #e3efe3;
}

@font-face {
    font-family: "Changa";
    src: url("./assets/css/Changa-Medium.ttf") format("truetype");
}

.title {
    font-family: 'Changa', sans-serif;
}

.main-body {
  background: var(--main-bg-color);
}

.is-dirty {
  border-left: 2px solid red;
}

/* X Components */
.x-component {
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;
}


/* VUE ROUTER */
.router-link-active {
  color: yellow !important;
}




.dashboard {
    margin-top: 50px;
}

.div-row{
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* workflow */

.is-online {
  color: green;
}

.is-offline{
  color: red;
}


/* markdown */

.definition {
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
  background-color:#eaeaea;
  border: 2px solid red;
}

.definition .label {
  color: red;
  font-weight: 700;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
  /*font-family: "Times New Roman", Times, serif;*/
}

.definition .title {
  color: red;
  font-family: Arial, Helvetica, sans-serif;

}

.definition:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}


.theorem{
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
  background-color: #e2e1eb;
  border: 2px solid purple;
}

.theorem .label {
  color: purple;
  font-weight: 700;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
  /*font-family: "Times New Roman", Times, serif;*/
}

.theorem .title {
  color: purple;
  font-family: Arial, Helvetica, sans-serif;

}

.proof {
  color: blue;
  font-weight: 700;
}

.theorem:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}



/* P1tMarkdown Definition */
[data-type="definition"]  {
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
  background-color:#eaeaea;
  border: 2px solid red;
}

[data-type="definition"] [data-value] {
  /*color: red;*/
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
}

[data-type="definition"] [data-key] {
  color: red;
  font-weight: 700;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

[data-type="definition"]:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* P1tMarkdown Theorem */
[data-type="theorem"]  {
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
  background-color: #e2e1eb;
  border: 2px solid purple;
}

[data-type="theorem"] [data-key] {
  color: purple;
  font-weight: 700;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

[data-type="theorem"] [data-value] {
  /*color: purple;*/
  font-family: Arial, Helvetica, sans-serif;
}

[data-type="theorem"]:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* P1tMarkdown Proof */

[data-type="proof"]  {
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
  background-color: #e2e1eb;
  border: 2px solid blue;
}

[data-type="proof"] [data-key] {
  color: blue;
  font-weight: 700;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

[data-type="proof"] [data-value] {
  color: blue;
  font-family: Arial, Helvetica, sans-serif;
}

/* P1tMarkdown Example */
[data-type="example"]  {
  padding: 10px;
  margin-bottom: 15px;
  transition: 0.3s;
  background-color: #e2e1eb;
  border: 2px solid green;
}

[data-type="example"] [data-key] {
  color: green;
  font-weight: 700;
  padding-right: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

[data-type="example"] [data-value] {
  color: green;
  font-family: Arial, Helvetica, sans-serif;
}

[data-type="example"]:hover {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.katex-html {
  background-color: #d4d4d43d;
  color: #020e57;
}




.preview h1 {
  font-size: 1.2rem;
}



/* xmarkdown */
.xmarkdown blockquote {
  background-color: #000;
  border-left: 4px solid #e4900c;
  padding: 4px;
  margin: 1rem 0;
  border-radius: 0 8px 8px 0;
  position: relative;
  font-style: italic;
  /*font-weight: bold;*/
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.xmarkdown blockquote p {
  margin: 0 0 0 0.5em;
  line-height: 1.6;
  font-size: 1.0rem;
}