From 20a7903573fccf2f94f5bf27b868b77584773e29 Mon Sep 17 00:00:00 2001 From: mokaddem Date: Tue, 28 Sep 2021 09:23:02 +0200 Subject: [PATCH] chg: [instance:settings] Support of BS5 in setting page --- templates/Instance/settings.php | 27 +- templates/element/Settings/fieldGroup.php | 22 +- templates/layout/default.php | 2 +- webroot/css/bootstrap-additional.css | 207 -- webroot/css/main.css | 72 - webroot/css/themes/bootstrap-additional.css | 2633 +++++++++++++++++ webroot/js/bootstrap-helper.js | 8 +- webroot/theme/scss/bootstrap-additional.scss | 144 + webroot/theme/scss/mixins/_callout.scss | 4 + .../theme/scss/mixins/_forms-severity.scss | 32 + webroot/theme/scss/mixins/_toast.scss | 10 + 11 files changed, 2847 insertions(+), 314 deletions(-) create mode 100644 webroot/css/themes/bootstrap-additional.css create mode 100644 webroot/theme/scss/bootstrap-additional.scss create mode 100644 webroot/theme/scss/mixins/_callout.scss create mode 100644 webroot/theme/scss/mixins/_forms-severity.scss create mode 100644 webroot/theme/scss/mixins/_toast.scss diff --git a/templates/Instance/settings.php b/templates/Instance/settings.php index 7057eca..2c4e860 100644 --- a/templates/Instance/settings.php +++ b/templates/Instance/settings.php @@ -158,13 +158,13 @@ function getResolvableID($sectionName, $panelName=false) } }) - $('.tab-content .input-group-actions .btn-save-setting').click(function() { + $('.tab-content .setting-group .btn-save-setting').click(function() { const $input = $(this).closest('.input-group').find('input, select') const settingName = $input.data('setting-name') const settingValue = $input.val() saveSetting(this, $input, settingName, settingValue) }) - $('.tab-content .input-group-actions .btn-reset-setting').click(function() { + $('.tab-content .setting-group .btn-reset-setting').click(function() { const $btn = $(this) const $input = $btn.closest('.input-group').find('input, select') let oldValue = settingsFlattened[$input.data('setting-name')].value @@ -213,34 +213,31 @@ function getResolvableID($sectionName, $panelName=false) function removeWarnings($input) { const $inputGroup = $input.closest('.input-group') - const $inputGroupAppend = $inputGroup.find('.input-group-actions') - const $saveButton = $inputGroup.find('button.btn-save-setting') + const $btnSettingAction = $inputGroup.find('.btn-setting-action') + const $saveButton = $('.setting-group button.btn-save-setting') $input.removeClass(['is-invalid', 'border-warning', 'border-danger', 'border-info', 'warning', 'info']) - $inputGroupAppend.removeClass('d-none') + $btnSettingAction.removeClass('d-none') if ($input.is('select') && $input.find('option:selected').data('is-empty-option') == 1) { - $inputGroupAppend.addClass('d-none') // hide save button if empty selection picked + $btnSettingAction.addClass('d-none') // hide save button if empty selection picked } $inputGroup.parent().find('.invalid-feedback').removeClass('d-block') } function restoreWarnings($input) { const $inputGroup = $input.closest('.input-group') - const $inputGroupAppend = $inputGroup.find('.input-group-actions') - const $saveButton = $inputGroup.find('button.btn-save-setting') + const $btnSettingAction = $inputGroup.find('.btn-setting-action') + const $saveButton = $('.setting-group button.btn-save-setting') const setting = settingsFlattened[$input.data('setting-name')] if (setting.error) { borderVariant = setting.severity !== undefined ? variantFromSeverity[setting.severity] : 'warning' $input.addClass(['is-invalid', `border-${borderVariant}`, borderVariant]) - if (setting.severity == 'warning') { - $input.addClass('warning') - } $inputGroup.parent().find('.invalid-feedback').addClass('d-block').text(setting.errorMessage) } else { removeWarnings($input) } const $callout = $input.closest('.settings-group') updateCalloutColors($callout) - $inputGroupAppend.addClass('d-none') + $btnSettingAction.addClass('d-none') } function updateCalloutColors($callout) { @@ -285,12 +282,6 @@ function getResolvableID($sectionName, $panelName=false) .input-group-actions { z-index: 5; } - a.btn-reset-setting { - left: -1.25em; - } - .custom-select ~ div > a.btn-reset-setting { - left: -2.5em; - } .form-control[type="number"] ~ div > a.btn-reset-setting { left: -3em; } diff --git a/templates/element/Settings/fieldGroup.php b/templates/element/Settings/fieldGroup.php index dbd889b..cd60977 100644 --- a/templates/element/Settings/fieldGroup.php +++ b/templates/element/Settings/fieldGroup.php @@ -40,18 +40,16 @@ 'settingName' => $settingName, ]); - $inputGroupSave = $this->Bootstrap->genNode('div', [ - 'class' => ['d-none', 'position-relative', 'input-group-actions'], - ], implode('', [ - $this->Bootstrap->genNode('a', [ - 'class' => ['position-absolute', 'fas fa-times', 'p-abs-center-y', 'text-reset text-decoration-none', 'btn-reset-setting'], - 'href' => '#', - ]), - $this->Bootstrap->genNode('button', [ - 'class' => ['btn', 'btn-success', 'btn-save-setting'], - 'type' => 'button', - ], __('save')), - ])); + $inputGroupSave = $this->Bootstrap->button([ + 'icon' => 'times', + 'variant' => 'secondary', + 'class' => ['btn-setting-action', 'btn-reset-setting', 'd-none'], + ]); + $inputGroupSave .= $this->Bootstrap->button([ + 'text' => __('save'), + 'variant' => 'success', + 'class' => ['btn-setting-action', 'btn-save-setting', 'd-none'], + ]); $inputGroup = $this->Bootstrap->genNode('div', [ 'class' => ['input-group'], ], implode('', [$input, $inputGroupSave])); diff --git a/templates/layout/default.php b/templates/layout/default.php index 20f47ee..bd41336 100644 --- a/templates/layout/default.php +++ b/templates/layout/default.php @@ -61,7 +61,7 @@ $cakeDescription = 'Cerebrate'; fetch('meta') ?> fetch('css') ?> fetch('script') ?> - Html->css('bootstrap-additional.css') ?> + Html->css('themes/bootstrap-additional.css') ?> Html->script('Tags.tagging') ?> Html->css('Tags.tagging') ?> diff --git a/webroot/css/bootstrap-additional.css b/webroot/css/bootstrap-additional.css index ef148bb..e69de29 100644 --- a/webroot/css/bootstrap-additional.css +++ b/webroot/css/bootstrap-additional.css @@ -1,207 +0,0 @@ -/* utils */ -.mw-75 { - max-width: 75% !important; - } -.mw-50 { - max-width: 50% !important; -} -.mw-25 { - max-width: 25% !important; -} -.mh-75 { - max-height: 75% !important; -} -.mh-50 { - max-height: 50% !important; -} -.mh-25 { - max-height: 25% !important; -} - -/* Toast */ -.toast { - min-width: 250px; -} -.toast-primary { - color: #004085; - background-color: #cce5ff; - border-color: #b8daff; -} -.toast-primary strong { - color: #002752; -} -.toast-secondary { - color: #383d41; - background-color: #e2e3e5; - border-color: #d6d8db; -} -.toast-secondary strong { - color: #202326; -} -.toast-success { - color: #155724 !important; - background-color: #d4edda !important; - border-color: #c3e6cb !important; -} -.toast-success strong { - color: #0b2e13; -} -.toast-info { - color: #0c5460; - background-color: #d1ecf1; - border-color: #bee5eb; -} -.toast-info strong { - color: #062c33; -} -.toast-warning { - color: #856404; - background-color: #fff3cd; - border-color: #ffeeba; -} -.toast-warning strong { - color: #533f03; -} -.toast-danger { - color: #721c24; - background-color: #f8d7da; - border-color: #f5c6cb; -} -.toast-danger strong { - color: #491217; -} -.toast-light { - color: #818182; - background-color: #fefefe; - border-color: #fdfdfe; -} -.toast-light strong { - color: #686868; -} -.toast-dark { - color: #1b1e21; - background-color: #d6d8d9; - border-color: #c6c8ca; -} -.toast-dark strong { - color: #040505; -} - -div.progress-timeline { - padding: 0.2em 0.2em 0.5em 0.2em; -} -div.progress-timeline ul { - position: relative; - padding: 0; -} -div.progress-timeline li { - list-style-type: none; - position: relative -} -div.progress-timeline li.progress-inactive { - opacity: 0.5; -} -div.progress-timeline .progress-line { - height: 2px; - /* background: gray; */ -} -div.progress-timeline .progress-line.progress-inactive { - opacity: 0.5; -} - -.callout { - border: 1px solid #00000000; - border-left-color: var(--bs-light); - border-left-width: 1px; - border-left-width: .25rem; - border-radius: .25rem; -} -.callout-primary { - border-left-color: var(--bs-primary); -} -.callout-info { - border-left-color: var(--bs-info); -} -.callout-success { - border-left-color: var(--bs-success); -} -.callout-warning { - border-left-color: var(--bs-warning); -} -.callout-danger { - border-left-color: var(--bs-danger); -} -.callout-dark { - border-left-color: var(--bs-dark); -} -.callout-light { - border-left-color: var(--bs-light); -} - -.form-control.is-invalid.warning { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e") -} -.form-control.is-invalid.warning:focus { - box-shadow: 0 0 0 0.2rem #ffc10740; -} - -.form-control.is-invalid.info { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e") -} -.form-control.is-invalid.info:focus { - box-shadow: 0 0 0 0.2rem #17a2b840; -} - -.custom-select.is-invalid.warning { - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} -.custom-select.is-invalid.info { - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); -} - -.form-check-input.is-invalid.warning ~ .form-check-label { - color: unset; -} -.form-check-input.is-invalid.warning ~ .form-check-label::before { - border-color: #ffc107; -} -.form-check-input.is-invalid.warning:checked ~ .form-check-label::before { - background-color: #ffc107; -} -.form-check-input.is-invalid.warning:focus:not(:checked) ~ .form-check-label::before { - border-color: #ffc107; -} -.form-check-input.is-invalid.warning:focus ~ .form-check-label::before { - box-shadow: 0 0 0 0.2rem #ffc10740; -} -.form-check-input.is-invalid.info ~ .form-check-label { - color: unset; -} -.form-check-input.is-invalid.info ~ .form-check-label::before { - border-color: #17a2b8; -} -.form-check-input.is-invalid.info:checked ~ .form-check-label::before { - background-color: #17a2b8; -} -.form-check-input.is-invalid.info:focus:not(:checked) ~ .form-check-label::before { - border-color: #17a2b8; -} -.form-check-input.is-invalid.info:focus ~ .form-check-label::before { - box-shadow: 0 0 0 0.2rem #17a2b840; -} - -.p-abs-center-y { - top: 50%; - transform: translateY(-50%); -} - -.p-abs-center-x { - left: 50%; - transform: translateX(-50%); -} - -.p-abs-center-both { - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); -} \ No newline at end of file diff --git a/webroot/css/main.css b/webroot/css/main.css index 9eff40c..05951e9 100644 --- a/webroot/css/main.css +++ b/webroot/css/main.css @@ -21,78 +21,6 @@ color:black; } -/* .sidebar {} - -.side-bar-ul { - top: 70px; - left:0; - margin: 0; - padding: 0; - list-style: none; -} - -.side-bar-ul li { - line-height: 40px; -} - -.side-bar-ul .sidebar-header { - padding-left: 10px; - color: black; -} - -.side-bar-ul .sidebar-element { - padding-left: 20px; -} - -.side-bar-ul li a { - display: block; - text-decoration: none; -} - -.sidebar-header a { - color: black; -} - -.sidebar-element a { - color: #999999; -} - -.side-bar-ul li a:hover { - text-decoration: none; - color: #fff; -} - -.side-bar-ul li:hover { - background: #007bff; -} - -.side-bar-ul .active { - background: #007bff; -} - -.side-bar-ul .active a { - color: white !important; -} - -.side-bar-ul li a:active, .side-bar-ul li a:focus { - text-decoration: none; -} - -.side-bar-ul>.sidebar-brand { - height: 65px; - font-size: 18px; - line-height: 60px; -} - -.side-bar-ul>.sidebar-brand a { - color: #999999; -} - -.side-bar-ul>.sidebar-brand a:hover { - color: #fff; - background: none; -} */ - @media(min-width:768px) { #wrapper { padding-left: 0; diff --git a/webroot/css/themes/bootstrap-additional.css b/webroot/css/themes/bootstrap-additional.css new file mode 100644 index 0000000..42217d9 --- /dev/null +++ b/webroot/css/themes/bootstrap-additional.css @@ -0,0 +1,2633 @@ +.align-baseline { + vertical-align: baseline !important; } + +.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; } + +.bg-primary { + background-color: #007bff !important; } + +a.bg-primary:hover, a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #0062cc !important; } + +.bg-secondary { + background-color: #6c757d !important; } + +a.bg-secondary:hover, a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { + background-color: #545b62 !important; } + +.bg-success { + background-color: #28a745 !important; } + +a.bg-success:hover, a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { + background-color: #1e7e34 !important; } + +.bg-info { + background-color: #17a2b8 !important; } + +a.bg-info:hover, a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { + background-color: #117a8b !important; } + +.bg-warning { + background-color: #ffc107 !important; } + +a.bg-warning:hover, a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { + background-color: #d39e00 !important; } + +.bg-danger { + background-color: #dc3545 !important; } + +a.bg-danger:hover, a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: #bd2130 !important; } + +.bg-light { + background-color: #f8f9fa !important; } + +a.bg-light:hover, a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { + background-color: #dae0e5 !important; } + +.bg-dark { + background-color: #343a40 !important; } + +a.bg-dark:hover, a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { + background-color: #1d2124 !important; } + +.bg-white { + background-color: #fff !important; } + +.bg-transparent { + background-color: transparent !important; } + +.border { + border: 1px solid #dee2e6 !important; } + +.border-top { + border-top: 1px solid #dee2e6 !important; } + +.border-right { + border-right: 1px solid #dee2e6 !important; } + +.border-bottom { + border-bottom: 1px solid #dee2e6 !important; } + +.border-left { + border-left: 1px solid #dee2e6 !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; } + +.border-primary { + border-color: #007bff !important; } + +.border-secondary { + border-color: #6c757d !important; } + +.border-success { + border-color: #28a745 !important; } + +.border-info { + border-color: #17a2b8 !important; } + +.border-warning { + border-color: #ffc107 !important; } + +.border-danger { + border-color: #dc3545 !important; } + +.border-light { + border-color: #f8f9fa !important; } + +.border-dark { + border-color: #343a40 !important; } + +.border-white { + border-color: #fff !important; } + +.rounded-sm { + border-radius: 0.2rem !important; } + +.rounded { + border-radius: 0.25rem !important; } + +.rounded-top { + border-top-left-radius: 0.25rem !important; + border-top-right-radius: 0.25rem !important; } + +.rounded-right { + border-top-right-radius: 0.25rem !important; + border-bottom-right-radius: 0.25rem !important; } + +.rounded-bottom { + border-bottom-right-radius: 0.25rem !important; + border-bottom-left-radius: 0.25rem !important; } + +.rounded-left { + border-top-left-radius: 0.25rem !important; + border-bottom-left-radius: 0.25rem !important; } + +.rounded-lg { + border-radius: 0.3rem !important; } + +.rounded-circle { + border-radius: 50% !important; } + +.rounded-pill { + border-radius: 50rem !important; } + +.rounded-0 { + border-radius: 0 !important; } + +.clearfix::after { + display: block; + clear: both; + content: ""; } + +.d-none { + display: none !important; } + +.d-inline { + display: inline !important; } + +.d-inline-block { + display: inline-block !important; } + +.d-block { + display: block !important; } + +.d-table { + display: table !important; } + +.d-table-row { + display: table-row !important; } + +.d-table-cell { + display: table-cell !important; } + +.d-flex { + display: flex !important; } + +.d-inline-flex { + display: inline-flex !important; } + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; } + .d-sm-inline { + display: inline !important; } + .d-sm-inline-block { + display: inline-block !important; } + .d-sm-block { + display: block !important; } + .d-sm-table { + display: table !important; } + .d-sm-table-row { + display: table-row !important; } + .d-sm-table-cell { + display: table-cell !important; } + .d-sm-flex { + display: flex !important; } + .d-sm-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 768px) { + .d-md-none { + display: none !important; } + .d-md-inline { + display: inline !important; } + .d-md-inline-block { + display: inline-block !important; } + .d-md-block { + display: block !important; } + .d-md-table { + display: table !important; } + .d-md-table-row { + display: table-row !important; } + .d-md-table-cell { + display: table-cell !important; } + .d-md-flex { + display: flex !important; } + .d-md-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; } + .d-lg-inline { + display: inline !important; } + .d-lg-inline-block { + display: inline-block !important; } + .d-lg-block { + display: block !important; } + .d-lg-table { + display: table !important; } + .d-lg-table-row { + display: table-row !important; } + .d-lg-table-cell { + display: table-cell !important; } + .d-lg-flex { + display: flex !important; } + .d-lg-inline-flex { + display: inline-flex !important; } } + +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; } + .d-xl-inline { + display: inline !important; } + .d-xl-inline-block { + display: inline-block !important; } + .d-xl-block { + display: block !important; } + .d-xl-table { + display: table !important; } + .d-xl-table-row { + display: table-row !important; } + .d-xl-table-cell { + display: table-cell !important; } + .d-xl-flex { + display: flex !important; } + .d-xl-inline-flex { + display: inline-flex !important; } } + +@media print { + .d-print-none { + display: none !important; } + .d-print-inline { + display: inline !important; } + .d-print-inline-block { + display: inline-block !important; } + .d-print-block { + display: block !important; } + .d-print-table { + display: table !important; } + .d-print-table-row { + display: table-row !important; } + .d-print-table-cell { + display: table-cell !important; } + .d-print-flex { + display: flex !important; } + .d-print-inline-flex { + display: inline-flex !important; } } + +.embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; } + .embed-responsive::before { + display: block; + content: ""; } + .embed-responsive .embed-responsive-item, + .embed-responsive iframe, + .embed-responsive embed, + .embed-responsive object, + .embed-responsive video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; } + +.embed-responsive-21by9::before { + padding-top: 42.85714%; } + +.embed-responsive-16by9::before { + padding-top: 56.25%; } + +.embed-responsive-4by3::before { + padding-top: 75%; } + +.embed-responsive-1by1::before { + padding-top: 100%; } + +.flex-row { + flex-direction: row !important; } + +.flex-column { + flex-direction: column !important; } + +.flex-row-reverse { + flex-direction: row-reverse !important; } + +.flex-column-reverse { + flex-direction: column-reverse !important; } + +.flex-wrap { + flex-wrap: wrap !important; } + +.flex-nowrap { + flex-wrap: nowrap !important; } + +.flex-wrap-reverse { + flex-wrap: wrap-reverse !important; } + +.flex-fill { + flex: 1 1 auto !important; } + +.flex-grow-0 { + flex-grow: 0 !important; } + +.flex-grow-1 { + flex-grow: 1 !important; } + +.flex-shrink-0 { + flex-shrink: 0 !important; } + +.flex-shrink-1 { + flex-shrink: 1 !important; } + +.justify-content-start { + justify-content: flex-start !important; } + +.justify-content-end { + justify-content: flex-end !important; } + +.justify-content-center { + justify-content: center !important; } + +.justify-content-between { + justify-content: space-between !important; } + +.justify-content-around { + justify-content: space-around !important; } + +.align-items-start { + align-items: flex-start !important; } + +.align-items-end { + align-items: flex-end !important; } + +.align-items-center { + align-items: center !important; } + +.align-items-baseline { + align-items: baseline !important; } + +.align-items-stretch { + align-items: stretch !important; } + +.align-content-start { + align-content: flex-start !important; } + +.align-content-end { + align-content: flex-end !important; } + +.align-content-center { + align-content: center !important; } + +.align-content-between { + align-content: space-between !important; } + +.align-content-around { + align-content: space-around !important; } + +.align-content-stretch { + align-content: stretch !important; } + +.align-self-auto { + align-self: auto !important; } + +.align-self-start { + align-self: flex-start !important; } + +.align-self-end { + align-self: flex-end !important; } + +.align-self-center { + align-self: center !important; } + +.align-self-baseline { + align-self: baseline !important; } + +.align-self-stretch { + align-self: stretch !important; } + +@media (min-width: 576px) { + .flex-sm-row { + flex-direction: row !important; } + .flex-sm-column { + flex-direction: column !important; } + .flex-sm-row-reverse { + flex-direction: row-reverse !important; } + .flex-sm-column-reverse { + flex-direction: column-reverse !important; } + .flex-sm-wrap { + flex-wrap: wrap !important; } + .flex-sm-nowrap { + flex-wrap: nowrap !important; } + .flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .flex-sm-fill { + flex: 1 1 auto !important; } + .flex-sm-grow-0 { + flex-grow: 0 !important; } + .flex-sm-grow-1 { + flex-grow: 1 !important; } + .flex-sm-shrink-0 { + flex-shrink: 0 !important; } + .flex-sm-shrink-1 { + flex-shrink: 1 !important; } + .justify-content-sm-start { + justify-content: flex-start !important; } + .justify-content-sm-end { + justify-content: flex-end !important; } + .justify-content-sm-center { + justify-content: center !important; } + .justify-content-sm-between { + justify-content: space-between !important; } + .justify-content-sm-around { + justify-content: space-around !important; } + .align-items-sm-start { + align-items: flex-start !important; } + .align-items-sm-end { + align-items: flex-end !important; } + .align-items-sm-center { + align-items: center !important; } + .align-items-sm-baseline { + align-items: baseline !important; } + .align-items-sm-stretch { + align-items: stretch !important; } + .align-content-sm-start { + align-content: flex-start !important; } + .align-content-sm-end { + align-content: flex-end !important; } + .align-content-sm-center { + align-content: center !important; } + .align-content-sm-between { + align-content: space-between !important; } + .align-content-sm-around { + align-content: space-around !important; } + .align-content-sm-stretch { + align-content: stretch !important; } + .align-self-sm-auto { + align-self: auto !important; } + .align-self-sm-start { + align-self: flex-start !important; } + .align-self-sm-end { + align-self: flex-end !important; } + .align-self-sm-center { + align-self: center !important; } + .align-self-sm-baseline { + align-self: baseline !important; } + .align-self-sm-stretch { + align-self: stretch !important; } } + +@media (min-width: 768px) { + .flex-md-row { + flex-direction: row !important; } + .flex-md-column { + flex-direction: column !important; } + .flex-md-row-reverse { + flex-direction: row-reverse !important; } + .flex-md-column-reverse { + flex-direction: column-reverse !important; } + .flex-md-wrap { + flex-wrap: wrap !important; } + .flex-md-nowrap { + flex-wrap: nowrap !important; } + .flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .flex-md-fill { + flex: 1 1 auto !important; } + .flex-md-grow-0 { + flex-grow: 0 !important; } + .flex-md-grow-1 { + flex-grow: 1 !important; } + .flex-md-shrink-0 { + flex-shrink: 0 !important; } + .flex-md-shrink-1 { + flex-shrink: 1 !important; } + .justify-content-md-start { + justify-content: flex-start !important; } + .justify-content-md-end { + justify-content: flex-end !important; } + .justify-content-md-center { + justify-content: center !important; } + .justify-content-md-between { + justify-content: space-between !important; } + .justify-content-md-around { + justify-content: space-around !important; } + .align-items-md-start { + align-items: flex-start !important; } + .align-items-md-end { + align-items: flex-end !important; } + .align-items-md-center { + align-items: center !important; } + .align-items-md-baseline { + align-items: baseline !important; } + .align-items-md-stretch { + align-items: stretch !important; } + .align-content-md-start { + align-content: flex-start !important; } + .align-content-md-end { + align-content: flex-end !important; } + .align-content-md-center { + align-content: center !important; } + .align-content-md-between { + align-content: space-between !important; } + .align-content-md-around { + align-content: space-around !important; } + .align-content-md-stretch { + align-content: stretch !important; } + .align-self-md-auto { + align-self: auto !important; } + .align-self-md-start { + align-self: flex-start !important; } + .align-self-md-end { + align-self: flex-end !important; } + .align-self-md-center { + align-self: center !important; } + .align-self-md-baseline { + align-self: baseline !important; } + .align-self-md-stretch { + align-self: stretch !important; } } + +@media (min-width: 992px) { + .flex-lg-row { + flex-direction: row !important; } + .flex-lg-column { + flex-direction: column !important; } + .flex-lg-row-reverse { + flex-direction: row-reverse !important; } + .flex-lg-column-reverse { + flex-direction: column-reverse !important; } + .flex-lg-wrap { + flex-wrap: wrap !important; } + .flex-lg-nowrap { + flex-wrap: nowrap !important; } + .flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .flex-lg-fill { + flex: 1 1 auto !important; } + .flex-lg-grow-0 { + flex-grow: 0 !important; } + .flex-lg-grow-1 { + flex-grow: 1 !important; } + .flex-lg-shrink-0 { + flex-shrink: 0 !important; } + .flex-lg-shrink-1 { + flex-shrink: 1 !important; } + .justify-content-lg-start { + justify-content: flex-start !important; } + .justify-content-lg-end { + justify-content: flex-end !important; } + .justify-content-lg-center { + justify-content: center !important; } + .justify-content-lg-between { + justify-content: space-between !important; } + .justify-content-lg-around { + justify-content: space-around !important; } + .align-items-lg-start { + align-items: flex-start !important; } + .align-items-lg-end { + align-items: flex-end !important; } + .align-items-lg-center { + align-items: center !important; } + .align-items-lg-baseline { + align-items: baseline !important; } + .align-items-lg-stretch { + align-items: stretch !important; } + .align-content-lg-start { + align-content: flex-start !important; } + .align-content-lg-end { + align-content: flex-end !important; } + .align-content-lg-center { + align-content: center !important; } + .align-content-lg-between { + align-content: space-between !important; } + .align-content-lg-around { + align-content: space-around !important; } + .align-content-lg-stretch { + align-content: stretch !important; } + .align-self-lg-auto { + align-self: auto !important; } + .align-self-lg-start { + align-self: flex-start !important; } + .align-self-lg-end { + align-self: flex-end !important; } + .align-self-lg-center { + align-self: center !important; } + .align-self-lg-baseline { + align-self: baseline !important; } + .align-self-lg-stretch { + align-self: stretch !important; } } + +@media (min-width: 1200px) { + .flex-xl-row { + flex-direction: row !important; } + .flex-xl-column { + flex-direction: column !important; } + .flex-xl-row-reverse { + flex-direction: row-reverse !important; } + .flex-xl-column-reverse { + flex-direction: column-reverse !important; } + .flex-xl-wrap { + flex-wrap: wrap !important; } + .flex-xl-nowrap { + flex-wrap: nowrap !important; } + .flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; } + .flex-xl-fill { + flex: 1 1 auto !important; } + .flex-xl-grow-0 { + flex-grow: 0 !important; } + .flex-xl-grow-1 { + flex-grow: 1 !important; } + .flex-xl-shrink-0 { + flex-shrink: 0 !important; } + .flex-xl-shrink-1 { + flex-shrink: 1 !important; } + .justify-content-xl-start { + justify-content: flex-start !important; } + .justify-content-xl-end { + justify-content: flex-end !important; } + .justify-content-xl-center { + justify-content: center !important; } + .justify-content-xl-between { + justify-content: space-between !important; } + .justify-content-xl-around { + justify-content: space-around !important; } + .align-items-xl-start { + align-items: flex-start !important; } + .align-items-xl-end { + align-items: flex-end !important; } + .align-items-xl-center { + align-items: center !important; } + .align-items-xl-baseline { + align-items: baseline !important; } + .align-items-xl-stretch { + align-items: stretch !important; } + .align-content-xl-start { + align-content: flex-start !important; } + .align-content-xl-end { + align-content: flex-end !important; } + .align-content-xl-center { + align-content: center !important; } + .align-content-xl-between { + align-content: space-between !important; } + .align-content-xl-around { + align-content: space-around !important; } + .align-content-xl-stretch { + align-content: stretch !important; } + .align-self-xl-auto { + align-self: auto !important; } + .align-self-xl-start { + align-self: flex-start !important; } + .align-self-xl-end { + align-self: flex-end !important; } + .align-self-xl-center { + align-self: center !important; } + .align-self-xl-baseline { + align-self: baseline !important; } + .align-self-xl-stretch { + align-self: stretch !important; } } + +.float-left { + float: left !important; } + +.float-right { + float: right !important; } + +.float-none { + float: none !important; } + +@media (min-width: 576px) { + .float-sm-left { + float: left !important; } + .float-sm-right { + float: right !important; } + .float-sm-none { + float: none !important; } } + +@media (min-width: 768px) { + .float-md-left { + float: left !important; } + .float-md-right { + float: right !important; } + .float-md-none { + float: none !important; } } + +@media (min-width: 992px) { + .float-lg-left { + float: left !important; } + .float-lg-right { + float: right !important; } + .float-lg-none { + float: none !important; } } + +@media (min-width: 1200px) { + .float-xl-left { + float: left !important; } + .float-xl-right { + float: right !important; } + .float-xl-none { + float: none !important; } } + +.user-select-all { + user-select: all !important; } + +.user-select-auto { + user-select: auto !important; } + +.user-select-none { + user-select: none !important; } + +.overflow-auto { + overflow: auto !important; } + +.overflow-hidden { + overflow: hidden !important; } + +.position-static { + position: static !important; } + +.position-relative { + position: relative !important; } + +.position-absolute { + position: absolute !important; } + +.position-fixed { + position: fixed !important; } + +.position-sticky { + position: sticky !important; } + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; } + +.fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; } + +@supports (position: sticky) { + .sticky-top { + position: sticky; + top: 0; + z-index: 1020; } } + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; } + +.sr-only-focusable:active, .sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + clip: auto; + white-space: normal; } + +.shadow-sm { + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } + +.shadow { + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } + +.shadow-lg { + box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } + +.shadow-none { + box-shadow: none !important; } + +.w-25 { + width: 25% !important; } + +.w-50 { + width: 50% !important; } + +.w-75 { + width: 75% !important; } + +.w-100 { + width: 100% !important; } + +.w-auto { + width: auto !important; } + +.h-25 { + height: 25% !important; } + +.h-50 { + height: 50% !important; } + +.h-75 { + height: 75% !important; } + +.h-100 { + height: 100% !important; } + +.h-auto { + height: auto !important; } + +.mw-100 { + max-width: 100% !important; } + +.mh-100 { + max-height: 100% !important; } + +.min-vw-100 { + min-width: 100vw !important; } + +.min-vh-100 { + min-height: 100vh !important; } + +.vw-100 { + width: 100vw !important; } + +.vh-100 { + height: 100vh !important; } + +.m-0 { + margin: 0 !important; } + +.mt-0, +.my-0 { + margin-top: 0 !important; } + +.mr-0, +.mx-0 { + margin-right: 0 !important; } + +.mb-0, +.my-0 { + margin-bottom: 0 !important; } + +.ml-0, +.mx-0 { + margin-left: 0 !important; } + +.m-1 { + margin: 0.25rem !important; } + +.mt-1, +.my-1 { + margin-top: 0.25rem !important; } + +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; } + +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; } + +.ml-1, +.mx-1 { + margin-left: 0.25rem !important; } + +.m-2 { + margin: 0.5rem !important; } + +.mt-2, +.my-2 { + margin-top: 0.5rem !important; } + +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; } + +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; } + +.ml-2, +.mx-2 { + margin-left: 0.5rem !important; } + +.m-3 { + margin: 1rem !important; } + +.mt-3, +.my-3 { + margin-top: 1rem !important; } + +.mr-3, +.mx-3 { + margin-right: 1rem !important; } + +.mb-3, +.my-3 { + margin-bottom: 1rem !important; } + +.ml-3, +.mx-3 { + margin-left: 1rem !important; } + +.m-4 { + margin: 1.5rem !important; } + +.mt-4, +.my-4 { + margin-top: 1.5rem !important; } + +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; } + +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; } + +.ml-4, +.mx-4 { + margin-left: 1.5rem !important; } + +.m-5 { + margin: 3rem !important; } + +.mt-5, +.my-5 { + margin-top: 3rem !important; } + +.mr-5, +.mx-5 { + margin-right: 3rem !important; } + +.mb-5, +.my-5 { + margin-bottom: 3rem !important; } + +.ml-5, +.mx-5 { + margin-left: 3rem !important; } + +.p-0 { + padding: 0 !important; } + +.pt-0, +.py-0 { + padding-top: 0 !important; } + +.pr-0, +.px-0 { + padding-right: 0 !important; } + +.pb-0, +.py-0 { + padding-bottom: 0 !important; } + +.pl-0, +.px-0 { + padding-left: 0 !important; } + +.p-1 { + padding: 0.25rem !important; } + +.pt-1, +.py-1 { + padding-top: 0.25rem !important; } + +.pr-1, +.px-1 { + padding-right: 0.25rem !important; } + +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; } + +.pl-1, +.px-1 { + padding-left: 0.25rem !important; } + +.p-2 { + padding: 0.5rem !important; } + +.pt-2, +.py-2 { + padding-top: 0.5rem !important; } + +.pr-2, +.px-2 { + padding-right: 0.5rem !important; } + +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; } + +.pl-2, +.px-2 { + padding-left: 0.5rem !important; } + +.p-3 { + padding: 1rem !important; } + +.pt-3, +.py-3 { + padding-top: 1rem !important; } + +.pr-3, +.px-3 { + padding-right: 1rem !important; } + +.pb-3, +.py-3 { + padding-bottom: 1rem !important; } + +.pl-3, +.px-3 { + padding-left: 1rem !important; } + +.p-4 { + padding: 1.5rem !important; } + +.pt-4, +.py-4 { + padding-top: 1.5rem !important; } + +.pr-4, +.px-4 { + padding-right: 1.5rem !important; } + +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; } + +.pl-4, +.px-4 { + padding-left: 1.5rem !important; } + +.p-5 { + padding: 3rem !important; } + +.pt-5, +.py-5 { + padding-top: 3rem !important; } + +.pr-5, +.px-5 { + padding-right: 3rem !important; } + +.pb-5, +.py-5 { + padding-bottom: 3rem !important; } + +.pl-5, +.px-5 { + padding-left: 3rem !important; } + +.m-n1 { + margin: -0.25rem !important; } + +.mt-n1, +.my-n1 { + margin-top: -0.25rem !important; } + +.mr-n1, +.mx-n1 { + margin-right: -0.25rem !important; } + +.mb-n1, +.my-n1 { + margin-bottom: -0.25rem !important; } + +.ml-n1, +.mx-n1 { + margin-left: -0.25rem !important; } + +.m-n2 { + margin: -0.5rem !important; } + +.mt-n2, +.my-n2 { + margin-top: -0.5rem !important; } + +.mr-n2, +.mx-n2 { + margin-right: -0.5rem !important; } + +.mb-n2, +.my-n2 { + margin-bottom: -0.5rem !important; } + +.ml-n2, +.mx-n2 { + margin-left: -0.5rem !important; } + +.m-n3 { + margin: -1rem !important; } + +.mt-n3, +.my-n3 { + margin-top: -1rem !important; } + +.mr-n3, +.mx-n3 { + margin-right: -1rem !important; } + +.mb-n3, +.my-n3 { + margin-bottom: -1rem !important; } + +.ml-n3, +.mx-n3 { + margin-left: -1rem !important; } + +.m-n4 { + margin: -1.5rem !important; } + +.mt-n4, +.my-n4 { + margin-top: -1.5rem !important; } + +.mr-n4, +.mx-n4 { + margin-right: -1.5rem !important; } + +.mb-n4, +.my-n4 { + margin-bottom: -1.5rem !important; } + +.ml-n4, +.mx-n4 { + margin-left: -1.5rem !important; } + +.m-n5 { + margin: -3rem !important; } + +.mt-n5, +.my-n5 { + margin-top: -3rem !important; } + +.mr-n5, +.mx-n5 { + margin-right: -3rem !important; } + +.mb-n5, +.my-n5 { + margin-bottom: -3rem !important; } + +.ml-n5, +.mx-n5 { + margin-left: -3rem !important; } + +.m-auto { + margin: auto !important; } + +.mt-auto, +.my-auto { + margin-top: auto !important; } + +.mr-auto, +.mx-auto { + margin-right: auto !important; } + +.mb-auto, +.my-auto { + margin-bottom: auto !important; } + +.ml-auto, +.mx-auto { + margin-left: auto !important; } + +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; } + .ml-sm-0, + .mx-sm-0 { + margin-left: 0 !important; } + .m-sm-1 { + margin: 0.25rem !important; } + .mt-sm-1, + .my-sm-1 { + margin-top: 0.25rem !important; } + .mr-sm-1, + .mx-sm-1 { + margin-right: 0.25rem !important; } + .mb-sm-1, + .my-sm-1 { + margin-bottom: 0.25rem !important; } + .ml-sm-1, + .mx-sm-1 { + margin-left: 0.25rem !important; } + .m-sm-2 { + margin: 0.5rem !important; } + .mt-sm-2, + .my-sm-2 { + margin-top: 0.5rem !important; } + .mr-sm-2, + .mx-sm-2 { + margin-right: 0.5rem !important; } + .mb-sm-2, + .my-sm-2 { + margin-bottom: 0.5rem !important; } + .ml-sm-2, + .mx-sm-2 { + margin-left: 0.5rem !important; } + .m-sm-3 { + margin: 1rem !important; } + .mt-sm-3, + .my-sm-3 { + margin-top: 1rem !important; } + .mr-sm-3, + .mx-sm-3 { + margin-right: 1rem !important; } + .mb-sm-3, + .my-sm-3 { + margin-bottom: 1rem !important; } + .ml-sm-3, + .mx-sm-3 { + margin-left: 1rem !important; } + .m-sm-4 { + margin: 1.5rem !important; } + .mt-sm-4, + .my-sm-4 { + margin-top: 1.5rem !important; } + .mr-sm-4, + .mx-sm-4 { + margin-right: 1.5rem !important; } + .mb-sm-4, + .my-sm-4 { + margin-bottom: 1.5rem !important; } + .ml-sm-4, + .mx-sm-4 { + margin-left: 1.5rem !important; } + .m-sm-5 { + margin: 3rem !important; } + .mt-sm-5, + .my-sm-5 { + margin-top: 3rem !important; } + .mr-sm-5, + .mx-sm-5 { + margin-right: 3rem !important; } + .mb-sm-5, + .my-sm-5 { + margin-bottom: 3rem !important; } + .ml-sm-5, + .mx-sm-5 { + margin-left: 3rem !important; } + .p-sm-0 { + padding: 0 !important; } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; } + .pl-sm-0, + .px-sm-0 { + padding-left: 0 !important; } + .p-sm-1 { + padding: 0.25rem !important; } + .pt-sm-1, + .py-sm-1 { + padding-top: 0.25rem !important; } + .pr-sm-1, + .px-sm-1 { + padding-right: 0.25rem !important; } + .pb-sm-1, + .py-sm-1 { + padding-bottom: 0.25rem !important; } + .pl-sm-1, + .px-sm-1 { + padding-left: 0.25rem !important; } + .p-sm-2 { + padding: 0.5rem !important; } + .pt-sm-2, + .py-sm-2 { + padding-top: 0.5rem !important; } + .pr-sm-2, + .px-sm-2 { + padding-right: 0.5rem !important; } + .pb-sm-2, + .py-sm-2 { + padding-bottom: 0.5rem !important; } + .pl-sm-2, + .px-sm-2 { + padding-left: 0.5rem !important; } + .p-sm-3 { + padding: 1rem !important; } + .pt-sm-3, + .py-sm-3 { + padding-top: 1rem !important; } + .pr-sm-3, + .px-sm-3 { + padding-right: 1rem !important; } + .pb-sm-3, + .py-sm-3 { + padding-bottom: 1rem !important; } + .pl-sm-3, + .px-sm-3 { + padding-left: 1rem !important; } + .p-sm-4 { + padding: 1.5rem !important; } + .pt-sm-4, + .py-sm-4 { + padding-top: 1.5rem !important; } + .pr-sm-4, + .px-sm-4 { + padding-right: 1.5rem !important; } + .pb-sm-4, + .py-sm-4 { + padding-bottom: 1.5rem !important; } + .pl-sm-4, + .px-sm-4 { + padding-left: 1.5rem !important; } + .p-sm-5 { + padding: 3rem !important; } + .pt-sm-5, + .py-sm-5 { + padding-top: 3rem !important; } + .pr-sm-5, + .px-sm-5 { + padding-right: 3rem !important; } + .pb-sm-5, + .py-sm-5 { + padding-bottom: 3rem !important; } + .pl-sm-5, + .px-sm-5 { + padding-left: 3rem !important; } + .m-sm-n1 { + margin: -0.25rem !important; } + .mt-sm-n1, + .my-sm-n1 { + margin-top: -0.25rem !important; } + .mr-sm-n1, + .mx-sm-n1 { + margin-right: -0.25rem !important; } + .mb-sm-n1, + .my-sm-n1 { + margin-bottom: -0.25rem !important; } + .ml-sm-n1, + .mx-sm-n1 { + margin-left: -0.25rem !important; } + .m-sm-n2 { + margin: -0.5rem !important; } + .mt-sm-n2, + .my-sm-n2 { + margin-top: -0.5rem !important; } + .mr-sm-n2, + .mx-sm-n2 { + margin-right: -0.5rem !important; } + .mb-sm-n2, + .my-sm-n2 { + margin-bottom: -0.5rem !important; } + .ml-sm-n2, + .mx-sm-n2 { + margin-left: -0.5rem !important; } + .m-sm-n3 { + margin: -1rem !important; } + .mt-sm-n3, + .my-sm-n3 { + margin-top: -1rem !important; } + .mr-sm-n3, + .mx-sm-n3 { + margin-right: -1rem !important; } + .mb-sm-n3, + .my-sm-n3 { + margin-bottom: -1rem !important; } + .ml-sm-n3, + .mx-sm-n3 { + margin-left: -1rem !important; } + .m-sm-n4 { + margin: -1.5rem !important; } + .mt-sm-n4, + .my-sm-n4 { + margin-top: -1.5rem !important; } + .mr-sm-n4, + .mx-sm-n4 { + margin-right: -1.5rem !important; } + .mb-sm-n4, + .my-sm-n4 { + margin-bottom: -1.5rem !important; } + .ml-sm-n4, + .mx-sm-n4 { + margin-left: -1.5rem !important; } + .m-sm-n5 { + margin: -3rem !important; } + .mt-sm-n5, + .my-sm-n5 { + margin-top: -3rem !important; } + .mr-sm-n5, + .mx-sm-n5 { + margin-right: -3rem !important; } + .mb-sm-n5, + .my-sm-n5 { + margin-bottom: -3rem !important; } + .ml-sm-n5, + .mx-sm-n5 { + margin-left: -3rem !important; } + .m-sm-auto { + margin: auto !important; } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; } + .ml-sm-auto, + .mx-sm-auto { + margin-left: auto !important; } } + +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; } + .ml-md-0, + .mx-md-0 { + margin-left: 0 !important; } + .m-md-1 { + margin: 0.25rem !important; } + .mt-md-1, + .my-md-1 { + margin-top: 0.25rem !important; } + .mr-md-1, + .mx-md-1 { + margin-right: 0.25rem !important; } + .mb-md-1, + .my-md-1 { + margin-bottom: 0.25rem !important; } + .ml-md-1, + .mx-md-1 { + margin-left: 0.25rem !important; } + .m-md-2 { + margin: 0.5rem !important; } + .mt-md-2, + .my-md-2 { + margin-top: 0.5rem !important; } + .mr-md-2, + .mx-md-2 { + margin-right: 0.5rem !important; } + .mb-md-2, + .my-md-2 { + margin-bottom: 0.5rem !important; } + .ml-md-2, + .mx-md-2 { + margin-left: 0.5rem !important; } + .m-md-3 { + margin: 1rem !important; } + .mt-md-3, + .my-md-3 { + margin-top: 1rem !important; } + .mr-md-3, + .mx-md-3 { + margin-right: 1rem !important; } + .mb-md-3, + .my-md-3 { + margin-bottom: 1rem !important; } + .ml-md-3, + .mx-md-3 { + margin-left: 1rem !important; } + .m-md-4 { + margin: 1.5rem !important; } + .mt-md-4, + .my-md-4 { + margin-top: 1.5rem !important; } + .mr-md-4, + .mx-md-4 { + margin-right: 1.5rem !important; } + .mb-md-4, + .my-md-4 { + margin-bottom: 1.5rem !important; } + .ml-md-4, + .mx-md-4 { + margin-left: 1.5rem !important; } + .m-md-5 { + margin: 3rem !important; } + .mt-md-5, + .my-md-5 { + margin-top: 3rem !important; } + .mr-md-5, + .mx-md-5 { + margin-right: 3rem !important; } + .mb-md-5, + .my-md-5 { + margin-bottom: 3rem !important; } + .ml-md-5, + .mx-md-5 { + margin-left: 3rem !important; } + .p-md-0 { + padding: 0 !important; } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; } + .pl-md-0, + .px-md-0 { + padding-left: 0 !important; } + .p-md-1 { + padding: 0.25rem !important; } + .pt-md-1, + .py-md-1 { + padding-top: 0.25rem !important; } + .pr-md-1, + .px-md-1 { + padding-right: 0.25rem !important; } + .pb-md-1, + .py-md-1 { + padding-bottom: 0.25rem !important; } + .pl-md-1, + .px-md-1 { + padding-left: 0.25rem !important; } + .p-md-2 { + padding: 0.5rem !important; } + .pt-md-2, + .py-md-2 { + padding-top: 0.5rem !important; } + .pr-md-2, + .px-md-2 { + padding-right: 0.5rem !important; } + .pb-md-2, + .py-md-2 { + padding-bottom: 0.5rem !important; } + .pl-md-2, + .px-md-2 { + padding-left: 0.5rem !important; } + .p-md-3 { + padding: 1rem !important; } + .pt-md-3, + .py-md-3 { + padding-top: 1rem !important; } + .pr-md-3, + .px-md-3 { + padding-right: 1rem !important; } + .pb-md-3, + .py-md-3 { + padding-bottom: 1rem !important; } + .pl-md-3, + .px-md-3 { + padding-left: 1rem !important; } + .p-md-4 { + padding: 1.5rem !important; } + .pt-md-4, + .py-md-4 { + padding-top: 1.5rem !important; } + .pr-md-4, + .px-md-4 { + padding-right: 1.5rem !important; } + .pb-md-4, + .py-md-4 { + padding-bottom: 1.5rem !important; } + .pl-md-4, + .px-md-4 { + padding-left: 1.5rem !important; } + .p-md-5 { + padding: 3rem !important; } + .pt-md-5, + .py-md-5 { + padding-top: 3rem !important; } + .pr-md-5, + .px-md-5 { + padding-right: 3rem !important; } + .pb-md-5, + .py-md-5 { + padding-bottom: 3rem !important; } + .pl-md-5, + .px-md-5 { + padding-left: 3rem !important; } + .m-md-n1 { + margin: -0.25rem !important; } + .mt-md-n1, + .my-md-n1 { + margin-top: -0.25rem !important; } + .mr-md-n1, + .mx-md-n1 { + margin-right: -0.25rem !important; } + .mb-md-n1, + .my-md-n1 { + margin-bottom: -0.25rem !important; } + .ml-md-n1, + .mx-md-n1 { + margin-left: -0.25rem !important; } + .m-md-n2 { + margin: -0.5rem !important; } + .mt-md-n2, + .my-md-n2 { + margin-top: -0.5rem !important; } + .mr-md-n2, + .mx-md-n2 { + margin-right: -0.5rem !important; } + .mb-md-n2, + .my-md-n2 { + margin-bottom: -0.5rem !important; } + .ml-md-n2, + .mx-md-n2 { + margin-left: -0.5rem !important; } + .m-md-n3 { + margin: -1rem !important; } + .mt-md-n3, + .my-md-n3 { + margin-top: -1rem !important; } + .mr-md-n3, + .mx-md-n3 { + margin-right: -1rem !important; } + .mb-md-n3, + .my-md-n3 { + margin-bottom: -1rem !important; } + .ml-md-n3, + .mx-md-n3 { + margin-left: -1rem !important; } + .m-md-n4 { + margin: -1.5rem !important; } + .mt-md-n4, + .my-md-n4 { + margin-top: -1.5rem !important; } + .mr-md-n4, + .mx-md-n4 { + margin-right: -1.5rem !important; } + .mb-md-n4, + .my-md-n4 { + margin-bottom: -1.5rem !important; } + .ml-md-n4, + .mx-md-n4 { + margin-left: -1.5rem !important; } + .m-md-n5 { + margin: -3rem !important; } + .mt-md-n5, + .my-md-n5 { + margin-top: -3rem !important; } + .mr-md-n5, + .mx-md-n5 { + margin-right: -3rem !important; } + .mb-md-n5, + .my-md-n5 { + margin-bottom: -3rem !important; } + .ml-md-n5, + .mx-md-n5 { + margin-left: -3rem !important; } + .m-md-auto { + margin: auto !important; } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; } + .ml-md-auto, + .mx-md-auto { + margin-left: auto !important; } } + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; } + .ml-lg-0, + .mx-lg-0 { + margin-left: 0 !important; } + .m-lg-1 { + margin: 0.25rem !important; } + .mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; } + .mr-lg-1, + .mx-lg-1 { + margin-right: 0.25rem !important; } + .mb-lg-1, + .my-lg-1 { + margin-bottom: 0.25rem !important; } + .ml-lg-1, + .mx-lg-1 { + margin-left: 0.25rem !important; } + .m-lg-2 { + margin: 0.5rem !important; } + .mt-lg-2, + .my-lg-2 { + margin-top: 0.5rem !important; } + .mr-lg-2, + .mx-lg-2 { + margin-right: 0.5rem !important; } + .mb-lg-2, + .my-lg-2 { + margin-bottom: 0.5rem !important; } + .ml-lg-2, + .mx-lg-2 { + margin-left: 0.5rem !important; } + .m-lg-3 { + margin: 1rem !important; } + .mt-lg-3, + .my-lg-3 { + margin-top: 1rem !important; } + .mr-lg-3, + .mx-lg-3 { + margin-right: 1rem !important; } + .mb-lg-3, + .my-lg-3 { + margin-bottom: 1rem !important; } + .ml-lg-3, + .mx-lg-3 { + margin-left: 1rem !important; } + .m-lg-4 { + margin: 1.5rem !important; } + .mt-lg-4, + .my-lg-4 { + margin-top: 1.5rem !important; } + .mr-lg-4, + .mx-lg-4 { + margin-right: 1.5rem !important; } + .mb-lg-4, + .my-lg-4 { + margin-bottom: 1.5rem !important; } + .ml-lg-4, + .mx-lg-4 { + margin-left: 1.5rem !important; } + .m-lg-5 { + margin: 3rem !important; } + .mt-lg-5, + .my-lg-5 { + margin-top: 3rem !important; } + .mr-lg-5, + .mx-lg-5 { + margin-right: 3rem !important; } + .mb-lg-5, + .my-lg-5 { + margin-bottom: 3rem !important; } + .ml-lg-5, + .mx-lg-5 { + margin-left: 3rem !important; } + .p-lg-0 { + padding: 0 !important; } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; } + .pl-lg-0, + .px-lg-0 { + padding-left: 0 !important; } + .p-lg-1 { + padding: 0.25rem !important; } + .pt-lg-1, + .py-lg-1 { + padding-top: 0.25rem !important; } + .pr-lg-1, + .px-lg-1 { + padding-right: 0.25rem !important; } + .pb-lg-1, + .py-lg-1 { + padding-bottom: 0.25rem !important; } + .pl-lg-1, + .px-lg-1 { + padding-left: 0.25rem !important; } + .p-lg-2 { + padding: 0.5rem !important; } + .pt-lg-2, + .py-lg-2 { + padding-top: 0.5rem !important; } + .pr-lg-2, + .px-lg-2 { + padding-right: 0.5rem !important; } + .pb-lg-2, + .py-lg-2 { + padding-bottom: 0.5rem !important; } + .pl-lg-2, + .px-lg-2 { + padding-left: 0.5rem !important; } + .p-lg-3 { + padding: 1rem !important; } + .pt-lg-3, + .py-lg-3 { + padding-top: 1rem !important; } + .pr-lg-3, + .px-lg-3 { + padding-right: 1rem !important; } + .pb-lg-3, + .py-lg-3 { + padding-bottom: 1rem !important; } + .pl-lg-3, + .px-lg-3 { + padding-left: 1rem !important; } + .p-lg-4 { + padding: 1.5rem !important; } + .pt-lg-4, + .py-lg-4 { + padding-top: 1.5rem !important; } + .pr-lg-4, + .px-lg-4 { + padding-right: 1.5rem !important; } + .pb-lg-4, + .py-lg-4 { + padding-bottom: 1.5rem !important; } + .pl-lg-4, + .px-lg-4 { + padding-left: 1.5rem !important; } + .p-lg-5 { + padding: 3rem !important; } + .pt-lg-5, + .py-lg-5 { + padding-top: 3rem !important; } + .pr-lg-5, + .px-lg-5 { + padding-right: 3rem !important; } + .pb-lg-5, + .py-lg-5 { + padding-bottom: 3rem !important; } + .pl-lg-5, + .px-lg-5 { + padding-left: 3rem !important; } + .m-lg-n1 { + margin: -0.25rem !important; } + .mt-lg-n1, + .my-lg-n1 { + margin-top: -0.25rem !important; } + .mr-lg-n1, + .mx-lg-n1 { + margin-right: -0.25rem !important; } + .mb-lg-n1, + .my-lg-n1 { + margin-bottom: -0.25rem !important; } + .ml-lg-n1, + .mx-lg-n1 { + margin-left: -0.25rem !important; } + .m-lg-n2 { + margin: -0.5rem !important; } + .mt-lg-n2, + .my-lg-n2 { + margin-top: -0.5rem !important; } + .mr-lg-n2, + .mx-lg-n2 { + margin-right: -0.5rem !important; } + .mb-lg-n2, + .my-lg-n2 { + margin-bottom: -0.5rem !important; } + .ml-lg-n2, + .mx-lg-n2 { + margin-left: -0.5rem !important; } + .m-lg-n3 { + margin: -1rem !important; } + .mt-lg-n3, + .my-lg-n3 { + margin-top: -1rem !important; } + .mr-lg-n3, + .mx-lg-n3 { + margin-right: -1rem !important; } + .mb-lg-n3, + .my-lg-n3 { + margin-bottom: -1rem !important; } + .ml-lg-n3, + .mx-lg-n3 { + margin-left: -1rem !important; } + .m-lg-n4 { + margin: -1.5rem !important; } + .mt-lg-n4, + .my-lg-n4 { + margin-top: -1.5rem !important; } + .mr-lg-n4, + .mx-lg-n4 { + margin-right: -1.5rem !important; } + .mb-lg-n4, + .my-lg-n4 { + margin-bottom: -1.5rem !important; } + .ml-lg-n4, + .mx-lg-n4 { + margin-left: -1.5rem !important; } + .m-lg-n5 { + margin: -3rem !important; } + .mt-lg-n5, + .my-lg-n5 { + margin-top: -3rem !important; } + .mr-lg-n5, + .mx-lg-n5 { + margin-right: -3rem !important; } + .mb-lg-n5, + .my-lg-n5 { + margin-bottom: -3rem !important; } + .ml-lg-n5, + .mx-lg-n5 { + margin-left: -3rem !important; } + .m-lg-auto { + margin: auto !important; } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; } + .ml-lg-auto, + .mx-lg-auto { + margin-left: auto !important; } } + +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; } + .mr-xl-0, + .mx-xl-0 { + margin-right: 0 !important; } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; } + .ml-xl-0, + .mx-xl-0 { + margin-left: 0 !important; } + .m-xl-1 { + margin: 0.25rem !important; } + .mt-xl-1, + .my-xl-1 { + margin-top: 0.25rem !important; } + .mr-xl-1, + .mx-xl-1 { + margin-right: 0.25rem !important; } + .mb-xl-1, + .my-xl-1 { + margin-bottom: 0.25rem !important; } + .ml-xl-1, + .mx-xl-1 { + margin-left: 0.25rem !important; } + .m-xl-2 { + margin: 0.5rem !important; } + .mt-xl-2, + .my-xl-2 { + margin-top: 0.5rem !important; } + .mr-xl-2, + .mx-xl-2 { + margin-right: 0.5rem !important; } + .mb-xl-2, + .my-xl-2 { + margin-bottom: 0.5rem !important; } + .ml-xl-2, + .mx-xl-2 { + margin-left: 0.5rem !important; } + .m-xl-3 { + margin: 1rem !important; } + .mt-xl-3, + .my-xl-3 { + margin-top: 1rem !important; } + .mr-xl-3, + .mx-xl-3 { + margin-right: 1rem !important; } + .mb-xl-3, + .my-xl-3 { + margin-bottom: 1rem !important; } + .ml-xl-3, + .mx-xl-3 { + margin-left: 1rem !important; } + .m-xl-4 { + margin: 1.5rem !important; } + .mt-xl-4, + .my-xl-4 { + margin-top: 1.5rem !important; } + .mr-xl-4, + .mx-xl-4 { + margin-right: 1.5rem !important; } + .mb-xl-4, + .my-xl-4 { + margin-bottom: 1.5rem !important; } + .ml-xl-4, + .mx-xl-4 { + margin-left: 1.5rem !important; } + .m-xl-5 { + margin: 3rem !important; } + .mt-xl-5, + .my-xl-5 { + margin-top: 3rem !important; } + .mr-xl-5, + .mx-xl-5 { + margin-right: 3rem !important; } + .mb-xl-5, + .my-xl-5 { + margin-bottom: 3rem !important; } + .ml-xl-5, + .mx-xl-5 { + margin-left: 3rem !important; } + .p-xl-0 { + padding: 0 !important; } + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; } + .pr-xl-0, + .px-xl-0 { + padding-right: 0 !important; } + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; } + .pl-xl-0, + .px-xl-0 { + padding-left: 0 !important; } + .p-xl-1 { + padding: 0.25rem !important; } + .pt-xl-1, + .py-xl-1 { + padding-top: 0.25rem !important; } + .pr-xl-1, + .px-xl-1 { + padding-right: 0.25rem !important; } + .pb-xl-1, + .py-xl-1 { + padding-bottom: 0.25rem !important; } + .pl-xl-1, + .px-xl-1 { + padding-left: 0.25rem !important; } + .p-xl-2 { + padding: 0.5rem !important; } + .pt-xl-2, + .py-xl-2 { + padding-top: 0.5rem !important; } + .pr-xl-2, + .px-xl-2 { + padding-right: 0.5rem !important; } + .pb-xl-2, + .py-xl-2 { + padding-bottom: 0.5rem !important; } + .pl-xl-2, + .px-xl-2 { + padding-left: 0.5rem !important; } + .p-xl-3 { + padding: 1rem !important; } + .pt-xl-3, + .py-xl-3 { + padding-top: 1rem !important; } + .pr-xl-3, + .px-xl-3 { + padding-right: 1rem !important; } + .pb-xl-3, + .py-xl-3 { + padding-bottom: 1rem !important; } + .pl-xl-3, + .px-xl-3 { + padding-left: 1rem !important; } + .p-xl-4 { + padding: 1.5rem !important; } + .pt-xl-4, + .py-xl-4 { + padding-top: 1.5rem !important; } + .pr-xl-4, + .px-xl-4 { + padding-right: 1.5rem !important; } + .pb-xl-4, + .py-xl-4 { + padding-bottom: 1.5rem !important; } + .pl-xl-4, + .px-xl-4 { + padding-left: 1.5rem !important; } + .p-xl-5 { + padding: 3rem !important; } + .pt-xl-5, + .py-xl-5 { + padding-top: 3rem !important; } + .pr-xl-5, + .px-xl-5 { + padding-right: 3rem !important; } + .pb-xl-5, + .py-xl-5 { + padding-bottom: 3rem !important; } + .pl-xl-5, + .px-xl-5 { + padding-left: 3rem !important; } + .m-xl-n1 { + margin: -0.25rem !important; } + .mt-xl-n1, + .my-xl-n1 { + margin-top: -0.25rem !important; } + .mr-xl-n1, + .mx-xl-n1 { + margin-right: -0.25rem !important; } + .mb-xl-n1, + .my-xl-n1 { + margin-bottom: -0.25rem !important; } + .ml-xl-n1, + .mx-xl-n1 { + margin-left: -0.25rem !important; } + .m-xl-n2 { + margin: -0.5rem !important; } + .mt-xl-n2, + .my-xl-n2 { + margin-top: -0.5rem !important; } + .mr-xl-n2, + .mx-xl-n2 { + margin-right: -0.5rem !important; } + .mb-xl-n2, + .my-xl-n2 { + margin-bottom: -0.5rem !important; } + .ml-xl-n2, + .mx-xl-n2 { + margin-left: -0.5rem !important; } + .m-xl-n3 { + margin: -1rem !important; } + .mt-xl-n3, + .my-xl-n3 { + margin-top: -1rem !important; } + .mr-xl-n3, + .mx-xl-n3 { + margin-right: -1rem !important; } + .mb-xl-n3, + .my-xl-n3 { + margin-bottom: -1rem !important; } + .ml-xl-n3, + .mx-xl-n3 { + margin-left: -1rem !important; } + .m-xl-n4 { + margin: -1.5rem !important; } + .mt-xl-n4, + .my-xl-n4 { + margin-top: -1.5rem !important; } + .mr-xl-n4, + .mx-xl-n4 { + margin-right: -1.5rem !important; } + .mb-xl-n4, + .my-xl-n4 { + margin-bottom: -1.5rem !important; } + .ml-xl-n4, + .mx-xl-n4 { + margin-left: -1.5rem !important; } + .m-xl-n5 { + margin: -3rem !important; } + .mt-xl-n5, + .my-xl-n5 { + margin-top: -3rem !important; } + .mr-xl-n5, + .mx-xl-n5 { + margin-right: -3rem !important; } + .mb-xl-n5, + .my-xl-n5 { + margin-bottom: -3rem !important; } + .ml-xl-n5, + .mx-xl-n5 { + margin-left: -3rem !important; } + .m-xl-auto { + margin: auto !important; } + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; } + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; } + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; } + .ml-xl-auto, + .mx-xl-auto { + margin-left: auto !important; } } + +.stretched-link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ""; + background-color: rgba(0, 0, 0, 0); } + +.text-monospace { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + +.text-justify { + text-align: justify !important; } + +.text-wrap { + white-space: normal !important; } + +.text-nowrap { + white-space: nowrap !important; } + +.text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +.text-left { + text-align: left !important; } + +.text-right { + text-align: right !important; } + +.text-center { + text-align: center !important; } + +@media (min-width: 576px) { + .text-sm-left { + text-align: left !important; } + .text-sm-right { + text-align: right !important; } + .text-sm-center { + text-align: center !important; } } + +@media (min-width: 768px) { + .text-md-left { + text-align: left !important; } + .text-md-right { + text-align: right !important; } + .text-md-center { + text-align: center !important; } } + +@media (min-width: 992px) { + .text-lg-left { + text-align: left !important; } + .text-lg-right { + text-align: right !important; } + .text-lg-center { + text-align: center !important; } } + +@media (min-width: 1200px) { + .text-xl-left { + text-align: left !important; } + .text-xl-right { + text-align: right !important; } + .text-xl-center { + text-align: center !important; } } + +.text-lowercase { + text-transform: lowercase !important; } + +.text-uppercase { + text-transform: uppercase !important; } + +.text-capitalize { + text-transform: capitalize !important; } + +.font-weight-light { + font-weight: 300 !important; } + +.font-weight-lighter { + font-weight: lighter !important; } + +.font-weight-normal { + font-weight: 400 !important; } + +.font-weight-bold { + font-weight: 700 !important; } + +.font-weight-bolder { + font-weight: bolder !important; } + +.font-italic { + font-style: italic !important; } + +.text-white { + color: #fff !important; } + +.text-primary { + color: #007bff !important; } + +a.text-primary:hover, a.text-primary:focus { + color: #0056b3 !important; } + +.text-secondary { + color: #6c757d !important; } + +a.text-secondary:hover, a.text-secondary:focus { + color: #494f54 !important; } + +.text-success { + color: #28a745 !important; } + +a.text-success:hover, a.text-success:focus { + color: #19692c !important; } + +.text-info { + color: #17a2b8 !important; } + +a.text-info:hover, a.text-info:focus { + color: #0f6674 !important; } + +.text-warning { + color: #ffc107 !important; } + +a.text-warning:hover, a.text-warning:focus { + color: #ba8b00 !important; } + +.text-danger { + color: #dc3545 !important; } + +a.text-danger:hover, a.text-danger:focus { + color: #a71d2a !important; } + +.text-light { + color: #f8f9fa !important; } + +a.text-light:hover, a.text-light:focus { + color: #cbd3da !important; } + +.text-dark { + color: #343a40 !important; } + +a.text-dark:hover, a.text-dark:focus { + color: #121416 !important; } + +.text-body { + color: #212529 !important; } + +.text-muted { + color: #6c757d !important; } + +.text-black-50 { + color: rgba(0, 0, 0, 0.5) !important; } + +.text-white-50 { + color: rgba(255, 255, 255, 0.5) !important; } + +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; } + +.text-decoration-none { + text-decoration: none !important; } + +.text-break { + word-break: break-word !important; + word-wrap: break-word !important; } + +.text-reset { + color: inherit !important; } + +.visible { + visibility: visible !important; } + +.invisible { + visibility: hidden !important; } + +/* Callout */ +.callout { + border: 1px solid #e9ecef; + border-left-color: #e9ecef; + border-left-width: 1px; + border-left-width: .25rem; + border-radius: .25rem; } + +.callout-primary { + border-left-color: #007bff; } + +.callout-secondary { + border-left-color: #6c757d; } + +.callout-success { + border-left-color: #28a745; } + +.callout-info { + border-left-color: #17a2b8; } + +.callout-warning { + border-left-color: #ffc107; } + +.callout-danger { + border-left-color: #dc3545; } + +.callout-light { + border-left-color: #f8f9fa; } + +.callout-dark { + border-left-color: #343a40; } + +/* Toasts */ +.toast { + min-width: 250px; } + +.toast-primary { + color: #003670; + background-color: #8fc5ff; + border-color: #7abaff; } + .toast-primary strong { + border-top-color: #61adff; } + +.toast-secondary { + color: #303337; + background-color: #bec2c6; + border-color: #b3b7bb; } + .toast-secondary strong { + border-top-color: #a6aaaf; } + +.toast-success { + color: #12491e; + background-color: #a0d8ad; + border-color: #8fd19e; } + .toast-success strong { + border-top-color: #7dca8e; } + +.toast-info { + color: #0a4751; + background-color: #99d6e0; + border-color: #86cfda; } + .toast-info strong { + border-top-color: #72c7d4; } + +.toast-warning { + color: #705503; + background-color: #ffe492; + border-color: #ffdf7e; } + .toast-warning strong { + border-top-color: #ffd965; } + +.toast-danger { + color: #61171e; + background-color: #f0a6ad; + border-color: #ed969e; } + .toast-danger strong { + border-top-color: #e9808a; } + +.toast-light { + color: #6d6e6e; + background-color: #fcfcfd; + border-color: #fbfcfc; } + .toast-light strong { + border-top-color: #ecf1f1; } + +.toast-dark { + color: #171a1c; + background-color: #a6a8ab; + border-color: #95999c; } + .toast-dark strong { + border-top-color: #888c90; } + +/* Progress Timeline */ +.progress-timeline { + padding: 0.2em 0.2em 0.5em 0.2em; } + .progress-timeline ul { + position: relative; + padding: 0; } + .progress-timeline li { + list-style-type: none; + position: relative; } + .progress-timeline li.progress-inactive { + opacity: 0.5; } + .progress-timeline .progress-line { + height: 2px; } + .progress-timeline .progress-line.progress-inactive { + opacity: 0.5; } + +/* Forms severity */ +.form-control.is-invalid.info { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2317a2b8' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e"); } + .form-control.is-invalid.info:focus { + border-color: #17a2b8; + box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); } + +.form-control.is-invalid.warning { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffc107' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e"); } + .form-control.is-invalid.warning:focus { + border-color: #ffc107; + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } + +.form-select.is-invalid:not([multiple]):not([size]).info, +.form-select.is-invalid:not([multiple])[size="1"] +.form-select.is-invalid.info { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%2317a2b8'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%2317a2b8' stroke='none'/%3e%3c/svg%3e"); + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } + .form-select.is-invalid:not([multiple]):not([size]).info:focus, + .form-select.is-invalid:not([multiple])[size="1"] +.form-select.is-invalid.info:focus { + box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); } + +.form-select.is-invalid:not([multiple]):not([size]).warning, +.form-select.is-invalid:not([multiple])[size="1"] +.form-select.is-invalid.warning { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ffc107'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ffc107' stroke='none'/%3e%3c/svg%3e"); + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } + .form-select.is-invalid:not([multiple]):not([size]).warning:focus, + .form-select.is-invalid:not([multiple])[size="1"] +.form-select.is-invalid.warning:focus { + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } + +.form-check-input.is-invalid.info { + border-color: #17a2b8; } + +.form-check-input.is-invalid.info:checked { + background-color: #17a2b8; } + +.form-check-input.is-invalid.info ~ .form-check-label { + color: unset; } + +.form-check-input.is-invalid.info:focus { + box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25); } + +.form-check-input.is-invalid.warning { + border-color: #ffc107; } + +.form-check-input.is-invalid.warning:checked { + background-color: #ffc107; } + +.form-check-input.is-invalid.warning ~ .form-check-label { + color: unset; } + +.form-check-input.is-invalid.warning:focus { + box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25); } + +/* Utilities */ +.mw-75 { + max-width: 75% !important; } + +.mw-50 { + max-width: 50% !important; } + +.mw-25 { + max-width: 25% !important; } + +.mh-75 { + max-height: 75% !important; } + +.mh-50 { + max-height: 50% !important; } + +.mh-25 { + max-height: 25% !important; } + +.p-abs-center-y { + top: 50%; + transform: translateY(-50%); } + +.p-abs-center-x { + left: 50%; + transform: translateX(-50%); } + +.p-abs-center-both { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); } diff --git a/webroot/js/bootstrap-helper.js b/webroot/js/bootstrap-helper.js index 5af6e29..95333db 100644 --- a/webroot/js/bootstrap-helper.js +++ b/webroot/js/bootstrap-helper.js @@ -353,9 +353,9 @@ class Toaster { if (options.title !== false || options.titleHtml !== false) { var $toastHeaderText if (options.titleHtml !== false) { - $toastHeaderText = $('
').html(options.titleHtml); + $toastHeaderText = $('
').html(options.titleHtml); } else { - $toastHeaderText = $('').text(options.title) + $toastHeaderText = $('').text(options.title) } $toastHeader.append($toastHeaderText) } @@ -369,7 +369,7 @@ class Toaster { $toastHeader.append($toastHeaderMuted) } if (options.closeButton) { - var $closeButton = $('') + var $closeButton = $('') .click(function() { $(this).closest('.toast').data('toastObject').removeToast() }) @@ -531,7 +531,7 @@ class ModalFactory { 'confirm-danger', ] - static closeButtonHtml = '' + static closeButtonHtml = '' /** Create the HTML of the modal and inject it into the DOM */ makeModal() { diff --git a/webroot/theme/scss/bootstrap-additional.scss b/webroot/theme/scss/bootstrap-additional.scss new file mode 100644 index 0000000..f2a803d --- /dev/null +++ b/webroot/theme/scss/bootstrap-additional.scss @@ -0,0 +1,144 @@ +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/utilities"; + +@import "mixins/callout"; +@import "mixins/toast"; +@import "mixins/forms-severity"; + +/* Callout */ +.callout { + border: 1px solid $gray-200; + border-left-color: $gray-200; + border-left-width: 1px; + border-left-width: .25rem; + border-radius: .25rem; +} + +@each $color, $value in $theme-colors { + .callout-#{$color} { + @include callout-variant($value); + } +} + + +/* Toasts */ +$toast-bg-level: -7 !default; +$toast-border-level: -6 !default; +$toast-color-level: 7 !default; + +.toast { + min-width: 250px; +} + +@each $color, $value in $theme-colors { + .toast-#{$color} { + @include toast-variant(theme-color-level($color, $toast-bg-level), theme-color-level($color, $toast-border-level), theme-color-level($color, $toast-color-level)); + } +} + +/* Progress Timeline */ +.progress-timeline { + padding: 0.2em 0.2em 0.5em 0.2em; + ul { + position: relative; + padding: 0; + } + li { + list-style-type: none; + position: relative + } + li.progress-inactive { + opacity: 0.5; + } + .progress-line { + height: 2px; + } + .progress-line.progress-inactive { + opacity: 0.5; + } +} + +/* Forms severity */ +.form-control.is-invalid { + &.info { + @include form-control-validation-severity-state(theme-color("info")); + } + &.warning { + @include form-control-validation-severity-state(theme-color("warning")); + } +} + +.form-select.is-invalid:not([multiple]):not([size]), +.form-select.is-invalid:not([multiple])[size="1"] +.form-select.is-invalid { + &.info { + @include form-select-validation-severity-state(theme-color("info")); + } + &.warning { + @include form-select-validation-severity-state(theme-color("warning")); + } +} + +.form-check-input.is-invalid { + &.info { + @include form-check-input-validation-severity-state(theme-color("info")); + } + &.warning { + @include form-check-input-validation-severity-state(theme-color("warning")); + } +} + +/* Utilities */ +// Use bootstrap's utilities API with something like this +// $utilities: map-merge( +// $utilities, +// ( +// "max-width": map-merge( +// map-get($utilities, "max-width"), +// ( +// values: map-merge( +// map-get(map-get($utilities, "max-width"), "values"), +// ( +// 25: 25%, +// 50: 50%, +// 75: 75%, +// ), +// ), +// ), +// ) +// ) +// ); +.mw-75 { + max-width: 75% !important; + } +.mw-50 { + max-width: 50% !important; +} +.mw-25 { + max-width: 25% !important; +} +.mh-75 { + max-height: 75% !important; +} +.mh-50 { + max-height: 50% !important; +} +.mh-25 { + max-height: 25% !important; +} + +.p-abs-center-y { + top: 50%; + transform: translateY(-50%); +} +.p-abs-center-x { + left: 50%; + transform: translateX(-50%); +} +.p-abs-center-both { + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} \ No newline at end of file diff --git a/webroot/theme/scss/mixins/_callout.scss b/webroot/theme/scss/mixins/_callout.scss new file mode 100644 index 0000000..f96ae7a --- /dev/null +++ b/webroot/theme/scss/mixins/_callout.scss @@ -0,0 +1,4 @@ +@mixin callout-variant($border) { + border-left-color: $border; +} + \ No newline at end of file diff --git a/webroot/theme/scss/mixins/_forms-severity.scss b/webroot/theme/scss/mixins/_forms-severity.scss new file mode 100644 index 0000000..0f6e749 --- /dev/null +++ b/webroot/theme/scss/mixins/_forms-severity.scss @@ -0,0 +1,32 @@ +@mixin form-control-validation-severity-state($color) { + background-image: escape-svg(url("data:image/svg+xml,")); + + &:focus { + border-color: $color; + box-shadow: 0 0 0 $custom-select-focus-width rgba($color, .25); + } +} + +@mixin form-select-validation-severity-state($color) { + background-image: escape-svg(url("data:image/svg+xml,")); + background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); + + &:focus { + box-shadow: 0 0 0 $custom-select-focus-width rgba($color, .25); + } +} + +@mixin form-check-input-validation-severity-state($color) { + & { + border-color: $color; + } + &:checked { + background-color: $color; + } + & ~ .form-check-label { + color: unset; + } + &:focus { + box-shadow: 0 0 0 0.2rem rgba($color, .25); + } +} \ No newline at end of file diff --git a/webroot/theme/scss/mixins/_toast.scss b/webroot/theme/scss/mixins/_toast.scss new file mode 100644 index 0000000..adeaec6 --- /dev/null +++ b/webroot/theme/scss/mixins/_toast.scss @@ -0,0 +1,10 @@ +@mixin toast-variant($background, $border, $color) { + color: $color; + @include gradient-bg($background); + border-color: $border; + + strong { + border-top-color: darken($border, 5%); + } +} + \ No newline at end of file