h1 {
	font-size: 1.75rem; /* reduced to same size as h3 */
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: .75rem;
}

blockquote{
  font-size: unset !important;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 0.5em 75px;
  border-left:8px solid var(--alert-light);
  line-height:1.6;
  position: relative;
  background:var(--alert-dark);
}
blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:var(--alert-light);
  font-size: 3rem;
  position: absolute;
  left: 10px;
  top:-6px;
}
blockquote::after{
  content: '';
}
blockquote p {
  padding-left: 20px;
}
blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.navbar-brand {
  font-size: clamp(21px, 2vw, 26px) !important;
}

#breadcrumbs {
  font-size: small;
}
.breadcrumb-item+.breadcrumb-item::before {
  content: "»";
}

#logo {
  width: 150px;
}

#logo-text {
  margin-top: 50px;
}

@media (max-width: 1400px) {
    .nav-link {
        font-size: 14px; /* Font size for screens smaller than 768px */
    }
    .nav-link > img, .nav-link > svg {
      max-width: 20px !important;
    }
}
@media (max-width: 1200px) {
    .nav-link {
        font-size: 13px; /* Font size for screens smaller than 768px */
    }
}

@media (max-width: 991px) {
    #logo {
      width: 120px;
    }
    #logo-text {
      margin-top: 30px;
    }
    .nav-link {
        font-size: 12px;
    }
    .social-link {
      display: none;
    }
}

@media (max-width: 768px) {
    #logo {
      width: 0px;
    }
    #logo-text {
      margin-top: 0px;
    }
    .nav-link {
        font-size: 16px;
    }
    .navbar > .container {
      justify-content: normal !important;
    }
    .social-link {
      display: unset;
    }
    .main-content {
      margin-top: unset !important;
    }
}

.text-small {
  font-size: 0.8rem;
}

.italic {
  font-style: italic;
}

img.gallery_item {
	margin: 0.5em;
	border: 0.25em solid darkgrey;
}

#crt-finder .btn {
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

#crt-finder .btn-outline-primary.disabled {
	color: darkgrey;
	border-color: darkgrey;
}

.noUi-connect {
    background: #007bff !important;
}

.noUi-value-sub {
	font-size: unset !important;
	color: unset !important;
}
a {
  text-decoration: none;
}

.notices p {
  margin-top: revert !important;
}

.blog-main .list-item {
  border-bottom: 1px solid grey;
}

@media (max-width: 768px) {
  #css-lightswitch  {
    position: revert !important;
  }
}

a, .page-link {
  color: #6ea8fe;
}

a:hover, .page-link:hover {
  color: #8bb9fe;
}

.text-current {
  color: var(--text-color);
}
.text-current:hover {
  color: var(--text-color-darker);
}

td {
  border: 1px solid var(--text-color) !important; 
}

#grav-login, #grav-login .col-sm-2 { 
  text-align: unset !important;
}

.font-weight-bold {
  font-weight: bold;
}

.diff_pinout_warning {
  background-color: var(--alert-warning) !important;
}

body.dark-mode th {
  background: #494949;
}

body.light-mode th {
  background: whitesmoke;
}

body.dark-mode .input-group-text {
  background-color: #494949;
  color: var(--text-color);
}

.dropdown-menu {
  background-color: var(--dropdown-background);
}

.dropdown-item {
  color: var(--text-color);
}

.dropdown-item:hover {

}

 .accordion-button {
  color: var(--text-color) !important;
  background-color: rgba(0, 0, 0, .30);
}

.accordion-button:not(.collapsed) {
  color: var(--text-color) !important;
  background-color: rgba(0, 0, 0, .03);
 }
 .accordion-body {
  background-color: var(--dropdown-background);
 }


.thead-dark {
  background-color: #373c3e;
}

body.dark-mode #specifications-list,
body.dark-mode #specifications-list > thead,
body.dark-mode #specifications-list > * td { 
  border-color: #35393b !important;
}


body.dark-mode .card {
  background-color: #494949;
}

body.dark-mode #grav-login {
  background: unset !important;
}

body.dark-mode .page-link {
  background-color: #212529;
  border-color: #495057;
}

body.dark-mode .page-item.active {
  border-color: #495057;
}

body.dark-mode .page-item.disabled .page-link {
    color: rgb(222 226 230 / 75%) !important;
    background-color: #212529 !important;
    border-color: #495057 !important; 
}

body.dark-mode .navbar-brand img {
  /*background: #8c8c8c;
  -webkit-box-shadow: 0px 0px 3px 5px #8c8c8c;
  -moz-box-shadow: 0px 0px 3px 5px #8c8c8c;
  box-shadow: 0px 0px 3px 5px #8c8c8c;*/
}

