-//

-// Base styles

-//

-

-.alert {

- position: relative;

- padding: $alert-padding-y $alert-padding-x;

- margin-bottom: $alert-margin-bottom;

- border: $alert-border-width solid transparent;

- @include border-radius($alert-border-radius);

-}

-

-// Headings for larger alerts

-.alert-heading {

- // Specified to prevent conflicts of changing $headings-color

- color: inherit;

-}

-

-// Provide class for links that match alerts

-.alert-link {

- font-weight: $alert-link-font-weight;

-}

-

-

-// Dismissible alerts

-//

-// Expand the right padding and account for the close button's positioning.

-

-.alert-dismissible {

- padding-right: ($close-font-size + $alert-padding-x * 2);

-

- // Adjust close link position

- .close {

- position: absolute;

- top: 0;

- right: 0;

- padding: $alert-padding-y $alert-padding-x;

- color: inherit;

- }

-}

-

-

-// Alternate styles

-//

-// Generate contextual modifier classes for colorizing the alert.

-

-@each $color, $value in $theme-colors {

- .alert-#{$color} {

- @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));

- }

-}

-// Base class

-//

-// Requires one of the contextual, color modifier classes for `color` and

-// `background-color`.

-

-.badge {

- display: inline-block;

- padding: $badge-padding-y $badge-padding-x;

- font-size: $badge-font-size;

- font-weight: $badge-font-weight;

- line-height: 1;

- text-align: center;

- white-space: nowrap;

- vertical-align: baseline;

- @include border-radius($badge-border-radius);

-

- // Empty badges collapse automatically

- &:empty {

- display: none;

- }

-}

-

-// Quick fix for badges in buttons

-.btn .badge {

- position: relative;

- top: -1px;

-}

-

-// Pill badges

-//

-// Make them extra rounded with a modifier to replace v3's badges.

-

-.badge-pill {

- padding-right: $badge-pill-padding-x;

- padding-left: $badge-pill-padding-x;

- @include border-radius($badge-pill-border-radius);

-}

-

-// Colors

-//

-// Contextual variations (linked badges get darker on :hover).

-

-@each $color, $value in $theme-colors {

- .badge-#{$color} {

- @include badge-variant($value);

- }

-}

-.breadcrumb {

- display: flex;

- flex-wrap: wrap;

- padding: $breadcrumb-padding-y $breadcrumb-padding-x;

- margin-bottom: $breadcrumb-margin-bottom;

- list-style: none;

- background-color: $breadcrumb-bg;

- @include border-radius($border-radius);

-}

-

-.breadcrumb-item {

- // The separator between breadcrumbs (by default, a forward-slash: "/")

- + .breadcrumb-item::before {

- display: inline-block; // Suppress underlining of the separator in modern browsers

- padding-right: $breadcrumb-item-padding;

- padding-left: $breadcrumb-item-padding;

- color: $breadcrumb-divider-color;

- content: "#{$breadcrumb-divider}";

- }

-

- // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built

- // without `<ul>`s. The `::before` pseudo-element generates an element

- // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.

- //

- // To trick IE into suppressing the underline, we give the pseudo-element an

- // underline and then immediately remove it.

- + .breadcrumb-item:hover::before {

- text-decoration: underline;

- }

- // stylelint-disable-next-line no-duplicate-selectors

- + .breadcrumb-item:hover::before {

- text-decoration: none;

- }

-

- &.active {

- color: $breadcrumb-active-color;

- }

-}

-// stylelint-disable selector-no-qualifying-type

-

-// Make the div behave like a button

-.btn-group,

-.btn-group-vertical {

- position: relative;

- display: inline-flex;

- vertical-align: middle; // match .btn alignment given font-size hack above

-

- > .btn {

- position: relative;

- flex: 0 1 auto;

-

- // Bring the hover, focused, and "active" buttons to the front to overlay

- // the borders properly

- @include hover {

- z-index: 1;

- }

- &:focus,

- &:active,

- &.active {

- z-index: 1;

- }

- }

-

- // Prevent double borders when buttons are next to each other

- .btn + .btn,

- .btn + .btn-group,

- .btn-group + .btn,

- .btn-group + .btn-group {

- margin-left: -$btn-border-width;

- }

-}

-

-// Optional: Group multiple button groups together for a toolbar

-.btn-toolbar {

- display: flex;

- flex-wrap: wrap;

- justify-content: flex-start;

-

- .input-group {

- width: auto;

- }

-}

-

-.btn-group {

- > .btn:first-child {

- margin-left: 0;

- }

-

- // Reset rounded corners

- > .btn:not(:last-child):not(.dropdown-toggle),

- > .btn-group:not(:last-child) > .btn {

- @include border-right-radius(0);

- }

-

- > .btn:not(:first-child),

- > .btn-group:not(:first-child) > .btn {

- @include border-left-radius(0);

- }

-}

-

-// Sizing

-//

-// Remix the default button sizing classes into new ones for easier manipulation.

-

-.btn-group-sm > .btn { @extend .btn-sm; }

-.btn-group-lg > .btn { @extend .btn-lg; }

-

-

-//

-// Split button dropdowns

-//

-

-.dropdown-toggle-split {

- padding-right: $btn-padding-x * .75;

- padding-left: $btn-padding-x * .75;

-

- &::after {

- margin-left: 0;

- }

-}

-

-.btn-sm + .dropdown-toggle-split {

- padding-right: $btn-padding-x-sm * .75;

- padding-left: $btn-padding-x-sm * .75;

-}

-

-.btn-lg + .dropdown-toggle-split {

- padding-right: $btn-padding-x-lg * .75;

- padding-left: $btn-padding-x-lg * .75;

-}

-

-

-// The clickable button for toggling the menu

-// Set the same inset shadow as the :active state

-.btn-group.show .dropdown-toggle {

- @include box-shadow($btn-active-box-shadow);

-

- // Show no shadow for `.btn-link` since it has no other button styles.

- &.btn-link {

- @include box-shadow(none);

- }

-}

-

-

-//

-// Vertical button groups

-//

-

-.btn-group-vertical {

- flex-direction: column;

- align-items: flex-start;

- justify-content: center;

-

- .btn,

- .btn-group {

- width: 100%;

- }

-

- > .btn + .btn,

- > .btn + .btn-group,

- > .btn-group + .btn,

- > .btn-group + .btn-group {

- margin-top: -$btn-border-width;

- margin-left: 0;

- }

-

- // Reset rounded corners

- > .btn:not(:last-child):not(.dropdown-toggle),

- > .btn-group:not(:last-child) > .btn {

- @include border-bottom-radius(0);

- }

-

- > .btn:not(:first-child),

- > .btn-group:not(:first-child) > .btn {

- @include border-top-radius(0);

- }

-}

-

-

-// Checkbox and radio options

-//

-// In order to support the browser's form validation feedback, powered by the

-// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use

-// `display: none;` or `visibility: hidden;` as that also hides the popover.

-// Simply visually hiding the inputs via `opacity` would leave them clickable in

-// certain cases which is prevented by using `clip` and `pointer-events`.

-// This way, we ensure a DOM element is visible to position the popover from.

-//

-// See https://github.com/twbs/bootstrap/pull/12794 and

-// https://github.com/twbs/bootstrap/pull/14559 for more information.

-

-.btn-group-toggle {

- > .btn,

- > .btn-group > .btn {

- margin-bottom: 0; // Override default `<label>` value

-

- input[type="radio"],

- input[type="checkbox"] {

- position: absolute;

- clip: rect(0, 0, 0, 0);

- pointer-events: none;

- }

- }

-}

-// stylelint-disable selector-no-qualifying-type

-

-//

-// Base styles

-//

-

-.btn {

- display: inline-block;

- font-weight: $btn-font-weight;

- text-align: center;

- white-space: nowrap;

- vertical-align: middle;

- user-select: none;

- border: $btn-border-width solid transparent;

- @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);

- @include transition($btn-transition);

-

- // Share hover and focus styles

- @include hover-focus {

- text-decoration: none;

- }

-

- &:focus,

- &.focus {

- outline: 0;

- box-shadow: $btn-focus-box-shadow;

- }

-

- // Disabled comes first so active can properly restyle

- &.disabled,

- &:disabled {

- opacity: $btn-disabled-opacity;

- @include box-shadow(none);

- }

-

- // Opinionated: add "hand" cursor to non-disabled .btn elements

- &:not(:disabled):not(.disabled) {

- cursor: pointer;

- }

-

- &:not(:disabled):not(.disabled):active,

- &:not(:disabled):not(.disabled).active {

- background-image: none;

- @include box-shadow($btn-active-box-shadow);

-

- &:focus {

- @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);

- }

- }

-}

-

-// Future-proof disabling of clicks on `<a>` elements

-a.btn.disabled,

-fieldset:disabled a.btn {

- pointer-events: none;

-}

-

-

-//

-// Alternate buttons

-//

-

-@each $color, $value in $theme-colors {

- .btn-#{$color} {

- @include button-variant($value, $value);

- }

-}

-

-@each $color, $value in $theme-colors {

- .btn-outline-#{$color} {

- @include button-outline-variant($value);

- }

-}

-

-

-//

-// Link buttons

-//

-

-// Make a button look and behave like a link

-.btn-link {

- font-weight: $font-weight-normal;

- color: $link-color;

- background-color: transparent;

-

- @include hover {

- color: $link-hover-color;

- text-decoration: $link-hover-decoration;

- background-color: transparent;

- border-color: transparent;

- }

-

- &:focus,

- &.focus {

- text-decoration: $link-hover-decoration;

- border-color: transparent;

- box-shadow: none;

- }

-

- &:disabled,

- &.disabled {

- color: $btn-link-disabled-color;

- }

-

- // No need for an active state here

-}

-

-

-//

-// Button Sizes

-//

-

-.btn-lg {

- @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);

-}

-

-.btn-sm {

- @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);

-}

-

-

-//

-// Block button

-//

-

-.btn-block {

- display: block;

- width: 100%;

-

- // Vertically space out multiple block buttons

- + .btn-block {

- margin-top: $btn-block-spacing-y;

- }

-}

-

-// Specificity overrides

-input[type="submit"],

-input[type="reset"],

-input[type="button"] {

- &.btn-block {

- width: 100%;

- }

-}

-//

-// Base styles

-//

-

-.card {

- position: relative;

- display: flex;

- flex-direction: column;

- min-width: 0;

- word-wrap: break-word;

- background-color: $card-bg;

- background-clip: border-box;

- border: $card-border-width solid $card-border-color;

- @include border-radius($card-border-radius);

-

- > hr {

- margin-right: 0;

- margin-left: 0;

- }

-

- > .list-group:first-child {

- .list-group-item:first-child {

- @include border-top-radius($card-border-radius);

- }

- }

-

- > .list-group:last-child {

- .list-group-item:last-child {

- @include border-bottom-radius($card-border-radius);

- }

- }

-}

-

-.card-body {

- // Enable `flex-grow: 1` for decks and groups so that card blocks take up

- // as much space as possible, ensuring footers are aligned to the bottom.

- flex: 1 1 auto;

- padding: $card-spacer-x;

-}

-

-.card-title {

- margin-bottom: $card-spacer-y;

-}

-

-.card-subtitle {

- margin-top: -($card-spacer-y / 2);

- margin-bottom: 0;

-}

-

-.card-text:last-child {

- margin-bottom: 0;

-}

-

-.card-link {

- @include hover {

- text-decoration: none;

- }

-

- + .card-link {

- margin-left: $card-spacer-x;

- }

-}

-

-//

-// Optional textual caps

-//

-

-.card-header {

- padding: $card-spacer-y $card-spacer-x;

- margin-bottom: 0; // Removes the default margin-bottom of <hN>

- background-color: $card-cap-bg;

- border-bottom: $card-border-width solid $card-border-color;

-

- &:first-child {

- @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);

- }

-

- + .list-group {

- .list-group-item:first-child {

- border-top: 0;

- }

- }

-}

-

-.card-footer {

- padding: $card-spacer-y $card-spacer-x;

- background-color: $card-cap-bg;

- border-top: $card-border-width solid $card-border-color;

-

- &:last-child {

- @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);

- }

-}

-

-

-//

-// Header navs

-//

-

-.card-header-tabs {

- margin-right: -($card-spacer-x / 2);

- margin-bottom: -$card-spacer-y;

- margin-left: -($card-spacer-x / 2);

- border-bottom: 0;

-}

-

-.card-header-pills {

- margin-right: -($card-spacer-x / 2);

- margin-left: -($card-spacer-x / 2);

-}

-

-// Card image

-.card-img-overlay {

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- padding: $card-img-overlay-padding;

-}

-

-.card-img {

- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch

- @include border-radius($card-inner-border-radius);

-}

-

-// Card image caps

-.card-img-top {

- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch

- @include border-top-radius($card-inner-border-radius);

-}

-

-.card-img-bottom {

- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch

- @include border-bottom-radius($card-inner-border-radius);

-}

-

-

-// Card deck

-

-.card-deck {

- display: flex;

- flex-direction: column;

-

- .card {

- margin-bottom: $card-deck-margin;

- }

-

- @include media-breakpoint-up(sm) {

- flex-flow: row wrap;

- margin-right: -$card-deck-margin;

- margin-left: -$card-deck-margin;

-

- .card {

- display: flex;

- // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

- flex: 1 0 0%;

- flex-direction: column;

- margin-right: $card-deck-margin;

- margin-bottom: 0; // Override the default

- margin-left: $card-deck-margin;

- }

- }

-}

-

-

-//

-// Card groups

-//

-

-.card-group {

- display: flex;

- flex-direction: column;

-

- // The child selector allows nested `.card` within `.card-group`

- // to display properly.

- > .card {

- margin-bottom: $card-group-margin;

- }

-

- @include media-breakpoint-up(sm) {

- flex-flow: row wrap;

- // The child selector allows nested `.card` within `.card-group`

- // to display properly.

- > .card {

- // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

- flex: 1 0 0%;

- margin-bottom: 0;

-

- + .card {

- margin-left: 0;

- border-left: 0;

- }

-

- // Handle rounded corners

- @if $enable-rounded {

- &:first-child {

- @include border-right-radius(0);

-

- .card-img-top,

- .card-header {

- border-top-right-radius: 0;

- }

- .card-img-bottom,

- .card-footer {

- border-bottom-right-radius: 0;

- }

- }

-

- &:last-child {

- @include border-left-radius(0);

-

- .card-img-top,

- .card-header {

- border-top-left-radius: 0;

- }

- .card-img-bottom,

- .card-footer {

- border-bottom-left-radius: 0;

- }

- }

-

- &:only-child {

- @include border-radius($card-border-radius);

-

- .card-img-top,

- .card-header {

- @include border-top-radius($card-border-radius);

- }

- .card-img-bottom,

- .card-footer {

- @include border-bottom-radius($card-border-radius);

- }

- }

-

- &:not(:first-child):not(:last-child):not(:only-child) {

- @include border-radius(0);

-

- .card-img-top,

- .card-img-bottom,

- .card-header,

- .card-footer {

- @include border-radius(0);

- }

- }

- }

- }

- }

-}

-

-

-//

-// Columns

-//

-

-.card-columns {

- .card {

- margin-bottom: $card-columns-margin;

- }

-

- @include media-breakpoint-up(sm) {

- column-count: $card-columns-count;

- column-gap: $card-columns-gap;

-

- .card {

- display: inline-block; // Don't let them vertically span multiple columns

- width: 100%; // Don't let their width change

- }

- }

-}

-// Wrapper for the slide container and indicators

-.carousel {

- position: relative;

-}

-

-.carousel-inner {

- position: relative;

- width: 100%;

- overflow: hidden;

-}

-

-.carousel-item {

- position: relative;

- display: none;

- align-items: center;

- width: 100%;

- @include transition($carousel-transition);

- backface-visibility: hidden;

- perspective: 1000px;

-}

-

-.carousel-item.active,

-.carousel-item-next,

-.carousel-item-prev {

- display: block;

-}

-

-.carousel-item-next,

-.carousel-item-prev {

- position: absolute;

- top: 0;

-}

-

-// CSS3 transforms when supported by the browser

-.carousel-item-next.carousel-item-left,

-.carousel-item-prev.carousel-item-right {

- transform: translateX(0);

-

- @supports (transform-style: preserve-3d) {

- transform: translate3d(0, 0, 0);

- }

-}

-

-.carousel-item-next,

-.active.carousel-item-right {

- transform: translateX(100%);

-

- @supports (transform-style: preserve-3d) {

- transform: translate3d(100%, 0, 0);

- }

-}

-

-.carousel-item-prev,

-.active.carousel-item-left {

- transform: translateX(-100%);

-

- @supports (transform-style: preserve-3d) {

- transform: translate3d(-100%, 0, 0);

- }

-}

-

-

-//

-// Left/right controls for nav

-//

-

-.carousel-control-prev,

-.carousel-control-next {

- position: absolute;

- top: 0;

- bottom: 0;

- // Use flex for alignment (1-3)

- display: flex; // 1. allow flex styles

- align-items: center; // 2. vertically center contents

- justify-content: center; // 3. horizontally center contents

- width: $carousel-control-width;

- color: $carousel-control-color;

- text-align: center;

- opacity: $carousel-control-opacity;

- // We can't have a transition here because WebKit cancels the carousel

- // animation if you trip this while in the middle of another animation.

-

- // Hover/focus state

- @include hover-focus {

- color: $carousel-control-color;

- text-decoration: none;

- outline: 0;

- opacity: .9;

- }

-}

-.carousel-control-prev {

- left: 0;

- @if $enable-gradients {

- background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));

- }

-}

-.carousel-control-next {

- right: 0;

- @if $enable-gradients {

- background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));

- }

-}

-

-// Icons for within

-.carousel-control-prev-icon,

-.carousel-control-next-icon {

- display: inline-block;

- width: $carousel-control-icon-width;

- height: $carousel-control-icon-width;

- background: transparent no-repeat center center;

- background-size: 100% 100%;

-}

-.carousel-control-prev-icon {

- background-image: $carousel-control-prev-icon-bg;

-}

-.carousel-control-next-icon {

- background-image: $carousel-control-next-icon-bg;

-}

-

-

-// Optional indicator pips

-//

-// Add an ordered list with the following class and add a list item for each

-// slide your carousel holds.

-

-.carousel-indicators {

- position: absolute;

- right: 0;

- bottom: 10px;

- left: 0;

- z-index: 15;

- display: flex;

- justify-content: center;

- padding-left: 0; // override <ol> default

- // Use the .carousel-control's width as margin so we don't overlay those

- margin-right: $carousel-control-width;

- margin-left: $carousel-control-width;

- list-style: none;

-

- li {

- position: relative;

- flex: 0 1 auto;

- width: $carousel-indicator-width;

- height: $carousel-indicator-height;

- margin-right: $carousel-indicator-spacer;

- margin-left: $carousel-indicator-spacer;

- text-indent: -999px;

- background-color: rgba($carousel-indicator-active-bg, .5);

-

- // Use pseudo classes to increase the hit area by 10px on top and bottom.

- &::before {

- position: absolute;

- top: -10px;

- left: 0;

- display: inline-block;

- width: 100%;

- height: 10px;

- content: "";

- }

- &::after {

- position: absolute;

- bottom: -10px;

- left: 0;

- display: inline-block;

- width: 100%;

- height: 10px;

- content: "";

- }

- }

-

- .active {

- background-color: $carousel-indicator-active-bg;

- }

-}

