body { text-align: center; font-weight:normal; font-size:large;
/*font-family: Nazli, DejaVu Serif, Liberation Serif,  FreeSerif;
font-family: Nazli, Libre Baskerville;  background-color: white  #EBEEEE #E8E0F1 #F0F1E0 #E0EAF1 #E2E5E7 #ECEFDE #DEEFDE #007bff #00b2e3 #D0F0D0 #F3E2E2 #D1D8E4; #728ec2;*/
}
p {font-weight: normal; margin-bottom: 0.3em; margin-top: 0.3em;}
ul, ol, pre.code{text-align: left;}
pre.code{
 font-family: monospace; 
 font-weight:normal; 
 font-size:x-large;
 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;}
.rtl { direction: rtl; text-align: justify; font-family: Nazli; font-size:large;/*font-weight: bold;*/}
.ltr { direction: ltr;  text-align: justify;}
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;
}
.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-family: Nazli;
}
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;
}
div.step-level-1{
  display: grid;
  justify-items: center;
}

table.smallerelementwithfullborder, table.smallerelementwithfullborder tr, table.smallerelementwithfullborder td, table.smallerelementwithfullborder th  {
  border: 1px solid black;
}

table.smallerelementwithfullborder{
  border-collapse: collapse;
  text-align: center;
}
table.smallerelementwithfullborder td, table.smallerelementwithfullborder th  {
  padding-left: 0.3rem;
  padding-right: 0.3rem;

}

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

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

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

div.t2c{
  display: grid;
  grid-template-columns: auto auto;
  justify-items: center;
  align-items: center ;
  gap: 5px ;
}
div.t2c > h1, div.t2c > .rtl-h1{
  grid-column: 1 / 3;
  background-color: #E6F4FA;
}

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;
}
div.scrollbar-box800x500px-overflow{
  width: 800px;
  height: 500px;
  overflow: scroll;
}
.tableheaderwithgraybackground th {
    font-weight: bold;
    background-color: #BFBFBF;
}

/* 
https://docs.yugabyte.com
*/

svg.rrdiagram{max-width:100%}
svg.rrdiagram .connector{fill:none;stroke:#222}
svg.rrdiagram .text{fill:#000;font-family:Verdana,sans-serif;font-size:12px}
svg.rrdiagram .literal{fill:#90d9ff;stroke:#222}
svg.rrdiagram .rule{fill:#d3f0ff;stroke:#222}