systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
341 lines • 373 kB
JavaScript
import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/platform-browser";
import * as i2 from "@angular/common";
import * as i3 from "../slider/slider.component";
import * as i4 from "../button/button.component";
import * as i5 from "../toggle-button/toggle-button.component";
import * as i6 from "../tooltip/tooltip.directive";
import * as i7 from "systelab-translate";
export var ActionButtonType;
(function (ActionButtonType) {
ActionButtonType[ActionButtonType["BUTTON"] = 0] = "BUTTON";
ActionButtonType[ActionButtonType["TOGGLE_BUTTON"] = 1] = "TOGGLE_BUTTON";
ActionButtonType[ActionButtonType["DROP_DOWN"] = 2] = "DROP_DOWN";
})(ActionButtonType || (ActionButtonType = {}));
export class ImageViewerComponent {
constructor(chref, elementRef, sanitizer) {
this.chref = chref;
this.elementRef = elementRef;
this.sanitizer = sanitizer;
this.imageFilters = '';
this.showSaveButton = true;
this.showZoomByAreaButton = false;
this.showAdjustButton = false;
this.showZoomScale = false;
this.showSliderToolTip = false;
this.sliderZoomMin = 100;
this.sliderZoomMax = 200;
this.sliderZoomStep = 1;
this.transparentBackgroundForButtons = false;
this.overlapImageWithButtons = true;
this.allowBorderColor = 'white';
this.clickActionButton = new EventEmitter();
this.clickOverlayText = new EventEmitter();
this.zoomEnabled = false;
this.dragEnabled = false;
this.imgParams = {
sliderZoomPct: null,
filter: undefined,
top: 0,
left: 0,
width: null,
height: null
};
this.zoomSelector = {
visible: false,
allow: true,
top: null,
left: null,
width: null,
height: null
};
this.zoomScale = {
totalWidth: null,
sliderThumb: 14,
chunks: 8,
marks: [{ marginLeft: 0, label: '' }],
};
this.actionButtonType = ActionButtonType;
this.safeHtml = '';
this.filteredUrl = '';
this.imageWidth = '';
this.zoomArea = {
top: null,
left: null,
scrollTop: null,
scrollLeft: null,
cursorStartX: null,
cursorStartY: null,
imgStartLeft: null,
imgStartTop: null,
minDragLeft: null,
maxDragLeft: null,
minDragTop: null,
maxDragTop: null
};
this.imageClicked = false;
}
ngOnInit() {
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.imageFilters);
this.imageWidth = this.getWidth();
}
doMouseDown(event) {
if (event.target.id === 'imageViewerImg') {
event.preventDefault();
this.initializeCommonParameters(event.clientX, event.clientY);
if (this.dragEnabled) {
this.initializeDragAction();
}
else if (this.zoomEnabled) {
this.initializeZoomByAreaAction();
}
}
}
doMouseMove(event) {
if (this.imageClicked) {
if (this.dragEnabled) {
this.scrollViewport(this.zoomArea.cursorStartX - event.clientX + this.zoomArea.left, this.zoomArea.cursorStartY - event.clientY + this.zoomArea.top);
}
else if (this.zoomEnabled) {
this.updateZoomSelector(event.clientX, event.clientY);
}
}
}
doMouseUp() {
if (this.imageClicked) {
if (this.dragEnabled) {
this.zoomArea.scrollTop = this.viewPort.scrollTop;
this.zoomArea.scrollLeft = this.viewPort.scrollLeft;
}
else if (this.zoomEnabled && this.zoomSelector.allow) {
if (this.zoomSelector.width > 0 && this.zoomSelector.height > 0) {
this.resizeZoomSelectorAndImage();
}
this.chref.detectChanges();
this.imgParams.sliderZoomPct = this.getSliderPct();
}
this.deactivateZoomSelector();
this.imageClicked = false;
}
else {
this.zoomArea.scrollTop = this.viewPort.scrollTop;
this.zoomArea.scrollLeft = this.viewPort.scrollLeft;
}
}
getWidth() {
if (this.zoomEnabled) {
return this.imgParams.width + 'px';
}
else {
return this.imgParams.sliderZoomPct ? this.image.naturalWidth * this.imgParams.sliderZoomPct / 100 + 'px'
: undefined;
}
}
getFilter() {
return this.imgParams.filter;
}
setFilter(filter) {
this.imgParams.filter = filter;
this.filteredUrl = this.getFilterUrl();
}
doAdjust() {
this.imgParams.sliderZoomPct = this.getInitialZoom();
this.dragEnabled = false;
this.zoomEnabled = false;
this.imageWidth = this.getWidth();
}
toggleZoomByArea() {
if (this.zoomEnabled) {
this.zoomEnabled = false;
this.dragEnabled = this.imageOverflowViewport();
}
else {
this.scaleImage(1);
this.zoomEnabled = true;
this.dragEnabled = false;
}
this.imageWidth = this.getWidth();
}
sliderZoomChanged() {
this.dragEnabled = this.imageOverflowViewport();
this.zoomEnabled = false;
this.imageWidth = this.getWidth();
this.scaleImage(1);
}
setInitialValues() {
this.viewPort = this.elementRef.nativeElement;
this.image = this.imageViewerImg.nativeElement;
this.wrapper = this.imageViewerWrapper.nativeElement;
// Set zoom scale width and marks
this.zoomScale.totalWidth = this.viewPort.querySelector('input[type="range"]').offsetWidth;
// Set zoom to fit the image
this.imgParams.sliderZoomPct = this.getInitialZoom();
// Min zoom 5% smaller than initial zoom
this.sliderZoomMin = this.imgParams.sliderZoomPct - 5;
// Calculate ruler marks (100x matches the real size of the image)
const zoomMarkLength = this.sliderZoomMax / this.zoomScale.chunks;
this.zoomScale.marks = [];
for (let i = 1; i <= this.zoomScale.chunks; i += 1) {
const label = i % 2 ? '' : zoomMarkLength * i / 100 + '';
const marginLeftValue = this.getSliderMarkMarginByZoomFactor(zoomMarkLength * i) - 1;
if (marginLeftValue > 0) {
this.zoomScale.marks.push({ marginLeft: marginLeftValue, label });
}
}
this.doAdjust();
}
isFilterEnabled(action) {
return this.imgParams.filter === action;
}
getDropMainDownLabel(dropDownLabel) {
return dropDownLabel.substring(0, dropDownLabel.indexOf('|'));
}
getDropDownLabels(dropDownLabel) {
return dropDownLabel.slice(dropDownLabel.indexOf('|') + 1)
.split(';');
}
getDropDownAction(dropDownActions, i) {
return dropDownActions.split(';')[i];
}
getFilterUrl() {
return this.imgParams.filter ? `url(#${this.imgParams.filter})` : '';
}
initializeCommonParameters(xCoord, yCoord) {
const viewportOffset = this.viewPort.getBoundingClientRect();
this.imageClicked = true;
//store zoomArea left&top
this.zoomArea.left = viewportOffset.left;
this.zoomArea.top = viewportOffset.top;
//store starting positions of cursor (relative to zoomArea)
this.zoomArea.cursorStartX = xCoord + this.viewPort.scrollLeft - this.zoomArea.left;
this.zoomArea.cursorStartY = yCoord + this.viewPort.scrollTop - this.zoomArea.top;
}
initializeZoomByAreaAction() {
//set drag boundaries (relative to zoomArea)
this.zoomArea.minDragLeft = 0;
this.zoomArea.maxDragLeft = this.wrapper.width;
this.zoomArea.minDragTop = 0;
this.zoomArea.maxDragTop = this.wrapper.height;
this.activateZoomSelector();
}
initializeDragAction() {
//store starting positions of image (relative to zoomArea)
this.zoomArea.imgStartLeft = this.image.offsetLeft;
this.zoomArea.imgStartTop = this.image.offsetTop;
//set drag boundaries (relative to zoomArea)
this.zoomArea.minDragLeft = this.wrapper.width - this.image.width;
this.zoomArea.maxDragLeft = 0;
this.zoomArea.minDragTop = this.wrapper.height - this.image.height;
this.zoomArea.maxDragTop = 0;
}
updateZoomSelector(xCoord, yCoord) {
//calculate selector width and height (relative to zoomArea)
let width = (xCoord + this.viewPort.scrollLeft - this.zoomArea.left) - this.zoomArea.cursorStartX;
let height = (yCoord + this.viewPort.scrollTop - this.zoomArea.top) - this.zoomArea.cursorStartY;
//prevent dragging in prohibited areas (relative to zoomArea)
if (xCoord - this.zoomArea.left <= this.zoomArea.minDragLeft) {
width = this.zoomArea.minDragLeft - this.zoomArea.cursorStartX;
}
else if (xCoord - this.zoomArea.left >= this.zoomArea.maxDragLeft) {
width = this.zoomArea.maxDragLeft - this.zoomArea.cursorStartX;
}
if (yCoord - this.zoomArea.top <= this.zoomArea.minDragTop) {
height = this.zoomArea.minDragTop - this.zoomArea.cursorStartY;
}
else if (yCoord - this.zoomArea.top >= this.zoomArea.maxDragTop) {
height = this.zoomArea.maxDragTop - this.zoomArea.cursorStartY;
}
//update zoom-selector
this.zoomSelector.width = Math.abs(width);
this.zoomSelector.height = Math.abs(height);
if (width < 0) {
this.zoomSelector.left = this.zoomArea.cursorStartX - Math.abs(width);
}
if (height < 0) {
this.zoomSelector.top = this.zoomArea.cursorStartY - Math.abs(height);
}
// Prevent zoom factor above the maximum allowed
this.zoomSelector.allow = this.imgParams.width * this.getTargetMagnification() <= this.image.naturalWidth * this.sliderZoomMax / 100;
}
resizeZoomSelectorAndImage() {
const magnification = this.getTargetMagnification();
this.zoomSelector.width *= magnification;
this.zoomSelector.height *= magnification;
//reposition zoom-selector and image (relative to zoomArea)
const selectorLeft = (this.wrapper.width / 2) - (this.zoomSelector.width / 2);
const selectorTop = (this.wrapper.height / 2) - (this.zoomSelector.height / 2);
this.zoomSelector.left = selectorLeft;
this.zoomSelector.top = selectorTop;
this.scaleImage(magnification);
this.imageWidth = this.getWidth();
this.imgParams.sliderZoomPct = this.getSliderPct();
//scroll viewport after the image is resized
setTimeout(() => {
this.scrollViewport(this.zoomArea.cursorStartX * magnification, this.zoomArea.cursorStartY * magnification);
}, 10);
}
getTargetMagnification() {
return this.zoomSelector.width < this.zoomSelector.height ?
this.wrapper.offsetWidth / this.zoomSelector.width
: this.wrapper.offsetHeight / this.zoomSelector.height; //go for the highest magnification
}
getSliderMarkMarginByZoomFactor(zoomFactor) {
return ((zoomFactor) - this.sliderZoomMin) / (this.sliderZoomMax - this.sliderZoomMin)
* (this.zoomScale.totalWidth - this.zoomScale.sliderThumb) + this.zoomScale.sliderThumb;
}
scrollViewport(scrollLeft, scrollTop) {
this.viewPort.scrollLeft = scrollLeft;
this.viewPort.scrollTop = scrollTop;
}
deactivateZoomSelector() {
this.zoomSelector.visible = false;
this.zoomSelector.top = 0;
this.zoomSelector.left = 0;
this.zoomSelector.width = 0;
this.zoomSelector.height = 0;
}
activateZoomSelector() {
this.zoomSelector.visible = true;
this.zoomSelector.top = this.zoomArea.cursorStartY;
this.zoomSelector.left = this.zoomArea.cursorStartX;
this.zoomSelector.width = 0;
this.zoomSelector.height = 0;
}
getSliderPct() {
return Math.round(this.image.offsetWidth / this.image.naturalWidth * 100);
}
imageOverflowViewport() {
return this.image.offsetWidth > this.viewPort.offsetWidth || this.image.offsetHeight > this.viewPort.offsetHeight;
}
scaleImage(magnification) {
this.imgParams.width = this.image.offsetWidth * magnification;
this.imgParams.height = this.image.offsetHeight * magnification;
}
getInitialZoom() {
// Calculate initial Zoom of the image to fit the window
const availableWidth = this.viewPort.offsetWidth;
const availableHeight = this.viewPort.offsetHeight;
const imageWidth = this.image.naturalWidth;
const imageHeight = this.image.naturalHeight;
let newZoom;
if (imageWidth > imageHeight) {
if (imageWidth < availableWidth) {
newZoom = (availableHeight / imageHeight) * 100;
}
else {
newZoom = (availableWidth / imageWidth) * 100;
}
}
else {
if (imageHeight < availableHeight) {
newZoom = (availableWidth / imageWidth) * 100;
}
else {
newZoom = (availableHeight / imageHeight) * 100;
}
}
return Math.min(newZoom, this.sliderZoomMax);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ImageViewerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: ImageViewerComponent, selector: "systelab-image-viewer", inputs: { imageSrc: "imageSrc", imageTitle: "imageTitle", overlayText: "overlayText", actionButtons: "actionButtons", imageFilters: "imageFilters", showSaveButton: "showSaveButton", showZoomByAreaButton: "showZoomByAreaButton", showAdjustButton: "showAdjustButton", showZoomScale: "showZoomScale", showSliderToolTip: "showSliderToolTip", sliderZoomMin: "sliderZoomMin", sliderZoomMax: "sliderZoomMax", sliderZoomStep: "sliderZoomStep", transparentBackgroundForButtons: "transparentBackgroundForButtons", overlapImageWithButtons: "overlapImageWithButtons", allowBorderColor: "allowBorderColor" }, outputs: { clickActionButton: "clickActionButton", clickOverlayText: "clickOverlayText" }, host: { listeners: { "mousedown": "doMouseDown($event)", "mousemove": "doMouseMove($event)", "mouseup": "doMouseUp()" } }, viewQueries: [{ propertyName: "imageViewerWrapper", first: true, predicate: ["imageViewerWrapper"], descendants: true }, { propertyName: "imageViewerImg", first: true, predicate: ["imageViewerImg"], descendants: true }], ngImport: i0, template: "<svg class=\"d-none\" [innerHTML]=\"safeHtml\"></svg>\n\n<div class=\"d-flex flex-column slab-flex-1\" id=\"imageViewerHeader\"\n [ngClass]=\"transparentBackgroundForButtons ? 'bg-color-transparent' : 'bg-color-primary'\"\n data-test-id=\"imageViewerHeader\">\n <div class=\"d-flex\">\n <div class=\"ml-1\">\n @for (actionButton of actionButtons; track actionButton.label) {\n <ng-container>\n <systelab-toggle-button *ngIf=\"actionButton.type===actionButtonType.TOGGLE_BUTTON\" class=\"mr-2\"\n [isChecked]=\"actionButton.state?.checked\"\n [disabled]=\"actionButton.state?.disabled\"\n (click)=\"clickActionButton.emit(actionButton.action)\" [systelabTooltip]=\"actionButton.tooltip\">\n {{actionButton.label}}\n </systelab-toggle-button>\n <systelab-button *ngIf=\"actionButton.type===actionButtonType.BUTTON\" class=\"mr-2\"\n [systelabTooltip]=\"actionButton.tooltip\"\n [disabled]=\"actionButton.state?.disabled\"\n (click)=\"clickActionButton.emit(actionButton.action)\">\n {{actionButton.label}}\n </systelab-button>\n <div *ngIf=\"actionButton.type===actionButtonType.DROP_DOWN\" class=\"dropup slab-button-dropdown\">\n <button id=\"ADDropDownButton\" type=\"button\" class=\"btn btn-outline-primary dropdown-toogle\"\n data-toggle=\"dropdown\">{{getDropMainDownLabel(actionButton.label)}}\n <i class=\"ml-1 icon-chevron-up\"></i>\n </button>\n <div class=\"dropdown-menu slab-dropdown\">\n <ul>\n @for (dropDownLabel of getDropDownLabels(actionButton.label); track dropDownLabel; let i = $index) {\n <li>\n <a (click)=\"clickActionButton.emit(getDropDownAction(actionButton.action, i))\">{{ dropDownLabel }}</a>\n </li>\n }\n </ul>\n </div>\n </div>\n </ng-container>\n }\n </div>\n <div class=\"d-flex slab-flex-1\" id=\"OverImageArea\"></div>\n <div class=\"ml-auto\">\n <a [href]=\"imageSrc\" download=\"{{imageTitle}}\">\n <systelab-button *ngIf=\"showSaveButton\" data-test-id=\"SaveBtn\"\n systelabTooltip=\"{{ 'COMMON_SAVE' | translate | async }}\">\n <i class=\"icon-download1\"></i>\n </systelab-button>\n </a>\n <systelab-toggle-button *ngIf=\"showZoomByAreaButton\" class=\"ml-2\" data-test-id=\"ZoomByAreaBtn\" systelabTooltip=\"{{ 'COMMON_ZOOM_DRAG' | translate | async }}\"\n (click)=\"toggleZoomByArea()\" [isChecked]=\"this.zoomEnabled\">\n <i class=\"icon-search\"></i>\n </systelab-toggle-button>\n <systelab-button *ngIf=\"showAdjustButton\" class=\"ml-2\" data-test-id=\"AdjustBtn\" (click)=\"doAdjust()\" systelabTooltip=\"{{ 'COMMON_ADJUST' | translate | async }}\">\n <i class=\"icon-enlarge\"></i>\n </systelab-button>\n </div>\n <systelab-slider class=\"m-2 pl-2 bg-primary-track\" id=\"ImageViewerSlider\" data-test-id=\"ImageViewerSlider\"\n [systelabTooltip]=\"showSliderToolTip ? (imgParams.sliderZoomPct/100 | number:'1.0-1')+'x' : ''\"\n [(value)]=\"imgParams.sliderZoomPct\" (valueChange)=\"sliderZoomChanged()\"\n [min]=\"sliderZoomMin\"\n [max]=\"sliderZoomMax\"\n [step]=\"sliderZoomStep\"></systelab-slider>\n\n </div>\n <div class=\"d-flex justify-content-end\" *ngIf=\"showZoomScale\">\n <div id=\"zoomScale\" class=\"m-2\" [style.width]=\"zoomScale.totalWidth+'px'\">\n @for (mark of zoomScale.marks; track mark.label) {\n <div class='zoomScaleMark'\n [style.left.px]=\"mark.marginLeft\"\n [style.height.px]=\"mark.label !== ''? 10:6\"\n >{{mark.label | number:'1.0-1'}}</div>\n }\n </div>\n </div>\n</div>\n\n<div *ngIf=\"imageSrc; else noImage\" id=\"imageViewerWrapper\" #imageViewerWrapper [ngClass]=\"{'zooming' : zoomEnabled, 'dragging' : dragEnabled }\">\n\n <img data-test-id=\"ImageViewerImg\" id=\"imageViewerImg\" #imageViewerImg\n [ngClass]=\"{'no-overlapping' : !overlapImageWithButtons }\"\n [src]=\"imageSrc\"\n (load)=\"setInitialValues()\"\n [ngStyle]=\"{\n 'filter': filteredUrl,\n 'width': imageWidth,\n 'cursor':zoomSelector.visible && !zoomSelector.allow ? 'not-allowed' : 'inherit'}\"\n alt=\"{{imageTitle}}\"/>\n\n <div id=\"selector\" data-test-id=\"ZoomSelector\"\n [style.display]=\"zoomSelector.visible ? 'block' : 'none'\"\n [style.borderColor]=\"zoomSelector.allow ? allowBorderColor : 'red'\"\n [style.top.px]=\"zoomSelector.top\"\n [style.left.px]=\"zoomSelector.left\"\n [style.width.px]=\"zoomSelector.width\"\n [style.height.px]=\"zoomSelector.height\"></div>\n</div>\n<div class=\"mlab-link\" id=\"imageViewerOverlayText\" data-test-id=\"ImageViewerOverlayText\" *ngIf=\"overlayText\"\n (click)=\"clickOverlayText.emit()\">{{overlayText}}</div>\n\n<ng-template #noImage>\n <span class=\"slab-flex-1 d-flex justify-content-center align-items-center \" style=\"font-size: 5em; color: lightgrey;\">\n <i class=\"icon-exclamation\"></i>\n </span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";/*!\n * Bootstrap v4.6.2 (https://getbootstrap.com/)\n * Copyright 2011-2022 The Bootstrap Authors\n * Copyright 2011-2022 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n */:root{--blue: #007bff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red: #dc3545;--orange: #fd7e14;--yellow: #ffc107;--green: #28a745;--teal: #20c997;--cyan: #17a2b8;--white: #fff;--gray: #6c757d;--gray-dark: #343a40;--primary: #0064D1;--secondary: #AAAAAA;--success: #C2D95D;--info: #B28CE8;--warning: #FFD236;--danger: #FF4944;--light: #f8f9fa;--dark: #343a40;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--font-family-sans-serif: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace}*,*:before,*:after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex=\"-1\"]:focus:not(:focus-visible){outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-original-title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0;text-decoration-skip-ink:none}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:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0064d1;text-decoration:none;background-color:transparent}a:hover{color:#003f85;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}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;padding:0}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}h1,.h1{font-size:2.5rem}h2,.h2{font-size:2rem}h3,.h3{font-size:1.75rem}h4,.h4{font-size:1.5rem}h5,.h5{font-size:1.25rem}h6,.h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.2}.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}small,.small{font-size:.875em;font-weight:400}mark,.mark{padding:.2em;background-color:#fcf8e3}.list-unstyled,.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:.875em;color:#6c757d}.blockquote-footer:before{content:\"\\2014\\a0\"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#6c757d}code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;font-size:87.5%;color:#212529}pre code{font-size:inherit;color:inherit;word-break:normal}.pre-scrollable{max-height:340px;overflow-y:scroll}.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width: 576px){.container-sm,.container{max-width:540px}}@media (min-width: 768px){.container-md,.container-sm,.container{max-width:720px}}@media (min-width: 992px){.container-lg,.container-md,.container-sm,.container{max-width:960px}}@media (min-width: 1200px){.container-xl,.container-lg,.container-md,.container-sm,.container{max-width:1140px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col-xl,.col-xl-auto,.col-xl-12,.col-xl-11,.col-xl-10,.col-xl-9,.col-xl-8,.col-xl-7,.col-xl-6,.col-xl-5,.col-xl-4,.col-xl-3,.col-xl-2,.col-xl-1,.col-lg,.col-lg-auto,.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1,.col-md,.col-md-auto,.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1,.col-sm,.col-sm-auto,.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1,.col,.col-auto,.col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-1>*{flex:0 0 100%;max-width:100%}.row-cols-2>*{flex:0 0 50%;max-width:50%}.row-cols-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-4>*{flex:0 0 25%;max-width:25%}.row-cols-5>*{flex:0 0 20%;max-width:20%}.row-cols-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-12{flex:0 0 100%;max-width:100%}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}@media (min-width: 576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-sm-1>*{flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-sm-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-sm-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-sm-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-sm-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}}@media (min-width: 768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-md-1>*{flex:0 0 100%;max-width:100%}.row-cols-md-2>*{flex:0 0 50%;max-width:50%}.row-cols-md-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-md-4>*{flex:0 0 25%;max-width:25%}.row-cols-md-5>*{flex:0 0 20%;max-width:20%}.row-cols-md-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto;max-width:100%}.col-md-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-md-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-md-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-md-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-md-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}}@media (min-width: 992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-lg-1>*{flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto;max-width:100%}.col-lg-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-lg-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-lg-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-lg-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-lg-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}}@media (min-width: 1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.row-cols-xl-1>*{flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{flex:0 0 33.3333333333%;max-width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{flex:0 0 16.6666666667%;max-width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{flex:0 0 8.33333333%;max-width:8.33333333%}.col-xl-2{flex:0 0 16.66666667%;max-width:16.66666667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.33333333%;max-width:33.33333333%}.col-xl-5{flex:0 0 41.66666667%;max-width:41.66666667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.33333333%;max-width:58.33333333%}.col-xl-8{flex:0 0 66.66666667%;max-width:66.66666667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.33333333%;max-width:83.33333333%}.col-xl-11{flex:0 0 91.66666667%;max-width:91.66666667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}}.table{width:100%;margin-bottom:1rem;color:#212529}.table th,.table td{padding:.75rem;vertical-align:top;border-top:1px solid #D8D8D8}.table thead th{vertical-align:bottom;border-bottom:2px solid #D8D8D8}.table tbody+tbody{border-top:2px solid #D8D8D8}.table-sm th,.table-sm td{padding:.3rem}.table-bordered,.table-bordered th,.table-bordered td{border:1px solid #D8D8D8}.table-bordered thead th,.table-bordered thead td{border-bottom-width:2px}.table-borderless th,.table-borderless td,.table-borderless thead th,.table-borderless tbody+tbody{border:0}.table-striped tbody tr:nth-of-type(odd){background-color:#0000000d}.table-hover tbody tr:hover{color:#212529;background-color:#00000013}.table-primary,.table-primary>th,.table-primary>td{background-color:#b8d4f2}.table-primary th,.table-primary td,.table-primary thead th,.table-primary tbody+tbody{border-color:#7aaee7}.table-hover .table-primary:hover{background-color:#a2c7ee}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#a2c7ee}.table-secondary,.table-secondary>th,.table-secondary>td{background-color:#e7e7e7}.table-secondary th,.table-secondary td,.table-secondary thead th,.table-secondary tbody+tbody{border-color:#d3d3d3}.table-hover .table-secondary:hover{background-color:#dadada}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#dadada}.table-success,.table-success>th,.table-success>td{background-color:#eef4d2}.table-success th,.table-success td,.table-success thead th,.table-success tbody+tbody{border-color:#dfebab}.table-hover .table-success:hover{background-color:#e6efbe}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#e6efbe}.table-info,.table-info>th,.table-info>td{background-color:#e9dff9}.table-info th,.table-info td,.table-info thead th,.table-info tbody+tbody{border-color:#d7c3f3}.table-hover .table-info:hover{background-color:#dacaf5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#dacaf5}.table-warning,.table-warning>th,.table-warning>td{background-color:#fff2c7}.table-warning th,.table-warning td,.table-warning thead th,.table-warning tbody+tbody{border-color:#ffe896}.table-hover .table-warning:hover{background-color:#ffecae}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffecae}.table-danger,.table-danger>th,.table-danger>td{background-color:#ffcccb}.table-danger th,.table-danger td,.table-danger thead th,.table-danger tbody+tbody{border-color:#ffa09e}.table-hover .table-danger:hover{background-color:#ffb3b2}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#ffb3b2}.table-light,.table-light>th,.table-light>td{background-color:#fdfdfe}.table-light th,.table-light td,.table-light thead th,.table-light tbody+tbody{border-color:#fbfcfc}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>th,.table-dark>td{background-color:#c6c8ca}.table-dark th,.table-dark td,.table-dark thead th,.table-dark tbody+tbody{border-color:#95999c}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>th,.table-active>td{background-color:#00000013}.table-hover .table-active:hover{background-color:#00000013}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:#00000013}.table .thead-dark th{color:#fff;background-color:#343a40;border-color:#454d55}.table .thead-light th{color:#495057;background-color:#e9ecef;border-color:#d8d8d8}.table-dark{color:#fff;background-color:#343a40}.table-dark th,.table-dark td,.table-dark thead th{border-color:#454d55}.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(odd){background-color:#ffffff0d}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:#ffffff13}@media (max-width: 575.98px){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-sm>.table-bordered{border:0}}@media (max-width: 767.98px){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-md>.table-bordered{border:0}}@media (max-width: 991.98px){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-lg>.table-bordered{border:0}}@media (max-width: 1199.98px){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-responsive>.table-bordered{border:0}.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#52a5ff;outline:0;box-shadow:0 0 0 .2rem #0064d140}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{appearance:none}select.form-control:-moz-focusring{color:transparent;text-shadow:0 0 0 #495057}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block;width:100%}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:1.25rem;line-height:1.5}.col-form-label-sm{padding-top:calc(.25rem + 1px);padding-bottom:calc(.25rem + 1px);font-size:.875rem;line-height:1.5}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;font-size:1rem;line-height:1.5;color:#212529;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.form-control-lg{height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}select.form-control[size],select.form-control[multiple],textarea.form-control{height:auto}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:flex;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;padding-left:1.25rem}.form-check-input{position:absolute;margin-top:.3rem;margin-left:-1.25rem}.form-check-input[disabled]~.form-check-label,.form-check-input:disabled~.form-check-label{color:#6c757d}.form-check-label{margin-bottom:0}.form-check-inline{display:inline-flex;align-items:center;padding-left:0;margin-right:.75rem}.form-check-inline .form-check-input{position:static;margin-top:0;margin-right:.3125rem;margin-left:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#c2d95d}.valid-tooltip{position:absolute;top:100%;left:0;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#212529;background-color:#c2d95de6;border-radius:.25rem}.form-row>.col>.valid-tooltip,.form-row>[class*=col-]>.valid-tooltip{left:5px}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:block}.was-validated .form-control:valid,.form-control.is-valid{border-color:#c2d95d;padding-right:calc(1.5em + .75rem)!important;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23C2D95D' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.was-validated .form-control:valid:focus,.form-control.is-valid:focus{border-color:#c2d95d;box-shadow:0 0 0 .2rem #c2d95d40}.was-validated select.form-control:valid,select.form-control.is-valid{padding-right:3rem!important;background-position:right 1.5rem center}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.was-validated .custom-select:valid,.custom-select.is-valid{border-color:#c2d95d;padding-right:calc(.75em + 2.3125rem)!important;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\") right .75rem center/8px 10px no-repeat,#fff url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23C2D95D' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\") center right 1.75rem/ calc(.75em + .375rem) calc(.75em + .375rem) no-repeat}.was-validated .custom-select:valid:focus,.custom-select.is-valid:focus{border-color:#c2d95d;box-shadow:0 0 0 .2rem #c2d95d40}.was-validated .form-check-input:valid~.form-check-label,.form-check-input.is-valid~.form-check-label{color:#c2d95d}.was-validated .form-check-input:valid~.valid-feedback,.was-validated .form-check-input:valid~.valid-tooltip,.form-check-input.is-valid~.valid-feedback,.form-check-input.is-valid~.valid-tooltip{display:block}.was-validated .custom-control-input:valid~.custom-control-label,.custom-control-input.is-valid~.custom-control-label{color:#c2d95d}.was-validated .custom-control-input:valid~.custom-control-label:before,.custom-control-input.is-valid~.custom-control-label:before{border-color:#c2d95d}.was-validated .custom-control-input:valid:checked~.custom-control-label:before,.custom-control-input.is-valid:checked~.custom-control-label:before{border-color:#d2e386;background-color:#d2e386}.was-validated .custom-control-input:valid:focus~.custom-control-label:before,.custom-control-input.is-valid:focus~.custom-control-label:before{box-shadow:0 0 0 .2rem #c2d95d40}.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label:before,.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label:before{border-color:#c2d95d}.was-validated .custom-file-input:valid~.custom-file-label,.custom-file-input.is-valid~.custom-file-label{border-color:#c2d95d}.was-validated .custom-file-input:valid:focus~.custom-file-label,.custom-file-input.is-valid:focus~.custom-file-label{border-color:#c2d95d;box-shadow:0 0 0 .2rem #c2d95d40}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:.875em;color:#ff4944}.invalid-tooltip{position:absolute;top:100%;left:0;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.875rem;line-height:1.5;color:#fff;background-color:#ff4944e6;border-radius:.25rem}.form-row>.col>.invalid-tooltip,.form-row>[class*=col-]>.invalid-tooltip{left:5px}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:block}.was-validated .form-control:invalid,.form-control.is-invalid{border-color:#ff4944;padding-right:calc(1.5em + .75rem)!important;background-image:url(\"data:image/svg+xml,%3csvg xmlns='ht