-

-

-// Optional captions

-//

-//

-

-.carousel-caption {

- position: absolute;

- right: ((100% - $carousel-caption-width) / 2);

- bottom: 20px;

- left: ((100% - $carousel-caption-width) / 2);

- z-index: 10;

- padding-top: 20px;

- padding-bottom: 20px;

- color: $carousel-caption-color;

- text-align: center;

-}

-.close {

- float: right;

- font-size: $close-font-size;

- font-weight: $close-font-weight;

- line-height: 1;

- color: $close-color;

- text-shadow: $close-text-shadow;

- opacity: .5;

-

- @include hover-focus {

- color: $close-color;

- text-decoration: none;

- opacity: .75;

- }

-

- // Opinionated: add "hand" cursor to non-disabled .close elements

- &:not(:disabled):not(.disabled) {

- cursor: pointer;

- }

-}

-

-// Additional properties for button version

-// iOS requires the button element instead of an anchor tag.

-// If you want the anchor version, it requires `href="#"`.

-// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

-

-// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type

-button.close {

- padding: 0;

- background-color: transparent;

- border: 0;

- -webkit-appearance: none;

-}

-// stylelint-enable

-// Inline and block code styles

-code,

-kbd,

-pre,

-samp {

- font-family: $font-family-monospace;

-}

-

-// Inline code

-code {

- font-size: $code-font-size;

- color: $code-color;

- word-break: break-word;

-

- // Streamline the style when inside anchors to avoid broken underline and more

- a > & {

- color: inherit;

- }

-}

-

-// User input typically entered via keyboard

-kbd {

- padding: $kbd-padding-y $kbd-padding-x;

- font-size: $kbd-font-size;

- color: $kbd-color;

- background-color: $kbd-bg;

- @include border-radius($border-radius-sm);

- @include box-shadow($kbd-box-shadow);

-

- kbd {

- padding: 0;

- font-size: 100%;

- font-weight: $nested-kbd-font-weight;

- @include box-shadow(none);

- }

-}

-

-// Blocks of code

-pre {

- display: block;

- font-size: $code-font-size;

- color: $pre-color;

-

- // Account for some code outputs that place code tags in pre tags

- code {

- font-size: inherit;

- color: inherit;

- word-break: normal;

- }

-}

-

-// Enable scrollable blocks of code

-.pre-scrollable {

- max-height: $pre-scrollable-max-height;

- overflow-y: scroll;

-}

-// Embedded icons from Open Iconic.

-// Released under MIT and copyright 2014 Waybury.

-// https://useiconic.com/open

-

-

-// Checkboxes and radios

-//

-// Base class takes care of all the key behavioral aspects.

-

-.custom-control {

- position: relative;

- display: block;

- min-height: (1rem * $line-height-base);

- padding-left: $custom-control-gutter;

-}

-

-.custom-control-inline {

- display: inline-flex;

- margin-right: $custom-control-spacer-x;

-}

-

-.custom-control-input {

- position: absolute;

- z-index: -1; // Put the input behind the label so it doesn't overlay text

- opacity: 0;

-

- &:checked ~ .custom-control-label::before {

- color: $custom-control-indicator-checked-color;

- @include gradient-bg($custom-control-indicator-checked-bg);

- @include box-shadow($custom-control-indicator-checked-box-shadow);

- }

-

- &:focus ~ .custom-control-label::before {

- // the mixin is not used here to make sure there is feedback

- box-shadow: $custom-control-indicator-focus-box-shadow;

- }

-

- &:active ~ .custom-control-label::before {

- color: $custom-control-indicator-active-color;

- background-color: $custom-control-indicator-active-bg;

- @include box-shadow($custom-control-indicator-active-box-shadow);

- }

-

- &:disabled {

- ~ .custom-control-label {

- color: $custom-control-label-disabled-color;

-

- &::before {

- background-color: $custom-control-indicator-disabled-bg;

- }

- }

- }

-}

-

-// Custom control indicators

-//

-// Build the custom controls out of psuedo-elements.

-

-.custom-control-label {

- margin-bottom: 0;

-

- // Background-color and (when enabled) gradient

- &::before {

- position: absolute;

- top: (($line-height-base - $custom-control-indicator-size) / 2);

- left: 0;

- display: block;

- width: $custom-control-indicator-size;

- height: $custom-control-indicator-size;

- pointer-events: none;

- content: "";

- user-select: none;

- background-color: $custom-control-indicator-bg;

- @include box-shadow($custom-control-indicator-box-shadow);

- }

-

- // Foreground (icon)

- &::after {

- position: absolute;

- top: (($line-height-base - $custom-control-indicator-size) / 2);

- left: 0;

- display: block;

- width: $custom-control-indicator-size;

- height: $custom-control-indicator-size;

- content: "";

- background-repeat: no-repeat;

- background-position: center center;

- background-size: $custom-control-indicator-bg-size;

- }

-}

-

-

-// Checkboxes

-//

-// Tweak just a few things for checkboxes.

-

-.custom-checkbox {

- .custom-control-label::before {

- @include border-radius($custom-checkbox-indicator-border-radius);

- }

-

- .custom-control-input:checked ~ .custom-control-label {

- &::before {

- @include gradient-bg($custom-control-indicator-checked-bg);

- }

- &::after {

- background-image: $custom-checkbox-indicator-icon-checked;

- }

- }

-

- .custom-control-input:indeterminate ~ .custom-control-label {

- &::before {

- @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);

- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);

- }

- &::after {

- background-image: $custom-checkbox-indicator-icon-indeterminate;

- }

- }

-

- .custom-control-input:disabled {

- &:checked ~ .custom-control-label::before {

- background-color: $custom-control-indicator-checked-disabled-bg;

- }

- &:indeterminate ~ .custom-control-label::before {

- background-color: $custom-control-indicator-checked-disabled-bg;

- }

- }

-}

-

-// Radios

-//

-// Tweak just a few things for radios.

-

-.custom-radio {

- .custom-control-label::before {

- border-radius: $custom-radio-indicator-border-radius;

- }

-

- .custom-control-input:checked ~ .custom-control-label {

- &::before {

- @include gradient-bg($custom-control-indicator-checked-bg);

- }

- &::after {

- background-image: $custom-radio-indicator-icon-checked;

- }

- }

-

- .custom-control-input:disabled {

- &:checked ~ .custom-control-label::before {

- background-color: $custom-control-indicator-checked-disabled-bg;

- }

- }

-}

-

-

-// Select

-//

-// Replaces the browser default select with a custom one, mostly pulled from

-// http://primercss.io.

-//

-

-.custom-select {

- display: inline-block;

- width: 100%;

- height: $custom-select-height;

- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;

- line-height: $custom-select-line-height;

- color: $custom-select-color;

- vertical-align: middle;

- background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;

- background-size: $custom-select-bg-size;

- border: $custom-select-border-width solid $custom-select-border-color;

- @if $enable-rounded {

- border-radius: $custom-select-border-radius;

- } @else {

- border-radius: 0;

- }

- appearance: none;

-

- &:focus {

- border-color: $custom-select-focus-border-color;

- outline: 0;

- box-shadow: $custom-select-focus-box-shadow;

-

- &::-ms-value {

- // For visual consistency with other platforms/browsers,

- // suppress the default white text on blue background highlight given to

- // the selected option text when the (still closed) <select> receives focus

- // in IE and (under certain conditions) Edge.

- // See https://github.com/twbs/bootstrap/issues/19398.

- color: $input-color;

- background-color: $input-bg;

- }

- }

-

- &[multiple],

- &[size]:not([size="1"]) {

- height: auto;

- padding-right: $custom-select-padding-x;

- background-image: none;

- }

-

- &:disabled {

- color: $custom-select-disabled-color;

- background-color: $custom-select-disabled-bg;

- }

-

- // Hides the default caret in IE11

- &::-ms-expand {

- opacity: 0;

- }

-}

-

-.custom-select-sm {

- height: $custom-select-height-sm;

- padding-top: $custom-select-padding-y;

- padding-bottom: $custom-select-padding-y;

- font-size: $custom-select-font-size-sm;

-}

-

-.custom-select-lg {

- height: $custom-select-height-lg;

- padding-top: $custom-select-padding-y;

- padding-bottom: $custom-select-padding-y;

- font-size: $custom-select-font-size-lg;

-}

-

-

-// File

-//

-// Custom file input.

-

-.custom-file {

- position: relative;

- display: inline-block;

- width: 100%;

- height: $custom-file-height;

- margin-bottom: 0;

-}

-

-.custom-file-input {

- position: relative;

- z-index: 2;

- width: 100%;

- height: $custom-file-height;

- margin: 0;

- opacity: 0;

-

- &:focus ~ .custom-file-control {

- border-color: $custom-file-focus-border-color;

- box-shadow: $custom-file-focus-box-shadow;

-

- &::before {

- border-color: $custom-file-focus-border-color;

- }

- }

-

- @each $lang, $value in $custom-file-text {

- &:lang(#{$lang}) ~ .custom-file-label::after {

- content: $value;

- }

- }

-}

-

-.custom-file-label {

- position: absolute;

- top: 0;

- right: 0;

- left: 0;

- z-index: 1;

- height: $custom-file-height;

- padding: $custom-file-padding-y $custom-file-padding-x;

- line-height: $custom-file-line-height;

- color: $custom-file-color;

- background-color: $custom-file-bg;

- border: $custom-file-border-width solid $custom-file-border-color;

- @include border-radius($custom-file-border-radius);

- @include box-shadow($custom-file-box-shadow);

-

- &::after {

- position: absolute;

- top: 0;

- right: 0;

- bottom: 0;

- z-index: 3;

- display: block;

- height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);

- padding: $custom-file-padding-y $custom-file-padding-x;

- line-height: $custom-file-line-height;

- color: $custom-file-button-color;

- content: "Browse";

- @include gradient-bg($custom-file-button-bg);

- border-left: $custom-file-border-width solid $custom-file-border-color;

- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);

- }

-}

-// The dropdown wrapper (`<div>`)

-.dropup,

-.dropdown {

- position: relative;

-}

-

-.dropdown-toggle {

- // Generate the caret automatically

- @include caret;

-}

-

-// The dropdown menu

-.dropdown-menu {

- position: absolute;

- top: 100%;

- left: 0;

- z-index: $zindex-dropdown;

- display: none; // none by default, but block on "open" of the menu

- float: left;

- min-width: $dropdown-min-width;

- padding: $dropdown-padding-y 0;

- margin: $dropdown-spacer 0 0; // override default ul

- font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues

- color: $body-color;

- text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)

- list-style: none;

- background-color: $dropdown-bg;

- background-clip: padding-box;

- border: $dropdown-border-width solid $dropdown-border-color;

- @include border-radius($dropdown-border-radius);

- @include box-shadow($dropdown-box-shadow);

-}

-

-// Allow for dropdowns to go bottom up (aka, dropup-menu)

-// Just add .dropup after the standard .dropdown class and you're set.

-.dropup {

- .dropdown-menu {

- margin-top: 0;

- margin-bottom: $dropdown-spacer;

- }

-

- .dropdown-toggle {

- @include caret(up);

- }

-}

-

-.dropright {

- .dropdown-menu {

- margin-top: 0;

- margin-left: $dropdown-spacer;

- }

-

- .dropdown-toggle {

- @include caret(right);

- &::after {

- vertical-align: 0;

- }

- }

-}

-

-.dropleft {

- .dropdown-menu {

- margin-top: 0;

- margin-right: $dropdown-spacer;

- }

-

- .dropdown-toggle {

- @include caret(left);

- &::before {

- vertical-align: 0;

- }

- }

-}

-

-// Dividers (basically an `<hr>`) within the dropdown

-.dropdown-divider {

- @include nav-divider($dropdown-divider-bg);

-}

-

-// Links, buttons, and more within the dropdown menu

-//

-// `<button>`-specific styles are denoted with `// For <button>s`

-.dropdown-item {

- display: block;

- width: 100%; // For `<button>`s

- padding: $dropdown-item-padding-y $dropdown-item-padding-x;

- clear: both;

- font-weight: $font-weight-normal;

- color: $dropdown-link-color;

- text-align: inherit; // For `<button>`s

- white-space: nowrap; // prevent links from randomly breaking onto new lines

- background-color: transparent; // For `<button>`s

- border: 0; // For `<button>`s

-

- @include hover-focus {

- color: $dropdown-link-hover-color;

- text-decoration: none;

- @include gradient-bg($dropdown-link-hover-bg);

- }

-

- &.active,

- &:active {

- color: $dropdown-link-active-color;

- text-decoration: none;

- @include gradient-bg($dropdown-link-active-bg);

- }

-

- &.disabled,

- &:disabled {

- color: $dropdown-link-disabled-color;

- background-color: transparent;

- // Remove CSS gradients if they're enabled

- @if $enable-gradients {

- background-image: none;

- }

- }

-}

-

-.dropdown-menu.show {

- display: block;

-}

-

-// Dropdown section headers

-.dropdown-header {

- display: block;

- padding: $dropdown-padding-y $dropdown-item-padding-x;

- margin-bottom: 0; // for use with heading elements

- font-size: $font-size-sm;

- color: $dropdown-header-color;

- white-space: nowrap; // as with > li > a

-}

-// stylelint-disable selector-no-qualifying-type

-

-//

-// Textual form controls

-//

-

-.form-control {

- display: block;

- width: 100%;

- padding: $input-padding-y $input-padding-x;

- font-size: $font-size-base;

- line-height: $input-line-height;

- color: $input-color;

- background-color: $input-bg;

- background-clip: padding-box;

- border: $input-border-width solid $input-border-color;

-

- // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.

- @if $enable-rounded {

- // Manually use the if/else instead of the mixin to account for iOS override

- border-radius: $input-border-radius;

- } @else {

- // Otherwise undo the iOS default

- border-radius: 0;

- }

-

- @include box-shadow($input-box-shadow);

- @include transition($input-transition);

-

- // Unstyle the caret on `<select>`s in IE10+.

- &::-ms-expand {

- background-color: transparent;

- border: 0;

- }

-

- // Customize the `:focus` state to imitate native WebKit styles.

- @include form-control-focus();

-

- // Placeholder

- &::placeholder {

- color: $input-placeholder-color;

- // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.

- opacity: 1;

- }

-

- // Disabled and read-only inputs

- //

- // HTML5 says that controls under a fieldset > legend:first-child won't be

- // disabled if the fieldset is disabled. Due to implementation difficulty, we

- // don't honor that edge case; we style them as disabled anyway.

- &:disabled,

- &[readonly] {

- background-color: $input-disabled-bg;

- // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.

- opacity: 1;

- }

-}

-

-select.form-control {

- &:not([size]):not([multiple]) {

- height: $input-height;

- }

-

- &:focus::-ms-value {

- // Suppress the nested default white text on blue background highlight given to

- // the selected option text when the (still closed) <select> receives focus

- // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to

- // match the appearance of the native widget.

- // See https://github.com/twbs/bootstrap/issues/19398.

- color: $input-color;

- background-color: $input-bg;

- }

-}

-

-// Make file inputs better match text inputs by forcing them to new lines.

-.form-control-file,

-.form-control-range {

- display: block;

- width: 100%;

-}

-

-

-//

-// Labels

-//

-

-// For use with horizontal and inline forms, when you need the label (or legend)

-// text to align with the form controls.

-.col-form-label {

- padding-top: calc(#{$input-padding-y} + #{$input-border-width});

- padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});

- margin-bottom: 0; // Override the `<label>/<legend>` default

- font-size: inherit; // Override the `<legend>` default

- line-height: $input-line-height;

-}

-

-.col-form-label-lg {

- padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});

- padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});

- font-size: $font-size-lg;

- line-height: $input-line-height-lg;

-}

-

-.col-form-label-sm {

- padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});

- padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});

- font-size: $font-size-sm;

- line-height: $input-line-height-sm;

-}

-

-

-// Readonly controls as plain text

-//

-// Apply class to a readonly input to make it appear like regular plain

-// text (without any border, background color, focus indicator)

-

-.form-control-plaintext {

- display: block;

- width: 100%;

- padding-top: $input-padding-y;

- padding-bottom: $input-padding-y;

- margin-bottom: 0; // match inputs if this class comes on inputs with default margins

- line-height: $input-line-height;

- background-color: transparent;

- border: solid transparent;

- border-width: $input-border-width 0;

-

- &.form-control-sm,

- &.form-control-lg {

- padding-right: 0;

- padding-left: 0;

- }

-}

-

-

-// Form control sizing

-//

-// Build on `.form-control` with modifier classes to decrease or increase the

-// height and font-size of form controls.

-//

-// The `.form-group-* form-control` variations are sadly duplicated to avoid the

-// issue documented in https://github.com/twbs/bootstrap/issues/15074.

-

-.form-control-sm {

- padding: $input-padding-y-sm $input-padding-x-sm;

- font-size: $font-size-sm;

- line-height: $input-line-height-sm;

- @include border-radius($input-border-radius-sm);

-}

-

-select.form-control-sm {

- &:not([size]):not([multiple]) {

- height: $input-height-sm;

- }

-}

-

-.form-control-lg {

- padding: $input-padding-y-lg $input-padding-x-lg;

- font-size: $font-size-lg;

- line-height: $input-line-height-lg;

- @include border-radius($input-border-radius-lg);

-}

-

-select.form-control-lg {

- &:not([size]):not([multiple]) {

- height: $input-height-lg;

- }

-}

-

-

-// Form groups

-//

-// Designed to help with the organization and spacing of vertical forms. For

-// horizontal forms, use the predefined grid classes.

-

-.form-group {

- margin-bottom: $form-group-margin-bottom;

-}

-

-.form-text {

- display: block;

- margin-top: $form-text-margin-top;

-}

-

-

-// Form grid

-//

-// Special replacement for our grid system's `.row` for tighter form layouts.

-

-.form-row {

- display: flex;

- flex-wrap: wrap;

- margin-right: -5px;

- margin-left: -5px;

-

- > .col,

- > [class*="col-"] {

- padding-right: 5px;

- padding-left: 5px;

- }

-}

-

-

-// Checkboxes and radios

-//

-// Indent the labels to position radios/checkboxes as hanging controls.

-

-.form-check {

- position: relative;

- display: block;

- padding-left: $form-check-input-gutter;

-}

-

-.form-check-input {

- position: absolute;

- margin-top: $form-check-input-margin-y;

- margin-left: -$form-check-input-gutter;

-

- &:disabled ~ .form-check-label {

- color: $text-muted;

- }

-}

-

-.form-check-label {

- margin-bottom: 0; // Override default `<label>` bottom margin

-}

-

-.form-check-inline {

- display: inline-flex;

- align-items: center;

- padding-left: 0; // Override base .form-check

- margin-right: $form-check-inline-margin-x;

-

- // Undo .form-check-input defaults and add some `margin-right`.

- .form-check-input {

- position: static;

- margin-top: 0;

- margin-right: $form-check-inline-input-margin-x;

- margin-left: 0;

- }

-}

-

-

-// Form validation

-//

-// Provide feedback to users when form field values are valid or invalid. Works

-// primarily for client-side validation via scoped `:invalid` and `:valid`

-// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for

-// server side validation.

-

-@include form-validation-state("valid", $form-feedback-valid-color);

-@include form-validation-state("invalid", $form-feedback-invalid-color);

-

-// Inline forms

-//

-// Make forms appear inline(-block) by adding the `.form-inline` class. Inline

-// forms begin stacked on extra small (mobile) devices and then go inline when

-// viewports reach <768px.

-//

-// Requires wrapping inputs and labels with `.form-group` for proper display of

-// default HTML form controls and our custom form controls (e.g., input groups).

-

-.form-inline {

- display: flex;

- flex-flow: row wrap;

- align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)

-

- // Because we use flex, the initial sizing of checkboxes is collapsed and

- // doesn't occupy the full-width (which is what we want for xs grid tier),

- // so we force that here.

- .form-check {

- width: 100%;

- }

-

- // Kick in the inline

- @include media-breakpoint-up(sm) {

- label {

- display: flex;

- align-items: center;

- justify-content: center;

- margin-bottom: 0;

- }

-

- // Inline-block all the things for "inline"

- .form-group {

- display: flex;

- flex: 0 0 auto;

- flex-flow: row wrap;

- align-items: center;

- margin-bottom: 0;

- }

-

- // Allow folks to *not* use `.form-group`

- .form-control {

- display: inline-block;

- width: auto; // Prevent labels from stacking above inputs in `.form-group`

- vertical-align: middle;

- }

-

- // Make static controls behave like regular ones

- .form-control-plaintext {

- display: inline-block;

- }

-

- .input-group {

- width: auto;

- }

-

- // Remove default margin on radios/checkboxes that were used for stacking, and

- // then undo the floating of radios and checkboxes to match.

- .form-check {

- display: flex;

- align-items: center;

- justify-content: center;

- width: auto;

- padding-left: 0;

- }

- .form-check-input {

- position: relative;

- margin-top: 0;

- margin-right: $form-check-input-margin-x;

- margin-left: 0;

- }

-

- .custom-control {

- align-items: center;

- justify-content: center;

- }

- .custom-control-label {

- margin-bottom: 0;

- }

- }

-}

-// Bootstrap functions

-//

-// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.

-

-// Ascending

-// Used to evaluate Sass maps like our grid breakpoints.

-@mixin _assert-ascending($map, $map-name) {

- $prev-key: null;

- $prev-num: null;

- @each $key, $num in $map {

- @if $prev-num == null {

- // Do nothing

- } @else if not comparable($prev-num, $num) {

- @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}' !";

- } @else if $prev-num >= $num {

- @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}' !";

- }

- $prev-key: $key;

- $prev-num: $num;

- }

-}

-

-// Starts at zero

-// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.

-@mixin _assert-starts-at-zero($map) {

- $values: map-values($map);

- $first-value: nth($values, 1);

- @if $first-value != 0 {

- @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";

- }

-}

-

-// Replace `$search` with `$replace` in `$string`

-// Used on our SVG icon backgrounds for custom forms.

-//

-// @author Hugo Giraudel

-// @param {String} $string - Initial string

-// @param {String} $search - Substring to replace

-// @param {String} $replace ('') - New value

-// @return {String} - Updated string

-@function str-replace($string, $search, $replace: "") {

- $index: str-index($string, $search);

-

- @if $index {

- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);

- }

-

- @return $string;

-}

-

-// Color contrast

-@function color-yiq($color) {

- $r: red($color);

- $g: green($color);

- $b: blue($color);

-

- $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

-

- @if ($yiq >= $yiq-contrasted-threshold) {

- @return $yiq-text-dark;

- } @else {

- @return $yiq-text-light;

- }

-}

-

-// Retrieve color Sass maps

-@function color($key: "blue") {

- @return map-get($colors, $key);

-}

-

-@function theme-color($key: "primary") {

- @return map-get($theme-colors, $key);

-}

-

-@function gray($key: "100") {

- @return map-get($grays, $key);

-}

-

-// Request a theme color level

-@function theme-color-level($color-name: "primary", $level: 0) {

- $color: theme-color($color-name);

- $color-base: if($level > 0, #000, #fff);

- $level: abs($level);

-

- @return mix($color-base, $color, $level * $theme-color-interval);

-}

-// Container widths

-//

-// Set the container width, and override it for fixed navbars in media queries.

-

-@if $enable-grid-classes {

- .container {

- @include make-container();

- @include make-container-max-widths();

- }

-}

-

-// Fluid container

-//

-// Utilizes the mixin meant for fixed width containers, but with 100% width for

-// fluid, full width layouts.

-

-@if $enable-grid-classes {

- .container-fluid {

- @include make-container();

- }

-}

-

-// Row

-//

-// Rows contain and clear the floats of your columns.

-

-@if $enable-grid-classes {

- .row {

- @include make-row();

- }

-

- // Remove the negative margin from default .row, then the horizontal padding

- // from all immediate children columns (to prevent runaway style inheritance).

- .no-gutters {

- margin-right: 0;

- margin-left: 0;

-

- > .col,

- > [class*="col-"] {

- padding-right: 0;

- padding-left: 0;

- }

- }

-}

-

-// Columns

-//

-// Common styles for small and large grid columns

-

-@if $enable-grid-classes {

- @include make-grid-columns();

-}

-// Responsive images (ensure images don't scale beyond their parents)

-//

-// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.

-// We previously tried the "images are responsive by default" approach in Bootstrap v2,

-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)

-// which weren't expecting the images within themselves to be involuntarily resized.

-// See also https://github.com/twbs/bootstrap/issues/18178

-.img-fluid {

- @include img-fluid;

-}

-

-

-// Image thumbnails

-.img-thumbnail {

- padding: $thumbnail-padding;

- background-color: $thumbnail-bg;

- border: $thumbnail-border-width solid $thumbnail-border-color;

- @include border-radius($thumbnail-border-radius);

- @include box-shadow($thumbnail-box-shadow);

-

- // Keep them at most 100% wide

- @include img-fluid;

-}

-

-//

-// Figures

-//

-

-.figure {

- // Ensures the caption's text aligns with the image.

- display: inline-block;

-}

-

-.figure-img {

- margin-bottom: ($spacer / 2);

- line-height: 1;

-}

-

-.figure-caption {

- font-size: $figure-caption-font-size;

- color: $figure-caption-color;

-}

-// stylelint-disable selector-no-qualifying-type

-

-//

-// Base styles

-//

-

-.input-group {

- position: relative;

- display: flex;

- flex-wrap: wrap; // For form validation feedback

- align-items: stretch;

- width: 100%;

-

- > .form-control,

- > .custom-select,

- > .custom-file {

- position: relative; // For focus state's z-index

- flex: 1 1 auto;

- // Add width 1% and flex-basis auto to ensure that button will not wrap out

- // the column. Applies to IE Edge+ and Firefox. Chrome does not require this.

- width: 1%;

- margin-bottom: 0;

-

- // Bring the "active" form control to the top of surrounding elements

- &:focus {

- z-index: 3;

- }

-

- + .form-control,

- + .custom-select,

- + .custom-file {

- margin-left: -$input-border-width;

- }

- }

-

- > .form-control,

- > .custom-select {

- &:not(:last-child) { @include border-right-radius(0); }

- &:not(:first-child) { @include border-left-radius(0); }

- }

-

- // Custom file inputs have more complex markup, thus requiring different

- // border-radius overrides.

- > .custom-file {

- display: flex;

- align-items: center;

-

- &:not(:last-child) .custom-file-label,

- &:not(:last-child) .custom-file-label::before { @include border-right-radius(0); }

- &:not(:first-child) .custom-file-label,

- &:not(:first-child) .custom-file-label::before { @include border-left-radius(0); }

- }

-}

-

-

-// Prepend and append

-//

-// While it requires one extra layer of HTML for each, dedicated prepend and

-// append elements allow us to 1) be less clever, 2) simplify our selectors, and

-// 3) support HTML5 form validation.

-

-.input-group-prepend,

-.input-group-append {

- display: flex;

-

- // Ensure buttons are always above inputs for more visually pleasing borders.

- // This isn't needed for `.input-group-text` since it shares the same border-color

- // as our inputs.

- .btn {

- position: relative;

- z-index: 2;

- }

-

- .btn + .btn,

- .btn + .input-group-text,

- .input-group-text + .input-group-text,

- .input-group-text + .btn {

- margin-left: -$input-border-width;

- }

-}

-

-.input-group-prepend { margin-right: -$input-border-width; }

-.input-group-append { margin-left: -$input-border-width; }

-

-

-// Textual addons

-//

-// Serves as a catch-all element for any text or radio/checkbox input you wish

-// to prepend or append to an input.

-

-.input-group-text {

- display: flex;

- align-items: center;

- padding: $input-padding-y $input-padding-x;

- margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom

- font-size: $font-size-base; // Match inputs

- font-weight: $font-weight-normal;

- line-height: $input-line-height;

- color: $input-group-addon-color;

- text-align: center;

- white-space: nowrap;

- background-color: $input-group-addon-bg;

- border: $input-border-width solid $input-group-addon-border-color;

- @include border-radius($input-border-radius);

-

- // Nuke default margins from checkboxes and radios to vertically center within.

- input[type="radio"],

- input[type="checkbox"] {

- margin-top: 0;

- }

-}

-

-

-// Sizing

-//

-// Remix the default form control sizing classes into new ones for easier

-// manipulation.

-

-.input-group-lg > .form-control,

-.input-group-lg > .input-group-prepend > .input-group-text,

-.input-group-lg > .input-group-append > .input-group-text,

-.input-group-lg > .input-group-prepend > .btn,

-.input-group-lg > .input-group-append > .btn {

- @extend .form-control-lg;

-}

-

-.input-group-sm > .form-control,

-.input-group-sm > .input-group-prepend > .input-group-text,

-.input-group-sm > .input-group-append > .input-group-text,

-.input-group-sm > .input-group-prepend > .btn,

-.input-group-sm > .input-group-append > .btn {

- @extend .form-control-sm;

-}

-

-

-// Prepend and append rounded corners

-//

-// These rulesets must come after the sizing ones to properly override sm and lg

-// border-radius values when extending. They're more specific than we'd like

-// with the `.input-group >` part, but without it, we cannot override the sizing.

-

-

-.input-group > .input-group-prepend > .btn,

-.input-group > .input-group-prepend > .input-group-text,

-.input-group > .input-group-append:not(:last-child) > .btn,

-.input-group > .input-group-append:not(:last-child) > .input-group-text,

-.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),

-.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {

- @include border-right-radius(0);

-}

-

-.input-group > .input-group-append > .btn,

-.input-group > .input-group-append > .input-group-text,

-.input-group > .input-group-prepend:not(:first-child) > .btn,

-.input-group > .input-group-prepend:not(:first-child) > .input-group-text,

-.input-group > .input-group-prepend:first-child > .btn:not(:first-child),

-.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {

- @include border-left-radius(0);

-}

-.jumbotron {

- padding: $jumbotron-padding ($jumbotron-padding / 2);

- margin-bottom: $jumbotron-padding;

- background-color: $jumbotron-bg;

- @include border-radius($border-radius-lg);

-

- @include media-breakpoint-up(sm) {

- padding: ($jumbotron-padding * 2) $jumbotron-padding;

- }

-}

-

-.jumbotron-fluid {

- padding-right: 0;

- padding-left: 0;

- @include border-radius(0);

-}

-// Base class

-//

-// Easily usable on <ul>, <ol>, or <div>.

-

-.list-group {

- display: flex;

- flex-direction: column;

-

- // No need to set list-style: none; since .list-group-item is block level

- padding-left: 0; // reset padding because ul and ol

- margin-bottom: 0;

-}

-

-

-// Interactive list items

-//

-// Use anchor or button elements instead of `li`s or `div`s to create interactive

-// list items. Includes an extra `.active` modifier class for selected items.

-

-.list-group-item-action {

- width: 100%; // For `<button>`s (anchors become 100% by default though)

- color: $list-group-action-color;

- text-align: inherit; // For `<button>`s (anchors inherit)

-

- // Hover state

- @include hover-focus {

- color: $list-group-action-hover-color;

- text-decoration: none;

- background-color: $list-group-hover-bg;

- }

-

- &:active {

- color: $list-group-action-active-color;

- background-color: $list-group-action-active-bg;

- }

-}

-

-

-// Individual list items

-//

-// Use on `li`s or `div`s within the `.list-group` parent.

-

-.list-group-item {

- position: relative;

- display: block;

- padding: $list-group-item-padding-y $list-group-item-padding-x;

- // Place the border on the list items and negative margin up for better styling

- margin-bottom: -$list-group-border-width;

- background-color: $list-group-bg;

- border: $list-group-border-width solid $list-group-border-color;

-

- &:first-child {

- @include border-top-radius($list-group-border-radius);

- }

-

- &:last-child {

- margin-bottom: 0;

- @include border-bottom-radius($list-group-border-radius);

- }

-

- @include hover-focus {

- z-index: 1; // Place hover/active items above their siblings for proper border styling

- text-decoration: none;

- }

-

- &.disabled,

- &:disabled {

- color: $list-group-disabled-color;

- background-color: $list-group-disabled-bg;

- }

-

- // Include both here for `<a>`s and `<button>`s

- &.active {

- z-index: 2; // Place active items above their siblings for proper border styling

- color: $list-group-active-color;

- background-color: $list-group-active-bg;

- border-color: $list-group-active-border-color;

- }

-}

-

-

-// Flush list items

-//

-// Remove borders and border-radius to keep list group items edge-to-edge. Most

-// useful within other components (e.g., cards).

-

-.list-group-flush {

- .list-group-item {

- border-right: 0;

- border-left: 0;

- @include border-radius(0);

- }

-

- &:first-child {

- .list-group-item:first-child {

- border-top: 0;

- }

- }

-

- &:last-child {

- .list-group-item:last-child {

- border-bottom: 0;

- }

- }

-}

-

-

-// Contextual variants

-//

-// Add modifier classes to change text and background color on individual items.

-// Organizationally, this must come after the `:hover` states.

-

-@each $color, $value in $theme-colors {

- @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));

-}

-.media {

- display: flex;

- align-items: flex-start;

-}

-

-.media-body {

- flex: 1;

-}

-// Toggles

-//

-// Used in conjunction with global variables to enable certain theme features.

-

-// Utilities

-@import "mixins/breakpoints";

-@import "mixins/hover";

-@import "mixins/image";

-@import "mixins/badge";

-@import "mixins/resize";

-@import "mixins/screen-reader";

-@import "mixins/size";

-@import "mixins/reset-text";

-@import "mixins/text-emphasis";

-@import "mixins/text-hide";

-@import "mixins/text-truncate";

-@import "mixins/visibility";

-

-// // Components

-@import "mixins/alert";

-@import "mixins/buttons";

-@import "mixins/caret";

-@import "mixins/pagination";

-@import "mixins/lists";

-@import "mixins/list-group";

-@import "mixins/nav-divider";

-@import "mixins/forms";

-@import "mixins/table-row";

-

-// // Skins

-@import "mixins/background-variant";

-@import "mixins/border-radius";

-@import "mixins/box-shadow";

-@import "mixins/gradients";

-@import "mixins/transition";

-

-// // Layout

-@import "mixins/clearfix";

-// @import "mixins/navbar-align";

-@import "mixins/grid-framework";

-@import "mixins/grid";

-@import "mixins/float";

-// .modal-open - body class for killing the scroll

-// .modal - container to scroll within

-// .modal-dialog - positioning shell for the actual modal

-// .modal-content - actual modal w/ bg and corners and stuff

-

-

-// Kill the scroll on the body

-.modal-open {

- overflow: hidden;

-}

-

-// Container that the modal scrolls within

-.modal {

- position: fixed;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- z-index: $zindex-modal;

- display: none;

- overflow: hidden;

- // Prevent Chrome on Windows from adding a focus outline. For details, see

- // https://github.com/twbs/bootstrap/pull/10951.

- outline: 0;

- // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a

- // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342

- // See also https://github.com/twbs/bootstrap/issues/17695

-

- .modal-open & {

- overflow-x: hidden;

- overflow-y: auto;

- }

-}

-

-// Shell div to position the modal with bottom padding

-.modal-dialog {

- position: relative;

- width: auto;

- margin: $modal-dialog-margin;

- // allow clicks to pass through for custom click handling to close modal

- pointer-events: none;

-

- // When fading in the modal, animate it to slide down

- .modal.fade & {

- @include transition($modal-transition);

- transform: translate(0, -25%);

- }

- .modal.show & {

- transform: translate(0, 0);

- }

-}

-

