/*******************************************************************************************
 * Styles for making pop-up information windows:  used for formatting tables in the RISC-V
 * reference page(s)
 */

/* The modal's background */
.modal {
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

/* Display the modal when targeted */
.modal:target {
  display: table;
  position: absolute;
}

/* The modal box */
.modal-dialog {
  display: table-cell;
  vertical-align: middle;
}

/* The modal's content */
.modal-dialog .modal-content {
  margin: auto;
  background-color: #f3f3f3;
  position: relative;
  padding: 0;
  outline: 0;
  border: 1px #777 solid;
  text-align: justify;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  /* Add animation */
  -webkit-animation-name: example; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 1.5s;
}

/* The button used to close the modal */
.closebtn {
  text-decoration: none;
  float: right;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
}

.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.container {
  padding: 2px 16px;
  font-size: 11pt;
}

.container img {
  display: block;
  margin: auto;
  width: 70%;
}

.container code {
  background-color:lightgray;
}

header {
  background-color: #5cb85c;
  font-size: 25px;
  color: white;
}

footer {
  background-color: #5cb85c;
  font-size: 20px;
  color: white;
}



/************************************************************
 *  end modal dialog styles
 */

/*******************************************************************************************
 * The following table styles are used for formatting tables in the RISC-V reference page(s)
 */

.table_component {
    overflow: auto;
    width: 100%;
    --thead-bg-color: white;
    --tbody-bg-color: #eeeefe; /*white;*/
    --base_border: 1px solid #000000;
    --annotate-color: black;
}

.table_component table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
}

.table_component table caption {
    font-weight: bold;
    font-style: normal;
    font-size: 110%;
}

/* We shouldn't be selecting an entire tr element, but ../css/general.css has a selector for this, and we
 * need to override it
 */
.table_component thead  tr {
    background-color:  var(--thead-bg-color);
    border:0;
}

.table_component tbody {
    font-size: 90%;
}

.table_component th {
    border-top: var(--base_border);
    border-bottom: none;
    border-left: 1px dotted #000000;
    border-right: 1px dotted #000000;
    background-color: var(--thead-bg-color);
    color: var(--annotate-color);
    padding: 5px;
    text-align: left;
}


.table_component td {
    border: var(--base_border);  /* 1px solid #000000; */
    color: #000000;
    background-color: var(--tbody-bg-color);
    padding: 5px;
    text-align: center;
    font-style: italic;
}

.table_component th.annotate,td.annotate  {
    border: none;
    background-color: var(--thead-bg-color);
    color: var(--annotate-color);
    text-align: right;
    font-style: normal;
    font-weight: bold;
}

.table_component code {
  display: block;
  white-space: pre-wrap;
  float: left;
  text-align: left;
  font-style: normal;
}

#side-comment {
    border-left: none;
    writing-mode: sideways-lr;
    background-color: var(--thead-bg-color);
    font-weight: bold;
    font-style: normal;
}

#no-left-border {
    border-left: none;
}

#no-right-border {
    border-right: none;
}

#nw-corner {
    border-left: none;
    border-top: none;
}

.table_component span.aleft     { float: left; text-align: left}
.table_component span.aright  { float: right; text-align: right}

/************************************************************
 *  end table_component styles
 */