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;

    display: inline-block;
    width: 1.5em; /* Adjust based on your largest line number */
    text-align: right;
    padding-right: 0.4em;
    user-select: none; /* Prevents selecting numbers during copy-paste */

}

.rtl { direction: rtl; text-align: justify; font-family: Nazli; font-size:large;/*font-weight: bold;*/}
.ltr { direction: ltr;  text-align: left;}
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 > :first-child{
  grid-column: 1 / 3;
  background-color: #E6F4FA;
}

div.n2c{
  display: grid;
  grid-template-columns: auto auto;
  /* align-items: stretch;  overflow: scroll;*/
  justify-items: center;
  align-items: center ;
  gap: 10px ;
}
div.t3c{
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: center;
  align-items: center ;
  gap: 5px ;
}
/*div.t2c > h1, div.t2c > .rtl-h1{*/
div.t3c > :first-child{
  grid-column: 1 / 4;
  background-color: #E6F4FA;
}

div.t4c{
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-items: center;
  align-items: center ;
  gap: 5px ;
}
/*div.t2c > h1, div.t2c > .rtl-h1{*/
div.t4c > :first-child{
  grid-column: 1 / 5;
  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}

/* Container for the diagram */
.db-schema-graph {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    font-family: sans-serif;
}

/* Individual table card */
.db-schema-graph .table-node {
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
    background-color: white;
}

/* Table header (name) */
.db-schema-graph .table-header {
    background-color: #f4f4f4;
    padding: 8px;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/* Table columns/rows */
.db-schema-graph .table-columns {
    padding: 5px;
}

/* Styling for relationships/lines */
.db-schema-graph .relationship-link {
    stroke: #666;
    stroke-width: 2;
    fill: none;
}