-.modal-dialog-centered {

- display: flex;

- align-items: center;

- min-height: calc(100% - (#{$modal-dialog-margin} * 2));

-}

-

-// Actual modal

-.modal-content {

- position: relative;

- display: flex;

- flex-direction: column;

- width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`

- // counteract the pointer-events: none; in the .modal-dialog

- pointer-events: auto;

- background-color: $modal-content-bg;

- background-clip: padding-box;

- border: $modal-content-border-width solid $modal-content-border-color;

- @include border-radius($border-radius-lg);

- @include box-shadow($modal-content-box-shadow-xs);

- // Remove focus outline from opened modal

- outline: 0;

-}

-

-// Modal background

-.modal-backdrop {

- position: fixed;

- top: 0;

- right: 0;

- bottom: 0;

- left: 0;

- z-index: $zindex-modal-backdrop;

- background-color: $modal-backdrop-bg;

-

- // Fade for backdrop

- &.fade { opacity: 0; }

- &.show { opacity: $modal-backdrop-opacity; }

-}

-

-// Modal header

-// Top section of the modal w/ title and dismiss

-.modal-header {

- display: flex;

- align-items: flex-start; // so the close btn always stays on the upper right corner

- justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends

- padding: $modal-header-padding;

- border-bottom: $modal-header-border-width solid $modal-header-border-color;

- @include border-top-radius($border-radius-lg);

-

- .close {

- padding: $modal-header-padding;

- // auto on the left force icon to the right even when there is no .modal-title

- margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;

- }

-}

-

-// Title text within header

-.modal-title {

- margin-bottom: 0;

- line-height: $modal-title-line-height;

-}

-

-// Modal body

-// Where all modal content resides (sibling of .modal-header and .modal-footer)

-.modal-body {

- position: relative;

- // Enable `flex-grow: 1` so that the body take up as much space as possible

- // when should there be a fixed height on `.modal-dialog`.

- flex: 1 1 auto;

- padding: $modal-inner-padding;

-}

-

-// Footer (for actions)

-.modal-footer {

- display: flex;

- align-items: center; // vertically center

- justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items

- padding: $modal-inner-padding;

- border-top: $modal-footer-border-width solid $modal-footer-border-color;

-

- // Easily place margin between footer elements

- > :not(:first-child) { margin-left: .25rem; }

- > :not(:last-child) { margin-right: .25rem; }

-}

-

-// Measure scrollbar width for padding body during modal show/hide

-.modal-scrollbar-measure {

- position: absolute;

- top: -9999px;

- width: 50px;

- height: 50px;

- overflow: scroll;

-}

-

-// Scale up the modal

-@include media-breakpoint-up(sm) {

- // Automatically set modal's width for larger viewports

- .modal-dialog {

- max-width: $modal-md;

- margin: $modal-dialog-margin-y-sm-up auto;

- }

-

- .modal-dialog-centered {

- min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));

- }

-

- .modal-content {

- @include box-shadow($modal-content-box-shadow-sm-up);

- }

-

- .modal-sm { max-width: $modal-sm; }

-

-}

-

-@include media-breakpoint-up(lg) {

- .modal-lg { max-width: $modal-lg; }

-}

-// Base class

-//

-// Kickstart any navigation component with a set of style resets. Works with

-// `<nav>`s or `<ul>`s.

-

-.nav {

- display: flex;

- flex-wrap: wrap;

- padding-left: 0;

- margin-bottom: 0;

- list-style: none;

-}

-

-.nav-link {

- display: block;

- padding: $nav-link-padding-y $nav-link-padding-x;

-

- @include hover-focus {

- text-decoration: none;

- }

-

- // Disabled state lightens text

- &.disabled {

- color: $nav-link-disabled-color;

- }

-}

-

-//

-// Tabs

-//

-

-.nav-tabs {

- border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;

-

- .nav-item {

- margin-bottom: -$nav-tabs-border-width;

- }

-

- .nav-link {

- border: $nav-tabs-border-width solid transparent;

- @include border-top-radius($nav-tabs-border-radius);

-

- @include hover-focus {

- border-color: $nav-tabs-link-hover-border-color;

- }

-

- &.disabled {

- color: $nav-link-disabled-color;

- background-color: transparent;

- border-color: transparent;

- }

- }

-

- .nav-link.active,

- .nav-item.show .nav-link {

- color: $nav-tabs-link-active-color;

- background-color: $nav-tabs-link-active-bg;

- border-color: $nav-tabs-link-active-border-color;

- }

-

- .dropdown-menu {

- // Make dropdown border overlap tab border

- margin-top: -$nav-tabs-border-width;

- // Remove the top rounded corners here since there is a hard edge above the menu

- @include border-top-radius(0);

- }

-}

-

-

-//

-// Pills

-//

-

-.nav-pills {

- .nav-link {

- @include border-radius($nav-pills-border-radius);

- }

-

- .nav-link.active,

- .show > .nav-link {

- color: $nav-pills-link-active-color;

- background-color: $nav-pills-link-active-bg;

- }

-}

-

-

-//

-// Justified variants

-//

-

-.nav-fill {

- .nav-item {

- flex: 1 1 auto;

- text-align: center;

- }

-}

-

-.nav-justified {

- .nav-item {

- flex-basis: 0;

- flex-grow: 1;

- text-align: center;

- }

-}

-

-

-// Tabbable tabs

-//

-// Hide tabbable panes to start, show them when `.active`

-

-.tab-content {

- > .tab-pane {

- display: none;

- }

- > .active {

- display: block;

- }

-}

-// Contents

-//

-// Navbar

-// Navbar brand

-// Navbar nav

-// Navbar text

-// Navbar divider

-// Responsive navbar

-// Navbar position

-// Navbar themes

-

-

-// Navbar

-//

-// Provide a static navbar from which we expand to create full-width, fixed, and

-// other navbar variations.

-

-.navbar {

- position: relative;

- display: flex;

- flex-wrap: wrap; // allow us to do the line break for collapsing content

- align-items: center;

- justify-content: space-between; // space out brand from logo

- padding: $navbar-padding-y $navbar-padding-x;

-

- // Because flex properties aren't inherited, we need to redeclare these first

- // few properities so that content nested within behave properly.

- > .container,

- > .container-fluid {

- display: flex;

- flex-wrap: wrap;

- align-items: center;

- justify-content: space-between;

- }

-}

-

-

-// Navbar brand

-//

-// Used for brand, project, or site names.

-

-.navbar-brand {

- display: inline-block;

- padding-top: $navbar-brand-padding-y;

- padding-bottom: $navbar-brand-padding-y;

- margin-right: $navbar-padding-x;

- font-size: $navbar-brand-font-size;

- line-height: inherit;

- white-space: nowrap;

-

- @include hover-focus {

- text-decoration: none;

- }

-}

-

-

-// Navbar nav

-//

-// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).

-

-.navbar-nav {

- display: flex;

- flex-direction: column; // cannot use `inherit` to get the `.navbar`s value

- padding-left: 0;

- margin-bottom: 0;

- list-style: none;

-

- .nav-link {

- padding-right: 0;

- padding-left: 0;

- }

-

- .dropdown-menu {

- position: static;

- float: none;

- }

-}

-

-

-// Navbar text

-//

-//

-

-.navbar-text {

- display: inline-block;

- padding-top: $nav-link-padding-y;

- padding-bottom: $nav-link-padding-y;

-}

-

-

-// Responsive navbar

-//

-// Custom styles for responsive collapsing and toggling of navbar contents.

-// Powered by the collapse Bootstrap JavaScript plugin.

-

-// When collapsed, prevent the toggleable navbar contents from appearing in

-// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`

-// on the `.navbar` parent.

-.navbar-collapse {

- flex-basis: 100%;

- flex-grow: 1;

- // For always expanded or extra full navbars, ensure content aligns itself

- // properly vertically. Can be easily overridden with flex utilities.

- align-items: center;

-}

-

-// Button for toggling the navbar when in its collapsed state

-.navbar-toggler {

- padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;

- font-size: $navbar-toggler-font-size;

- line-height: 1;

- background-color: transparent; // remove default button style

- border: $border-width solid transparent; // remove default button style

- @include border-radius($navbar-toggler-border-radius);

-

- @include hover-focus {

- text-decoration: none;

- }

-

- // Opinionated: add "hand" cursor to non-disabled .navbar-toggler elements

- &:not(:disabled):not(.disabled) {

- cursor: pointer;

- }

-}

-

-// Keep as a separate element so folks can easily override it with another icon

-// or image file as needed.

-.navbar-toggler-icon {

- display: inline-block;

- width: 1.5em;

- height: 1.5em;

- vertical-align: middle;

- content: "";

- background: no-repeat center center;

- background-size: 100% 100%;

-}

-

-// Generate series of `.navbar-expand-*` responsive classes for configuring

-// where your navbar collapses.

-.navbar-expand {

- @each $breakpoint in map-keys($grid-breakpoints) {

- $next: breakpoint-next($breakpoint, $grid-breakpoints);

- $infix: breakpoint-infix($next, $grid-breakpoints);

-

- &#{$infix} {

- @include media-breakpoint-down($breakpoint) {

- > .container,

- > .container-fluid {

- padding-right: 0;

- padding-left: 0;

- }

- }

-

- @include media-breakpoint-up($next) {

- flex-flow: row nowrap;

- justify-content: flex-start;

-

- .navbar-nav {

- flex-direction: row;

-

- .dropdown-menu {

- position: absolute;

- }

-

- .dropdown-menu-right {

- right: 0;

- left: auto; // Reset the default from `.dropdown-menu`

- }

-

- .nav-link {

- padding-right: $navbar-nav-link-padding-x;

- padding-left: $navbar-nav-link-padding-x;

- }

- }

-

- // For nesting containers, have to redeclare for alignment purposes

- > .container,

- > .container-fluid {

- flex-wrap: nowrap;

- }

-

- .navbar-collapse {

- display: flex !important; // stylelint-disable-line declaration-no-important

-

- // Changes flex-bases to auto because of an IE10 bug

- flex-basis: auto;

- }

-

- .navbar-toggler {

- display: none;

- }

-

- .dropup {

- .dropdown-menu {

- top: auto;

- bottom: 100%;

- }

- }

- }

- }

- }

-}

-

-

-// Navbar themes

-//

-// Styles for switching between navbars with light or dark background.

-

-// Dark links against a light background

-.navbar-light {

- .navbar-brand {

- color: $navbar-light-active-color;

-

- @include hover-focus {

- color: $navbar-light-active-color;

- }

- }

-

- .navbar-nav {

- .nav-link {

- color: $navbar-light-color;

-

- @include hover-focus {

- color: $navbar-light-hover-color;

- }

-

- &.disabled {

- color: $navbar-light-disabled-color;

- }

- }

-

- .show > .nav-link,

- .active > .nav-link,

- .nav-link.show,

- .nav-link.active {

- color: $navbar-light-active-color;

- }

- }

-

- .navbar-toggler {

- color: $navbar-light-color;

- border-color: $navbar-light-toggler-border-color;

- }

-

- .navbar-toggler-icon {

- background-image: $navbar-light-toggler-icon-bg;

- }

-

- .navbar-text {

- color: $navbar-light-color;

- a {

- color: $navbar-light-active-color;

-

- @include hover-focus {

- color: $navbar-light-active-color;

- }

- }

- }

-}

-

-// White links against a dark background

-.navbar-dark {

- .navbar-brand {

- color: $navbar-dark-active-color;

-

- @include hover-focus {

- color: $navbar-dark-active-color;

- }

- }

-

- .navbar-nav {

- .nav-link {

- color: $navbar-dark-color;

-

- @include hover-focus {

- color: $navbar-dark-hover-color;

- }

-

- &.disabled {

- color: $navbar-dark-disabled-color;

- }

- }

-

- .show > .nav-link,

- .active > .nav-link,

- .nav-link.show,

- .nav-link.active {

- color: $navbar-dark-active-color;

- }

- }

-

- .navbar-toggler {

- color: $navbar-dark-color;

- border-color: $navbar-dark-toggler-border-color;

- }

-

- .navbar-toggler-icon {

- background-image: $navbar-dark-toggler-icon-bg;

- }

-

- .navbar-text {

- color: $navbar-dark-color;

- a {

- color: $navbar-dark-active-color;

-

- @include hover-focus {

- color: $navbar-dark-active-color;

- }

- }

- }

-}

-.pagination {

- display: flex;

- @include list-unstyled();

- @include border-radius();

-}

-

-.page-link {

- position: relative;

- display: block;

- padding: $pagination-padding-y $pagination-padding-x;

- margin-left: -$pagination-border-width;

- line-height: $pagination-line-height;

- color: $pagination-color;

- background-color: $pagination-bg;

- border: $pagination-border-width solid $pagination-border-color;

-

- &:hover {

- color: $pagination-hover-color;

- text-decoration: none;

- background-color: $pagination-hover-bg;

- border-color: $pagination-hover-border-color;

- }

-

- &:focus {

- z-index: 2;

- outline: 0;

- box-shadow: $pagination-focus-box-shadow;

- }

-

- // Opinionated: add "hand" cursor to non-disabled .page-link elements

- &:not(:disabled):not(.disabled) {

- cursor: pointer;

- }

-}

-

-.page-item {

- &:first-child {

- .page-link {

- margin-left: 0;

- @include border-left-radius($border-radius);

- }

- }

- &:last-child {

- .page-link {

- @include border-right-radius($border-radius);

- }

- }

-

- &.active .page-link {

- z-index: 1;

- color: $pagination-active-color;

- background-color: $pagination-active-bg;

- border-color: $pagination-active-border-color;

- }

-

- &.disabled .page-link {

- color: $pagination-disabled-color;

- pointer-events: none;

- // Opinionated: remove the "hand" cursor set previously for .page-link

- cursor: auto;

- background-color: $pagination-disabled-bg;

- border-color: $pagination-disabled-border-color;

- }

-}

-

-

-//

-// Sizing

-//

-

-.pagination-lg {

- @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);

-}

-

-.pagination-sm {

- @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);

-}

-.popover {

- position: absolute;

- top: 0;

- left: 0;

- z-index: $zindex-popover;

- display: block;

- max-width: $popover-max-width;

- // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.

- // So reset our font and text properties to avoid inheriting weird values.

- @include reset-text();

- font-size: $popover-font-size;

- // Allow breaking very long words so they don't overflow the popover's bounds

- word-wrap: break-word;

- background-color: $popover-bg;

- background-clip: padding-box;

- border: $popover-border-width solid $popover-border-color;

- @include border-radius($popover-border-radius);

- @include box-shadow($popover-box-shadow);

-

- .arrow {

- position: absolute;

- display: block;

- width: $popover-arrow-width;

- height: $popover-arrow-height;

- margin: 0 $border-radius-lg;

-

- &::before,

- &::after {

- position: absolute;

- display: block;

- content: "";

- border-color: transparent;

- border-style: solid;

- }

- }

-}

-

-.bs-popover-top {

- margin-bottom: $popover-arrow-height;

-

- .arrow {

- bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);

- }

-

- .arrow::before,

- .arrow::after {

- border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;

- }

-

- .arrow::before {

- bottom: 0;

- border-top-color: $popover-arrow-outer-color;

- }

-

- .arrow::after {

- bottom: $popover-border-width;

- border-top-color: $popover-arrow-color;

- }

-}

-

-.bs-popover-right {

- margin-left: $popover-arrow-height;

-

- .arrow {

- left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);

- width: $popover-arrow-height;

- height: $popover-arrow-width;

- margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners

- }

-

- .arrow::before,

- .arrow::after {

- border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;

- }

-

- .arrow::before {

- left: 0;

- border-right-color: $popover-arrow-outer-color;

- }

-

- .arrow::after {

- left: $popover-border-width;

- border-right-color: $popover-arrow-color;

- }

-}

-

-.bs-popover-bottom {

- margin-top: $popover-arrow-height;

-

- .arrow {

- top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);

- }

-

- .arrow::before,

- .arrow::after {

- border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);

- }

-

- .arrow::before {

- top: 0;

- border-bottom-color: $popover-arrow-outer-color;

- }

-

- .arrow::after {

- top: $popover-border-width;

- border-bottom-color: $popover-arrow-color;

- }

-

- // This will remove the popover-header's border just below the arrow

- .popover-header::before {

- position: absolute;

- top: 0;

- left: 50%;

- display: block;

- width: $popover-arrow-width;

- margin-left: ($popover-arrow-width / -2);

- content: "";

- border-bottom: $popover-border-width solid $popover-header-bg;

- }

-}

-

-.bs-popover-left {

- margin-right: $popover-arrow-height;

-

- .arrow {

- right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);

- width: $popover-arrow-height;

- height: $popover-arrow-width;

- margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners

- }

-

- .arrow::before,

- .arrow::after {

- border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;

- }

-

- .arrow::before {

- right: 0;

- border-left-color: $popover-arrow-outer-color;

- }

-

- .arrow::after {

- right: $popover-border-width;

- border-left-color: $popover-arrow-color;

- }

-}

-

-.bs-popover-auto {

- &[x-placement^="top"] {

- @extend .bs-popover-top;

- }

- &[x-placement^="right"] {

- @extend .bs-popover-right;

- }

- &[x-placement^="bottom"] {

- @extend .bs-popover-bottom;

- }

- &[x-placement^="left"] {

- @extend .bs-popover-left;

- }

-}

-

-

-// Offset the popover to account for the popover arrow

-.popover-header {

- padding: $popover-header-padding-y $popover-header-padding-x;

- margin-bottom: 0; // Reset the default from Reboot

- font-size: $font-size-base;

- color: $popover-header-color;

- background-color: $popover-header-bg;

- border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);

- $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});

- @include border-top-radius($offset-border-width);

-

- &:empty {

- display: none;

- }

-}

-

-.popover-body {

- padding: $popover-body-padding-y $popover-body-padding-x;

- color: $popover-body-color;

-}

-// stylelint-disable declaration-no-important, selector-no-qualifying-type

-

-// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css

-

-// ==========================================================================

-// Print styles.

-// Inlined to avoid the additional HTTP request:

-// http://www.phpied.com/delay-loading-your-print-css/

-// ==========================================================================

-

-@if $enable-print-styles {

- @media print {

- *,

- *::before,

- *::after {

- // Bootstrap specific; comment out `color` and `background`

- //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953

- text-shadow: none !important;

- //background: transparent !important;

- box-shadow: none !important;

- }

-

- a {

- &:not(.btn) {

- text-decoration: underline;

- }

- }

-

- // Bootstrap specific; comment the following selector out

- //a[href]::after {

- // content: " (" attr(href) ")";

- //}

-

- abbr[title]::after {

- content: " (" attr(title) ")";

- }

-

- // Bootstrap specific; comment the following selector out

- //

- // Don't show links that are fragment identifiers,

- // or use the `javascript:` pseudo protocol

- //

-

- //a[href^="#"]::after,

- //a[href^="javascript:"]::after {

- // content: "";

- //}

-

- pre {

- white-space: pre-wrap !important;

- }

- pre,

- blockquote {

- border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px

- page-break-inside: avoid;

- }

-

- //

- // Printing Tables:

- // http://css-discuss.incutio.com/wiki/Printing_Tables

- //

-

- thead {

- display: table-header-group;

- }

-

- tr,

- img {

- page-break-inside: avoid;

- }

-

- p,

- h2,

- h3 {

- orphans: 3;

- widows: 3;

- }

-

- h2,

- h3 {

- page-break-after: avoid;

- }

-

- // Bootstrap specific changes start

-

- // Specify a size and min-width to make printing closer across browsers.

- // We don't set margin here because it breaks `size` in Chrome. We also

- // don't use `!important` on `size` as it breaks in Chrome.

- @page {

- size: $print-page-size;

- }

- body {

- min-width: $print-body-min-width !important;

- }

- .container {

- min-width: $print-body-min-width !important;

- }

-

- // Bootstrap components

- .navbar {

- display: none;

- }

- .badge {

- border: $border-width solid #000;

- }

-

- .table {

- border-collapse: collapse !important;

-

- td,

- th {

- background-color: #fff !important;

- }

- }

- .table-bordered {

- th,

- td {

- border: 1px solid #ddd !important;

- }

- }

-

- // Bootstrap specific changes end

- }

-}

-@keyframes progress-bar-stripes {

- from { background-position: $progress-height 0; }

- to { background-position: 0 0; }

-}

-

-.progress {

- display: flex;

- height: $progress-height;

- overflow: hidden; // force rounded corners by cropping it

- font-size: $progress-font-size;

- background-color: $progress-bg;

- @include border-radius($progress-border-radius);

- @include box-shadow($progress-box-shadow);

-}

-

-.progress-bar {

- display: flex;

- flex-direction: column;

- justify-content: center;

- color: $progress-bar-color;

- text-align: center;

- background-color: $progress-bar-bg;

- @include transition($progress-bar-transition);

-}

-

-.progress-bar-striped {

- @include gradient-striped();

- background-size: $progress-height $progress-height;

-}

-

-.progress-bar-animated {

- animation: progress-bar-stripes $progress-bar-animation-timing;

-}

-// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix

-

-// Reboot

-//

-// Normalization of HTML elements, manually forked from Normalize.css to remove

-// styles targeting irrelevant browsers while applying new styles.

-//

-// Normalize is licensed MIT. https://github.com/necolas/normalize.css

-

-

-// Document

-//

-// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.

-// 2. Change the default font family in all browsers.

-// 3. Correct the line height in all browsers.

-// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.

-// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so

-// we force a non-overlapping, non-auto-hiding scrollbar to counteract.

-// 6. Change the default tap highlight to be completely transparent in iOS.

-

-*,

-*::before,

-*::after {

- box-sizing: border-box; // 1

-}

-

-html {

- font-family: sans-serif; // 2

- line-height: 1.15; // 3

- -webkit-text-size-adjust: 100%; // 4

- -ms-text-size-adjust: 100%; // 4

- -ms-overflow-style: scrollbar; // 5

- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6

-}

-