body.light-mode .navbar-brand img {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  background: none;
}

body.dark-mode .lbl-toggle {
  background-color: #353535;
}

body.light-mode .lbl-toggle {
  background-color: #DDD;
}

body.dark-mode {
  --text-color: #eee;
  --bkg-color: #141617;
}

body.dark-mode .popover-header {
  background-color: #3b3b3b;
}

body.dark-mode .popover-body {
  background-color: #c5c5c5;
}

body.dark-mode .popover-arrow {
  color: #c5c5c5;
}


@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
    --text-color: #eee;
    --text-color-darker: #D3D3D3;
    --bkg-color: #1b1b1b;
    --hr-color:rgba(255,255,255,.1);
    --notices-green: #142e14;
    --notices-red: #411010;
    --notices-blue: #192e38;
    --notices-yellow: #432e0f;
    --alert-warning: #7a4e09;
    --alert-danger: #74261e;
    --alert-info: #0c515c;
    --alert-light: #9e9e9e;
    --alert-dark: #3b3b3b;
    --alert-success: #3e5244;
    --alert-secondary: #313131;
    --alert-primary: #1c2d40;
    --form-background: #000;
    --form-textcolor: #EEE;
    --dropdown-background: rgb(33, 37, 41);
    
  }
  body.light-mode {
    --text-color: #222;
    --text-color-darker: #212529;
    --bkg-color: #fff;
    --hr-color:rgba(0,0,0,.1);
    --notices-green: #f1f9f1;
    --notices-red: #fdf7f7;
    --notices-blue: #f4f8fa;
    --notices-yellow: #fcf8f2;
    --alert-warning: #fff3cd;
    --alert-danger: #f8d7da;
    --alert-info: #cff4fc;
    --alert-light: #eeeeee;
    --alert-dark: #d3d3d4;
    --alert-success: #d1e7dd;
    --alert-secondary: #e2e3e5;
    --alert-primary: #cfe2ff;
    --form-background: #FFF;
    --form-textcolor: #212529;
    --dropdown-background: #FFF;
  }
}

body {
  background: var(--bkg-color);
}

h1, h2, h3, h4, h5, h6, 
p, body {
  color: var(--text-color);
}

.alert {
  color: revert !important;
}
.alert-warning {
  background: var(--alert-warning) !important;
}
.alert-danger {
  background: var(--alert-danger) !important;
}
.alert-info {
  background: var(--alert-info) !important;
}
.alert-light {
  background: var(--alert-light) !important;
}
.alert-dark {
  background: var(--alert-dark) !important;
}
.alert-success {
  background: var(--alert-success) !important;
}
.alert-secondary {
  background: var(--alert-secondary) !important;
}
.alert-primary {
  background: var(--alert-primary) !important;
}

.notices p {
  color: revert !important;
}
.notices.green {
  background: var(--notices-green) !important;
}
.notices.red {
  background: var(--notices-red) !important;
}
.notices.blue {
  background: var(--notices-blue) !important;
}
.notices.yellow {
  background: var(--notices-yellow) !important;
}

.form-control {
  background-color: var(--form-background);
  color: var(--form-textcolor);
  border-color: var(--hr-color);
}

.form-control:focus {
    background-color: var(--form-background);
    color: var(--form-textcolor);
}

.table {
  color: var(--text-color-darker);
}

hr {
    border-top: 1px solid var(--hr-color);
}

.license {
  
}

.pin_red,
.pin_red_g1,
.pin_red_g2 {
  color: #ff3f3f;
  border-bottom-color: var(--text-color) !important;
}
.pin_green,
.pin_green_g1,
.pin_green_g2 {
  color: #47df47;
  border-bottom-color: var(--text-color) !important;
}
.pin_blue,
.pin_blue_g1,
.pin_blue_g2 {
  color: #8080ff;
  border-bottom-color: var(--text-color) !important;
}

/* Make Mermaid diagrams render at natural size */
.mermaid > svg {
  width: auto !important;
  height: auto !important;
  max-width: 800px !important;
  transform: none !important;         /* in case something applies scale() */
  display: block;
}

/* Give the container scrollbars instead of shrinking the SVG */
.mermaid {
  overflow: auto !important;
}

/* Optional: if labels wrap poorly, allow wrapping */
.mermaid .nodeLabel {
  white-space: pre-wrap;
}

.mermaid > svg {
  min-width: 1600px !important;  /* pick a width that feels right for you */
  font-size: 10px !important;
}

.mermaid {
  max-height: 500px;
}