@import url('add-in.css'); 
@font-face {
	font-family: 'gandhi_sans';
	src: url('fonts/gandhisans-regular-webfont.woff2') format('woff2'),
	url('fonts/gandhisans-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'gandhi_sans';
	src: url('fonts/gandhisans-italic-webfont.woff2') format('woff2'),
	url('fonts/gandhisans-italic-webfont.woff') format('woff');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'gandhi_sans';
	src: url('fonts/gandhisans-bold-webfont.woff2') format('woff2'),
	url('fonts/gandhisans-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'gandhi_sans';
	src: url('fonts/gandhisans-bolditalic-webfont.woff2') format('woff2'),
	url('fonts/gandhisans-bolditalic-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: 'gandhi_serif';
	src: url('fonts/gandhiserif-regular-webfont.woff2') format('woff2'),
	url('fonts/gandhiserif-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'gandhi_serif';
	src: url('fonts/gandhiserif-italic-webfont.woff2') format('woff2'),
	url('fonts/gandhiserif-italic-webfont.woff') format('woff');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: 'gandhi_serif';
	src: url('fonts/gandhiserif-bold-webfont.woff2') format('woff2'),
	url('fonts/gandhiserif-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'gandhi_serif';
	src: url('fonts/gandhiserif-bolditalic-webfont.woff2') format('woff2'),
	url('fonts/gandhiserif-bolditalic-webfont.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

html {
	font-size: 16px;
}

body > * {
	font-family: gandhi_sans, sans-serif;
	font-weight: 500;
	line-height: 1.5;
	font-size: 1rem;
	color: #101417;
}

h1,
h2,
h3,
h4,
h5,
th {
	font-family: "gandhi_serif", serif;
	letter-spacing: 2px;
  line-height: 2rem; /* increases, so wrapping headers don't overlap */
  color: #303E47;
  font-weight: 200;
}

.conclusionbox {
  padding: 1em;
  background: #FBFCFE;
  border: 3px solid #868686;
}

.memberbox {
  padding: 1em;
  background: #FBFCFE;
  border: 1px solid #099268;
}

.leaderbox {
  padding: 1em;
  background: #FBFCFE;
  border: 1px solid #E8590C;
}

.sgsbox {
  padding: 1em;
  background: #FBFCFE;
  border: 1px solid #7048E8;
}

.tipbox {
  padding: 1em;
  background: #F9F9F9;
  border: 1px solid #013EA6;
  /* border-radius: 10px; */
}

@media (min-width: 991.98px) {
#quarto-header {
  border-bottom: 1px solid #dee2e6;
  background-color: #587AA7;
}
}

.navbar-dark {
    background-color: #7EB8DF;
}

.navbar-brand > img {
  max-height: 36px;
}

.platform-table td {
  vertical-align: middle;
}

.platform-table td > div.sourceCode {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}


.document-example {
  opacity: 0.9;
  padding: 6px; 
  font-weight: 500;
  margin-bottom: 1rem;
}

.document-example div {
  padding: 5px;
}


.document-example .citation {
  color: blue;
}

.trademark {
  font-size: 0.6rem;
  display: inline-block;
  margin-left: -3px;
}

.search-attribution {
  margin-top: 20px;
  padding-bottom: 20px;
  height: 40px;
}

#download-button {
  margin-top: 1em;
}

#download-table {
  margin-bottom: 2em;  
}

#download-table p {
  margin-bottom: 0;
}

#download-table .checksum {
  color: var(--bs-primary);
  font-size: .775em;
  cursor: pointer;
  padding-top: 4px;
}

#download-button {
  display:flex;
  padding-bottom: 10px;
  padding-top: 10px;
}

#download-button .secondary {
  font-size: .775em;
  margin-bottom: 0;
}

#download-button .container {
  display: flex;
  padding-left: 10px;
  padding-right: 40px;
}

#download-button .icon-container {
  fill: white;
  width: 30px;
  margin-right: 15px;
}

iframe.reveal-demo {
  width: 100%;
  height: 350px;
  outline: none;
}


.slide-deck {
  border: 3px solid #dee2e6;
  width: 100%;
  height: 475px;
}

@media only screen and (max-width: 600px) {
 .slide-deck {
    height: 400px;
  }
}


@media (max-width: 575px) {

.link-cards .card {
  margin-bottom: 20px;
  margin-right: 35px;
}

}

@media (min-width: 576px) { 
.link-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.link-cards .card {
  width: 190px;
  margin: 0 20px 12px 0;
}


}


.link-cards .card {
  border: none;
  padding: 0;
}

.link-cards .card-title h4 {
  margin-top: 0;
}

.link-cards .card-title p {
  margin-bottom: 0;
}

.link-cards .card-subtitle {
  margin-bottom: 0.7rem;
}

.link-cards .card-body {
  padding: 0.5rem;
  padding-left: 0.1rem;
}

.link-cards .card-body ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}

.link-cards .card-body ul a {
  text-decoration: none;
}

.link-cards .card-body ul li {
  padding-bottom: 0.2rem;
}


.card .source-code {
  margin-top: 3px;
}

.carousel.card {
  font-size: 16px;
  padding-top: 2em;
}

.carousel.card a {
  text-decoration: none;
}

.carousel img {
  width: 70%;
  margin-bottom: 110px;
}

.carousel .carousel-control-prev-icon, 
.carousel .carousel-control-next-icon {
  margin-bottom: 110px;
}


.gallery-category {
  column-gap: 10px;
}

.btn-action-primary {
  color: white;
  background-color: #447099 !important;
}

.btn-action-primary:hover {
  color: white;
}

.btn-action {
  min-width: 165px;
  border-radius: 30px;
  border: none;
}

.callout-note {
  border-left-color: white;
}

/* Base style shared by all sections */
.section-block {
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

/* Four slightly different background colors */
.section-one   { background-color: #f0f4ff; } /* soft blue   */
.section-two   { background-color: #f0fff4; } /* soft green  */
.section-three { background-color: #fff8f0; } /* soft orange */
.section-four  { background-color: #fdf0ff; } /* soft purple */

/* Make nested headings look intentional inside colored blocks */
.section-block h2 {
  margin-top: 0;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  padding-bottom: 0.4rem;
}

.section-block h3 {
  color: #333;
}

/* Style the details/summary elements */
.section-block details {
  background-color: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}

.section-block details summary {
  font-weight: bold;
  cursor: pointer;
}

.section-block details[open] summary {
  margin-bottom: 0.5rem;
}