-// IE10+ doesn't honor `<meta name="viewport">` in some cases.

-@at-root {

- @-ms-viewport {

- width: device-width;

- }

-}

-

-// stylelint-disable selector-list-comma-newline-after

-// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)

-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {

- display: block;

-}

-// stylelint-enable selector-list-comma-newline-after

-

-// Body

-//

-// 1. Remove the margin in all browsers.

-// 2. As a best practice, apply a default `background-color`.

-// 3. Set an explicit initial text-align value so that we can later use the

-// the `inherit` value on things like `<th>` elements.

-

-body {

- margin: 0; // 1

- font-family: $font-family-base;

- font-size: $font-size-base;

- font-weight: $font-weight-base;

- line-height: $line-height-base;

- color: $body-color;

- text-align: left; // 3

- background-color: $body-bg; // 2

-}

-

-// Suppress the focus outline on elements that cannot be accessed via keyboard.

-// This prevents an unwanted focus outline from appearing around elements that

-// might still respond to pointer events.

-//

-// Credit: https://github.com/suitcss/base

-[tabindex="-1"]:focus {

- outline: 0 !important;

-}

-

-

-// Content grouping

-//

-// 1. Add the correct box sizing in Firefox.

-// 2. Show the overflow in Edge and IE.

-

-hr {

- box-sizing: content-box; // 1

- height: 0; // 1

- overflow: visible; // 2

-}

-

-

-//

-// Typography

-//

-

-// Remove top margins from headings

-//

-// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top

-// margin for easier control within type scales as it avoids margin collapsing.

-// stylelint-disable selector-list-comma-newline-after

-h1, h2, h3, h4, h5, h6 {

- margin-top: 0;

- margin-bottom: $headings-margin-bottom;

-}

-// stylelint-enable selector-list-comma-newline-after

-

-// Reset margins on paragraphs

-//

-// Similarly, the top margin on `<p>`s get reset. However, we also reset the

-// bottom margin to use `rem` units instead of `em`.

-p {

- margin-top: 0;

- margin-bottom: $paragraph-margin-bottom;

-}

-

-// Abbreviations

-//

-// 1. Remove the bottom border in Firefox 39-.

-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

-// 3. Add explicit cursor to indicate changed behavior.

-// 4. Duplicate behavior to the data-* attribute for our tooltip plugin

-

-abbr[title],

-abbr[data-original-title] { // 4

- text-decoration: underline; // 2

- text-decoration: underline dotted; // 2

- cursor: help; // 3

- border-bottom: 0; // 1

-}

-

-address {

- margin-bottom: 1rem;

- font-style: normal;

- line-height: inherit;

-}

-

-ol,

-ul,

-dl {

- margin-top: 0;

- margin-bottom: 1rem;

-}

-

-ol ol,

-ul ul,

-ol ul,

-ul ol {

- margin-bottom: 0;

-}

-

-dt {

- font-weight: $dt-font-weight;

-}

-

-dd {

- margin-bottom: .5rem;

- margin-left: 0; // Undo browser default

-}

-

-blockquote {

- margin: 0 0 1rem;

-}

-

-dfn {

- font-style: italic; // Add the correct font style in Android 4.3-

-}

-

-// stylelint-disable font-weight-notation

-b,

-strong {

- font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari

-}

-// stylelint-enable font-weight-notation

-

-small {

- font-size: 80%; // Add the correct font size in all browsers

-}

-

-//

-// Prevent `sub` and `sup` elements from affecting the line height in

-// all browsers.

-//

-

-sub,

-sup {

- position: relative;

- font-size: 75%;

- line-height: 0;

- vertical-align: baseline;

-}

-

-sub { bottom: -.25em; }

-sup { top: -.5em; }

-

-

-//

-// Links

-//

-

-a {

- color: $link-color;

- text-decoration: $link-decoration;

- background-color: transparent; // Remove the gray background on active links in IE 10.

- -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.

-

- @include hover {

- color: $link-hover-color;

- text-decoration: $link-hover-decoration;

- }

-}

-

-// And undo these styles for placeholder links/named anchors (without href)

-// which have not been made explicitly keyboard-focusable (without tabindex).

-// It would be more straightforward to just use a[href] in previous block, but that

-// causes specificity issues in many other styles that are too complex to fix.

-// See https://github.com/twbs/bootstrap/issues/19402

-

-a:not([href]):not([tabindex]) {

- color: inherit;

- text-decoration: none;

-

- @include hover-focus {

- color: inherit;

- text-decoration: none;

- }

-

- &:focus {

- outline: 0;

- }

-}

-

-

-//

-// Code

-//

-

-// stylelint-disable font-family-no-duplicate-names

-pre,

-code,

-kbd,

-samp {

- font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.

- font-size: 1em; // Correct the odd `em` font sizing in all browsers.

-}

-// stylelint-enable font-family-no-duplicate-names

-

-pre {

- // Remove browser default top margin

- margin-top: 0;

- // Reset browser default of `1em` to use `rem`s

- margin-bottom: 1rem;

- // Don't allow content to break outside

- overflow: auto;

- // We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so

- // we force a non-overlapping, non-auto-hiding scrollbar to counteract.

- -ms-overflow-style: scrollbar;

-}

-

-

-//

-// Figures

-//

-

-figure {

- // Apply a consistent margin strategy (matches our type styles).

- margin: 0 0 1rem;

-}

-

-

-//

-// Images and content

-//

-

-img {

- vertical-align: middle;

- border-style: none; // Remove the border on images inside links in IE 10-.

-}

-

-svg:not(:root) {

- overflow: hidden; // Hide the overflow in IE

-}

-

-

-//

-// Tables

-//

-

-table {

- border-collapse: collapse; // Prevent double borders

-}

-

-caption {

- padding-top: $table-cell-padding;

- padding-bottom: $table-cell-padding;

- color: $text-muted;

- text-align: left;

- caption-side: bottom;

-}

-

-th {

- // Matches default `<td>` alignment by inheriting from the `<body>`, or the

- // closest parent with a set `text-align`.

- text-align: inherit;

-}

-

-

-//

-// Forms

-//

-

-label {

- // Allow labels to use `margin` for spacing.

- display: inline-block;

- margin-bottom: .5rem;

-}

-

-// Remove the default `border-radius` that macOS Chrome adds.

-//

-// Details at https://github.com/twbs/bootstrap/issues/24093

-button {

- border-radius: 0;

-}

-

-// Work around a Firefox/IE bug where the transparent `button` background

-// results in a loss of the default `button` focus styles.

-//

-// Credit: https://github.com/suitcss/base/

-button:focus {

- outline: 1px dotted;

- outline: 5px auto -webkit-focus-ring-color;

-}

-

-input,

-button,

-select,

-optgroup,

-textarea {

- margin: 0; // Remove the margin in Firefox and Safari

- font-family: inherit;

- font-size: inherit;

- line-height: inherit;

-}

-

-button,

-input {

- overflow: visible; // Show the overflow in Edge

-}

-

-button,

-select {

- text-transform: none; // Remove the inheritance of text transform in Firefox

-}

-

-// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`

-// controls in Android 4.

-// 2. Correct the inability to style clickable types in iOS and Safari.

-button,

-html [type="button"], // 1

-[type="reset"],

-[type="submit"] {

- -webkit-appearance: button; // 2

-}

-

-// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.

-button::-moz-focus-inner,

-[type="button"]::-moz-focus-inner,

-[type="reset"]::-moz-focus-inner,

-[type="submit"]::-moz-focus-inner {

- padding: 0;

- border-style: none;

-}

-

-input[type="radio"],

-input[type="checkbox"] {

- box-sizing: border-box; // 1. Add the correct box sizing in IE 10-

- padding: 0; // 2. Remove the padding in IE 10-

-}

-

-

-input[type="date"],

-input[type="time"],

-input[type="datetime-local"],

-input[type="month"] {

- // Remove the default appearance of temporal inputs to avoid a Mobile Safari

- // bug where setting a custom line-height prevents text from being vertically

- // centered within the input.

- // See https://bugs.webkit.org/show_bug.cgi?id=139848

- // and https://github.com/twbs/bootstrap/issues/11266

- -webkit-appearance: listbox;

-}

-

-textarea {

- overflow: auto; // Remove the default vertical scrollbar in IE.

- // Textareas should really only resize vertically so they don't break their (horizontal) containers.

- resize: vertical;

-}

-

-fieldset {

- // Browsers set a default `min-width: min-content;` on fieldsets,

- // unlike e.g. `<div>`s, which have `min-width: 0;` by default.

- // So we reset that to ensure fieldsets behave more like a standard block element.

- // See https://github.com/twbs/bootstrap/issues/12359

- // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements

- min-width: 0;

- // Reset the default outline behavior of fieldsets so they don't affect page layout.

- padding: 0;

- margin: 0;

- border: 0;

-}

-

-// 1. Correct the text wrapping in Edge and IE.

-// 2. Correct the color inheritance from `fieldset` elements in IE.

-legend {

- display: block;

- width: 100%;

- max-width: 100%; // 1

- padding: 0;

- margin-bottom: .5rem;

- font-size: 1.5rem;

- line-height: inherit;

- color: inherit; // 2

- white-space: normal; // 1

-}

-

-progress {

- vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.

-}

-

-// Correct the cursor style of increment and decrement buttons in Chrome.

-[type="number"]::-webkit-inner-spin-button,

-[type="number"]::-webkit-outer-spin-button {

- height: auto;

-}

-

-[type="search"] {

- // This overrides the extra rounded corners on search inputs in iOS so that our

- // `.form-control` class can properly style them. Note that this cannot simply

- // be added to `.form-control` as it's not specific enough. For details, see

- // https://github.com/twbs/bootstrap/issues/11586.

- outline-offset: -2px; // 2. Correct the outline style in Safari.

- -webkit-appearance: none;

-}

-

-//

-// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.

-//

-

-[type="search"]::-webkit-search-cancel-button,

-[type="search"]::-webkit-search-decoration {

- -webkit-appearance: none;

-}

-

-//

-// 1. Correct the inability to style clickable types in iOS and Safari.

-// 2. Change font properties to `inherit` in Safari.

-//

-

-::-webkit-file-upload-button {

- font: inherit; // 2

- -webkit-appearance: button; // 1

-}

-

-//

-// Correct element displays

-//

-

-output {

- display: inline-block;

-}

-

-summary {

- display: list-item; // Add the correct display in all browsers

- cursor: pointer;

-}

-

-template {

- display: none; // Add the correct display in IE

-}

-

-// Always hide an element with the `hidden` HTML attribute (from PureCSS).

-// Needed for proper display in IE 10-.

-[hidden] {

- display: none !important;

-}

-:root {

- // Custom variable values only support SassScript inside `#{}`.

- @each $color, $value in $colors {

- --#{$color}: #{$value};

- }

-

- @each $color, $value in $theme-colors {

- --#{$color}: #{$value};

- }

-

- @each $bp, $value in $grid-breakpoints {

- --breakpoint-#{$bp}: #{$value};

- }

-

- // Use `inspect` for lists so that quoted items keep the quotes.

- // See https://github.com/sass/sass/issues/2383#issuecomment-336349172

- --font-family-sans-serif: #{inspect($font-family-sans-serif)};

- --font-family-monospace: #{inspect($font-family-monospace)};

-}

-//

-// Basic Bootstrap table

-//

-

-.table {

- width: 100%;

- max-width: 100%;

- margin-bottom: $spacer;

- background-color: $table-bg; // Reset for nesting within parents with `background-color`.

-

- th,

- td {

- padding: $table-cell-padding;

- vertical-align: top;

- border-top: $table-border-width solid $table-border-color;

- }

-

- thead th {

- vertical-align: bottom;

- border-bottom: (2 * $table-border-width) solid $table-border-color;

- }

-

- tbody + tbody {

- border-top: (2 * $table-border-width) solid $table-border-color;

- }

-

- .table {

- background-color: $body-bg;

- }

-}

-

-

-//

-// Condensed table w/ half padding

-//

-

-.table-sm {

- th,

- td {

- padding: $table-cell-padding-sm;

- }

-}

-

-

-// Bordered version

-//

-// Add borders all around the table and between all the columns.

-

-.table-bordered {

- border: $table-border-width solid $table-border-color;

-

- th,

- td {

- border: $table-border-width solid $table-border-color;

- }

-

- thead {

- th,

- td {

- border-bottom-width: (2 * $table-border-width);

- }

- }

-}

-

-

-// Zebra-striping

-//

-// Default zebra-stripe styles (alternating gray and transparent backgrounds)

-

-.table-striped {

- tbody tr:nth-of-type(odd) {

- background-color: $table-accent-bg;

- }

-}

-

-

-// Hover effect

-//

-// Placed here since it has to come after the potential zebra striping

-

-.table-hover {

- tbody tr {

- @include hover {

- background-color: $table-hover-bg;

- }

- }

-}

-

-

-// Table backgrounds

-//

-// Exact selectors below required to override `.table-striped` and prevent

-// inheritance to nested tables.

-

-@each $color, $value in $theme-colors {

- @include table-row-variant($color, theme-color-level($color, -9));

-}

-

-@include table-row-variant(active, $table-active-bg);

-

-

-// Dark styles

-//

-// Same table markup, but inverted color scheme: dark background and light text.

-

-// stylelint-disable-next-line no-duplicate-selectors

-.table {

- .thead-dark {

- th {

- color: $table-dark-color;

- background-color: $table-dark-bg;

- border-color: $table-dark-border-color;

- }

- }

-

- .thead-light {

- th {

- color: $table-head-color;

- background-color: $table-head-bg;

- border-color: $table-border-color;

- }

- }

-}

-

-.table-dark {

- color: $table-dark-color;

- background-color: $table-dark-bg;

-

- th,

- td,

- thead th {

- border-color: $table-dark-border-color;

- }

-

- &.table-bordered {

- border: 0;

- }

-

- &.table-striped {

- tbody tr:nth-of-type(odd) {

- background-color: $table-dark-accent-bg;

- }

- }

-

- &.table-hover {

- tbody tr {

- @include hover {

- background-color: $table-dark-hover-bg;

- }

- }

- }

-}

-

-

-// Responsive tables

-//

-// Generate series of `.table-responsive-*` classes for configuring the screen

-// size of where your table will overflow.

-

-.table-responsive {

- @each $breakpoint in map-keys($grid-breakpoints) {

- $next: breakpoint-next($breakpoint, $grid-breakpoints);

- $infix: breakpoint-infix($next, $grid-breakpoints);

-

- &#{$infix} {

- @include media-breakpoint-down($breakpoint) {

- display: block;

- width: 100%;

- overflow-x: auto;

- -webkit-overflow-scrolling: touch;

- -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057

-

- // Prevent double border on horizontal scroll due to use of `display: block;`

- > .table-bordered {

- border: 0;

- }

- }

- }

- }

-}

-// Base class

-.tooltip {

- position: absolute;

- z-index: $zindex-tooltip;

- display: block;

- margin: $tooltip-margin;

- // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.

- // So reset our font and text properties to avoid inheriting weird values.

- @include reset-text();

- font-size: $tooltip-font-size;

- // Allow breaking very long words so they don't overflow the tooltip's bounds

- word-wrap: break-word;

- opacity: 0;

-

- &.show { opacity: $tooltip-opacity; }

-

- .arrow {

- position: absolute;

- display: block;

- width: $tooltip-arrow-width;

- height: $tooltip-arrow-height;

-

- &::before {

- position: absolute;

- content: "";

- border-color: transparent;

- border-style: solid;

- }

- }

-}

-

-.bs-tooltip-top {

- padding: $tooltip-arrow-height 0;

-

- .arrow {

- bottom: 0;

-

- &::before {

- top: 0;

- border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;

- border-top-color: $tooltip-arrow-color;

- }

- }

-}

-

-.bs-tooltip-right {

- padding: 0 $tooltip-arrow-height;

-

- .arrow {

- left: 0;

- width: $tooltip-arrow-height;

- height: $tooltip-arrow-width;

-

- &::before {

- right: 0;

- border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;

- border-right-color: $tooltip-arrow-color;

- }

- }

-}

-

-.bs-tooltip-bottom {

- padding: $tooltip-arrow-height 0;

-

- .arrow {

- top: 0;

-

- &::before {

- bottom: 0;

- border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;

- border-bottom-color: $tooltip-arrow-color;

- }

- }

-}

-

-.bs-tooltip-left {

- padding: 0 $tooltip-arrow-height;

-

- .arrow {

- right: 0;

- width: $tooltip-arrow-height;

- height: $tooltip-arrow-width;

-

- &::before {

- left: 0;

- border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;

- border-left-color: $tooltip-arrow-color;

- }

- }

-}

-

-.bs-tooltip-auto {

- &[x-placement^="top"] {

- @extend .bs-tooltip-top;

- }

- &[x-placement^="right"] {

- @extend .bs-tooltip-right;

- }

- &[x-placement^="bottom"] {

- @extend .bs-tooltip-bottom;

- }

- &[x-placement^="left"] {

- @extend .bs-tooltip-left;

- }

-}

-

-// Wrapper for the tooltip content

-.tooltip-inner {

- max-width: $tooltip-max-width;

- padding: $tooltip-padding-y $tooltip-padding-x;

- color: $tooltip-color;

- text-align: center;

- background-color: $tooltip-bg;

- @include border-radius($tooltip-border-radius);

-}

-// stylelint-disable selector-no-qualifying-type

-

-.fade {

- opacity: 0;

- @include transition($transition-fade);

-

- &.show {

- opacity: 1;

- }

-}

-

-.collapse {

- display: none;

- &.show {

- display: block;

- }

-}

-

-tr {

- &.collapse.show {

- display: table-row;

- }

-}

-

-tbody {

- &.collapse.show {

- display: table-row-group;

- }

-}

-

-.collapsing {

- position: relative;

- height: 0;

- overflow: hidden;

- @include transition($transition-collapse);

-}

-// stylelint-disable declaration-no-important, selector-list-comma-newline-after

-

-//

-// Headings

-//

-

-h1, h2, h3, h4, h5, h6,

-.h1, .h2, .h3, .h4, .h5, .h6 {

- margin-bottom: $headings-margin-bottom;

- font-family: $headings-font-family;

- font-weight: $headings-font-weight;

- line-height: $headings-line-height;

- color: $headings-color;

-}

-

-h1, .h1 { font-size: $h1-font-size; }

-h2, .h2 { font-size: $h2-font-size; }

-h3, .h3 { font-size: $h3-font-size; }

-h4, .h4 { font-size: $h4-font-size; }

-h5, .h5 { font-size: $h5-font-size; }

-h6, .h6 { font-size: $h6-font-size; }

-

-.lead {

- font-size: $lead-font-size;

- font-weight: $lead-font-weight;

-}

-

-// Type display classes

-.display-1 {

- font-size: $display1-size;

- font-weight: $display1-weight;

- line-height: $display-line-height;

-}

-.display-2 {

- font-size: $display2-size;

- font-weight: $display2-weight;

- line-height: $display-line-height;

-}

-.display-3 {

- font-size: $display3-size;

- font-weight: $display3-weight;

- line-height: $display-line-height;

-}

-.display-4 {

- font-size: $display4-size;

- font-weight: $display4-weight;

- line-height: $display-line-height;

-}

-

-

-//

-// Horizontal rules

-//

-

