\n * #### Headline for the Notice\n * Text for the notice\n *
\n */\n\n@mixin notice($notice-color) {\n margin: 2em 0 !important; /* override*/\n padding: 1em;\n color: $dark-gray;\n font-family: $global-font-family;\n font-size: $type-size-6 !important;\n text-indent: initial; /* override*/\n background-color: mix(#fff, $notice-color, 90%);\n border-radius: $border-radius;\n box-shadow: 0 1px 1px rgba($notice-color, 0.25);\n\n h4 {\n margin-top: 0 !important; /* override*/\n margin-bottom: 0.75em;\n }\n\n @at-root .page__content #{&} h4 {\n /* using at-root to override .page-content h4 font size*/\n margin-bottom: 0;\n font-size: 1em;\n }\n\n p {\n &:last-child {\n margin-bottom: 0 !important; /* override*/\n }\n }\n\n h4 + p {\n /* remove space above paragraphs that appear directly after notice headline*/\n margin-top: 0;\n padding-top: 0;\n }\n\n a {\n color: $notice-color;\n\n &:hover {\n color: mix(#000, $notice-color, 40%);\n }\n }\n\n code {\n background-color: mix(#fff, $notice-color, 95%)\n }\n\n\tpre code {\n\t\tbackground-color: inherit;\n\t}\n\n ul {\n &:last-child {\n margin-bottom: 0; /* override*/\n }\n }\n}\n\n/* Default notice */\n\n.notice {\n @include notice($light-gray);\n}\n\n/* Primary notice */\n\n.notice--primary {\n @include notice($primary-color);\n}\n\n/* Info notice */\n\n.notice--info {\n @include notice($info-color);\n}\n\n/* Warning notice */\n\n.notice--warning {\n @include notice($warning-color);\n}\n\n/* Success notice */\n\n.notice--success {\n @include notice($success-color);\n}\n\n/* Danger notice */\n\n.notice--danger {\n @include notice($danger-color);\n}\n",
"/* ==========================================================================\n MASTHEAD\n ========================================================================== */\n\n.masthead {\n position: relative;\n border-bottom: 1px solid $border-color;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.15s;\n animation-delay: 0.15s;\n z-index: 20;\n\n &__inner-wrap {\n @include clearfix;\n margin-left: auto;\n margin-right: auto;\n padding: 1em;\n max-width: 100%;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n font-family: $sans-serif-narrow;\n\n @include breakpoint($medium) {\n max-width: $x-large;\n }\n\n nav {\n z-index: 10;\n }\n\n a {\n text-decoration: none;\n }\n }\n}\n\n.site-logo img {\n max-height: 2rem;\n}\n\n.site-title {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-item-align: center;\n align-self: center;\n font-weight: bold;\n // z-index: 20;\n}\n\n.site-subtitle {\n display: block;\n font-size: $type-size-8;\n}\n\n.masthead__menu {\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n\n .site-nav {\n margin-left: 0;\n\n @include breakpoint($small) {\n float: right;\n }\n }\n\n ul {\n margin: 0;\n padding: 0;\n clear: both;\n list-style-type: none;\n }\n}\n\n.masthead__menu-item {\n display: block;\n list-style-type: none;\n white-space: nowrap;\n\n &--lg {\n padding-right: 2em;\n font-weight: 700;\n }\n}\n",
"/* ==========================================================================\n NAVIGATION\n ========================================================================== */\n\n/*\n Breadcrumb navigation links\n ========================================================================== */\n\n.breadcrumbs {\n @include clearfix;\n margin: 0 auto;\n max-width: 100%;\n padding-left: 1em;\n padding-right: 1em;\n font-family: $sans-serif;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n\n @include breakpoint($x-large) {\n max-width: $x-large;\n }\n\n ol {\n padding: 0;\n list-style: none;\n font-size: $type-size-6;\n\n @include breakpoint($large) {\n float: right;\n width: calc(100% - #{$right-sidebar-width-narrow});\n }\n\n @include breakpoint($x-large) {\n width: calc(100% - #{$right-sidebar-width});\n }\n }\n\n li {\n display: inline;\n }\n\n .current {\n font-weight: bold;\n }\n}\n\n/*\n Post pagination navigation links\n ========================================================================== */\n\n.pagination {\n @include clearfix();\n float: left;\n margin-top: 1em;\n padding-top: 1em;\n width: 100%;\n\n ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n font-family: $sans-serif;\n }\n\n li {\n display: block;\n float: left;\n margin-left: -1px;\n\n a {\n display: block;\n margin-bottom: 0.25em;\n padding: 0.5em 1em;\n font-family: $sans-serif;\n font-size: 14px;\n font-weight: bold;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n color: $muted-text-color;\n border: 1px solid mix(#000, $border-color, 25%);\n border-radius: 0;\n\n &:hover {\n color: $link-color-hover;\n }\n\n &.current,\n &.current.disabled {\n color: #fff;\n background: $primary-color;\n }\n\n &.disabled {\n color: rgba($muted-text-color, 0.5);\n pointer-events: none;\n cursor: not-allowed;\n }\n }\n\n &:first-child {\n margin-left: 0;\n\n a {\n border-top-left-radius: $border-radius;\n border-bottom-left-radius: $border-radius;\n }\n }\n\n &:last-child {\n a {\n border-top-right-radius: $border-radius;\n border-bottom-right-radius: $border-radius;\n }\n }\n }\n\n /* next/previous buttons */\n &--pager {\n display: block;\n padding: 1em 2em;\n float: left;\n width: 50%;\n font-family: $sans-serif;\n font-size: $type-size-5;\n font-weight: bold;\n text-align: center;\n text-decoration: none;\n color: $muted-text-color;\n border: 1px solid mix(#000, $border-color, 25%);\n border-radius: $border-radius;\n\n &:hover {\n @include yiq-contrasted($muted-text-color);\n }\n\n &:first-child {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &:last-child {\n margin-left: -1px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &.disabled {\n color: rgba($muted-text-color, 0.5);\n pointer-events: none;\n cursor: not-allowed;\n }\n }\n}\n\n.page__content + .pagination,\n.page__meta + .pagination,\n.page__share + .pagination,\n.page__comments + .pagination {\n margin-top: 2em;\n padding-top: 2em;\n border-top: 1px solid $border-color;\n}\n\n/*\n Priority plus navigation\n ========================================================================== */\n\n.greedy-nav {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: $nav-height;\n background: $background-color;\n\n a {\n display: block;\n margin: 0 1rem;\n color: $masthead-link-color;\n text-decoration: none;\n\n &:hover {\n color: $masthead-link-color-hover;\n }\n\n &.site-logo {\n margin-left: 0;\n margin-right: 0.5rem;\n }\n\n &.site-title {\n margin-left: 0;\n }\n }\n\n &__toggle {\n -ms-flex-item-align: center;\n align-self: center;\n height: $nav-toggle-height;\n border: 0;\n outline: none;\n background-color: transparent;\n cursor: pointer;\n }\n\n .visible-links {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n overflow: hidden;\n\n li {\n -webkit-box-flex: 0;\n -ms-flex: none;\n flex: none;\n }\n\n a {\n position: relative;\n\n &:before {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n height: 4px;\n background: $primary-color;\n width: 100%;\n -webkit-transition: $global-transition;\n transition: $global-transition;\n -webkit-transform: scaleX(0) translate3d(0, 0, 0);\n transform: scaleX(0) translate3d(0, 0, 0); // hide\n }\n\n &:hover:before {\n -webkit-transform: scaleX(1);\n -ms-transform: scaleX(1);\n transform: scaleX(1); // reveal\n }\n }\n }\n\n .hidden-links {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 15px;\n padding: 5px;\n border: 1px solid $border-color;\n border-radius: $border-radius;\n background: $background-color;\n -webkit-box-shadow: 0 2px 4px 0 rgba(#000, 0.16),\n 0 2px 10px 0 rgba(#000, 0.12);\n box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);\n\n &.hidden {\n display: none;\n }\n\n a {\n margin: 0;\n padding: 10px 20px;\n font-size: $type-size-5;\n\n &:hover {\n color: $masthead-link-color-hover;\n background: $navicon-link-color-hover;\n }\n }\n\n &:before {\n content: \"\";\n position: absolute;\n top: -11px;\n right: 10px;\n width: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: $border-color transparent;\n display: block;\n z-index: 0;\n }\n\n &:after {\n content: \"\";\n position: absolute;\n top: -10px;\n right: 10px;\n width: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: $background-color transparent;\n display: block;\n z-index: 1;\n }\n\n li {\n display: block;\n border-bottom: 1px solid $border-color;\n\n &:last-child {\n border-bottom: none;\n }\n }\n }\n}\n\n.no-js {\n .greedy-nav {\n .visible-links {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n overflow: visible;\n }\n }\n}\n\n/*\n Navigation list\n ========================================================================== */\n\n.nav__list {\n margin-bottom: 1.5em;\n\n input[type=\"checkbox\"],\n label {\n display: none;\n }\n\n @include breakpoint(max-width $large - 1px) {\n label {\n position: relative;\n display: inline-block;\n padding: 0.5em 2.5em 0.5em 1em;\n color: $gray;\n font-size: $type-size-6;\n font-weight: bold;\n border: 1px solid $light-gray;\n border-radius: $border-radius;\n z-index: 20;\n -webkit-transition: 0.2s ease-out;\n transition: 0.2s ease-out;\n cursor: pointer;\n\n &:before,\n &:after {\n content: \"\";\n position: absolute;\n right: 1em;\n top: 1.25em;\n width: 0.75em;\n height: 0.125em;\n line-height: 1;\n background-color: $gray;\n -webkit-transition: 0.2s ease-out;\n transition: 0.2s ease-out;\n }\n\n &:after {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n }\n\n &:hover {\n color: #fff;\n border-color: $gray;\n background-color: mix(white, #000, 20%);\n\n &:before,\n &:after {\n background-color: #fff;\n }\n }\n }\n\n /* selected*/\n input:checked + label {\n color: white;\n background-color: mix(white, #000, 20%);\n\n &:before,\n &:after {\n background-color: #fff;\n }\n }\n\n /* on hover show expand*/\n label:hover:after {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg);\n }\n\n input:checked + label:hover:after {\n -webkit-transform: rotate(0);\n -ms-transform: rotate(0);\n transform: rotate(0);\n }\n\n ul {\n margin-bottom: 1em;\n }\n\n a {\n display: block;\n padding: 0.25em 0;\n\n @include breakpoint($large) {\n padding-top: 0.125em;\n padding-bottom: 0.125em;\n }\n\n &:hover {\n text-decoration: underline;\n }\n }\n }\n}\n\n.nav__list .nav__items {\n margin: 0;\n font-size: 1.25rem;\n\n a {\n color: inherit;\n }\n\n .active {\n margin-left: -0.5em;\n padding-left: 0.5em;\n padding-right: 0.5em;\n font-weight: bold;\n }\n\n @include breakpoint(max-width $large - 1px) {\n position: relative;\n max-height: 0;\n opacity: 0%;\n overflow: hidden;\n z-index: 10;\n -webkit-transition: 0.3s ease-in-out;\n transition: 0.3s ease-in-out;\n -webkit-transform: translate(0, 10%);\n -ms-transform: translate(0, 10%);\n transform: translate(0, 10%);\n }\n}\n\n@include breakpoint(max-width $large - 1px) {\n .nav__list input:checked ~ .nav__items {\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/\n overflow: visible;\n opacity: 1;\n margin-top: 1em;\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n }\n}\n\n.nav__title {\n margin: 0;\n padding: 0.5rem 0.75rem;\n font-family: $sans-serif-narrow;\n font-size: $type-size-5;\n font-weight: bold;\n}\n\n.nav__sub-title {\n display: block;\n margin: 0.5rem 0;\n padding: 0.25rem 0;\n font-family: $sans-serif-narrow;\n font-size: $type-size-6;\n font-weight: bold;\n text-transform: uppercase;\n border-bottom: 1px solid $border-color;\n}\n\n/*\n Table of contents navigation\n ========================================================================== */\n\n.toc {\n font-family: $sans-serif-narrow;\n color: $gray;\n background-color: $background-color;\n border: 1px solid $border-color;\n border-radius: $border-radius;\n -webkit-box-shadow: $box-shadow;\n box-shadow: $box-shadow;\n\n .nav__title {\n color: #fff;\n font-size: $type-size-6;\n background: $primary-color;\n border-top-left-radius: $border-radius;\n border-top-right-radius: $border-radius;\n }\n\n // Scrollspy marks toc items as .active when they are in focus\n .active a {\n @include yiq-contrasted($active-color);\n }\n}\n\n.toc__menu {\n margin: 0;\n padding: 0;\n width: 100%;\n list-style: none;\n font-size: $type-size-6;\n\n @include breakpoint($large) {\n font-size: $type-size-7;\n }\n\n a {\n display: block;\n padding: 0.25rem 0.75rem;\n color: $muted-text-color;\n font-weight: bold;\n line-height: 1.5;\n border-bottom: 1px solid $border-color;\n\n &:hover {\n color: $text-color;\n }\n }\n\n li ul > li a {\n padding-left: 1.25rem;\n font-weight: normal;\n }\n\n li ul li ul > li a {\n padding-left: 1.75rem;\n }\n\n li ul li ul li ul > li a {\n padding-left: 2.25rem;\n }\n\n li ul li ul li ul li ul > li a {\n padding-left: 2.75rem;\n }\n\n li ul li ul li ul li ul li ul > li a {\n padding-left: 3.25rem\n }\n}\n",
"/* ==========================================================================\n NAVIGATION\n ========================================================================== */\n\n/*\n Breadcrumb navigation links\n ========================================================================== */\n\n.breadcrumbs_stretched {\n @include clearfix;\n margin: 0 auto;\n max-width: 100%;\n padding-left: 1em;\n padding-right: 1em;\n font-family: $sans-serif;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.3s;\n animation-delay: 0.3s;\n\n @include breakpoint($x-large) {\n max-width: $x-large;\n }\n\n ol {\n padding: 0;\n list-style: none;\n font-size: $type-size-6;\n }\n\n li {\n display: inline;\n }\n\n .current {\n font-weight: bold;\n }\n}\n",
"/* ==========================================================================\n FOOTER\n ========================================================================== */\n\n.page__footer {\n @include clearfix;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n margin-top: 3em;\n color: $muted-text-color;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.45s;\n animation-delay: 0.45s;\n background-color: $footer-background-color;\n\n footer {\n @include clearfix;\n margin-left: auto;\n margin-right: auto;\n margin-top: 2em;\n max-width: 100%;\n padding: 0 1em 2em;\n\n @include breakpoint($x-large) {\n max-width: $x-large;\n }\n }\n\n a {\n color: inherit;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n .fas,\n .fab,\n .far,\n .fal {\n color: $muted-text-color;\n }\n}\n\n.page__footer-copyright {\n font-family: $global-font-family;\n font-size: $type-size-7;\n}\n\n.page__footer-follow {\n ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n li {\n display: inline-block;\n padding-top: 5px;\n padding-bottom: 5px;\n font-family: $sans-serif-narrow;\n font-size: $type-size-6;\n text-transform: uppercase;\n }\n\n li + li:before {\n content: \"\";\n padding-right: 5px;\n }\n\n a {\n padding-right: 10px;\n font-weight: bold;\n }\n\n .social-icons {\n a {\n white-space: nowrap;\n }\n }\n}\n",
"/* ==========================================================================\n SEARCH\n ========================================================================== */\n\n.layout--search {\n .archive__item-teaser {\n margin-bottom: 0.25em;\n }\n}\n\n.search__toggle {\n margin-left: 1rem;\n margin-right: 1rem;\n height: $nav-toggle-height;\n border: 0;\n outline: none;\n color: $primary-color;\n background-color: transparent;\n cursor: pointer;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n\n &:hover {\n color: mix(#000, $primary-color, 25%);\n }\n}\n\n.search-icon {\n width: 100%;\n height: 100%;\n}\n\n.search-content {\n display: none;\n visibility: hidden;\n padding-top: 1em;\n padding-bottom: 1em;\n\n &__inner-wrap {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1em;\n padding-right: 1em;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.15s;\n animation-delay: 0.15s;\n\n @include breakpoint($x-large) {\n max-width: $max-width;\n }\n\n }\n\n &__form {\n background-color: transparent;\n }\n\n .search-input {\n display: block;\n margin-bottom: 0;\n padding: 0;\n border: none;\n outline: none;\n box-shadow: none;\n background-color: transparent;\n font-size: $type-size-3;\n\n @include breakpoint($large) {\n font-size: $type-size-2;\n }\n\n @include breakpoint($x-large) {\n font-size: $type-size-1;\n }\n }\n\n &.is--visible {\n display: block;\n visibility: visible;\n\n &::after {\n content: \"\";\n display: block;\n }\n }\n\n .results__found {\n margin-top: 0.5em;\n font-size: $type-size-6;\n }\n\n .archive__item {\n margin-bottom: 2em;\n\n @include breakpoint($large) {\n width: 75%;\n }\n\n @include breakpoint($x-large) {\n width: 50%;\n }\n }\n\n .archive__item-title {\n margin-top: 0;\n }\n\n .archive__item-excerpt {\n margin-bottom: 0;\n }\n}\n\n/* Algolia search */\n\n.ais-search-box {\n max-width: 100% !important;\n margin-bottom: 2em;\n}\n\n.archive__item-title .ais-Highlight {\n color: $primary-color;\n font-style: normal;\n text-decoration: underline;\n}\n\n.archive__item-excerpt .ais-Highlight {\n color: $primary-color;\n font-style: normal;\n font-weight: bold;\n}\n",
"/* ==========================================================================\n Syntax highlighting\n ========================================================================== */\n\ndiv.highlighter-rouge,\nfigure.highlight {\n position: relative;\n margin-bottom: 1em;\n background: $base00;\n color: $base05;\n font-family: $monospace;\n font-size: $type-size-6;\n line-height: 1.8;\n border-radius: $border-radius;\n\n > pre,\n pre.highlight {\n margin: 0;\n padding: 1em;\n }\n}\n\n.highlight table {\n margin-bottom: 0;\n font-size: 1em;\n border: 0;\n\n td {\n padding: 0;\n width: calc(100% - 1em);\n border: 0;\n\n /* line numbers*/\n &.gutter,\n &.rouge-gutter {\n padding-right: 1em;\n width: 1em;\n color: $base04;\n border-right: 1px solid $base04;\n text-align: right;\n }\n\n /* code */\n &.code,\n &.rouge-code {\n padding-left: 1em;\n }\n }\n\n pre {\n margin: 0;\n }\n}\n\n.highlight pre {\n width: 100%;\n}\n\n.highlight .hll {\n background-color: $base06;\n}\n.highlight {\n .c {\n /* Comment */\n color: $base04;\n }\n .err {\n /* Error */\n color: $base08;\n }\n .k {\n /* Keyword */\n color: $base0e;\n }\n .l {\n /* Literal */\n color: $base09;\n }\n .n {\n /* Name */\n color: $base05;\n }\n .o {\n /* Operator */\n color: $base0c;\n }\n .p {\n /* Punctuation */\n color: $base05;\n }\n .cm {\n /* Comment.Multiline */\n color: $base04;\n }\n .cp {\n /* Comment.Preproc */\n color: $base04;\n }\n .c1 {\n /* Comment.Single */\n color: $base04;\n }\n .cs {\n /* Comment.Special */\n color: $base04;\n }\n .gd {\n /* Generic.Deleted */\n color: $base08;\n }\n .ge {\n /* Generic.Emph */\n font-style: italic;\n }\n .gh {\n /* Generic.Heading */\n color: $base05;\n font-weight: bold;\n }\n .gi {\n /* Generic.Inserted */\n color: $base0b;\n }\n .gp {\n /* Generic.Prompt */\n color: $base04;\n font-weight: bold;\n }\n .gs {\n /* Generic.Strong */\n font-weight: bold;\n }\n .gu {\n /* Generic.Subheading */\n color: $base0c;\n font-weight: bold;\n }\n .kc {\n /* Keyword.Constant */\n color: $base0e;\n }\n .kd {\n /* Keyword.Declaration */\n color: $base0e;\n }\n .kn {\n /* Keyword.Namespace */\n color: $base0c;\n }\n .kp {\n /* Keyword.Pseudo */\n color: $base0e;\n }\n .kr {\n /* Keyword.Reserved */\n color: $base0e;\n }\n .kt {\n /* Keyword.Type */\n color: $base0a;\n }\n .ld {\n /* Literal.Date */\n color: $base0b;\n }\n .m {\n /* Literal.Number */\n color: $base09;\n }\n .s {\n /* Literal.String */\n color: $base0b;\n }\n .na {\n /* Name.Attribute */\n color: $base0d;\n }\n .nb {\n /* Name.Builtin */\n color: $base05;\n }\n .nc {\n /* Name.Class */\n color: $base0a;\n }\n .no {\n /* Name.Constant */\n color: $base08;\n }\n .nd {\n /* Name.Decorator */\n color: $base0c;\n }\n .ni {\n /* Name.Entity */\n color: $base05;\n }\n .ne {\n /* Name.Exception */\n color: $base08;\n }\n .nf {\n /* Name.Function */\n color: $base0d;\n }\n .nl {\n /* Name.Label */\n color: $base05;\n }\n .nn {\n /* Name.Namespace */\n color: $base0a;\n }\n .nx {\n /* Name.Other */\n color: $base0d;\n }\n .py {\n /* Name.Property */\n color: $base05;\n }\n .nt {\n /* Name.Tag */\n color: $base0c;\n }\n .nv {\n /* Name.Variable */\n color: $base08;\n }\n .ow {\n /* Operator.Word */\n color: $base0c;\n }\n .w {\n /* Text.Whitespace */\n color: $base05;\n }\n .mf {\n /* Literal.Number.Float */\n color: $base09;\n }\n .mh {\n /* Literal.Number.Hex */\n color: $base09;\n }\n .mi {\n /* Literal.Number.Integer */\n color: $base09;\n }\n .mo {\n /* Literal.Number.Oct */\n color: $base09;\n }\n .sb {\n /* Literal.String.Backtick */\n color: $base0b;\n }\n .sc {\n /* Literal.String.Char */\n color: $base05;\n }\n .sd {\n /* Literal.String.Doc */\n color: $base04;\n }\n .s2 {\n /* Literal.String.Double */\n color: $base0b;\n }\n .se {\n /* Literal.String.Escape */\n color: $base09;\n }\n .sh {\n /* Literal.String.Heredoc */\n color: $base0b;\n }\n .si {\n /* Literal.String.Interpol */\n color: $base09;\n }\n .sx {\n /* Literal.String.Other */\n color: $base0b;\n }\n .sr {\n /* Literal.String.Regex */\n color: $base0b;\n }\n .s1 {\n /* Literal.String.Single */\n color: $base0b;\n }\n .ss {\n /* Literal.String.Symbol */\n color: $base0b;\n }\n .bp {\n /* Name.Builtin.Pseudo */\n color: $base05;\n }\n .vc {\n /* Name.Variable.Class */\n color: $base08;\n }\n .vg {\n /* Name.Variable.Global */\n color: $base08;\n }\n .vi {\n /* Name.Variable.Instance */\n color: $base08;\n }\n .il {\n /* Literal.Number.Integer.Long */\n color: $base09;\n }\n}\n\n.gist {\n th, td {\n border-bottom: 0;\n }\n}",
"/* ==========================================================================\n UTILITY CLASSES\n ========================================================================== */\n\n/*\n Visibility\n ========================================================================== */\n\n/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */\n\n.hidden,\n.is--hidden {\n display: none;\n visibility: hidden;\n}\n\n/* for preloading images */\n\n.load {\n display: none;\n}\n\n.transparent {\n opacity: 0;\n}\n\n/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */\n\n.visually-hidden,\n.screen-reader-text,\n.screen-reader-text span,\n.screen-reader-shortcut {\n position: absolute !important;\n clip: rect(1px, 1px, 1px, 1px);\n height: 1px !important;\n width: 1px !important;\n border: 0 !important;\n overflow: hidden;\n}\n\nbody:hover .visually-hidden a,\nbody:hover .visually-hidden input,\nbody:hover .visually-hidden button {\n display: none !important;\n}\n\n/* screen readers */\n\n.screen-reader-text:focus,\n.screen-reader-shortcut:focus {\n clip: auto !important;\n height: auto !important;\n width: auto !important;\n display: block;\n font-size: 1em;\n font-weight: bold;\n padding: 15px 23px 14px;\n background: #fff;\n z-index: 100000;\n text-decoration: none;\n box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);\n}\n\n/*\n Skip links\n ========================================================================== */\n\n.skip-link {\n position: fixed;\n z-index: 20;\n margin: 0;\n font-family: $sans-serif;\n white-space: nowrap;\n}\n\n.skip-link li {\n height: 0;\n width: 0;\n list-style: none;\n}\n\n/*\n Type\n ========================================================================== */\n\n.text-left {\n text-align: left;\n}\n\n.text-center {\n text-align: center;\n}\n\n.text-right {\n text-align: right;\n}\n\n.text-justify {\n text-align: justify;\n}\n\n.text-nowrap {\n white-space: nowrap;\n}\n\n/*\n Task lists\n ========================================================================== */\n\n.task-list {\n padding:0;\n\n li {\n list-style-type: none;\n }\n\n .task-list-item-checkbox {\n margin-right: 0.5em;\n opacity: 1;\n }\n}\n\n.task-list .task-list {\n margin-left: 1em;\n}\n\n/*\n Alignment\n ========================================================================== */\n\n/* clearfix */\n\n.cf {\n clear: both;\n}\n\n.wrapper {\n margin-left: auto;\n margin-right: auto;\n width: 100%;\n}\n\n/*\n Images\n ========================================================================== */\n\n/* image align left */\n\n.align-left {\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @include breakpoint($small) {\n float: left;\n margin-right: 1em;\n }\n}\n\n/* image align right */\n\n.align-right {\n display: block;\n margin-left: auto;\n margin-right: auto;\n\n @include breakpoint($small) {\n float: right;\n margin-left: 1em;\n }\n}\n\n/* image align center */\n\n.align-center {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n/* file page content container */\n\n.full {\n @include breakpoint($large) {\n margin-right: -1 * span(2.5 of 12) !important;\n }\n}\n\n/*\n Icons\n ========================================================================== */\n\n.icon {\n display: inline-block;\n fill: currentColor;\n width: 1em;\n height: 1.1em;\n line-height: 1;\n position: relative;\n top: -0.1em;\n vertical-align: middle;\n}\n\n/* social icons*/\n\n.social-icons {\n .fas,\n .fab,\n .far,\n .fal {\n color: $text-color;\n }\n\n .fa-behance,\n .fa-behance-square {\n color: $behance-color;\n }\n\n .fa-bitbucket {\n color: $bitbucket-color;\n }\n\n .fa-dribbble,\n .fa-dribble-square {\n color: $dribbble-color;\n }\n\n .fa-facebook,\n .fa-facebook-square,\n .fa-facebook-f {\n color: $facebook-color;\n }\n\n .fa-flickr {\n color: $flickr-color;\n }\n\n .fa-foursquare {\n color: $foursquare-color;\n }\n\n .fa-github,\n .fa-github-alt,\n .fa-github-square {\n color: $github-color;\n }\n\n .fa-gitlab {\n color: $gitlab-color;\n }\n\n .fa-instagram {\n color: $instagram-color;\n }\n\n .fa-keybase {\n color: $keybase-color;\n }\n\n .fa-lastfm,\n .fa-lastfm-square {\n color: $lastfm-color;\n }\n\n .fa-linkedin,\n .fa-linkedin-in {\n color: $linkedin-color;\n }\n\n .fa-mastodon,\n .fa-mastodon-square {\n color: $mastodon-color;\n }\n\n .fa-pinterest,\n .fa-pinterest-p,\n .fa-pinterest-square {\n color: $pinterest-color;\n }\n\n .fa-reddit {\n color: $reddit-color;\n }\n\n .fa-rss,\n .fa-rss-square {\n color: $rss-color;\n }\n\n .fa-soundcloud {\n color: $soundcloud-color;\n }\n\n .fa-stack-exchange,\n .fa-stack-overflow {\n color: $stackoverflow-color;\n }\n\n .fa-tumblr,\n .fa-tumblr-square {\n color: $tumblr-color;\n }\n\n .fa-twitter,\n .fa-twitter-square {\n color: $twitter-color;\n }\n\n .fa-vimeo,\n .fa-vimeo-square,\n .fa-vimeo-v {\n color: $vimeo-color;\n }\n\n .fa-vine {\n color: $vine-color;\n }\n\n .fa-youtube {\n color: $youtube-color;\n }\n\n .fa-xing,\n .fa-xing-square {\n color: $xing-color;\n }\n}\n\n/*\n Navicons\n ========================================================================== */\n\n.navicon {\n position: relative;\n width: $navicon-width;\n height: $navicon-height;\n background: $primary-color;\n margin: auto;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n\n &:before,\n &:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: $navicon-width;\n height: $navicon-height;\n background: $primary-color;\n -webkit-transition: 0.3s;\n transition: 0.3s;\n }\n\n &:before {\n top: (-2 * $navicon-height);\n }\n\n &:after {\n bottom: (-2 * $navicon-height);\n }\n}\n\n.close .navicon {\n /* hide the middle line*/\n background: transparent;\n\n /* overlay the lines by setting both their top values to 0*/\n &:before,\n &:after {\n -webkit-transform-origin: 50% 50%;\n -ms-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n top: 0;\n width: $navicon-width;\n }\n\n /* rotate the lines to form the x shape*/\n &:before {\n -webkit-transform: rotate3d(0, 0, 1, 45deg);\n transform: rotate3d(0, 0, 1, 45deg);\n }\n &:after {\n -webkit-transform: rotate3d(0, 0, 1, -45deg);\n transform: rotate3d(0, 0, 1, -45deg);\n }\n}\n\n.greedy-nav__toggle {\n &:before {\n @supports (pointer-events: none) {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n background-color: $background-color;\n -webkit-transition: $global-transition;\n transition: $global-transition;\n pointer-events: none;\n }\n }\n\n &.close {\n &:before {\n opacity: 0.9;\n -webkit-transition: $global-transition;\n transition: $global-transition;\n pointer-events: auto;\n }\n }\n}\n\n.greedy-nav__toggle:hover {\n .navicon,\n .navicon:before,\n .navicon:after {\n background: mix(#000, $primary-color, 25%);\n }\n\n &.close {\n .navicon {\n background: transparent;\n }\n }\n}\n\n/*\n Sticky, fixed to top content\n ========================================================================== */\n\n.sticky {\n @include breakpoint($large) {\n @include clearfix();\n position: -webkit-sticky;\n position: sticky;\n top: 2em;\n\n > * {\n display: block;\n }\n }\n}\n\n/*\n Wells\n ========================================================================== */\n\n.well {\n min-height: 20px;\n padding: 19px;\n margin-bottom: 20px;\n background-color: #f5f5f5;\n border: 1px solid #e3e3e3;\n border-radius: $border-radius;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);\n}\n\n/*\n Modals\n ========================================================================== */\n\n.show-modal {\n overflow: hidden;\n position: relative;\n\n &:before {\n position: absolute;\n content: \"\";\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 999;\n background-color: rgba(255, 255, 255, 0.85);\n }\n\n .modal {\n display: block;\n }\n}\n\n.modal {\n display: none;\n position: fixed;\n width: 300px;\n top: 50%;\n left: 50%;\n margin-left: -150px;\n margin-top: -150px;\n min-height: 0;\n z-index: 9999;\n background: #fff;\n border: 1px solid $border-color;\n border-radius: $border-radius;\n box-shadow: $box-shadow;\n\n &__title {\n margin: 0;\n padding: 0.5em 1em;\n }\n\n &__supporting-text {\n padding: 0 1em 0.5em 1em;\n }\n\n &__actions {\n padding: 0.5em 1em;\n border-top: 1px solid $border-color;\n }\n}\n\n/*\n Footnotes\n ========================================================================== */\n\n.footnote {\n color: mix(#fff, $gray, 25%);\n text-decoration: none;\n}\n\n.footnotes {\n color: mix(#fff, $gray, 25%);\n\n ol,\n li,\n p {\n margin-bottom: 0;\n font-size: $type-size-6;\n }\n}\n\na.reversefootnote {\n color: $gray;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n/*\n Required\n ========================================================================== */\n\n.required {\n color: $danger-color;\n font-weight: bold;\n}\n\n/*\n Google Custom Search Engine\n ========================================================================== */\n\n.gsc-control-cse {\n table,\n tr,\n td {\n border: 0; /* remove table borders widget */\n }\n}\n\n/*\n Responsive Video Embed\n ========================================================================== */\n\n.responsive-video-container {\n position: relative;\n margin-bottom: 1em;\n padding-bottom: 56.25%;\n height: 0;\n overflow: hidden;\n max-width: 100%;\n\n iframe,\n object,\n embed {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n}\n\n// full screen video fixes\n:-webkit-full-screen-ancestor {\n .masthead,\n .page__footer {\n position: static;\n }\n}\n",
"/* ==========================================================================\n SINGLE PAGE/POST\n ========================================================================== */\n\n#main {\n @include clearfix;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1em;\n padding-right: 1em;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n max-width: 100%;\n -webkit-animation-delay: 0.15s;\n animation-delay: 0.15s;\n\n @include breakpoint($x-large) {\n max-width: $max-width;\n }\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-height: 100vh;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.initial-content,\n.search-content {\n flex: 1 0 auto;\n}\n\n.page {\n @include breakpoint($large) {\n float: right;\n width: calc(100% - #{$right-sidebar-width-narrow});\n // padding-right: $right-sidebar-width-narrow;\n }\n\n @include breakpoint($x-large) {\n width: calc(100% - #{$right-sidebar-width});\n // padding-right: $right-sidebar-width;\n }\n\n .page__inner-wrap {\n float: left;\n margin-top: 1em;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n\n .page__content,\n .page__meta,\n .page__share {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n }\n }\n}\n\n.page__title {\n margin-top: 0;\n line-height: 1;\n\n & + .page__meta {\n margin-top: -0.5em;\n }\n}\n\n.page__lead {\n font-family: $global-font-family;\n font-size: $type-size-4;\n}\n\n.page__content {\n h2 {\n padding-bottom: 0.5em;\n border-bottom: 1px solid $border-color;\n }\n\n\th1, h2, h3, h4, h5, h6 {\n\t\t.header-link {\n\t\t\tposition: relative;\n\t\t\tleft: 0.5em;\n\t\t\topacity: 0;\n\t\t\tfont-size: 0.8em;\n\t\t\t-webkit-transition: opacity 0.2s ease-in-out 0.1s;\n\t\t\t-moz-transition: opacity 0.2s ease-in-out 0.1s;\n\t\t\t-o-transition: opacity 0.2s ease-in-out 0.1s;\n\t\t\ttransition: opacity 0.2s ease-in-out 0.1s;\n\t\t}\n\n\t\t&:hover .header-link {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n p,\n li,\n dl {\n font-size: 1em;\n }\n\n /* paragraph indents */\n p {\n margin: 0 0 $indent-var;\n\n /* sibling indentation*/\n @if $paragraph-indent == true {\n & + p {\n text-indent: $indent-var;\n margin-top: -($indent-var);\n }\n }\n }\n\n a:not(.btn) {\n &:hover {\n text-decoration: underline;\n\n img {\n box-shadow: 0 0 10px rgba(#000, 0.25);\n }\n }\n }\n\n dt {\n margin-top: 1em;\n font-family: $sans-serif;\n font-weight: bold;\n }\n\n dd {\n margin-left: 1em;\n font-family: $sans-serif;\n font-size: $type-size-6;\n }\n\n .small {\n font-size: $type-size-6;\n }\n\n /* blockquote citations */\n blockquote + .small {\n margin-top: -1.5em;\n padding-left: 1.25rem;\n }\n}\n\n.page__hero {\n position: relative;\n margin-bottom: 2em;\n @include clearfix;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.25s;\n animation-delay: 0.25s;\n\n &--overlay {\n position: relative;\n margin-bottom: 2em;\n padding: 6em 0;\n @include clearfix;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.25s;\n animation-delay: 0.25s;\n\n a {\n color: #fff;\n }\n\n .wrapper {\n padding-left: 1em;\n padding-right: 1em;\n\n @include breakpoint($x-large) {\n max-width: $x-large;\n }\n }\n\n .page__title,\n .page__meta,\n .page__lead,\n .btn {\n color: #fff;\n text-shadow: 1px 1px 4px rgba(#000, 0.5);\n }\n\n .page__lead {\n max-width: $medium;\n }\n\n .page__title {\n font-size: $type-size-2;\n\n @include breakpoint($small) {\n font-size: $type-size-1;\n }\n }\n }\n}\n\n.page__hero-image {\n width: 100%;\n height: auto;\n -ms-interpolation-mode: bicubic;\n}\n\n.page__hero-caption {\n position: absolute;\n bottom: 0;\n right: 0;\n margin: 0 auto;\n padding: 2px 5px;\n color: #fff;\n font-family: $caption-font-family;\n font-size: $type-size-7;\n background: #000;\n text-align: right;\n z-index: 5;\n opacity: 0.5;\n border-radius: $border-radius 0 0 0;\n\n @include breakpoint($large) {\n padding: 5px 10px;\n }\n\n a {\n color: #fff;\n text-decoration: none;\n }\n}\n\n/*\n Social sharing\n ========================================================================== */\n\n.page__share {\n margin-top: 2em;\n padding-top: 1em;\n border-top: 1px solid $border-color;\n\n @include breakpoint(max-width $small) {\n .btn span {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n }\n}\n\n.page__share-title {\n margin-bottom: 10px;\n font-size: $type-size-6;\n text-transform: uppercase;\n}\n\n/*\n Page meta\n ========================================================================== */\n\n.page__meta {\n margin-top: 2em;\n color: $muted-text-color;\n font-family: $sans-serif;\n font-size: $type-size-6;\n\n p {\n margin: 0;\n }\n\n a {\n color: inherit;\n }\n}\n\n.page__meta-title {\n margin-bottom: 10px;\n font-size: $type-size-6;\n text-transform: uppercase;\n}\n\n/*\n Page taxonomy\n ========================================================================== */\n\n.page__taxonomy {\n .sep {\n display: none;\n }\n\n strong {\n margin-right: 10px;\n }\n}\n\n.page__taxonomy-item {\n display: inline-block;\n margin-right: 5px;\n margin-bottom: 8px;\n padding: 5px 10px;\n text-decoration: none;\n border: 1px solid mix(#000, $border-color, 25%);\n border-radius: $border-radius;\n\n &:hover {\n text-decoration: none;\n color: $link-color-hover;\n }\n}\n\n.taxonomy__section {\n margin-bottom: 2em;\n padding-bottom: 1em;\n\n &:not(:last-child) {\n border-bottom: solid 1px $border-color;\n }\n\n .archive__item-title {\n margin-top: 0;\n }\n\n .archive__subtitle {\n clear: both;\n border: 0;\n }\n\n + .taxonomy__section {\n margin-top: 2em;\n }\n}\n\n.taxonomy__title {\n margin-bottom: 0.5em;\n color: $muted-text-color;\n}\n\n.taxonomy__count {\n color: $muted-text-color;\n}\n\n.taxonomy__index {\n display: grid;\n grid-column-gap: 2em;\n grid-template-columns: repeat(2, 1fr);\n margin: 1.414em 0;\n padding: 0;\n font-size: 0.75em;\n list-style: none;\n\n @include breakpoint($large) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n a {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 0.25em 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n color: inherit;\n text-decoration: none;\n border-bottom: 1px solid $border-color;\n }\n}\n\n.back-to-top {\n display: block;\n clear: both;\n color: $muted-text-color;\n font-size: 0.6em;\n text-transform: uppercase;\n text-align: right;\n text-decoration: none;\n}\n\n/*\n Comments\n ========================================================================== */\n\n.page__comments {\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n}\n\n.page__comments-title {\n margin-top: 2rem;\n margin-bottom: 10px;\n padding-top: 2rem;\n font-size: $type-size-6;\n border-top: 1px solid $border-color;\n text-transform: uppercase;\n}\n\n.page__comments-form {\n -webkit-transition: $global-transition;\n transition: $global-transition;\n\n &.disabled {\n input,\n button,\n textarea,\n label {\n pointer-events: none;\n cursor: not-allowed;\n filter: alpha(opacity=65);\n box-shadow: none;\n opacity: 0.65;\n }\n }\n}\n\n.comment {\n @include clearfix();\n margin: 1em 0;\n\n &:not(:last-child) {\n border-bottom: 1px solid $border-color;\n }\n}\n\n.comment__avatar-wrapper {\n float: left;\n width: 60px;\n height: 60px;\n\n @include breakpoint($large) {\n width: 100px;\n height: 100px;\n }\n}\n\n.comment__avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n\n @include breakpoint($large) {\n width: 80px;\n height: 80px;\n padding: 5px;\n border: 1px solid $border-color;\n }\n}\n\n.comment__content-wrapper {\n float: right;\n width: calc(100% - 60px);\n\n @include breakpoint($large) {\n width: calc(100% - 100px);\n }\n}\n\n.comment__author {\n margin: 0;\n\n a {\n text-decoration: none;\n }\n}\n\n.comment__date {\n @extend .page__meta;\n margin: 0;\n\n a {\n text-decoration: none;\n }\n}\n\n/*\n Related\n ========================================================================== */\n\n.page__related {\n @include clearfix();\n float: left;\n margin-top: 2em;\n padding-top: 1em;\n border-top: 1px solid $border-color;\n\n @include breakpoint($large) {\n float: right;\n width: calc(100% - #{$right-sidebar-width-narrow});\n }\n\n @include breakpoint($x-large) {\n width: calc(100% - #{$right-sidebar-width});\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n}\n\n.page__related-title {\n margin-bottom: 10px;\n font-size: $type-size-6;\n text-transform: uppercase;\n}\n\n/*\n Wide Pages\n ========================================================================== */\n\n.wide {\n .page {\n @include breakpoint($large) {\n padding-right: 0;\n }\n\n @include breakpoint($x-large) {\n padding-right: 0;\n }\n }\n\n .page__related {\n @include breakpoint($large) {\n padding-right: 0;\n }\n\n @include breakpoint($x-large) {\n padding-right: 0;\n }\n }\n}\n",
"/* ==========================================================================\n SINGLE PAGE/POST\n ========================================================================== */\n\n.main {\n @include clearfix;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1em;\n padding-right: 1em;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n max-width: 100%;\n -webkit-animation-delay: 0.15s;\n animation-delay: 0.15s;\n \n @include breakpoint($medium) {\n padding-left: 2em;\n padding-right: 2em;\n }\n\n @include breakpoint($medium) {\n max-width: $x-large;\n }\n}\n\nbody {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-height: 100vh;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n.initial-content,\n.search-content {\n flex: 1 0 auto;\n}\n\n.stretched {\n \n .stretched__inner-wrap {\n margin-top: 1em;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n\n .stretched__content,\n .stretched__meta,\n .stretched__share {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n }\n }\n}\n\n.stretched__title {\n margin-top: 0;\n line-height: 1;\n\n & + .stretched__meta {\n margin-top: -0.5em;\n }\n}\n\n.stretched__lead {\n font-family: $global-font-family;\n font-size: $type-size-4;\n}\n\n.stretched__content {\n h2 {\n padding-bottom: 0.5em;\n border-bottom: 1px solid $border-color;\n }\n\n\th1, h2, h3, h4, h5, h6 {\n\t\t.header-link {\n\t\t\tposition: relative;\n\t\t\tleft: 0.5em;\n\t\t\topacity: 0;\n\t\t\tfont-size: 0.8em;\n\t\t\t-webkit-transition: opacity 0.2s ease-in-out 0.1s;\n\t\t\t-moz-transition: opacity 0.2s ease-in-out 0.1s;\n\t\t\t-o-transition: opacity 0.2s ease-in-out 0.1s;\n\t\t\ttransition: opacity 0.2s ease-in-out 0.1s;\n\t\t}\n\n\t\t&:hover .header-link {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n p,\n li,\n dl {\n font-size: 1em;\n }\n\n /* paragraph indents */\n p {\n margin: 0 0 $indent-var;\n\n /* sibling indentation*/\n @if $paragraph-indent == true {\n & + p {\n text-indent: $indent-var;\n margin-top: -($indent-var);\n }\n }\n }\n\n a:not(.btn) {\n &:hover {\n text-decoration: underline;\n\n img {\n box-shadow: 0 0 10px rgba(#000, 0.25);\n }\n }\n }\n\n dt {\n margin-top: 1em;\n font-family: $sans-serif;\n font-weight: bold;\n }\n\n dd {\n margin-left: 1em;\n font-family: $sans-serif;\n font-size: $type-size-6;\n }\n\n .small {\n font-size: $type-size-6;\n }\n\n /* blockquote citations */\n blockquote + .small {\n margin-top: -1.5em;\n padding-left: 1.25rem;\n }\n}\n\n.stretched__hero {\n position: relative;\n margin-bottom: 2em;\n @include clearfix;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.25s;\n animation-delay: 0.25s;\n\n &--overlay {\n position: relative;\n margin-bottom: 2em;\n padding: 3em 0;\n @include clearfix;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n -webkit-animation: $intro-transition;\n animation: $intro-transition;\n -webkit-animation-delay: 0.25s;\n animation-delay: 0.25s;\n\n a {\n color: #fff;\n }\n\n .wrapper {\n padding-left: 1em;\n padding-right: 1em;\n\n @include breakpoint($x-large) {\n max-width: $x-large;\n }\n }\n\n .stretched__title,\n .stretched__meta,\n .stretched__lead,\n .btn {\n color: #fff;\n text-shadow: 1px 1px 4px rgba(#000, 0.5);\n }\n\n .stretched__lead {\n max-width: $medium;\n }\n\n .stretched__title {\n font-size: $type-size-2;\n\n @include breakpoint($small) {\n font-size: $type-size-1;\n }\n }\n }\n}\n\n.stretched__hero-image {\n width: 100%;\n height: auto;\n -ms-interpolation-mode: bicubic;\n}\n\n.stretched__hero-caption {\n position: absolute;\n bottom: 0;\n right: 0;\n margin: 0 auto;\n padding: 2px 5px;\n color: #fff;\n font-family: $caption-font-family;\n font-size: $type-size-7;\n background: #000;\n text-align: right;\n z-index: 5;\n opacity: 0.5;\n border-radius: $border-radius 0 0 0;\n\n @include breakpoint($large) {\n padding: 5px 10px;\n }\n\n a {\n color: #fff;\n text-decoration: none;\n }\n}\n\n/*\n Social sharing\n ========================================================================== */\n\n.stretched__share {\n margin-top: 2em;\n padding-top: 1em;\n border-top: 1px solid $border-color;\n\n @include breakpoint(max-width $small) {\n .btn span {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n }\n}\n\n.stretched__share-title {\n margin-bottom: 10px;\n font-size: $type-size-6;\n text-transform: uppercase;\n}\n\n/*\n Page meta\n ========================================================================== */\n\n.stretched__meta {\n margin-top: 2em;\n color: $muted-text-color;\n font-family: $sans-serif;\n font-size: $type-size-6;\n a {\n color: inherit;\n }\n}\n\n.stretched__meta-title {\n margin-bottom: 10px;\n font-size: $type-size-6;\n text-transform: uppercase;\n}\n\n/*\n Page taxonomy\n ========================================================================== */\n\n.stretched__taxonomy {\n .sep {\n display: none;\n }\n\n strong {\n margin-right: 10px;\n }\n}\n\n.stretched__taxonomy-item {\n display: inline-block;\n margin-right: 5px;\n margin-bottom: 8px;\n padding: 5px 10px;\n text-decoration: none;\n border: 1px solid mix(#000, $border-color, 25%);\n border-radius: $border-radius;\n\n &:hover {\n text-decoration: none;\n color: $link-color-hover;\n }\n}\n\n.taxonomy__section {\n margin-bottom: 2em;\n padding-bottom: 1em;\n\n &:not(:last-child) {\n border-bottom: solid 1px $border-color;\n }\n\n .archive__item-title {\n margin-top: 0;\n }\n\n .archive__subtitle {\n clear: both;\n border: 0;\n }\n\n + .taxonomy__section {\n margin-top: 2em;\n }\n}\n\n.taxonomy__title {\n margin-bottom: 0.5em;\n color: $muted-text-color;\n}\n\n.taxonomy__count {\n color: $muted-text-color;\n}\n\n.taxonomy__index {\n display: grid;\n grid-column-gap: 2em;\n grid-template-columns: repeat(2, 1fr);\n margin: 1.414em 0;\n padding: 0;\n font-size: 0.75em;\n list-style: none;\n\n @include breakpoint($large) {\n grid-template-columns: repeat(3, 1fr);\n }\n\n a {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 0.25em 0;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n color: inherit;\n text-decoration: none;\n border-bottom: 1px solid $border-color;\n }\n}\n\n.back-to-top {\n display: block;\n clear: both;\n color: $muted-text-color;\n font-size: 0.6em;\n text-transform: uppercase;\n text-align: right;\n text-decoration: none;\n}\n\n/*\n Comments\n ========================================================================== */\n\n.stretched__comments {\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n}\n\n.stretched__comments-title {\n margin-top: 2rem;\n margin-bottom: 10px;\n padding-top: 2rem;\n font-size: $type-size-6;\n border-top: 1px solid $border-color;\n text-transform: uppercase;\n}\n\n.stretched__comments-form {\n -webkit-transition: $global-transition;\n transition: $global-transition;\n\n &.disabled {\n input,\n button,\n textarea,\n label {\n pointer-events: none;\n cursor: not-allowed;\n filter: alpha(opacity=65);\n box-shadow: none;\n opacity: 0.65;\n }\n }\n}\n\n.comment {\n @include clearfix();\n margin: 1em 0;\n\n &:not(:last-child) {\n border-bottom: 1px solid $border-color;\n }\n}\n\n.comment__avatar-wrapper {\n float: left;\n width: 60px;\n height: 60px;\n\n @include breakpoint($large) {\n width: 100px;\n height: 100px;\n }\n}\n\n.comment__avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n\n @include breakpoint($large) {\n width: 80px;\n height: 80px;\n padding: 5px;\n border: 1px solid $border-color;\n }\n}\n\n.comment__content-wrapper {\n float: right;\n width: calc(100% - 60px);\n\n @include breakpoint($large) {\n width: calc(100% - 100px);\n }\n}\n\n.comment__author {\n margin: 0;\n\n a {\n text-decoration: none;\n }\n}\n\n.comment__date {\n @extend .stretched__meta;\n margin: 0;\n\n a {\n text-decoration: none;\n }\n}\n\n/*\n Related\n ========================================================================== */\n\n.stretched__related {\n @include clearfix();\n float: left;\n margin-top: 2em;\n padding-top: 1em;\n border-top: 1px solid $border-color;\n\n @include breakpoint($large) {\n float: right;\n width: calc(100% - #{$right-sidebar-width-narrow});\n }\n\n @include breakpoint($x-large) {\n width: calc(100% - #{$right-sidebar-width});\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n}\n\n.stretched__related-title {\n margin-bottom: 10px;\n font-size: $type-size-6;\n text-transform: uppercase;\n}\n\n/*\n Wide Pages\n ========================================================================== */\n\n.wide {\n .page {\n @include breakpoint($large) {\n padding-right: 0;\n }\n\n @include breakpoint($x-large) {\n padding-right: 0;\n }\n }\n\n .stretched__related {\n @include breakpoint($large) {\n padding-right: 0;\n }\n\n @include breakpoint($x-large) {\n padding-right: 0;\n }\n }\n}\n",
"/* ==========================================================================\n ARCHIVE\n ========================================================================== */\n\n.archive {\n margin-top: 1em;\n margin-bottom: 2em;\n\n @include breakpoint($large) {\n float: right;\n width: calc(100% - #{$right-sidebar-width-narrow});\n padding-right: $right-sidebar-width-narrow;\n }\n\n @include breakpoint($x-large) {\n width: calc(100% - #{$right-sidebar-width});\n padding-right: $right-sidebar-width;\n }\n}\n\n.archive__item {\n position: relative;\n\n a {\n position: relative;\n z-index: 10;\n }\n\n a[rel=\"permalink\"] {\n position: static;\n }\n}\n\n.archive__subtitle {\n margin: 1.414em 0 0;\n padding-bottom: 0.5em;\n font-size: $type-size-5;\n color: $muted-text-color;\n border-bottom: 1px solid $border-color;\n\n + .list__item .archive__item-title {\n margin-top: 0.5em;\n }\n}\n\n.archive__item-title {\n margin-bottom: 0.25em;\n font-family: $sans-serif-narrow;\n line-height: initial;\n overflow: hidden;\n text-overflow: ellipsis;\n\n a[rel=\"permalink\"]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n a + a {\n opacity: 0.5;\n }\n}\n\n/* remove border*/\n.page__content {\n .archive__item-title {\n margin-top: 1em;\n border-bottom: none;\n }\n}\n\n.archive__item-excerpt {\n margin-top: 0;\n font-size: $type-size-6;\n\n & + p {\n text-indent: 0;\n }\n\n a {\n position: relative;\n }\n}\n\n.archive__item-teaser {\n position: relative;\n border-radius: $border-radius;\n overflow: hidden;\n\n img {\n width: 100%;\n }\n}\n\n.archive__item-caption {\n position: absolute;\n bottom: 0;\n right: 0;\n margin: 0 auto;\n padding: 2px 5px;\n color: #fff;\n font-family: $caption-font-family;\n font-size: $type-size-8;\n background: #000;\n text-align: right;\n z-index: 5;\n opacity: 0.5;\n border-radius: $border-radius 0 0 0;\n\n @include breakpoint($large) {\n padding: 5px 10px;\n }\n\n a {\n color: #fff;\n text-decoration: none;\n }\n}\n\n/*\n List view\n ========================================================================== */\n\n.list__item {\n .page__meta {\n margin: 0 0 4px;\n font-size: 0.6em;\n }\n}\n\n/*\n Grid view\n ========================================================================== */\n\n.archive {\n .grid__wrapper {\n /* extend grid elements to the right */\n\n @include breakpoint($large) {\n margin-right: -1 * $right-sidebar-width-narrow;\n }\n\n @include breakpoint($x-large) {\n margin-right: -1 * $right-sidebar-width;\n }\n }\n}\n\n.grid__item {\n margin-bottom: 2em;\n\n @include breakpoint($small) {\n float: left;\n width: span(5 of 10);\n\n &:nth-child(2n + 1) {\n clear: both;\n margin-left: 0;\n }\n\n &:nth-child(2n + 2) {\n clear: none;\n margin-left: gutter(of 10);\n }\n }\n\n @include breakpoint($medium) {\n margin-left: 0; /* override margin*/\n margin-right: 0; /* override margin*/\n width: span(3 of 12);\n\n &:nth-child(2n + 1) {\n clear: none;\n }\n\n &:nth-child(4n + 1) {\n clear: both;\n }\n\n &:nth-child(4n + 2) {\n clear: none;\n margin-left: gutter(1 of 12);\n }\n\n &:nth-child(4n + 3) {\n clear: none;\n margin-left: gutter(1 of 12);\n }\n\n &:nth-child(4n + 4) {\n clear: none;\n margin-left: gutter(1 of 12);\n }\n }\n\n .page__meta {\n margin: 0 0 4px;\n font-size: 0.6em;\n }\n\n .archive__item-title {\n margin-top: 0.5em;\n font-size: $type-size-5;\n }\n\n .archive__item-excerpt {\n display: none;\n\n @include breakpoint($medium) {\n display: block;\n font-size: $type-size-6;\n }\n }\n\n .archive__item-teaser {\n @include breakpoint($small) {\n max-height: 200px;\n }\n\n @include breakpoint($medium) {\n max-height: 120px;\n }\n }\n}\n\n/*\n Features\n ========================================================================== */\n\n.feature__wrapper {\n @include clearfix();\n margin-bottom: 2em;\n border-bottom: 1px solid $border-color;\n\n .archive__item-title {\n margin-bottom: 0;\n }\n}\n\n.feature__item {\n position: relative;\n margin-bottom: 2em;\n font-size: 1.125em;\n\n @include breakpoint($small) {\n float: left;\n margin-bottom: 0;\n width: span(4 of 12);\n\n &:nth-child(3n + 1) {\n clear: both;\n margin-left: 0;\n }\n\n &:nth-child(3n + 2) {\n clear: none;\n margin-left: gutter(of 12);\n }\n\n &:nth-child(3n + 3) {\n clear: none;\n margin-left: gutter(of 12);\n }\n\n .feature__item-teaser {\n max-height: 200px;\n overflow: hidden;\n }\n }\n\n .archive__item-body {\n padding-left: gutter(1 of 12);\n padding-right: gutter(1 of 12);\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n &--left {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n font-size: 1.125em;\n\n .archive__item {\n float: left;\n }\n\n .archive__item-teaser {\n margin-bottom: 2em;\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n @include breakpoint($small) {\n .archive__item-teaser {\n float: left;\n width: span(5 of 12);\n }\n\n .archive__item-body {\n float: right;\n padding-left: gutter(0.5 of 12);\n padding-right: gutter(1 of 12);\n width: span(7 of 12);\n }\n }\n }\n\n &--right {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n font-size: 1.125em;\n\n .archive__item {\n float: left;\n }\n\n .archive__item-teaser {\n margin-bottom: 2em;\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n @include breakpoint($small) {\n text-align: right;\n\n .archive__item-teaser {\n float: right;\n width: span(5 of 12);\n }\n\n .archive__item-body {\n float: left;\n width: span(7 of 12);\n padding-left: gutter(0.5 of 12);\n padding-right: gutter(1 of 12);\n }\n }\n }\n\n &--center {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n font-size: 1.125em;\n\n .archive__item {\n float: left;\n width: 100%;\n }\n\n .archive__item-teaser {\n margin-bottom: 2em;\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n @include breakpoint($small) {\n text-align: center;\n\n .archive__item-teaser {\n margin: 0 auto;\n width: span(5 of 12);\n }\n\n .archive__item-body {\n margin: 0 auto;\n width: span(7 of 12);\n }\n }\n }\n}\n\n/* Place inside an archive layout */\n\n.archive {\n .feature__wrapper {\n .archive__item-title {\n margin-top: 0.25em;\n font-size: 1em;\n }\n }\n\n .feature__item,\n .feature__item--left,\n .feature__item--center,\n .feature__item--right {\n font-size: 1em;\n }\n}\n\n/*\n Wide Pages\n ========================================================================== */\n\n .wide {\n .archive {\n @include breakpoint($large) {\n padding-right: 0;\n }\n\n @include breakpoint($x-large) {\n padding-right: 0;\n }\n }\n}\n\n/* Place inside a single layout */\n\n.layout--single {\n\t.feature__wrapper {\n\t\tdisplay: inline-block;\n\t}\n}\n",
"/* ==========================================================================\n SIDEBAR\n ========================================================================== */\n\n/*\n Default\n ========================================================================== */\n\n.sidebar {\n @include clearfix();\n // @include breakpoint(max-width $large) {\n // /* fix z-index order of follow links */\n // position: relative;\n // z-index: 10;\n // -webkit-transform: translate3d(0, 0, 0);\n // transform: translate3d(0, 0, 0);\n // }\n\n @include breakpoint($large) {\n float: left;\n width: calc(#{$right-sidebar-width-narrow} - 1em);\n opacity: 0.75;\n -webkit-transition: opacity 0.2s ease-in-out;\n transition: opacity 0.2s ease-in-out;\n\n &:hover {\n opacity: 1;\n }\n\n &.sticky {\n overflow-y: auto;\n /* calculate height of nav list\n viewport height - nav height - masthead x-padding\n */\n height: calc(100vh - #{$nav-height} - 2em);\n }\n }\n\n @include breakpoint($x-large) {\n width: calc(#{$right-sidebar-width} - 1em);\n }\n\n > * {\n margin-top: 1em;\n margin-bottom: 1em;\n }\n\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 0;\n font-family: $sans-serif-narrow;\n }\n\n p,\n li {\n font-family: $sans-serif;\n font-size: $type-size-6;\n line-height: 1.5;\n }\n\n img {\n width: 100%;\n\n &.emoji {\n width: 20px;\n height: 20px;\n }\n }\n}\n\n.sidebar__right {\n margin-bottom: 1em;\n\n @include breakpoint($large) {\n position: absolute;\n top: 0;\n right: 0;\n width: $right-sidebar-width-narrow;\n margin-right: -1 * $right-sidebar-width-narrow;\n padding-left: 1em;\n z-index: 10;\n\n &.sticky {\n @include clearfix();\n position: -webkit-sticky;\n position: sticky;\n top: 2em;\n float: right;\n }\n }\n\n @include breakpoint($x-large) {\n width: $right-sidebar-width;\n margin-right: -1 * $right-sidebar-width;\n }\n}\n\n.splash .sidebar__right {\n @include breakpoint($large) {\n position: relative;\n float: right;\n margin-right: 0;\n }\n\n @include breakpoint($x-large) {\n margin-right: 0;\n }\n}\n\n/*\n Author profile and links\n ========================================================================== */\n\n.author__avatar {\n display: table-cell;\n vertical-align: top;\n width: 36px;\n height: 36px;\n\n @include breakpoint($large) {\n display: block;\n width: auto;\n height: auto;\n }\n\n img {\n max-width: 110px;\n border-radius: 50%;\n\n @include breakpoint($large) {\n padding: 5px;\n border: 1px solid $border-color;\n }\n }\n}\n\n.author__content {\n display: table-cell;\n vertical-align: top;\n padding-left: 15px;\n padding-right: 25px;\n line-height: 1;\n\n @include breakpoint($large) {\n display: block;\n width: 100%;\n padding-left: 0;\n padding-right: 0;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n}\n\n.author__name {\n margin: 0;\n\n @include breakpoint($large) {\n margin-top: 10px;\n margin-bottom: 10px;\n }\n}\n.sidebar .author__name {\n font-family: $sans-serif;\n font-size: $type-size-5;\n}\n\n.author__bio {\n margin: 0;\n\n @include breakpoint($large) {\n margin-top: 10px;\n margin-bottom: 20px;\n }\n}\n\n.author__urls-wrapper {\n position: relative;\n display: table-cell;\n vertical-align: middle;\n font-family: $sans-serif;\n z-index: 20;\n position: relative;\n cursor: pointer;\n\n li:last-child {\n a {\n margin-bottom: 0;\n }\n }\n\n .author__urls {\n span.label {\n padding-left: 5px;\n }\n }\n\n @include breakpoint($large) {\n display: block;\n }\n\n button {\n position: relative;\n margin-bottom: 0;\n\n &:before {\n @supports (pointer-events: none) {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n }\n\n &.open {\n &:before {\n pointer-events: auto;\n }\n }\n\n @include breakpoint($large) {\n display: none;\n }\n }\n}\n\n.author__urls {\n display: none;\n position: absolute;\n right: 0;\n margin-top: 15px;\n padding: 10px;\n list-style-type: none;\n border: 1px solid $border-color;\n border-radius: $border-radius;\n background: $background-color;\n box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);\n cursor: default;\n\n &.is--visible {\n display: block;\n }\n\n @include breakpoint($large) {\n display: block;\n position: relative;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n box-shadow: none;\n }\n\n &:before {\n display: block;\n content: \"\";\n position: absolute;\n top: -11px;\n left: calc(50% - 10px);\n width: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: $border-color transparent;\n z-index: 0;\n\n @include breakpoint($large) {\n display: none;\n }\n }\n\n &:after {\n display: block;\n content: \"\";\n position: absolute;\n top: -10px;\n left: calc(50% - 10px);\n width: 0;\n border-style: solid;\n border-width: 0 10px 10px;\n border-color: $background-color transparent;\n z-index: 1;\n\n @include breakpoint($large) {\n display: none;\n }\n }\n\n ul {\n padding: 10px;\n list-style-type: none;\n }\n\n li {\n white-space: nowrap;\n }\n\n a {\n display: block;\n margin-bottom: 5px;\n padding-right: 5px;\n padding-top: 2px;\n padding-bottom: 2px;\n color: inherit;\n font-size: $type-size-5;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n }\n }\n}\n\n/*\n Wide Pages\n ========================================================================== */\n\n.wide .sidebar__right {\n margin-bottom: 1em;\n\n @include breakpoint($large) {\n position: initial;\n top: initial;\n right: initial;\n width: initial;\n margin-right: initial;\n padding-left: initial;\n z-index: initial;\n\n &.sticky {\n float: none;\n }\n }\n\n @include breakpoint($x-large) {\n width: initial;\n margin-right: initial;\n }\n}\n\n",
"/* ==========================================================================\n PRINT STYLES\n ========================================================================== */\n\n@media print {\n\n [hidden] {\n display: none;\n }\n\n * {\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n }\n\n html {\n margin: 0;\n padding: 0;\n min-height: auto !important;\n font-size: 16px;\n }\n\n body {\n margin: 0 auto;\n background: #fff !important;\n color: #000 !important;\n font-size: 1rem;\n line-height: 1.5;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: #000;\n line-height: 1.2;\n margin-bottom: 0.75rem;\n margin-top: 0;\n }\n\n h1 {\n font-size: 2.5rem;\n }\n\n h2 {\n font-size: 2rem;\n }\n\n h3 {\n font-size: 1.75rem;\n }\n\n h4 {\n font-size: 1.5rem;\n }\n\n h5 {\n font-size: 1.25rem;\n }\n\n h6 {\n font-size: 1rem;\n }\n\n a,\n a:visited {\n color: #000;\n text-decoration: underline;\n word-wrap: break-word;\n }\n\n table {\n border-collapse: collapse;\n }\n\n thead {\n display: table-header-group;\n }\n\n table,\n th,\n td {\n border-bottom: 1px solid #000;\n }\n\n td,\n th {\n padding: 8px 16px;\n }\n\n img {\n border: 0;\n display: block;\n max-width: 100% !important;\n vertical-align: middle;\n }\n\n hr {\n border: 0;\n border-bottom: 2px solid #bbb;\n height: 0;\n margin: 2.25rem 0;\n padding: 0;\n }\n\n dt {\n font-weight: bold;\n }\n\n dd {\n margin: 0;\n margin-bottom: 0.75rem;\n }\n\n abbr[title],\n acronym[title] {\n border: 0;\n text-decoration: none;\n }\n\n table,\n blockquote,\n pre,\n code,\n figure,\n li,\n hr,\n ul,\n ol,\n a,\n tr {\n page-break-inside: avoid;\n }\n\n h2,\n h3,\n h4,\n p,\n a {\n orphans: 3;\n widows: 3;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n page-break-after: avoid;\n page-break-inside: avoid;\n }\n\n h1 + p,\n h2 + p,\n h3 + p {\n page-break-before: avoid;\n }\n\n img {\n page-break-after: auto;\n page-break-before: auto;\n page-break-inside: avoid;\n }\n\n pre {\n white-space: pre-wrap !important;\n word-wrap: break-word;\n }\n\n a[href^='http://']:after,\n a[href^='https://']:after,\n a[href^='ftp://']:after {\n content: \" (\" attr(href) \")\";\n font-size: 80%;\n }\n\n abbr[title]:after,\n acronym[title]:after {\n content: \" (\" attr(title) \")\";\n }\n\n #main {\n max-width: 100%;\n }\n\n .page {\n margin: 0;\n padding: 0;\n width: 100%;\n }\n\n .page-break,\n .page-break-before {\n page-break-before: always;\n }\n\n .page-break-after {\n page-break-after: always;\n }\n\n .no-print {\n display: none;\n }\n\n a.no-reformat:after {\n content: '';\n }\n\n abbr[title].no-reformat:after,\n acronym[title].no-reformat:after {\n content: '';\n }\n\n .page__hero-caption {\n color: #000 !important;\n background: #fff !important;\n opacity: 1;\n\n a {\n color: #000 !important;\n }\n }\n\n/*\n Hide the following elements on print\n ========================================================================== */\n\n .masthead,\n .toc,\n .page__share,\n .page__related,\n .pagination,\n .ads,\n .page__footer,\n .page__comments-form,\n .author__avatar,\n .author__content,\n .author__urls-wrapper,\n .nav__list,\n .sidebar,\n .adsbygoogle {\n display: none !important;\n height: 1px !important;\n }\n}\n\n@media print {\n a[href]:after {\n content: none !important;\n }\n}",
".home-main {\n margin: 4em;\n}\n\n.black {\n color: #303030b4;\n}\n\n.feature-row-container{\n .row{\n margin: 20px;\n }\n}\n.main-alternative {\n background: #f3f3f3;\n padding-top: 2em;\n padding-bottom: 2em;\n @include clearfix;\n margin-left: auto;\n margin-right: auto;\n padding-left: 1em;\n padding-right: 1em;\n \n @include breakpoint($medium) {\n padding-left: 2em;\n padding-right: 2em;\n }\n\n max-width: 100%;\n}\n\n.main-alternative-inner {\n @include breakpoint($x-large) {\n max-width: $x-large;\n }\n\n margin-left: auto;\n margin-right: auto;\n}\n\n.archive__item-title {\n font-family: Roboto;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 28px;\n text-align: center;\n}\n\n.archive__item-price {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 16px;\n text-align: center;\n}\n\n.other-product-image{\n min-height: 200px;\n max-height: 200px;\n width: 100%;\n height: 100%;\n object-fit: cover;\n background: #ffffff;\n border-radius: 10px;\n max-width: 200px;\n}\n\n.teaser-image {\n min-height: 300px;\n max-height: 300px;\n width: 100%;\n height: 100%;\n object-fit: cover;\n background: #ffffff;\n border-radius: 10px;\n /*max-width: 300px;*/\n}\n\n.product-image {\n min-height: 241px;\n max-height: 241px;\n width: 100%;\n height: 100%;\n object-fit: cover;\n background: #ffffff;\n border-radius: 10px;\n}\n\n.parts_table{\n \n TABLE{\n display: table;\n width: auto;\n margin: auto;\n }\n\n}\n.teaser-text {\n font-size: 14px;\n}\n\n.teaser-content {\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n text-align: justify;\n @include breakpoint($medium) {\n position: absolute;\n top: 30%;\n }\n}\n\n.teaser-image-contain {\n min-height: 300px;\n max-height: 300px;\n width: 100%;\n height: 100%;\n object-fit: contain;\n background: #ffffff;\n border-radius: 10px;\n}\n\n.teaser-image-contain-big {\n object-fit: contain;\n background: #ffffff;\n border-radius: 10px;\n min-height: 300px;\n max-height: 300px;\n\n .large {\n max-height: 500px;\n }\n}\n\n\n.teaser-image-contain-large {\n object-fit: contain;\n background: #ffffff;\n border-radius: 10px;\n min-height: 300px;\n max-height: 500px;\n}\n\n.big-black-btn {\n font-family: Roboto;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n line-height: 25px;\n text-align: center;\n}\n\n.teaser-button-gray-light {\n background: #fff;\n border-radius: 2px;\n color: #465363;\n font-weight: normal;\n font-family: Roboto;\n border: 1px solid black;\n}\n\n.teaser-button-gray-dark {\n background: #fe814d;\n border-radius: 2px;\n border: 1px solid black;\n color: white;\n font-weight: normal;\n font-family: Roboto;\n}\n\n.btn--primary:visited {\n background-color: inherit;\n}\n\n.horizontal-margin {\n margin-left: 1em;\n margin-right: 1em;\n}\n\n.horizontal-margin-right {\n margin-right: 2em;\n}\n\n.vertical-margin {\n margin-top: 1em;\n margin-bottom: 1em;\n}\n\n.feature-text {\n font-size: smaller;\n}\n\n.text-smaller {\n font-size: smaller;\n}\n\n.vertical-gap {\n margin-top: 4em;\n}\n\n.vertical-2em {\n margin-top: 2em;\n}\n\ntable.specs {\n display: table;\n width: auto;\n}\n\ntable.specs td:nth-child(1) {\n font-weight: 600;\n}\n\n.teaser-text-row {\n padding-top: 1em;\n margin-right: 1em;\n .buttons{\n text-align: center;\n }\n \n\n .buttons {\n @include breakpoint($medium) {\n text-align: left;\n }\n }\n}\n\n.btn-view-products {\n background: #fe814d;\n border-radius: 2px;\n border: 1px solid black;\n}\n\n.feature-row-container {\n padding-left: 1em;\n padding-right: 1em;\n}\n\n.image_container {\n text-align: center;\n width: 100%;\n}\n\n.center-row{\n justify-content: center;\n}\n\n.orange{\n color:#fe814d; \n}\n\n.badge{\n @include breakpoint($medium) {\n width: 180px;\n .small{\n height: 64px;\n }\n }\n}\n\n.icon {\n vertical-align: middle;\n margin-top: 1em;\n}\n\n.rating-wrapper {\n width: 80px;\n float: left;\n margin: 1em 0em;\n}\n\n.product_image {\n max-width: 100%;\n\n .medium {\n max-width: 50%;\n }\n\n @include breakpoint($medium) {\n max-width: 70%;\n }\n @include breakpoint($large) {\n max-width: 60%;\n }\n}\n\n.editor-highlight {\n border-color: 1px solid blue;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);\n}\n\n[data-style=\"mypops\"]+.popover {\n background: #4194ca;\n}\n\n[data-style=\"mypops\"]+.popover.bottom .arrow:after {\n border-bottom-color: #4194ca;\n}\n\n[data-style=\"mypops\"]+.popover-content {}\n\n.popovermenu {\n list-style: none;\n padding: 0px;\n margin: 0px;\n}\n\n.popovermenu li {}\n\n.popovermenu li a {\n color: #fff;\n}\n\n.product_image.medium {\n max-width: 50%;\n}\n\n.product_image.small {\n max-width: 33%;\n}\n\n.thumbs {\n text-align: center;\n -ms-box-orient: horizontal;\n display: -webkit-box;\n display: -moz-box;\n display: -ms-flexbox;\n display: -moz-flex;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: stretch;\n align-items: stretch;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.thumb {\n @include breakpoint($x-large) {\n max-width: 50%;\n }\n\n @include breakpoint($large) {\n max-width: 50%;\n }\n\n @include breakpoint($medium-wide) {\n max-width: 50%;\n }\n\n padding: 1em;\n max-height: 50%;\n}\n\n.progress-bar-rating {\n width: 100%;\n background-color: #e2e2e2;\n padding: 1px;\n border-radius: 2px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);\n}\n\n.progress-bar-fill {\n display: block;\n height: 13px;\n background-color: #4e91a561;\n border-radius: 2px;\n transition: width 500ms ease-in-out;\n\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);\n}\n\n.tab-content {\n padding: 1em 0em;\n}\n\n.container-fluid {\n max-width: 1200px;\n min-width: 280px;\n margin: 0 auto;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 0 0 15px;\n color: #465363;\n}\n\n.ty-vendor-plans {\n margin-top: 40px;\n text-align: center;\n -ms-box-orient: horizontal;\n display: -webkit-box;\n display: -moz-box;\n display: -ms-flexbox;\n display: -moz-flex;\n display: -webkit-flex;\n display: flex;\n -webkit-align-items: stretch;\n align-items: stretch;\n justify-content: center;\n flex-wrap: wrap;\n}\n\n.ty-vendor-plans__title {\n text-align: center;\n margin-bottom: 60px;\n}\n\n.ty-vendor-plans__title-header {\n font-size: 28px;\n}\n\n.ty-vendor-plans-info {\n min-height: 280px;\n}\n\n.ty-vendor-plans__item {\n display: inline-block;\n width: 220px;\n background: #fbfbfb;\n vertical-align: top;\n margin-right: 25px;\n margin-bottom: 25px;\n border: 1px solid #f0f0f0;\n padding: 1px;\n transition: all 200ms;\n}\n\n.ty-vendor-plans__item:hover {\n border-color: #dedede;\n}\n\n.ty-vendor-plans__item.active {\n background: #fff;\n border: 0;\n box-shadow: 0 0 30px #bfbfbf;\n}\n\n.ty-vendor-plans__item.active .ty-vendor-plan-content,\n.ty-vendor-plans__item.vendor-plan-current {\n margin-top: 0;\n}\n\n.ty-vendor-plans__item.hidden {\n display: none;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-current-plan {\n text-transform: uppercase;\n font-size: 11px;\n font-weight: 300;\n color: #fff;\n background-color: #f90;\n border-radius: 3px;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n display: inline;\n padding: 4px 18px;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-content {\n padding: 7px 14px;\n margin-top: 10px;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-descr {\n min-height: 1em;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-header {\n margin-top: 10px;\n font-weight: 200;\n font-size: 24px;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-price {\n font-size: 25px;\n text-transform: uppercase;\n font-weight: 600;\n margin-right: 5px;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-price-period {\n color: #999;\n font-size: 15px;\n font-weight: 300;\n font-style: normal;\n text-transform: lowercase;\n line-height: 1em;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-link {\n margin-top: 20px;\n margin-bottom: 10px;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-params {\n padding: 15px 0;\n}\n\n.ty-vendor-plans__item .ty-vendor-plan-params p {\n margin: 0;\n padding: 2px 0;\n font-size: 14px;\n}\n\n.ty-grid-list__item,\n.ty-product-list {\n background: #fff;\n border-radius: 8px;\n transition: all 0.2s ease-in-out 0s;\n box-shadow: none;\n overflow: hidden;\n border: 1px solid #edf2f5;\n border-radius: 5px;\n margin: 0 10px 25px !important;\n padding: 10px 10px 20px;\n max-width: 300px;\n}\n\n.ty-grid-list__item_small,\n.ty-product-list_small {\n background: #fff;\n border-radius: 8px;\n transition: all 0.2s ease-in-out 0s;\n box-shadow: none;\n overflow: hidden;\n border: 1px solid #edf2f5;\n border-radius: 5px;\n margin: 0 10px 25px !important;\n padding: 10px 10px 20px;\n max-width: 150px;\n}\n\n.ty-grid-list__item--overlay:hover,\n.ty-product-list:hover {\n box-shadow: none;\n border-color: #000;\n transform: scale(1.02);\n}\n\n.ty-grid-list__image {\n border-radius: 6px 0;\n}\n\n.ty-product-list__image {\n margin-bottom: 0;\n}\n\n.ty-product-list__image img {\n border: none;\n object-fit: cover;\n width: 220px;\n height: 220px;\n}\n\n.cover {\n object-fit: cover;\n height: 250px;\n}\n\n.cover_small {\n object-fit: cover;\n height: 150px;\n}\n\n@font-face {\n font-family: \"Roboto\";\n font-style: normal;\n font-weight: 400;\n src: url(\"/assets/fonts/roboto-v20-latin-regular.eot\");\n /* IE9 Compat Modes */\n src: local(\"Roboto\"), local(\"Roboto-Regular\"),\n url(\"/assets/fonts/roboto-v20-latin-regular.eot?#iefix\") format(\"embedded-opentype\"),\n /* IE6-IE8 */\n url(\"/assets/fonts/roboto-v20-latin-regular.woff2\") format(\"woff2\"),\n /* Super Modern Browsers */\n url(\"/assets/fonts/roboto-v20-latin-regular.woff\") format(\"woff\"),\n /* Modern Browsers */\n url(\"/assets/fonts/roboto-v20-latin-regular.ttf\") format(\"truetype\"),\n /* Safari, Android, iOS */\n url(\"/assets/fonts/roboto-v20-latin-regular.svg#Roboto\") format(\"svg\");\n /* Legacy iOS */\n}\n\n\n\n\n.product__item {\n\n position: relative;\n margin-bottom: 2em;\n font-size: 1.125em;\n\n @include breakpoint($small) {\n float: left;\n margin-bottom: 0;\n width: span(3 of 12);\n\n &:nth-child(4n + 1) {\n clear: both;\n margin-left: 0;\n }\n\n &:nth-child(4n + 2) {\n clear: none;\n margin-left: gutter(of 12);\n }\n\n &:nth-child(4n + 3) {\n clear: none;\n margin-left: gutter(of 12);\n }\n\n &:nth-child(4n + 4) {\n clear: none;\n margin-left: gutter(of 12);\n }\n\n .feature__item-teaser {\n max-height: 200px;\n overflow: hidden;\n }\n }\n\n .archive__item-body {\n padding-left: gutter(1 of 12);\n padding-right: gutter(1 of 12);\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n &--left {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n font-size: 1.125em;\n\n .archive__item {\n float: left;\n }\n\n .archive__item-teaser {\n margin-bottom: 2em;\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n @include breakpoint($small) {\n .archive__item-teaser {\n float: left;\n width: span(5 of 12);\n }\n\n .archive__item-body {\n float: right;\n padding-left: gutter(0.5 of 12);\n padding-right: gutter(1 of 12);\n width: span(7 of 12);\n }\n }\n }\n\n &--right {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n font-size: 1.125em;\n\n .archive__item {\n float: left;\n }\n\n .archive__item-teaser {\n margin-bottom: 2em;\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n @include breakpoint($small) {\n text-align: right;\n\n .archive__item-teaser {\n float: right;\n width: span(5 of 12);\n }\n\n .archive__item-body {\n float: left;\n width: span(7 of 12);\n padding-left: gutter(0.5 of 12);\n padding-right: gutter(1 of 12);\n }\n }\n }\n\n &--center {\n position: relative;\n float: left;\n margin-left: 0;\n margin-right: 0;\n width: 100%;\n clear: both;\n font-size: 1.125em;\n\n .archive__item {\n float: left;\n width: 100%;\n }\n\n .archive__item-teaser {\n margin-bottom: 2em;\n }\n\n a.btn::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n }\n\n @include breakpoint($small) {\n text-align: center;\n\n .archive__item-teaser {\n margin: 0 auto;\n width: span(5 of 12);\n }\n\n .archive__item-body {\n margin: 0 auto;\n width: span(7 of 12);\n }\n }\n }\n}\n\n\n\n.swiper-container {\n width: 100%;\n /*height: 300px;*/\n max-width: 400px;\n /*\n margin-left: auto;\n margin-right: auto;*/\n }\n\n .swiper-slide {\n background-size: contain;\n background-position: center;\n img{\n object-fit: contain;\n }\n }\n\n .gallery-top {\n max-height: 600px;\n /*width: 33%;*/\n }\n\n .gallery-thumbs {\n /*height: 200px;*/\n box-sizing: border-box;\n padding: 10px 0;\n max-height: 120px;\n /*width: 30%;*/\n }\n\n .gallery-thumbs .swiper-slide {\n width: 25%;\n height: 100%;\n opacity: 0.4;\n }\n\n .gallery-thumbs .swiper-slide-thumb-active {\n opacity: 1;\n }\n\n .center-row {\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n\n .col-third {\n \n}",
"/*!\n * Bootstrap v4.3.1 (https://getbootstrap.com/)\n * Copyright 2011-2019 The Bootstrap Authors\n * Copyright 2011-2019 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n */\n\n@import \"functions\";\n@import \"variables\";\n@import \"mixins\";\n@import \"root\";\n@import \"images\";\n@import \"forms\";\n@import \"button-group\";\n@import \"input-group\";\n@import \"nav\";\n@import \"navbar\";\n@import \"card\";\n@import \"breadcrumb\";\n@import \"pagination\";\n@import \"jumbotron\";\n@import \"alert\";\n@import \"progress\";\n@import \"media\";\n@import \"list-group\";\n@import \"close\";\n@import \"toasts\";\n@import \"modal\";\n@import \"tooltip\";\n@import \"popover\";\n@import \"carousel\";\n@import \"spinners\";\n@import \"utilities\";\n@import \"print\";\n",
"// Bootstrap functions\n//\n// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.\n\n// Ascending\n// Used to evaluate Sass maps like our grid breakpoints.\n@mixin _assert-ascending($map, $map-name) {\n $prev-key: null;\n $prev-num: null;\n @each $key, $num in $map {\n @if $prev-num == null or unit($num) == \"%\" {\n // Do nothing\n } @else if not comparable($prev-num, $num) {\n @warn \"Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n } @else if $prev-num >= $num {\n @warn \"Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !\";\n }\n $prev-key: $key;\n $prev-num: $num;\n }\n}\n\n// Starts at zero\n// Used to ensure the min-width of the lowest breakpoint starts at 0.\n@mixin _assert-starts-at-zero($map, $map-name: \"$grid-breakpoints\") {\n $values: map-values($map);\n $first-value: nth($values, 1);\n @if $first-value != 0 {\n @warn \"First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.\";\n }\n}\n\n// Replace `$search` with `$replace` in `$string`\n// Used on our SVG icon backgrounds for custom forms.\n//\n// @author Hugo Giraudel\n// @param {String} $string - Initial string\n// @param {String} $search - Substring to replace\n// @param {String} $replace ('') - New value\n// @return {String} - Updated string\n@function str-replace($string, $search, $replace: \"\") {\n $index: str-index($string, $search);\n\n @if $index {\n @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\n }\n\n @return $string;\n}\n\n// Color contrast\n@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {\n $r: red($color);\n $g: green($color);\n $b: blue($color);\n\n $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;\n\n @if ($yiq >= $yiq-contrasted-threshold) {\n @return $dark;\n } @else {\n @return $light;\n }\n}\n\n// Retrieve color Sass maps\n@function color($key: \"blue\") {\n @return map-get($colors, $key);\n}\n\n@function theme-color($key: \"primary\") {\n @return map-get($theme-colors, $key);\n}\n\n@function gray($key: \"100\") {\n @return map-get($grays, $key);\n}\n\n// Request a theme color level\n@function theme-color-level($color-name: \"primary\", $level: 0) {\n $color: theme-color($color-name);\n $color-base: if($level > 0, $black, $white);\n $level: abs($level);\n\n @return mix($color-base, $color, $level * $theme-color-interval);\n}\n",
"// Variables\n//\n// Variables should follow the `$component-state-property-size` formula for\n// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.\n\n// Color system\n\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #6c757d !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n\n$grays: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$grays: map-merge(\n (\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n ),\n $grays\n);\n\n$blue: #007bff !default;\n$indigo: #6610f2 !default;\n$purple: #6f42c1 !default;\n$pink: #e83e8c !default;\n$red: #dc3545 !default;\n$orange: #fd7e14 !default;\n$yellow: #ffc107 !default;\n$green: #28a745 !default;\n$teal: #20c997 !default;\n$cyan: #17a2b8 !default;\n\n$colors: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$colors: map-merge(\n (\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n ),\n $colors\n);\n\n$primary: $blue !default;\n$secondary: $gray-600 !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-100 !default;\n$dark: $gray-800 !default;\n\n$theme-colors: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$theme-colors: map-merge(\n (\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n ),\n $theme-colors\n);\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval: 8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900 !default;\n$yiq-text-light: $white !default;\n\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-caret: true !default;\n$enable-rounded: true !default;\n$enable-shadows: false !default;\n$enable-gradients: false !default;\n$enable-transitions: true !default;\n$enable-prefers-reduced-motion-media-query: true !default;\n$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS\n$enable-grid-classes: true !default;\n$enable-pointer-cursor-for-buttons: true !default;\n$enable-print-styles: true !default;\n$enable-responsive-font-sizes: false !default;\n$enable-validation-icons: true !default;\n$enable-deprecation-messages: true !default;\n\n\n// Spacing\n//\n// Control the default styling of most Bootstrap elements by modifying these\n// variables. Mostly focused on spacing.\n// You can add more entries to the $spacers map, should you need more variation.\n\n$spacer: 1rem !default;\n$spacers: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$spacers: map-merge(\n (\n 0: 0,\n 1: ($spacer * .25),\n 2: ($spacer * .5),\n 3: $spacer,\n 4: ($spacer * 1.5),\n 5: ($spacer * 3)\n ),\n $spacers\n);\n\n// This variable affects the `.h-*` and `.w-*` classes.\n$sizes: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$sizes: map-merge(\n (\n 25: 25%,\n 50: 50%,\n 75: 75%,\n 100: 100%,\n auto: auto\n ),\n $sizes\n);\n\n\n// Body\n//\n// Settings for the `` element.\n\n$body-bg: $white !default;\n$body-color: $gray-900 !default;\n\n\n// Links\n//\n// Style anchor elements.\n\n$link-color: theme-color(\"primary\") !default;\n$link-decoration: none !default;\n$link-hover-color: darken($link-color, 15%) !default;\n$link-hover-decoration: underline !default;\n// Darken percentage for links with `.text-*` class (e.g. `.text-success`)\n$emphasized-link-hover-darken-percentage: 15% !default;\n\n// Paragraphs\n//\n// Style p element.\n\n$paragraph-margin-bottom: 1rem !default;\n\n\n// Grid breakpoints\n//\n// Define the minimum dimensions at which your layout will change,\n// adapting to different screen sizes, for use in media queries.\n\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Grid columns\n//\n// Set the number of columns and specify the width of the gutters.\n\n$grid-columns: 12 !default;\n$grid-gutter-width: 30px !default;\n\n\n// Components\n//\n// Define common padding and border radius sizes and more.\n\n$line-height-lg: 1.5 !default;\n$line-height-sm: 1.5 !default;\n\n$border-width: 1px !default;\n$border-color: $gray-300 !default;\n\n$border-radius: .25rem !default;\n$border-radius-lg: .3rem !default;\n$border-radius-sm: .2rem !default;\n\n$rounded-pill: 50rem !default;\n\n$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;\n$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;\n$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;\n\n$component-active-color: $white !default;\n$component-active-bg: theme-color(\"primary\") !default;\n\n$caret-width: .3em !default;\n$caret-vertical-align: $caret-width * .85 !default;\n$caret-spacing: $caret-width * .85 !default;\n\n$transition-base: all .2s ease-in-out !default;\n$transition-fade: opacity .15s linear !default;\n$transition-collapse: height .35s ease !default;\n\n$embed-responsive-aspect-ratios: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$embed-responsive-aspect-ratios: join(\n (\n (21 9),\n (16 9),\n (4 3),\n (1 1),\n ),\n $embed-responsive-aspect-ratios\n);\n\n// Typography\n//\n// Font, line-height, and color for body text, headings, and more.\n\n// stylelint-disable value-keyword-case\n$font-family-sans-serif: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\" !default;\n$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n$font-family-base: $font-family-sans-serif !default;\n// stylelint-enable value-keyword-case\n\n$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`\n$font-size-lg: $font-size-base * 1.25 !default;\n$font-size-sm: $font-size-base * .875 !default;\n\n$font-weight-lighter: lighter !default;\n$font-weight-light: 300 !default;\n$font-weight-normal: 400 !default;\n$font-weight-bold: 700 !default;\n$font-weight-bolder: bolder !default;\n\n$font-weight-base: $font-weight-normal !default;\n$line-height-base: 1.5 !default;\n\n$h1-font-size: $font-size-base * 2.5 !default;\n$h2-font-size: $font-size-base * 2 !default;\n$h3-font-size: $font-size-base * 1.75 !default;\n$h4-font-size: $font-size-base * 1.5 !default;\n$h5-font-size: $font-size-base * 1.25 !default;\n$h6-font-size: $font-size-base !default;\n\n$headings-margin-bottom: $spacer / 2 !default;\n$headings-font-family: null !default;\n$headings-font-weight: 500 !default;\n$headings-line-height: 1.2 !default;\n$headings-color: null !default;\n\n$display1-size: 6rem !default;\n$display2-size: 5.5rem !default;\n$display3-size: 4.5rem !default;\n$display4-size: 3.5rem !default;\n\n$display1-weight: 300 !default;\n$display2-weight: 300 !default;\n$display3-weight: 300 !default;\n$display4-weight: 300 !default;\n$display-line-height: $headings-line-height !default;\n\n$lead-font-size: $font-size-base * 1.25 !default;\n$lead-font-weight: 300 !default;\n\n$small-font-size: 80% !default;\n\n$text-muted: $gray-600 !default;\n\n$blockquote-small-color: $gray-600 !default;\n$blockquote-small-font-size: $small-font-size !default;\n$blockquote-font-size: $font-size-base * 1.25 !default;\n\n$hr-border-color: rgba($black, .1) !default;\n$hr-border-width: $border-width !default;\n\n$mark-padding: .2em !default;\n\n$dt-font-weight: $font-weight-bold !default;\n\n$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;\n$nested-kbd-font-weight: $font-weight-bold !default;\n\n$list-inline-padding: .5rem !default;\n\n$mark-bg: #fcf8e3 !default;\n\n$hr-margin-y: $spacer !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-cell-padding: .75rem !default;\n$table-cell-padding-sm: .3rem !default;\n\n$table-color: $body-color !default;\n$table-bg: null !default;\n$table-accent-bg: rgba($black, .05) !default;\n$table-hover-color: $table-color !default;\n$table-hover-bg: rgba($black, .075) !default;\n$table-active-bg: $table-hover-bg !default;\n\n$table-border-width: $border-width !default;\n$table-border-color: $border-color !default;\n\n$table-head-bg: $gray-200 !default;\n$table-head-color: $gray-700 !default;\n\n$table-dark-color: $white !default;\n$table-dark-bg: $gray-800 !default;\n$table-dark-accent-bg: rgba($white, .05) !default;\n$table-dark-hover-color: $table-dark-color !default;\n$table-dark-hover-bg: rgba($white, .075) !default;\n$table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;\n$table-dark-color: $white !default;\n\n$table-striped-order: odd !default;\n\n$table-caption-color: $text-muted !default;\n\n$table-bg-level: -9 !default;\n$table-border-level: -6 !default;\n\n\n// Buttons + Forms\n//\n// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.\n\n$input-btn-padding-y: .375rem !default;\n$input-btn-padding-x: .75rem !default;\n$input-btn-font-family: null !default;\n$input-btn-font-size: $font-size-base !default;\n$input-btn-line-height: $line-height-base !default;\n\n$input-btn-focus-width: .2rem !default;\n$input-btn-focus-color: rgba($component-active-bg, .25) !default;\n$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;\n\n$input-btn-padding-y-sm: .25rem !default;\n$input-btn-padding-x-sm: .5rem !default;\n$input-btn-font-size-sm: $font-size-sm !default;\n$input-btn-line-height-sm: $line-height-sm !default;\n\n$input-btn-padding-y-lg: .5rem !default;\n$input-btn-padding-x-lg: 1rem !default;\n$input-btn-font-size-lg: $font-size-lg !default;\n$input-btn-line-height-lg: $line-height-lg !default;\n\n$input-btn-border-width: $border-width !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background, and border color.\n\n$btn-padding-y: $input-btn-padding-y !default;\n$btn-padding-x: $input-btn-padding-x !default;\n$btn-font-family: $input-btn-font-family !default;\n$btn-font-size: $input-btn-font-size !default;\n$btn-line-height: $input-btn-line-height !default;\n\n$btn-padding-y-sm: $input-btn-padding-y-sm !default;\n$btn-padding-x-sm: $input-btn-padding-x-sm !default;\n$btn-font-size-sm: $input-btn-font-size-sm !default;\n$btn-line-height-sm: $input-btn-line-height-sm !default;\n\n$btn-padding-y-lg: $input-btn-padding-y-lg !default;\n$btn-padding-x-lg: $input-btn-padding-x-lg !default;\n$btn-font-size-lg: $input-btn-font-size-lg !default;\n$btn-line-height-lg: $input-btn-line-height-lg !default;\n\n$btn-border-width: $input-btn-border-width !default;\n\n$btn-font-weight: $font-weight-normal !default;\n$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;\n$btn-focus-width: $input-btn-focus-width !default;\n$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$btn-disabled-opacity: .65 !default;\n$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;\n\n$btn-link-disabled-color: $gray-600 !default;\n\n$btn-block-spacing-y: .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius: $border-radius !default;\n$btn-border-radius-lg: $border-radius-lg !default;\n$btn-border-radius-sm: $border-radius-sm !default;\n\n$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n\n// Forms\n\n$label-margin-bottom: .5rem !default;\n\n$input-padding-y: $input-btn-padding-y !default;\n$input-padding-x: $input-btn-padding-x !default;\n$input-font-family: $input-btn-font-family !default;\n$input-font-size: $input-btn-font-size !default;\n$input-font-weight: $font-weight-base !default;\n$input-line-height: $input-btn-line-height !default;\n\n$input-padding-y-sm: $input-btn-padding-y-sm !default;\n$input-padding-x-sm: $input-btn-padding-x-sm !default;\n$input-font-size-sm: $input-btn-font-size-sm !default;\n$input-line-height-sm: $input-btn-line-height-sm !default;\n\n$input-padding-y-lg: $input-btn-padding-y-lg !default;\n$input-padding-x-lg: $input-btn-padding-x-lg !default;\n$input-font-size-lg: $input-btn-font-size-lg !default;\n$input-line-height-lg: $input-btn-line-height-lg !default;\n\n$input-bg: $white !default;\n$input-disabled-bg: $gray-200 !default;\n\n$input-color: $gray-700 !default;\n$input-border-color: $gray-400 !default;\n$input-border-width: $input-btn-border-width !default;\n$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;\n\n$input-border-radius: $border-radius !default;\n$input-border-radius-lg: $border-radius-lg !default;\n$input-border-radius-sm: $border-radius-sm !default;\n\n$input-focus-bg: $input-bg !default;\n$input-focus-border-color: lighten($component-active-bg, 25%) !default;\n$input-focus-color: $input-color !default;\n$input-focus-width: $input-btn-focus-width !default;\n$input-focus-box-shadow: $input-btn-focus-box-shadow !default;\n\n$input-placeholder-color: $gray-600 !default;\n$input-plaintext-color: $body-color !default;\n\n$input-height-border: $input-border-width * 2 !default;\n\n$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;\n$input-height-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;\n$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;\n\n$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;\n$input-height-sm: calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;\n$input-height-lg: calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;\n\n$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$form-text-margin-top: .25rem !default;\n\n$form-check-input-gutter: 1.25rem !default;\n$form-check-input-margin-y: .3rem !default;\n$form-check-input-margin-x: .25rem !default;\n\n$form-check-inline-margin-x: .75rem !default;\n$form-check-inline-input-margin-x: .3125rem !default;\n\n$form-grid-gutter-width: 10px !default;\n$form-group-margin-bottom: 1rem !default;\n\n$input-group-addon-color: $input-color !default;\n$input-group-addon-bg: $gray-200 !default;\n$input-group-addon-border-color: $input-border-color !default;\n\n$custom-forms-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;\n\n$custom-control-gutter: .5rem !default;\n$custom-control-spacer-x: 1rem !default;\n\n$custom-control-indicator-size: 1rem !default;\n$custom-control-indicator-bg: $input-bg !default;\n\n$custom-control-indicator-bg-size: 50% 50% !default;\n$custom-control-indicator-box-shadow: $input-box-shadow !default;\n$custom-control-indicator-border-color: $gray-500 !default;\n$custom-control-indicator-border-width: $input-border-width !default;\n\n$custom-control-indicator-disabled-bg: $input-disabled-bg !default;\n$custom-control-label-disabled-color: $gray-600 !default;\n\n$custom-control-indicator-checked-color: $component-active-color !default;\n$custom-control-indicator-checked-bg: $component-active-bg !default;\n$custom-control-indicator-checked-disabled-bg: rgba(theme-color(\"primary\"), .5) !default;\n$custom-control-indicator-checked-box-shadow: none !default;\n$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;\n\n$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-control-indicator-focus-border-color: $input-focus-border-color !default;\n\n$custom-control-indicator-active-color: $component-active-color !default;\n$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;\n$custom-control-indicator-active-box-shadow: none !default;\n$custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;\n\n$custom-checkbox-indicator-border-radius: $border-radius !default;\n$custom-checkbox-indicator-icon-checked: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n\n$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;\n$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$custom-checkbox-indicator-indeterminate-box-shadow: none !default;\n$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;\n\n$custom-radio-indicator-border-radius: 50% !default;\n$custom-radio-indicator-icon-checked: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n\n$custom-switch-width: $custom-control-indicator-size * 1.75 !default;\n$custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;\n$custom-switch-indicator-size: calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;\n\n$custom-select-padding-y: $input-padding-y !default;\n$custom-select-padding-x: $input-padding-x !default;\n$custom-select-font-family: $input-font-family !default;\n$custom-select-font-size: $input-font-size !default;\n$custom-select-height: $input-height !default;\n$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-font-weight: $input-font-weight !default;\n$custom-select-line-height: $input-line-height !default;\n$custom-select-color: $input-color !default;\n$custom-select-disabled-color: $gray-600 !default;\n$custom-select-bg: $input-bg !default;\n$custom-select-disabled-bg: $gray-200 !default;\n$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color: $gray-800 !default;\n$custom-select-indicator: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$custom-select-background: $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)\n\n$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;\n$custom-select-feedback-icon-position: center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;\n$custom-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;\n\n$custom-select-border-width: $input-border-width !default;\n$custom-select-border-color: $input-border-color !default;\n$custom-select-border-radius: $border-radius !default;\n$custom-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;\n\n$custom-select-focus-border-color: $input-focus-border-color !default;\n$custom-select-focus-width: $input-focus-width !default;\n$custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width $input-btn-focus-color !default;\n\n$custom-select-padding-y-sm: $input-padding-y-sm !default;\n$custom-select-padding-x-sm: $input-padding-x-sm !default;\n$custom-select-font-size-sm: $input-font-size-sm !default;\n$custom-select-height-sm: $input-height-sm !default;\n\n$custom-select-padding-y-lg: $input-padding-y-lg !default;\n$custom-select-padding-x-lg: $input-padding-x-lg !default;\n$custom-select-font-size-lg: $input-font-size-lg !default;\n$custom-select-height-lg: $input-height-lg !default;\n\n$custom-range-track-width: 100% !default;\n$custom-range-track-height: .5rem !default;\n$custom-range-track-cursor: pointer !default;\n$custom-range-track-bg: $gray-300 !default;\n$custom-range-track-border-radius: 1rem !default;\n$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;\n\n$custom-range-thumb-width: 1rem !default;\n$custom-range-thumb-height: $custom-range-thumb-width !default;\n$custom-range-thumb-bg: $component-active-bg !default;\n$custom-range-thumb-border: 0 !default;\n$custom-range-thumb-border-radius: 1rem !default;\n$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;\n$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;\n$custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge\n$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;\n$custom-range-thumb-disabled-bg: $gray-500 !default;\n\n$custom-file-height: $input-height !default;\n$custom-file-height-inner: $input-height-inner !default;\n$custom-file-focus-border-color: $input-focus-border-color !default;\n$custom-file-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-file-disabled-bg: $input-disabled-bg !default;\n\n$custom-file-padding-y: $input-padding-y !default;\n$custom-file-padding-x: $input-padding-x !default;\n$custom-file-line-height: $input-line-height !default;\n$custom-file-font-family: $input-font-family !default;\n$custom-file-font-weight: $input-font-weight !default;\n$custom-file-color: $input-color !default;\n$custom-file-bg: $input-bg !default;\n$custom-file-border-width: $input-border-width !default;\n$custom-file-border-color: $input-border-color !default;\n$custom-file-border-radius: $input-border-radius !default;\n$custom-file-box-shadow: $input-box-shadow !default;\n$custom-file-button-color: $custom-file-color !default;\n$custom-file-button-bg: $input-group-addon-bg !default;\n$custom-file-text: (\n en: \"Browse\"\n) !default;\n\n\n// Form validation\n\n$form-feedback-margin-top: $form-text-margin-top !default;\n$form-feedback-font-size: $small-font-size !default;\n$form-feedback-valid-color: theme-color(\"success\") !default;\n$form-feedback-invalid-color: theme-color(\"danger\") !default;\n\n$form-feedback-icon-valid-color: $form-feedback-valid-color !default;\n$form-feedback-icon-valid: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;\n$form-feedback-icon-invalid: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\"), \"#\", \"%23\") !default;\n\n$form-validation-states: () !default;\n// stylelint-disable-next-line scss/dollar-variable-default\n$form-validation-states: map-merge(\n (\n \"valid\": (\n \"color\": $form-feedback-valid-color,\n \"icon\": $form-feedback-icon-valid\n ),\n \"invalid\": (\n \"color\": $form-feedback-invalid-color,\n \"icon\": $form-feedback-icon-invalid\n ),\n ),\n $form-validation-states\n);\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown: 1000 !default;\n$zindex-sticky: 1020 !default;\n$zindex-fixed: 1030 !default;\n$zindex-modal-backdrop: 1040 !default;\n$zindex-modal: 1050 !default;\n$zindex-popover: 1060 !default;\n$zindex-tooltip: 1070 !default;\n\n\n// Navs\n\n$nav-link-padding-y: .5rem !default;\n$nav-link-padding-x: 1rem !default;\n$nav-link-disabled-color: $gray-600 !default;\n\n$nav-tabs-border-color: $gray-300 !default;\n$nav-tabs-border-width: $border-width !default;\n$nav-tabs-border-radius: $border-radius !default;\n$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;\n$nav-tabs-link-active-color: $gray-700 !default;\n$nav-tabs-link-active-bg: $body-bg !default;\n$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;\n\n$nav-pills-border-radius: $border-radius !default;\n$nav-pills-link-active-color: $component-active-color !default;\n$nav-pills-link-active-bg: $component-active-bg !default;\n\n$nav-divider-color: $gray-200 !default;\n$nav-divider-margin-y: $spacer / 2 !default;\n\n\n// Navbar\n\n$navbar-padding-y: $spacer / 2 !default;\n$navbar-padding-x: $spacer !default;\n\n$navbar-nav-link-padding-x: .5rem !default;\n\n$navbar-brand-font-size: $font-size-lg !default;\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;\n$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;\n\n$navbar-toggler-padding-y: .25rem !default;\n$navbar-toggler-padding-x: .75rem !default;\n$navbar-toggler-font-size: $font-size-lg !default;\n$navbar-toggler-border-radius: $btn-border-radius !default;\n\n$navbar-dark-color: rgba($white, .5) !default;\n$navbar-dark-hover-color: rgba($white, .75) !default;\n$navbar-dark-active-color: $white !default;\n$navbar-dark-disabled-color: rgba($white, .25) !default;\n$navbar-dark-toggler-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$navbar-dark-toggler-border-color: rgba($white, .1) !default;\n\n$navbar-light-color: rgba($black, .5) !default;\n$navbar-light-hover-color: rgba($black, .7) !default;\n$navbar-light-active-color: rgba($black, .9) !default;\n$navbar-light-disabled-color: rgba($black, .3) !default;\n$navbar-light-toggler-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$navbar-light-toggler-border-color: rgba($black, .1) !default;\n\n$navbar-light-brand-color: $navbar-light-active-color !default;\n$navbar-light-brand-hover-color: $navbar-light-active-color !default;\n$navbar-dark-brand-color: $navbar-dark-active-color !default;\n$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-min-width: 10rem !default;\n$dropdown-padding-y: .5rem !default;\n$dropdown-spacer: .125rem !default;\n$dropdown-font-size: $font-size-base !default;\n$dropdown-color: $body-color !default;\n$dropdown-bg: $white !default;\n$dropdown-border-color: rgba($black, .15) !default;\n$dropdown-border-radius: $border-radius !default;\n$dropdown-border-width: $border-width !default;\n$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;\n$dropdown-divider-bg: $gray-200 !default;\n$dropdown-divider-margin-y: $nav-divider-margin-y !default;\n$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;\n\n$dropdown-link-color: $gray-900 !default;\n$dropdown-link-hover-color: darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg: $gray-100 !default;\n\n$dropdown-link-active-color: $component-active-color !default;\n$dropdown-link-active-bg: $component-active-bg !default;\n\n$dropdown-link-disabled-color: $gray-600 !default;\n\n$dropdown-item-padding-y: .25rem !default;\n$dropdown-item-padding-x: 1.5rem !default;\n\n$dropdown-header-color: $gray-600 !default;\n\n\n// Pagination\n\n$pagination-padding-y: .5rem !default;\n$pagination-padding-x: .75rem !default;\n$pagination-padding-y-sm: .25rem !default;\n$pagination-padding-x-sm: .5rem !default;\n$pagination-padding-y-lg: .75rem !default;\n$pagination-padding-x-lg: 1.5rem !default;\n$pagination-line-height: 1.25 !default;\n\n$pagination-color: $link-color !default;\n$pagination-bg: $white !default;\n$pagination-border-width: $border-width !default;\n$pagination-border-color: $gray-300 !default;\n\n$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;\n$pagination-focus-outline: 0 !default;\n\n$pagination-hover-color: $link-hover-color !default;\n$pagination-hover-bg: $gray-200 !default;\n$pagination-hover-border-color: $gray-300 !default;\n\n$pagination-active-color: $component-active-color !default;\n$pagination-active-bg: $component-active-bg !default;\n$pagination-active-border-color: $pagination-active-bg !default;\n\n$pagination-disabled-color: $gray-600 !default;\n$pagination-disabled-bg: $white !default;\n$pagination-disabled-border-color: $gray-300 !default;\n\n\n// Jumbotron\n\n$jumbotron-padding: 2rem !default;\n$jumbotron-color: null !default;\n$jumbotron-bg: $gray-200 !default;\n\n\n// Cards\n\n$card-spacer-y: .75rem !default;\n$card-spacer-x: 1.25rem !default;\n$card-border-width: $border-width !default;\n$card-border-radius: $border-radius !default;\n$card-border-color: rgba($black, .125) !default;\n$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;\n$card-cap-bg: rgba($black, .03) !default;\n$card-cap-color: null !default;\n$card-color: null !default;\n$card-bg: $white !default;\n\n$card-img-overlay-padding: 1.25rem !default;\n\n$card-group-margin: $grid-gutter-width / 2 !default;\n$card-deck-margin: $card-group-margin !default;\n\n$card-columns-count: 3 !default;\n$card-columns-gap: 1.25rem !default;\n$card-columns-margin: $card-spacer-y !default;\n\n\n// Tooltips\n\n$tooltip-font-size: $font-size-sm !default;\n$tooltip-max-width: 200px !default;\n$tooltip-color: $white !default;\n$tooltip-bg: $black !default;\n$tooltip-border-radius: $border-radius !default;\n$tooltip-opacity: .9 !default;\n$tooltip-padding-y: .25rem !default;\n$tooltip-padding-x: .5rem !default;\n$tooltip-margin: 0 !default;\n\n$tooltip-arrow-width: .8rem !default;\n$tooltip-arrow-height: .4rem !default;\n$tooltip-arrow-color: $tooltip-bg !default;\n\n// Form tooltips must come after regular tooltips\n$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;\n$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;\n$form-feedback-tooltip-font-size: $tooltip-font-size !default;\n$form-feedback-tooltip-line-height: $line-height-base !default;\n$form-feedback-tooltip-opacity: $tooltip-opacity !default;\n$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;\n\n\n// Popovers\n\n$popover-font-size: $font-size-sm !default;\n$popover-bg: $white !default;\n$popover-max-width: 276px !default;\n$popover-border-width: $border-width !default;\n$popover-border-color: rgba($black, .2) !default;\n$popover-border-radius: $border-radius-lg !default;\n$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;\n\n$popover-header-bg: darken($popover-bg, 3%) !default;\n$popover-header-color: $headings-color !default;\n$popover-header-padding-y: .5rem !default;\n$popover-header-padding-x: .75rem !default;\n\n$popover-body-color: $body-color !default;\n$popover-body-padding-y: $popover-header-padding-y !default;\n$popover-body-padding-x: $popover-header-padding-x !default;\n\n$popover-arrow-width: 1rem !default;\n$popover-arrow-height: .5rem !default;\n$popover-arrow-color: $popover-bg !default;\n\n$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;\n\n\n// Toasts\n\n$toast-max-width: 350px !default;\n$toast-padding-x: .75rem !default;\n$toast-padding-y: .25rem !default;\n$toast-font-size: .875rem !default;\n$toast-color: null !default;\n$toast-background-color: rgba($white, .85) !default;\n$toast-border-width: 1px !default;\n$toast-border-color: rgba(0, 0, 0, .1) !default;\n$toast-border-radius: .25rem !default;\n$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;\n\n$toast-header-color: $gray-600 !default;\n$toast-header-background-color: rgba($white, .85) !default;\n$toast-header-border-color: rgba(0, 0, 0, .05) !default;\n\n\n// Badges\n\n$badge-font-size: 75% !default;\n$badge-font-weight: $font-weight-bold !default;\n$badge-padding-y: .25em !default;\n$badge-padding-x: .4em !default;\n$badge-border-radius: $border-radius !default;\n\n$badge-transition: $btn-transition !default;\n$badge-focus-width: $input-btn-focus-width !default;\n\n$badge-pill-padding-x: .6em !default;\n// Use a higher than normal value to ensure completely rounded edges when\n// customizing padding or font-size on labels.\n$badge-pill-border-radius: 10rem !default;\n\n\n// Modals\n\n// Padding applied to the modal body\n$modal-inner-padding: 1rem !default;\n\n$modal-dialog-margin: .5rem !default;\n$modal-dialog-margin-y-sm-up: 1.75rem !default;\n\n$modal-title-line-height: $line-height-base !default;\n\n$modal-content-color: null !default;\n$modal-content-bg: $white !default;\n$modal-content-border-color: rgba($black, .2) !default;\n$modal-content-border-width: $border-width !default;\n$modal-content-border-radius: $border-radius-lg !default;\n$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;\n$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;\n\n$modal-backdrop-bg: $black !default;\n$modal-backdrop-opacity: .5 !default;\n$modal-header-border-color: $border-color !default;\n$modal-footer-border-color: $modal-header-border-color !default;\n$modal-header-border-width: $modal-content-border-width !default;\n$modal-footer-border-width: $modal-header-border-width !default;\n$modal-header-padding-y: 1rem !default;\n$modal-header-padding-x: 1rem !default;\n$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility\n\n$modal-xl: 1140px !default;\n$modal-lg: 800px !default;\n$modal-md: 500px !default;\n$modal-sm: 300px !default;\n\n$modal-fade-transform: translate(0, -50px) !default;\n$modal-show-transform: none !default;\n$modal-transition: transform .3s ease-out !default;\n\n\n// Alerts\n//\n// Define alert colors, border radius, and padding.\n\n$alert-padding-y: .75rem !default;\n$alert-padding-x: 1.25rem !default;\n$alert-margin-bottom: 1rem !default;\n$alert-border-radius: $border-radius !default;\n$alert-link-font-weight: $font-weight-bold !default;\n$alert-border-width: $border-width !default;\n\n$alert-bg-level: -10 !default;\n$alert-border-level: -9 !default;\n$alert-color-level: 6 !default;\n\n\n// Progress bars\n\n$progress-height: 1rem !default;\n$progress-font-size: $font-size-base * .75 !default;\n$progress-bg: $gray-200 !default;\n$progress-border-radius: $border-radius !default;\n$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;\n$progress-bar-color: $white !default;\n$progress-bar-bg: theme-color(\"primary\") !default;\n$progress-bar-animation-timing: 1s linear infinite !default;\n$progress-bar-transition: width .6s ease !default;\n\n\n// List group\n\n$list-group-color: null !default;\n$list-group-bg: $white !default;\n$list-group-border-color: rgba($black, .125) !default;\n$list-group-border-width: $border-width !default;\n$list-group-border-radius: $border-radius !default;\n\n$list-group-item-padding-y: .75rem !default;\n$list-group-item-padding-x: 1.25rem !default;\n\n$list-group-hover-bg: $gray-100 !default;\n$list-group-active-color: $component-active-color !default;\n$list-group-active-bg: $component-active-bg !default;\n$list-group-active-border-color: $list-group-active-bg !default;\n\n$list-group-disabled-color: $gray-600 !default;\n$list-group-disabled-bg: $list-group-bg !default;\n\n$list-group-action-color: $gray-700 !default;\n$list-group-action-hover-color: $list-group-action-color !default;\n\n$list-group-action-active-color: $body-color !default;\n$list-group-action-active-bg: $gray-200 !default;\n\n\n// Image thumbnails\n\n$thumbnail-padding: .25rem !default;\n$thumbnail-bg: $body-bg !default;\n$thumbnail-border-width: $border-width !default;\n$thumbnail-border-color: $gray-300 !default;\n$thumbnail-border-radius: $border-radius !default;\n$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;\n\n\n// Figures\n\n$figure-caption-font-size: 90% !default;\n$figure-caption-color: $gray-600 !default;\n\n\n// Breadcrumbs\n\n$breadcrumb-padding-y: .75rem !default;\n$breadcrumb-padding-x: 1rem !default;\n$breadcrumb-item-padding: .5rem !default;\n\n$breadcrumb-margin-bottom: 1rem !default;\n\n$breadcrumb-bg: $gray-200 !default;\n$breadcrumb-divider-color: $gray-600 !default;\n$breadcrumb-active-color: $gray-600 !default;\n$breadcrumb-divider: quote(\"/\") !default;\n\n$breadcrumb-border-radius: $border-radius !default;\n\n\n// Carousel\n\n$carousel-control-color: $white !default;\n$carousel-control-width: 15% !default;\n$carousel-control-opacity: .5 !default;\n$carousel-control-hover-opacity: .9 !default;\n$carousel-control-transition: opacity .15s ease !default;\n\n$carousel-indicator-width: 30px !default;\n$carousel-indicator-height: 3px !default;\n$carousel-indicator-hit-area-height: 10px !default;\n$carousel-indicator-spacer: 3px !default;\n$carousel-indicator-active-bg: $white !default;\n$carousel-indicator-transition: opacity .6s ease !default;\n\n$carousel-caption-width: 70% !default;\n$carousel-caption-color: $white !default;\n\n$carousel-control-icon-width: 20px !default;\n\n$carousel-control-prev-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n$carousel-control-next-icon-bg: str-replace(url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\"), \"#\", \"%23\") !default;\n\n$carousel-transition-duration: .6s !default;\n$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)\n\n\n// Spinners\n\n$spinner-width: 2rem !default;\n$spinner-height: $spinner-width !default;\n$spinner-border-width: .25em !default;\n\n$spinner-width-sm: 1rem !default;\n$spinner-height-sm: $spinner-width-sm !default;\n$spinner-border-width-sm: .2em !default;\n\n\n// Close\n\n$close-font-size: $font-size-base * 1.5 !default;\n$close-font-weight: $font-weight-bold !default;\n$close-color: $black !default;\n$close-text-shadow: 0 1px 0 $white !default;\n\n\n// Code\n\n$code-font-size: 87.5% !default;\n$code-color: $pink !default;\n\n$kbd-padding-y: .2rem !default;\n$kbd-padding-x: .4rem !default;\n$kbd-font-size: $code-font-size !default;\n$kbd-color: $white !default;\n$kbd-bg: $gray-900 !default;\n\n$pre-color: $gray-900 !default;\n$pre-scrollable-max-height: 340px !default;\n\n\n// Utilities\n\n$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;\n$overflows: auto, hidden !default;\n$positions: static, relative, absolute, fixed, sticky !default;\n\n\n// Printing\n\n$print-page-size: a3 !default;\n$print-body-min-width: map-get($grid-breakpoints, \"lg\") !default;\n",
"// Toggles\n//\n// Used in conjunction with global variables to enable certain theme features.\n\n// Vendor\n@import \"vendor/rfs\";\n\n// Deprecate\n@import \"mixins/deprecate\";\n\n// Utilities\n@import \"mixins/breakpoints\";\n@import \"mixins/hover\";\n@import \"mixins/image\";\n@import \"mixins/badge\";\n@import \"mixins/resize\";\n@import \"mixins/screen-reader\";\n@import \"mixins/size\";\n@import \"mixins/reset-text\";\n@import \"mixins/text-emphasis\";\n@import \"mixins/text-hide\";\n@import \"mixins/text-truncate\";\n@import \"mixins/visibility\";\n\n// // Components\n@import \"mixins/alert\";\n@import \"mixins/buttons\";\n@import \"mixins/caret\";\n@import \"mixins/pagination\";\n@import \"mixins/lists\";\n@import \"mixins/list-group\";\n@import \"mixins/nav-divider\";\n@import \"mixins/forms\";\n@import \"mixins/table-row\";\n\n// // Skins\n@import \"mixins/background-variant\";\n@import \"mixins/border-radius\";\n@import \"mixins/box-shadow\";\n@import \"mixins/gradients\";\n@import \"mixins/transition\";\n\n// // Layout\n@import \"mixins/clearfix\";\n@import \"mixins/grid-framework\";\n@import \"mixins/grid\";\n@import \"mixins/float\";\n",
"// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n @error \"`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n // Cache $fs unit\n $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n // Add !important suffix if needed\n $rfs-suffix: if($important, \" !important\", \"\");\n\n // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n font-size: #{$fs}#{$rfs-suffix};\n }\n @else {\n // Variables for storing static and fluid rescaling\n $rfs-static: null;\n $rfs-fluid: null;\n\n // Remove px-unit from $fs for calculations\n @if $fs-unit == \"px\" {\n $fs: $fs / ($fs * 0 + 1);\n }\n @else if $fs-unit == \"rem\" {\n $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n }\n\n // Set default font-size\n @if $rfs-font-size-unit == rem {\n $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n }\n @else if $rfs-font-size-unit == px {\n $rfs-static: #{$fs}px#{$rfs-suffix};\n }\n @else {\n @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n }\n\n // Only add media query if font-size is bigger as the minimum font-size\n // If $rfs-factor == 1, no rescaling will take place\n @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n $min-width: null;\n $variable-unit: null;\n\n // Calculate minimum font-size for given font-size\n $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n // Calculate difference between given font-size and minimum font-size for given font-size\n $fs-diff: $fs - $fs-min;\n\n // Base font-size formatting\n // No need to check if the unit is valid, because we did that before\n $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n // If two-dimensional, use smallest of screen width and height\n $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n // Calculate the variable width between 0 and $rfs-breakpoint\n $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n // Set the calculated font-size.\n $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n }\n\n // Rendering\n @if $rfs-fluid == null {\n // Only render static font-size if no fluid font-size is available\n font-size: $rfs-static;\n }\n @else {\n $mq-value: null;\n\n // RFS breakpoint formatting\n @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n }\n @else if $rfs-breakpoint-unit == px {\n $mq-value: #{$rfs-breakpoint}px;\n }\n @else {\n @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n }\n\n @if $rfs-class == \"disable\" {\n // Adding an extra class increases specificity,\n // which prevents the media query to override the font size\n &,\n .disable-responsive-font-size &,\n &.disable-responsive-font-size {\n font-size: $rfs-static;\n }\n }\n @else {\n font-size: $rfs-static;\n }\n\n @if $rfs-two-dimensional {\n @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n @else {\n @media (max-width: #{$mq-value}) {\n @if $rfs-class == \"enable\" {\n .enable-responsive-font-size &,\n &.enable-responsive-font-size {\n font-size: $rfs-fluid;\n }\n }\n @else {\n font-size: $rfs-fluid;\n }\n\n @if $rfs-safari-iframe-resize-bug-fix {\n // stylelint-disable-next-line length-zero-no-unit\n min-width: 0vw;\n }\n }\n }\n }\n }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n @include rfs($fs, $important);\n}\n",
"// Deprecate mixin\n//\n// This mixin can be used to deprecate mixins or functions.\n// `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to\n// some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap)\n@mixin deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false) {\n @if ($enable-deprecation-messages != false and $ignore-warning != true) {\n @warn \"#{$name} has been deprecated as of #{$deprecate-version}. It will be removed entirely in #{$remove-version}.\";\n }\n}\n",
"// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n// >> breakpoint-next(sm)\n// md\n// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// md\n// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n// md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n $n: index($breakpoint-names, $name);\n @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n $min: map-get($breakpoints, $name);\n @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// 767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n $next: breakpoint-next($name, $breakpoints);\n @return if($next, breakpoint-min($next, $breakpoints) - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"\" (Returns a blank string)\n// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n// \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n $max: breakpoint-max($name, $breakpoints);\n\n @if $min != null and $max != null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max == null {\n @include media-breakpoint-up($name, $breakpoints) {\n @content;\n }\n } @else if $min == null {\n @include media-breakpoint-down($name, $breakpoints) {\n @content;\n }\n }\n}\n",
"// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover {\n &:hover { @content; }\n}\n\n@mixin hover-focus {\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus {\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n",
"// Image Mixins\n// - Responsive image\n// - Retina image\n\n\n// Responsive image\n//\n// Keep images from scaling beyond the width of their parents.\n\n@mixin img-fluid {\n // Part 1: Set a maximum relative to the parent\n max-width: 100%;\n // Part 2: Override the height to auto, otherwise images will be stretched\n // when setting a width and height attribute on the img element.\n height: auto;\n}\n\n\n// Retina image\n//\n// Short retina mixin for setting background-image and -size.\n\n@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {\n background-image: url($file-1x);\n\n // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,\n // but doesn't convert dppx=>dpi.\n // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.\n // Compatibility info: https://caniuse.com/#feat=css-media-resolution\n @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx\n only screen and (min-resolution: 2dppx) { // Standardized\n background-image: url($file-2x);\n background-size: $width-1x $height-1x;\n }\n @include deprecate(\"`img-retina()`\", \"v4.3.0\", \"v5\");\n}\n",
"@mixin badge-variant($bg) {\n color: color-yiq($bg);\n background-color: $bg;\n\n @at-root a#{&} {\n @include hover-focus {\n color: color-yiq($bg);\n background-color: darken($bg, 10%);\n }\n\n &:focus,\n &.focus {\n outline: 0;\n box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);\n }\n }\n}\n",
"// Resize anything\n\n@mixin resizable($direction) {\n overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`\n resize: $direction; // Options: horizontal, vertical, both\n}\n",
"// Only display content to screen readers\n//\n// See: https://a11yproject.com/posts/how-to-hide-content/\n// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/\n\n@mixin sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n\n// Use in conjunction with .sr-only to only display content when it's focused.\n//\n// Useful for \"Skip to main content\" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1\n//\n// Credit: HTML5 Boilerplate\n\n@mixin sr-only-focusable {\n &:active,\n &:focus {\n position: static;\n width: auto;\n height: auto;\n overflow: visible;\n clip: auto;\n white-space: normal;\n }\n}\n",
"// Sizing shortcuts\n\n@mixin size($width, $height: $width) {\n width: $width;\n height: $height;\n @include deprecate(\"`size()`\", \"v4.3.0\", \"v5\");\n}\n",
"@mixin reset-text {\n font-family: $font-family-base;\n // We deliberately do NOT reset font-size or word-wrap.\n font-style: normal;\n font-weight: $font-weight-normal;\n line-height: $line-height-base;\n text-align: left; // Fallback for where `start` is not supported\n text-align: start;\n text-decoration: none;\n text-shadow: none;\n text-transform: none;\n letter-spacing: normal;\n word-break: normal;\n word-spacing: normal;\n white-space: normal;\n line-break: auto;\n}\n",
"// stylelint-disable declaration-no-important\n\n// Typography\n\n@mixin text-emphasis-variant($parent, $color) {\n #{$parent} {\n color: $color !important;\n }\n @if $emphasized-link-hover-darken-percentage != 0 {\n a#{$parent} {\n @include hover-focus {\n color: darken($color, $emphasized-link-hover-darken-percentage) !important;\n }\n }\n }\n}\n",
"// CSS image replacement\n@mixin text-hide($ignore-warning: false) {\n // stylelint-disable-next-line font-family-no-missing-generic-family-keyword\n font: 0/0 a;\n color: transparent;\n text-shadow: none;\n background-color: transparent;\n border: 0;\n\n @include deprecate(\"`text-hide()`\", \"v4.1.0\", \"v5\", $ignore-warning);\n}\n",
"// Text truncate\n// Requires inline-block or block for proper styling\n\n@mixin text-truncate() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n",
"// stylelint-disable declaration-no-important\n\n// Visibility\n\n@mixin invisible($visibility) {\n visibility: $visibility !important;\n @include deprecate(\"`invisible()`\", \"v4.3.0\", \"v5\");\n}\n",
"@mixin alert-variant($background, $border, $color) {\n color: $color;\n @include gradient-bg($background);\n border-color: $border;\n\n hr {\n border-top-color: darken($border, 5%);\n }\n\n .alert-link {\n color: darken($color, 10%);\n }\n}\n",
"// Button variants\n//\n// Easily pump out default styles, as well as :hover, :focus, :active,\n// and disabled options for all buttons\n\n@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {\n color: color-yiq($background);\n @include gradient-bg($background);\n border-color: $border;\n @include box-shadow($btn-box-shadow);\n\n @include hover {\n color: color-yiq($hover-background);\n @include gradient-bg($hover-background);\n border-color: $hover-border;\n }\n\n &:focus,\n &.focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n } @else {\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n\n // Disabled comes first so active can properly restyle\n &.disabled,\n &:disabled {\n color: color-yiq($background);\n background-color: $background;\n border-color: $border;\n // Remove CSS gradients if they're enabled\n @if $enable-gradients {\n background-image: none;\n }\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n @if $enable-gradients {\n background-image: none; // Remove the gradient for the pressed/active state\n }\n border-color: $active-border;\n\n &:focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows and $btn-active-box-shadow != none {\n box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n } @else {\n box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);\n }\n }\n }\n}\n\n@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {\n color: $color;\n border-color: $color;\n\n @include hover {\n color: $color-hover;\n background-color: $active-background;\n border-color: $active-border;\n }\n\n &:focus,\n &.focus {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &.disabled,\n &:disabled {\n color: $color;\n background-color: transparent;\n }\n\n &:not(:disabled):not(.disabled):active,\n &:not(:disabled):not(.disabled).active,\n .show > &.dropdown-toggle {\n color: color-yiq($active-background);\n background-color: $active-background;\n border-color: $active-border;\n\n &:focus {\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows and $btn-active-box-shadow != none {\n box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);\n } @else {\n box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n }\n }\n}\n\n// Button sizes\n@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n // Manually declare to provide an override to the browser default\n @include border-radius($border-radius, 0);\n}\n",
"@mixin caret-down {\n border-top: $caret-width solid;\n border-right: $caret-width solid transparent;\n border-bottom: 0;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-up {\n border-top: 0;\n border-right: $caret-width solid transparent;\n border-bottom: $caret-width solid;\n border-left: $caret-width solid transparent;\n}\n\n@mixin caret-right {\n border-top: $caret-width solid transparent;\n border-right: 0;\n border-bottom: $caret-width solid transparent;\n border-left: $caret-width solid;\n}\n\n@mixin caret-left {\n border-top: $caret-width solid transparent;\n border-right: $caret-width solid;\n border-bottom: $caret-width solid transparent;\n}\n\n@mixin caret($direction: down) {\n @if $enable-caret {\n &::after {\n display: inline-block;\n margin-left: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @if $direction == down {\n @include caret-down;\n } @else if $direction == up {\n @include caret-up;\n } @else if $direction == right {\n @include caret-right;\n }\n }\n\n @if $direction == left {\n &::after {\n display: none;\n }\n\n &::before {\n display: inline-block;\n margin-right: $caret-spacing;\n vertical-align: $caret-vertical-align;\n content: \"\";\n @include caret-left;\n }\n }\n\n &:empty::after {\n margin-left: 0;\n }\n }\n}\n",
"// Pagination\n\n@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {\n .page-link {\n padding: $padding-y $padding-x;\n @include font-size($font-size);\n line-height: $line-height;\n }\n\n .page-item {\n &:first-child {\n .page-link {\n @include border-left-radius($border-radius);\n }\n }\n &:last-child {\n .page-link {\n @include border-right-radius($border-radius);\n }\n }\n }\n}\n",
"// Lists\n\n// Unstyled keeps list items block level, just removes default browser padding and list-style\n@mixin list-unstyled {\n padding-left: 0;\n list-style: none;\n}\n",
"// List Groups\n\n@mixin list-group-item-variant($state, $background, $color) {\n .list-group-item-#{$state} {\n color: $color;\n background-color: $background;\n\n &.list-group-item-action {\n @include hover-focus {\n color: $color;\n background-color: darken($background, 5%);\n }\n\n &.active {\n color: $white;\n background-color: $color;\n border-color: $color;\n }\n }\n }\n}\n",
"// Horizontal dividers\n//\n// Dividers (basically an hr) within dropdowns and nav lists\n\n@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {\n height: 0;\n margin: $margin-y 0;\n overflow: hidden;\n border-top: 1px solid $color;\n}\n",
"// Form control focus state\n//\n// Generate a customized focus state and for any input with the specified color,\n// which defaults to the `$input-focus-border-color` variable.\n//\n// We highly encourage you to not customize the default value, but instead use\n// this to tweak colors on an as-needed basis. This aesthetic change is based on\n// WebKit's default styles, but applicable to a wider range of browsers. Its\n// usability and accessibility should be taken into account with any change.\n//\n// Example usage: change the default blue border and shadow to white for better\n// contrast against a dark gray background.\n@mixin form-control-focus() {\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n outline: 0;\n // Avoid using mixin so we can pass custom focus shadow properly\n @if $enable-shadows {\n box-shadow: $input-box-shadow, $input-focus-box-shadow;\n } @else {\n box-shadow: $input-focus-box-shadow;\n }\n }\n}\n\n\n@mixin form-validation-state($state, $color, $icon) {\n .#{$state}-feedback {\n display: none;\n width: 100%;\n margin-top: $form-feedback-margin-top;\n @include font-size($form-feedback-font-size);\n color: $color;\n }\n\n .#{$state}-tooltip {\n position: absolute;\n top: 100%;\n z-index: 5;\n display: none;\n max-width: 100%; // Contain to parent when possible\n padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x;\n margin-top: .1rem;\n @include font-size($form-feedback-tooltip-font-size);\n line-height: $form-feedback-tooltip-line-height;\n color: color-yiq($color);\n background-color: rgba($color, $form-feedback-tooltip-opacity);\n @include border-radius($form-feedback-tooltip-border-radius);\n }\n\n .form-control {\n .was-validated &:#{$state},\n &.is-#{$state} {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-image: $icon;\n background-repeat: no-repeat;\n background-position: center right $input-height-inner-quarter;\n background-size: $input-height-inner-half $input-height-inner-half;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n // stylelint-disable-next-line selector-no-qualifying-type\n textarea.form-control {\n .was-validated &:#{$state},\n &.is-#{$state} {\n @if $enable-validation-icons {\n padding-right: $input-height-inner;\n background-position: top $input-height-inner-quarter right $input-height-inner-quarter;\n }\n }\n }\n\n .custom-select {\n .was-validated &:#{$state},\n &.is-#{$state} {\n border-color: $color;\n\n @if $enable-validation-icons {\n padding-right: $custom-select-feedback-icon-padding-right;\n background: $custom-select-background, $icon $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size;\n }\n\n &:focus {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n\n .form-control-file {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .form-check-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .form-check-label {\n color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n }\n }\n\n .custom-control-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .custom-control-label {\n color: $color;\n\n &::before {\n border-color: $color;\n }\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n\n &:checked {\n ~ .custom-control-label::before {\n border-color: lighten($color, 10%);\n @include gradient-bg(lighten($color, 10%));\n }\n }\n\n &:focus {\n ~ .custom-control-label::before {\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n\n &:not(:checked) ~ .custom-control-label::before {\n border-color: $color;\n }\n }\n }\n }\n\n // custom file\n .custom-file-input {\n .was-validated &:#{$state},\n &.is-#{$state} {\n ~ .custom-file-label {\n border-color: $color;\n }\n\n ~ .#{$state}-feedback,\n ~ .#{$state}-tooltip {\n display: block;\n }\n\n &:focus {\n ~ .custom-file-label {\n border-color: $color;\n box-shadow: 0 0 0 $input-focus-width rgba($color, .25);\n }\n }\n }\n }\n}\n",
"// Tables\n\n@mixin table-row-variant($state, $background, $border: null) {\n // Exact selectors below required to override `.table-striped` and prevent\n // inheritance to nested tables.\n .table-#{$state} {\n &,\n > th,\n > td {\n background-color: $background;\n }\n\n @if $border != null {\n th,\n td,\n thead th,\n tbody + tbody {\n border-color: $border;\n }\n }\n }\n\n // Hover states for `.table-hover`\n // Note: this is not available for cells or rows within `thead` or `tfoot`.\n .table-hover {\n $hover-background: darken($background, 5%);\n\n .table-#{$state} {\n @include hover {\n background-color: $hover-background;\n\n > td,\n > th {\n background-color: $hover-background;\n }\n }\n }\n }\n}\n",
"// stylelint-disable declaration-no-important\n\n// Contextual backgrounds\n\n@mixin bg-variant($parent, $color) {\n #{$parent} {\n background-color: $color !important;\n }\n a#{$parent},\n button#{$parent} {\n @include hover-focus {\n background-color: darken($color, 10%) !important;\n }\n }\n}\n\n@mixin bg-gradient-variant($parent, $color) {\n #{$parent} {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;\n }\n}\n",
"// stylelint-disable property-blacklist\n// Single side border-radius\n\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n @if $enable-rounded {\n border-radius: $radius;\n }\n @else if $fallback-border-radius != false {\n border-radius: $fallback-border-radius;\n }\n}\n\n@mixin border-top-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n border-top-right-radius: $radius;\n }\n}\n\n@mixin border-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: $radius;\n border-bottom-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: $radius;\n border-bottom-left-radius: $radius;\n }\n}\n\n@mixin border-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n border-bottom-left-radius: $radius;\n }\n}\n\n@mixin border-top-left-radius($radius) {\n @if $enable-rounded {\n border-top-left-radius: $radius;\n }\n}\n\n@mixin border-top-right-radius($radius) {\n @if $enable-rounded {\n border-top-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-right-radius($radius) {\n @if $enable-rounded {\n border-bottom-right-radius: $radius;\n }\n}\n\n@mixin border-bottom-left-radius($radius) {\n @if $enable-rounded {\n border-bottom-left-radius: $radius;\n }\n}\n",
"@mixin box-shadow($shadow...) {\n @if $enable-shadows {\n $result: ();\n\n @if (length($shadow) == 1) {\n // We can pass `@include box-shadow(none);`\n $result: $shadow;\n } @else {\n // Filter to avoid invalid properties for example `box-shadow: none, 1px 1px black;`\n @for $i from 1 through length($shadow) {\n @if nth($shadow, $i) != \"none\" {\n $result: append($result, nth($shadow, $i), \"comma\");\n }\n }\n }\n @if (length($result) > 0) {\n box-shadow: $result;\n }\n }\n}\n",
"// Gradients\n\n@mixin gradient-bg($color) {\n @if $enable-gradients {\n background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;\n } @else {\n background-color: $color;\n }\n}\n\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n background-repeat: repeat-x;\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n background-image: linear-gradient($deg, $start-color, $end-color);\n background-repeat: repeat-x;\n}\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n background-image: radial-gradient(circle, $inner-color, $outer-color);\n background-repeat: no-repeat;\n}\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n",
"// stylelint-disable property-blacklist\n@mixin transition($transition...) {\n @if $enable-transitions {\n @if length($transition) == 0 {\n transition: $transition-base;\n } @else {\n transition: $transition;\n }\n }\n\n @if $enable-prefers-reduced-motion-media-query {\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n}\n",
"@mixin clearfix() {\n &::after {\n display: block;\n clear: both;\n content: \"\";\n }\n}\n",
"// Framework grid generation\n//\n// Used only by Bootstrap to generate the correct number of grid classes given\n// any value of `$grid-columns`.\n\n@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {\n // Common properties for all breakpoints\n %grid-column {\n position: relative;\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n }\n\n @each $breakpoint in map-keys($breakpoints) {\n $infix: breakpoint-infix($breakpoint, $breakpoints);\n\n // Allow columns to stretch full width below their breakpoints\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @extend %grid-column;\n }\n }\n .col#{$infix},\n .col#{$infix}-auto {\n @extend %grid-column;\n }\n\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n // Provide basic `.col-{bp}` classes for equal-width flexbox columns\n .col#{$infix} {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\n }\n .col#{$infix}-auto {\n flex: 0 0 auto;\n width: auto;\n max-width: 100%; // Reset earlier grid tiers\n }\n\n @for $i from 1 through $columns {\n .col#{$infix}-#{$i} {\n @include make-col($i, $columns);\n }\n }\n\n .order#{$infix}-first { order: -1; }\n\n .order#{$infix}-last { order: $columns + 1; }\n\n @for $i from 0 through $columns {\n .order#{$infix}-#{$i} { order: $i; }\n }\n\n // `$columns - 1` because offsetting by the width of an entire row isn't possible\n @for $i from 0 through ($columns - 1) {\n @if not ($infix == \"\" and $i == 0) { // Avoid emitting useless .offset-0\n .offset#{$infix}-#{$i} {\n @include make-col-offset($i, $columns);\n }\n }\n }\n }\n }\n}\n",
"/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n\n@mixin make-container($gutter: $grid-gutter-width) {\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n margin-right: auto;\n margin-left: auto;\n}\n\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {\n @each $breakpoint, $container-max-width in $max-widths {\n @include media-breakpoint-up($breakpoint, $breakpoints) {\n max-width: $container-max-width;\n }\n }\n}\n\n@mixin make-row($gutter: $grid-gutter-width) {\n display: flex;\n flex-wrap: wrap;\n margin-right: -$gutter / 2;\n margin-left: -$gutter / 2;\n}\n\n@mixin make-col-ready($gutter: $grid-gutter-width) {\n position: relative;\n // Prevent columns from becoming too narrow when at smaller grid tiers by\n // always setting `width: 100%;`. This works because we use `flex` values\n // later on to override this initial width.\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n}\n\n@mixin make-col($size, $columns: $grid-columns) {\n flex: 0 0 percentage($size / $columns);\n // Add a `max-width` to ensure content within each column does not blow out\n // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n // do not appear to require this.\n max-width: percentage($size / $columns);\n}\n\n@mixin make-col-offset($size, $columns: $grid-columns) {\n $num: $size / $columns;\n margin-left: if($num == 0, 0, percentage($num));\n}\n",
"// stylelint-disable declaration-no-important\n\n@mixin float-left {\n float: left !important;\n @include deprecate(\"The `float-left` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-right {\n float: right !important;\n @include deprecate(\"The `float-right` mixin\", \"v4.3.0\", \"v5\");\n}\n@mixin float-none {\n float: none !important;\n @include deprecate(\"The `float-none` mixin\", \"v4.3.0\", \"v5\");\n}\n",
":root {\n // Custom variable values only support SassScript inside `#{}`.\n @each $color, $value in $colors {\n --#{$color}: #{$value};\n }\n\n @each $color, $value in $theme-colors {\n --#{$color}: #{$value};\n }\n\n @each $bp, $value in $grid-breakpoints {\n --breakpoint-#{$bp}: #{$value};\n }\n\n // Use `inspect` for lists so that quoted items keep the quotes.\n // See https://github.com/sass/sass/issues/2383#issuecomment-336349172\n --font-family-sans-serif: #{inspect($font-family-sans-serif)};\n --font-family-monospace: #{inspect($font-family-monospace)};\n}\n",
"// Responsive images (ensure images don't scale beyond their parents)\n//\n// This is purposefully opt-in via an explicit class rather than being the default for all `