:root {
      color-scheme: light dark;
    }

/* Apply box-sizing: border-box to all elements, including ::before and ::after pseudo-elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Enable smooth scrolling for users who haven't expressed a preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

/* Basic reset for the body element */
body {
  margin: 0;
  font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto",  "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  -webkit-text-size-adjust: 100%; /* Adjust text size for better readability on iOS */
}

/* Horizontal rule styling */
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

/* Headings styling */
h6, h5, h4, h3, h2, h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  font-size: calc(1.375rem + 1.2vw);
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

/* Paragraph styling */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

p, ol, ul {

font-size: calc(1rem + 0.12vw);

}

/* Lists styling */
ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}


/* Bold and strong text styling */
b,
strong {
  font-weight: bolder;
}

/* Small text styling */
small {
  font-size: 0.875em;
}


/* Subscript and superscript styling */
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Anchor link styling */
a {
  text-decoration: underline;
}


a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}



pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}

/* Image and SVG styling */
img,
svg {
  vertical-align: middle;
}

/* Table styling */
table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

/* Label styling */
label {
  display: inline-block;
}


button:focus:not(:focus-visible) {
  outline: 0;
}

/* Form elements styling */
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}


button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Textarea styling */
textarea {
  resize: vertical;
}

/* Hidden attribute styling */
[hidden] {
  display: none !important;
}


.card-img, .card-img-bottom, .card-img-top {
    width: 100%;
}

.card-img-top {
    width: 100%;
    border-top-right-radius: 6px !important;
    border-top-left-radius: 6px !important;
}

.ratio {
    width: 100%;
}
.ratio-16x9 {
  width: 100%;
  aspect-ratio: 16/9;
}

.ratio>* {
    width: 100%;
    height: 100%;
}

.rounded {
    border-radius: 6px !important;
}

.mb-3 {
    margin-bottom: 1rem!important;
}

.my-1 {
    margin-top: 0.5rem!important;
    margin-bottom: 0.5rem!important;
}



.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: -12px;
    margin-left: -12px;
}

.row>* {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-top: 0px;
}

@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

.container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
}
section {
    padding-top: 1.5rem!important;
    padding-bottom: 0.5rem!important;

}

.card {
    border-radius: 6px !important;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid ButtonFace;
    background-color: rgba(127, 127, 127, 0.08);
}


.card-body {
    flex: 1 1 auto;
    padding: 14px 14px;
}
.card-text:last-child {
    margin-bottom: 0;
}



.shade {
    background-image: url("/bgmodAccentColor.svg");
}

@media (min-width: 1400px) {
.container {
    max-width: 1320px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
section {
  padding-top: 2rem!important;
}

}



@media (min-width: 2000px) {
.container {
    max-width: 1920px;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}
p, ol, ul {

font-size: calc(1rem + 0.3vw);

}

}

.text-white {
    color: white;
}

.bg-kbgreen {
	background-color: #00703c;
  background-image: url("/brick-wall.svg");
}

@media (prefers-color-scheme: dark) {
.bg-kbgreen {
background-color: #004f2a;
}
}