-hr {

- margin-top: $hr-margin-y;

- margin-bottom: $hr-margin-y;

- border: 0;

- border-top: $hr-border-width solid $hr-border-color;

-}

-

-

-//

-// Emphasis

-//

-

-small,

-.small {

- font-size: $small-font-size;

- font-weight: $font-weight-normal;

-}

-

-mark,

-.mark {

- padding: $mark-padding;

- background-color: $mark-bg;

-}

-

-

-//

-// Lists

-//

-

-.list-unstyled {

- @include list-unstyled;

-}

-

-// Inline turns list items into inline-block

-.list-inline {

- @include list-unstyled;

-}

-.list-inline-item {

- display: inline-block;

-

- &:not(:last-child) {

- margin-right: $list-inline-padding;

- }

-}

-

-

-//

-// Misc

-//

-

-// Builds on `abbr`

-.initialism {

- font-size: 90%;

- text-transform: uppercase;

-}

-

-// Blockquotes

-.blockquote {

- margin-bottom: $spacer;

- font-size: $blockquote-font-size;

-}

-

-.blockquote-footer {

- display: block;

- font-size: 80%; // back to default font-size

- color: $blockquote-small-color;

-

- &::before {

- content: "\2014 \00A0"; // em dash, nbsp

- }

-}

-@import "utilities/align";

-@import "utilities/background";

-@import "utilities/borders";

-@import "utilities/clearfix";

-@import "utilities/display";

-@import "utilities/embed";

-@import "utilities/flex";

-@import "utilities/float";

-@import "utilities/position";

-@import "utilities/screenreaders";

-@import "utilities/sizing";

-@import "utilities/spacing";

-@import "utilities/text";

-@import "utilities/visibility";

-// Variables

-//

-// Variables should follow the `$component-state-property-size` formula for

-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

-

-

-//

-// Color system

-//

-

-// stylelint-disable

-$white: #fff !default;

-$gray-100: #f8f9fa !default;

-$gray-200: #e9ecef !default;

-$gray-300: #dee2e6 !default;

-$gray-400: #ced4da !default;

-$gray-500: #adb5bd !default;

-$gray-600: #6c757d !default;

-$gray-700: #495057 !default;

-$gray-800: #343a40 !default;

-$gray-900: #212529 !default;

-$black: #000 !default;

-

-$grays: () !default;

-$grays: map-merge((

- "100": $gray-100,

- "200": $gray-200,

- "300": $gray-300,

- "400": $gray-400,

- "500": $gray-500,

- "600": $gray-600,

- "700": $gray-700,

- "800": $gray-800,

- "900": $gray-900

-), $grays);

-

-$blue: #007bff !default;

-$indigo: #6610f2 !default;

-$purple: #6f42c1 !default;

-$pink: #e83e8c !default;

-$red: #dc3545 !default;

-$orange: #fd7e14 !default;

-$yellow: #ffc107 !default;

-$green: #28a745 !default;

-$teal: #20c997 !default;

-$cyan: #17a2b8 !default;

-

-$colors: () !default;

-$colors: map-merge((

- "blue": $blue,

- "indigo": $indigo,

- "purple": $purple,

- "pink": $pink,

- "red": $red,

- "orange": $orange,

- "yellow": $yellow,

- "green": $green,

- "teal": $teal,

- "cyan": $cyan,

- "white": $white,

- "gray": $gray-600,

- "gray-dark": $gray-800

-), $colors);

-

-$primary: $blue !default;

-$secondary: $gray-600 !default;

-$success: $green !default;

-$info: $cyan !default;

-$warning: $yellow !default;

-$danger: $red !default;

-$light: $gray-100 !default;

-$dark: $gray-800 !default;

-

-$theme-colors: () !default;

-$theme-colors: map-merge((

- "primary": $primary,

- "secondary": $secondary,

- "success": $success,

- "info": $info,

- "warning": $warning,

- "danger": $danger,

- "light": $light,

- "dark": $dark

-), $theme-colors);

-// stylelint-enable

-

-// Set a specific jump point for requesting color jumps

-$theme-color-interval: 8% !default;

-

-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.

-$yiq-contrasted-threshold: 150 !default;

-

-// Customize the light and dark text colors for use in our YIQ color contrast function.

-$yiq-text-dark: $gray-900 !default;

-$yiq-text-light: $white !default;

-

-// Options

-//

-// Quickly modify global styling by enabling or disabling optional features.

-

-$enable-caret: true !default;

-$enable-rounded: true !default;

-$enable-shadows: false !default;

-$enable-gradients: false !default;

-$enable-transitions: true !default;

-$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS

-$enable-grid-classes: true !default;

-$enable-print-styles: true !default;

-

-

-// Spacing

-//

-// Control the default styling of most Bootstrap elements by modifying these

-// variables. Mostly focused on spacing.

-// You can add more entries to the $spacers map, should you need more variation.

-

-// stylelint-disable

-$spacer: 1rem !default;

-$spacers: () !default;

-$spacers: map-merge((

- 0: 0,

- 1: ($spacer * .25),

- 2: ($spacer * .5),

- 3: $spacer,

- 4: ($spacer * 1.5),

- 5: ($spacer * 3)

-), $spacers);

-

-// This variable affects the `.h-*` and `.w-*` classes.

-$sizes: () !default;

-$sizes: map-merge((

- 25: 25%,

- 50: 50%,

- 75: 75%,

- 100: 100%

-), $sizes);

-// stylelint-enable

-

-// Body

-//

-// Settings for the `<body>` element.

-

-$body-bg: $white !default;

-$body-color: $gray-900 !default;

-

-// Links

-//

-// Style anchor elements.

-

-$link-color: theme-color("primary") !default;

-$link-decoration: none !default;

-$link-hover-color: darken($link-color, 15%) !default;

-$link-hover-decoration: underline !default;

-

-// Paragraphs

-//

-// Style p element.

-

-$paragraph-margin-bottom: 1rem !default;

-

-

-// Grid breakpoints

-//

-// Define the minimum dimensions at which your layout will change,

-// adapting to different screen sizes, for use in media queries.

-

-$grid-breakpoints: (

- xs: 0,

- sm: 576px,

- md: 768px,

- lg: 992px,

- xl: 1200px

-) !default;

-

-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");

-@include _assert-starts-at-zero($grid-breakpoints);

-

-

-// Grid containers

-//

-// Define the maximum width of `.container` for different screen sizes.

-

-$container-max-widths: (

- sm: 540px,

- md: 720px,

- lg: 960px,

- xl: 1140px

-) !default;

-

-@include _assert-ascending($container-max-widths, "$container-max-widths");

-

-

-// Grid columns

-//

-// Set the number of columns and specify the width of the gutters.

-

-$grid-columns: 12 !default;

-$grid-gutter-width: 30px !default;

-

-// Components

-//

-// Define common padding and border radius sizes and more.

-

-$line-height-lg: 1.5 !default;

-$line-height-sm: 1.5 !default;

-

-$border-width: 1px !default;

-$border-color: $gray-300 !default;

-

-$border-radius: .25rem !default;

-$border-radius-lg: .3rem !default;

-$border-radius-sm: .2rem !default;

-

-$component-active-color: $white !default;

-$component-active-bg: theme-color("primary") !default;

-

-$caret-width: .3em !default;

-

-$transition-base: all .2s ease-in-out !default;

-$transition-fade: opacity .15s linear !default;

-$transition-collapse: height .35s ease !default;

-

-

-// Fonts

-//

-// Font, line-height, and color for body text, headings, and more.

-

-// stylelint-disable value-keyword-case

-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

-$font-family-base: $font-family-sans-serif !default;

-// stylelint-enable value-keyword-case

-

