/*
 * Copyright 2026 Charles W. Rapp
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.titlebar {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  padding: 10px 50px 10px 50px;
  background-color: #00b33c;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  height: 100px;
  border-top-color: #156a2a;
  border-right-color: #156a2a;
  border-bottom-color: #156a2a;
  border-left-color: #156a2a;
  border-radius: 25px;
  font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

table.type-table {
  border: 1px solid black;
  margin: 10px 0px 10px 0px;
  width: 100%;
  background-color: #85F968;
  color: black;
  font-family: 'Courier New', monospace;
}

table.type-table caption {
  caption-side: bottom;
  margin: 5px 0px 0px 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

.message-key {
  color: #cc0808;
  font-family: 'Courier New', monospace;
}

table.notify-table {
  border-collapse: collapse;
  width: 50%;
}

table.notify-table th:first-child {
  background-color: white;
}

table.notify-table th, td {
  text-align: center;
  padding: 4px;
}

table.notify-table th {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

table.notify-table tr td:first-child {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

table.multikey-table {
  border-collapse: collapse;
  width: 50%;
}

table.multikey-table th, td {
  text-align: center;
  padding: 4px;
}

table.multikey-table th {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

table.multikey-table tr:nth-child(even) {
  background-color: #F2F2F2;
}

table.role-table {
  border-collapse: collapse;
  width: 25%;
}

table.role-table th {
  text-align: left;
  padding: 4px;
}

table.role-table td {
  text-align: left;
  padding: 4px;
}

table.role-table th {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

table.role-table tr:nth-child(even) {
  background-color: #F2F2F2;
}

ol.role-list {
  padding: 5px;
}

ol.role-list li {
  padding: 0px 0px 5px 0px;
  margin-left: 35px;
}

table.protocol {
  border-collapse: collapse;
  width: 100%;
}

table.protocol caption {
  caption-side: bottom;
  margin: 5px 0px 0px 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

table.protocol th, td {
  text-align: center;
  padding: 8px;
}

table.protocol th {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

table.protocol tr:nth-child(even) {
  background-color: #F2F2F2;
}

table.protocol td {
  border-right: 1px solid black;
  margin: 5px;
}

table.protocol td:last-child {
  border-right: none;
}

table.scope {
  border-collapse: collapse;
  width: 50%;
}

table.scope caption {
  caption-side: bottom;
  margin: 5px 0px 0px 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

table.scope th,td {
  text-align: center;
  padding: 8px;
}

table.scope th {
  font-weight: bold;
  background-color: #4CAF50;
  color: white;
}

table.scope tr:nth-child(even) {
  background-color: #F2F2F2;
}

table.scope td {
  border-right: 1px solid black;
  margin: 5px;
}

span.blockComment {
  display: block;
  margin: 10px;
  padding: 10px;
  border: 2px solid blue;
  background-color: #85F968;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.modal-header {
  padding: 2px 16px;
  background-color: #00e600;
  color: black;
}

.modal-header-name {
  padding: 2px 16px;
  background-color: #00e600;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
}

.modal-header-copyright {
  padding: 2px 16px;
  background-color: #00e600;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 14px;
}

.modal-body {
  padding: 16px 16px;
  font-family:var(--body-font-family);
  font-size:var(--body-font-size);
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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