/* https://pustelto.com/blog/optimizing-css-for-faster-page-loads/ */
:root{
  --main-color : 87, 147, 240;
  --main-theme : rgb(var(--main-color));
  --gutter-theme : transparent;
  --background-theme : transparent; 
}


/* Extra CSS for mkdocs-enumerate-headings-plugin */ 
.enumerate-headings-plugin {
  filter: opacity(35%);
}

div.py_mk_ide .wrapper {
  border: solid 1px;
  border-radius: 6px;
  border-color: var(--main-theme);
  position: relative;
}

/* .wrapper_h::after {
  content: "ici";
} */

div.py_mk_ide .wrapper_v {
border: solid 1px;
border-radius: 6px;
border-color: var(--main-theme);
position: relative;
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
}

div.py_mk_ide .wrapper_v > * {
flex: 1 1 300px;
}

div.py_mk_ide .interior_wrapper {
border-right: 1px solid var(--main-theme);
width:50%;
}

div.py_mk_ide .line_v {
  border-right: 1px solid var(--main-theme);
  width:50%;
}  

div.py_mk_ide .line{
border-bottom : 1px solid var(--main-theme);
}

div.py_mk_ide .ace_editor {
font-size:1em;
margin: 4px 4px;
height: 200px;
background: var(--background-theme);
}

div[id*='solution'] .ace_editor {
  font-size:1em;
  margin: 4px 4px;
  height: 200px;
  background: var(--background-theme);
  }

div.py_mk_ide .term_editor {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 205px;
}

div.py_mk_ide .term_editor_v {
  --color:var(--main-theme);
  --background: var(--gutter-theme);
  --size : 1.4;
  height: 205px;
  }  

/* First apply terminal CSS */
div.py_mk_terminal_f .terminal {
  width: 50%;
}

/* Then change width to 100% */
.py_mk_terminal_f {
  --color:var(--main-theme);
  --background: var(--gutter-theme);
  --size : 1.4;
  border: solid 1px;
  border-radius: 6px;
  border-color: var(--main-theme);
  height: 205px; 
  width: 100%;
}

div[id*='fake_id'] {
  padding: 10px 10px 0px 10px;
}

/* Test to decide which REPL is best */
.py_mk_terminal_f_h {
--color:var(--main-theme);
--background: var(--gutter-theme);
--size : 1.4;
height: 150px; 
width: 100%;
}

.term_editor {
  --color:var(--main-theme);
  --background: var(--gutter-theme);
  --size : 1.4;
  height: 150px; 
  width: 100%;
}

div.py_mk_ide textarea {
width: 100%;
resize: vertical;
}

div.py_mk_ide textarea:focus {
  outline: none;
}

.py_mk_hide {
display:none;
}

/* overloading ace gutters to hide them behind navbar */
.ace_gutter {  
z-index: 1; /* might be a bit drastic */
}

.ace_gutter > .ace_layer {
color: var(--main-theme);
background-color: var(--gutter-theme);
border-right: solid 1px var(--main-theme); 
}

/* global modification of gutters for ace theme */
div[class*='ace-'] .ace_gutter {
  background-color: var(--gutter-theme);
  color: #DEDEDE;
}

div.py_mk_ide .compteur {
float: right;
color: var(--main-theme);
font-size : 1.2em
}

div.py_mk_ide .compteur::before {
content: "Evaluations restantes : ";
color: var(--main-theme);
font-size : 0.8em
}

.if>rect {
/*fill: var(--main-theme) !important;*/
stroke: #ff3838 !important;
stroke-width: 1.5px !important;
}

.admonition.hint.inline.end {
min-width: 30em;
height: auto;
}

.py_mk_gui_wrapper {
position: relative;
width: 100%;
height: 400px;
}

.py_mk_gui_wrapper canvas {
position: absolute;
top: 0;
left: 0;
}

div.py_mk_ide .tooltip {
  padding: 5px 4px 0px 0px;
  position: relative;
  display: inline-block;
}

div.py_mk_ide .tooltip .tooltiptext {
  visibility: hidden;
  background-color: var(--main-theme);
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 110%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 0.9em;
}

div.py_mk_ide .tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--main-theme) transparent;
}

div.py_mk_ide .tooltip:hover .tooltiptext {
  visibility: visible;
}
  
div.py_mk_ide .tooltip > img {
  width: 32px;
  border: 1px solid rgba(85,119,196);
  padding: 3px;
  border-radius: 9px;
  box-shadow: 2px 2px var(--main-theme);
  background-image: linear-gradient(to bottom, rgb(191, 255, 255), 15%, rgba(var(--main-color),0.8));
}

div.py_mk_ide .tooltip:hover > img {
  text-shadow: 0px 0px rgba(87,147,240,0);
  position:relative; 
  left: 1px; 
  top: 1px;
  cursor: pointer;
  font-size : 2em;
  box-shadow: 0px 0px rgba(87,147,240,0);
}

div.py_mk_ide .comment {
  display: inline-block;
  font-size: 1em;
  margin-top: 2px;
  margin-right: 8px;
  position:absolute;
  top:0px;
  right:0px;
  z-index: 9;
}
div.py_mk_ide .comment:hover {
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin-top: 2px;
  margin-right: 8px;
  position:absolute;
  top:1px;
  right:-1px;
  z-index: 9;
}