/********************************************************************************
--- Style Guide---
*********************************************************************************/
.sg-section {padding: 5.000em 0; border-bottom: 1px solid var(--light-gray);}
.sg-section:last-of-type {border-bottom: none;}
.sg-section__heading {position: relative; margin-bottom: 2.000em}
.sg-section__heading span {font-size: 50%; position: absolute; top: 50%; left: -3.125em; margin-top: -0.938em; width: 1.875em; height: 1.875em; line-height: 1.875em;}
.sg-section__heading span:after {content: ""; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--light-gray);}
.sg-section__subheading {font-size: 14px; text-transform: uppercase; margin: 2.000em 0; position: relative;}
.sg-section__subheading:before {content: ""; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--light-gray);}
.sg-section__subheading span {position: relative; background: #fff; padding-right: 1.250em;letter-spacing: 1px;}
.sg-section__font {overflow: hidden; margin-bottom: 1.750em;}
.sg-section__font {overflow: hidden; margin-bottom: 1.750em; box-shadow: 0 2px 7px 0 rgb(0 0 0 / 24%); margin-right: 2rem;}
.sg-section__font-letters {font-size: 5.000em; display: block; line-height: 1; /*opacity: 0.20;*/}
.sg-section__font-name { display: block; line-height: 1; color: var(--near-black)}
.sg-section__font-left, .sg-section__font-right {/*width: 50%; float: left;*/}
.sg-section__font-left {padding: 1.500em;}
.sg-section__font-right {border-top: 1px solid var(--light-gray); padding: 1.5em; font-size: 16px; }
.sg-section__font-weight {/*display: block;*/}
.sg-body {overflow-x: hidden;}
.sg-body .root, .sg-toggle {transition: -webkit-transform 250ms ease; transition: transform 250ms ease; transition: transform 250ms ease, -webkit-transform 250ms ease;}
.sg-fixed-nav {position: fixed; top: 0; left: 0; width: 250px; height: 100%; overflow-y: auto; padding: 40px 15px; background: #fff; z-index: 9999999; border-right: 1px solid var(--light-gray); -webkit-transform: translate3d(-250px, 0px, 0px);-moz-transform: translate3d(-250px, 0px, 0px);-o-transform: translate3d(-250px, 0px, 0px);-ms-transform: translate3d(-250px, 0px, 0px);transform: translate3d(-250px, 0px, 0px); transition: -webkit-transform 250ms ease; transition: transform 250ms ease; transition: transform 250ms ease, -webkit-transform 250ms ease;}
.sg-snippets-toggle {font-size: 14px; display: block;}
.sg-snippets-toggle:before {content: "\ea03"; font-family: var(--icon-family); margin-right: 6px;}
.sg-snippets-toggle.active:before {content: "\ea04"; font-family: var(--icon-family);}
.sg-toc {font-size: 13px;}
.sg-toggle {font-size: 14px; position: fixed; bottom: 0; left:0; width: 28px; height: 28px; line-height:1; padding: 0; margin: 0; border-radius: 0; z-index: 9999999;}
.sg-toggle:before {content: "\e974"; font-family: var(--icon-family);}
.sg-body--push .root, .sg-body--push .sg-toggle {-webkit-transform: translate3d(250px, 0px, 0px);-moz-transform: translate3d(250px, 0px, 0px);-o-transform: translate3d(250px, 0px, 0px);-ms-transform: translate3d(250px, 0px, 0px);transform: translate3d(250px, 0px, 0px);}
.sg-body--push .sg-fixed-nav {-webkit-transform: translate3d(0px, 0px, 0px);-moz-transform: translate3d(0px, 0px, 0px);-o-transform: translate3d(0px, 0px, 0px);-ms-transform: translate3d(0px, 0px, 0px);transform: translate3d(0px, 0px, 0px);}
.sg-body--push .sg-toggle:before {content: "\e955";}

span.section__label { background: rgba(0,0,0,.35); color: #fff; padding: 10px; display: inline-block; font-size: 11px; line-height: 1; border-radius: 0 0 3px 3px; margin: 0 0 0 20px; position: relative;	z-index: 45; }

.style__guide .row-site{width:100%}
.style__guide section { padding-left: 2rem; padding-right: 2rem; }
.component-notes { font-size: .9rem; margin-bottom: 0; }

@media (max-width: 1399px) {
	.sg-section__heading {padding-left: 1.500em;}
	.sg-section__heading span {left: 0;}
}

/*----------  Swatches  ----------*/
.swatch__container { box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.24); }
.swatch__color { position: relative; height: 150px;}
.swatch__color.with__bg-treatment { height: 200px;}
.swatch__hex { padding: 1rem; }
.swatch__container h5 { font-size: .85rem; }
.swatch__name {display:block; font-size:0.750em}
/*----------  Code Snippets  ----------*/
code {display: none; /* Remove in Production */}
code.active {display: block;}
pre {padding:15px; border:1px solid var(--light-gray); font-size: 14px;}

/* Sample Components Page */
.sc-section { height: 0px; opacity: 0; /*transition: opacity 0.5s linear;*/ }
.sc-section.active { height: auto; opacity: 1; background: #d1e8ed; padding-bottom: 1.2rem; box-shadow: inset 0px 0px 7px rgb(0 0 0 / 15%); transition: opacity 0.5s linear;}
.sc-section .sc-section__subheading span { background: #d1e8ed; }
.sc-section__subheading {font-size: 14px; text-transform: uppercase; margin: 2.000em 0; position: relative;}
.sc-section__subheading:before {content: ""; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--light-gray);}
.sc-section__subheading span {position: relative; background: #fff; padding-right: 1.250em;letter-spacing: 1px;}
.sc-section .sc-section__subheading { margin-bottom: 0px; }
.sc-section .sc-section__created__using { font-size: .8rem; font-style: italic; margin: -1px 0 0.25rem 2rem; display: block; }
.acf-options__slide-toggle { margin-left: 2rem;}
.acf-options__slide-toggle .slide-toggle, .acf-options__slide-toggle .slide-toggle-alt {font-size: .9rem;}
.sc-section .sc-section__subheading table tr th, table tr td { padding: .5em 0.820em; font-size: 0.813em; border: 1px solid var(--light-gray); }
.sc-section .responsive__table-stack { margin-right: 1rem; }
.sc-section table.acf-options thead tr th,
.sc-section table.acf-options tfoot tr th,
.sc-section table.acf-options tfoot tr td,
.sc-section table.acf-options tbody tr th,
.sc-section table.acf-options tbody tr td,
.sc-section table.acf-options tr td
{ line-height: 1.0; }
.sc-section table.acf-options tr td.long__content { line-height: 1.5; }
.acf-options__container { display: flex; justify-content: space-between; }

.sc-body {overflow-x: hidden;}
.sc-body .root, .sc-toggle {transition: -webkit-transform 250ms ease; transition: transform 250ms ease; transition: transform 250ms ease, -webkit-transform 250ms ease;}
.sc-fixed-nav {position: fixed; top: 0; left: 0; width: 250px; height: 100%; overflow-y: auto; padding: 40px 15px; background: #fff; z-index: 9999999; border-right: 1px solid var(--light-gray); -webkit-transform: translate3d(-250px, 0px, 0px);-moz-transform: translate3d(-250px, 0px, 0px);-o-transform: translate3d(-250px, 0px, 0px);-ms-transform: translate3d(-250px, 0px, 0px);transform: translate3d(-250px, 0px, 0px); transition: -webkit-transform 250ms ease; transition: transform 250ms ease; transition: transform 250ms ease, -webkit-transform 250ms ease;}
.sc-snippets-toggle {font-size: 14px; display: block;}
.sc-snippets-toggle:before {content: "\ea03"; font-family: var(--icon-family); margin-right: 6px;}
.sc-snippets-toggle.active:before {content: "\ea04"; font-family: var(--icon-family);}
.sc-toc {font-size: 13px;}
.sc-toggle {font-size: 14px; position: fixed; bottom: 0; left:0; width: 28px; height: 28px; line-height:1; padding: 0; margin: 0; border-radius: 0; z-index: 9999999;}
.sc-toggle:before {content: "\e974"; font-family: var(--icon-family);}
.sc-body--push .root, .sc-body--push .sc-toggle {-webkit-transform: translate3d(250px, 0px, 0px);-moz-transform: translate3d(250px, 0px, 0px);-o-transform: translate3d(250px, 0px, 0px);-ms-transform: translate3d(250px, 0px, 0px);transform: translate3d(250px, 0px, 0px);}
.sc-body--push .sc-fixed-nav {-webkit-transform: translate3d(0px, 0px, 0px);-moz-transform: translate3d(0px, 0px, 0px);-o-transform: translate3d(0px, 0px, 0px);-ms-transform: translate3d(0px, 0px, 0px);transform: translate3d(0px, 0px, 0px);}
.sc-body--push .sc-toggle:before {content: "\e955";}

.sc-popup__container { display: flex; gap: 0.5rem; justify-content: center; }
.sc-popup__button { background: #d1e7ed; color: var(--black); padding: 0.7em 1.2em; font-size: 0.9rem; }
.sc-popup__button:hover { background: #373737; color: #d1e7ed; }

@media (max-width: 768px) {
	.sc-popup__tablet { display: none; }
}
@media (max-width: 639px) {
	.acf-options__container { flex-direction: column; }
}
@media (max-width: 375px) {
	.sc-popup__phone { display: none; }
}

/* Sample Component Test CSS Pages */
.sample-component-menu__container { border-bottom: 1px solid lightgrey; }
.sample-component-menu { list-style: none; margin: 0; display: flex; flex-wrap: wrap; }
.sample-component-menu li a { padding: .5rem 1rem; display: inline-block; }