-$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`

-$font-size-lg: ($font-size-base * 1.25) !default;

-$font-size-sm: ($font-size-base * .875) !default;

-

-$font-weight-light: 300 !default;

-$font-weight-normal: 400 !default;

-$font-weight-bold: 700 !default;

-

-$font-weight-base: $font-weight-normal !default;

-$line-height-base: 1.5 !default;

-

-$h1-font-size: $font-size-base * 2.5 !default;

-$h2-font-size: $font-size-base * 2 !default;

-$h3-font-size: $font-size-base * 1.75 !default;

-$h4-font-size: $font-size-base * 1.5 !default;

-$h5-font-size: $font-size-base * 1.25 !default;

-$h6-font-size: $font-size-base !default;

-

-$headings-margin-bottom: ($spacer / 2) !default;

-$headings-font-family: inherit !default;

-$headings-font-weight: 500 !default;

-$headings-line-height: 1.2 !default;

-$headings-color: inherit !default;

-

-$display1-size: 6rem !default;

-$display2-size: 5.5rem !default;

-$display3-size: 4.5rem !default;

-$display4-size: 3.5rem !default;

-

-$display1-weight: 300 !default;

-$display2-weight: 300 !default;

-$display3-weight: 300 !default;

-$display4-weight: 300 !default;

-$display-line-height: $headings-line-height !default;

-

-$lead-font-size: ($font-size-base * 1.25) !default;

-$lead-font-weight: 300 !default;

-

-$small-font-size: 80% !default;

-

-$text-muted: $gray-600 !default;

-

-$blockquote-small-color: $gray-600 !default;

-$blockquote-font-size: ($font-size-base * 1.25) !default;

-

-$hr-border-color: rgba($black, .1) !default;

-$hr-border-width: $border-width !default;

-

-$mark-padding: .2em !default;

-

-$dt-font-weight: $font-weight-bold !default;

-

-$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;

-$nested-kbd-font-weight: $font-weight-bold !default;

-

-$list-inline-padding: .5rem !default;

-

-$mark-bg: #fcf8e3 !default;

-

-$hr-margin-y: $spacer !default;

-

-

-// Tables

-//

-// Customizes the `.table` component with basic values, each used across all table variations.

-

-$table-cell-padding: .75rem !default;

-$table-cell-padding-sm: .3rem !default;

-

-$table-bg: transparent !default;

-$table-accent-bg: rgba($black, .05) !default;

-$table-hover-bg: rgba($black, .075) !default;

-$table-active-bg: $table-hover-bg !default;

-

-$table-border-width: $border-width !default;

-$table-border-color: $gray-300 !default;

-

-$table-head-bg: $gray-200 !default;

-$table-head-color: $gray-700 !default;

-

-$table-dark-bg: $gray-900 !default;

-$table-dark-accent-bg: rgba($white, .05) !default;

-$table-dark-hover-bg: rgba($white, .075) !default;

-$table-dark-border-color: lighten($gray-900, 7.5%) !default;

-$table-dark-color: $body-bg !default;

-

-

-// Buttons + Forms

-//

-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.

-

-$input-btn-padding-y: .375rem !default;

-$input-btn-padding-x: .75rem !default;

-$input-btn-line-height: $line-height-base !default;

-

-$input-btn-focus-width: .2rem !default;

-$input-btn-focus-color: rgba($component-active-bg, .25) !default;

-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

-

-$input-btn-padding-y-sm: .25rem !default;

-$input-btn-padding-x-sm: .5rem !default;

-$input-btn-line-height-sm: $line-height-sm !default;

-

-$input-btn-padding-y-lg: .5rem !default;

-$input-btn-padding-x-lg: 1rem !default;

-$input-btn-line-height-lg: $line-height-lg !default;

-

-$input-btn-border-width: $border-width !default;

-

-

-// Buttons

-//

-// For each of Bootstrap's buttons, define text, background, and border color.

-

-$btn-padding-y: $input-btn-padding-y !default;

-$btn-padding-x: $input-btn-padding-x !default;

-$btn-line-height: $input-btn-line-height !default;

-

-$btn-padding-y-sm: $input-btn-padding-y-sm !default;

-$btn-padding-x-sm: $input-btn-padding-x-sm !default;

-$btn-line-height-sm: $input-btn-line-height-sm !default;

-

-$btn-padding-y-lg: $input-btn-padding-y-lg !default;

-$btn-padding-x-lg: $input-btn-padding-x-lg !default;

-$btn-line-height-lg: $input-btn-line-height-lg !default;

-

-$btn-border-width: $input-btn-border-width !default;

-

-$btn-font-weight: $font-weight-normal !default;

-$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;

-$btn-focus-width: $input-btn-focus-width !default;

-$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;

-$btn-disabled-opacity: .65 !default;

-$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;

-

-$btn-link-disabled-color: $gray-600 !default;

-

-$btn-block-spacing-y: .5rem !default;

-

-// Allows for customizing button radius independently from global border radius

-$btn-border-radius: $border-radius !default;

-$btn-border-radius-lg: $border-radius-lg !default;

-$btn-border-radius-sm: $border-radius-sm !default;

-

-$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;

-

-

-// Forms

-

-$input-padding-y: $input-btn-padding-y !default;

-$input-padding-x: $input-btn-padding-x !default;

-$input-line-height: $input-btn-line-height !default;

-

-$input-padding-y-sm: $input-btn-padding-y-sm !default;

-$input-padding-x-sm: $input-btn-padding-x-sm !default;

-$input-line-height-sm: $input-btn-line-height-sm !default;

-

-$input-padding-y-lg: $input-btn-padding-y-lg !default;

-$input-padding-x-lg: $input-btn-padding-x-lg !default;

-$input-line-height-lg: $input-btn-line-height-lg !default;

-

-$input-bg: $white !default;

-$input-disabled-bg: $gray-200 !default;

-

-$input-color: $gray-700 !default;

-$input-border-color: $gray-400 !default;

-$input-border-width: $input-btn-border-width !default;

-$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;

-

-$input-border-radius: $border-radius !default;

-$input-border-radius-lg: $border-radius-lg !default;

-$input-border-radius-sm: $border-radius-sm !default;

-

-$input-focus-bg: $input-bg !default;

-$input-focus-border-color: lighten($component-active-bg, 25%) !default;

-$input-focus-color: $input-color !default;

-$input-focus-width: $input-btn-focus-width !default;

-$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

-

-$input-placeholder-color: $gray-600 !default;

-

-$input-height-border: $input-border-width * 2 !default;

-

-$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;

-$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;

-

-$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;

-$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;

-

-$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;

-$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;

-

-$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

-

-$form-text-margin-top: .25rem !default;

-

-$form-check-input-gutter: 1.25rem !default;

-$form-check-input-margin-y: .3rem !default;

-$form-check-input-margin-x: .25rem !default;

-

-$form-check-inline-margin-x: .75rem !default;

-$form-check-inline-input-margin-x: .3125rem !default;

-

-$form-group-margin-bottom: 1rem !default;

-

-$input-group-addon-color: $input-color !default;

-$input-group-addon-bg: $gray-200 !default;

-$input-group-addon-border-color: $input-border-color !default;

-

-$custom-control-gutter: 1.5rem !default;

-$custom-control-spacer-x: 1rem !default;

-

-$custom-control-indicator-size: 1rem !default;

-$custom-control-indicator-bg: $gray-300 !default;

-$custom-control-indicator-bg-size: 50% 50% !default;

-$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;

-

-$custom-control-indicator-disabled-bg: $gray-200 !default;

-$custom-control-label-disabled-color: $gray-600 !default;

-

-$custom-control-indicator-checked-color: $component-active-color !default;

-$custom-control-indicator-checked-bg: $component-active-bg !default;

-$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;

-$custom-control-indicator-checked-box-shadow: none !default;

-

-$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;

-

-$custom-control-indicator-active-color: $component-active-color !default;

-$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;

-$custom-control-indicator-active-box-shadow: none !default;

-

-$custom-checkbox-indicator-border-radius: $border-radius !default;

-$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-

-$custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;

-$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;

-$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-$custom-checkbox-indicator-indeterminate-box-shadow: none !default;

-

-$custom-radio-indicator-border-radius: 50% !default;

-$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-

-$custom-select-padding-y: .375rem !default;

-$custom-select-padding-x: .75rem !default;

-$custom-select-height: $input-height !default;

-$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator

-$custom-select-line-height: $input-btn-line-height !default;

-$custom-select-color: $input-color !default;

-$custom-select-disabled-color: $gray-600 !default;

-$custom-select-bg: $white !default;

-$custom-select-disabled-bg: $gray-200 !default;

-$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions

-$custom-select-indicator-color: $gray-800 !default;

-$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-$custom-select-border-width: $input-btn-border-width !default;

-$custom-select-border-color: $input-border-color !default;

-$custom-select-border-radius: $border-radius !default;

-

-$custom-select-focus-border-color: $input-focus-border-color !default;

-$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;

-

-$custom-select-font-size-sm: 75% !default;

-$custom-select-height-sm: $input-height-sm !default;

-

-$custom-select-font-size-lg: 125% !default;

-$custom-select-height-lg: $input-height-lg !default;

-

-$custom-file-height: $input-height !default;

-$custom-file-focus-border-color: $input-focus-border-color !default;

-$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;

-

-$custom-file-padding-y: $input-btn-padding-y !default;

-$custom-file-padding-x: $input-btn-padding-x !default;

-$custom-file-line-height: $input-btn-line-height !default;

-$custom-file-color: $input-color !default;

-$custom-file-bg: $input-bg !default;

-$custom-file-border-width: $input-btn-border-width !default;

-$custom-file-border-color: $input-border-color !default;

-$custom-file-border-radius: $input-border-radius !default;

-$custom-file-box-shadow: $input-box-shadow !default;

-$custom-file-button-color: $custom-file-color !default;

-$custom-file-button-bg: $input-group-addon-bg !default;

-$custom-file-text: (

- en: "Browse"

-) !default;

-

-

-// Form validation

-$form-feedback-margin-top: $form-text-margin-top !default;

-$form-feedback-font-size: $small-font-size !default;

-$form-feedback-valid-color: theme-color("success") !default;

-$form-feedback-invalid-color: theme-color("danger") !default;

-

-

-// Dropdowns

-//

-// Dropdown menu container and contents.

-

-$dropdown-min-width: 10rem !default;

-$dropdown-padding-y: .5rem !default;

-$dropdown-spacer: .125rem !default;

-$dropdown-bg: $white !default;

-$dropdown-border-color: rgba($black, .15) !default;

-$dropdown-border-radius: $border-radius !default;

-$dropdown-border-width: $border-width !default;

-$dropdown-divider-bg: $gray-200 !default;

-$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;

-

-$dropdown-link-color: $gray-900 !default;

-$dropdown-link-hover-color: darken($gray-900, 5%) !default;

-$dropdown-link-hover-bg: $gray-100 !default;

-

-$dropdown-link-active-color: $component-active-color !default;

-$dropdown-link-active-bg: $component-active-bg !default;

-

-$dropdown-link-disabled-color: $gray-600 !default;

-

-$dropdown-item-padding-y: .25rem !default;

-$dropdown-item-padding-x: 1.5rem !default;

-

-$dropdown-header-color: $gray-600 !default;

-

-

-// Z-index master list

-//

-// Warning: Avoid customizing these values. They're used for a bird's eye view

-// of components dependent on the z-axis and are designed to all work together.

-

-$zindex-dropdown: 1000 !default;

-$zindex-sticky: 1020 !default;

-$zindex-fixed: 1030 !default;

-$zindex-modal-backdrop: 1040 !default;

-$zindex-modal: 1050 !default;

-$zindex-popover: 1060 !default;

-$zindex-tooltip: 1070 !default;

-

-// Navs

-

-$nav-link-padding-y: .5rem !default;

-$nav-link-padding-x: 1rem !default;

-$nav-link-disabled-color: $gray-600 !default;

-

-$nav-tabs-border-color: $gray-300 !default;

-$nav-tabs-border-width: $border-width !default;

-$nav-tabs-border-radius: $border-radius !default;

-$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;

-$nav-tabs-link-active-color: $gray-700 !default;

-$nav-tabs-link-active-bg: $body-bg !default;

-$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;

-

-$nav-pills-border-radius: $border-radius !default;

-$nav-pills-link-active-color: $component-active-color !default;

-$nav-pills-link-active-bg: $component-active-bg !default;

-

-// Navbar

-

-$navbar-padding-y: ($spacer / 2) !default;

-$navbar-padding-x: $spacer !default;

-

-$navbar-nav-link-padding-x: .5rem !default;

-

-$navbar-brand-font-size: $font-size-lg !default;

-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link

-$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;

-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;

-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;

-

-$navbar-toggler-padding-y: .25rem !default;

-$navbar-toggler-padding-x: .75rem !default;

-$navbar-toggler-font-size: $font-size-lg !default;

-$navbar-toggler-border-radius: $btn-border-radius !default;

-

-$navbar-dark-color: rgba($white, .5) !default;

-$navbar-dark-hover-color: rgba($white, .75) !default;

-$navbar-dark-active-color: $white !default;

-$navbar-dark-disabled-color: rgba($white, .25) !default;

-$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-$navbar-dark-toggler-border-color: rgba($white, .1) !default;

-

-$navbar-light-color: rgba($black, .5) !default;

-$navbar-light-hover-color: rgba($black, .7) !default;

-$navbar-light-active-color: rgba($black, .9) !default;

-$navbar-light-disabled-color: rgba($black, .3) !default;

-$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-$navbar-light-toggler-border-color: rgba($black, .1) !default;

-

-// Pagination

-

-$pagination-padding-y: .5rem !default;

-$pagination-padding-x: .75rem !default;

-$pagination-padding-y-sm: .25rem !default;

-$pagination-padding-x-sm: .5rem !default;

-$pagination-padding-y-lg: .75rem !default;

-$pagination-padding-x-lg: 1.5rem !default;

-$pagination-line-height: 1.25 !default;

-

-$pagination-color: $link-color !default;

-$pagination-bg: $white !default;

-$pagination-border-width: $border-width !default;

-$pagination-border-color: $gray-300 !default;

-

-$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;

-

-$pagination-hover-color: $link-hover-color !default;

-$pagination-hover-bg: $gray-200 !default;

-$pagination-hover-border-color: $gray-300 !default;

-

-$pagination-active-color: $component-active-color !default;

-$pagination-active-bg: $component-active-bg !default;

-$pagination-active-border-color: $pagination-active-bg !default;

-

-$pagination-disabled-color: $gray-600 !default;

-$pagination-disabled-bg: $white !default;

-$pagination-disabled-border-color: $gray-300 !default;

-

-

-// Jumbotron

-

-$jumbotron-padding: 2rem !default;

-$jumbotron-bg: $gray-200 !default;

-

-

-// Cards

-

-$card-spacer-y: .75rem !default;

-$card-spacer-x: 1.25rem !default;

-$card-border-width: $border-width !default;

-$card-border-radius: $border-radius !default;

-$card-border-color: rgba($black, .125) !default;

-$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;

-$card-cap-bg: rgba($black, .03) !default;

-$card-bg: $white !default;

-

-$card-img-overlay-padding: 1.25rem !default;

-

-$card-group-margin: ($grid-gutter-width / 2) !default;

-$card-deck-margin: $card-group-margin !default;

-

-$card-columns-count: 3 !default;

-$card-columns-gap: 1.25rem !default;

-$card-columns-margin: $card-spacer-y !default;

-

-

-// Tooltips

-

-$tooltip-font-size: $font-size-sm !default;

-$tooltip-max-width: 200px !default;

-$tooltip-color: $white !default;

-$tooltip-bg: $black !default;

-$tooltip-border-radius: $border-radius !default;

-$tooltip-opacity: .9 !default;

-$tooltip-padding-y: .25rem !default;

-$tooltip-padding-x: .5rem !default;

-$tooltip-margin: 0 !default;

-

-$tooltip-arrow-width: .8rem !default;

-$tooltip-arrow-height: .4rem !default;

-$tooltip-arrow-color: $tooltip-bg !default;

-

-

-// Popovers

-

-$popover-font-size: $font-size-sm !default;

-$popover-bg: $white !default;

-$popover-max-width: 276px !default;

-$popover-border-width: $border-width !default;

-$popover-border-color: rgba($black, .2) !default;

-$popover-border-radius: $border-radius-lg !default;

-$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;

-

-$popover-header-bg: darken($popover-bg, 3%) !default;

-$popover-header-color: $headings-color !default;

-$popover-header-padding-y: .5rem !default;

-$popover-header-padding-x: .75rem !default;

-

-$popover-body-color: $body-color !default;

-$popover-body-padding-y: $popover-header-padding-y !default;

-$popover-body-padding-x: $popover-header-padding-x !default;

-

-$popover-arrow-width: 1rem !default;

-$popover-arrow-height: .5rem !default;

-$popover-arrow-color: $popover-bg !default;

-

-$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;

-

-

-// Badges

-

-$badge-font-size: 75% !default;

-$badge-font-weight: $font-weight-bold !default;

-$badge-padding-y: .25em !default;

-$badge-padding-x: .4em !default;

-$badge-border-radius: $border-radius !default;

-

-$badge-pill-padding-x: .6em !default;

-// Use a higher than normal value to ensure completely rounded edges when

-// customizing padding or font-size on labels.

-$badge-pill-border-radius: 10rem !default;

-

-

-// Modals

-

-// Padding applied to the modal body

-$modal-inner-padding: 1rem !default;

-

-$modal-dialog-margin: .5rem !default;

-$modal-dialog-margin-y-sm-up: 1.75rem !default;

-

-$modal-title-line-height: $line-height-base !default;

-

-$modal-content-bg: $white !default;

-$modal-content-border-color: rgba($black, .2) !default;

-$modal-content-border-width: $border-width !default;

-$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;

-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;

-

-$modal-backdrop-bg: $black !default;

-$modal-backdrop-opacity: .5 !default;

-$modal-header-border-color: $gray-200 !default;

-$modal-footer-border-color: $modal-header-border-color !default;

-$modal-header-border-width: $modal-content-border-width !default;

-$modal-footer-border-width: $modal-header-border-width !default;

-$modal-header-padding: 1rem !default;

-

-$modal-lg: 800px !default;

-$modal-md: 500px !default;

-$modal-sm: 300px !default;

-

-$modal-transition: transform .3s ease-out !default;

-

-

-// Alerts

-//

-// Define alert colors, border radius, and padding.

-

-$alert-padding-y: .75rem !default;

-$alert-padding-x: 1.25rem !default;

-$alert-margin-bottom: 1rem !default;

-$alert-border-radius: $border-radius !default;

-$alert-link-font-weight: $font-weight-bold !default;

-$alert-border-width: $border-width !default;

-

-$alert-bg-level: -10 !default;

-$alert-border-level: -9 !default;

-$alert-color-level: 6 !default;

-

-

-// Progress bars

-

-$progress-height: 1rem !default;

-$progress-font-size: ($font-size-base * .75) !default;

-$progress-bg: $gray-200 !default;

-$progress-border-radius: $border-radius !default;

-$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;

-$progress-bar-color: $white !default;

-$progress-bar-bg: theme-color("primary") !default;

-$progress-bar-animation-timing: 1s linear infinite !default;

-$progress-bar-transition: width .6s ease !default;

-

-// List group

-

-$list-group-bg: $white !default;

-$list-group-border-color: rgba($black, .125) !default;

-$list-group-border-width: $border-width !default;

-$list-group-border-radius: $border-radius !default;

-

-$list-group-item-padding-y: .75rem !default;

-$list-group-item-padding-x: 1.25rem !default;

-

-$list-group-hover-bg: $gray-100 !default;

-$list-group-active-color: $component-active-color !default;

-$list-group-active-bg: $component-active-bg !default;

-$list-group-active-border-color: $list-group-active-bg !default;

-

-$list-group-disabled-color: $gray-600 !default;

-$list-group-disabled-bg: $list-group-bg !default;

-

-$list-group-action-color: $gray-700 !default;

-$list-group-action-hover-color: $list-group-action-color !default;

-

-$list-group-action-active-color: $body-color !default;

-$list-group-action-active-bg: $gray-200 !default;

-

-

-// Image thumbnails

-

-$thumbnail-padding: .25rem !default;

-$thumbnail-bg: $body-bg !default;

-$thumbnail-border-width: $border-width !default;

-$thumbnail-border-color: $gray-300 !default;

-$thumbnail-border-radius: $border-radius !default;

-$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;

-

-

-// Figures

-

-$figure-caption-font-size: 90% !default;

-$figure-caption-color: $gray-600 !default;

-

-

-// Breadcrumbs

-

-$breadcrumb-padding-y: .75rem !default;

-$breadcrumb-padding-x: 1rem !default;

-$breadcrumb-item-padding: .5rem !default;

-

-$breadcrumb-margin-bottom: 1rem !default;

-

-$breadcrumb-bg: $gray-200 !default;

-$breadcrumb-divider-color: $gray-600 !default;

-$breadcrumb-active-color: $gray-600 !default;

-$breadcrumb-divider: "/" !default;

-

-

-// Carousel

-

-$carousel-control-color: $white !default;

-$carousel-control-width: 15% !default;

-$carousel-control-opacity: .5 !default;

-

-$carousel-indicator-width: 30px !default;

-$carousel-indicator-height: 3px !default;

-$carousel-indicator-spacer: 3px !default;

-$carousel-indicator-active-bg: $white !default;

-

-$carousel-caption-width: 70% !default;

-$carousel-caption-color: $white !default;

-

-$carousel-control-icon-width: 20px !default;

-

-$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%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;

-

-$carousel-transition: transform .6s ease !default;

-

-

-// Close

-

-$close-font-size: $font-size-base * 1.5 !default;

-$close-font-weight: $font-weight-bold !default;

-$close-color: $black !default;

-$close-text-shadow: 0 1px 0 $white !default;

-

-// Code

-

-$code-font-size: 87.5% !default;

-$code-color: $pink !default;

-

-$kbd-padding-y: .2rem !default;

-$kbd-padding-x: .4rem !default;

-$kbd-font-size: $code-font-size !default;

-$kbd-color: $white !default;

-$kbd-bg: $gray-900 !default;

-

-$pre-color: $gray-900 !default;

-$pre-scrollable-max-height: 340px !default;

-

-

-// Printing

-$print-page-size: a3 !default;

-$print-body-min-width: map-get($grid-breakpoints, "lg") !default;

-/*!

- * Bootstrap Grid v4.0.0 (https://getbootstrap.com)

- * Copyright 2011-2018 The Bootstrap Authors

- * Copyright 2011-2018 Twitter, Inc.

- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

- */

-

-@at-root {

- @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix

-}

-

-html {

- box-sizing: border-box;

- -ms-overflow-style: scrollbar;

-}

-

-*,

-*::before,

-*::after {

- box-sizing: inherit;

-}

-

-@import "functions";

-@import "variables";

-

-@import "mixins/breakpoints";

-@import "mixins/grid-framework";

-@import "mixins/grid";

-

-@import "grid";

-@import "utilities/display";

-@import "utilities/flex";

-/*!

- * Bootstrap Reboot v4.0.0 (https://getbootstrap.com)

- * Copyright 2011-2018 The Bootstrap Authors

- * Copyright 2011-2018 Twitter, Inc.

- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)

- */

-

-@import "functions";

-@import "variables";

-@import "mixins";

-@import "reboot";

-/*!

- * Bootstrap v4.0.0 (https://getbootstrap.com)

- * Copyright 2011-2018 The Bootstrap Authors

- * Copyright 2011-2018 Twitter, Inc.

- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

- */

-

-@import "functions";

-@import "variables";

-@import "mixins";

-@import "root";

-@import "reboot";

-@import "type";

-@import "images";

-@import "code";

-@import "grid";

-@import "tables";

-@import "forms";

-@import "buttons";

-@import "transitions";

-@import "dropdown";

-@import "button-group";

-@import "input-group";

-@import "custom-forms";

-@import "nav";

-@import "navbar";

-@import "card";

-@import "breadcrumb";

-@import "pagination";

-@import "badge";

-@import "jumbotron";

-@import "alert";

-@import "progress";

-@import "media";

-@import "list-group";

-@import "close";

-@import "modal";

-@import "tooltip";

-@import "popover";

-@import "carousel";

-@import "utilities";

-@import "print";

-@mixin alert-variant($background, $border, $color) {

- color: $color;

- @include gradient-bg($background);

- border-color: $border;

-

- hr {

- border-top-color: darken($border, 5%);

- }

-

- .alert-link {

- color: darken($color, 10%);

- }

-}

-// stylelint-disable declaration-no-important

-

-// Contextual backgrounds

-

-@mixin bg-variant($parent, $color) {

- #{$parent} {

- background-color: $color !important;

- }

- a#{$parent},

- button#{$parent} {

- @include hover-focus {

- background-color: darken($color, 10%) !important;

- }

- }

-}

-

-@mixin bg-gradient-variant($parent, $color) {

- #{$parent} {

- background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;

- }

-}

-@mixin badge-variant($bg) {

- color: color-yiq($bg);

- background-color: $bg;

-

- &[href] {

- @include hover-focus {

- color: color-yiq($bg);

- text-decoration: none;

- background-color: darken($bg, 10%);

- }

- }

-}

-// Single side border-radius

-

-@mixin border-radius($radius: $border-radius) {

- @if $enable-rounded {

- border-radius: $radius;

- }

-}

-

-@mixin border-top-radius($radius) {

- @if $enable-rounded {

- border-top-left-radius: $radius;

- border-top-right-radius: $radius;

- }

-}

-

-@mixin border-right-radius($radius) {

- @if $enable-rounded {

- border-top-right-radius: $radius;

- border-bottom-right-radius: $radius;

- }

-}

-

-@mixin border-bottom-radius($radius) {

- @if $enable-rounded {

- border-bottom-right-radius: $radius;

- border-bottom-left-radius: $radius;

- }

-}

-

-@mixin border-left-radius($radius) {

- @if $enable-rounded {

- border-top-left-radius: $radius;

- border-bottom-left-radius: $radius;

- }

-}

-@mixin box-shadow($shadow...) {

- @if $enable-shadows {

- box-shadow: $shadow;

- }

-}

-// Breakpoint viewport sizes and media queries.

-//

-// Breakpoints are defined as a map of (name: minimum width), order from small to large:

-//

-// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)

-//

-// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

-

-// Name of the next breakpoint, or null for the last breakpoint.

-//

-// >> breakpoint-next(sm)

-// md

-// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

-// md

-// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))

-// md

-@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {

- $n: index($breakpoint-names, $name);

- @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);

-}

-

-// Minimum breakpoint width. Null for the smallest (first) breakpoint.

-//

-// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

-// 576px

-@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {

- $min: map-get($breakpoints, $name);

- @return if($min != 0, $min, null);

-}

-

-// Maximum breakpoint width. Null for the largest (last) breakpoint.

-// The maximum value is calculated as the minimum of the next one less 0.02px

-// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.

-// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max

-// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.

-// See https://bugs.webkit.org/show_bug.cgi?id=178261

-//

-// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

-// 767.98px

-@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {

- $next: breakpoint-next($name, $breakpoints);

- @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);

-}

-

-// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.

-// Useful for making responsive utilities.

-//

-// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

-// "" (Returns a blank string)

-// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))

-// "-sm"

-@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {

- @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");

-}

-

-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.

-// Makes the @content apply to the given breakpoint and wider.

-@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {

- $min: breakpoint-min($name, $breakpoints);

- @if $min {

- @media (min-width: $min) {

- @content;

- }

- } @else {

- @content;

- }

-}

-

-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.

-// Makes the @content apply to the given breakpoint and narrower.

-@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {

- $max: breakpoint-max($name, $breakpoints);

- @if $max {

- @media (max-width: $max) {

- @content;

- }

- } @else {

- @content;

- }

-}

-

-// Media that spans multiple breakpoint widths.

-// Makes the @content apply between the min and max breakpoints

-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {

- $min: breakpoint-min($lower, $breakpoints);

- $max: breakpoint-max($upper, $breakpoints);

-

- @if $min != null and $max != null {

- @media (min-width: $min) and (max-width: $max) {

- @content;

- }

- } @else if $max == null {

- @include media-breakpoint-up($lower, $breakpoints) {

- @content;

- }

- } @else if $min == null {

- @include media-breakpoint-down($upper, $breakpoints) {

- @content;

- }

- }

-}

-

-// Media between the breakpoint's minimum and maximum widths.

-// No minimum for the smallest breakpoint, and no maximum for the largest one.

-// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.

-@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {

- $min: breakpoint-min($name, $breakpoints);

- $max: breakpoint-max($name, $breakpoints);

-

- @if $min != null and $max != null {

- @media (min-width: $min) and (max-width: $max) {

- @content;

- }

- } @else if $max == null {

- @include media-breakpoint-up($name, $breakpoints) {

- @content;

- }

- } @else if $min == null {

- @include media-breakpoint-down($name, $breakpoints) {

- @content;

- }

- }

-}

-// Button variants

-//

-// Easily pump out default styles, as well as :hover, :focus, :active,

-// and disabled options for all buttons

-

-@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%)) {

- color: color-yiq($background);

- @include gradient-bg($background);

- border-color: $border;

- @include box-shadow($btn-box-shadow);

-

- @include hover {

- color: color-yiq($hover-background);

- @include gradient-bg($hover-background);

- border-color: $hover-border;

- }

-

- &:focus,

- &.focus {

- // Avoid using mixin so we can pass custom focus shadow properly

- @if $enable-shadows {

- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);

- } @else {

- box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);

- }

- }

-

- // Disabled comes first so active can properly restyle

- &.disabled,

- &:disabled {

- color: color-yiq($background);

- background-color: $background;

- border-color: $border;

- }

-

- &:not(:disabled):not(.disabled):active,

- &:not(:disabled):not(.disabled).active,

- .show > &.dropdown-toggle {

- color: color-yiq($active-background);

- background-color: $active-background;

- @if $enable-gradients {

- background-image: none; // Remove the gradient for the pressed/active state

- }

- border-color: $active-border;

-

- &:focus {

- // Avoid using mixin so we can pass custom focus shadow properly

- @if $enable-shadows {

- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);

- } @else {

- box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);

- }

- }

- }

-}

-

-@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {

- color: $color;

- background-color: transparent;

- background-image: none;

- border-color: $color;

-

- &:hover {

- color: $color-hover;

- background-color: $active-background;

- border-color: $active-border;

- }

-

- &:focus,

- &.focus {

- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);

- }

-

- &.disabled,

- &:disabled {

- color: $color;

- background-color: transparent;

- }

-

- &:not(:disabled):not(.disabled):active,

- &:not(:disabled):not(.disabled).active,

- .show > &.dropdown-toggle {

- color: color-yiq($active-background);

- background-color: $active-background;

- border-color: $active-border;

-

- &:focus {

- // Avoid using mixin so we can pass custom focus shadow properly

- @if $enable-shadows and $btn-active-box-shadow != none {

- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);

- } @else {

- box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);

- }

- }

- }

-}

-

-// Button sizes

-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {

- padding: $padding-y $padding-x;

- font-size: $font-size;

- line-height: $line-height;

- // Manually declare to provide an override to the browser default

- @if $enable-rounded {

- border-radius: $border-radius;

- } @else {

- border-radius: 0;

- }

-}

-@mixin caret-down {

- border-top: $caret-width solid;

- border-right: $caret-width solid transparent;

- border-bottom: 0;

- border-left: $caret-width solid transparent;

-}

-

-@mixin caret-up {

- border-top: 0;

- border-right: $caret-width solid transparent;

- border-bottom: $caret-width solid;

- border-left: $caret-width solid transparent;

-}

-

-@mixin caret-right {

- border-top: $caret-width solid transparent;

- border-bottom: $caret-width solid transparent;

- border-left: $caret-width solid;

-}

-

-@mixin caret-left {

- border-top: $caret-width solid transparent;

- border-right: $caret-width solid;

- border-bottom: $caret-width solid transparent;

-}

-

-@mixin caret($direction: down) {

- @if $enable-caret {

- &::after {

- display: inline-block;

- width: 0;

- height: 0;

- margin-left: $caret-width * .85;

- vertical-align: $caret-width * .85;

- content: "";

- @if $direction == down {

- @include caret-down;

- } @else if $direction == up {

- @include caret-up;

- } @else if $direction == right {

- @include caret-right;

- }

- }

-

- @if $direction == left {

- &::after {

- display: none;

- }

-

- &::before {

- display: inline-block;

- width: 0;

- height: 0;

- margin-right: $caret-width * .85;

- vertical-align: $caret-width * .85;

- content: "";

- @include caret-left;

- }

- }

-

- &:empty::after {

- margin-left: 0;

- }

- }

-}

-@mixin clearfix() {

- &::after {

- display: block;

- clear: both;

- content: "";

- }

-}

-// stylelint-disable declaration-no-important

-

-@mixin float-left {

- float: left !important;

-}

-@mixin float-right {

- float: right !important;

-}

-@mixin float-none {

- float: none !important;

-}

-// Form control focus state

-//

-// Generate a customized focus state and for any input with the specified color,

-// which defaults to the `$input-focus-border-color` variable.

-//

-// We highly encourage you to not customize the default value, but instead use

-// this to tweak colors on an as-needed basis. This aesthetic change is based on

-// WebKit's default styles, but applicable to a wider range of browsers. Its

-// usability and accessibility should be taken into account with any change.

-//

-// Example usage: change the default blue border and shadow to white for better

-// contrast against a dark gray background.

-@mixin form-control-focus() {

- &:focus {

- color: $input-focus-color;

- background-color: $input-focus-bg;

- border-color: $input-focus-border-color;

- outline: 0;

- // Avoid using mixin so we can pass custom focus shadow properly

- @if $enable-shadows {

- box-shadow: $input-box-shadow, $input-focus-box-shadow;

- } @else {

- box-shadow: $input-focus-box-shadow;

- }

- }

-}

-

-

-@mixin form-validation-state($state, $color) {

- .#{$state}-feedback {

- display: none;

- width: 100%;

- margin-top: $form-feedback-margin-top;

- font-size: $form-feedback-font-size;

- color: $color;

- }

-

- .#{$state}-tooltip {

- position: absolute;

- top: 100%;

- z-index: 5;

- display: none;

- max-width: 100%; // Contain to parent when possible

- padding: .5rem;

- margin-top: .1rem;

- font-size: .875rem;

- line-height: 1;

- color: #fff;

- background-color: rgba($color, .8);

- border-radius: .2rem;

- }

-

- .form-control,

- .custom-select {

- .was-validated &:#{$state},

- &.is-#{$state} {

- border-color: $color;

-

- &:focus {

- border-color: $color;

- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);

- }

-

- ~ .#{$state}-feedback,

- ~ .#{$state}-tooltip {

- display: block;

- }

- }

- }

-

- .form-check-input {

- .was-validated &:#{$state},

- &.is-#{$state} {

- ~ .form-check-label {

- color: $color;

- }

-

- ~ .#{$state}-feedback,

- ~ .#{$state}-tooltip {

- display: block;

- }

- }

- }

-

- .custom-control-input {

- .was-validated &:#{$state},

- &.is-#{$state} {

- ~ .custom-control-label {

- color: $color;

-

- &::before {

- background-color: lighten($color, 25%);

- }

- }

-

- ~ .#{$state}-feedback,

- ~ .#{$state}-tooltip {

- display: block;

- }

-

- &:checked {

- ~ .custom-control-label::before {

- @include gradient-bg(lighten($color, 10%));

- }

- }

-

- &:focus {

- ~ .custom-control-label::before {

- box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);

- }

- }

- }

- }

-

- // custom file

- .custom-file-input {

- .was-validated &:#{$state},

- &.is-#{$state} {

- ~ .custom-file-label {

- border-color: $color;

-

- &::before { border-color: inherit; }

- }

-

- ~ .#{$state}-feedback,

- ~ .#{$state}-tooltip {

- display: block;

- }

-

- &:focus {

- ~ .custom-file-label {

- box-shadow: 0 0 0 $input-focus-width rgba($color, .25);

- }

- }

- }

- }

-}

-// Gradients

-

-@mixin gradient-bg($color) {

- @if $enable-gradients {

- background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;

- } @else {

- background-color: $color;

- }

-}

-

-// Horizontal gradient, from left to right

-//

-// Creates two color stops, start and end, by specifying a color and position for each color stop.

-@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {

- background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);

- background-repeat: repeat-x;

-}

-

-// Vertical gradient, from top to bottom

-//

-// Creates two color stops, start and end, by specifying a color and position for each color stop.

-@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {

- background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);

- background-repeat: repeat-x;

-}

-

-@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {

- background-image: linear-gradient($deg, $start-color, $end-color);

- background-repeat: repeat-x;

-}

-@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {

- background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);

- background-repeat: no-repeat;

-}

-@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {

- background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);

- background-repeat: no-repeat;

-}

-@mixin gradient-radial($inner-color: #555, $outer-color: #333) {

- background-image: radial-gradient(circle, $inner-color, $outer-color);

- background-repeat: no-repeat;

-}

-@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {

- background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);

-}

-// Framework grid generation

-//

-// Used only by Bootstrap to generate the correct number of grid classes given

-// any value of `$grid-columns`.

-

-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

- // Common properties for all breakpoints

- %grid-column {

- position: relative;

- width: 100%;

- min-height: 1px; // Prevent columns from collapsing when empty

- padding-right: ($gutter / 2);

- padding-left: ($gutter / 2);

- }

-

- @each $breakpoint in map-keys($breakpoints) {

- $infix: breakpoint-infix($breakpoint, $breakpoints);

-

- // Allow columns to stretch full width below their breakpoints

- @for $i from 1 through $columns {

- .col#{$infix}-#{$i} {

- @extend %grid-column;

- }

- }

- .col#{$infix},

- .col#{$infix}-auto {

- @extend %grid-column;

- }

-

- @include media-breakpoint-up($breakpoint, $breakpoints) {

- // Provide basic `.col-{bp}` classes for equal-width flexbox columns

- .col#{$infix} {

- flex-basis: 0;

- flex-grow: 1;

- max-width: 100%;

- }

- .col#{$infix}-auto {

- flex: 0 0 auto;

- width: auto;

- max-width: none; // Reset earlier grid tiers

- }

-

- @for $i from 1 through $columns {

- .col#{$infix}-#{$i} {

- @include make-col($i, $columns);

- }

- }

-

- .order#{$infix}-first { order: -1; }

-

- .order#{$infix}-last { order: $columns + 1; }

-

- @for $i from 0 through $columns {

- .order#{$infix}-#{$i} { order: $i; }

- }

-

- // `$columns - 1` because offsetting by the width of an entire row isn't possible

- @for $i from 0 through ($columns - 1) {

- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0

- .offset#{$infix}-#{$i} {

- @include make-col-offset($i, $columns);

- }

- }

- }

- }

- }

-}

-/// Grid system

-//

-// Generate semantic grid columns with these mixins.

-

-@mixin make-container() {

- width: 100%;

- padding-right: ($grid-gutter-width / 2);

- padding-left: ($grid-gutter-width / 2);

- margin-right: auto;

- margin-left: auto;

-}

-

-

-// For each breakpoint, define the maximum width of the container in a media query

-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {

- @each $breakpoint, $container-max-width in $max-widths {

- @include media-breakpoint-up($breakpoint, $breakpoints) {

- max-width: $container-max-width;

- }

- }

-}

-

-@mixin make-row() {

- display: flex;

- flex-wrap: wrap;

- margin-right: ($grid-gutter-width / -2);

- margin-left: ($grid-gutter-width / -2);

-}

-

-@mixin make-col-ready() {

- position: relative;

- // Prevent columns from becoming too narrow when at smaller grid tiers by

- // always setting `width: 100%;`. This works because we use `flex` values

- // later on to override this initial width.

- width: 100%;

- min-height: 1px; // Prevent collapsing

- padding-right: ($grid-gutter-width / 2);

- padding-left: ($grid-gutter-width / 2);

-}

-

-@mixin make-col($size, $columns: $grid-columns) {

- flex: 0 0 percentage($size / $columns);

- // Add a `max-width` to ensure content within each column does not blow out

- // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari

- // do not appear to require this.

- max-width: percentage($size / $columns);

-}

-

-@mixin make-col-offset($size, $columns: $grid-columns) {

- $num: $size / $columns;

- margin-left: if($num == 0, 0, percentage($num));

-}

-// stylelint-disable indentation

-

-// Hover mixin and `$enable-hover-media-query` are deprecated.

-//

-// Origally added during our alphas and maintained during betas, this mixin was

-// designed to prevent `:hover` stickiness on iOS—an issue where hover styles

-// would persist after initial touch.

-//

-// For backward compatibility, we've kept these mixins and updated them to

-// always return their regular psuedo-classes instead of a shimmed media query.

-//

-// Issue: https://github.com/twbs/bootstrap/issues/25195

-

-@mixin hover {

- &:hover { @content; }

-}

-

-@mixin hover-focus {

- &:hover,

- &:focus {

- @content;

- }

-}

-

-@mixin plain-hover-focus {

- &,

- &:hover,

- &:focus {

- @content;

- }

-}

-

-@mixin hover-focus-active {

- &:hover,

- &:focus,

- &:active {

- @content;

- }

-}

-// Image Mixins

-// - Responsive image

-// - Retina image

-

-

-// Responsive image

-//

-// Keep images from scaling beyond the width of their parents.

-

-@mixin img-fluid {

- // Part 1: Set a maximum relative to the parent

- max-width: 100%;

- // Part 2: Override the height to auto, otherwise images will be stretched

- // when setting a width and height attribute on the img element.

- height: auto;

-}

-

-

-// Retina image

-//

-// Short retina mixin for setting background-image and -size.

-

-// stylelint-disable indentation, media-query-list-comma-newline-after

-@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {

- background-image: url($file-1x);

-

- // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,

- // but doesn't convert dppx=>dpi.

- // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.

- // Compatibility info: https://caniuse.com/#feat=css-media-resolution

- @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx

- only screen and (min-resolution: 2dppx) { // Standardized

- background-image: url($file-2x);

- background-size: $width-1x $height-1x;

- }

-}

-// List Groups

-

-@mixin list-group-item-variant($state, $background, $color) {

- .list-group-item-#{$state} {

- color: $color;

- background-color: $background;

-

- &.list-group-item-action {

- @include hover-focus {

- color: $color;

- background-color: darken($background, 5%);

- }

-

- &.active {

- color: #fff;

- background-color: $color;

- border-color: $color;

- }

- }

- }

-}

-// Lists

-

-// Unstyled keeps list items block level, just removes default browser padding and list-style

-@mixin list-unstyled {

- padding-left: 0;

- list-style: none;

-}

-// Horizontal dividers

-//

-// Dividers (basically an hr) within dropdowns and nav lists

-

-@mixin nav-divider($color: #e5e5e5) {

- height: 0;

- margin: ($spacer / 2) 0;

- overflow: hidden;

- border-top: 1px solid $color;

-}

-// Navbar vertical align

-//

-// Vertically center elements in the navbar.

-// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`

