/*

  General site styling

  Styles supporting the standalone helpers in js/general.js
  ( expandable images copied out of the Web App UI Builder Library )

*/


/* ===== Base / general styling ( merged in from the old styling.css ) ===== */

body {
  background-color:black;
  font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', 'Liberation Mono', monospace; /* Terminal Style Font */
  margin: 0;
    --bs-body-line-height: 1.5 !important;
}

footer{
  color:white;
  text-align: center;
  padding: 5px;
}

h1, h2, h3, h4, h5, h6, p {
    display: block;
    font-weight: bold; /* Headers only; paragraphs will inherit normal weight from body */
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding: 0; /* Browsers typically have 0 padding for these by default */
}

h1 { font-size: 2em;    margin-block-start: 0.67em; margin-block-end: 0.67em;}
h2 { font-size: 1.5em;  margin-block-start: 0.83em; margin-block-end: 0.83em;}
h3 { font-size: 1.17em; margin-block-start: 1em;    margin-block-end: 1em;}
h4 { font-size: 1em;    margin-block-start: 1.33em; margin-block-end: 1.33em;}
h5 { font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em;}
h6 { font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em;}

p {
    font-weight: normal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    line-height: 1.5;
}

a {
  color:white;
}

/* The custom blue used for call to action / navigation links across the site */
.basiclink
{
  color: #8787ec;
}



table{
width:100%;
}

table th,
table td {
  border: solid white 1px;
}




.backsect
{
  padding: 1rem;
  margin-top: 3rem;
  margin-bottom: 25px;
  background-color: #8787ec;
  color: #fff;
  border-radius: 0.375rem;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}



/* Box to Put Content within - Versitile */
.contentbox
{
  color:#D3D7CF;
  background-color: #00000078;
  border: solid #00a900 1px;
  border-radius: 8px;
  padding: 15px;
  width: 90%;
  margin: 0 auto; /* Center Horizontally */
  margin-bottom: 30px;
}




.homepagetop
{
  display: flex;
}
.homepagetop p
{
margin-top: 20px;
}

@media (max-width: 700px) {
  .homepagetop {
    flex-direction: column;
    align-items: center;
  }

.homepagetop h2,
  .homepagetop p {
    text-align: center !important;
  }
}



/* Service Listing - Use with Content Box */
.svclisting
{
  display: flex;
  /* justify-content: center; */
  gap: 40px;  /* For Service Listings */
}
.svclisting p
{
margin-top: 20px;
}

.svclisting a
{
  color: #8787ec;
}





.serviceimg
{
  border-radius:10px;
  margin-right: 20px;
  margin-bottom: 20px;
  height: 100px;
  max-width: 100%;
}


/* ----- Hover Text -----
   Custom hover-text bubble taken from the Web App UI Builder Library v1.0.
   Driven by AddHoverText() in js/general.js
*/

.hovertext
{
  position: fixed; /* Built on the body and placed by AddHoverText - fixed so it always sits above the header and is never clipped */
  background: #333;
  color: white;
  padding: 6px 10px; /* Adjust size of bubble */
  font-size: 15px; /* Adjust the size of the text */
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.hovertext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - var(--arrow-shift, 0px));
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.hovertextshown
{
  opacity: 0.85;
}


/* Site title / heading text ( merged in from the old clean-look.css ) */
#cleantext {
  cursor:default;
}


/* ===== end merged styling.css ===== */


/* Body gets this while a full screen image is open so the page behind cannot scroll */
.noscroll
{
    overflow: hidden;
}


/* The dimmed full screen backdrop behind an expanded image ( starts hidden ) */
#expandimgbg {
  display: none;
  position: fixed;
  inset: 0;
  background-color: #00000038;
  padding: 40px;
  z-index: 3;
  overscroll-behavior: contain;
}


/* The image shown inside the full screen viewer */
#expandedimg {
    width: 100%;
    height: auto;
    max-height: 90vh;
    max-width: 100%;
    margin: auto;
    display: block;
    object-fit: contain;
}


/* A clickable image on the page that expands into the full screen viewer */
.expandableimg
{
  border-radius: 10px;
  margin-bottom: 25px;
  margin-top: 25px;
}


/* ----- Product Title -----
   The app name, icon and tagline heading built by AddProductTitle() in js/general.js
*/

/* The product name heading with its icon */
.producttitle
{
  font-size: 2.6em;
  margin-bottom: 2px;
}

/* The icon sitting to the left of the product name */
.producttitle img
{
  height: 54px;
  vertical-align: middle;
  margin-right: 6px;
}

/* The tagline line under the product name ( sits under the name, past the icon ) */
.producttagline
{
  margin-top: 0;
  margin-left: 60px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #00a900;
}


/* Muted sub line that sits under a section title */
.subtitle
{
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 1px;
  color: #9db39d;
}