:root {
 --yoo-gantt-chart-width: 450px;
}

#impress {
  transform: scale(1) !important;
}
/*
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville|Racing+Sans+One|Satisfy);

@media screen and (min-width:1149px) { #impress { transform: scale(1.15) !important; }}
@media screen and (min-width:1200px) and (max-width:1148px) { #impress { transform: scale(1.15) !important; }}
@media screen and (min-width:800px) and (max-width:1199px) { #impress { transform: scale(1.15) !important; }}
@media screen and (min-width:640px) and (max-width:799px) { #impress { transform: scale(0.8) !important;}}
@media screen and (min-width:500px) and (max-width:639px) { #impress { transform: scale(0.8) !important;  }}
*/
body { 
  text-align: center;  
  font-family: DejaVu Serif, Liberation Serif,  FreeSerif;
  /*font-size: 130%;*/

/* font-family: Nazli, Libre Baskerville;  background-color: white  #EBEEEE #E8E0F1 #F0F1E0 #E0EAF1 #E2E5E7 #ECEFDE #DEEFDE #007bff #00b2e3 #D0F0D0 #F3E2E2 #D1D8E4; #728ec2;*/
}

/*
https://stackoverflow.com/questions/37560602/how-to-fill-the-screen-with-image-in-impress-js
*/
#step-X html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
#step-X img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}

/*
body {
    font-size: 170%;
    text-align: center;
    font-family: Libre Baskerville;
}
*/

p {
    font-size: 120%;
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
}

em {
    /*font-family: Satisfy;*/
    font-size: 122%;
}

strong {
    /*font-family: Racing Sans One;*/
    font-size: 117%;
    letter-spacing: -2px;
}

h1, h2, h3, h4 {
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
}

ul, ol, pre.code{
    text-align: left;
    font-size: 120%;
}


pre.code{font-size:120%; font-family: monospace; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.2em; padding-right: 0.2em; border-style: solid; border-left-width: 0.5em; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-color: #95ABD0;}
pre.code > .ln {background-color: #DFE5F1;}
pre.code { background-color:#f0f0f0;}
pre.console{background-color: #F9E0E0;}
ol.trace-code{ 
  background-color: #F3F2CD; 
  color: #27435F/* #466E95*/;
  padding-left: 1.5em; 
  padding-right: 1em; 
  list-style: none;
  counter-reset: my-awesome-counter;
}
ol.trace-code li {
  counter-increment: my-awesome-counter;
}
ol.trace-code li::before {
  content: counter(my-awesome-counter) ". ";
  color: red;
  font-weight: bold;
}
/*ul {
    list-style-position: inside;
}

li {
    font-size: 125%;
    font-family: serif;
    font-weight: normal;
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    padding-left: 0.3em;
    line-height: 1.8em;
    list-style-type: circle;
}*/

/*a {
    text-decoration: none;
    color: black;
}*/

#ThreeD H1 {
    font-family: Racing Sans One;
    font-size: 300%;
}

#thequestion p {
    font-family: Racing Sans One;
}

.footer {
    position: absolute;
    top: 95%;
    font-size: 50%;
}

table.smallerelementwithfullborder, table.smallerelementwithfullborder tr, table.smallerelementwithfullborder td, table.smallerelementwithfullborder th {
    border: 1px solid black;
    font-size: 90%;
}
.rtl {direction:rtl;text-align:right;font-family:Nazli;font-size:large;}
.ltr {direction:ltr;text-align:left;}

.rtl-h1{
  direction: rtl;
  font-size: xx-large;
  text-align: center;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  font-family: Nazli;
}

.rtl-h2{
  direction: rtl;
  font-size: x-large;
  text-align: center;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  font-family: Nazli;
}

.rtl-h3{
  direction: rtl;
  font-size: large;
  text-align: center;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
  font-family: Nazli;
}

ol.rtl-h1, ol.rtl-h2, ol.rtl-h3, ul.rtl-h1, ul.rtl-h2, ul.rtl-h3{
  text-align: right;
  font-size: large;
}

ol.rtl-h1 li, ol.rtl-h2 li, ol.rtl-h3 li, ul.rtl-h1 li, ul.rtl-h2 li, ul.rtl-h3 li{
  text-align: right;
  font-size: large;
}

table.smallerelementwithfullborder th, table.smallerelementwithfullborder th p{
  font-weight: bold;
}

#imporatnce-of-track-or-cylinder-id > ol {direction: rtl; text-align: right;}

.grid-2col-class{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
/*
  overflow: scroll;
*/
}

.grid-2col1fr2fr-class{
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
  overflow: scroll;
}

div.yoo-grid-auto-flow-column{
  display: grid;
  gap: 2rem;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  justify-items: stretch;
  padding: 10px;
  /* https://theindustrydirect.com/notes/spaces/space-database/css-cascading-style-sheets/css-notes-database/flexbox-like-quotjust-put-elements-in-a-rowquot-with-css-grid
   * https://css-tricks.com/flexbox-like-just-put-elements-in-a-row-with-css-grid/
  */
}
div.t2c{
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  align-items: center ;
  gap: 10px ;
}
div.t2c > h1, div.t2c > .rtl-h1{
  grid-column: 1 / 3;
  background-color: #E6F4FA;
}
div.scrollbar-box800x500px-overflow{
  width: 800px;
  height: 500px;  
  overflow: scroll;
}
.tableheaderwithgraybackground th {
    font-weight: bold;
    background-color: #BFBFBF;
}
.yoo-gantt-chart > ul.withborder > li:nth-of-type(odd){
  background-color: black;
}
.yoo-gantt-chart li{
  list-style-type: none;
  text-align: center;
}

table.borderless * {border: 0;}

.center {
  margin: auto;
  /*width: 50%;*/
  padding: 5px;
  text-align: center;
}