-// to calculate the appropriate top margin.

-

-// @mixin navbar-vertical-align($element-height) {

-// margin-top: (($navbar-height - $element-height) / 2);

-// margin-bottom: (($navbar-height - $element-height) / 2);

-// }

-// Pagination

-

-@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {

- .page-link {

- padding: $padding-y $padding-x;

- font-size: $font-size;

- line-height: $line-height;

- }

-

- .page-item {

- &:first-child {

- .page-link {

- @include border-left-radius($border-radius);

- }

- }

- &:last-child {

- .page-link {

- @include border-right-radius($border-radius);

- }

- }

- }

-}

-@mixin reset-text {

- font-family: $font-family-base;

- // We deliberately do NOT reset font-size or word-wrap.

- font-style: normal;

- font-weight: $font-weight-normal;

- line-height: $line-height-base;

- text-align: left; // Fallback for where `start` is not supported

- text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties

- text-decoration: none;

- text-shadow: none;

- text-transform: none;

- letter-spacing: normal;

- word-break: normal;

- word-spacing: normal;

- white-space: normal;

- line-break: auto;

-}

-// Resize anything

-

-@mixin resizable($direction) {

- overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`

- resize: $direction; // Options: horizontal, vertical, both

-}

-// Only display content to screen readers

-//

-// See: http://a11yproject.com/posts/how-to-hide-content/

-// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/

-

-@mixin sr-only {

- position: absolute;

- width: 1px;

- height: 1px;

- padding: 0;

- overflow: hidden;

- clip: rect(0, 0, 0, 0);

- white-space: nowrap;

- clip-path: inset(50%);

- border: 0;

-}

-

-// Use in conjunction with .sr-only to only display content when it's focused.

-//

-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1

-//

-// Credit: HTML5 Boilerplate

-

-@mixin sr-only-focusable {

- &:active,

- &:focus {

- position: static;

- width: auto;

- height: auto;

- overflow: visible;

- clip: auto;

- white-space: normal;

- clip-path: none;

- }

-}

-// Sizing shortcuts

-

-@mixin size($width, $height: $width) {

- width: $width;

- height: $height;

-}

-// Tables

-

-@mixin table-row-variant($state, $background) {

- // Exact selectors below required to override `.table-striped` and prevent

- // inheritance to nested tables.

- .table-#{$state} {

- &,

- > th,

- > td {

- background-color: $background;

- }

- }

-

- // Hover states for `.table-hover`

- // Note: this is not available for cells or rows within `thead` or `tfoot`.

- .table-hover {

- $hover-background: darken($background, 5%);

-

- .table-#{$state} {

- @include hover {

- background-color: $hover-background;

-

- > td,

- > th {

- background-color: $hover-background;

- }

- }

- }

- }

-}

-// stylelint-disable declaration-no-important

-

-// Typography

-

-@mixin text-emphasis-variant($parent, $color) {

- #{$parent} {

- color: $color !important;

- }

- a#{$parent} {

- @include hover-focus {

- color: darken($color, 10%) !important;

- }

- }

-}

-// CSS image replacement

-@mixin text-hide() {

- // stylelint-disable-next-line font-family-no-missing-generic-family-keyword

- font: 0/0 a;

- color: transparent;

- text-shadow: none;

- background-color: transparent;

- border: 0;

-}

-// Text truncate

-// Requires inline-block or block for proper styling

-

-@mixin text-truncate() {

- overflow: hidden;

- text-overflow: ellipsis;

- white-space: nowrap;

-}

-@mixin transition($transition...) {

- @if $enable-transitions {

- @if length($transition) == 0 {

- transition: $transition-base;

- } @else {

- transition: $transition;

- }

- }

-}

-// stylelint-disable declaration-no-important

-

-// Visibility

-

-@mixin invisible($visibility) {

- visibility: $visibility !important;

-}

-// stylelint-disable declaration-no-important

-

-.align-baseline { vertical-align: baseline !important; } // Browser default

-.align-top { vertical-align: top !important; }

-.align-middle { vertical-align: middle !important; }

-.align-bottom { vertical-align: bottom !important; }

-.align-text-bottom { vertical-align: text-bottom !important; }

-.align-text-top { vertical-align: text-top !important; }

-// stylelint-disable declaration-no-important

-

-@each $color, $value in $theme-colors {

- @include bg-variant(".bg-#{$color}", $value);

-}

-

-@if $enable-gradients {

- @each $color, $value in $theme-colors {

- @include bg-gradient-variant(".bg-gradient-#{$color}", $value);

- }

-}

-

-.bg-white {

- background-color: $white !important;

-}

-

-.bg-transparent {

- background-color: transparent !important;

-}

-// stylelint-disable declaration-no-important

-

-//

-// Border

-//

-

-.border { border: $border-width solid $border-color !important; }

-.border-top { border-top: $border-width solid $border-color !important; }

-.border-right { border-right: $border-width solid $border-color !important; }

-.border-bottom { border-bottom: $border-width solid $border-color !important; }

-.border-left { border-left: $border-width solid $border-color !important; }

-

-.border-0 { border: 0 !important; }

-.border-top-0 { border-top: 0 !important; }

-.border-right-0 { border-right: 0 !important; }

-.border-bottom-0 { border-bottom: 0 !important; }

-.border-left-0 { border-left: 0 !important; }

-

-@each $color, $value in $theme-colors {

- .border-#{$color} {

- border-color: $value !important;

- }

-}

-

-.border-white {

- border-color: $white !important;

-}

-

-//

-// Border-radius

-//

-

-.rounded {

- border-radius: $border-radius !important;

-}

-.rounded-top {

- border-top-left-radius: $border-radius !important;

- border-top-right-radius: $border-radius !important;

-}

-.rounded-right {

- border-top-right-radius: $border-radius !important;

- border-bottom-right-radius: $border-radius !important;

-}

-.rounded-bottom {

- border-bottom-right-radius: $border-radius !important;

- border-bottom-left-radius: $border-radius !important;

-}

-.rounded-left {

- border-top-left-radius: $border-radius !important;

- border-bottom-left-radius: $border-radius !important;

-}

-

-.rounded-circle {

- border-radius: 50% !important;

-}

-

-.rounded-0 {

- border-radius: 0 !important;

-}

-.clearfix {

- @include clearfix();

-}

-// stylelint-disable declaration-no-important

-

-//

-// Utilities for common `display` values

-//

-

-@each $breakpoint in map-keys($grid-breakpoints) {

- @include media-breakpoint-up($breakpoint) {

- $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

-

- .d#{$infix}-none { display: none !important; }

- .d#{$infix}-inline { display: inline !important; }

- .d#{$infix}-inline-block { display: inline-block !important; }

- .d#{$infix}-block { display: block !important; }

- .d#{$infix}-table { display: table !important; }

- .d#{$infix}-table-row { display: table-row !important; }

- .d#{$infix}-table-cell { display: table-cell !important; }

- .d#{$infix}-flex { display: flex !important; }

- .d#{$infix}-inline-flex { display: inline-flex !important; }

- }

-}

-

-

-//

-// Utilities for toggling `display` in print

-//